![見出し画像](https://assets.st-note.com/production/uploads/images/118172896/rectangle_large_type_2_64ca2f6c6692b291422ee4dc6a3761fc.png?width=800)
優しいデザインって?
柔らかい雰囲気や女性・子供向けのデザインを作りたいんだけど…苦手で「まとまっているブログ記事なんてないかなぁ。」
で辿り着いた \\あなたへ// 今回は『優しいデザイン』の制作についてまとめてみましたよ!
ぜひ最後までお付き合いください。
それではここから本編です↓
優しいデザインって?
1. 必要なこと
わかりやすい
余白を利用する
統一感
アニメーションは説明用
![](https://assets.st-note.com/img/1693778855065-vp9rHu3UjM.png?width=800)
▶︎わかりやすい:優しいデザインはシンプルに見せると良いです。過度な複雑さや装飾は、目線を混乱させる可能性があります。必要な要素を厳選し、最低限のデザインから装飾の流れで制作してみるといいかもしれません。
▶︎余白を利用する:ページや画面には余白が必要です。情報を詰め込みすぎるとまとまりを出すのが難しくなってしまいます。情報の整理と階層化を行うことで、重要な情報を明確に示していきましょう。
▶︎統一感:デザイン要素やスタイルの一貫性がないと、統一感がなくなってしまいどこをみるといいのか混乱してしまいます。一貫性を保つために制作の際には、ルールや決まりを作ってから制作するといいでしょう。
▶︎アニメーションは引き立て役:動画であれば、アニメーションはデザインに魅力を加え、わかりやすく説明する役割になってくれますが、過剰なアニメーションや動きも混乱させてしまうことがあります。アニメーションは意味のあるものを心がけると優しいデザインになります。
優しいデザインは、だけではないですがユーザーの視点に立ち、シンプルさ、明瞭さ、使いやすさに焦点を当てることが不可欠です。
2. 要素
カラー(色)
フォント(文字)
![](https://assets.st-note.com/img/1693821209188-tc0Ii78JOl.png?width=800)
▶︎ カラー(色)について
↪︎優しい雰囲気のデザインを制作する際には、「柔らかさ、洗練さ」をイメージ(女性向け/子供向け)できる色合いを使用するといいでしょう。以下は個人的に使えそうなカラーの例です。
1|淡いパステルカラー:淡いパステルカラーは、明るくて柔らかな色調で、鮮やかさや飛び立つ要素が少ない色とされています。パステルカラーは高彩度(色の純度)を持たず、白や灰色で混ぜられていることが多いため、非常に穏やかで柔らかい印象を与えます。
2|明度の低いカラー:明度の低いカラーは、暗い、くすんだ、または深い色合いです。これらのカラーは明るい色よりも明度が低く、より落ち着いた、重厚な、またはシックな雰囲気を持っています。
3|彩度は低くなりすぎないように:テキストと背景のコントラストが適切でないと、読みづらいデザインになってしまいます。彩度は色の鮮やかさや魅力を制御するための指標であり、適切なバランスを保つことがデザインの成功につながります。
4|アクセントカラー:優しい雰囲気を出したデザインは、どうしても目立たせたい部分も埋もれてしまうことがあります。そこで、アクセントカラーを使用してみるとデザイン内で目を引き視認性の良さを引き立ててくれます。感情やコントラストも考慮することが必要です。
![](https://assets.st-note.com/img/1693822279611-WcyLyoelym.png?width=800)
▶︎ フォント(文字)について
↪︎デザインのコンセプトやターゲットオーディエンスに合った優しいフォントを選定し、デザインに組み込むことで、柔らかい雰囲気や親しみやすさをより強調することができます。
1|曲線的なデザイン: 優しいフォントは、曲線的なラインや角が丸みを帯びた文字形状が多い印象です。文字を柔らかく、滑らかな印象を与えたい時におすすめです。
2|シンプルでクリア:シンプルで読みやすいフォントも大切です。文字がクリアで均一な太さを持ち、文字間のスペーシングが適切に調整されているとより良いと思います。
3|無駄のないデザイン: 余計な飾りや装飾を持たず、無駄のないデザインだと伝わりやすいです。シンプルさが優しさを引き立て、見やすさが格段にUPします。飾りや装飾をつける場合は、目的から外れた装飾は控えましょう。
「Helvetica Neue Light」「Segoe UI」「Quicksand」「Lato Light」が英字フォントだとおすすめです。
3. 例えば
デザインの目的を理解する
![](https://assets.st-note.com/img/1693778886985-0iHjSeTiqO.png?width=800)
▶︎ 分析する目線でデザインを見てみる
↪︎「どうしてこうなんだろう?」「なんでこの色なんだろう?」といった疑問を言語化していくとデザインの目的や理由がわかっていきます。ぜひ研究者のような、分析の目線で物事を考える思考を身につけてみてください。
4. 実際の事例から学ぶ
実際のデザイン事例の紹介
なぜそうなったのか解説
![](https://assets.st-note.com/img/1693821044451-KBLVG0o5Ow.jpg?width=800)
▶︎ LAWSONのロゴ変更の例
↪︎ ローソンは2020年5月から同社のプライベートブランド(PB)のパッケージの全面刷新を開始しました。そのデザインを巡って、消費者から「分かりにくい」などの意見が寄せられるなど、ネット上で物議を醸していました。
▶︎ 解説
↪︎こちらは有名なLAWSONの事例ですが、この事例を見てどう思ったでしょうか?
個人的には失敗だとは思いませんでした。
なぜなら必要最低限の情報、シンプルでかっこいいデザインだと感じました、分かりずらいとも感じませんでした。
しかし、コンビニエンスストアは若い人だけでなくお年寄りから小さい子供までいろいろな人が利用します。その中で全員が納得してわかりやすいかと聞かれるとなかなか受け入れられない人もいます。
1|ラベルのわかりにくさ: 一部のPB商品のラベルにおいて、商品名や内容物の記載が小さく、読みにくいことがありました。消費者が商品を選択する際に、情報の不足が問題となりました。
2|視覚的な混雑: 一部の商品パッケージは、情報やグラフィックが過度に使用され、視覚的に混雑していたことがあります。これは商品の特徴を隠す可能性があり、ブランドイメージにも悪影響を及ぼすことがありました。33|価格や特典の情報不足: 価格や特典に関する情報が不足していたり、不明確であったりすることがありました。これは消費者にとって商品の選択基準として重要であるため、情報提供の重要性が強調されました。
これらの事例は、デザインにおいて一貫性、情報の明瞭性の重要性を示しています。LAWSONならびにデザインを担当した「nendo」はこれらの反省点を受けて、改善を進め、より優れた最高の商品デザインを提供しています。
※私はこれで「nendo」が好きになりました!
参考:OpenAI ChatGPT
終わりに
今回は「優しさ」にスポットを当てて書いてみましたが、誰かに伝えたいと言う時には、基礎になってくる内容だと思いますので、少しでもお役に立てたら幸いです。今後の内容や気になったことなどぜひコメント頂けますと嬉しいです。
最後までお読みいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか?