Webデザイナーのお仕事 その1「Web制作の流れ」

WEBデザイナーの仕事と一口に言っても、実際には多くの工程や専門的な知識が関わっています。
本記事では、スターキッドのWEBデザイナーがどのようなプロセスでWEBサイトを制作するのかの一連の流れをご紹介します。

ヒアリング 

初回MTGからデザイナーも参加する場合があります。
その場合、自分が制作するサイトについてのヒアリングを行わなければいけません。 もちろん、基本的な部分は同席しているディレクターが聞き出してくれますが、デザインに関する具体的なイメージや要求が不足している場合、デザイナーが自ら積極的に質問し、クライアントとすり合わせを行うことが非常に重要です。
初回MTGで必要な情報が聞き出せず、なんとなくのイメージでデザインを作り始めると後々になってから なにを要として制作をすればいいのかという方向性があやふやになってしまいだんだんとまとまらなくなってきます。主に下記のことは確認しておくとデザインがスムーズになると私は考えています。

構成案

構成案とは、Webサイト制作における設計図のようなものです。
これはサイトの骨組みやページの配置、コンテンツの流れを示す重要な段階です。通常、構成案はディレクターが担当しますが、場合によってはデザイナーがこの役割を担うこともあります。 デザイナーが構成案を担当する場合、クライアントから提供された情報を基に、サイトに盛り込むべき要素や必要なコンテンツ、導線設計（ユーザーのサイト内での移動の流れ）を整理します。
また、文言やキャッチコピーの案も考え仮に入れておくことが必要です。実際サイトに使われる文章は変わるかもしれませんが、仮で入れておくことにより「もっとこういう文章の方が…！」というクライアントからの意見が出やすくなり、サイトの完成度が上がります。
これらをすることにより、サイト全体の情報の順序や流れが明確になり、ユーザーがストレスなくサイトを利用できるような設計ができます。 構成案を作成することの大きなメリットは、デザインに入る前に情報や要素を整理することで、その後のデザイン作業がスムーズに進む点です。自分でサイト全体の構成を把握しておくことで、デザイン段階で迷うことなく迅速に作業を進めることができます。

デザイン

構成案をもとに、実際にWebサイトのデザインを作成します。クライアントの要望に沿ったビジュアル表現を行い、ユーザーにとって使いやすく魅力的なサイトを目指します。 以下デザインにおけるWEBデザイナーの仕事を説明します。

 1.レイアウト

モノクロの図形や文字を使用してデザインを制作します。先に色などを決めてしまうと、イメージが凝り固まりやすくなるためです。レイアウトの段階で、自身が作るデザインに必要な要素をまとめておくのも良いです。
この会社はこういうことをしているから〜という連想ゲームのような方たいでモチーフを決めたり、要望をもとに参考サイトを探し、どのようなデザインを制作するかのイメージを膨らませることも大切です。
この時点では並行したデザインをいくつも作ることが重要とされています。実験を繰り返すことにより「このレイアウトの方が収まりがより良く伝わりやすいのでは？」という比較につながりより良いデザインが生まれます。

2.フォント選定

フォントは情報の伝わりやすさに大きく影響します。デザインに合わせて、読みやすくかつブランドにふさわしいフォントを選定します。例えばターゲット層の年齢に合わせて文字サイズを変更することはよくあることです。また、ヘッダー、本文、キャッチコピーなど、異なる部分に適切なフォントスタイルを使い分けるなど、工夫が必要な点でもあります。
線の細い明朝体を使用しているサイトでは、小さな文字は見づらいのでサイト内で使われる小さな文字はゴシック体を使用する、などのルール決めもこの段階で行います。

3.色彩設計

色はWebデザインにおいて最も重要な要素と言っても過言ではありません。 サイト全体の雰囲気やブランドイメージを表現するため、カラーコードを決め、適切な色の組み合わせを選びます。
また効果的な色の使い方をするユーザーの事により、ユーザーの目を誘導することができ、クライアントの目的達成にも役立ちます。色が与える感情や意味などを事前に勉強しておくことが必要です。といっても私もまだまだ勉強中ですが…

4.写真加工

Webサイトに使用する画像や写真は、必ずしもそのままでは使えるとは限りません。 それこそ有料素材などで制作する場合と違い、クライアントが私用携帯などで撮影した画像を使用する場合もあります。
そういった画像はphotoshopなどを使用し、サイトのカラーに合わせて加工する必用があります。 画像のトリミングや色調補正、背景の削除など、必要に応じて写真加工を行います。 これにより、画像がサイトのデザインにマッチし、サイト全体に等一感が生まれます。

5.デザイン作成

これまでの情報（写真、色、フォント）を基に、実際のWebページをデザインします。この段階ではレイアウトや、ユーザーがどのように操作するかを考慮して、デザインを作り上げていきます。
ボタンやリンクの配置、画像やテキストの位置、全体のバランスなどを整え、視覚的に完成度の高いページを作成します。

6.確認

デザインが完成したら、内部でレビューを行います。先輩のデザイナーや担当のディレクターなど、様々な人に見てもらいデザイン感を合わせていきます。確認は大体方向性が決まった段階や、7割程完成した時など、随時タイミングを見て相談をさせてもらいます。
そうしてできたデザインを提出し、クライアントと確認作業を進めます。クライアントのフィードバックを反映させるために、必要に応じてデザインを修正・調整します。

7.提出

ディレクターに確認をいただいた後に先方に提出していただきます。クライアントに確認をいただいた後、フィードバックなど頂きつつ、デザインをより良い方向へと直していくというのが一連の流れとなっております。
もちろんPC版のデザインをTOPページから下層まで制作した後にはスマートフォン版のデザイン制作もあります。またOGPの作成でしたり、ファビコンやページ内に使うアイコンやイラスト、ロゴの制作もしたりしますが、大まかな流れとしてはこんな感じです。

まとめ

いかがだったでしょうか？WEBデザイナーが関わるデザインの流れについてご理解いただけましたでしょうか。デザインは見た目の美しさだけでなく、使いやすさや機能性を追求する奥深い仕事です。
これからWEBデザイナーを目指す方や、プロジェクトの流れを知りたい方にとって、本記事が少しでもお役に立てれば幸いです。今後もWEBデザインや制作の魅力をお伝えする記事をお届けしていきますので、ぜひお楽しみに！

thumb_up いいね 0

いいねありがとうございます！