【保存用】 あんまり知られてない？UIでパーツ・コンポーネントの名前 10選
こんにちは！ヒトミです😀
以前の記事で、Googleマテリアルデザインのサイトを読むべき！とお伝えしたので、今回は私が個人的に「え、これってそんな名前で、そういうふうに使うんだー」ってなったコンポーネントを紹介します🍺
名前がわかってると、デザインレビューの時にデザインの意図を明確に伝えやすいです。デザインを本職にしていない人がデザインレビューに入ってきたときに、「このパーツ使った方がいいんじゃない？」っていう新しいアイディアの提案がよくあります。それがいいアイディアなのかそうじゃないのか、説明できるようにするためにも、名前と意図と機能を理解していると同僚とのコミュニケーションにすごい役に立ちます！
今回の記事は、デザインについて少しでもすでに理解がある人に向けて書きました。まだまだ経験が浅い人も、あーこういう風にコンポーネントって選ぶんだなーくらいに思っていただけると、デザインする際に、要素の選び方がこれまでと違ってくると思います。
アップバー 上部
- App bars: top
ヘッダーとか呼んでましたけど、Google Material Designではアップバーって呼ぶんですね！普通のヘッダーとの違いは、画面の文脈によって表示するコンテントが変わるところでしょうか。普通のウェブサイトのヘッダーとは文脈が違うので、画面上部にあっても違う働きをするってことが勉強になりました。
アップバー 下部
- App bars: bottom
これは誰でも見たことがあるはず、画面下のタブメニューですね！
DO, DO NOTに注意して使いたいところです。テキストも載せるのか、アイコンだけにするのか、いろいろタブメニューの数など、デザインの時に”なぜこうあるべきなのか”を認知学やUXの側面からも説明できるようになれるとベストですよね😆
バックドロップ
- Backdrop
完全に画面遷移しないところがキーのコンポーネントですね！下スワイプすることで、下に関連する情報をさらに表示できたり、写真一覧を載せたり、ダッシュボードに使ったり、記事のリストだったり、文脈に合わせてベストな方法を取ってくださいね⭐️
ボタン：フローティングアクションボタン(FAB)
- Buttons: floating action button
このボタン、デザイン自体は簡単に作れるんですが、かなり厄介です。一番メインのアクションを使うようにしないと、ただの邪魔なボタンになるし、アイコンが見ただけで何ができるのかわからないと、誰も押したくない。。。Twitterではツイートしたいというアクションに対して使われていますね。文脈やアプリの一貫性も気にしないといけないので、安易に使うのは注意ですよ✨
カード
- Cards
これはすごい便利で使うチャンスの多いコンポーネントじゃないかなーと個人的に思います。タップしたら画面遷移させてもいいし、カードを拡張させてさらに情報を表示させたり、いろいろ使い勝手がいいと思います！
ダイアログ
- Dialogs
これは古来より使われし歴史あるコンポーネントですね！これを使うときは、このアクションを通過しないと次のアクションに行けないようにするべき場合に使用します。ユーザーの進行中のタスクを遮断するので、鬱陶しくない程度に使うべきですね👀 ポップアップウィンドウとかモーダルウィンドウ、オーバーレイウィンドウ、など別名があるのでチーム内で混乱が起きないように一つの呼び名に統一する必要があります。
サイドシート
- Side sheets
スタンダードサイドシート(Standard side sheets)とモーダルサイドシート(Modal side sheets)の２種類があります。メイン画面のある要素をクリックすると右からシートがスライドインしてくるコンポーネントです。中身のコンテントは、チェックボックスやフォーム、スライダー、などなど、使い勝手のいいコンポーネントの一つです。ケースバイケースで、最も最適なコンポーネントを選んでくださいね♪
スナックバー
- Snackbars
ユーザーはいつでもうっかりミスを起こします。「あ、間違えて消しちゃった」「あ、間違えて違うところに入れちゃった」こういう時に使えるコンポーネントです。バナーとダイアログウィンドウとの違いは、ユーザーに伝えたいことの重要度の違いです。重要度は低く、オプショナルなアクションの場合に使用します。例えば、削除を取り消すのは、ユーザーが絶対にしないといけないアクションじゃないので、スナックバーが最適というわけですね！
ナビゲーションドロワー
- Navigation drawer
UIを作る上でどのページがのどの階層レベルなのかハッキリ把握しておくのは重要です。ユーザーに”なんか変な感じ”とか不要な混乱を与えないためにです。例えば、アカウントの切替などといったファンクションはトップレベルの階層と呼べるでしょう。
- トップレベルの遷移先が5つ以上あるアプリ
- 2つ以上のレベルのナビゲーション階層を持つアプリ
- 無関係な目的地間のクイックナビゲーション
チップ
- Chips
地図のアプリで行き先を指定したり、オブジェクトのタイプを指定したり、メールの宛先を指定したりする際に使用するのがぴったりなコンポーネントです。チェックボックスに似ていますが、削除できたりアイコンを載せたり、横に並べて表示させたりできるので、もっと使い勝手がありますね。クリックした際に拡張させてさらに情報を表示させたりできます。
さあ、どうでしたか？
デザインする前に、全てのオブジェクトとページの階層の理解、ユーザーの求めているアクション、重要度これらの理解が深いと、即座に最適なコンポーネントを選ぶことができます。
どのようにこれらを理解したり定義すればいいのか、はいろいろなソリューションがすでに存在しています。ユーザーストーリーを定義したり、オブジェクト図、ユースケース図、アクティビティ図を描いたりして、理解を深めていくのが一般的かなと思います。次にワイヤーフレームを描いて、画面遷移に違和感やわかりにくいところがないかさらに検証して、プロトタイプを作成します。
UIデザイナーの役割は、これらを理解した上で最適なコンポーネントを利用してデザインを組み上げていくところかなと思っています。UXリサーチャーやディベロッパーと協力して、さらなる検証・テスト、求められていることの理解を追求していく、その末にようやくプロダクトが完成するのです。
もしよかったら、フォローよろしくお願いします👍
無料コンテンツ気に入ってくれたら、☕️一杯分ほどの支援をして応援してくれませんか？コーヒーは私にとってクリエイティブな活動の「元気の源」です😆