ワイヤーフレームとはWEBページの設計図のことです。

ワイヤーフレームをもとにWEBページのデザイン・システム開発が進められていくため、WEB制作ではとても重要な資料です。

しかし、重要だからこそワイヤーフレームにはさまざまな情報があり、何を信じて良いか迷うものです。

・ワイヤーフレームを作りたいけど、何から始めて良いかわからない
・どうすれば、本当にクライアントに伝わるワイヤーフレームが作れるか知りたい
・ワイヤーフレームの実例が欲しい

など悩みの方向性もさまざまだと思います。

ここでは、2023年最新のワイヤーフレームの作り方を実例付きでご紹介します。

ぜひ、自社のWEB制作の参考にしてみてください。

• 【WEB制作者厳選】目的別のおすすめワイヤーフレーム作成ツール10選
• 【プロが教える】WEB制作の流れとは？公開までの5ステップを徹底解説！

ワイヤーフレームを作る目的

ワイヤーフレームの目的はレイアウト・仕様を決めること

ワイヤーフレームを作る目的はWEBページのレイアウト・仕様を決めることです。WEBページの設計図という前提に立つと、この目的はイメージしやすいと思います。

では、レイアウト・仕様が決まっている状態とは何を指しているのでしょうか？

以下の3つの要素が含まれたワイヤーフレームであれば、レイアウト・仕様が決まっていると言えるでしょう。

ワイヤーフレームを作らないとどうなる？

ワイヤーフレームを作る目的はわかりましたが、そもそもワイヤーフレームを作らないとどうなるでしょうか？

結論としては、無駄なやり直し作業が大量に発生します。

また、ワイヤーフレームを作っていて同様の指摘があった場合でも、
「ここはワイヤーフレームで〇〇と決めていました。」
というように返答することができ、実装の取捨選択や追加費用の相談がしやすいです。

このようなことにならないよう、ワイヤーフレームでレイアウト・仕様を決め、クライアントと合意した上でWEB制作を進めることをおすすめします。

ワイヤーフレームの作り方：手順

ここからは、実際にワイヤーフレームを作るための手順を具体的に説明していきます。

ワイヤーフレームは以下の3段階で作っていきます。

・ワイヤーフレームを作るページを決める
・レイアウトの種類を決める
・ワイヤーフレームを書く

ちなみに、作業効率を考えると、ワイヤーフレームは作成ツールを使って作るのがおすすめです。

おすすめのワイヤーフレーム作成ツールは『【WEB制作者厳選】目的別のおすすめワイヤーフレーム作成ツール10選』で紹介しているので、もしツールが決まっていない方は参考にしてください。

【WEB制作者厳選】目的別のおすすめワイヤーフレーム作成ツール10選

WEB制作において、ワイヤーフレームの質は成果物の品質に大きく影響する重要なものです。それだけに、ワイヤーフレームツールの選択は非常に重要ですが、ツールが…

2023年01月17日

ワイヤーフレームを作るページを決める

全ページのワイヤーフレームを作るのが理想ですが、作業量から考えていくつかページをピックアップしてワイヤーフレームを作るのが現実的です。

例えば、コーポレートサイトではトップページから流入するユーザーが比較的多く、トップページのワイヤーフレームは必須でしょう。
サイト制作の目的が「サービスの認知拡大、問い合わせの増加」だとすると、サービス紹介ページと問い合わせページのレイアウトも重要であるため、ワイヤーフレームを作る必要があります。
逆に各サービス（サービスA、サービスB、サービスC … ）を紹介するページは、1ページのみワイヤーフレームを作り、他のページは同じレイアウトにするという風に省略していきましょう。

また、この時点でワイヤーフレームを作る必要がないページがあるかについても確認しておきましょう。

WEB制作では、既存のコンテンツを使いまわしたり、デザインせずプラグインのデフォルトレイアウトを使ったり、さまざまな理由でワイヤーフレームを作る必要がないページが出てきます。

それを作ってしまうと余計に時間がかかってしまうので、確認を怠らないよう注意してください。

レイアウトの種類を決める

次にレイアウトの種類を決めます。

・1カラムレイアウト
・マルチカラムレイアウト
・グリッド型レイアウト
・フルスクリーン型レイアウト

デザインやシステム開発の難易度を考えると、「1カラムレイアウト」「2カラムレイアウト」がおすすめです。

もしも参考にしたいデザインがあれば、そのデザインのレイアウトに合わせるのも良いでしょう。

1カラムレイアウト

カラムとは列のことを指し、1カラムは1列にコンテンツを並べるレイアウトです。

例えば、弊社のホームページも1カラムレイアウトです。

横幅を大きく使って見せるため、コンテンツを強調したい場合に良く使われるレイアウトです。広告用ランディングページやブランドサイトなどにもよく使われます。

ちなみに、レスポンシブ対応とは、デバイス（PCやタブレット、スマホ）による表示の違いに対応することです。それぞれのデバイスで横幅が違うので環境に合わせた見せ方をする必要がありますが、その対応が1カラムレイアウトではあまり必要ありません。

マルチカラムレイアウト

複数列でコンテンツを並べるレイアウトで、2カラムレイアウト（左図）と3カラムレイアウト（右図）があります。

2カラムレイアウトは、メディアやブログに使用される機会が多いです。コンテンツでブログ記事を見せておいて、サイドメニューでカテゴリーや人気記事を見せるというように、役割分担がしやすくユーザーが使いやすいからです。

3カラムレイアウトは、デザインとフロントエンド開発の難易度が上がることや、一般サイトでの使用メリットがあまりないことから、使用される例は少ないです。

グリッド型レイアウト

複数のコンテンツをカード状に並べたレイアウトです。

多くの情報を画面内に表示できるため、視覚的な楽しさとオシャレさを演出できます。

デザイン力に自信があったり、競合とは違う見た目のWEBページを作りたい場合は、検討してみると良いと思います。

一見するとフロントエンド開発の難易度が高そうに見えますが、Bootstrap（WEBフレームワークの一種）を使うと比較的簡単に作成可能です。

フルスクリーン型レイアウト

コンテンツをページ全体に配置しているレイアウトで、写真や動画を最大限に強調したコンテンツを作成できます。

ハマると非常にオシャレですが、実際はほとんど見ることがないレイアウトですね。

例として取り上げた古宇利島のように、ひと目で魅力を伝えられる写真や動画がある場合は、検討してみると良いと思います。

ワイヤーフレームを書く

作るページを決め、レイアウトの種類を決めたら、いよいよワイヤーフレームを書いていきましょう。

WEBページは大きく以下の4つのパーツに分かれます。

・ヘッダー・グローバルナビゲーション
・メインビュー
・コンテンツ
・フッター

ここでは、弊社が自社ページで実際に作ったワイヤーフレームをもとに、それぞれのパーツごとにポイントを紹介していきます。

例として使用しているのは、弊社がAdobe XDで作成したTikTok採用コンサルティング事業LP（ランディングページ）のワイヤーフレームです。
（開発中に適宜修正しているため、実際のページとワイヤーフレームが少し異なっています。）

ヘッダー・グローバルナビゲーション

サイトの1番上に表示されるロゴやメニューの部分です。

1番上部の領域はヘッダーと呼ばれ、メニューの部分は原則すべてのページで表示するためグローバルナビゲーションと呼ばれます。

ページ内リンクで遷移させる単純な静的ページのため省略していますが、動的ページの場合は「何個までメニューを表示できるか」「問い合わせはどこにリンクするか」「スクロールに追尾させるか」という仕様も書きます。

ちなみに、左右に出ている青線は、空白の大きさを揃えるためのものです。デザイナーがレイアウトを調整するときに参考になるので、入れておくと良いでしょう。

メインビュー

ユーザーが流入してきた時に、一番目に入る部分です。

ヘッダー・グローバルナビゲーションと合わせて、FV（ファーストビュー）と呼ばれることもあります。

メインビューは重要な訴求点なので、文言や参考レイアウトなど細かく確認しておきましょう。

ちなみに、動的ページの場合、メインビューにはよくカルーセルパネルが使われます。カルーセルパネルを使う時は、最大表示数、管理画面からの変更可否などは書いておきましょう。

コンテンツ

メインビューを序文だとすると、コンテンツは本文というイメージ。

訴求内容を紹介していく、WEBページで最も重要な部分に当たります。

ここでは、制作目的に立ち返り、目的を達成できるコンテンツ配置を考えることが大切です。

このLPは問い合わせをいただくことが目的なので、コンテンツの冒頭部分は「共感 → 提案 → 問い合わせリンク」という納得して問い合わせやすい流れにしています。

コンテンツを読み進めていく人はサービスへの関心が高いので、次に具体的な運用イメージやサービス紹介を入れています。

最後によくある質問で不足内容を補い、会社概要を入れています。

このように、目的達成から逆算してコンテンツを配置していくには、ある程度の経験やノウハウが必要になるでしょう。

経験が浅いうちは、普段からWEBページを見るときに、コンテンツ配置の意図を考えるクセをつけると良いと思います。検索上位に出てくるようなサイトは、各コンテンツに工夫が凝らされていることが多いです。その背景にある意図を自分の仮説で良いので考えていくと、目的達成につながるコンテンツ配置ができるようになるでしょう。

フッター

サイトの1番下に表示されるメニューやコピーライトの部分です。

今回の例のようなLPではあまり要素を置かないことが多いですが、サイトの全体像がわかるメニューを置くと良いでしょう。メディアやブログの場合は、人気記事のリンクを配置するのもおすすめです。

なお、要素をたくさん置くとフッターが大きくなりすぎる印象があると思います。特にスマホ表示で縦長になってしまうので気になるかもしれませんが、制作目的に合致した要素であれば問題ありません。

ワイヤーフレームの作り方：注意点

次に、ワイヤーフレームを作る上での注意点を説明していきます。

・レイアウト・仕様を明らかにする
・ワイヤーフレームでデザインをしない
・スマホ向けは別で作る

ワイヤーフレームの作成経験が浅い方や初めての方は参考にしてください。

レイアウト・仕様を明らかにする

ワイヤーフレームではレイアウト・仕様を明らかにすることを意識しましょう。

先にも述べている通り、以下の3つの要素が含まれていると理想です。

自分のワイヤーフレームを見て、不足している部分があれば追記するようにしましょう。

ワイヤーフレームでデザインをしない

作成経験が浅いときにやりがちなのが、ワイヤーフレームを実際のホームページに近づけようとしてデザインを盛り込むことです。

ワイヤーフレームはあくまでWEBページの設計図であって、デザインではありません。

デザインを盛り込むと余計な時間がかかりますし、何よりデザイナーがそこに引っ張られてしまいます。まずは基本に忠実に線と文字だけで表現するようにしましょう。（慣れてくると、創造性の低いデザイナーにあえて多少デザインをしたワイヤーフレームを渡すこともあります。）

なお、例示したワイヤーフレームでは色分けをしていませんが、システム化する部分は色をつけるなど、クライアントやデザイナーが見てわかるよう必要に応じて色分けするようにしましょう。

スマホ向けは別で作る

PC表示に比べてスマホ表示は画面の横幅が小さくなるため、大抵の場合はレイアウトを変更する必要があります。

したがって、スマホ向けは別でワイヤーフレームを作ることが理想的です。

スマホ表示では横幅の都合でコンテンツを左右に配置することが難しいです。基本的には縦に配置するか、横スクロールで配置すると良いでしょう。

ワイヤーフレームの作り方：補足

さいごにワイヤーフレームの作り方を考える上で役立つ情報を補足で紹介していきます。

・ワイヤーフレームの制作事例を閲覧できるサイト
・ワイヤーフレームは誰が作成するのか？
・ワイヤーフレームで手書きのラフ案を書く必要はあるか？
・ワイヤーフレーム作成ツールを使う必要はあるのか？

ワイヤーフレーム作りに参考になる情報があれば、ぜひ取り入れてみてください。

ワイヤーフレームの制作事例を閲覧できるサイト

ワイヤーフレームは作成者や会社の方針によって書き方が異なります。

これは、ワイヤーフレームを初めて作るとき誰しも悩んだことがあると思います。世の中に正解がないことだからこそ悩み、だからこそ他の制作事例も気になってしまうものでしょう。

他の制作事例について本記事では語り尽くすことができないため、ここではワイヤーフレームの制作事例が見られるサイトを紹介します。

Pinterest

Pinterestは、他のユーザーが投稿した画像や動画を検索したり、簡単に保存したりできるツールです。

手書きのものから、作成ツールで作ったものまで、多くのワイヤーフレームも投稿されています。

サイト内で「wireframe」と検索すると、画像のように多くの事例を閲覧することが可能です。

flickr

flickrは米Yahooが運営するオンラインの写真共有サービスです。

こちらでも、サイト内で「wireframe」と検索すると、画像のように多くの事例を閲覧することが可能です。

Pinterestの方が情報量や精度で優れているように思いますが、こちらでもワイヤーフレームの事例を調べることが可能です。

Tumblr

Tumblrはアメリカのブログ型SNSです。

ガイドライン変更によってSNSとしてはオワコン感が漂っていますが、ワイヤーフレームの検索という意味ではまだ使えると思います。

こちらは、サイト内で「wireframes」と検索すると、画像のようにある程度の事例を閲覧することが可能です。

ワイヤーフレームは誰が作成するのか？

ここまで説明してきたワイヤフレームですが、作成は誰が行うのでしょうか？

結論としては、WEBディレクターが担当する場合が多いです。

WEBディレクターに関する詳細な説明はここでは割愛しますが、WEB制作のプロジェクト管理や進行を行う役割のことです。ワイヤーフレームはクライアントからのヒアリング内容をもとに作成するので、WEBディレクターがクライアントとやりとりしてそのまま作成したりします。

ちなみに、ワイヤーフレームの作成には、特にデザイン経験がなくても問題ありません。前述の通り、ワイヤーフレームはあくまでWEBページの設計図であって、デザインではないからです。「自分は非デザイナーだから」という苦手意識を持たず、積極的に書いていくと良いでしょう。

ワイヤーフレームで手書きのラフ案を書く必要はあるか？

ネットで『ワイヤーフレーム 作り方』と調べてみると、手書きでラフ案を書いてからワイヤーフレーム作成ツールで清書することを勧めている記事もあります。当メディアとしては手書きのラフ案は必要はなく、ワイヤーフレーム作成ツールで作り始めて問題ないと考えています。

理由は、精度の高い調査・分析を行い、クライアントの意向を正しくヒアリングしていれば、ワイヤーフレームの形は自ずと決まるからです。

WEB制作では、最初のステップである企画段階で、必ず調査・分析を行います。従って、ワイヤーフレームを作成する前に、『業界の動向やトレンド』『競合他社の施策』『ユーザーの年齢や職業』などさまざまな情報が調べられているはずです。この調査・分析の結果をもとに、クライアントの意向をヒアリングすれば、その時点でワイヤーフレームの大体の形は決まります。

ワイヤーフレームの大体の形が決まっていれば、致命的な修正は発生しません。小さな修正点は作成中に必ず出てくるのでそのときに修正してしまいましょう。

この状態でも手書きのラフ案が必要な方は作れば良いと思いますが、そうでなければワイヤーフレーム作成以前の工程が中途半端になっている可能性を疑いましょう。

ワイヤーフレーム作成ツールを使う必要はあるのか？

作業効率を考えると、FigmaやAdobe XDなどのワイヤーフレーム作成ツールを使って作る方が良いです。

ただ、どの作成ツールにも共通して言えることですが、無料版だと機能が限定的だったり、そもそも無料版がなかったりするので、有料版を使うことに抵抗がある場合は、迷いも出てくると思います。

もしも、ワイヤーフレーム作成ツールを使わずに作るのであれば、Googleスプレッドシートがおすすめです。

Googleスプレッドシートは表計算ソフトですが、罫線をうまく使うことでワイヤーフレームを作成することができます。ただし、ワイヤーフレーム作成ツールとは違い、行や列でコンテンツを作っていくので、作業にコツが必要です。慣れるまでは使いにくく感じると思いますが、慣れてくると作業効率はそこまで悪くないです。実際にGoogleスプレッドシートでワイヤーフレームを作成しているWEB制作会社もあります。

普段Windowsのパソコンを使っていてOffice製品をインストールしている方は、ExcelやPowerPointを試しても良いでしょう。

おすすめのワイヤーフレーム作成ツールは「【WEB制作者厳選】目的別のおすすめワイヤーフレーム作成ツール10選」で紹介しているので、もしツールを検討する方は参考にしてください。

【WEB制作者厳選】目的別のおすすめワイヤーフレーム作成ツール10選

WEB制作において、ワイヤーフレームの質は成果物の品質に大きく影響する重要なものです。それだけに、ワイヤーフレームツールの選択は非常に重要ですが、ツールが…

2023年01月17日

まとめ

ワイヤーフレームの作り方を実例付きでご紹介してきましたが、いかがだったでしょうか？

ワイヤーフレームの作り方に正解はないので、どうやって進めていけば良いか悩むこともあるかと思います。この記事によってそんな悩みが少しでも払拭できれば幸いです。

ホームページ制作の流れを詳細に知りたい方は『【プロが教える】WEB制作の流れとは？公開までの5ステップを徹底解説！』を参考にしてください。

【プロが教える】WEB制作の流れとは？公開までの5ステップを徹底解説！

WEBサイトの目的達成のためには、正しい流れを押さえて制作することが必要です。この記事では、WEB制作の流れを5つのステップに分けて徹底解説していきます。…

2023年01月23日