前回の色・フォントまとめに続き、今回はクリエイティブのクオリティを上げるための余白・文字加工についてまとめました。
余白
デザイン全体の余白、行間の余白、文字とオブジェクトの余白など様々ですが、あるのとないのとでは、見やすさや受ける印象が大きく変わります。
バランスを見てうまく余白を取ることで、視線を集めたい部分に注目させる、余裕のあるデザインになります。
—ポイント—
- 字間 … 文字と文字の間の余白です。狭すぎると窮屈で読みにくい印象。
- 行間 …文章の行と行の余白です。字間と合わせてバランスを見ます。文字サイズの150％～200％が読みやすいとされています。
- 写真 …被写体の周りの余白や視線の先の余白などが大変重要です。
- デザイン全体の余白 …キャンバス上下左右に同じくらいの余白を設けてデザインを組むと、余裕がありつつキレイに整ったデザインに見えます。 また、文字情報がいくつかある場合はそれぞれの要素にも統一の幅を持たせて配置すると良いです。揃えすぎて単調な印象になってしまった場合は、大きなタイトルや背景情報、商品素材に動きを加えます。
文字の加工
単調なデザインに変化が欲しいときに実践する加工方法です。
タイトルやタイトル横の補助要素に使い、それぞれほどよく組み合わせていきます。
—ポイント—
- ドロップシャドウ : ドロップシャドウに同じ加工のあしらいを加えると一気に華やかになります。
- ウェーブ : 波のように配置したり、アーチ状に変形させることでクリエイティブ全体の印象が変わります。
- 斜体 : オブジェクトやイラストに合わせて斜めにすることで、スピード感のある表現ができます。
- ずらし : 一文字ずつ上下にずらすだけでも違和感のないアクセントになります。
- 文字のウェイトやサイズの調整でメリハリをつける : 一文字目だけ大きくしたり、キーワードのみ大きくすると、目が滑らないインパクトのあるデザインになります。
- 円形オブジェクトにアピール要素 : アクセントカラーやグラデーションを使うことで、目を引くポイントになります。
デザインアイディア
アイディアが枯渇した際、採用するしないに関わらずいったん取り組んでいることです。
組み合わせてオブジェクトをつくったり、まったく違うデザインを構築できることもあります。
—ポイント—
- 流体シェイプ : 明度をずらした同一カラーで複数配置することで、統一感を損なわなず今っぽい雰囲気に
流体シェイプジェネレーター「blobmaker」→https://www.blobmaker.app/
配色参考サイト「happyhues」 →https://www.happyhues.co/
AI配色生成サイト「colormagic」→https://colormagic.app/
- イラスト : シンプルなイラストや記号的なイラストで情報不足を補う。
- 背景に敷く
・ メインカラーよりやや濃いめのドットを敷く。
・ グリッド(1px 不透明度はできるだけ低く)を敷く。
・ 明度をずらした同系色の複数グラデーションを敷く。
・ 写真をぼかして額縁っぽく背景に敷く。
→上からかぶせる下地の不透明度を下げることでグラスモーフィズムっぽくもできます。
- あしらい : 素材サイトで検索すると、クリエイティブを華やかにするあしらい素材がたくさん出てきます。
—使いやすいおすすめパーツ—
リボン枠・ふきだし・手書き線・フラッグ・キラキラ・集中線
おわりに
前回に引き続き、デザインについてまとめました。実践できそうなところは参考にしていただければ幸いです。
すべてillustratorやPhotoshopで実践していることなので他のツールでどこまで可能なのか改めて調査し、今後またひとつひとつ掘り下げていければと思います。