この記事では、フロントエンドでよくある UI コンポーネントについて、名前と見た目、なんのために用いられるのか、そして実装サンプルを紹介します。
Web 開発を学び始めた方を対象に想定しています。ここに紹介した基本的な UI 部品はエンジニアのみならず、クライアントやプロデューサー、ディレクター、デザイナーなど Web 開発/制作に関わる人たちにとっての共通言語と言えるでしょう。
モーダル
画面に覆いかぶさる形で表示されるサブウィンドウを、モーダル（ウィンドウ）と呼びます。
付加情報やユーザーのアクションに対する通知などを、画面遷移を伴わず表示させます。表示中の画面からユーザーの意識を離させずに、かつ注意・集中を引き寄せたい場合に利用されることが多いと思います。
モーダルウィンドウは基本的に画面のコンテンツの一部なので、原則的にモーダルのコンテンツは画面と関連があるべきです。逆にモーダルのコンテンツが背後の画面と関連が薄いのであれば、それはおそらくモーダルではなく別画面にすべきでしょう。
上に挙げたサンプル画像にもありますが、ログインフォームをモーダルで見せるパターンもたまに見かけます。上記の原則に照らせばログイン画面にすればいいのではと思いますが、この場合は、画面遷移させないことで、気軽さを演出しているのかもしれません。
See the Pen JavaScript Modal by Masahiro Harada (@MasahiroHarada) on CodePen.
半透明の背景を含め、モーダルウィンドウは透明にして見えない状態にしておきます。そのままでは透明であったとしても上に覆いかぶさっている状態なので、下のコンテンツがクリックできなくなります。そのため、pointer-events: none; でモーダル上のカーソルイベントを無効化しています（モーダルが開けば復活する）。
開閉表示の切り替えは、CSS クラスで切り替えます。
上記はスクラッチでの実装例です。JavaScript の練習には独自実装してみるのが良いと思いますが、実務的には Micromodal ライブラリが便利なのでオススメです。
See the Pen JavaScript Modal 2 by Masahiro Harada (@MasahiroHarada) on CodePen.
Micromodal には CSS が含まれていないので、すべて自分で記述する必要があります（ただしマークアップとスタイルのサンプルがあります）。逆に言えば、ライブラリデフォルトの上書きが要らない、自由度が高いとも言えます。
こちらの記事でも使用法を紹介していますので、参考にしてください。
タブ
以下のような、表示を切り替える UI をタブと呼びます。
「企業を探す」と「説明会を探す」それぞれの選択時に下の表示内容が切り替わります。
こちらは、タブのラベルがアイコンで表現されていて少しオシャレなパターンです。
タブによる表示内容の切り替えは、大抵は画面遷移を伴いません。稀に、タブをクリックしたタイミングで画面を遷移させることもあります。
各タブには、関連はしているが、ユーザーにとって同時に閲覧/操作する必要がない内容を並べます。
タブ UI を採用するということは、コンテンツを隠して表示領域を節約するということです。隠すことによってユーザビリティが向上していなければ意味がありません。
以下が実装例です。
See the Pen JavaScript Tab by Masahiro Harada (@MasahiroHarada) on CodePen.
クラスの切り替えで見た目を変えています。
カルーセル
カルーセルとは、コンテンツが（ほとんどの場合で横に）スクロールする UI です。
以下の例では、左右のボタンを押すと他の選択肢が現れます。
こちらの例では、トップページのメイン画像が切り替わります。画像の右下にドットが並んでいますが、これはコンテンツが何個あって、何個めが表示されているがを示しています。
カルーセルとは、英語でメリーゴーランドのことらしいです。コンテンツが回っているかのように順に表示されるイメージですね。
タブと同様に、特定の表示領域に多くのコンテンツを収める手法と言えます。特にスワイプ操作に対応すれば、表示領域の小さいモバイル端末でのユーザビリティは向上するでしょう。
以下は Swiper というライブラリを用いた実装例です。
See the Pen JavaScript Carousel by Masahiro Harada (@MasahiroHarada) on CodePen.
オプションによって無限スクロールなど様々な表現が可能なので、利用する際はライブラリのマニュアルやデモを参照してください。
ドロップダウンメニュー
ドロップダウンメニューとは、メニューの下部にサブメニューが開く UI です。主にグローバルナビゲーションで採用されます。
画像などを含んでよりアトラクティブにデザインされるパターンも、モダンなサイトでは目にしますね。
下からニュッと出てくるのでドロップダウンと言われるのでしょう。グルーバルナビゲーション以外の文脈では、セレクトボックス状のメニューをドロップダウンと呼ぶこともあります。
以下が実装例です。
See the Pen JavaScript Dropdown Menu by Masahiro Harada (@MasahiroHarada) on CodePen.
サブメニューの高さはあらかじめ決められない前提で、JavaScript を使用します。
- 最初はサブメニューの高さをゼロにします。
- マウスオーバーのイベントで、サブメニューの高さをコンテンツの高さと同じにします。
- マウスアウトのイベントで、サブメニューの高さをゼロにします。
アニメーションは、CSS の transition で実現しています。height は ゼロと auto の間ではアニメーションできません。アニメーションの基準値は具体的な数値でなくてはいけないので、JavaScript で高さを取得する必要があります。
また、.navbar-submenu-wrapper > .navbar-submenu という構成にするのがポイントです。子要素（.navbar-submenu）の高さを取っておいて、親要素（.navbar-submenu-wrapper）に設定します。親要素の高さがゼロであって、かつ overflow: hidden が設定されていても、子要素の高さは JavaScript からは取得可能です。
さらに、.navbar-submenu-wrapper が .navbar-menu-item に内包されている構成にも理由があります。この構成でないと、サブメニューにカーソルを合わせた途端、マウスアウトしたと判定されて、サブメニューが閉じてしまい、操作ができなくなってしまいます。
アコーディオン
複数の開閉コンテンツの集合をアコーディオンと呼びます。
以下の例では、「パンツ」カテゴリをクリックすると、隠れていたサブカテゴリがアニメーションとともに表示されます。
大抵のアコーディオンでは、別のカテゴリを選んで新たにサブカテゴリが開かれると、すでに開かれていたコンテンツは閉じられます。
この UI も、ユーザーが選択したコンテンツだけを見せ、選択していないコンテンツは隠す、という発想で表示領域を有効活用することが目的です。
単体の開閉コンテンツをアコーディオンと呼ぶこともあります。
以下が実装例です。
See the Pen JavaScript Accordion by Masahiro Harada (@MasahiroHarada) on CodePen.
高さを算出して開閉するロジックは、上のドロップダウンメニューと同様です。
スライドメニュー
スライドメニューは横から滑り出てくるメニュー UI です。
特にモバイル端末で実装されることが多いです。
ちなみに、上記の画像のように、三本の線が重なったアイコンがメニューを表すことがあります。これはアイコンの形状からハンバーガーメニューとも呼ばれます。
以下が実装例です。
See the Pen JavaScript Slide Menu by Masahiro Harada (@MasahiroHarada) on CodePen.
アニメーションや出てくる位置が異なるだけで、やっていることはモーダルと同じですね。
というわけで、こちらも Micromodal で実装できます。
See the Pen JavaScript Slide Menu 2 by Masahiro Harada (@MasahiroHarada) on CodePen.
ポップアップメニュー
ボタンなどをクリックすると比較的小さなメニューなどが出現する UI をポップアップメニューと呼びます。
以下は Twitter の例です。【画像左】アバターにカーソルを合わせるとそのユーザーの紹介がポップアップで表示されます。【画像右】右側の下向きの矢印をクリックすると、そのツイートに対するアクションの候補がポップアップで表示されます。
この UI も、最初からユーザーに見えている必要はないと判断したコンテンツを、隠しておくための仕組みですね。
モーダルのように画面全体を覆わないので、そこまで大げさではないところがポイントだと思います（定量的な線引きはありませんが…）。
以下が実装例です。下向きの矢印をクリックしてください。
See the Pen Popup Menu by Masahiro Harada (@MasahiroHarada) on CodePen.
「フワッと」消すために、animationend イベントを使ってみました。
ツールチップ
ツールチップとは、ポップアップメニューに似た、より短い説明文を表示させる UI です。
画面から細かい文字を減らしてスッキリ見せたいとき、「このアイコンは何を意味するのか」「これをクリックしたら何が起こるのか」についての説明文を隠す UI です。
他の UI と同様に、隠すことによって逆にユーザビリティが損なわれていないか、注意する必要があります。
以下は Tippy ライブラリを利用した実装例です。
See the Pen Tooltip by Masahiro Harada (@MasahiroHarada) on CodePen.
オプションによって様々な表現が可能なので、利用する際はライブラリのマニュアルを参照してください。
ページネーション
ページネーションは見たままですね。ページ送りのための UI です。
画面幅の都合から、デスクトップとモバイルで異なるインターフェースが採用されることが多いようです。
以下の例では、モバイルの場合は「さらに読み込む…」をクリックすると Ajax 通信でコンテンツが取得され、動的に（画面遷移を伴わず）一覧に追加される仕組みになっています。
以下は少し面白いパターンです。画面の一部であるコメント欄にページネーションが配置されていて、クリックすると、コメントの部分だけが切り替わります。
他には Twitter や Airbnb のように、ページネーションが存在せず、ページの下まで到達すると自動的に Ajax 通信でコンテンツが取得されるパターンもあります。
画面遷移を伴わない、動的なページ送り（というかコンテンツ追加）の場合は、画面遷移して戻ってきたときの追加分のコンテンツの扱いに注意して仕様を決める必要があります。
（たまに、一覧から詳細に遷移して、一覧に戻ってくるとコンテンツが消えていて、イラっとさせられることがあります。）
ページネーションの実装例は割愛します。
以上、よく使われるフロントエンド UI について紹介しました。
今回紹介した基本的な UI 部品を頭に入れておくと、企画サイドやデザイナーとのコミュニケーションが円滑になります。また、色々なサイトを見る際には、これらの UI が、なぜ、どういう目的で使われるのか？も考えてみましょう。きっと、提案の材料になるはずです。
そして、複雑そうな Web アプリでも、基本的な UI 部品の組み合わせで成り立っていることに気がつくかもしれません。つまり、一つ一つの基本的な UI 実装を積み重ねれば、全体を実装できるということです。
そういうわけで、この記事の実装サンプルも、実務の参考にしていただけると幸いです。
