投稿日2016-12-31もくじWebサイトの構造コンテンツ設計スマホが使われる場所と状況ファーストビューアフォーダンス「Webサイト制作のワークショップ」のメモです。Webサイトはいつどんな状況で使われるか、そこで何を感じているか。無意識で使われることの多いWebサイトでは、SN比のチューニングが大切な視点となる。SN比とは、シグナルとノイズの比率のこと。伝えるべき必要な情報要素か、装飾として存在する要素か。直線型|スタートからゴールまでステップを追っていく。例)ランディングページやお問い合わせフォームハブ&スポーク型|中心から、目的にあわせて分岐していく。例)FacebookWeb型|スタートもゴールもない、永遠と続く構造。例)Amazon階層型|トップページから、より深い階層へと進んでいく。例)コーポレートサイトファセット型(一覧&詳細型)|商品一覧ページで条件を次々に追加して絞り込んでいく。例)ECサイトWebサイトは必ずしもトップページから順を追ってアクセスしていくものではない。ネットショップであれば、検索エンジンからいきなり商品詳細ページへとたどり着く。そこからカートに進んで必要な情報を入力して購入を済ませる。その一連の動線の中に必要な情報(たとえば信頼感や配送に関する情報など)をシンプルに組み込む必要がある。情報を詰め込み過ぎてしまうと、そのエリアはまったく読まれなくなる。情報のSN比を考えて常に情報を整理していく必要がある。何か調べようとするとき、何か買おうとするとき、ほとんどの場合は頭に浮かんだいくつかのフレーズを打ち込んで検索する。そこから目的のページにたどり着く。その際に、ロゴが浮かんでいるだけのトップページには何も用は無い。スマホに最適化されたWebサイトは絵巻物のようなもの。巻物を少し開いてみて、興味がなければ他の巻物を手に取る。開いてみて、興味をもったらさらに巻物を開いてみる。そのまま最後までみてもらえる巻物はどういった構成やデザインが必要だろうかと模索することが重要。同じ素材でも、情報をどんな視点で束ねるかでまったく違うWebサイトになる。ネットショップで、商品ライン、商品の色やサイズ、価格帯などの条件を選んで絞り込む機能を追加されることがある。この絞り込み検索は、多くの場合ユーザーに実際使われることは少ない。スマホが使われる場所と状況たとえば北海道に住んでいる人が「カフェ」と検索して、都内のカフェの情報ばかりでてくるようではよろしくない。PCサイトではカフェのコンセプトやオーナーの情報がメインだとしても、スマホサイトの場合は地図や店内イメージをメインに表示するなど、サイトが使われる状況を意識することは必要。いい情報ではないが、「今は」どうでもいい。スマホサイトは、クリエイターが制作する時と、ユーザーが使う時とのテンションが大きく違う。本当に使いやすいUIとはどういうものか。ひとつの例えとして、酔っ払っていても大きなミスをせずに目的を達成できるもの。ファーストビューファーストビューは、カタログの表紙のような概念ではない。どんなにキャッチーで美しいファースビューを作ってそのページにアクセスしてもらっても、成功体験に結びつかないと次にアクセスされることはない。Webサービスでは、成功体験の積み重ねが重要。チラ見せで動線をつくる。見えているアイコン、これによって左右にスクロールできることがわかる。タップできることがわかるアイコンなど、視覚的に動線がみえていることが重要。アフォーダンスインターフェイスデザインの基本的な考え方。イスのような高さであれば、人はそれをイスとして座る。「これはイスです」や「イスはこちら」とか書く必要はない。こちらの関連記事もあわせてどうぞ!WS|Webサイトのテキスト「Webサイト制作のワークショップ」のメモです。「Webサイト制作のワークショップ」のメモです。「Webサイト制作のワークショップ」のメモです。SNSとの連...WS|WordPressのインストール「Webサイト制作のワークショップ」のメモです。Ohmori未来志向のクリエイター。東京で制作プロダクションを経て独立し、フリーランス歴20年。これまで幅広く国内外のプロジェクトに携わる。クリエイティブのスキルを学べるサービスを創造中。電子書籍TokyoHeadTerminal。