よく見かけるUI要素の名称まとめてみた

  • #UI
  • #Web Design
  • #frontend
ちゃわのエンジニア

こんにちは。ちゃわの(ちゃ)です。

普段、皆さんはWebサイトを何気なく見ていますよね。 そのWebサイトを見て使用されているパーツの名称、すぐに答えられますか? 残念ながら、私はすぐには出てきません。言い回しが異なっていたり似たような名称のものも多く、いつも混乱してしまいます。

ということでこれを機に、エンジニアとして少しでもスマートな会話ができるよう今回はNextribeのホームページを取り上げて簡単にまとめてみようと思います。


まずはじめに

UIとは

User Interface(ユーザーインターフェイス)の略称です。 英訳すると、User「ユーザー」Interface「境界面、接点」という意味で、Webサービス上でユーザーが目にする画像や文字、ボタンや検索機能などすべてのサービスとの接点がUIにあたります。

上記のサイト全体の構成をネクストライブデザイナーのえなちゃんに教えていただきました! このように色々なパーツが組み合わさって構成されているんですね。

それでは、こちらを踏まえて順番に見ていきましょう。


パンくずリスト

上位の階層から順にリンクを設置したリストの事で、基本的にコンテンツの最上部にあります。上記を見ても分かるように、サイト内でユーザーが今どの位置にいるのか、視覚的に分かりやすくなっています。


ページネーション

ページ割りという意味で、長い文章やコンテンツを掲載する場合に、読み込み速度や可読性・操作性を考慮してページを分割できる機能です。 サイト下部などに各ページのリンクを並べた構成になっています。


カルーセル/スライドショー

複数の画像などのコンテンツをスライドさせて表示できる機能です。 ファーストビューで横方向へのスライドをよく見かけます。 ※ファーストビュー:Webページを表示した際、最初に目にする領域


ハンバーガーメニュー(ドロワーメニュー、スライドメニュー)

ハンバーガーのような三本線のグローバルナビゲーションのメニューで、クリックすると上記のように縦に開いて表示されます。スマートフォンなどの狭い画面向けでよく使用されます。

同じ機能としてドロワーメニューもありますが、三本線のアイコンであるかどうかの見た目の違いによって名称がつけられているようです。

画面外からスライドさせて表示させるスライドメニューもあります。 ※グローバルナビゲーション:主要なコンテンツのリンクが設置されるサイト内の案内メニュー


ドリルダウンメニュー

こちらは先程のグローバルナビゲーションの項目をクリックし、項目が開くメニューのことです。より詳細な項目のリンクへ飛ぶことができます。


ドロップダウンリスト/プルダウンリスト(メガドロップ)

メニューをクリック又はカーソルを合わせた時に表示されるサブメニューのことです。 表示させる項目が多いものは、メガドロップと呼ばれます。


アコーディオン

ドロップダウンメニューと同様に、開閉して詳細内容を表示する機能のことを指しますが、ナビゲーションや「もっと見る」の リンクで、中身のレビューを見ることができる機能もアコーディオンと呼ばれます。


いかがでしたか。 聞き覚えのあるものや既にご存じのものはいくつありましたか? 今回は上記のみを取り上げましたが、他にも様々な機能があるのでぜひ他のサイトも参考にしてみてください。少しでも用語を知っていると、先輩エンジニアの技術的な会話も普段より少し理解出来たり、楽しく感じたりと利点は沢山ありますよね。 まだまだ私自身も未熟ですが、少しずつ積み重ねて知識を深めていきたいと思います。

それでは!


参考サイト

この記事を書いた人

ちゃわのエンジニア
おすすめRECOMMENDED