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

Webサイトの印象や使い勝手を決めると言っていい重要な要素「デザイン」。デザインが完成するまでの長い工程を、初めての方にもわかりやすくご紹介します。

Web制作・ホームページ制作 デザイン制作の流れ

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

 

 

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

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

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

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

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

サービシンクではRFPの作成も承っております。サービス詳細は以下をご覧ください。
RFP作成コンサル

 

Webサイトの構成案の話し合い

 

構成案を作成する

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

 

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サイトの考察

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

 

デザインカンプを作成するWebデザイナー

 

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

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

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

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

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

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

 

社内レビュー

 

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

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

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

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

 

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

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

 

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

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

 

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

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

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

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

 

下層ページを制作する

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

 

全ページ校了

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

 


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

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

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

 

Webサイト制作・システム開発について問い合わせる

Web会議にも対応しております。
ご希望の場合はその旨ご記載ください。

会社名[必須]
[必須]
[必須]
メールアドレス[必須]
電話番号[任意]

Web会議にも対応しております。

《例》

  • ◯◯のサービス内容を詳しく知りたい。
  • 詳細な会社案内が欲しい。
  • https://xxxx.co.jpの問い合わせ率を改善したい。施策を提案して欲しい。
  • Webサイトのデザインをリニューアルしたい。見積もりを提出してほしい。
  • 管理システムの使い勝手が悪い。改善を相談したい。
  • ABテストを検討しているので、一度相談したい。
  • Webサイトに問題を感じているが課題が具体的になっていない。そこから相談したい。
対象サイトURL
[任意]
想定のご予算
[任意]

貴社プロジェクトにアサインする人員数の確保に影響するため、予めご予算をお知らせください。

お問い合わせフォームにおける
個人情報の取り扱いについて

1. 組織の名称又は氏名

株式会社サービシンク

2. 個人情報保護管理者(若しくはその代理人)の氏名又は職名、所属及び連絡先

齋藤 祐子  管理部 
メールアドレス:
privacy_info@servithink.co.jp

3. 個人情報の利用目的

  • 各種お問い合わせ対応のため
  • 弊社サービスのご案内の為

4. 個人情報の取り扱い業務の委託

個人情報の取扱業務の全部または一部を外部に業務委託する場合があります。その際、弊社は、個人情報を適切に保護できる管理体制を敷き実行していることを条件として委託先を厳選したうえで、機密保持契約を委託先と締結し、お客様の個人情報を厳密に管理させます。

5. 個人情報の開示等の請求

お客様は、弊社に対してご自身の個人情報の開示等(利用目的の通知、開示、内容の訂正・追加・削除、利用の停止または消去、第三者への提供の停止)に関して、当社問合わせ窓口に申し出ることができます。 その際、弊社はお客様ご本人を確認させていただいたうえで、合理的な期間内に対応いたします。 なお、個人情報に関する弊社問合わせ先は、次の通りです。
株式会社サービシンク
 個人情報問合せ窓口
〒160-0022 東京都新宿区新宿1-10-3
太田紙興新宿ビル6F
メールアドレス:privacy_info@servithink.co.jp

6. 個人情報を提供されることの任意性について

お客様がご自身の個人情報を弊社に提供されるか否かは、お客様のご判断によりますが、もしご提供されない場合には、適切なサービスが提供できない場合がありますので予めご了承ください。
[必須]

Webサイト・システムの
お悩みがある方は
お気軽にご相談ください

お問い合わせ 03-6380-6022(平日09:30~18:30)

出張またはWeb会議にて、貴社Webサイトの改善すべき点や
ご相談事項に無料で回答いたします。

無料相談・サイト診断 を詳しく見る

多くのお客様が気になる情報をまとめました、
こちらもご覧ください。