ホームページを作りたいものの、どの情報をどの順番で並べればよいか分からず、外注に進めないケースがあります。
結論から言うと、完成した構成案がなくてもWebデザインは外注できます。事業内容、サイトの目的、掲載したい情報を伝えれば、ヒアリングをもとにワイヤーフレームを作成してもらえるサービスがあります。
ただし、構成案がないことと、事業情報を何も用意しなくてよいことは別です。デザイナーが構成を考えるためには、誰に何を伝え、最終的に何をしてほしいのかを共有する必要があります。
ホームページの構成案がなくても外注できる？
ワイヤーフレーム作成に対応するデザイナーであれば、構成案が完成していなくても依頼できます。
ワイヤーフレームとは、ホームページに掲載する情報と配置を整理した設計図です。色、写真、装飾を加える前に、見出し、文章、画像、ボタンなどをどこへ配置するか決めます。
たとえば、会社のホームページなら次のような順番を考えます。
- 会社やサービスの特徴
- 提供している商品・サービス
- 選ばれる理由
- 実績
- 会社概要
- 問い合わせ方法
構成案がない場合、デザイナーはヒアリング内容をもとに、必要な情報と順番を整理します。
発注者は、提出されたワイヤーフレームを確認し、掲載漏れや順番の問題を修正してから、カラーや写真を含む本デザインへ進みます。
ワイヤーフレームから依頼するメリット
完成後の大幅な作り直しを減らせる
先に構成を確認すれば、デザイン完成後に「料金表を追加したい」「問い合わせボタンが足りない」と判明するリスクを減らせます。
色や写真を入れた後に構成を変えると、複数の場所を作り直す必要があります。
ワイヤーフレームの段階なら、情報の追加や順番変更を比較的行いやすくなります。
発注者が伝え忘れた情報を整理できる
初めてホームページを作る場合、何を掲載すべきか分からないことがあります。
ヒアリングとワイヤーフレーム作成を通じて、次のような不足に気づけます。
- 問い合わせ先を掲載していない
- 営業時間や対応地域がない
- 料金の目安が分からない
- サービスを利用する流れがない
- 他社との違いが伝わらない
- スマホで押すボタンの位置が決まっていない
文章を用意する前に情報の枠組みが分かるため、原稿作成も進めやすくなります。
デザイナーと認識を合わせやすい
文章だけで「シンプルな会社サイト」と伝えても、完成イメージは人によって異なります。
ワイヤーフレームを見ながら、次の点を確認できます。
- 最初に見せる情報
- 各項目の順番
- 写真を使う場所
- 問い合わせボタンの位置
- ページを分ける箇所
- PCとスマホでの違い
見た目を作り込む前に認識を合わせることで、完成後の行き違いを防げます。
構成案がない状態と丸投げは違う
構成をデザイナーへ任せる場合も、事業情報は発注者が提供します。
次のような依頼では、構成を作るための材料が不足します。
- 「おしゃれな会社サイトを作ってほしい」
- 「競合より良い感じにしてほしい」
- 「文章も写真もないので全部任せたい」
- 「何を載せるか分からない」
- 「ターゲットは特に決めていない」
デザイナーは、発注者の事業内容を推測して決めることはできません。
最低限、次の内容を整理してください。
- どのような会社や店舗か
- 誰に利用してほしいか
- 何を提供しているか
- ホームページを作る目的
- 問い合わせ後の流れ
- 他社との違い
- 掲載できる実績
- 公開したくない情報
内容が完全に決まっていない場合は、未定の項目をそのまま伝えます。
依頼前に準備したい7つの情報
1．ホームページを作る目的
目的によって、ページ構成は変わります。
代表的な目的は次のとおりです。
- 会社の信頼性を伝える
- 問い合わせを獲得する
- 店舗への来店を促す
- 採用応募を集める
- 商品を販売する
- サービス内容を説明する
- 営業資料の代わりに使う
会社案内が目的なら、会社概要や実績を重視します。
問い合わせ獲得が目的なら、サービスの強み、利用の流れ、料金、問い合わせボタンを目立たせます。
2．想定する利用者
「一般の人」「企業担当者」だけでは、デザインの方向性を決めにくくなります。
次のように具体化します。
- 地元で工務店を探している30～50代の住宅所有者
- 採用サイトを検討している中小企業の人事担当者
- 開業したばかりで会計業務に困っている個人事業主
- 子ども向け教室を探している保護者
- 法人向けシステムを比較している管理部門担当者
ターゲットが決まれば、文字量、写真、配色、問い合わせ方法を選びやすくなります。
3．掲載したいサービス
提供サービスを一覧にします。
サービス名だけでなく、次の情報も用意します。
- サービス内容
- 対象者
- 料金
- 対応範囲
- 利用方法
- 納期
- 注意点
- 問い合わせ方法
複数のサービスがある場合は、すべてを同じ強さで掲載するのか、主力サービスを目立たせるのか決めます。
4．他社との違い
デザインだけで差別化するのではなく、事業の違いを伝えます。
具体例は次のとおりです。
- 土日も対応
- 地域内は出張費無料
- 業界経験10年以上
- 最短当日対応
- 女性スタッフが対応
- 小ロットから注文可能
- 専門資格を保有
- 見積もり無料
「丁寧」「高品質」「安心」だけでは、他社との違いが伝わりません。
5．掲載できる写真
使用できる写真を確認します。
- 店舗外観
- 店内
- 商品
- スタッフ
- 作業風景
- 施工事例
- オフィス
- 代表者
- 利用者
写真がない場合は、著作権フリー素材を用意してもらえるか相談します。
素材写真で代用できない商品や施工事例は、発注者側で撮影する必要があります。
6．参考にしたいホームページ
参考サイトは、好みを説明するために使用します。
URLだけでなく、参考にしたい箇所も伝えます。
- 配色
- 写真の大きさ
- 文字の雰囲気
- メニュー
- ファーストビュー
- サービス紹介
- 問い合わせボタン
- スマホ表示
複数のサイトを提示する場合は、どの要素を採用したいか分けて説明します。
7．納品後の実装方法
デザインだけを依頼する場合、納品後にコーディングが必要です。
次のどれに該当するか確認します。
- 社内のコーダーが実装する
- 別のフリーランスへ依頼する
- 制作会社へ渡す
- STUDIOで実装する
- WordPressへ組み込む
- 実装担当者がまだ決まっていない
実装担当者が決まっている場合は、希望する納品形式を確認します。
ワイヤーフレームと完成デザインの違い
| 比較項目 | ワイヤーフレーム | 完成デザイン |
|---|---|---|
| 主な目的 | 情報と配置を整理する | 色や写真を含む見た目を完成させる |
| 色 | 白、黒、グレーが中心 | ブランドに合わせて設定 |
| 写真 | 仮画像や枠で示す | 実際に使用する写真を配置 |
| 文字 | 仮文章の場合がある | 公開予定の文章を反映 |
| 確認する内容 | 情報の順番、掲載漏れ、導線 | 配色、余白、フォント、細部 |
| 修正しやすい部分 | 構成、順番、項目 | 色、写真、文字サイズ |
| 次の工程 | 本デザイン | コーディング |
構成を変更する場合は、ワイヤーフレームの段階で伝えます。
完成デザインへ進んだ後に項目を追加すると、ページ全体のバランスを再調整する必要があります。
2ページのホームページで作れる構成
全体2ページで制作する場合は、情報を集約する必要があります。
代表的な構成は次のとおりです。
トップページと問い合わせページ
トップページに事業内容、特徴、会社概要をまとめ、問い合わせページを分ける構成です。
向いているのは次のような事業です。
- 個人事業主
- 小規模店舗
- 単一サービス
- 開業直後の会社
- 名刺代わりのサイト
トップページとサービス詳細ページ
トップページで会社全体を紹介し、主力サービスだけ別ページにします。
問い合わせフォームは各ページの下部か、外部フォームを利用します。
トップページと会社概要ページ
事業紹介をトップページへまとめ、会社概要、代表メッセージ、沿革などを別ページにします。
法人取引が多く、会社情報を詳しく見せたい場合に適しています。
トップページと採用ページ
企業サイトとして最低限の情報をトップページへ掲載し、採用情報を独立させます。
採用ページには、仕事内容、募集要項、職場環境、応募方法を掲載します。
2ページでは足りないケース
次の条件に当てはまる場合は、ページ追加を検討します。
- サービスの種類が多い
- 施工事例を複数掲載する
- 採用情報が多い
- 店舗ごとに情報が異なる
- ブログやお知らせが必要
- 料金表が複雑
- 資料ダウンロードページが必要
- 複数地域で検索流入を狙う
- 商品ごとに詳しい説明が必要
無理に2ページへ詰め込むと、1ページが長くなりすぎます。
ページ数だけでなく、各ページの縦幅や情報量も見積もりに影響します。
このサービスでは、ヒアリング後にワイヤーフレームを作成し、その構成をもとにFigmaでWebデザインを制作します。
全体2ページ以内であれば25,000円が料金の目安で、トップページと下層ページ、PC版とスマホ版が対象です。3ページ目以降は、1ページにつき3,000円の追加料金が案内されています。
基本料金に含まれる内容
案内されている主な制作範囲は次のとおりです。
- トップページ
- 下層ページ
- 全体2ページ以内
- PC用デザイン
- スマホ用デザイン
- ワイヤーフレーム作成
- Figmaでの制作
- 修正対応
- 著作権フリー画像の用意
- 掲載文章のブラッシュアップ
基本サービスはデザイン制作のみです。
HTMLやCSSによるコーディング、WordPress実装、サーバーへの公開作業は含まれません。
追加料金が発生しやすい内容
掲載されているページ追加料金は、1ページにつき3,000円です。
ただし、次の内容は別途見積もりになる可能性があります。
- 3ページ以上の制作
- 縦幅が10,000pxを超えるページ
- 終盤での大幅なレイアウト変更
- ページ全体の作り直し
- 複雑な料金表
- 多数の実績掲載
- 特殊な機能を前提とした画面
- 複数パターンのデザイン案
- コーディングや公開作業
見積もり時には、ページ数だけでなく、各ページへ掲載する項目も伝えます。
修正回数無制限でも何度でも作り直せるわけではない
修正回数無制限は、一般的に完成へ近づけるための調整を複数回依頼できる条件です。
次のような修正が想定されます。
- 文字サイズの調整
- 色の変更
- 写真の差し替え
- 余白の調整
- ボタンの位置変更
- 文章の軽微な差し替え
- 見出しの表現変更
一方、取引終盤の大幅なレイアウト変更は、別途料金になる場合があります。
たとえば、次の変更です。
- ターゲットを法人から個人へ変える
- 採用サイトを商品販売サイトへ変える
- 1ページ構成を複数ページへ変える
- 料金訴求から実績訴求へ全面変更する
- デザイン完成後に掲載項目を大量追加する
- 参考サイトを途中で変更する
修正回数ではなく、変更内容の大きさで追加料金が決まることがあります。
修正を長引かせない確認方法
最初に関係者の意見をまとめる
社内の複数人が確認する場合は、担当者ごとに指示を送らず、一つにまとめます。
経営者と担当者の指示が反対になると、修正を繰り返す原因になります。
ワイヤーフレームで構成を確定する
本デザインへ進む前に、次の項目を確認します。
- 掲載内容
- 順番
- ページ分け
- 問い合わせ導線
- 写真の位置
- 料金表
- 実績
- 会社概要
構成が確定してから、色や写真の調整へ進みます。
修正理由を伝える
「もっと目立たせてほしい」だけでは、何を変えるべきか判断しにくくなります。
次のように目的を添えます。
- 問い合わせボタンが見つかりにくいため大きくしたい
- 法人向けに見えないため配色を落ち着かせたい
- 主力サービスが分かりにくいため掲載順を上げたい
- スマホで文章が長いため箇条書きにしたい
理由が分かれば、デザイナーから別の改善案も提案できます。
PC版とスマホ版を同時に確認する
PC版とスマホ版では、情報の配置が異なります。
PCでは横並びにできる要素も、スマホでは縦に並べます。
スマホ版では次の点を確認してください。
- 文字が小さすぎないか
- 写真が不自然に切れていないか
- ボタンが押しやすいか
- 横スクロールが発生しないか
- 表が読めるか
- メニューが使いやすいか
- 重要な情報が下へ移動していないか
- 問い合わせ方法がすぐ分かるか
PC版だけを確認して納品すると、実装時にスマホ表示の修正が必要になる場合があります。
Figma納品で確認すること
Figmaデータを受け取る場合は、納品後にコーダーへ渡せる状態か確認します。
- Figmaファイルを複製できるか
- 閲覧権限または編集権限があるか
- PC版とスマホ版が整理されているか
- 使用フォントが分かるか
- 画像を書き出せるか
- ボタンや見出しのパーツが整理されているか
- コメントが残っていないか
- 実装担当者がアクセスできるか
共有URLだけの場合、所有者側の設定変更で見られなくなる可能性があります。
必要に応じて、ファイルの複製方法や権限を確認してください。
納期は1～2週間だけを見て決めない
サービス説明では、素材の準備や修正回数によって、1～2週間程度が目安と案内されています。
一方、サービスページ上のお届け実績には約48日と表示されています。
これは案件のページ数、修正回数、発注者の返信速度、受注状況などによって期間が変わるためと考えられます。
購入前には、次の日程を確認してください。
- ヒアリング日
- ワイヤーフレーム提出日
- 初稿提出日
- 修正期間
- 最終納品日
- コーディング開始日
- 公開予定日
「1～2週間で公開できる」とは限りません。
デザイン納品後にコーディングと動作確認が必要なため、公開日から逆算します。
見積もり相談で送る内容
相談時は、次のように内容をまとめます。
「小規模な会社ホームページのデザインを検討しています。
構成案はまだありませんが、掲載したい内容は、事業紹介、サービス内容、選ばれる理由、会社概要、問い合わせです。
トップページとサービス詳細ページの2ページを想定しています。PC版とスマホ版の両方を希望します。
ロゴと文章は用意済みですが、写真素材がないため、著作権フリー画像の選定を相談したいです。
デザインの参考サイトは○○です。落ち着いた配色と、問い合わせ先が分かりやすい構成を希望します。
納品形式はFigmaを希望し、コーディングは別の担当者が行います。
ワイヤーフレーム作成を含めた見積金額、初稿予定日、最終納品予定日をご提示ください。」
未定の項目は、決まっていないことを明記します。
情報を隠すよりも、「相談して決めたい」と伝えたほうが、必要な作業を判断しやすくなります。
初めて外注する人が確認したいチェックリスト
購入前に次の項目を確認してください。
- 構成案がなくても依頼できるか
- ワイヤーフレーム作成が含まれるか
- PC版とスマホ版の両方が含まれるか
- 基本料金で何ページ作れるか
- ページ追加料金
- ページの縦幅による追加料金
- 修正無制限の範囲
- 大幅変更の基準
- 納品形式
- コーディングの有無
- 画像素材の用意
- 文章のブラッシュアップ
- 納期
- 実績公開の可否
表示価格だけで選ばず、自社に必要な工程が含まれているか比較します。
構成案がない場合は目的と材料を先に整理する
ホームページの構成案が完成していなくても、ワイヤーフレーム作成に対応するデザイナーへ外注できます。
発注前に必要なのは、完成したレイアウトではなく、構成を考えるための材料です。
最低限、次の内容を用意してください。
- ホームページの目的
- ターゲット
- 事業内容
- 主力サービス
- 他社との違い
- 掲載したい情報
- ロゴや写真
- 参考サイト
- 希望納期
- 公開までの担当者
ワイヤーフレームで構成を固めてから本デザインへ進めば、完成後の大幅な作り直しを防げます。
構成案がない場合も、事業内容、掲載したい情報、希望するページ数を伝えて見積もりを相談できます。
ワイヤーフレーム、PC・スマホデザイン、Figma納品、追加ページ、修正範囲を確認し、公開までの工程を整理してから購入へ進んでください。
