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

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

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

ワイヤーフレームとは

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

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

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

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

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

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

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

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

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

サイトのわかりやすさ・操作性を左右する

いわゆる情報設計、ヒアリングした内容やご要望、資料等をふまえ、それら情報を何らかの分類でまとめたり、どのように構成したらわかりやすいか、設計するのです。

そしてそれを見える化する。

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

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

認識の共有

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

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

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

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

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

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

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

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

実例のご紹介

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

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

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

おわりに

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

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

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

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

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