0%

Designデザインワークショップ

Posted:2016.07.08

いろいろなウェブサイトで使える汎用的なリストデザイン集

見出し、テーブルに続く第3回目はリストのデザインをまとめました。リストは主に項目を並べる時に用いられますが、ナビゲーションやメニューなどの実装といった幅広い場面で用いられます。また、縦型や横型などリスト並べる方向や序列があるかないかの違いもあり種類も多い為、デザインも比例して増えてきます。

 

今回はリストの種類と目的別に分けてデザインを紹介していきたいと思います。

 

序列リスト

リストの項目自身に順番や順位としての意味を持つリストのタイプです。数字などのナンバリングを振り分けたり、順番や順位でアクセントをつけたりといったデザインがマッチします。

 

1.リストのマーカーにナンバリング

 

dws0708-001

 

リストのマーカーに数字が充て振られ、リスト自体がグルーピングされると同時に並びが整理され見やすくなります。項目の数が多い場合などに効果的なデザインです。

 

 

2.ランキング形式のリスト

 

dws0708-002

 

順番に並べるだけでなく、デザインを変化させることにより順位も認識できるようになったデザインです。シンプルなデザインにする場合は文字サイズや太さの調整でコントロールすると自然な感じにまとまります。

 

 

非序列リスト

項目が並列で同等に並べられたリストです。ナビゲーションメニューなどもこの種類に含まれます。入れ子のリスト構成になるケースもありますので、シンプルなものから複雑なものまでバリエーションは豊富です。

 

3.ワンポイントのマーカー

 

dws0708-003

 

シンプルにアイコンや図形などのマーカーが付きます。アンダーラインや背景色を入れることで変化をつけることもできます。

 

 

4.縦型ナビメニュー風(入れ子)

 

dws0708-004

 

縦にリストが並んだナビメニューなどでよく見られる構成です。リストの中にリストが含まれた入れ子の部分はデザインを変えています。jQueryなどを併用し、アコーディオンパネルのような動きがついたものもよく見かけます。

 

 

定義リスト

定義される文言があり、それに対しての説明がついたリストを指します。説明だけではイメージしにくいのですが、実際のデザインではいろんな箇所に使われています。

 

5.FAQなどのお問い合わせ内容リスト

 

dws0708-005

 

質問部分が定義される項目にあたり、回答部分を説明文で表現します。各項目の見出しアイコンにQとAの文字をデザインに使用しています。

 

 

6.新着情報の一覧リスト

 

dws0708-010

 

日付部分を定義部分に置き、お知らせ内容を説明部分で表現します。定義項目と説明文をインラインで並べることがポイントになります。

 

 

横並びリスト

基本的にリストは縦方向に並んでいきますが、ナビゲーションメニューなどで短いキーワードをインラインで並べるケースもあります。CSSでの調整が必要になりますが、使用頻度も高いデザインです。

 

7.グローバルナビゲーションリスト

 

dws0708-006

 

各リスト項目が均等幅で並んだグローバルナビゲーションでよく用いられている形です。リストの項目数は限られており、少なすぎても多すぎてもいけません。

 

 

8.パンくずリスト・フローチャート

 

dws0708-007

 

横一列に並んだリストに進行方向や時系列、階層構造などの意味合いをもたせたリストです。矢印をデザインに採用したりと工夫されています。

 

 

9.タグリスト

 

dws0708-008

 

ブログなどで記事のキーワード検索で見かけるデザインです。リストの周りに余白を設けることで独立したデザインになります。インラインで並びますが、キーワードが改行で途切れないようにしないといけません。

 

 

グリッドリスト

複数のカラム上に並び、リスト内部にイメージやテキストなどが含まれ、リスト自体がコンテンツとして成立したデザインです。横方向に並んでいきますが、カラム数を超えた分は改行されて配置されます。

 

10.カード型

 

dws0708-009

 

近年のウェブデザインに多いレイアウトで、コンテンツがリストの項目内でまとまっています。視認性を確保するためにも3〜4カラムまでに抑えて、コンテンツ内もシンプルにすることがポイントです。

 

 

今回のリストもウェブサイトのデザインをしていく中で登場頻度が多い部分になります。その分デザインの幅も広いのでどのように上手く表現できるかがポイントになります。メンテナンスが容易になるというメリットもあるので、できるだけリストでマークアップするようにして、CSSでスタイリングしていくようにしましょう。

 

今回のデザインも同じくCSSで作成することが出来ます。サンプルはこちらからどうぞ。

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】