ポータルサイトのコンテンツ一覧を美しく魅せるテクニック11選

ポータルサイトを利用する目的と言えば、「知りたい情報がある」「読みたい記事がある」という事が挙げられますが、
単純にテキストだけが並んでいる一覧を眺めていても、読みたい・見たいという気持ちにはなれません。

画像を載せたり、テキストを強調したりなどの工夫はもちろん必要ですが、
さらに1歩進んで”コンテンツ一覧を美しく魅せる”テクニックについて考えたいと思います。

カード式ならスッキリまとまりコンテンツを確認しやすい

記事コンテンツメインで運用されているポータルサイトには、
カード式で一覧を表示しているケースが多いです。
1記事のスペースが決まっているのでスッキリまとまり、
レスポンシブの対応もしやすいのが特徴です。

カード式を利用しているサイト例

◯BAUS
https://bau-s.jp/

動きを加えるとグッと印象がかわります。

See the Pen Business Card /r/web_design — Ciclop by Eduard Kosicky (@heyitsedward) on CodePen.

カーソルを当てると隠されていた内容が表示される仕様です。
スペースを節約できるので、文章を多く載せたい場合は効果的です。

背景にアニメーションを施すというのも面白いですね。

「いいね」や「フォロー」をおねだりするユーモアがあっても良いと思います。

オススメの記事一覧などはスウッシュカードで表示すると印象的になりますね。

グリッドレイアウトで個性を発揮

ビジュアルを重視しているポータルサイトならばグリッドレイアウトを利用してみたいですね。
アートやフォト系のサイトでよく見かけますが、かっこよく見えます。

グリッドレイアウトのサイト例

◯STUDIO LEMON DENCHI
http://studiolemondenchi.jp/

See the Pen Diamond CSS Grid by Peter Stevenson (@SilverOkami42) on CodePen.

ひし形のグリッドレイアウトだとさらに個性的です。
スペースは狭く掲載できる内容は制限されますが（笑）。

読み込む際にアニメーションを利用すると洗練された感じが出てきます。
どんどん使っていきたいテクニックですね。

ハチの巣式なんてのもありますね。需要があるかはわかりませんが（笑）。

その他の1歩進んだ一覧表示方法

リスト表示とカード表示を切り替えられるとユーザーにとっては親切ですね。
ショッピングサイトではよく利用されていますが、ポータルサイトでも利用したいテクニックです。

一覧の中から検索できる機能があると便利ですね。
キーワードで検索したい場合は重宝します。

まとめ

ポータルサイトは情報や記事のコンテンツが豊富であることが成功の第一条件ですが、
魅せ方次第で質や印象が大きく変わってきます。
情報やポータルサイト自体にどのようにして付加価値を付けるのか、
今回紹介したテクニックが1つの手段となる気がします。