みなさん、こんにちは。
あなたの探していたアイデアが見つかる
アイデア図鑑「Aiz」です！
これまで、このサイトを見てきた人は
分かると思いますが、、、私自身、
記事のテーマに合わせたアイデアを
いくつものデザインで紹介してきました。
現時点での記事は、20本を超え、
最近では、1つの記事につき
3種類ほどのデザイン例を作り、
デザイン例は、なんと40種類にも！
これだけ、デザインを考えて作っていると
実は、いろいろと迷走することが、
プロのデザイナーでもあります…
なんと言っても、
お客さんの意見もまったくなく
自分の中だけで、コンセプトも
すべて考えて作っていくので、
良く言えば「好きなようにできる」
悪く言えば、「自由すぎる」
だから、迷走する時だってありますよね。
人間だもの。 byしゅー←
じゃあ、デザインに迷走した時、
そこから、どうやって抜け出すのか。
不調にならない事よりも、
打開方法を知るほうが、重要です！
不調は誰だって訪れます。
調子が良くないことがダメと思うより
その時の解決方法を知ってた方が
ずっと気持ちが楽になります。
そこで、今回は、
中級者以上が忘れがちな
「色」が持つ絶大なイメージ力を
解説しながら、打開方法を伝授します！
ここは一度、落ち着いて
初心に立ち返る時。
一緒に見ていきましょう！
「色」が持つ、絶大なイメージ力
PhotoshopやCanvaに触れると、
切り抜き、イラスト、写真の加工、フォント…
いろんなデザインの機能に心躍りますよね！
たしかに、
オシャレなデザイン作るには
どれも便利な機能ばかり。
けど、実は
デザインの本質って
もっと、もっと、身近なところに
隠れていませんか？
私の答えとしては、
「色」を粗末にしているようでは
真に受け入れられるデザインは
作れないと考えています。
では、ここからは
まったく同じデザインを使って、
配色1つでイメージがガラリと変わる
証明を行なっていきますね。
パターン① パステルで、気品あふれる配色
○水色 … #B5D7CD
○白色 … #ECEFF3
○金色 … #E6DCB9
パステルの配色を使えば、
このように、気品あふれるイメージに。
パステルピンクやエメラルドも
おすすめの色味ですね。
パターン② 現代的で上品な、和の配色
紅白が美しい、和の配色
○赤色 … #B90B0D
○白色 … #FFFFFF
○灰色 … #B8B5BF
日本の色といえば、「紅白」。
少し明度を落とした、落ち着きと
パッと映える色の差が上品です。
緑茶を連想させる、和の配色
○緑色 … #547822
○クリーム色 … #FDF7E8
○赤色 … #BE151A
緑の中でも、深緑色に寄せると
緑茶や抹茶を連想させる
上品な印象に仕上がります。
アクセントに、赤色も相性バツグン。
パターン③ ワクワクで楽しい、ポップ配色
おもちゃのような、ポップ配色
○赤色 … #FA3C2D
○黄色 … #FFC349
○青色 … #36BBE5
赤・青・黄の三原色を使うことで
子供向けのおもちゃのような
ポップな印象に、早替わり！
バナナカラーで、楽しいポップ配色
○黄色 … #FFD22E
○灰色 … #EBEBEB
○黒色 … #222222
鮮やかな色味の黄色と、
シックな黒色の組み合わせは、
私も愛用するポップ配色。
目立つし、可読性も高いので最高！
パターン④ カフェみたい、優しく落ち着く配色
○黄土色 … #D8BB8C
○茶色 … #AB5B33
○薄黄緑色 … #F5F5B3
コーヒーの香りが漂ってくるような
カフェの雰囲気が、茶色の持ち味。
少し彩度を落としてあげると、
ナチュラルで、優しい印象になります。
パターン⑤ 特別感のある、エレガントな配色
○青色 … #1E3C54
○黄土色 … #9F8565
○黒色 … #222222
紺色・金色の組み合わせで、
エレガントな、特別感ある仕上がりに。
暗い背景にするからこそ、
アクセントの金や白が、引き立っています。
パターン⑥ 春を感じる、色鮮やかな配色
○濃いピンク色 … #FB5073
○薄いピンク色 … #FBD6DC
○黄色 … #FFF018
桜を思わせるピンク色を入れれば、
春の華やかさを感じさせる
季節感も表現できます。
パターン⑦ 冬の冷たさ、空気感を感じる配色
○青色 … #649BC6
○白色 … #FDFDFD
○紺色 … #19233D
冷たい空気感の青、雪を思わせる白
全体のトーンを落とすことで、冬の印象に。
クリスマスのようなイベントにも、
赤や金を入れることで、楽しげな印象にも。
どうでしょうか？
たかが色、と侮るなかれです。
配色を変えるだけで、
こんなにも伝わる印象が違ってきます。
「でも、こんな配色思いつかないよ…」
自信ない人も心配しなくて、大丈夫！
次に説明する「配色の決め方」で
行き詰まりアイデアを、打開しちゃいましょう！
配色を「マネる」打開方法
私が困ったときに使っているのが、
他のデザインから、アイデアを
「マネる」方法です。
ここで、勘違いしないで欲しいのが
「マネる」と「パクる」は
まったく違うことです。
「マネる」とは？ →他の人のアイデアに"似せる"こと。 「パクる」とは？ →人のアイデアを"そのまま"使うこと。
一部分だけ他の人から、
アイデアをもらう。
そんなマネる意識で聞いてくださいね。
方法① 世間一般の、イメージをググる
まず、打開法の１つとして、
キーワードを、ググってみることです。
ポイントは、キーワードの後に
「イラスト」と打って検索すること。
例えば、
クリスマス関連のデザインを作る時は
「クリスマス イラスト」になります。
画像のタブを表示すると、、、
Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。
様々なイラストに共通して使われ
世間一般に認知されている
配色のイメージが見えてきます。
クリスマスを検索した、今回は
「赤・緑・白・金」が、
どのイラストでも使われていますよね。
このググる作業で、
作りたい配色の「方向性」を決めれました！
次は、具体的な色の見つけ方を
お伝えしていきますね。
方法② Adobe Colorで、色を探す
どんな色味を使ったらいいのか
方向性が見えたら、
実際に、どんな色にするのかを
決めていく作業です。
自分が愛用しているのが、
「Adobe Color」になります。
使いたい色に合う配色を
自動で提示してくれたり、
色味の検索ができる超便利サイト。
下の「3色ルール」の記事にて、
詳しい使い方の説明をしているので
ぜひ、あわせてご覧ください↓
方法③ Pinterestで、デザインを検索
まだ、イマイチ決まらない…
そんな方には、「Pinterest」の
デザインから色を頂戴するのも
アリだと思います。
デザインを検索して、
使いたい色が見つかったら、
デザインを別名で、保存しておきます。
PhotoshopやCanvaの
スポイト機能を使い、
色を抽出していきます。
Photoshopで、色をスポイト。
Photoshopで先ほど保存した
デザインを開いて、
「スポイトツール」で色を抽出します。
スポイトのアイコンを選択して、
欲しい色の部分でクリックすると…
抽出された色のサークルが表示されて
描画色が欲しかった色に変わります！
Canvaで、色をスポイト。
Canvaでも同様に、デザインを開いて
カラー選択の画面にある
レインボーの四角形をクリック。
右下にスポイトのアイコンが
表示されるので、選択してから、
欲しい色味の上でクリックすると…
色を抽出できちゃいます！
プロのデザインを、
丸ごと全部、パクるのではなく
色味だけを、マネることで
自然と、色の勉強にもなって
レベルアップできちゃいますよ！
もちろん、このアイデア図鑑 Aizの
デザインも、どんどんマネしてくださいね！
「上品さ」を意識した、デザインを紹介！
それでは、お待たせしました！
今回は、「上品さ」をテーマに
色味を意識して、3種類作ってみました。
さっそく、見ていきましょう！
デザイン① マフラー専門店のパッケージ
○水色 … #CFDDE4
○黄土色 … #A6A788
マフラーが梱包されている厚紙の箱をイメージ
箱がマフラーの形にくり抜かれていて、
中身が見えるパッケージデザインを考えました。
マフラーを邪魔しては本末転倒なので
女性らしさもある淡い水色の
紙テクスチャを背景にしています。
もっと上品さをプラスしたかったので
暗めの黄土色で、飾り枠の装飾を
何重にも重ねてみました。
デザイン② ボルドーワインのポスター
○赤色 … #F80E01
○黄土色 … #D79475
ワインの側面だけに光が当たる
シックな写真が見つかったので、
シンプルかつ、ゴージャスな表現に。
ボルドー産のワインをイメージして
中央には筆記英字で「B」のロゴを、
赤ワインらしく、強めの赤色で入れてます。
テキストは、落ち着きつつ
豪華な色味にしたかったので、
茶色と金色の中間色で、まとめました。
デザイン③ お茶好きの体験会ポスター
○緑色 … #365621
○肌色 … #EADEC6
私自身が静岡出身ということもあって
お茶に関連するイベントポスターを
イメージして作ってみました。
お茶好きのための体験会として、
「茶茶茶（ちゃちゃちゃ）」と
リズミカルなネーミングに。
和の雰囲気を大切にするため、
抹茶を連想させる「濃い緑」と、
茶器から取った「肌色」の2色で
全体の調和をとっています。
実際に作ってみよう！
それでは、今回もデザイン例を
スクショで解説していきます。
アイデアを盗んで、
あなたの物にしちゃいましょう！
STEP① 紙テクスチャを、水色に変える
まず、背景となる
紙テクスチャの加工です。
今回は、こちらの画像を使ってます↓
Photoshopで画像を開いたら、
好きな色でいいので、
長方形ツールを使って、
全面隠れるように図形を置きます。
上から被せた図形を選択して
色を「#b4dff0」、
描画モードを「乗算」、
不透明度を「50％」にすると…
紙のボコボコ感は残しつつも、
白色の紙から、水色の紙へと
変更することができます。
STEP② マフラーとシルエット素材探し
2ステップ目は、
マフラーの生地がわかる画像と、
シルエット素材を探していきます。
私がオススメするのは、
素材の探し方については、
下の記事にて詳しく解説してますので
ぜひ、一度ご覧ください↓
マフラーの生地素材は、
肌触りが分かるように、
「どアップ」の拡大画像がいいので
このニット素材の画像を検索しました。
マフラーのシルエットは、
マフラーだと感覚で分かるように
首に巻いた形があればいいなと思って
探していきました。
STEP③ シルエットに、素材を入れ込む
3ステップ目は、
シルエットに、マフラーの素材を
入れ込んでいく作業です。
まず、シルエットを配置して
次に、ニット生地の画像を
シルエットが隠れるくらいにして
置いていきます。
ここで、クリッピングマスクを使って
シルエットの中に、ニット素材を
入れ込んでいきます。
生地のレイヤーを「上」、
シルエットレイヤーを「下」にしてから
「option」または「alt」を押しながら
レイヤーの境界線をクリックします。
すると、、、
シルエットの中に
すっぽり画像が入り込みます。
この瞬間が最高に気持ちいい！
STEP④ 周りを彩る、飾り枠を探す
4ステップ目ですが、
シルエットの周りを彩る
飾り枠を探していきます。
私が最近、重宝している素材サイトが
デザイン枠・飾り罫素材専門サイトの
「Frame Design」さんです。
多種多様のフレームはもちろん、
サイズを指定してダウンロードできるので
最高に役立つサイトになってます！
今回は、この3種類のフレームを
ダウンロードしました。
四方を囲むフレームを2種類と、
直線状のフレーム1種類です。
STEP⑤ 飾り枠を調整、配置する
5ステップ目は、
ダウンロードした飾り枠を
調整しながら、配置していきます。
まずは、
飾り枠①をシルエットを囲むように
配置していきます。
次は、飾り枠②を
１番外側に配置していきますが、、、
ここで、問題が起こります。
背景と飾り枠の縦横比が違うので、
拡大縮小しても、キレイに合いません。
そこで、私は、
１辺ずつ幅を調整して配置することに！
これで、スキマを埋めていきます。
最初に、縦のスキマを埋めていき
次に、横のスキマを埋めていきますが
ここで、さらに問題が！
4つの角でフレーム同士が被って、
ゴチャゴチャしちゃってます…
そこで、
「マスク」機能を使って、
被ったフレームを消していきます。
まずは、マスクの設定から。
横方向の飾り枠レイヤーを選択して
レイヤータブの下にある
日本国旗マークをクリック。
すると、白い四角形が追加されます。
次に、「ブラシ」の設定です。
「ハード円ブラシ」を選択、
描画色を「黒色」にしてから、
先ほど追加した、白い四角形を選択。
この状態で、
飾り枠同士が被っている部分を
なぞっていくと、、、
枠を消すことができますよ！
最後に、
直線状の飾り線を
空いているスキマに入れていきます。
ここでも、縦横の比率が違うので、
シルエットと被ってしまいますが、
もう解決法は分かりますよね？
そうです！さっきのマスクを使いましょう！
マスクで消した後は、カンタン！
複製して、反転させれば、
キレイに並べられましたね！
STEP⑥ 飾り枠の色変更
最後の6ステップ目は、
飾り枠の色変更をしていきます。
と、その前に、
レイヤーが多くなってきたので、
飾り枠レイヤーを1つにまとめちゃいます。
飾り枠レイヤーを全選択してから、
右クリックを押して、
「スマートオブジェクトに変換」を選択。
これで、スッキリまとまりました！
1つにまとめた飾り枠を
「#c8bb94」で黄土色に変更して、
描画モードを「乗算」にすれば完成です！
お疲れ様です！
今回も大ボリュームのなか、
最後まで完走おめでとうございます！
ここまで真剣に読んでもらえて、
デザイナー冥利に尽きますし、
カフェで1週間こもって作業した
努力が報われました。笑
たった色1つで、
読み手に伝わるイメージは
ガラッと変わっていきます。
せっかく作るんですから、
より効果の見込めるテクニックを
覚えて、実践していってくださいね！
基本的なことといえば、
素材サイトでダウンロードする画像って
まだまだポテンシャルが隠れているの
知っていますか？コチラの記事で確認を↓
デザインの無料アドバイス、やってます。
ここまで詳しく解説してきましたが、
実践するのはあなた自身。
時には、つまずいたり、
分からなくなる事もありますよね。
でも、デザイン詳しい人なんて
周りにいないし、どうしたら…
そんなあなたに吉報です！
現在、自分は「公式LINE」を運営し、
このたび、LINEの友達登録者限定で、
デザインの無料相談を開始しました！
現役デザイナーに直接相談できるチャンス！
ぜひ、活用してみてくださいね↓
コメント