はじめに
引き続き、フロントエンジニアとして、意図したUI設計ができるようにデザイン部分の基礎を学んで行きます。
ナビゲーションやインタラクションあたりをまとめます。
この記事のinfoは筆者の考えや感想を書いております。
お次
UIの基礎(4)
ナビゲーション
ナビゲーションとは
ユーザーが目的を見つけるための案内であり、ユーザーがシステムを操作する際の要素の集まり。
操作の違い
入力手段によって、最適なナビゲーションは変わる。
マウス操作では、細かいボタンなどで作られているナビゲーションでも大丈夫であるが、タッチ操作のあるものやリモコンなどでは不便である。
インタラクション
インタラクションの種類は、2種類。
理解のためと、演出のためのもの。
理解のため：どこを押しているのか、何から何に変化したのかなどを伝えるものなど。
演出のため：情報登録の際、ページごとにアイコンの表情が変わるなど。
補足
マイクロインタラクション（自分としては、親切さ的なもの）がある。
ちょっとしたアイコンの動きとか、入力時のアクションなどの「なくても機能として支障がないが、あったほうが便利である」もののことを言う。
ヘッダー
ヘッダーには、グローバルナビゲーション、検索、メガドロップダウンメニューなどサイト全体を移動できる基本的なナビゲーションが存在する。
スクロール時の動きの種類
完全に見えなくする、または縦幅を短くしたものが上部に張り付いているものがある。
スマホのように上下にナビゲーションがあるものは、抜け感が悪くなるので、どちらか一つを残したり、上にスクロールしたときだけヘッダーを出すなどの工夫が必要。
フッター
アプリではなく、サイトのフッターはサイトマップを掲載していることが多い。
とはいえ、結論何を掲載しても構わない場所でもある。
有用なもの、優先順位の高いもの、知っておいてほしいもの、使ってほしいものなど。
サイトマップのイメージもあったが、何を掲載してもいいとはあまり意識してなかったなと。
パンクズリスト
役割
現在の場所の明示と、到達経路への移動。
「このページ違う、どれだっけ？」となった場合、巻き戻りできるので、重宝している。
ポイント
-
スマホでは、相性が悪い。（なくはない。）
またPCより、一時的に見ることが多いため、現在の場所がどこかを求められない傾向がある。 -
PCの場合は、パンクズリストフッダーに記載するものあり。
-
複数到達経路がある場合
表示方法はいくつかある。- 優先型：固定のパンクズリストを表示する
- 複数型：到達しうる経路を全て並べて表示する
- 変動型：やってきた経路によって変えて、表示する
カラムと左右ナビゲーション
1カラムレイアウトが多い。
ビジュアル重視、ファーストビューで大きな画像を表示するページが多い。
また、表示される画像に注目を集めることができる。
かつ、レスポンシブデザインも展開しやすいため。
アコーディオン
多くの並列情報から、必要な部分だけパッと見せたいときに使うと良い。
スクロールせずとも情報にたどり着ける。
またページ全体の内容もパッと見ることができる。
ただ、並行して、比較したいときなどは、見えづらいデザインとなる。
スクロールとページング
スクロールはスマホとかの縦の長辺、ページングは短辺との相性が良い。
スクロールとページングの使い分け
Googleだと、PCはページング、スマホでは、無限スクロールとなっている。
じっくり探したい場合は、ページングの方が適している。
サッと手軽に探したいとき、スクロールの方が会っている。
無限スクロール
スクロールのみでの操作ができるので、使い勝手が軽快。
意識が途切れることなく、集中してみられるので、画像が主体のサービスなどにも効果的。
フッターを使うことができない点には要注意。「もっと読む」などの表示があるものは問題ない。
「戻る」ボタンとの相性は良くない。
戻るを押すと、次に戻ったとき、最初に戻ってしまう。
かつ、詳細を見たときに、その位置に戻れないと辛いので、Twitter（X）などを参考に詳細を作る必要がある。
スクロールの方向
テキストの量が多い場合は、縦スクロールが自然に感じられる。
画面が長い方にスクロールするのが自然。
Ex. テレビだと横、スマホだと縦のイメージ。 （自分の声：PCは例外かな。）
また、一覧の要素の形が、縦長だと、横スクロール（Netflixみたいなイメージ）、横長だと、縦にスクロールされるのが自然。
要素の隙間が大きい方にスクロールすると言うものある。
横スクロールを表すには、見切れを使う方法がある。
まとめ
次は最後の章をまとめます。
なぜそのデザインになっているのか、何を表すためにそうなっているのかの言語化の種が埋まってきている感じがします。