Webデザイナーの仕事の流れを完全解説！
Webデザイナーは、クライアントの要望を形にして、魅力的なWebサイトを作り上げるクリエイティブな仕事です。
まず、どのような家を建てたいのかを設計図に書き起こし（企画・設計）、実際に家を建てていきます（デザイン制作、コーディング・テスト）。
家が完成したら、住みながら必要な部分を調整していく（納品・運用）という流れです。
Webサイト制作は、家を建てるようなものです。
Webサイトは、企業の顔であり、商品やサービスをPRする重要なツールです。
また、近年は個人でブログやホームページを開設する人も増えており、Webサイトの需要はますます高まっています。
Webデザイナーは、デザインセンスだけでなく、コーディングスキルやコミュニケーション能力など、様々なスキルを必要とします。
しかし、それらのスキルを身につけることができれば、自分のアイデアを形にして、多くの人に喜んでもらうことができる、やりがいのある仕事です。
この記事では、実際に全くの未経験からWebデザイナーへ転職したWebデザイナー歴10年以上の私が、Webデザイナーの仕事の流れを分かりやすく解説します。
全くの未経験から独学とスクールを経て一年後にWebデザイナーへ転職。現在はWebデザイナー・Webディレクターを兼務。IT業界歴10年以上。
1. 企画・設計（家を建てる前に）
まずは最適なWebサイトを設計しましょう！
理想の住まいを建てるように、お客様の想いを丁寧にヒアリングし、最適なWebサイトを設計します。
まず、ご要望をじっくり伺い、理想のWebサイトを設計図に落とし込みます。
間取りを考えるように、必要な情報やページ構成を整理し、視覚的な設計図であるワイヤーフレームを作成。
イメージを共有しながら、理想のWebサイトを形にしていきましょう。
ヒアリング・要件定義（どんな家を建てたい？）
まず、クライアント（家を建てる人）にどのような家を建てたいのかを詳しく聞き取り、要望を整理します。
- 目的：家を建てる目的は何？
- ターゲット：誰に住んでもらいたい？
- 機能：必要な部屋や設備は？
- デザイン：どのような雰囲気にしたい？
- 予算：どれくらいお金をかけられる？
これらの情報をまとめ、「Webサイト制作の設計図」となる要件定義書を作成します。
情報整理・構成案作成（間取りを考える）
要件定義書に基づいて、Webサイトの構成案を作成します。
- どのような情報を掲載する？
- どのページに何を配置する？
- ユーザーはどのようにサイトを閲覧する？
これらの点を考慮し、「サイトの骨組み」となるワイヤーフレームを作成し、情報を整理します。
ワイヤーフレーム作成（設計図を描く）
ワイヤーフレームは、実際のデザインを簡易的に表したもので、サイト全体の構成やレイアウトを視覚的に確認できます。
- トップページ：メインビジュアル、最新記事、サービス紹介など
- 商品ページ：商品画像、説明文、レビュー、購入ボタンなど
- お問い合わせページ：入力フォーム、会社情報など
ワイヤーフレームは、クライアントと共有し、内容を調整していきます。
2. デザイン制作（家を建てる）
理想のWebサイトをデザインで実現！
ワイヤーフレームに基づき、ターゲットや目的に合致したデザインコンセプトを策定。
ロゴ、色彩、フォントなど細部までこだわり、イメージを形にします。
クライアントとの意見交換を繰り返しながら、理想のWebサイトを実現します。
デザインコンセプト策定（家のコンセプトを決める）
ワイヤーフレームに基づいて、Webサイト全体のデザインコンセプトを策定します。
- ターゲット層に合ったデザイン
- サイトの目的やイメージに合ったデザイン
- 競合サイトとの差別化
これらの点を考慮し、「サイトの顔」となるデザインコンセプトを決定します。
ラフデザイン作成（設計図をもとに家を建てる）
デザインコンセプトに基づいて、ラフデザインを作成します。
- ロゴ
- 色彩
- フォント
- レイアウト
- 画像
これらの要素をラフデザインに落とし込み、クライアントと共有し、内容を調整していきます。
デザイン修正・調整（クライアントと意見交換）
クライアントからのフィードバックを受け、デザインを修正・調整していきます。
- 色を変更する
- レイアウトを変更する
- 画像を変更する
修正を繰り返しながら、クライアントの要望に合致したデザインに仕上げていきます。
デザインデータ納品（家を完成させる）
完成したデザインデータをクライアントに納品します。
- デザインデータ形式：PSD、AI、PNG、JPGなど
- ファイル名：ロゴ、ヘッダー画像、メインビジュアルなど
【関連記事】
https://webdd.minibird.jp/sense/3. コーディング・テスト（家を安全に住めるようにする）
安全で快適なWebサイト構築します！
デザインデータを基に、HTML、CSS、JavaScriptなどの言語を使ってWebサイトを構築します。
様々なブラウザやデバイスで動作確認を行い、ユーザーにとって快適なWebサイトになるように調整します。
コーディング（設計図をもとに家を組み立てる）
デザインデータを基に、HTML、CSS、JavaScriptなどの言語を使ってWebサイトをコーディングします。
- HTML：Webサイトの骨組み
- CSS：Webサイトのデザイン
- JavaScript：Webサイトの動き
コーディングによって、デザインが実際に動くWebサイトになります。
テスト・デバッグ（安全性を確認する）
様々なブラウザやデバイスで動作確認を行い、問題がないことを確認します。
- 異なるブラウザ（Chrome、Safari、Firefoxなど）
- 異なるデバイス（PC、スマートフォン、タブレットなど）
問題があれば修正し、ユーザーにとって快適なWebサイトになるように調整していきます。
【関連記事】
4. 納品・運用（家を住みやすくする）
作って終わりではなくメンテナンスも重要！
完成したWebサイトを納品後も、定期的なメンテナンスやアクセス解析で安全で快適な状態を維持します。
ユーザーの行動を分析し、より効果的なWebサイトへと改善していきます。
納品（家を完成させる）
完成したWebサイトをクライアントに納品します。
- 納品形式：WebサイトのURL、サーバー情報など
- ドメイン取得：サイトの住所
- サーバー契約：家の土地
保守・運用（家をメンテナンスする）
Webサイトは公開後も、定期的なメンテナンスが必要です。
- セキュリティ対策
- バージョンアップ
- コンテンツ更新
これらのメンテナンスを行うことで、安全で快適なWebサイトを維持することができます。
アクセス解析（家の中の人の動きを分析する）
アクセス解析ツールを使って、Webサイトのアクセス状況を分析します。
- アクセス数：何人訪れた？
- 訪問ページ：どのページが人気？
- 滞在時間：どのくらい滞在した？
- 離脱率：どのページで離脱した？
これらのデータを分析することで、ユーザーの行動を理解し、Webサイトの改善に役立てることができます。
まとめ
Webサイト制作は、家を建てるような工程です。
まず、クライアントの要望を基に設計図を作成し（企画・設計）、デザイン制作、コーディング・テストを経て、完成したサイトを納品します（納品・運用）。
各工程のポイント
- 企画・設計（家を建てる前に）
- クライアントの要望を徹底的に聞き取り、要件定義書を作成
- ワイヤーフレームを作成し、サイト全体の構成を設計
- デザイン制作（家を建てる）
- ターゲット層に合ったデザインコンセプトを策定
- クライアントと意見交換しながら、デザインを修正・調整
- コーディング・テスト（家を安全に住めるようにする）
- デザインデータを基に、HTML、CSS、JavaScriptを使ってコーディング
- 様々なブラウザやデバイスで動作確認を行い、問題を修正
- 納品・運用（家を住みやすくする）
- 完成したWebサイトをクライアントに納品
- 定期的なメンテナンスを行い、安全で快適なサイトを維持
Webデザイナーは、クライアントの要望を形にする建築家のような存在です。
それぞれの工程で専門的な知識やスキルが必要となりますが、完成したWebサイトがユーザーに喜んでもらえると、大きな達成感を得ることができます。
【関連記事】
