「Webサイト制作のワークショップ」のメモです。

リアルな世界に存在するボタンのメタファーをWebに取り入れることで、ボタンを押すとページが移動するという操作を直感的に行えるようにした。こういった操作を多くの人が学習してきたことで、もはやボタンである必要がなくなった。

enjoy!

Webデザインの流れ

立体的なボタンやリアルなアイコンデザインなど、人はリアルの生活にあるものと結びつけて、その操作方法や機能を想像することができた。

それまでのテーブルレイアウトから、正しい構造でWebサイトを作る「Web2.0」で多くのWebサイトが整備された。多くのAPIの開放やライブラリの提供、オープンソースのCMSなど、お互いに技術やスキルを提供しあうことで、Web全体の底上げが行われた。

「Web 2.0」という言葉は秀逸だった。「これからは2.0だよ」ということで、これまでのWebサイトがすべて古くなった。と同時に、これは未来へと継続していく進化であることを伝えた。

そこからインターネットやアプリの可能性が模索され、過渡期としてリッチなデザインのアイコンが使われた。Mac OS X（現macOS）のアイコンがまさしくスキュアモーフィックデザインだった。いまでもいくつかのアイコンにその名残はあるけれど。

そしてフラットデザインへ

フラットデザインとは、立体感のないシンプルなデザインを指すだけではなく、スクリーンに表示されるUIの進化の過程。

「押すとへこむボタン」というUIによって、押せるボタンであることを伝え、Webサイトを見るだけのものではなく、人が操作してインタラクティブに動くものになった。多くの人がその体験から学習をして、今はもうタップできる部分を大げさに表現する必要がなくなった。UIのビューとコントローラの境界が溶けていった。現実世界のメタファーとしてのビジュアルもあまり使われなくなった。

フラットデザインを取り入れたUIでは、「奥行き」が重要な概念となる。コンテンツが一番奥にあって、たとえばその上に白くて薄い1枚のシートが重なり、さらにその上にUIアイコンが置かれる。画面の推移は、上へ上へとシートをかぶせることでもある。

この「奥行き」という概念は、リアルな空間の中に浮かび上がるUIのシートのようなもの。一番奥にリアルがあり、手が届くところにUIが浮かぶ。リアルとUIの境界を鮮明にするために、1枚の薄いシートがある。

スマホの操作を理解する

スマホでのジェスチャーの種類を理解しておく。これ以外のジェスチャーをユーザーに強要しないこと。スマホはPCのようにカーソルがないので、マウスオーバーという概念はない。

  • タップ｜押す
  • ドラッグ｜スクロールまたはパン
  • フリック｜素早くスクロールまたはパン
  • スワイプ｜隠れたビューを引き出す
  • ダブルタップ｜二度押し
  • ピンチ（ピンチイン/アウト）｜2本指で拡大/縮小
  • タッチ＆ホールド｜長押し
  • シェイク｜取り消し
  • ピーク｜軽くプレス
  • ポップ｜深くプレス

フィードバックとモーダルウインドウ

ログイン後に「ログインしました」とモーダルウインドウが表示されて、「OK」を押すまで次の操作を受け付けない。こんなWebサイトやアプリがある。本来モーダルウインドウは、重要な選択をユーザーに行ってもらう以外に頻繁に使用しないこと。

ガイドライン

特に Apple の HIG は必読。

UI – ハンバーガーの位置は右か左か

｜スマホサイトでよくメニューとして使われているこのアイコンをハンバーガーという。

統計的に、スマホを右手で操作する人が圧倒的に多いらしい。左手2：右手8の割合。右手で操作する場合、ハンバーガーは右にあった方が指が届きやすくて操作がしやすい。また、常にハンバーガーをページ上部に固定表示させる場合にもやはり右が好ましい。テキストを読むページなど横組みのWebサイトにおいて行頭にUIが重なっているというのは非常に文字が読みにくい。

こちらの関連記事もあわせてどうぞ！