見出し画像

【デザイナーお役立ち】:WEBデザインのオプティマ(最適意匠化)

こんにちは!
frdmです。

今回はWEBデザインする上での大まかな流れのお話をしたいと思います。
全体把握のため各項目の突っ込んだ内容は今回省きますが、今後それぞれの項目も深掘りしていきます!


■デザインをする前の準備

・ターゲット層を明確にする。
言わずもがなですw
が、割と見逃す方もいらっしゃるので注意。。。

・明確にしたターゲットに刺さるストーリーを決める。
老若男女、文系、理系、感情的、論理的…
それぞれのターゲット層に刺さるストーリーは様々なのでしっかり考える必要があります。
おっさんの鉄板は若い子には通じない的なw

・ストーリーを元に構成、ワイヤーフレームを作成。
図に落として最初の具体化をします。
絵にしてみて気づくことも多々出てくるので足りなかったこと、修正することなど調整していきます。

■デザインする前に

・ターゲットを意識したデザインのテイストを決める。
ここがブレると結構大変なことになります。。。
メジャーな対処法としては、良いと思う既存のサイトをクライアント様にお見せして、先にデザインのテイストをFIXさせるのが無難ですね。。。

・スマートフォンファーストか、PCファーストのどちらをメインにするかを考える。
ここ地味に重要で、いまだにスマホファーストなのにPCサイトデザインをメインにデザインしてくる方もぶっちゃけいます。。。
クライアント様によっては「PCは表示できれば良いからスマホメインでお願いします!」なんてオーダーも結構ありますw

初稿を提出する際、メインがスマホであればスマホのデザインを提出してクライアント様の合意を得てデザインを展開していく方法が効率的です。


・対象のサービスのメインカラーを理解しカラーパターンを作る。
最初に使用する色を決めておかないと後に苦労しますw
ルールを決めておかないと「あれもこれも」状態になってどんどんデザインがブレていくので注意です!

経験上ですが、最初に使用するカラーパターン作った方がスムーズだったりします。


■デザイン

・トンマナを決める。
外部リンク、内部リンク、サムネサイズ、見出しサイズ、フォントカラー、フォントサイズ、フォントウェイト、上記で決めたカラーパターンなどトンマナを決める。

上記のワイヤーフレーム作成時に要素が出てる(はず…)ので、そのサイトに最適なデザインに落とし込んでいきます。

トンマナがブレるとデザインもブレるので要注意です!

・デザインの4原則を忘れずに!
「近接」「整列」「反復」「強弱」
を意識してデザインすることを忘れずに!

・出来るだけ2~3案出す!
人って1択だと「本当にこれで良いの?」という心理が働いて粗探しが始まるパターンが結構あります。。。

そこで「3つのうちどれが良いですか?」という感じで選んでいただくことで「自分が選んだ!」という心理になり、1案出すより早くFIXするパターンが多いです。

1パターンだと修正修正修正…と「修正無限ループ」というデスマーチに陥る場合もあるので、時間をかけてでも2~3案作って初稿を出した方が良いです。

ざっくりこんな流れですね。。。

これは基本の流れなので、案件やクライアント様や状況などでその時に合った形でアレンジすることもあります。

各項目の細かな話やテクニックなどは後日ということで。。。


では。。。

この記事が気に入ったらサポートをしてみませんか?