My デザインフロー

こんにちはMaromaroのchieです！

Webサイトのデザインフローってデザイナーによっていろいろかと思いますが、今回は私のデザインフローをご紹介します！

Webデザインに興味はあるけど実際のところどんな感じでデザインしているのかな？
という方に少しでも参考になればと思います。

Webの制作フロー

今回はデザイン部分をピックアップして書きますが、その前にWebの制作フローについてざっくりとですがご紹介！

1.オリエンテーション/ミーティング
2.サイト設計
　ディレクトリマップ作成、ワイヤーフレーム作成、ユーザビリティの検証など
3.デザイン←今回はこの部分！
4.コーディング
5.動作検証
6.サーバー/ドメイン設定
7.納品

ECサイトなどの場合は、CMSの導入や決済システムの導入などのフローも追加されます。
その他にも案件によってフローは増えたりします。
案件の規模によっては、複数回ミーティングが必要なことも。

デザインを始める前の確認事項

今回はサイトコンセプトやワイヤーフレームがすでに決まっている状態からのフローを説明します。

デザインを始める前に確認することは
・サイトコンセプト
・ターゲット（ユーザー層）
・ワイヤーフレーム（サイトの設計図、レイアウト）の確認
・カラーの指定の有無・サイトの幅指定の有無
　※最近では固定なのかレスポンシブ対応なのかの確認も必須
・ロゴ、画像の素材提供について

サイトコンセプトやターゲットはとても重要で、サイトの目的や見てもらいたい人の層を調べることで、大枠のイメージを掴みます。

例えば、ターゲットは女性だとしても、10代なのか30代なのかでもイメージは大きく異なり、男性向けなのか、ファミリー向けなのかでも大きく異なると思います。
もちろんターゲットだけではイメージは絞り込めないので、コンセプトを理解することで、よりクライアントイメージするものに近い形を提案できるのではないでしょうか。

ちなみにここで注意しなければならないのは、ターゲットを重視するあまり、サイトの目的が疎かになってしまわないこと。案件によっては、ターゲットよりもコンセプトや目的が重要なこともあるので、要確認が必要です！

ワイヤーフレーム（以下WF）では、レイアウトの確認と要素の確認をします。

競合サイトの調査と方向性の検討

WFやサイトコンセプトを確認した後は、競合サイトがあれば競合サイトを調査してみたり、ターゲットに沿ったサイトを調査します。

同時に、サイトのデザインコンセプトを固めつつ、クライアントに確認可能であれば、自分の決めたデザインコンセプトの確認を行います。

デザインのコンセプト決め方法の一つとしては、前の記事の妄想力トレーニングもオススメです！

要素を配置してみる

デザインコンセプトが決まったら、WFに沿ってまずは要素を配置します。
WFがしっかり作り込まれていてても、私は配置派です。

WFではうまく収まっていた要素も、実際のページサイズ内に入れてみると以外と入りきらなかったりもあるので、空きや位置などについては決めつつ配置してきます。

デザイナーによっては、ヘッダー、メニュー、メイン・・・と上から順に作成していく方もいますね。

配置の際は、色もモノクロ、写真もエリアだけ確保します。

因に、ページの長さによってはページ全体を配置することもありますが、案件によってはFV（ファーストビュー）のみ配置していく場合もあります。

写真の配置

配置が終ったら、写真を配置します。
写真は後から提供の場合もあるので、その場合はダミーの画像を入れ、よりイメージしやすいようにします。

装飾、フォント、カラーの設定

サイトコンセプトに合わせて装飾を付けたり、メインや見出しになるフォントはデザインに合わせたフォントを設定します。

フォントの選び方は人それぞれですが、PC内のフォントを一覧で閲覧できるWebサービスもあるので、そちらで確認してみるのもオススメです！
wordmark

因にMaromaroでは、デバイスフォント箇所のデザインはアンチありのメイリオで設定しています。

サイトのカラー配色についても同様に、サイトコンセプトに合わせてチョイスしていきます。
悩んだときはいくつかパターンを出してみます。

カーニング

文字のカーニングを調整していきます。
文字カーニングについてはカーニング［文字詰め］で、デザインをワンランクアップ！の記事をご覧ください！

悩んだ時は

デザインは時間さえあれば、いくらでもやり込むことができる作業ですが、ずっと同じデザインをやり続けることはオススメしません。
疲れも出てきて判断が鈍ったりすることもありますし、悩んだら違う作業をしてみたり、休憩してみてください。
一晩置くことも良いかと思います。

デザインの仕上げ

一晩置いてみて、ブラッシュアップする点があれば、修正します。

デザインが完成したあとは、コーディング作業に移行します。

まとめ

今回は私目線のデザインフローをざっくりと紹介しましたが、実際はあとから写真を差し替えたり、原稿を差し替えたり、修正発生など案件によって変わってはきます。
またデザイナーや会社によってはフローも大きく異なるとは思いますので、一つの事例として見ていただければと思います。