WEB DESIGN Webデザイナー 2026.11.07

引き出しを増やす観察トレーニング｜街と画面の見方

「センスがない」と感じる前に、見たものを言葉にする練習をしてみてください。デザインの引き出しは、参考画像を大量に保存す…

text: HYPE編集部

「センスがない」と感じる前に、見たものを言葉にする練習をしてみてください。

デザインの引き出しは、参考画像を大量に保存するだけでは増えません。どこに目が止まり、情報がどう並び、誰がどんな場面で使うのかを観察して、理由を考えることで、自分の制作に使える判断材料になります。筆者は、街と画面を「見る」だけで終わらせず、気づいたことを記録する習慣を勧めます。

Table of Contents

観察と評価を分ける

観察は、目の前にあるものを具体的に記述することです。「この店の看板は見やすい」では評価にとどまります。「道路から見える位置にあり、背景と文字の明度差が大きく、店名が他の情報より上に配置されている」と書けば、何を見たかが伝わります。評価を禁止するのではなく、その根拠を先に見つけます。

街を歩くときは、店舗の看板、案内表示、メニュー、ポスター、レジ周りなどを観察できます。誰がどこから見るのか、歩行中か立ち止まっているか、何秒ほどで情報を読むのかを考えます。実際の利用者を観察していない場合は、想像を事実のように書かず、仮説として記録します。

観察は、一度に1つの対象だけ。全部を見ようとすると、結局どれも印象に残りません。

見やすさの観察には、感覚だけでなく基準も使えます。デジタル庁の「ウェブアクセシビリティ導入ガイドブック」は、文字の大きさや色のコントラストなど、誰にでも伝わる表示の確認ポイントを整理しています。こうした基準に当てはめて見ることが、評価と観察を分ける助けになります。

一回の観察で見る対象を絞る

一度に配色、書体、レイアウト、コピー、写真のすべてを分析しようとすると、記録が散漫になります。観察するテーマを一つに決めます。今日は文字の階層、次は行動ボタンの位置、その次は写真の切り取り方というように、視点を分けます。テーマを絞ると、異なる場所や画面を同じ基準で比べられます。

観察メモは、「対象」「見た状況」「気づいた事実」「理由の仮説」「制作に使う問い」の形にします。たとえば、駅の案内板なら、対象は乗り換え表示、状況は人が歩きながら見る場面、事実は行先名が大きく路線記号が色分けされていること、仮説は立ち止まらずに読めるようにしていること、制作への問いはスマートフォン画面で同じ情報をどう整理するかです。

観察の材料として、デザイン誌の定期購読で事例を仕入れる方法もあります。→ 雑誌のオンライン書店 Fujisan.co.jp

観察メモは、提案の材料置き場です。案件の場面で取り出せる形にしておくのが大事です。

色の使い方に絞って観察するときは、国際基準も物差しになります。W3Cの「Web Content Accessibility Guidelines (WCAG) 2.2」は、色だけに頼らない情報の伝え方などを定めており、画面の見え方を点検する観点が得られます。

引き出しを案件に使う

参考にした要素をそのまま真似るのではなく、課題に応じて原則を応用します。看板の視認性に気づいたなら、ウェブ上の見出しや申込ボタンを目立たせる設計に応用できます。メニューの情報順を観察したなら、サービスページのプラン比較に使えるか考えます。見たものをコピーするのではなく、なぜ機能している可能性があるのかを抽象化します。

抽象化の後は、案件の条件を当てはめます。画面サイズ、閲覧環境、ブランド、掲載情報、利用者の行動が違えば、同じデザインを移植しても機能しません。参考例のどの原則を採用するか、どこを変えるかを説明できると、依頼者へ判断の根拠を伝えやすくなります。

観察記録をポートフォリオに活用する場合は、制作した作品とは区別します。分析メモを「研究」「参考例の観察」として公開し、他社の成果物を自分の実績に見せないようにします。引用画像を使うなら、必要最小限にし、権利条件や引用の要件を確認します。

観察したことを制作に変える基礎を学び直すなら、オンラインスクールも選択肢です。→ Webスキルを学ぶオンラインスクールデイトラ

街で見たデザインや他人の作品を観察の材料にするときは、権利への配慮も引き出しの一部になります。文化庁の「著作権」のページでは、著作物の利用に関する基本的な考え方が案内されており、参考にする範囲と自分の表現にする線引きを確認できます。

自分の観察を検証する

観察から得た仮説は、実際に使う人の反応で確かめます。「このボタンは見つけにくそう」と感じたら、別の人に画面を見てもらい、何を探したかを尋ねます。少人数の感想を市場全体の結果と誤解しないこと。確かめた人数や条件を記録し、分かった範囲だけを説明します。

ウェブサイトやアプリのアクセシビリティを考えるときは、色だけに頼って情報を区別していないか、文字が読みやすいか、操作要素が識別しやすいかを確認します。デジタル庁のウェブアクセシビリティ導入ガイドブックやW3CのWCAGは、設計を見直す際の基準として参照できます。基準を読んだだけで個別製品の適合を断言せず、実際の実装を確認してください。

観察は、使い手の行動を決めつけるためではありません。自分の前提と、実際に確認できた行動を区別し、必要なら設計を修正します。「若者はこうする」「高齢者は読めない」と属性だけで一般化せず、どの環境で何を確認したのかを記述します。