blog

デザイン分析って結局どうすればいいんだろう、練習がしたいよねという話になり、同じ勉強会に通っているSさんと試しにやってみることに。
フォーマット、進め方、完全に手探り状態からのスタートだが、こういうのはとにかく誰かと一緒にまずやってみるに限る。

目的

• デザインの「どこを」「どう」分析するかのポイントと流れを掴む
• 分析に使った言語表現を他人と摺り合わせることで、自分の感覚と使用語彙の結び付きが適切か（≒世間一般での認識と著しくずれていないか）を検証・調整する
  →デザインに対する感じ方は人それぞれだとしても、「適切な表現」と呼び得る共通認識領域はある程度存在する（そうでなければ言語の信頼性は著しく損なわれることになる）。ここから自分が著しくずれていないかの確認
  「ビジュアル→言語化」の感覚・認識がずれていないことがわかってはじめて、アウトプットの際に適切な「言語→ビジュアル化」ができるはずである
• 習慣化する

今回のお題

神戸ハーバーランドトップページ（分析はトップページのみ、他ページを手掛かりにするのはOK）
：今回は言い出しっぺの私が選定させていただいた。Accessible Site Galleryより

分析のポイント

何も評価項目が決まっていないとそれこそどこから手を付ければいいかわからないので、GIGさんで公開している7STEPをベースにしてみる。
ここに、勉強会の先生が仰っていた、
「最終的には『○○っぽい（ex. 帝国ホテルっぽい）』くらいの短い一言に集約できるといいよね」
というヒントを加え、ひとまずそこを目標に据える（白状すると私はここまで辿り着けなかった）

自分の分析

STEP1：デザインをパッと見たときの印象を言語化する

• 明るい、楽しそう、ポップ
• パステルカラー主体のはしゃぎすぎないマイルドなポップさをベースにしつつ、アクセントカラーと写真はビビッド。赤い観覧車の写真が大部分を占めるFVでは「ビビッド」寄りの印象が強い
  →「大人向けのおしゃれな街」という神戸の印象をベースに、子供や親子連れも楽しめる複合アミューズメントエリアのイメージが付加されている

STEP2：ロゴ・文章・写真からブランド理解を深める

• 二羽の鴎がくちばしを合わせている手描き風のロゴマークに縦長ゴシック、ボールドなロゴタイプ。ロゴマークからは親しみやすさ、円満、カジュアルさを感じる
• 写真の彩度が高く、特に赤基調の観覧車がよく目立つようになっている。園のシンボルであることが窺える
• 神戸ハーバーランド地区は、「海につながる文化都心の創造」をテーマに計画されてきた（運営会社HPより）
  →「波」のモチーフや「鴎」、広めの余白から来る大らかさのイメージ、メインカラーの薄い青などが、「海」というキーワードに収斂する。コンテンツ順でFVの次にイベントが来ているのが「文化」推しの部分か

STEP3：レイアウト・余白を分析する

• コンテンツ幅はmax1160px。全体的にゆったりした余白の取り方に見える。その分タイルやカード間の余白は狭めにして、ブロックごとにコンパクトにまとめている
• ページ内のコンテンツ順とメニューのカード順は一致しない
  →コンテンツ順は運営側が「見てほしい順」、カード順は「ユーザーとして気になりそう順」？
• 【イベントセクション】：各項目（時間、場所など）タイトルの代わりにアイコン。語頭が揃うので整然とした印象を担保できる
• 【イベントセクション】：各カードタイトルはbottom寄せになっており、なるべく写真との余白を確保している
• 【ショップガイドセクション】：ガイドはタブ形式。操作後の結果を予想しやすく、全体像の把握がしやすい。場所も取らない
• 【ショップとエリアの間、写真とイラストのブロック】：背景が、「不整形＆イラストレーション」と「整形＆写真」で交互に配置されている
  →イラストと写真をレイアウトに共存させている？
  また、その中にあって、白く縁取りされた他のイラストとは違い透過で配置された風船が、写真とイラストの境目を絶妙にぼかす役割を持っていて遊び心がある
• 【エリアセクション上部】：写真付きで場所のイメージがしやすい。上下に緩やかなリズムを持った配置で軽やかさがある。自動再生ではないところが、視線を引っ張りすぎなくてちょうどいい
• 【エリアセクション下部】：タグクラウドっぽいレイアウトだが、タグはnavだった
  →上部の写真をビジュアルから入れるナビゲーション、下部を施設名が一覧できるナビゲーションとしている？
• 【バナーブロック】：バナー同士の距離はメニューのカード等よりも広め。メニューのようなコーナーとして括っていないからか
• 【インスタブロック】：テキストでのキャプションなしで写真のみ（テキストは写真に入っている）

STEP4：色味を分析する

• ベースカラー：#FFFFFF
  メインカラー：#D4EAFF
  アクセントカラー：#FCE851（黄）と#484A92（紫）の補色
• 【イベントセクション】hoverで各カードの色が反転、それに合わせて字の色も反転させて見やすさを確保

STEP5：フォントを分析する

• Noto Sans、色は#3D3D43ないしは#484A92
• 各セクション見出しのletter-spacingは0.1emで少しゆったりめ

STEP6：あしらい

• 1セクションに1つの割合でイラストがある
• 【FVのナビゲーションブロック】各アイコンや見出しに、有機的形態の黄色のあしらい

STEP7：アニメーション

• 各セクションの「一覧を見る」ボタンは、hoverでバックの黄色いあしらいがピタリと枠に合うようにアニメーションがついている。フォーカスしている感があって心地よい

課題・気付き

• STEPによって気付けたことの量に大きく差がある→視点の偏りがある
• 気付くと「事実の羅列」になってしまいがち。そこから「そのデザインを採用することにどういった狙いがあるか」まで掘り下げないとあまり意味がない
• ユーザー視点の欠如。最初から「デザインする立場の視点」で見てしまっていたというのが今回最大の気付き。一緒にやっていたSさんが、
  「子供がいると、知らない場所に行くときに「遊べるところ」「ごはん食べるところ」「子供がぐずったときに行けるところ」といった細かいシミュレーションをする。そういうシミュレートに沿って情報が配置されていて有難い」
  と仰っていたところで目から鱗が落ちた。こういうのは経験者でないとまず主体的に気付くことはできない、かといってもちろん全ての立場を経験することもできないので、やはり立場の異なる人と同じ課題に取り組むという部分に大きく意味がある
  →「誰に何をしてほしいサイトなのか」を汲み取り、ここから想定されるユーザーになりきって見たとき、7STEPの各要素からどんな印象を受けるか（ここではなるべく直感的で平易な語彙を選ぶ方がよさそう）
• STEP2について：こういった施設や情報サイトでは、いわゆるコーポレートサイトなどより自分達に関するテキスト量＝言語化されているブランディングのヒントが少ない。運営会社のページなどを見てみるのも手かも
• 進行をまったく決めていなかったので、だらだらと喋る流れになってしまった。次回は、「お互いの分析を見る」→「質問＆説明タイム」という簡単な流れに沿ってやってみる