doda Creator's Blog

D.C.B
このUIってなんて名前!?スマホUIパーツをまとめてみました。

こんにちは、クリエイティブグループの神山です。

すでにD.C.Bデビューしておりますが、今期クリエイティブグループに、新たに3名もメンバーが増えました!

そのためだけではないのですが、自分はデザインやコーディングなどのガッツリしたクリエイティブ制作業務を離れ、要件の取りまとめやスケジューリングなどのディレクション業務がメインになってきました。

様々な関係者とコミュニケーションを取っていると、「この情報はモーダルで見せた方がいいね」とか「この説明は出しっぱなしだと邪魔だからツールチップにしよう」などなどUIパーツの名称をよく使うのですが、パッと名称が出てこなくて「あの、データロード中に出るグルグルするやつ」みたいな情けない表現になることもしばしば。。。

これ以上、恥をかくことなくスムーズなコミュニケーションができるよう、よく使うUIパーツをまとめてみたいと思います。UIにもトレンドがあるので今後も追加する予定です。

目次

1)情報表示系UI

モーダルウィンドウ

#

■出典:Timetree

Webでも古くから広く使われているUIですね。ユーザーの次のアクションを明確に表現するのに有効です。

今回紹介したTimetreeは、スケジュールの設定にモーダルウィンドウを多用していますが、一つ一つのUIをシンプルにデザインしているので、迷うことなく設定することができます。モーダルウィンドウの良い参考になります。

ツールチップ

#

■出典:Timetree

こちらもTimetreeのUIです。

常時表示されている説明は、情報過多になりユーザーが混乱する原因にもなりますが、ユーザーのアクションに紐づく説明としてツールチップ表現は非常に有効です。

アコーディオン

#

■出典:Timetree

こちらもTimetreeのUIです。

モーダルウィンドウで表示した内容に、追加で付加できる設定をアコーディオンで表現しています。

付加情報が必要ない時に設定項目を隠しておけるのはユーザーにも親切です。

カルーセル

#

■出典:Uber

こちらはUberのUIです。

フリック操作で複数の情報を閲覧するのに有効です。

そのUIがカルーセルであることを伝える表現として、左右の矢印を使っているUIも多いですが、最近は矢印は無く次の情報の一部が見えていることで、カルーセルであることを認識させる表現が主流になっています。

2)ナビゲーション系UIパーツ

ハンバーガーメニュー

#

■出典:doda

アプリではないですが、dodaのスマホサイトでも使っているので紹介です。

ハンバーガーの名前の由来でもある三本線のアイコンはすっかり市民権を得ていて、それがメニューである代名詞にもなっていると感じています。

ボトムナビゲーション

#

■出典:iOS App

フッター部分に固定で表現されたナビゲーションです。

スマホが大きくなるにつれて画面上部のナビゲーションでは、指が届かずにストレスになります。ボトム(画面下部)に主要なナビゲーションを配置するのは当然の流れですね。

フリックスクロールナビゲーション

#

■出典:LINE NEWS

LINE NEWS等、ニュースアプリで主流のナビゲーションです。

フリック操作で上部のカテゴリとコンテンツが一緒にスライドされます。カルーセルUIをナビゲーションに進化させたUIです。

3)その他のUIパーツ

インジケーター

#

■出典:Tripadvisor

データローディングの表現として、すでにあたり前になっているUIですね。

最近のアプリは、それぞれこだわりのインジケーターデザインを採用していて、見ていて楽しいです。

通知ドット

#

■出典:iOS App

こちらも各アプリで標準で使われている「お知らせ」表示のUIです。

お知らせ件数もセットで表示されますが、件数が多いとユーザーにとってマイナスイメージにもなり、アプリが削除される原因にもなるとのこと。

まとめ

これ以外にもフォームで良く使うUIもありますね。(それは次回まとめよう。。。)

普段から何気なく使っているWebやアプリのUIにもちゃんと名前があるはず。名前がわかればコミュニケーションもスムーズだし、何よりGoogle先生に質問しやすくなります(笑)

気になるあの子(UI)の名前と特徴はちゃんと覚えようっと。ではでは、また次回。

Web超初心者が学ぶサイト紹介
2018.07.03
#Column
Web超初心者が学ぶサイト紹介
RITSUKO IMAI
Creative group
RITSUKO IMAI
みなさまWeb作ってますか?私は元々紙の人でDTPやエディトリアルデザインをやっていました。正直Webの波に乗れない…しんどい。と思っていましたが、やらないわけにはいかないので独学で勉強しています。今回はそんなWeb制作超初心者が一歩を踏み出すために色々教えてもらったサイトやツールを紹介しようと思います。完全初心者向けなので少し古いページもありますが気にせずお願いします!