制作ガイド
ホームページ制作依頼前の準備チェックリスト1・・・
2021.02.04
TRASPコラム
制作ガイド
更新日:2023.04.23
公開日:2023.03.16
自社のWebサイトの制作やリニューアルをするときに、レイアウトや仕様の要望がデザイナーに伝わるか不安になったことはありませんか。せっかくWebサイトを作ったのに「イメージしていたレイアウトと違う」という事態は避けたいものですよね。
そういったトラブルを防ぐために、Webサイトをつくるときにはぺージの設計図「ワイヤーフレーム」を使います。ワイヤーフレームについて作り方から把握しておくと、Web制作会社や社内の関係者との打ち合わせもスムーズにでき、知っておいて損はありません。
集客につながるWeb制作を得意とするTRASPが、初心者でも理解できるよう、ワイヤーフレームの作り方を細かく説明します。ワイヤーフレーム作成に使えるツールも紹介しますので、自作してみるのも良いでしょう。
目次
ワイヤーフレームとは「画面設計」ともいい、Webぺージの設計図のこと。以下の画像のように、Webぺージ上でどこに写真やテキストを配置するか図で示したものです。
引用:Innovaブログ「Webサイト制作に欠かせない「ワイヤーフレーム」の基礎知識を徹底解説」
ワイヤー(線、骨)、フレーム(枠組み)というように、線や枠などを用いてWebぺージに盛り込む要素を視覚的に表します。
ワイヤーフレームは、Webぺージを制作するときにWeb制作会社のPM(プロジェクトマネージャー)または、Webディレクターが作成します。
ワイヤーフレームは、依頼者と制作側の認識をすり合わせをし、依頼者の要望どおりにWebサイトを制作するために使用します。以下のような場面でワイヤーフレームがあると、完成したWebぺージをイメージしやすくなるので、打ち合わせが円滑に進むでしょう。
例えば、ワイヤーフレームがあると、
「このレイアウトの位置を逆にしたい」
「こぺージには他のコンテンツを入れたい」
……といった要望を伝えやすくなります。
ワイヤーフレームを用いず、デザイナーが感覚的にWebぺージを制作するケースもあります。しかし、制作し終わったあとに配置などを変更する場合、制作側に負担がかかるうえ、時間のロスも生じてしまうでしょう。
効率よく作業をすすめるためにも、Webページ制作の前に、ワイヤーフレームを用いて制作側がどのようなWebぺージを作ろうとしているのか確認することが重要です。
ワイヤーフレームを作る前に、次から紹介する4つの準備を行いましょう。
まず、Webサイト全体の設計図であるサイトマップを作成しましょう。
サイトマップとは、次の図のようにWebサイト全体の構造をリスト形式で記述したものです。
引用:Web幹事「ワイヤーフレームの作り方完全ガイド【サンプル付き】」
Webサイト全体を俯瞰して見れるので、全体像を把握しやすくなります。どのようなサイトを作成するのか把握したうえで、各ページの構成を決定しましょう。
先に作成したサイトマップをもとに、ワイヤーフレームを作るぺージをピックアップします。
すべてのぺージのワイヤーフレームを作成するのが理想ですが、ページ量が膨大な場合は、作業量が膨大になり、現実的ではありません。複数のぺージで同じレイアウトを使用する場合は、1つだけ作るなどして、必要なぺージだけワイヤーフレームを作成しましょう。
一般的に、次の4つのページで作成するのがおすすめ。
ほとんどの場合、最初にユーザーが目にするページです。トップぺージのデザインによって、Webサイトを回遊してもらえるかどうかが決まりますので、トップぺージのワイヤーフレームを作成しましょう。
重要ぺージ
重要なぺージとは、Webサイトの目的を達成する役割を持つぺージのこと。
問い合わせや資料請求、購入などに直結するページは、Webサイトのなかでも重要ページだといえるでしょう。
では、次のサイトマップを例に、ワイヤーフレームを作成するぺージをピックアップしてみましょう。
引用:Web幹事「ワイヤーフレームの作り方完全ガイド【サンプル付き】」
以下については、同じレイアウトで作成するとします。
そのため、作成するワイヤーフレームは第2階層「会社について」と第3階層「企業理念」の2つ。さらに、ゴールとして重要なエントリーページ、前述したトップページを含めると4つになります。
ワイヤーフレームは、情報をWebぺージ内のどこに配置するかを決定するものです。次の手順で、ページ内にどのような情報を盛り込むか整理すると効率よくワイヤーフレームを作れます。
ぺ―ジ内で扱う情報を洗い出します。「商品紹介ぺージ」を作ると仮定して、情報を挙げてみましょう。
(例)商品紹介ぺージ
リストアップした情報から、どの情報を優先して掲載するか決定します。
Webぺージにどの順番で掲載するかを決定する作業です。
ユーザーがWebサイトを閲覧するときには、上から下に見ていくため、優先順位が高いものを上に配置することがポイント。
先ほど洗い出した商品紹介ぺージの情報を優先順位が高いものから順に配置してみましょう。
(例)商品紹介ぺージ(優先順位が高い情報を上に配置)
ページに掲載する各情報の量を決定します。
以下のように、挿入する画像の枚数や文字数を決めておくと、1ぺージの情報量が把握しやすくなります。
(例)商品紹介ぺージ
整理した情報をWebぺージにどのように配置するかを決定しましょう。次からは、代表的なレイアウトを4つ紹介します。
引用:Abentry LAB「ワイヤーフレームの作り方完全ガイド【2023年最新・実例付き】」
「カラム」とは列のことを指し、1カラムレイアウトとは1列にコンテンツを並べたものです。
上から下へ見ていくので、導線を作りやすいでしょう。また、ぺージの横幅全体を使って表示させるので、以下のようなときにおすすめです。
近年、ほとんどの人がスマートフォンでWebサイトを閲覧するようになり、1カラムレイアウトが主流になりつつあります。1カラムレイアウトは、PCで見てもスマートフォンで見ても、レイアウトが崩れないようにするレスポンシブ対応がしやすいためです。
参考サイト
1カラムレイアウトのWebサイトの例として、当社TRASPのぺージを紹介します。
TRASPのトップぺージ上から下に読み進めることでTRASPが提供しているサービスや料金などが把握できるつくりになっています。
引用:Abentry LAB「ワイヤーフレームの作り方完全ガイド【2023年最新・実例付き】」
複数の列からなるレイアウトで、2列の2カラムレイアウトと3列の3カラムレイアウトがあります。
1カラムレイアウトに比べてコンテンツを強調するのが難しいという点がありますが、多くの情報を表示できます。情報量が多いページにはマルチカラムレイアウトを採用すると良いでしょう。列の1つをサイドメニューにし、索引を表示させる使い方もでき、ユーザーにとっては見やすいホームぺージになります。
引用:Abentry LAB「ワイヤーフレームの作り方完全ガイド【2023年最新・実例付き】」
複数の情報をタイルのように並べたものがグリッド型レイアウトです。
デザイン力が求められる、情報整理が難しいといったデメリットもありますが、デザイン性があり、視覚的に訴求できるWebサイトを作れるでしょう。
参考サイト
株式会社未来ガ驚喜研究所のコーポレートサイトは、グリッド型レイアウト。アパレル商品の買い取りや販売を行うだけあり、ユニークでおしゃれなWebサイトに仕上がっています。
引用:Abentry LAB「ワイヤーフレームの作り方完全ガイド【2023年最新・実例付き】」
コンテンツをぺージいっぱいに広げて配置するレイアウトです。
写真や動画の効果を最大限に引き出せ、1カラウムレイアウトよりもさらにコンテンツを強調できるでしょう。デザイン性の高いホームぺージになりますが、他のページに遷移するボタンなどが見つかりにくいというデメリットもあるため、採用しているWebサイトをあまり見かけません。
ホームぺージ制作では、事前に市場調査やユーザー分析を行うことが重要です。事前に調査や分析ができていれば、取り扱う情報に優先順位を付けられ、レイアウトも決めやすくなるので、ワイヤーフレームをスムーズに作れるでしょう。
TRASPでは、市場調査やユーザーを徹底的に分析し、ターゲット層を明確にしたうえでホームぺージを制作していています。そのため、ユーザーに見てもらえるレイアウトのWebサイトを提案が可能。もちろん、ワイヤーフレームをもとにレイアウトを確認していただいてから制作に移りますので、ご安心ください。
お問い合わせはこちら
準備ができたら、実際にワイヤーフレームを作ってみましょう。ここでは、トップぺージを例にして作り方を解説します。
ワイヤーフレームの作り方は、Webぺージのパーツそれぞれにどのような情報を配置するのかを書いていきます。
Webぺージには以下の4つのパーツがあります。
各パーツに配置する情報を一つずつ見ていきましょう。
引用:Innovaブログ「Webサイト制作に欠かせない「ワイヤーフレーム」の基礎知識を徹底解説」を加工
ヘッダーとは、Webページの最上部に表示される部分で、Webサイトのすべてのページにおいて、同じ内容が表示されます。一方、グローバルナビゲーションとは、Webサイトにあるぺージに遷移できるリンクを表示するメニューのことで、ヘッダーに含まれます。
ヘッダーには、一般的に以下が配置されます。
上記をヘッダーのどの部分に配置するのかを書きましょう。ボタンなどは、遷移先も書き込むとわかりやすくなります。
メインビューは、ユーザーがWebサイトを訪れたときに最初に目にする部分です。ユーザーに訴求できる重要な部分なので、視覚的に印象付けることを念頭に入れてレイアウトを考えると良いでしょう。
一般的に、メインビューには以下の要素をどのように配置するかを書きます。
画像が横方向にスライドするカルーセルパネルを用いるときは、画像の表示数も記載しましょう。
トップページのコンテンツエリアは、サイト全体の目次的な役割を担っています。そのため、「集客を増やす」など目的を達成できるよう、コンテンツの配置を考えることが大切です。
すべてのコンテンツを見せようとするのではなく、以下を意識して配置すると良いでしょう。
フッターは、Webページのいちばん下にある部分です。ヘッダー同様、全ページに共通して表示されます。
フッターには、主に以下のものを配置しましょう。
問い合わせボタンなど、重要なぺージへのリンクボタンは大きく表示させたりするなどして、目立たせておくとぺージを最後まで読んだユーザーが次のアクションを起こしやすくなります。
最後に、ワイヤーフレームを作るのに便利なツールを4つ紹介します。
引用:初心者のための会社ホームページ作り方講座「ホームぺージ構成図の作り方を解説!サイトマップ・ワイヤーフレームなど」
資料作成などにも用いられるPowerPointは、多くのビジネスパーソンにとって馴染みがあるため、使いやすいのではないでしょうか。
PowerPointは、さまざまな形状の図形を自由に挿入でき、感覚的にワイヤーフレームを作成できます。共有するOSが異なるとレイアウトのズレが生じる場合があるので、Googleスライドを使うのも手です。
引用:初心者のための会社ホームページ作り方講座「ホームぺージ構成図の作り方を解説!サイトマップ・ワイヤーフレームなど」
ExcelもPowerPoint同様、ビジネスパーソンにとってはおなじみのツールです。
Excelは本来表計算ソフトですが、セルを結合したり、罫線をひいたりしてワイヤーフレームが作れます。PowerPointに比べて挿入できる図形が少ないので、線と文字だけでつくるシンプルなワイヤーフレーム作成に向いています。
異なるOSで閲覧するとPowerPointと同じく、レイアウトが崩れる可能性があるので、Googleスプレットシートを使うのも良いでしょう。
引用:Adobe Blog「全員攻撃型デザインのススメ 〜Adobe XDでつくるこれからのワイヤーフレーム入門〜【第2回】今すぐパワポとサヨナラできる?! Adobe XDの便利機能5つ」
Adobe XDはWebサイトやモバイルアプリのUI/UXデザインができるツールで、ワイヤーフレーム作成もできます。
Adobe XDは、PowerPointやExcelにはない以下のような機能を搭載しています。
デザインツールを使い慣れていないと、操作が難しいと感じるかもしれませんが、操作を覚えると、見やすいワイヤーフレームを比較的容易に作れます。
引用:ユニークワン「Figma(フィグマ)とは?初心者向けに使い方・できることを徹底解説!」
Figmaは、Webブラウザ上でWebデザインを作れるツールです。機能はAdobe XDと似ていますが、Figmaはプレビュー画面にリアルタイムで編集内容が反映されるので、共有がよりスムーズ。クライアントやチームと打ち合わせしながら、その場で修正するといった使い方も可能です。
Web制作会社などで使用されているプロ向け・上級者ツールですので、初心者の方は操作が難しいかもしれません。社内で作成し共有する分には他のツールを使った方が効率よくワイヤーフレームを作れるでしょう。
ワイヤーフレームの作り方を見ると、「どうしたらユーザーに訴求できるか」がポイントであることがわかるでしょう。なぜなら、ユーザーに有益な情報をピックアップし、見やすい配置を考えなければならないからです。ワイヤーフレームを作るときも、ワイヤーフレームをもとにWebサイト制作者と認識合わせをするときも、ユーザーの立場で見ると、最善策がわかるのではないでしょうか。
当社TRASPは、お客さまのご要望を加味してユーザーに訴求できるWebサイトデザインのご提案をしています。お客さまに寄り添ったホームぺージをお作りしますので、どのようなお悩みやご要望もお気軽にお聞かせください。
お問い合わせはこちら