ブログ記事の中で別ページを紹介するとき、テキストリンクだけでなく、タイトル、説明文、URL、画像をまとめたカード形式で表示することがあります。いわゆるブログカードやリンクカードと呼ばれるUIです。
カードに画像を入れると目を引きやすくなりますが、常に正解というわけではありません。画像を自動で取得するのか、記事側で手動指定するのか、画像がない場合にどう見せるのかで、実装の安定性も運用のしやすさも変わります。
一般的なブログサイトではどうしているか
多くのブログCMSやノート系サービスでは、URLを貼り付けると、リンク先のタイトル、説明文、OGP画像を取得してカード化する仕組みがあります。編集画面でURLを貼るだけで、それらしいプレビューが生成されるため、書く側の負担は小さくなります。
ただし、見えているカードはその場で毎回リンク先を読みに行っているとは限りません。多くの場合は、貼り付けた時点や公開時点で取得した情報を保存したり、サービス側でキャッシュしたりします。リンク先のOGP画像があとで変わっても、記事側のカードがすぐ変わらないことがあります。
- URLを貼るとOGP画像やタイトルを自動取得する
- 取得した結果を記事データやサービス側キャッシュとして保持する
- 画像が取れない場合は、タイトル、説明文、ドメインだけで表示する
- 埋め込み先のサービスによっては、カードの見た目を編集できない
- 内部リンクだけ専用カードにし、外部リンクは簡易カードにすることもある
画像ありカードの良いところ
画像があるリンクカードは、記事中で視線を止めやすく、リンク先の雰囲気も伝わりやすくなります。アプリ、サービス、商品、イベント、記事の紹介では、アイコンやOGP画像があることで読者がリンク内容を判断しやすくなります。
特に、同じ記事内に複数の外部リンクが並ぶ場合は、画像があることでカード同士の違いを視覚的に区別できます。単なる青いテキストリンクの羅列より、読み物としては親切に見えることがあります。
画像ありカードの難しいところ
一方で、外部サイトの画像をそのまま表示する場合は、いくつか注意が必要です。画像が取得できない、縦横比が合わない、リンク先の画像が変わる、表示速度に影響する、といった問題が起きます。
- 外部画像がCORSやhotlink制限で表示できないことがある
- OGP画像の比率がカードUIと合わず、重要な部分が切れることがある
- リンク先の画像が差し替わると、記事の見た目も変わってしまう可能性がある
- 画像が多い記事では、読み込み速度やレイアウトシフトに影響する
- アプリのアイコンやロゴを使う場合は、利用規約や権利面の確認が必要になる
手動指定は地味だが安定しやすい
小さなサイトや編集方針をコントロールしたいサイトでは、画像を自動取得せず、必要なカードだけ手動で画像を指定する方法もあります。手間は増えますが、表示する画像、トリミング、説明文を自分で決められるため、記事全体の品質は安定しやすくなります。
逆に、画像がなくても意味が通るカードにしておけば、外部リンク紹介のたびに画像を用意する必要がありません。技術メモ、検証記事、ドキュメントリンクが多いサイトでは、テキスト中心のカードの方が読みやすいこともあります。
このサイトならどう考えるか
TOOLPOOLのように、検証記事やツールの補足記事が中心のサイトでは、まずはテキストカードを基本にするのが扱いやすいです。タイトル、短い説明、ドメインが見えれば、読者はリンク先の性質を十分判断できます。
画像を入れる場合は、すべてのカードに自動で入れるより、アプリ紹介、サービス紹介、プロダクト紹介など、画像が理解を助ける場面に絞る方が現実的です。画像がないカードでも破綻しない設計にしておけば、記事を書く速度と表示の安定性を両立できます。
実装するときの現実的な方針
- 最初はタイトル、説明文、ドメインだけのカードにする
- 画像は任意項目として追加できるようにする
- 画像がない場合のデザインを先に整える
- 外部URLからの自動取得は、キャッシュや失敗時の扱いを決めてから導入する
- アプリアイコンやロゴは、必要な場合だけ利用条件を確認して使う
ブログカードは、見た目を豪華にするためだけの部品ではありません。読者が「これはどこへ行くリンクなのか」「なぜこの記事中に置かれているのか」を判断しやすくするためのUIです。画像を入れるかどうかも、その目的に合うかどうかで決めるのがよさそうです。