Pages Navigation Menu

For Creative Communication

「幅」と「奥行き」のあるWeb情報設計 – LA 2024

これから「Webサイト構造設計」をするなら、トップページからツリー状にページを開いていく従来のやり方は、もう古い。

スマホやタブレットでの閲覧を前提としたWebサイトでは、もっと「平面的」に情報が一望できて、タップしたら即座に応答があって、各種ソーシャルメディアとの中継点になるような、軽量コンパクトな設計の検討が必要だ。かといって、イメージ先行で写真とキャッチコピーをただ並べただけでは不十分で、ある部分では十分な文字情報を格納し、メディアとして機能しなければならない。

この記事では、ロサンゼルスオリンピック公式サイト “LA 2024 (la24.org)” を手本として、スマホ時代っぽい平面構成の中に「幅」と「奥行き」を持たせるテクニックについて考察する。LA 2024はギャラリーサイトAwwwardsで2016/3/2のSite of the Day。平均評点7.60は、かなりバランスの良い高評価だ。

splash.png

基本設計は「縦積み」

LA2014のサイトは、基本的には「縦スクロール1ページ」でできている。

00_top.png

サイトを開いて最初の読み込みが終わると、画面左側に「縦方向の切り替え」を暗示する丸印インジケーターと、全画面を贅沢に使った動画敷きと、「下にスクロールしてね」という促しが出てくる。ここから下にスクロールしていくと、順々に画面が切り替わり、画像やテキストで構成されるコンテンツを順繰りに読んでいくという流れだ。

スマホやタブレットでのスクロール・スワイプや、PCでもトラックパッドですーっと流していく操作を念頭に置いた、このような「縦積み」の構成は、今やWebデザインの「王道」の一つ。とはいえ、サイトに訪れた人が「何をしたらいいかわからない」と思ったら速効閉じて終了なわけで、「縦方向に見ていってください」というコミュニケーションを丁寧に作り込むことは大事だ。

左側のナビ部分にマウスオン/タップすると、メニュー幅が広がってメニューラベルが表示される。「サイトを開いた時点では、メニュー項目を見せなくてもいい」という判断は、けっこう潔い。トップページを頭から流して見てもらうことを前提とするなら、それぞれの「見出し」に過ぎないメニューラベルは、確かに優先度が下がる。

01_nav

前提として、このサイトは「初めてLAオリンピックのことを知る人に、概要・全体像を知ってもらう」ことに集中していると思う。リピーターを意識したら、メニューから欲しい情報を探して… とか、更新感が… とか、色々考えなきゃいけなくなるけど、継続的なコミュニケーションは4種類のソーシャルメディア(Facebook, Twitter, Instagram, YouTube)に任せて、ホームページは「俯瞰」に特化したシンプルなものにしたのだろう。

こうした「新規ユーザーへの基礎認知」に振るコンセプトは、スタートアップのサービスや単一アプリのサイトで頻繁に見られる。LA2024のサイトのコンバージョンは、”GET INVOLVED”——継続的なコミュニケーションのための「接点」を生み出すこと。こうした「はじめの一歩」的な役割と、縦スクロール一直線の情報設計は、相性が良い。

詳細情報は「レイヤーを重ねる」

縦一直線のサイト構造に「詳細ページ」を持たせるテクニックが、「上からレイヤーを重ねる」という表現だ。

LA 2024のサイトでは、「Leadership(委員プロフィール)」「Media(プレスリリース)」「FAQ」の3つのメニューが同じ形式で、一覧のリンクをクリックすると詳細情報が重なるように出てきて、クリックで閉じるという動きをする。

leadershipleadership2

Leadership と Media の画面では、記事一覧が横方向スクロールでたぐれるようになっていて、多くの情報をわかりやすく格納している。Mediaの詳細レイヤーは、ちゃんとパーマリンクを持っているし、縦方向スクロールもあって格納できる情報量も十分だ。一方、サイト全体としての縦方向の移動は一画面分だけで済むから、詳細を見たい人だけが立ち止まればよく、サイト全体を俯瞰する動きを阻害しない。

media

こうした「記事を読む」動きで下手に「ページ遷移」を発生させてしまうと、「戻った時の動き」が複雑になったりする。一覧画面をそのまま置いておいて、上に重ねたレイヤーをただ閉じるだけなら、「下に重なった」側には何も影響しない。

この動きは、ある意味「ポップアップウィンドウ」の進化版だ。PCサイトで「小窓が開く」という動きは随分廃れたように思うけれど、一つの画面の中で詳細パネルが「ポップアップ」して、閉じるボタンに限らず「どこをクリックしても閉じれる」という操作性の良さが今や比較的簡単に実現できることを、「画面遷移」の作法として覚えておく必要がある。

ツリー構造は「右から引き出す」

MAPの画面は、レイヤーポップアップとは違ったインターフェースを持つ。左側のグローバルナビに対して、画面右端に「ローカルナビ」的なものが登場し、クリックで詳細に降りていくことができる。

map2

画面中央の地図を動かしたり拡大したりする動きを、右側から出てくるナビゲーションでコントロールする感覚は直感的だ。画面の左右に置いたナビゲーションは、「横軸方向に積んでいく」という形で、深さのある構造も表現しやすい。ある画面の中だけに影響する「ローカルナビ」を、メニューと逆側に置くというのも「使える」考え方だ。

スマートフォン縦置きの場合は、こうした「横長画面」に特有の空間利用が難しいので、諦めて素直に置いていくしかない。LA2024のスマホサイトは、横置きの世界観を適切に翻訳していると思うけれど、PC/タブレット横置きなら綺麗に収まる情報を、何スクロールかさせざるを得なかったりして、改めて「縦と横」の両立って難しいと思わされる。

map_sp IMG_5637

動画とPDFで奥行きを用意

他の要素としては、動画とPDFの使い方も特徴的だ。

最初の画面で背景に敷かれた動画に対し、「PLAY FILM」ボタンを押すとYouTubeの埋め込み画面が開いて、ロングバージョンを再生できる。 3分程度にまとめた動画は、ひとつのストーリーを短時間に伝える上で非常に強力なツールだ。筆者は個人的に、最近iMovieの動画編集の簡単さにすっかりはまっていて、ごく簡単な映像でも、静止画に比べて圧倒的に多弁であることに驚いている。映像素材をYouTubeに集約して、YouTube側で「よしなに加工」してもらうことで、今や動画を見せることのハードルはごく低くなっている。使わない手はない。

top_movie

一方、かなりしっかり作られた読み物としての「コンセプトブック」はPDFで用意され、”GAMES CONCEPT”の3画面目や、グローバルナビゲーションの “VIEW BID BOOK” からダウンロードができる(64ページもある!)。

pdf

混み合った内容をPDFで配布してしまう、というのもある種潔く効果的な情報発信だ。「紙もの」は、印刷を前提にかなり自由なレイアウトが効くし、細かい文字情報を詰め込んでも読みやすい。スマホ・タブレットでもピンチで拡大して読むのはそんなに苦にならない。「じっくり読ませるコンテンツ」を、俯瞰向けのWebデザインに取り込むのはけっこう骨が折れる。あるところで区切ってPDFに流してしまうのは、効果的な作戦だ。

まとめ:「画面遷移」のワイヤーを描こう

これまで見てきたように、”LA2024″サイトに見られる「縦積み」「レイヤー重ね」「右から引き出す」「動画とPDFの活用」といったテクニックは、情報設計の「基本形」のひとつとして汎用性が高そうだ。

そして、これらの方法を意識したとき、ワイヤーフレームの引き方も、従来の縦に長ーい枠を用意して「1ページずつ描いていく」形ではなく、「1スクリーン1メッセージ」で数多くのスクリーンを描き、つなげてインタラクションを表現する形のほうが効果的になる。

sketch

いい加減な模写

スマホ縦置きを意識しすぎて、やたら細長い画面が延々続いていくJPGはとっても扱いにくいものだけれど、スクリーンごとに情報を整理していくと、メッセージもはっきりするし、動きのイメージも湧きやすい。「1スクリーン」のデザインパターンは、よくDribbbleなどで「UIフレームワーク集」が配布されているから勉強になるしJustinmindなど後発のプロトタイピング&モックアップ作成ツールは、スクリーン単位の取り回しがとてもしやすくなっている(ほぼアプリ設計用のツールが多い)。

画面遷移設計のトレーニングは、気に入ったアプリを研究してみてもいいし、優れたWebサイトデザインにも、ユニークな画面遷移を意識したものは多い。少し古いサイトだが、Build in Amsterdamによる「TravelAlberta TripPlanner」も、紙芝居風にどんどんレイヤーを重ねるモチーフで、情報を絞り込んでいく動きがよくできたサイトとしてお勧めしたい。

travelalberta

「1ページ1画面」だけが、情報設計の枠組みではない。思い込みを捨てて、より気持ちのいい情報設計にチャレンジしよう。

コメントを残す