Cocoonのヘッダーをリニューアル|デザインの足し算・引き算をしながら完成までをご紹介

Design

アイコン新しくしたじゃん。

そうだな。

アイコンのテイストに合わせて、ヘッダーもリニューアルしたよ。

あ!ボクもいるやん。

ヘッダーのデザインを作っている時、イラストを追加したり、減らしたりしたんだよね。

せっかく描いたのに、減らすなんて勿体無い!全部使えばいいのに。

そう思うでしょ?

でもデザインには「足し算・引き算」っていう方法があってねぇ。

ほほう。

今日はその「足し算・引き算」しながら作ったヘッダーのご紹介です。

この記事で紹介している内容
  • デザインの足し算・引き算
  • デザインの悪いところ探し
  • 全体のバランス

アイコンを作った時の記事はこちら。

デザイン要素は、必要最小限のモノだけに

デザイン要素は、必要最小限なモノだけにする思い切りが必要な場面が多々あります。

なんで?

完成度の高いデザインは、すべての要素に理由があるんだよ。

いらないモノがない状態。デザイン要素を理由づけて説明できる状態。←私はこれを目指してガンバっています。

必要なモノだけで構成してあるデザインは、伝わりやすいデザインに自然となっている気がします。
デザインする」ってことは、そもそも情報を整理して分かりやすく相手に伝えるモノなので、余計なモノが入っていると、一番 伝えたいこと より “余計なモノの方が目立ってしまう” 場合があります。

なぜ、必要なモノだけにするのか?

一から時間をかけて撮った写真やイラストを描いた場合、愛着が湧いてしまうからか全部使いたくなりがち。せっかく作ったから……と全部使おうとすると要素が増えてしまい”伝えたいこと”が埋れてしまう場合があります。

デザインの意図によっては、わざとゴチャゴチャにして見せる時もあるけどね。

一からイラスト描いて愛着沸きまくったデザイン要素を、足し算・引き算しながら、また、デザインの悪いところを訂正しながらヘッダーの出来上がりまでをご紹介します。

ちなみに【デザインの要素を追加 = 足し算 / 削除 = 引き算】だけではなく【手を加える・重たい印象にする】逆に【手を加えない・軽い印象にする】といったことも個人的には【足し算・引き算】に入ると思っています。

それでは、どーぞ!

ヘッダーデザイン完成まで

下のAfterが完成版です。

コンセプト

まずは、なぜこのイラストになったのか?のコンセプトから。
コンセプトって聞くと構えてしまいますが「私は〇〇屋さんです!」っていう自己紹介をイメージすると分かりやすいかも。
ブログを初めて見た方が「パッと見て分かるようにするにはどーしたらいいか?」を考えていきます。

私は
「デザイン屋さん!」

「スタイリングが上手になりたいイヌ好きです!」

という人。←これを知ってもらおうと思います。

なので、

  • デザイナーのブログであること
  • スタイリング・イヌの記事もあること

こんな感じのことが伝わるように、パソコンと食器を並べてイヌに寝ててもらうことにしました。

このブログ全体のデザインは、シンプルお洒落なことを目指しているので、イラストを使っていても、色数少なくスッキリさせたいと思います。
下記の記事で大幅にリニューアルした時の記事を紹介していますので、よろしければご覧ください。

デザイン要素作り

下書きはこちら。

スマホで撮影した画像
フォトショップに取り込んで色を変更した画像

画像を準備した後、Illustratorで描き起こしていきます。

なかなか恥ずかしいぞ。

参考にしてくれる人が世の中にいることを祈ろう。

スマホの画面サイズは小さいのと、イラストが細かすぎると見えないので、アイテムの形は単純なモノを多めにしました。このタイミングでイラストにするのをやめたものもあります。
下書きのトレースから線画までの様子を動画にしました。
よろしければご覧くださいませ。
(描き方の説明はありません。メイキング動画になります。)

デザイン要素のバランス

次のようなことを意識しながら調整していきます。

  • 色はどのくらい使うか?
  • 線幅はどのくらいにするか?
  • 線の種類はどうするか?
  • 食器の重ね具合はどうするか?

Step1

こちらは、Illustratorでアイテムをトレースしたものを配置した状態です。
色は決めずモノクロで、アナログ感のある影をつけました。

アナログちっくな影模様

Step2

お花が黒くて重たい印象だったので、お花の色をグレーに変更しました。

木の枝も色が変わって
だいぶ軽い印象になったね。

まだまだゴチャっとしてるから……引き算していくよ。
後、ロゴの位置が……イマイチ。

Step3

レイアウトがなんとなく固まってきたら、実際のブログのヘッダーにはめ込んでみます。(テスト環境を作って置くと確認しやすいです)

実際にはめ込んで見ると、左上の空きに違和感が出ました。
デザインのルールでは、ユーザーの目線は、左上から下へ流れていくと言われています。
なので、ロゴの位置を右から左に変更しました。

木の枝がなくなったね。

木の枝を引き算してみたケド、今度は空きが気になる……。

Step4

ロゴの太さを細くして抜け感を出しました。
食器の数を絞り、線のタッチもアイコンと同じに揃えました

線のタッチの違い

木の枝が復活したけど
スッキリしてるね!

アナログ感ある影をフラットな影にして、よりスッキリさせたよ。
後、パソコンの縁をグレーにしたらロゴの黒が引き立ったよ。

本当だー。

アイコンに色がついたから、デザイナー感がメインに感じるね。

食器とイヌはサブ的な。

Step5

最後に細かい微調整をして完成です。

並べただけだと分かりづらいですが、重ねるとこんな感じで位置調整をしています。

まとめ

ヘッダーのデザインする時に、ヘッダーだけを見ないのがポイント。
ヘッダーが実際に配置される場所に何があるのか確認しながら作ると、はめ込んだ時の違和感が軽減するんじゃないかと思います。

このブログの場合、下にあるメニューやアイキャッチと浮かないように気をつけました。

集中すると周りが見えなくなるので、時間を置いたり、遠くから眺めたり……あと!薄目もオススメ。薄目をして見える濃い部分が重たい部分になります。

この画像を薄目で見ると、お花・木の葉っぱ・パソコンの縁が濃いねー!

デッサンする時も薄目を使って濃淡を判断することがあるみたいですね。
是非お試しくださいませ。

最後に、今回のようなデザインを訂正していく時「今のデザインがどうしたら良くなるか?」この判断に迷う時間が結構かかっていましたが、本を読んでからは以前よりも、判断時間が短くなった気がしています。

こちらの本は、今っぽいデザインになる方法が書かれていて食い気味に読んでいます。デザイン本を購入したのが久しぶりで、勢いついて何冊もまとめ買いしました。なので……古くなった自分の引き出し絶賛アップデート中!です。

こちらの本もオススメ!「なるほどデザイン」を紹介している記事はこちら。

最後までありがとうございました。
それでは、また!

コメント

タイトルとURLをコピーしました