ページのイメージ
デザイン 2020/06/25

【2020年】ただ並べるだけじゃない! 工夫いっぱい“一覧”のデザイン

  •  
  • このエントリーをはてなブックマークに追加

 

こんにちは!デザイナーのフジモトです。

ご新規でのデザイン案件が多くなってきた今日この頃。

行政、企業、製造業、ありとあらゆるジャンルのデザインパーツの中でも、何気に重要なのは情報などを一括りにカテゴライズする「一覧」の見せ方です。

その「一覧」のデザインですが、並行して作っていると、意識はしていないもののどこかマンネリズムを感じる…というのも結構あるあるな悩みではないでしょうか。

今一度、デザインの幅を広げるためにも、デザインのトレンド動向や、なるほどという工夫がいっぱいのWebサイトのデザインまとめましたので、ご紹介したいと思います。

(1)ホバー時に、思わず見入ってしまう動画と工夫が楽しい

「丸亀製麺」-丸亀製麺のメニュー https://www.marugame-seimen.com/

 

背景と、手前の透過された写真のアイテムが1ブロックになっています。

アイテムのホバー時に背景の動画が再生されるのですが、丸亀製麺の食品が出来上がる、まさに「美味しそう!」の瞬間を切り取っています。

レスポンシブサイトのレイアウトも考慮し、縦方向の画面幅になった際にも違和感のないアイテムの比率を採用しているところも、かなり工夫されていると感じます。

 

(2)左右2カラムで大きくスクロール展開

「JPホールディングスグループ採用サイト」-JOB  LIST https://jphdgroup-recruit.jp/

 

「私たちの仕事と職種」の右側のテキストコンテンツは固定のまま、左部分の職種一覧のブロックが固定スクロールされます。一時期、ダイナミックな見せ方としてかなり流行したパララックスデザインの応用です。一覧のアイテムは数が多いほど規則正しく1列に並べられることが多いですが、ありそうで無い斬新なデザインだと感じました。

SMPの際にはグリッドレイアウトになっており、UIも配慮されています。

 

(3)背景とリストのカレントで一体感を生むダイナミックな見せ方

「浅井良工務店」-DANRAN Projectとは? https://www.asairyo.com/

 

5つの特長の切り口を紹介するための一覧のレイアウト。右側のリストエリアと連動して、物語を感じさせるダイナミックなビジュアルが用意されています。

一覧のデザインとして、その下の事例紹介の一覧デザインでも、オンマウスで施工事例画像が切り替わるなど、少ない表示領域で情報をコンパクトにまとめる工夫がされている設計が印象的でした。

 

(4)商品の力を最大限に利用した、魅力あるメインビジュアル

「有限会社マルヒロ」-TOPページ https://www.hasamiyaki.jp/

 

画面いっぱいを使って、商品一覧がそのままサイトトップの顔になっているパターン。

俯瞰で撮影された自社ブランドの商品写真ですが、クリックして商品詳細に遷移するだけでなく、それぞれホバーすると同じ型番の商品の色違い、柄違いの商品画像に切り替わります。

少ない表示領域で、バリエーション展開を紹介できている工夫がすごい!

 

(5)横スライドと各種アイコンの動きが楽しい

「まるまるまるもりプロジェクト」 - 丸森町にある可能性一覧 https://marumarumarumori.jp/

 

宮城県伊具郡丸森町の移住、各プロジェクトの活動の紹介サイト。

横方向へのスライドとアニメーションが組み合わさっており、カレントになったアイテムの中身はモーション付きで表示されます。クリックした際に完全にページ遷移するのではなく、モーダルで全画面に切り替わるという配慮も新しいなと思います。

見せ方として、各カテゴリがテキスタイル でうまくデザインされている部分もかなり素敵なデザインだと思います。

 

まとめ

新規で制作されるデザインは、PC、スマートフォンなどデバイスを問わないレスポンシブサイトがほとんどを占めています。

そのどちらにも対応できる柔軟なレイアウトは、日々進化していると言う所感です。スクリーンショットを撮ったり、動きについては手書きでも良いのでアイデアをストックしておくようにしています。

今後もまた、一覧のデザインだけでなく、機能面でも新しい試みをしているWebサイトがあればご紹介できたらと思います!


しずおかオンライン中途採用社員も、積極募集中!
「womo」「イエタテ」のスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら!

Category

Ranking