見出し画像

#018 よくみるあしらい(付箋風)の作り方

おはようございます。こんです🦊
こちらのnoteで宣言した通り、昨日インプットしたことを記録します。今日で18日目。
練習するのはもちろん、題材探しもなかなか時間がかかるので18日もよく続いているな、と我ながら驚き。調べたり、photohop触ってるのが好きなのかな?

ただ、参考デザイン探してると、自分の好みに偏ってしまってあまり派手目なものは選ばなかったり、フォントも似たようなものを選んでいることに気づきました。引き出しを増やすと言っても、もしかして偏ってる?と思いつつ。(※全然違うジャンルのバナーは意識して探さないと見つけられない!)

というわけで、前回と同じ感じでよくみるデザインの練習も兼ねつつ、お題を選びました。今回は、バナーではないけど、情報量が多い時の工夫はどうしているのかなと思い、紙媒体を参考にしています。

今回のインプットの目的


  • 付箋風のめくれた影の作り方を練習したい。

  • 全体的に情報量が多い時の工夫を知りたい。


参考にしたデザイン


出典:http://jptower-kittenagoya.jp/magazines/book005/HTML5/pc.html#/page/8
メニュー表の紙の端っこ部分が付箋風!


今回のインプットの成果


※文言が画像から読み取れなかったので、付箋の作り方以外はトレースは省略
  • 何よりも情報設計が大事!!EGGMENUは分類上のタイトルだから、何も考えないと、フォントを大きくしがちだけど、ここで一番伝えたいのは食事の種類がなんであるか、どんな食事であるかということ。伝えたい情報を意識して情報を整理されている。

  • 食事の写真が一目で何かわかるもの(余計なものが写っていない、食べる状態を想像できる)を使用しているため、食事の種類(Hotsandwichなど)を示す文字がそれほど目立たなくても十分伝わる。

  • 「食事の特徴」には、下線をひき短い文章でまとめられているので目にとまるが、文量の多い詳細説明部分は、文字を小さくして読みたい人は読むというような情報整理がされている。伝えたいことが明確で、文字量が多くて読む気がしない・・ということがない。

  • 実際には、このページだけではなくてハンドブックのようになっているもののため、全体での位置付けがわかるようにナンバリングが目立つようになっている。

  • 一番後ろの背景はベタ塗りではなくて、やや和紙のような紙の質感のある素材が乗算で敷かれている。より紙っぽさが出ていて、おしゃれ。※トレースでは省略。


ツールに関するインプット


「付箋の作り方」で検索すると出てきたので、まずは付箋を作る練習からやってみて同じ方法で上のメニュー表の部分を作ってみました。

付箋の作り方
【STEP1】本体となる白い長方形と、白い長方形と同じ高さの色付き長方形を作成し幅を狭める。白い長方形を複製して、影色(今回はグレー)に変更して最下のレイヤーに敷く。

※見やすいように最下のレイヤーに背景色をつけています。

【STEP2】白い長方形と色付き長方形のレイヤーをリンクして、
両方を選択し、「編集」「ワープ」で角を移動する。
※このとき、平行にすると綺麗に見える。

これでも十分、影付きの付箋に見える!

【STEP3】影色の長方形は、「フィルター」「ぼかし(ガウス)」
を調整して完成。

参考:photoshopで付箋風のデザインを作る方法

おわりに

最後まで見てくださりありがとうございます。
文字量などの情報量が多いデザインほど、情報設計がとっても大事で何を伝えたいかを意識して、情報に強弱をつける必要があることを実感しました。雑誌って、情報量すごく多いけど一通り飽きずにちゃんと読んでしまうのは、しっかり情報設計されていて、知らぬまに誘導されているんだろうなと思いました。

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