ホームページのデザイン制作工程をご紹介。Web制作会社に依頼してからデザインができるまでの流れ

株式会社サービシンクは、Webサイトの企画から制作・運用、システム開発まで、ワンストップで行うWeb制作会社です。今回は、Webサイト公開までのプロセスのうち、デザイン工程において制作スタッフが行っている対応をご紹介します。

 

 

社内キックオフミーティングを行う

サービシンクでは、プロジェクトマネージャーかディレクターがお客様の連絡窓口に立ち、やり取りを行います。ディレクターはお客様にヒアリングを行った後、社内でキックオフミーティングをセッティングし、ヒアリング内容を制作スタッフに共有します。

社内キックオフミーティング時に、デザイナーは以下のような情報をディレクターに確認します。

• リニューアルや改修の目的
• 現在のWebサイトに感じている課題
• お客様の競合企業・サービス
• メインターゲット（お客様にとってのエンドユーザ）の年齢や性別、職業といったペルソナ情報
• コーポレート・アイデンティティ（CI）、ロゴ規定などの資料

その他、RFP（提案依頼書）などの共有を受け、案件を把握していきます。

 

 

構成案を作成する

提供された情報を基に、通常はディレクターが要件定義を行い、構成案を作成しますが、案件によってはデザイナーも構成案を作成します。お客様の課題解決に要望に沿ったものか、ディレクターと協議をしながら構成案を完成させます。

 

Webサイト制作に必要な素材を手配する

出来上がってきた構成案にあわせて、掲載が必要な情報はクライアントに提供を依頼します。

• 写真、画像素材
• テキスト原稿
• ロゴデータ

Webサイトにおいて写真や画像といったイメージ素材はとても重要な要素の一つです。 ページの目的や文章内容にあった効果的なイメージ素材組み合わせることで、 情報の理解を促進するだけでなく、Webサイト全体のクオリティ、信頼性、滞在時間を高めます。

 

デザイン着手前に参考Webサイトを調査する

お客様からヒアリングした内容をもとに、ある程度デザインの方向性は決めておきますが、偏りがないように参考にするWebサイトを調査します。
お客様の競合Webサイトだけでなく、WebデザインのギャラリーやPinterestなども参照し、なるべく多数のWebサイトを集めます。

• 競合Webサイト
• 今回の課題解決に適したテイストのWebサイト
• お客様の希望に近いテイストのWebサイト
• トレンドデザインを採用したWebサイト

同業種のデザイン傾向や、作りたいテイストの要素（色、フォント、余白、イラスト、画像等）がそれぞれどのように使用されていて、どんな働きをしているか、などを分析していきます。

 

 

デザインコンセプトを抽出する

参考Webサイトの調査を終えると、サイト全体のデザインコンセプトを作り始めます。ビジュアルテイストや色味をはじめとして、どのようなデザインがお客様のサービスや想いを伝えるのに最適かを探っていきます。

デザインコンセプトは主に以下の10項目を中心に組み立てていきます。

1. デザインリニューアルによって目指すゴール（目的・目標）
2. 目標実現のための課題
3. 課題に対する具体的な解決策
4. メインターゲットに訴求したい印象（キーワード）
5. カラー展開
6. イメージボード
7. イメージスケール上のポジショニング
8. デザイン参考イメージ
9. お客様が参考にしているWebサイトの考察

上記を踏まえたデザインコンセプトは、ページ全体の礎としてだけではなく、お客様へ提出する資料または運用対応時に品質保持の指標として活用できます。

 

 

TOPページのデザインを制作する

デザインコンセプトに沿って、TOPページの構成案をデザインカンプ（完成見本）に起こしていきます。
サービシンクでWebサイトをデザインをする際、現在では主にAdobe XDを使用しています。

ユーザーに情報を視覚的にわかりやすく見せるため、以下のような項目を入念に検討して作り込んでいきます。

• 色
• 文字サイズ
• 余白
• 情報のグルーピング
• レイアウト

構成案をもとに制作しますが、要素の追加やレイアウトの変更など、構成案に縛られすぎずユーザファーストで調整を加えていきます。

また、いかにファーストビュー（ユーザーがWebページにアクセスした時に最初に表示される部分）でターゲットユーザの興味関心を惹きつけられるかも重要ですので、メインビジュアルの制作には特に注力します。

 

 

お客様へ提出する前に社内レビューを行う

制作したTOPページは、お客様へ提出する前に、まず社内の制作メンバーに共有します。社内メンバーは第三者の目となり、情報の不備やレイアウトの指摘、実装上の懸念点等を洗い出してデザイナーに伝えます。

• 構成要素に不足はないか
• 構成要素の表現を大幅に変更した場合の意図は共有できているか
• レイアウトでの要素の目立たせ方や、設定した目的を達成できる作りになっているか
• ボタンやスライド画像の挙動イメージは共有できているか
• ブラウザの横幅を広げた際のレイアウト変化など、実装上の問題はないか

デザイナ―は自身が作成したデザインコンセプトをもとに、指摘された内容をどこまで反映するかを判断しブラッシュアップを行い、お客様に提出するTOPページを完成させます。

 

お客様にデザイン初稿を提出する

お客様にTOPページのデザインを提出し、目的にかなったデザインであるかを判断してもらいます。工期・工数におさまる範囲で双方納得のいくデザインに仕上げます。

 

グランドデザインを制作する

TOPページのデザインが決まったら、Webサイト内で特に重要な位置づけにあたるページ（例：コーポレートサイトならば「事業内容」や「お問い合わせ」など）を優先的に制作していき、デザインのベースを固めます。サービシンクでは、このデザインのベースをグランドデザインと呼び、フォント、形、色、大きさなどに厳密なルールを設定してから他デザインに展開しています。 場当たり的に要素を増やしてしまうと、統一感が欠如した迷いやすいWebサイトになってしまうためです。

 

エレメントリストを作成する

グランドデザインを制作しながら、担当デザイナーはWebサイト全体の統一感を保つため、下記のようなWebサイト内で共通して使用するエレメント（要素）のリストを作成していきます。

• タイポグラフィ
• カラーパレット
• アイコンリスト
• コンポーネント
• ボタン
• チェックボックス
• ラジオボタン
• 共通ヘッダー／フッター
• テキストフィールド／エリア
• プルダウン
• テーブルレイアウト
• 余白

各エレメントのリスト化は、実装工数や今後の運用工数などに影響を与えかねない無用なパターンの増加を抑止する意図もあります。

 

下層ページを制作する

グランドデザインとエレメントリストをもとに、残りの下層ページを制作します。
この段階では他のデザイナーと協業することが多いため、Adobe XDの「共同編集機能」を用い効率的にページを制作していきます。

 

全ページ校了

制作完了したページはお客様に都度提出していきます。お客様から返ってきた修正・変更指示に対応し、校了まで進行します。

 

---

Webサイト制作・ホームページ制作・システム開発・運用のことで、お困りではありませんか？

私たちサービシンクは25年以上に渡って数々のWebサイト制作・ホームページ制作を手掛けてきました。東京都内でも、戦略策定からホームページ制作、システム開発から保守運用、さらにはA/BテストといったCRO対策までに強いWeb制作・ホームページ制作会社は多くありません。

その中でも我々は特に不動産業界においては不動産ポータルから中〜大手不動産会社、地場の不動産会社までおよそ不動産業界のあらゆるサイトを手がけてきました。
不動産会社様のお困りの事象にはさらに一歩踏み込んだご提案が可能です。お困りのことがあればお気軽にご相談ください。