おすすめの記事
この記事では、このような悩みを解決します。
1. 最新トレンドのリサーチに：SANKOU!
デザインのリサーチを即座に終わらせるならこのサイト。
プロの作例を一覧で見ることができます。
特に注目したいのは、色の組み合わせ方です。
単純に「かっこいい配色」を真似るのではなく、
「なぜその配色が選ばれているのか」を考察することが大切。
企業のブランドイメージ、ターゲット層、商品の特性…
それらすべてを考慮した結果が、その配色に表れているのです。
使い方
- サイトを開く
- 最新の投稿をざっと眺める
- 次に、自分が担当している業界のキーワードで検索。
リサーチの具体的な手順
「美容系YouTuberのオープニング動画を作る」場合の
具体的なリサーチ手順をご紹介します。
- SANKOU!で「ビューティー」「コスメ」「美容」などのキーワードで検索
その業界で今どんな配色が好まれているのか、一目で分かります - 気になったデザインはスクリーンショットを撮って保存
- 次に、ターゲット層が似ている企業のデザインをチェック
気になったデザインの配色はカラーピッカーでチェックするのがオススメです。
「カラーピッカーって何？」となった方は次の項目をご確認ください。
2. カラーコード取得の裏技：ColorPick Eyedropper
- 「参考サイトの”あの色”を自分の動画でも使いたい」
- 「いちいちカラーコードを聞くのが申し訳ない…」
そんなとき、スポイトツールがあれば一瞬で解決できるんです！
特に私がオススメするのは、「ColorPick Eyedropper」。
Google Chromeを使っている人であれば、拡張機能として簡単に導入できます。
導入方法
- Chrome Web Storeにアクセス
- 「ColorPick Eyedropper」を検索
- 「Chromeに追加」をクリック
- 右上にアイコンが追加されたらOK！
使い方
- ブラウザ右上のアイコンをクリック
- カーソルをロゴや背景に合わせる
- クリックすると自動で色が抽出される
- Command(Ctrl)+Cを押してカラーコードをコピー
例えばSNSやウェブサイトを運営しているクライアントの動画を手がける場合、
ブランドイメージの統一感が重要になってきます。
このツールを使うことで、
すでに運営されている媒体からキーカラーを抽出でき、統一感のある仕上がりを実現できます。
3. 配色を”パクりたい”ときに：Adobe Color
Adobeが提供する無料の配色ツールです。
特に優れているのは画像から色を抽出する機能なので、
今回はその機能に絞ってご紹介します。
使い方
1. サイトにアクセス
https://color.adobe.com/ja/create/image2. 画像のアップロード方法
- 「テーマを抽出」タブを選択
- 分析したい画像をドラッグ＆ドロップ
もしくは「画像を参照」から選択
3. 色の抽出機能の活用法
左項目の「カラームードを使用して抽出」で、以下のように色の雰囲気を変えることもできます。
- カラフル：鮮やかな配色を抽出
- 明るい：明るめの色調を重視
- 暗い：シックな色調を抽出
- モノクロ：モノトーン系の配色に
手動で抽出箇所を変えることもできるので、
「画像のより右側の色を抽出したいのに…」となった場合でも問題ありません。
他にも使える機能
サイト内には色々な機能があるので、試してみてください。
4. 失敗しない配色を探すなら：Color Hunt
プロのデザイナーやクリエイターが厳選した
美しいカラーパレットを提供する無料の配色ツールです。
誰でも簡単にトレンドの配色を見つけることができ、
Webデザイン、プレゼン資料、SNS投稿などに活用できます。
使い方
パレットは4つの色がセットで表示され、「Like」数で人気度がわかります。
- 上部の大きな色＝メインカラー
- 下部の小さな色＝アクセントカラー
しかも用途に応じた最適なカラーパレットを簡単に見つけることができます。
色の使い分け
特に「4色の黄金法則」を守ることで、バランスのとれた配色を実現できます。
① ベースカラー
- 役割：デザインの主軸となる色
- 選び方：Color Huntパレット内の画面上部の大きな色を使用
- 活用例：背景やメインのデザイン要素に適用
② アクセントカラー
- 役割：デザインのポイントを際立たせる色
- 選び方：Color Huntパレット内の下部の小さな色を活用
- 活用例：ボタンや見出し、強調したい部分に使用
③ サポートカラー
- 役割：ベースカラーとアクセントカラーを調和させる色
- 選び方：Color Huntパレット内の中間の色を選び、配色全体をなじませる
- 活用例：背景の微調整やアイコンの統一感を出す
④ テキストカラー
- 役割：可読性を確保する色
- 選び方：背景とのコントラストを意識して選択
- 活用例：本文やキャプションに使用し、視認性を向上
5. 単色を選びたい時に：colordic.org
直感的な操作で理想の色を見つけられるサイトです。
私は特にパステルカラーを探す時に重宝しています。
ただし配色を提案してくれるわけではないので、
1色を選びたい時に使うのがオススメです。
まとめ：明日から使える！色選びの3つのポイント
- 最新トレンドのリサーチに：SANKOU!
- カラーコード取得の裏技：ColorPick Eyedropper
- 配色を”パクりたい”ときに：Adobe Color
- 失敗しない配色を探すなら：Color Hunt
- 単色を選びたい時に：colordic.org
洗練された動画に必要なのは、抑制の効いた色使い。
特に企業案件では、
「ブランドイメージを損なわず」「画面の中で色が競合しない」よう
慎重に色を選ぶことが重要です。
「テロップと背景の色が似ていて読みにくい」
といったミスはあるあるです。
本記事の内容を実践すれば、
クライアントに「さすがプロ！」と言われる動画制作が実現できるはず…！
迷ったときは、この記事をブックマークしてご活用ください。
それでは、素敵な動画編集ライフを！
コメント