Webデザインを研究していたとき、あるポートフォリオサイトに出会いました。
画面いっぱいに広がる演出。動きも見せ方も格好いい。LP制作やWebマーケティングに関わる僕としては、こういうサイトを見ると、つい細かいところまで観察したくなります。
ところが、しばらく眺めているうちに、ある疑問が浮かんできました。
「……で、これは何のサイトなんだ？」
実は、答えは最初から画面の中にありました。それなのに、僕には見えていなかったんです。
しかも、この出来事をきっかけに自分のブログを見直したら、もうひとつ見落としを発見することに。Webの仕事をしているのに、なかなか切ない話です（笑）。
すごい。でも、何のサイトなんだ？
きっかけになったのは、インタラクティブデベロッパー、Guillaume Colombelさんのポートフォリオサイトです。
作品の見せ方や動きに惹かれて、PCであちこち眺めていました。こういうサイトは、ただ見ているだけでもデザインの勉強になります。
ただ、見ているうちに少し不思議な気分になってきました。
見た目はすごい。技術的にも面白い。なのに、初めて訪れた僕には、この人がどんなことをしているのか、すぐにはつかめなかったんです。
もちろん、ポートフォリオは作品そのもので魅力を伝える場所でもあります。文章で何もかも説明する必要はありません。
それでも僕は、Web制作の視点で眺めながら「何を伝えたいサイトなんだろう？」と考えていました。
そして、ChatGPTにもサイトについて聞いてみたところ、『説明文』があることを知りました。
……ん？説明文？どこに？
「説明、そこにあったの！？」
改めてPCの画面を確認してみると、ありました。
左下に、ちゃんと説明が。
ずっと画面を見ていたはずなのに、僕はそこに目がいかなかった。真ん中のオブジェクトに気を取られ、ほとんど意識していなかったんです。
これ、ちょっと面白い発見でした。
僕は「説明が分からない」と感じていた。でも正確には、説明がなかったのではなく、僕が見つけられていなかったんです。
中央のビジュアルや動きが印象的だったぶん、そちらばかり見ていたのかもしれません。
デザインを観察しているつもりが、肝心の情報を見落としていた。しかも、見落としていたことにさえ気づいていない。
なんだか、妙に考えさせられました……。
同じWebサイトなのに、スマホでは印象が違った
気になったので、今度はスマートフォンで同じサイトを見てみました。
すると、PCで感じた「どこを見ればいいんだろう？」という戸惑いが、少し違ったものに変わりました。
スマホではオブジェクト、文章まで情報が縦方向に並ぶため、僕には内容を追いやすく感じられたんです。
同じサイトなのに、画面が変わると、受け取る印象まで変わる。
PCでは演出に目を奪われていた僕が、スマホでは情報を自然に追っていた。少なくとも今回の僕には、そんな違いがありました。
ここで気づいたのは、単純に「スマホの方がデザインが優れている」という話ではありません。
画面の大きさや情報の配置、そして見ている人の意識によって、同じ情報でも気づきやすさが変わるということ。
情報が存在することと、相手に伝わることは、同じではない。
当たり前の話に聞こえるけれど、実際に自分が見落としてみると、なかなか刺さりました。
作った本人は、サイトを知りすぎている
今回の体験から思い出したのが、心理学や行動経済学で語られる「知識の呪い」という考え方です。
知識の呪いとは、あることを知っている人が、知らない人の立場を想像しにくくなる傾向のこと。1989年には、Camerer、Loewenstein、Weberによる研究でも扱われています。
例えば、Webサイトを作った人は、どこに何があるのか知っています。どのボタンを押せばいいか、どんな順番で読んでほしいかも分かっている。
でも、初めて訪れた人は違います。
何のサイトかも、どこに何があるのかも、まだ知らない。作り手が頭の中で持っている説明書を、読者は持っていないんですよね。
今回のポートフォリオの見落としそのものが、知識の呪いによって起きたと断定はできません。単純に視線が演出へ引っ張られた可能性もあります。
それでも、Webを作る側になったときの自分を考えると、この話は他人事ではありませんでした。
「自分は分かっている」を、いつの間にか「相手も分かる」にしていないだろうか。
そう考えた瞬間、あることが頭に浮かびました。
待てよ。自分のブログはどうなんだ？
サイトを研究して、情報の伝わり方を考えている時、あれ？自分のサイトはどう見えるだろう？と頭に浮かぶ。
そう思って、のりてらブログのトップページを見直してみました。
そこで気になったのが、「最新の投稿」に並んでいる記事のサムネイル画像です。
普通、記事一覧に画像とタイトルが並んでいたら、画像を押しても記事に移動できそうに見えませんか？
僕も、そう思っていました。
ところが、サムネイル画像を押しても記事ページに移動しない。下にあるリンクタイトルからは移動できるのに、画像からは移動できなかったんです。
「さ、サムネからリンク飛べない事気づいてなかった……（白目）」
WordPressの設定を確認してみると、Cocoonにはサムネイルから投稿へ移動するための設定がありました。
そう、ボタンを押す箇所があったのです。そして、その設定をオンにすると、あっさり解決。
……えっ、これだけ？コード追加を覚悟していたので、凄く肩透かしくらった感じでした。
複雑なコードを書き換えたわけでも、プラグインを追加したわけでもありません。ボタンひとつオンにしただけ。
もちろん、改善できたのはうれしい。
ただ、それ以上に「今まで何で気づかなかったんだろう…」という気持ちが残りました。
ブログを更新して、記事を書いて、デザインを調整して。自分では何度も見ていたはずなのに、そんな簡単なところを見落としていたんです。
他人のサイトを見て「情報が伝わらない理由」を考えていたら、自分のサイトにも直せるところがあった。
灯台下暗しにもほどがあったのでした。
でも、この小さな失敗は、今回の記事を書こうと思った大きな理由にもなりました。
サイトの使いやすさって、特別な機能や派手なデザインだけで決まるわけじゃないんですよね。
「ここ、押せそうだな」と思ったところが、ちゃんと押せる。
そんな小さな期待に応えることも、Webデザインの一部なんだと思います。
自分の「当たり前」を、もう一度疑ってみる
今回の出来事で、デザインを見る視点が少し変わりました。
以前は「この動き、どうやって作っているんだろう」「このレイアウト、面白いな」と、作り方や見た目を中心に観察することが多かったんです。
でも、これからはもうひとつ、考えてみたいことがあります。
「初めて見た人は、ここで迷わないだろうか？」
自分が作ったサイトほど、頭の中に完成図ができています。何度も編集したページなら、なおさらです。
だからこそ、たまには何も知らない人になったつもりで見直してみる。実際には完全に初見の状態へ戻れなくても、確認の仕方は変えられそうです。
今日、持ち帰ってほしい小さなチェック
- 最初の数秒で、何のサイトか分かる？
- 押せそうな画像やボタンは、期待どおりに動く？
- 説明を読まなくても、次に何をすればいいか分かる？
僕自身、個人ブログだけでなく、Webアプリも作っています。例えばアトリログ15も、作った自分には操作が分かっていて当然。
でも、初めて触る人にも同じように伝わるかどうかは、別の話です。
作ることに夢中になるのは楽しい。だからこそ、ときどき作品から少し離れて、初めて触れる人の目線を思い出したいと思いました。
おわりに｜説明は、そこにあった
今回のWebデザイン研究で、ものすごい技術を身につけたわけではありません。
それでも、ひとつ大事な発見がありました。
見落としていた説明は、最初からそこにあった。自分のブログを改善する設定も、最初から用意されていた。
なかったのではなく、気づいていなかった。気づかないと、そもそも修正ができない。
デザインの世界には、まだまだ知らないことがたくさんあります。でも、今回のように「知っているつもりだったこと」を疑うのも、立派な学びなのかもしれません。
何かを作ったあと、少しだけ見方を変えてみる。
その小さな習慣を、これからのブログやWeb制作にも持ち込んでいきたいと思います。
それにしても、サムネイルのリンク設定がボタンひとつだったとは。
……やっぱり、ちょっと切ない（白目）。
この記事で残したい4つのこと
今日のまとめ一行
説明があることと、相手に伝わることは別。作り手の「当たり前」を、ときどき疑ってみたい。
今日できる一歩
自分のサイトやブログをスマホで開いて、ひとつだけ操作してみる。いつも押さない画像やボタンを試すだけでも、新しい発見があるかもしれません。
次に読む一記事
似たような発見は、以前のPOP制作でもありました。「POPデザインが伝わらない理由｜6万円を目立たせて気づいた『デザインの主語』」では、作り手が伝えたいことと、見る人が受け取ることの違いを書いています。
ブログ案内
のりてらブログでは、Web制作やデザインの研究、日常での発見、ちょっとした実験を記録しています。完成したものだけでなく、途中の失敗や気づきも含めて楽しんでもらえたらうれしいです。
参考：Guillaume Colombel氏のポートフォリオ／Camerer, Loewenstein & Weber（1989）The Curse of Knowledge in Economic Settings／Nielsen Norman Group（2026年8月7日）Dogfooding vs. QA vs. User Research
コメント