新人として現場に入ると、最初にぶつかるのが「UIってどう見ればいいの？」という戸惑いです。
ボタンの形、色、余白、文字サイズ…。
見えるものが多すぎて、どこから見ればいいのか分からない。
画面レビューの場では先輩が軽やかにコメントしていくのに、自分は何も言えず、ただ視線を泳がせてしまう。僕も同じでした。
でも、今ならはっきり言えます。
UIを見る前に“構造”をつかむことさえできれば、デザインレビューの苦手意識は一気に和らぎます。
構造とは、画面に流れる“目に見えない下地”です。
この下地さえ読めれば、見た目の違和感は自然と整理できるようになります。
第18回では、Webディレクターとして1〜3年目で必ず必要になる
「構造の観察力」をテーマに、若手が最初に覚えるべき観察術をまとめます。
明日から実践できる小さな習慣ばかりです。
目次
UIを見る前に“構造”をつかむための観察術
1. 最初の5分は「表面」を見ない
画面を開いたとき、多くの新人は“見た目”から入ってしまいます。
色、アイコン、余白、フォント…。
しかし最初の5分間は、それらをあえて意識の外に置くのがポイントです。
代わりに見るのは 流れ・目的・判断点 の3つだけ。
- 流れ：ユーザーはどこへ進む想定なのか
- 目的：この画面は何を達成するために存在するのか
- 判断点：ユーザーが迷いそうな場所はどこか
これはUIの知識がなくても読み取れます。
むしろ知識が少ない段階こそ、この「構造の芯」を先に捉えておくほうが、後からの学習がずっと速くなります。
構造を先に見れば、後から目に入るUIの違和感も“理由づけ”ができます。
- ボタンが小さく見えるのは導線のゴール位置が遠いから
- 情報が多いように感じるのは提示順の構造が乱れているから
こうした“根本の理由”にたどり着けるようになるのです。
2. 「導線・情報・操作」の3層で観察する
構造を観察する際に最も役立つのが、
「導線」「情報」「操作」 の3層で画面を見る方法です。
- 導線（ユーザーの道）
どこへ進み、どこで曲がり、どこでゴールが示されるのか。 - 情報（道に置かれたサイン）
その時点で必要な情報だけが見えているか。 - 操作（ユーザーが行う動き）
操作の難易度が自然か、不必要に複雑ではないか。
この3層で見れば、UIの「違和感」が一気に言葉になります。
たとえば、
「なんか迷うな…」は、導線の構造が弱い可能性。
「テキストが多いな…」は、情報の提示順に課題があるかもしれない。
「押しづらいな…」は、操作の負荷が高いサイン。
デザインの専門知識がなくても、この層さえ理解していれば、レビューでの発言は“表面の感想”ではなく“構造的なコメント”に変わります。
3. UIは“表面”ではなく“地図”として観察する
UIを“美術作品”のように見ると、どうしても表面の美しさに意識が行きがちです。
でも、ディレクターが見るUIは“地図”です。
- ユーザーがどこから来て
- どこで迷い
- どこで安心し
- ゴールへ向かうのか
この“地図の道筋”を読むことが、UIレビューの本質です。
僕がおすすめしている観察法のひとつが
「ミニ地図ノート」をつくること。
画面を「地図」に見立てて描くだけで、構造が理解しやすくなります。
- 入口（ユーザーが最初に見る要素）
- 分岐点（次の選択肢）
- ゴール（画面の目的）
この3つだけを図にする。
これだけでレビュー力は劇的に変わります。
4. “余白”を見るのは一番最後
新人が陥りやすいのが、
余白・揃え・位置のズレを最初に触ってしまうこと。
確かにUIの表層として気になりやすい部分ですが、
構造が固まっていない段階でここを直し始めると、ほぼ100％やり直しになります。
余白は、構造と文言が固まった後に初めて意味を持つもの。
レビューでも、段取りは次の順番です。
- 導線の意図
- 情報の提示順
- 操作の自然さ
- 最後に余白と見た目
余白は、画面の“空気の流れ”を成り立たせる大事な要素ですが、
それは 構造ができて初めて成立する仕上げ だと覚えておくと失敗しません。
5. 若手に一番効くのは「観察ノート」
構造を読む力を育てるのに、最も即効性があるのが
「観察ノート」 です。
内容はシンプルでいい。
- 何の画面に触れたか
- どこで迷ったか
- どこで安心したか
- 一番の“構造的理由”は何か
この4つだけ。
最初はうまく書けなくても構いません。
数週間続けると、画面を触ったときの“考え方の癖”が変わります。
構造の読み方は、本を読むよりも
自分の体験を記録したほうが圧倒的に身に付きます。
僕が初めて「構造」を読めた日のこと
新人だった頃、僕はUIレビューが本当に苦手でした。
画面を見ると、どうしても色や余白に意識を奪われてしまい、
自分のコメントは「なんとなく気になる」という感覚的なものばかり。
レビューの場では先輩が次々と構造的な指摘をしていくのに、僕はただ黙ってメモを取るしかありませんでした。
ある日、ベテランのデザイナーと一緒にプロトタイプを確認する機会がありました。
その時、先輩が画面を開いた瞬間、こう言いました。
「この画面、入口とゴールが遠いね。」
僕はその言葉の意味がすぐには理解できませんでした。
入口？ ゴール？
その画面は一見きれいで、余白も整っているように見えたのに、
先輩は一瞬で“構造の弱さ”を掴んでいたのです。
先輩に理由を聞くと、
「最初の視線の置き場と、ユーザーが進みたい場所がまったく結びついていないから」
と説明してくれました。
その瞬間、僕は初めて画面を“地図”として見ました。
- 入口はどこか
- 分岐はどこか
- ゴールはどこか
- その距離は自然か
- 判断点は少ないか
この5つが一気に頭に入ってきたのです。
その日から、僕は必ず
「入口→分岐→ゴール」の簡易地図を描く
という観察習慣を始めました。
数週間続けるうちに、レビューの場で
「この入口とゴールの距離が少し遠い気がします」
「分岐が多いので、目的がぼやけるかもしれません」
というコメントを自然に言えるようになりました。
先輩は笑いながら
「海斗、構造が見えるようになったね」
と声を掛けてくれました。
あの瞬間、
“自分は作業をこなす側ではなく、体験をつくる側に足を踏み入れた”
と感じました。
デザインが分からない新人は多い。
でも、構造を見る力は、知識よりも“観察”が育ててくれます。
そしてその観察は、今日から始められます。
