前回は私が今制作している「お花屋さんのwebサイト」のコンセプトワークを書きました。
[chat face="me.jpeg" name="ただのお母さん" align="right" border="brown" bg="none"] 次はデザイン！[/chat]
とは言っても、今回コンセプトワークをしっかりせずにデザインを先にしてしまっていたので、ここからはコンセプトワーク後、どう修正していったかの工程を書き留めていこうと思います。
コンセプトワーク前後のデザインビフォーアフター
様々なもの（もう全部っといっていいほど…）を変更しました。
フォントの見直し
【コンセプトワーク：ビフォー】
このデザインからみなさんはどのようのサイト印象を抱きますか？
どのようなペルソナ設定がされていると思いますか？
【コンセプトワーク：アフター】
ターゲット層に合わせてフォントを変え、さらにweightも細くしました。
これによってフェミニン（上品で落ち着いたイメージ）かつ優しさが表現できたと思います。
また、ビフォーの時は見出しの印象が強く、次に写真という印象でしたが、フォントを細くしたことによって主張が和らぎ、写真に目がいくようになったかと思います。
デザインの整理
【コンセプトワーク：ビフォー】
左2枚は別ページです。見出しがバラバラ。
一番右の写真、カード型コンテンツのデザインは左の商品ページリンクとデザインが一緒で混同する。
【コンセプトワーク：アフター】
新たな見出し装飾を考えて見出しを統一。
一番右の写真のリンク（▶︎がリンク）。
他のページにある商品ページへのリンクとは違うので、別の表現が必要。
鍵カッコのようなラインの装飾をやめました。
装飾の理由
デジタルハリウッドで初めてデザインを学んだとき、全てのものに対して意味のあるデザインであることが大切と教えていただきました。
ただカッコいい、ただカワイイ。お洒落だから。そんな理由はデザインではない。
なぜ、その装飾にしたのか。
明確にできないデザインは、デザイナーの仕事ではなく誰にでもできるものになってしまう。
マルはみんなの気持ちを表していて、たくさん散りばめることにより、ワクワク感を演出。
ポイントにゴールドを入れることによって特別感を打ち出しています。
鍵カッコのような装飾は箱を開ける（開けた）イメージ。
箱を開けるときのドキドキだったり、日常から一瞬別世界に行けるような楽しいことがパーンと出てくる…
開けた瞬間、欲しいものがそこにある嬉しさ。などなど。
そんないろいろな意味を込めています。
新たに見出しに追加した装飾。
箱からワクワクが飛び出したイメージを表現。
ゴールドの三角形。
これも後から追加した、見出しの装飾です。
パーティーに使われるクラッカーをイメージ。
賑やか、楽しさを表現しました。
テキストの多いページのデザイン
【コンセプトワーク：ビフォーアフター】
左がビフォー。
テキストを打って、背景色をつけたシンプルなデザイン。
でも正直ここはデザインに迷いがありました。
[chat face="me.jpeg" name="ただのお母さん" align="right" border="brown" bg="none"] これで本当にいいのだろうか。[/chat]
右がアフター。
箱がたくさん重なり、そこからユーザーの欲しい情報が溢れ出るイメージ。
そんな理由づけでデザインしたら、自分なりにしっくりきました。
デジハリ先生に言われたことを思い出します。
「自分が気になるところは、必ず他の人にも気になるところだから。」
ちょっとでも、「？」と思ったところは改善の余地あり！ですね。
デザインは情報整理してから入ること！
デザインは情報整理してパーツまで整理してから入るべきだと痛感しました。
ワイヤーフレームなしでデザインを始めると、なぜ最初からここを前提に考えなかった？と思うところが多々あります。
✔︎どこを共通の見出しにするのか
✔︎どこに共通のパーツを使うのか
✔︎フォントだったり色だったり
自分の好きだけでできたデザインは、後から見たときに統一性のない、伝えたいことも伝わらないペラッペラなデザインになっていることでしょう。
↑この本を見返しました。
レイアウトの考え方から基本的なルールを、例え図を使ってわかりやすく書いてくれています。
レイアウトのアイデアとして「ターゲット＋何を伝えたいか＋使用媒体」でデザインの例を何点も載せてくれいているのも勉強になります。初学者にとっておすすめの本です。