Web制作のデザインについて

作成の時のコツ、注意点などもありますが、ここでは具体的な作業内容を中心に、
①作成前
②作成中
③作成後
④ 最終の作成物
を分けて説明します！

①　作成前（ポイント抑える）

基本的に案件が確定されたタイミングで、キックオフ会議が行われます。

デザインに置いては下記のような大雑把な内容を確認しておきましょう
・雰囲気、コンセプト、目的など
・サイトのターゲット
・参考になっているサイトあるかどうか

実際の作業を開始する間、上記の内容を読み解き、ある程度作り上げる時のサイトのイメージを考えましょう。

また、前回の要件定義のフェーズでディレクターが作成した『ワイヤーフレーム』を準備していただければ、作成の前準備はある程度大丈夫と思います！

②　作成中（実作業）

基本的にデザインの作業は、『ワイヤーフレーム』を基づき、実際作成するサイトの画面の『画像』を作成します。

その画像をキックオフ会議で確認した下記の内容を加味して作成します！
・雰囲気、コンセプト、目的など
・サイトのターゲット
・参考になっているサイトあるかどうか

具体的な作成物に関しましては主に使用する人を想定した『デバイス別』の表示画面になります。
（『パソコン（PC）』、『スマホ（SP）』、『タブレット』など）

主に作成するデバイスは下記がメインになります。
・パソコン（PC）
・スマホ（SP）

パソコン（PC画面）

基本的にPCから作成することは多いですが、気を付けないといけない部分としては、画面サイズになります。

パソコンで多く使われているのはこちらの
デスクトップ：「1920×1080」
ノートパソコン：「1366×768」

2種類になりますので、作成する時にはこちらの2種類のサイズのバランスを意識して作成していけば良いでしょう！

スマホ（SP画面）

スマホの場合、基本的に高さは積んでいくような形なので、主に注意するところとしたら、横幅「375px」のサイズを中心に作成していけば大丈夫です！

その他（タブレット、デジタルサイネージなど）

デザイン作成する時、ほとんどの場合は上記のスマホとパソコンのサイズ展開で作成していけば大丈夫ですが、お客様の需要に合わせて特殊なサイズを作成したい場合もありますので、事前に作成するサイズを確認しましょう。

③　作成後（引き継ぎ）

各画面の制作が完了後、
該当案件担当の『ディレクター』と『営業』、
案件発注者の『クライアント』
に作成物を確認と修正を行います。

④　最終の作成物

会社によってやり方もありますが、現在多くあるのは、下記のようなツールを利用してデザイン作成してます。
・Adobe XD
・Figma

ツールについてはまた別途でご紹介しますが、基本的に上記のツールで利用して作成した作成物としては、下記のようになります。
①デザイン画像のデータ（jpg、png）
②デザインで利用したパーツデータ
③クラウドまたローカルファイル（Adobe XD 、 Figma）

これらのデータを作成後、各関係者との確認も完了したら、次の担当『フロントエンジニア』に制作の引き継ぎを行います。