【実例付き】Webデザインの要！ワイヤーフレームとは

Webサイト制作の流れをご説明する際や、実際の制作過程で「ワイヤーフレーム」という言葉をよく使います。

お客さまには「デザインの前段階、下書きのようなもの」といった説明をよくさせていただくのですが、今日は具体例も交えつつ、あらためてワイヤーフレームとは何かをご説明したいと思います。

ワイヤーフレームとは

英語を直訳すると「ワイヤー：針金、金属線」「フレーム=枠、額縁」となりますが、当たらずも遠からず。

Webサイト制作におけるワイヤーフレームとはつまり、Webページのレイアウトやコンテンツの配置を見える化したものです。

具体例として下記がとあるサイトのトップページのワイヤーフレームです。

制作会社やクリエイターによっては「構成案」「ラフ」と呼んだりする場合もあります。

Google画像検索にて「ワイヤーフレーム」の検索結果を見ても、いろいろ出てきますので、なんとなくどんなものかイメージが湧くかと思います。

»ワイヤーフレーム（Google画像検索結果）

ワイヤフレームの役割・重要性

Webサイトの新規制作にせよ、ホームページのリニューアルにせよ、ヒアリングや企画をもとに、まずこのワイヤーフレームを作成します。

ご依頼後、いきなりデザインに着手するわけではないんですね。

サイトのわかりやすさ・操作性の検討

「デザインも同時にやってしまえば早くできあがるのでは？」

なかにはそんなふうに思われる方もいらっしゃるかもしれません。

ただ、いわゆるデザイン（見た目の装飾や演出）が先行してしまうと、そのデザインありきになってしまいます。例えば「ユーザーのためにココに料金表を入れたいけど、かっこ悪いからやめよう」「スペースがないからやめよう」といった具合です。

ヒアリングした内容やご要望、資料等をふまえ、それら情報をグルーピングしながら整理したり、どのように構成したらわかりやすいかをしっかり検討する。そしてそれを見える化する。

デザインは本来、伝えたいことがより伝わるように、狙い通りの印象になるようにするための演出装置です。

装飾や演出のない状態、文字だけでもわかりやすく、ユーザーに伝えたい情報が正しく配置されているか、見たいページ、知りたい情報が見つけやすく移動しやすいか、Webサイトの土台をしっかり作り込むためにはとても大切な工程なんです。

認識の共有

社内の制作チームに対して、またお客さまとの間での、認識のすり合わせをするためにも、重要な資料となります。

言葉や文章だけでのやりとりではどうしても認識に違いが出るもの。

それが功を奏する場合もありますし、多少なりともあえてワイヤフレームを無視したデザインをする場合もなくはないのですが、「こういうページにしたい」というひとつの基準となるのです。

ワイヤフレームは誰がつくるのか

ご相談時、お見積り時に、お客さまの方でワイヤーフレームをご用意してくださることもありますが、基本的に制作会社であれば、ディレクターやデザイナーが作成することが多いです。

案件にもよりますが、うちの場合、まず僕が全体のワイヤーフレームをざっくり作成します。社内的にはこの工程を初期設計と呼びます。

その後、制作チームと相談しながら、より具体的に固めていきます。社内的にはこの工程を本設計と呼んでいます。

ちなみに、僕たちがつくるときは、AdobeXDやfigmaでつくることが多いですが、お客さまの方でご用意くださる場合は、エクセルでもパワーポイントでもなんでもかまいません。

実例のご紹介

ここで先程例挙げたワイヤーフレームと、それをもとにつくったデザインを見比べてみましょう。

実際にデザインするとどうなるのか、イメージが湧くかと思います。

»Webサイト制作実績：石川忠比古公認会計士事務所さま

おわりに

制作会社や案件によってはワイヤーフレームをクライアントにはお見せしない場合もあるかもしれませんが、制作過程では必ずと言っていいほどつくっていると思います。

ワイヤーフレームは最終的な成果物になるものではないので、お客さまにとっては重要視されにくいものかもしれません。

ただ、ここに書かせていただいたとおり成果物を左右するものなのです。

サイトの全体像がきちんと整理されていないと、一見センスの良いデザインであったとしても、ツギハギだらけでわかりにくい、使いにくいサイトになってしまいます。

言ってみればそれは設計図なしで家を立てるようなものかもしれません。

特にうちは設計をとても大切にしています。

ワイヤーフレームとは何か、またその大切さを、なんとなくでもご理解いただけたのなら嬉しいです。