Webサイト制作におけるワイヤーフレームの基礎知識｜作成手順やおすすめツールを紹介
Mari
2024.08.20
Updated:2024.12.24
ワイヤーフレームは、Webサイト制作の初期段階でページの全体像を可視化し、関係者間の認識を統一するために不可欠なツールです。
今回は、ワイヤーフレームの基礎知識や作成手順を初心者にもわかりやすく解説します。定番のレイアウトパターンと制作事例も紹介しますので、ぜひ最後までご覧ください。
ワイヤーフレームとは
ワイヤーフレームとは、Webサイト制作の初期段階で作成される設計図のことです。
ページのレイアウトやコンテンツの配置が、ワイヤー（針金）のフレーム（枠組み）のようにシンプルな線と図形を用いて表現されるため、ワイヤーフレームと呼ばれています。
通常、ワイヤーフレームに細かなデザイン要素は含まれず、グレースケールやモノクロで作成されます。これにより、ページのレイアウトやコンテンツの配置、主要な機能、ユーザーの導線などの全体像を視覚的に表現し、デザインの方向性を決定できます。
また、後の制作工程で大きな変更や修正が発生しないようにするツールとしても役立ちます。
ワイヤーフレームの目的と必要性
ワイヤーフレームを作成する目的は、ページの全体像を視覚的に表現するためだけではありません。
ワイヤーフレームをプロジェクトメンバーに共有することで、議論やアイデア出しのたたき台としても活用できます。例えば「このページにはどのコンテンツを配置すべきか」「どちらの導線がユーザーにとって使い勝手がよいか」といった議論が活性化し、よりよいページの設計に繋がります。
また、社内外のメンバー間で認識のズレを防ぐためにもワイヤーフレームが必要です。デザイナー、エンジニア、マーケター、そしてクライアントなど、関係者全員が同じワイヤーフレームを見ながら議論すれば、プロジェクトの方向性をすり合わせできます。これにより、関係者間のトラブルを未然に防ぎ、プロジェクトを効率的に進めることが可能です。
ワイヤーフレームとデザインカンプの違い
デザインカンプとは、ワイヤーフレームの後の工程で作成されるWebサイトの完成見本のことです。ワイヤーフレームがページの全体像を表現するのに対し、デザインカンプは細かなデザイン要素を含めたビジュアルを表現します。
デザインカンプには、Webサイトで実際に使用するカラー・フォント・画像・ボタンのスタイルなど、あらゆる要素が含まれます。
そのため、社内外のメンバーにWebサイトの完成イメージを共有することが可能です。また、デザインを実装する際にデザイナーの意図をエンジニアに伝える役割もあります。
ワイヤーフレームの作成手順
ワイヤーフレームを作成する手順は、次の通りです。
サイトマップを作る
掲載する情報の整理
レイアウトを決める
レイアウトの構成に沿って制作
サイトマップを作る
まず、サイトマップを作成します。サイトマップとは、サイト全体の構成図のことです。ワイヤーフレームがページの全体像を表現するのに対し、サイトマップはサイトの階層構造をツリー図で表現します。
例えばコーポレートサイトでは、トップページを最上位の階層、企業情報・事業内容・お知らせ・お問い合わせなどの主要ページをその次の階層、それぞれの詳細ページをさらに次の階層へと分類します。
複数ページで構成されるサイトの場合、サイトマップの作成によってサイトの全体像を把握し、必要なページやコンテンツの抜け漏れを防ぐことができます。また、ページごとの関係性を可視化し、ユーザーにとってわかりやすい導線を設計することも可能です。
＞サイトマップについて詳しい記事はこちら
【初心者向け】サイトマップとは｜種類や必要性、簡単な作り方を解説
掲載する情報の整理
サイトマップの作成後、各ページに掲載する情報を整理します。
まず、ページごとに必要な情報を洗い出します。例えばコーポレートサイトのトップページでは、ヘッダー・メインビジュアル・事業内容・お知らせ・お問い合わせ・採用情報・フッターなどのコンテンツが必要となります。
次に、洗い出した情報の優先順位を決定します。ここでは、ユーザーにとって重要な情報や、サイトの目的達成に必要な情報に高い優先順位をつけるのがポイントです。
そして、優先順位の高い情報をページの上部に大きく配置し、それ以外の情報は下部に小さく配置するなど、各コンテンツの配置や大きさを検討しましょう。
レイアウトを決める
情報を整理できたら、各ページのレイアウトを決定します。ここで重要なのは、PC版とスマホ版のレイアウトを別々に作成することです。
PCは画面サイズが大きく、マウスやキーボードでの操作が中心となるため、一度に多くの情報を表示するレイアウトに対応可能です。
一方、スマホは画面サイズが小さく、タッチ操作が中心となるため、シンプルでタップしやすいレイアウトが求められます。各デバイスのユーザー体験を最適化できるよう心がけましょう。
レイアウトの詳細については、「定番のレイアウトパターンと制作事例」で解説します。
レイアウトの構成に沿って制作
レイアウトが決定したら、実際にワイヤーフレームを作成します。
一般的には「Figma」や「Adobe XD」などのデザインツールが用いられますが、近年では、ノーコードでWebサイト制作ができる「Studio」をワイヤーフレームの段階から使用する事例も増えています。
▲「Studio Experts」加盟事業者へのアンケート結果より抜粋
ワイヤーフレームの作成からデザインの実装、Webサイトの公開までを「Studio」で完結させることで、作業効率が大幅に向上します。
なお、「Studio」から提供されているワイヤーフレームを使用して、プロジェクトを開始することも可能です。
定番のレイアウトパターンと制作事例
PC版のレイアウトには、いくつか定番のパターンがあります。
シングルカラムレイアウト
マルチカラムレイアウト
グリッドレイアウト
フルスクリーンレイアウト
それぞれのレイアウトの特徴と、Studioのデザインテンプレートを売買できるマーケットプレイス『Studio Store』からサイト事例を紹介します。
シングルカラムレイアウト
シングルカラムレイアウトは、ヘッダーからフッターまでのすべてのコンテンツを縦1列に配置したレイアウトです。「1カラムレイアウト」とも呼ばれています。
シングルカラムレイアウトの特徴は、スマホやタブレットなどの小さな画面でも、PC版とほぼ同じ見た目を維持できることです。モバイル端末からWebサイトを閲覧するユーザーの増加に伴い、シングルカラムレイアウトの需要も高まっています。
「Small Company 2」は、シングルカラムレイアウトで作成されたシンプルなテンプレートです。制作は「Studio Experts」の株式会社メアリーアンドディーンが担当。
「ご挨拶」「私たちの仕事」「お知らせ」「会社情報」「お問い合わせ」などのコンテンツが縦1列に配置され、すっきりとした印象を与えています。小規模な会社や個人のWebサイトを制作したい方におすすめです。
マルチカラムレイアウト
マルチカラムレイアウトとは、コンテンツを複数の列に配置したレイアウトです。一般的に、2列で配置した「2カラムレイアウト」や、3列で配置した「3カラムレイアウト」が多く用いられます。
マルチカラムレイアウトの特徴は、1つの画面に多くの情報を配置できることです。例えば、サイドバーを使って補足情報や関連リンクを表示したり、メインコンテンツとその他のコンテンツを並列に表示できます。
ただし、画面サイズの小さいデバイスでは複数の列を表示するのが難しくなるため、レスポンシブ対応の際に工夫が必要です。
「The・シンプル・カンパニー」は、コーポレートサイト向けのテンプレートです。制作は「Studio Experts」の株式会社SHINK（SHINK Inc.）が担当。ファーストビューをシングルカラムレイアウトで構成しながらも、コンテンツに応じてマルチカラムに切り替えるレイアウトになっています。
どのデバイスから閲覧しても必要な情報にすばやくアクセスできるよう美しくデザインされています。汎用性の高いコンテンツで構成されているため、並び順も簡単にカスタマイズできます。
グリッドレイアウト
グリッドレイアウトとは、画面を縦と横の線で区切り、格子状（グリッド）に要素を配置するレイアウトです。「グリッドデザイン」や「グリッドシステム」とも呼ばれています。
グリッドレイアウトの特徴は、グリッドを自由に組み合わせて様々なサイズの要素を配置できることです。これにより、すっきりとした見た目でありながら、重要な情報が一目でわかるデザインを作成できます。
また、グリッドレイアウトはレスポンシブデザインとの相性が良く、画面サイズに合わせて柔軟に調整できるというメリットもあります。
「デザイナー向けポートフォリオ」は、グリッドレイアウトで作成されたポートフォリオサイト向けのテンプレートです。
額縁をイメージしたデザインで、作品にスポットライトを当てるようなホバーアニメーションが実装されています。グリッドレイアウトによるリズム感のあるデザインが特徴です。
フルスクリーンレイアウト
フルスクリーンレイアウトとは、Webサイトのコンテンツを画面全体に広げて表示するレイアウトです。インパクトのあるビジュアルで、強い印象を与えられます。
フルスクリーンレイアウトは情報量が制限されるため、細かな情報を伝える場合は別ページへ誘導するなどの工夫が必要です。
「SHOP・専門店ブランドサイト」は、フルスクリーンレイアウトで作成されたショップ・専門店向けのテンプレートです。制作は「Studio Experts」のPREO Inc.が担当。
高級感のあるデザインで、クラシカルなショップの雰囲気を表現しています。また、画面いっぱいに写真を表示することで、商品の魅力が伝わる仕様となっています。
ワイヤーフレームの参考になる事例サイト
「Studio Experts」の制作実績一覧ページでは、Studioの独自審査やカリキュラムを通過した制作会社・フリーランスによるWebサイトの事例をご覧いただけます。
＞「Studio Experts」がStudioを用いて制作したWebサイト一覧
また「Studio Showcase」では、Studioを使用して作成された世界中のWebサイトを、ジャンルやテイスト別に幅広く紹介しています。ワイヤーフレームのアイディアの参考に、ぜひご覧ください。
＞ Studio Showcase｜Studioで作成されたWebサイト事例集
Webサイト制作をプロにお願いするなら「Studio Experts」
この記事では、Webサイト制作におけるワイヤーフレームの基礎知識を解説しました。ノーコードWeb制作プラットフォーム「Studio」なら、効率の良いWebサイト制作が可能です。
さらにStudioでは、独自審査やカリキュラムを通過したプロフェッショナルのみを紹介する「Studio Experts」というプログラムを実施しています。業種や納期・予算に合わせて最適なパートナーを見つけることで、より効果的なホームページを制作できます。
どの制作会社に依頼すればいいのか分からない場合は、Studioコンサルタントにご相談ください。
