【WEB初心者向け】WEB制作現場で用いるUIパーツ用語集（基礎編）

こんにちは。

WEBデザイン制作現場の会話にて、

「アコーディオンにしようか」
「そこはカルーセルで」
「モーダルで対処しよう」

と言ったような、日常生活では聞きなれない単語が出てきます。

WEB制作始めたてのあなた。
あたかも知っているかのように振舞っていませんか？

ええ、私もその一人でした。

「アコーディオン」と聞くと、音楽得意だったあの子元気かな・・なんてノスタルジーに浸ってみたり、「カルーセル」とはマキですか？とか脳内リピートしてしまったり、「モーダル」ね！ですよねー。いいよねーそれ。・・相槌打ってみたりとか。

（（もう自分に嘘つきたくない！））

今回は、WEB制作現場で良く用いる、UIパーツ名をご紹介いたします。
ちょっと忘れてしまった時にすぐ見れるようにしておくと便利かもしれません！

【 WEB基本編 】

「パンくずリスト」

通称パンくず。ユーザーが現在位置を見失わないために、主にページの上部に設置されている文字列。各ページのリンクが設置されている。

「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
引用：ウィキペディア

なんてメルヘンな由来。
名付けた人はセンス高い。

「ページネーション」

検索一覧や記事一覧などに用いられ、ページ下部に設置されているナンバーリスト 。ナンバーリスト欲しいと言われる時もあり。

多くの検索結果があるとページの読み込みが遅くなります。
そこでページネーションを設置し、検索結果を分けることでページの読み込みを早くする効果があります。

「テーブル」

いわゆる「表」ですね。コードでtableと書くため、WEB制作現場での会話では一般的に「テーブル」と耳にします。
もう聞き慣れましたが、「表」でいいじゃん・・と常に胸に秘めています。

何をあらわす表かは、作った本人にもわかりません。

【 WEBメニュー編 】

「グローバルナビゲーション」

パソコンサイトでは主にヘッダーやサイドバーなどに設けられるメニューリスト。通称グロナビ。該当サイトのコンテンツへのリンクがまとめられています。
スマホサイトでは主にハンバーガーメニューに収められることが多いと思います。

「ハンバーガーメニュー」

メニューリストが多く、スマホサイトでは全て表示しにくい場合用いられるのがこのハンバーガーメニュー。
タップするとドロワー表示によってメニューリストが現れることが多いです。

形がハンバーガーの様だからという安易なネーミングですが、スマホサイトのメニューUIに一石を投じ、今やトレンドになった革命児。
ハンバーグ！！

「ドロワー」

スマホサイトのハンバーガーメニューをタップしたりすることで、全体を覆うほどのメニューを表示します。
ユーザーの必要に応じて表示できるので、常に表示されているメニューと違い、ストレスは感じにくいとされています。

「ドロップダウンメニュー」

主にグローバルナビゲーションなどのメニューリストをクリック・タップもしくはマウスオーバー（ホバー）すると、表示されるサブメニューリストです。
ドロップダウンリストやプルダウンメニュー（リスト）とも言われます。

「ドリルダウンメニュー」

ドロップダウンメニューに似たところがありますが、これはスマホサイト用のUIと言ってもいいくらい、パソコンサイトではあまり見かけられません。
タップすると表示されるサブメニューリストです。

【 WEBフォーム編 】

「ラジオボタン」

事前に定義した選択肢のうち1つを選択する場合に使うボタン。2つ以上は選択できず、2つ以上の場合はチェックボックスを用いることが多い。

「ラジオボタン」の由来はカーラジオの選局ボタンで、1つのボタンを押すと他の押されていたボタンが押されていない状態に戻り、常に1つのボタンだけが押された状態になる特徴を表している。
引用：ウィキペディア

「チェックボックス」

いくつかある選択肢から複数を選択するのに使われる。

「セレクトボックス」

複数の選択肢から1つを選択する時に使われるUIです。複数の選択肢から1つを選択する点ではラジオボタンと似ていますが、こちらは選択肢情報が多い場合に用います。

見た目的にドロップダウン（メニュー）と似ているので、違いを調べてみましたが、よくわからず・・。

HTMLのSELECT要素で作成されるモノの呼び名 - Miuran Business Systems

肌感では、メニューリストで用いられるのがドロップダウン（メニュー）、フォームで用いられるのがセレクトボックスと、用いられる場所が違うと呼び名が違うだけで、中身はほぼ一緒だと勝手に納得しています。

「プレースホルダ」

正式な情報が入力されるまで、案内として仮に入力されている情報。または、仮に確保されている場所。
あらかじめ仮の入力情報があることで、ユーザーの入力エラーを未然に防ぐ効果があります！

と、ここまではよく使う用語で基本的なUIパーツ名です。
これだけ押さえておけば、基本的には問題ないと思います！

次回はもう少し踏み込んだUIパーツ用語・アクション用語をご紹介したいと思います！

＼　一緒に活躍できる人を募集しています！　／

UIUXデザイナーの募集

WEBデザイナーの募集