【Web担当者向け】Webサイトの定番UIパーツ8選 -名称と機能、メリット・デメリットやデザイン例をご紹介-

オレンジ社でWebディレクション/デザインを担当している加藤です。

Webサイトでよく使われているパーツで、デザインも機能もイメージがつくけれど、いざ発注をしようと思った時に名前が分からないパーツ。意外と結構ありませんか？

 

「押すとメニューが表示される三本線」とか「今いるページがサイト内のどこにいるのか分かるもの」とか「押すとコンテンツが開いてもう一度押すと閉じるもの」とか、これでもある程度イメージはつくと思いますが、一般的に使われている名称を知っているとWeb制作の発注をする際にも制作者との認識の齟齬が無く、よりスムーズに進むかもしれないですよね。

 

また、それらの機能がユーザーにとってどのような印象を与えるか、メリットあるいはデメリットを理解できているとより良いWebサイトの制作ができるかと思います。

 

今回はWebサイトでよく使われる定番UI（ユーザーインターフェース）パーツを集めてみましたので、その名称と機能、メリット・デメリットやデザイン例についてご紹介します。

 

 

 

 

 

1．ハンバーガーメニュー

 

冒頭で記載した「押すとメニューが表示される三本線」ですね。

クリックまたはタップをすることで、メニュー画面を表示できます。

スマートフォンやタブレットなど、PC画面に比べて表示領域が狭い場合に多くのナビゲーションメニューを格納する為に実装されることが多いです。

 

名前の由来は三本の線がハンバーガーのように見えるからです。（そのままですが）

 

現在は一般的にもこのアイコンでメニューを表示することが広く認知されていることもあり、多くのサイトで使われているデザイン手法になります。

ただし、メニューを表示させるためにどうしてもワンアクション増えてしまう為、そもそも表示させるメニューが少ない場合など、実装する必要性が無ければ闇雲に採用しない方が良いかもしれません。

あくまで、ナビゲーションメニューを表示させる為のひとつの手法として認識しておくことが重要です。

 

また、先程「現在は一般的にもこのアイコンがメニューを表示することが広く認知されている」と記載しましたが、ターゲットとするユーザー層によっては、このアイコンがメニューを表示させることが認識できない可能性もあります。

その為、アイコンの下に「メニュー」と記載しておくなどの対応も検討しておくと良いでしょう。

 

 

 

2．パンくずリスト

 

 

「パンくずリスト」はナビゲーションメニューの一種です。

現在、閲覧しているページがサイト内のどこに位置しているのかを分かりやすくする為のもので、一般的にはサイトの階層構造で表すことが多いです。

 

ユニークな名前ですが、グリム童話「ヘンゼルとグレーテル」でヘンゼルとグレーテルが、森の中で道に迷わないように（来た道を辿れるように）目印としてパンくずを落としながら歩いたことが由来となっています。

※英語圏においても「breadcrumbs list」として呼ばれています。

 

パンくずリストが設置されているメリットとしては、閲覧しているページの上位階層にアクセスしやすくなる為、ユーザー行動としてサイト内の回遊性が高まることが期待されます。

上記の画像ではパンくずリストが「TOP＞事業内容＞Webソリューション事業」となっており、現在閲覧しているページは「Webソリューション事業」ページですが、他の事業も何があるか見てみたいとなった時に素早く上位階層である「事業内容」ページへ遷移することができます。

 

また、ユーザビリティ向上の他にも、パンくずリストは有効な内部リンク対策となりSEO向上が期待できる為、ある程度の規模のサイトやメディアサイトは設置をしておくと良いでしょう。

 

 

3．アコーディオン

 

クリックまたはタップすることで、コンテンツ部分が開閉される機能を持ったパーツを「アコーディオン」といいます。

Q&Aでクリックしたら答えが表示されるといった使い方や、階層の深いメニューを通常は非表示にしておきクリックしたら表示されるといった使い方が多いです。

 

クリックすると開くことが分かるようにアイコンを併設することが一般的です。

閉じている時は開くことが可能と分かるように「＋」アイコン、開いている時は閉じることが可能と分かるように「－」アイコンで表現します。

（または、下方向に開くことを表す「下矢印」アイコンと上方向に閉じることを表す「上矢印」アイコンで表現することも多いです。）

 

コンテンツが多く縦に長いページをスッキリさせる為に、アコーディオンが用いられることもありますが闇雲に使用すべきではないと考えます。

というのも、コンテンツを読むたびに何度もクリックを繰り替えす必要が出てきてしまう為、ユーザーにとっては煩わしくなってしまう恐れがあるからです。

ユーザーは縦にスクロールすることには慣れておりそれほど不快に感じないとも言われておりますので、隠す必要のないコンテンツをわざわざアコーディオンにして隠すといったことのないようにしましょう。

 

 

4．タブメニュー

 

 

タブの選択によって、画面遷移をせずにコンテンツの表示・非表示を切り替える機能・パーツをタブメニューといいます。

並列となる情報をカテゴリー別や分野別で表示したい時に便利な機能です。

選択中のタブはハイライトし、それ以外のタブとは明らかに差異化されたデザインにすることが重要です。

ただし、アコーディオン同様に初期状態では非表示のコンテンツが発生する為、実装すべきかどうかはコンテンツの内容に応じて判断することが必要といえます。

 

 

5．ドロップダウンメニュー

 

 

ドロップダウンメニューは、メニュー名をクリックまたはホバーさせることで複数のメニューを表示させる機能・パーツです。

階層の深いメニューを表示させたい時に使用されます。

 

サイト上部にあることの多いメインのメニュー（グローバルナビゲーション）からは、あらゆるページに最短でアクセスできることが理想ではありますが、ある程度の規模のサイトでは全てのメニューを表示するスペースが無い上に、初期状態でたくさんのメニューが表示されているとユーザーはどのページを閲覧すれば良いのか迷ってしまいます。

※人間が瞬間的に判断できる情報の数は「7±2」とも言われています。

 

その為、初期状態の表示メニュー数をグルーピングによって制限し、ユーザーのアクションによって多くのメニューを表示させることのできるドロップダウンメニューは有効な手法といえるでしょう。

 

 

6．ページネーション

 

 

ページネーションは、コンテンツのボリュームが多くなり過ぎたページを分割し、各ページへのリンクを用意した機能・パーツのことです。

 

ECサイトにおける商品一覧ページや、メディアサイトにおける記事一覧ページ、検索結果ページなどによく使用されます。

 

ページを分割するメリットのひとつとして、ページ表示速度の最適化があります。

多くのコンテンツが存在するページでは、その分データを読み込む為の時間が掛かってしまう為、表示速度が遅くなってしまいます。

表示速度が遅ければ遅い程ユーザーの離脱率は上がっていきます。

その為、適当なコンテンツ量でページ分割することで表示速度を最適化することは必要な機能といえます。

 

また、ユーザーが一度に認知できる情報の量を考えても、コンテンツをある程度のボリュームで分割することは情報理解の手助けとして有効に働くでしょう。

 

※稀に少ない記事ボリュームで何度もページ分割をする記事ページがあります。もしかしたらページビュー数を稼ぐためなのかもしれませんが、ユーザビリティの観点からするとあまり好ましいとはいえません。

 

 

7．カルーセル／スライドショー

 

複数の画像をスライドさせて表示させていく機能・パーツをカルーセルまたはスライドショーと呼びます。

 

横方向へのスライドがよく使われていますが、その他にも縦方向へのスライドやフェードイン・アウトなど様々な見せ方が可能であり、ファーストビューで効果的に使用されていることが多いです。

 

カルーセルを採用するメリットとしては限られたスペースを有効活用できることです。
特にサイトを開いた時に表示されるファーストビュー領域はWebサイトの一等地といえる場所であり、この領域に複数の画像や要素を表示できることは大きなメリットといえます。

 

ただしデメリットもあります。
ユーザー調査の結果ではスライドの2枚目以降は閲覧される確率が非常に低いことが分かっている為、1枚目のスライドと2枚目以降のスライドではユーザーへのアプローチに大きく優劣が出てしまいます。
カルーセルでは構造的に並列の情報を配置することが多いと思いますが、大きくユーザーへアプローチできるのはあくまで1枚目であるということを認識した上でコンテンツを検討すると良いでしょう。

 

また自動でスライドが切り替わる設計にした場合は、２枚目以降のスライドに気付いてもらいやすくなる反面、ユーザーが自分のタイミングで読めないストレスが出る恐れもあります。
その為、切り替わりの秒数設定には注意すると共に、出来る限りユーザー自身でスライドコントロールできるように「スライドできる方向への矢印」などのパーツを設置しておくと良いでしょう。
また、現在何枚目のスライドを表示しているのかがわかるようなパーツ（インジケーター）の設置もあると良いと思います。

 

 

8．モーダルウィンドウ

 

 

モーダルウィンドウとは元の画面の上に別ウインドウで表示される画面であり、ユーザーの操作があるまでは閉じられることがなく元画面の操作も出来ないもののことです。
ページの遷移時やボタンクリックなどで表示させることが多いです。

 

似たような動きをするものとして「ポップアップウィンドウ」がありますが、こちらはポップアップが表示されている際も元画面の操作できることが大きな違いです。

 

モーダルウィンドウのメリットは、ユーザーが必ず何かしらの操作（キャンセルボタンを押すにしても）をしないと閉じられないことから、確実に一度はユーザーに認識してもらうことが出来ることです。
強く訴求したい要素や広告、警告メッセージなどに使われることが多いです。

 

デメリットとしては、ユーザーが求める情報以外のものを対応しないといけない場合があるためユーザビリティが下がる懸念があります。
欲しい情報がありサイトを開いた時に、例えば特に関係の無い広告がモーダルウィンドウとして開かれたらどうでしょうか。
ワンクリックだけで閉じることはできますが、そのワンクリックがユーザーに与えるネガティブな印象は大きいと思います。
そのため、モーダルウィンドウを使用して掲載するコンテンツの検討は非常に重要です。
また、どのような操作をしたらウィンドウを閉じることができるかはハッキリと分かるようにデザインをすることも重要といえるでしょう。

 

 

まとめ

 

Webサイトでよく使われる定番UI（ユーザーインターフェース）パーツの名称と機能、メリット・デメリットやデザイン例についてご紹介しました。

今回ご紹介したUIパーツの多くは、上手く採用すれば大きなメリットがあることと同時に、場合によってはその機能がユーザーにとってデメリットとなる可能性もあります。

 

重要なのはコンテンツにとってその機能が必要かどうかということをしっかりと検討することです。

あくまでコンテンツが主役であるため、機能ありきデザインありきで考えるのではなく、情報・コンテンツにとってその機能が必要かどうかということを考え設計し、ユーザーにとって価値のあるサイトを制作していきましょう!

 

---

オレンジ社では、国内/海外サイトの企画・構築・運用サービスをご提供しています。

国内サイト海外サイト問わず、Webサイトのことならお気軽にご相談ください。

 

• Webソリューション事業

• Web戦略立案サービス

• Webサイト集客・SEO対策サービス

• CMS構築サービス

• Webサイト制作実績

 

各種お問い合わせはこちらから