デザインのしやすいワイヤーフレームを作りたい！

入社して1年が経ちました。この1年（コロナによる休業期間があったので10ヶ月くらいですが）企画者として働いてみて、「もっと勉強しなければ！」と思ったのが「ワイヤーフレーム」の作成です。一般的に「ワイヤーはデザインではない」と言われますが、その線引きについて常々頭を抱えています。そこで今回は「デザインしやすいワイヤーとは？」というテーマで考えてみました。

ワイヤーフレームとは？

そもそも「ワイヤーフレームとは何なんだ」というところで、基本的なところを勉強したいと思います。

ワイヤーフレームとは「webページのレイアウトを定める設計図」のことです。サイト制作には欠かせない要素となり、「ワイヤー」と略される場合もあります。ワイヤーをもとにデザインが作成され、デザインをもとにコーディングがされます。

ワイヤーフレームを作成する前に

ワイヤーフレームを作成する際、いきなりワイヤーを作成するのではなく、サイトに掲載するコンテンツの書き出しを行います。例えば、脱毛サロンのLP（広告用ページ）を作る場合で考えてみましょう。

このように情報を整理するという意図も兼ねて、コンテンツの書き出しを行います。

ワイヤーフレームの困っちゃうポイント

ワイヤーフレームで避けるべき、デザイナーの困っちゃうポイントを具体的に見ていきます。デザイナーの目線を勉強するために、隣の席でお世話になっているデザイナーのおぎさんにヒアリングをしました！今回は上記で説明した脱毛サロンのLP（広告用ページ）のワイヤーを作った場合で説明してみます。（わかりやすいように表現を誇張しています。）

困っちゃうポイント①「ここは絶対にこの配色なのですか…？」

× 悪い例 ×

上の例で一番に問題なのは「色」です。ワイヤーに色彩情報があると、デザイナーは「その色で作らなければならない」と感じてしまいます。基本的にワイヤーにはできるだけ「色」を使わないようにしましょう。色について指定がある場合は、「暗いイメージ」「周りの配色に対して目立つ色」など、言葉で伝えると良いと思います。

困っちゃうポイント②「ここは絶対にカラフルな日本地図なのですか…？」

× 悪い例 ×

ワイヤーを作成する際、「画像を入れたい」という場合がありますよね。しかし、画像についてこのように描かれてしまうと、デザイナーは「ここは絶対にカラフルな日本地図を載せないといけない」と感じてしまいます。

画像を入れたい場合は、「言葉」で指示します。例えば、先ほどの日本地図の部分であれば、「日本地図」と指定します。画像を入れたい意図があれば書き加えましょう。

◎ 良い例 ◎

このようにどのような画像を載せてほしいのか「言葉」で説明しましょう。デザイナーがサイトに合った画像を入れてくれます。その画像を入れる「意図」を明確に提示するとより「どのような画像を入れたらいいのか」イメージしやすくなります。

困っちゃうポイント③「どこを強調すればいいかわからない…」

× 悪い例 ×

このように全て同じテキストサイズで書かれてしまうと、デザイナーはどこを強調したらいいのかわからなくなってしまいます。

◎ 良い例 ◎

このように、テキストサイズや太字で強弱を表現して伝えられると良いでしょう。「なぜここを強調したいのか」を補足で説明するとより丁寧に伝えることができます。

まとめ

そもそも、ワイヤーはWEBページの作成に「必ず」必要というわけではありません。なぜワイヤーを作るのかと言うと、言葉だけの企画書で伝わらない部分を補足するためです。つまり、「言葉では伝えきれない企画の意図」を伝えるのがワイヤーの役割であると考えます。

今回お話を伺ったデザイナーの方はこのように仰っていました。

つまり、デザインしやすいワイヤーを作るためには、「余白」を残す必要があるということです。ワイヤーフレームの役割を理解した上で、余白を失わないワイヤーを作っていきたいです。まだまだワイヤーフレームを極める道のりは遠いですが、日々精進したいと思います。最後に、今回の記事の執筆にあたり、ご協力いただきましたデザイナーのおぎさん、ありがとうございました！！

今回作成したワイヤーはこちら（Cacooに遷移します）