ビジュアルデザイン｜ホームページ制作の流れ Step 4
Step 4のビジュアルデザインは、Step 3で固めたワイヤーフレームをもとに、サイトの実際のビジュアル表現を作成する工程です。ブランドのトーン、カラー、タイポグラフィ、写真・グラフィックを反映し、お客様の事業や個性を伝えるデザインに仕上げていきます。
Step 4で行うこと
ビジュアルデザインは、Step 3でレイアウト・情報構造を固めたワイヤーフレームに、ブランドらしさや視覚表現を反映していく工程です。トップページから下層ページまで、サイト全体のデザインカンプを作成します。
このステップを終えた段階で、サイトの完成イメージが視覚的に確認できる状態になり、Step 5のコーディング・CMS実装に進める状態になります。
デザインはブランドと情報をつなぐ表現
ENVY DESIGNがビジュアルデザインで大切にしているのは、見た目の美しさだけでなく、ブランドの世界観と、Step 3で固めた情報設計を両立させることです。
きれいなデザインでも、ユーザーが情報を見つけにくければ意味がありません。逆に、情報が整理されていても、ブランドの個性が伝わらなければ、競合との差別化はできません。ビジュアルデザインは、この両方をつなぐ役割を担っています。
ワイヤーフレームの段階で構造を固めているため、デザインフェーズでは「ブランドをどう表現するか」「ユーザーにどう感じてもらいたいか」に集中して議論を進められます。
ビジュアルデザインで進めること
ビジュアルデザインの中では、主に以下のテーマを進めていきます。
1. デザインの方向性決定（トーン&マナー）
まず、サイト全体のデザイン方向性を決定します。「信頼感」「先進性」「親しみやすさ」「クラフト感」など、伝えたい印象を言葉とビジュアルで整理します。
参考サイトやムードボードを用意し、お客様と「目指したい方向性」を共有してから具体的なデザインに入ります。
2. キーカラー・タイポグラフィの選定
ブランドカラー、サブカラー、テキストカラーなどのカラーパレットを設計します。既存のブランドガイドラインがある場合はそれをベースに、ない場合はゼロから提案します。
タイポグラフィ（書体）も、ブランドの印象と可読性のバランスを考えて選定します。
3. 主要ページのデザインカンプ作成
トップページや代表的な下層ページのデザインカンプを作成します。最初にトップページのデザインで方向性を固め、そこから下層ページへと展開していきます。
デザインカンプは、PCとスマートフォン両方のレイアウトを作成します。
4. UIコンポーネントとスタイルの統一
ボタン、見出し、カード、フォームなどのUIコンポーネントとスタイルを統一的に設計し、サイト全体のデザインルールとして整理します。
これにより、全ページで一貫したデザインが実現でき、後続のコーディング工程や、公開後の追加ページ制作・運用更新でも、同じデザインルールに沿って作れるようになります。
5. アクセシビリティ・ユーザビリティの考慮
文字サイズ、コントラスト、タップ領域などのアクセシビリティ・ユーザビリティを考慮したデザインを行います。
特にBtoBサイトでは、PCで業務時間中に閲覧されるケースが多いため、長時間見ても疲れにくいデザインを心がけます。
ビジュアルデザインの進め方
ビジュアルデザインは、Step 3のワイヤーフレームが確定した時点からスタートします。
最初に方向性とトップページのデザインで合意を取り、その後下層ページへと展開していきます。デザインカンプはFigma上で共有し、お客様もFigma上で直接ご確認・コメントいただけます。
主要ページの確定後、残りのページデザインとデザインルールを整え、最終的にコーディングに渡せる状態に仕上げます。
アウトプット（成果物）
ビジュアルデザインの工程では、以下のような資料をアウトプットとして整理します。
- デザインカンプ（全ページ・PC/スマートフォン）
- デザインルール（カラー・タイポグラフィ・UIコンポーネント）
- 素材ガイドライン（写真・アイコン等の使用ルール）
これらは次のStep 5「コーディング・CMS実装」で、実際のWebサイトへと展開されます。
所要期間の目安
ビジュアルデザインの所要期間は、ページ数・デザインの複雑さ・修正の回数によって変動しますが、概ね以下を目安としています。期間中、お客様には主にデザインカンプのレビューや、必要に応じた素材確認をお願いする形になります。
- 小規模（5〜10ページ）：3〜4週間
- 中規模（10〜30ページ）：1〜2ヶ月
- 大規模（30ページ以上）：2〜3ヶ月
お客様にご協力いただきたいこと
ビジュアルデザインでは、デザインカンプへのレビューとフィードバックが中心となります。
- デザインカンプのレビュー（提示後1週間以内を目安にフィードバック）
- 方向性に関するご判断
- ブランドガイドライン・既存素材のご提供（お持ちの場合）
- 写真・ロゴ・イラストなど、サイトに使用する素材のご準備
- 社内関係者への確認・共有
写真や素材が手元にない場合は、撮影手配やストックフォトの選定もENVY DESIGNでサポート可能です。
次のステップ｜Step 5「コーディング・CMS実装」へ
ビジュアルデザインで完成したデザインカンプをもとに、Step 5「コーディング・CMS実装」へと進みます。
Step 5では、HTML・CSS・JavaScriptでデザインをWebサイトとして実装し、WordPressなどのCMSと連携させていきます。SEO・AIOの観点で必要な構造化データやメタ情報も、この工程で実装します。
ビジュアルデザインに関するよくあるご質問
Q. デザインカンプは何パターン提案してもらえますか？
トップページのデザイン方向性は、原則として1〜2パターンをご提案します。複数案を並べて選んでもらうよりも、Step 3までで固めた方向性に沿った「最も適切と考える1案」を中心にご提案する方が、議論が深まり、最終的なクオリティも上がりやすいためです。
Q. デザインの修正は何回まで対応していただけますか？
基本的には、合意できる状態になるまで必要な調整を行います。ただし、当初の方向性やStep 3で確定したワイヤーフレームに戻るような大幅な変更が必要な場合は、別途ご相談のうえで対応します。
Q. 自社にロゴやブランドカラーがありません。それでも依頼できますか？
可能です。ブランドアイデンティティの設計から一緒に進めていきます。ロゴデザインが必要な場合は、別途ロゴ制作の工程をご提案します。
Q. 写真や素材を準備するのが難しいのですが、対応可能ですか？
ストックフォトの選定、写真撮影のディレクション・手配、イラスト・アイコンの作成など、素材まわりもENVY DESIGNでサポートできます。必要なサポート範囲に応じて、お見積もりでご相談ください。
Q. アクセシビリティ対応はどの程度実装されますか？
ENVY DESIGNでは、文字サイズ・コントラスト・タップ領域など、デザイン段階で考慮できる基本的なアクセシビリティに配慮しています。キーボード操作や読み上げ対応など、実装を含む厳格な準拠が必要な場合は、別途ご相談ください。
お問い合わせ
ENVY DESIGNへのお問い合わせは、お問い合わせフォームよりお願いいたします。
出典
- Schema.org（構造化データの公式仕様）
- Google Search Central（検索・構造化データの公式情報）
- Web Vitals（Core Web Vitalsの公式定義）
- Google検索公式ブログ（AI Overview等の発表情報）
関連記事