デザインを始めるとき、いきなりFigmaやIllustratorを開いてしまう人は意外と多いと思います。

画面の上にヘッダーを作ってとりあえず写真を置いてみる。

そこから文字の大きさや色を考えているうちに少しずつホームページらしくなっていくので、作業としては進んでいるように感じます。

でも、僕はこの始め方がかなり危ないと思っています。

デザインをしながら構成まで考え始めると、「何を伝えるか」と「どう見せるか」を同時に考えることになります。

途中で手が止まるのはデザインのアイデアがないからではなく、そもそも何を置けばいいのか決まっていないことも多いんです。

家を建てるときに、玄関を作ってからリビングの場所を考える人はいませんよね。

ホームページも似ています。

見た目を考える前に、このページで誰に何を伝えるのか。

その人がどんな順番で見れば分かりやすいのかを決めておいたほうが後の仕事はずっと楽になります。

最初は紙とペンでも十分です

ワイヤーフレームという言葉を聞くと少し専門的なものを想像するかもしれません。

最初からFigmaできれいに作る必要はありません。

その前に一度紙へ描いてみることもオススメしたい。

ページの一番上に大きな四角を描いて、「ここでは会社が何をしているのか伝える」と書いておく。

その下には「もう少し詳しく知りたくなる材料が必要かな」と考えながらまた四角を描いていく。

このくらいで十分です。

手書きがいいのは雑なまま考えられるところです。

パソコンを使うと不思議ときれいにしたくなるものです。

まだ内容が決まっていないのに余白が気になったり文字の位置を揃えたくなったりする。

その作業をしていると、考えているつもりがいつの間にか整える仕事になってしまいます。

紙なら「やっぱり違うな」と思ったところを線で消してその横に描き直せば終わりです。

人に見せるものではないのでそれでいい。

ワイヤーフレームの前に考えること

そもそもワイヤーフレームは箱を並べるためのものではありません。

このページを見た人に最終的にどんな印象を持ってほしいのか。

それを考えるところから始まります。

たとえば、地域で長く営業している会社のホームページを作るとします。

会社側から話を聞いていると、「これも載せてほしい」という話は当然たくさん出てきます。

長く続けてきた歴史には思い入れがありますし最近始めた事業も知ってほしい。

せっかくなら働いている人たちのことも見せたいでしょう。

どれも間違いではありません。

ただ、その会社を初めて知った人にとって一番最初に必要な情報は何でしょう。

もしかすると「創業○年」より先に「この会社は自分の困りごとを解決してくれるのか」が知りたいかもしれません。

ここを考えずに会社側の言いたいことを順番に置いていくと情報はたくさん載っているのになぜか伝わらないページになります。

ワイヤーフレームを作る前に、「見終わった人に何が残ればいいのか」を一度考えておく。

それだけでも構成はかなり変わります。

いったん頭の中にあるものを外へ出す

方向が見えてきたら、必要そうな情報を一度外へ出してみます。

ここで大切なのは、まだページの形にしようとしないことです。

お客様から聞いた話や会社の資料を見ながら気になったことを書いていると「これはぜひ見せたい」と思うものもあれば、「会社としては大切だけど、このページで詳しく説明しなくてもよさそうだな」と感じるものも出てきます。

最初からメニューの形に当てはめてしまうとこうした判断がしにくくなります。

一度ばらばらの状態で眺めてから、この会社を初めて知る人の気持ちになって並べ直してみる。

僕は、この時間がかなり大事だと思っています。

制作側は会社の話を何度も聞いているので、いつの間にか詳しくなっています。

でもホームページを見る人はその会社について何も知らない状態から入ってくる。

この差を忘れると作る側には分かるけれど、見る側には分からないページになってしまいます。

そこから手書きのラフを作る

情報の流れが見えてきたら、ここで初めてページらしい形にしてみます。

最初に何が見えるのか。

その続きを読みたくなる理由があるか。

途中まで読んだ人が「この会社なら相談できそうだ」と思う材料がちゃんとあるか。

そんなことを考えながら紙の上に置いていきます。

実際に描いてみると頭の中だけで考えていたときには気付かなかったことが見えてきます。

「ここまでずっと会社側の話しかしていないな」と感じることもありますし、似たような内容を別の場所でも説明していたことに気付くこともあります。

この段階なら、大きく順番を変えても何も惜しくありません。

紙一枚ですから。

これが、すでに写真を選び込んで文字組みまで終わったあとだと簡単にはいきません。

だからきれいに作る前に一度雑に作る時間が必要だと思っています。

ラフが決まったらワイヤーフレームへ

紙の上である程度まとまったら、Figmaなどを使ってワイヤーフレームにしていきます。

ここで初めて実際の画面として見たときの大きさやバランスを確認します。

紙では良さそうに見えた構成でもパソコンの画面にすると妙に長く感じることがあります。

反対に大事なところを簡単に済ませすぎていることに気付く場合もあります。

ワイヤーフレームはデザインへ進む前の確認作業でもあるんです。

だから、この時点では完成品のように見せなくても構いません。

ワイヤーフレームではまだ格好よくしない

ここで少し我慢が必要です。

Figmaを触っているとつい色を入れたくなります。

ちょうど良さそうな写真を見つければ置いてみたくなるし「このフォントを使ったら雰囲気が出そうだな」と試したくもなります。

それはもう少し後で。

ワイヤーフレームで見たいのはそのページが美しいかではなく話の流れが自然かどうかです。

この段階では少し味気ないくらいでいい。

見た目を整えてしまうと構成が多少おかしくても良く見えてしまうことがあるからです。

きれいな写真が入っているだけでそれらしいホームページに見える。

これはデザインの力でもありますが設計を確認している段階では少し邪魔になることもあります。

横で説明しなくても分かるか

ワイヤーフレームができたら、誰かに見てもらうのもいい方法です。

そのときは、できれば横から説明しない。

作った本人は、「このあとにはこういう写真が入って」「ここを押すと詳しいページへ行って」と言いたくなります。

でも実際のホームページでは制作者が隣に座って説明することはできません。

黙って見てもらうと自分では思ってもいなかったところで手が止まることがあります。

「これって何のこと？」

その一言で、こちらが当たり前だと思っていたことが実は伝わっていなかったと分かる。

こういう発見は完成してからよりワイヤーフレームの段階でしたほうがずっと楽です。

遠回りに見えて、実は早い

「そこまでやっていたらデザインに入るまで時間がかかる」と感じる人もいると思います。

ただ、僕の感覚では逆です。

構成を決めずにデザインへ入ると途中で何度も迷います。

作っている最中に「この下は何を置けばいいんだろう」と考え始めたり一度完成させた場所を丸ごと作り直したりする。

しかも、きれいに作れば作るほど捨てにくくなるんですよね。

時間をかけて作ったものには愛着が出ます。

本当はいらないと分かっていても「せっかく作ったし」と残したくなる。

この気持ちはけっこう厄介です。

まだ鉛筆で描いた四角ならそんな迷いはありません。

違えば消せばいい。

ワイヤーフレームまでの作業はあとで大きく戻らないための時間でもあります。

デザインは画面を作るところから始まるわけではない

ホームページを見ていると、見た目はとてもきれいなのにしばらく見てもその会社のことがよく分からないものがあります。

反対に、派手なことはしていないのに読み進めているうちに「なるほどこういう会社なんだな」と自然に分かるページもあります。

この違いは色やフォントの選び方だけではないと思っています。

デザインに入る前にどれだけ考えたか。

その会社の何を見せれば伝わるのかを考え初めて見る人の気持ちを想像して不要なものを落としていく。

その結果が最後に画面として見えているだけなんだと思います。

ワイヤーフレーム自体がお客様の目に触れることはありません。

でも、完成したホームページの分かりやすさには考えたことがちゃんと出ます。

いきなりFigmaを開いて悩んでいるなら一度閉じてみてもいいかもしれません。

紙とペンを持ってまずそのページで何を伝えたいのかを考えてみる。

デザインを始めるのはそのあとで十分です。

むしろその紙に最初の線を引いたところから、もうデザインは始まっていると思っています。

それにきっとその方があなたの脳には良いはずです。

AI時代だからこそ手を動かしてみませんか。