このページのトップへ

コピー

トーンの設定:写真ウェブサイトの配色選択ガイド


ほとんどの人がそうであるように、あなたにも好きな色があるだろう。そしてまた、ほとんどの人と同じように、おそらくあなたの写真サイトの配色は 写真ウェブサイトを決めていることでしょう。しかし、あなたのオンライン・プレゼンスの重要な部分を、単に個人的な好みに従って選ぶことは、最も賢明なアイデアではないかもしれません。この色は実際にあなたのブランドを表しているのでしょうか?オーディエンスはこの色をどう感じるでしょうか?この色と相性の良い他の色は?

ウェブサイトの配色を決めるのは、ページの見栄えを良くするだけではありません。訪問者の第一印象から、あなたの写真がサイトのあらゆる要素とどのように相互作用するかまで、考慮すべきことはたくさんあります。このプロセス全体を簡単にするために、写真サイトの配色を選択する際に従うべき手順を以下に示します:


色彩心理を理解する


色と感情が密接な関係にあることは周知の事実だ。パブロ・ピカソが言ったように、"色彩は、特徴のように、感情の変化に従う"。しかし、それがアトリエの壁や赤ちゃんの部屋だけに当てはまるわけではないことを、あなたは知らないかもしれない。


色彩心理学 色彩心理学色彩心理学は、それ自体がひとつのガイドとなるものであり、このトピックについて少し研究する時間をぜひとも割くべきものである。そのプロセスを容易にするために、ここでは最も一般的な色が呼び起こすいくつかの感情について簡単に見てみましょう:


  • 白 - 純粋、シンプル、効率

  • ブラック - 効率性、洗練性、安全性

  • 赤 - 勇気、暖かさ、興奮

  • 青 - 穏やかさ、落ち着き、信頼

  • 緑 - 調和、静けさ、バランス


仕事に集中する


写真があなたのビジュアル・ランゲージの核であることは間違いない。そのため、あなたの ポートフォリオは、あなたの配色を探し始めるのに最適な場所です。あなたの写真を数枚選び、それぞれをカラーパレットに分解してみましょう。写真1枚につき5トーン程度を探し、すべての写真で同じ数を維持するようにしましょう。


あなたが明確な加工スタイルを確立しているにせよ、多様なテクニックを試すのが好きなにせよ、このステップは、人々があなたの作品やブランドをどのように受け止めているかを理解するのに役立つだろう。その上、事前には気づかなかったパターンに気づかせてくれるかもしれない。無料のオンラインツールを使えば、自分だけのカラーパレットを簡単に作ることができる。



他の人が何をしているかを見る

自分のポートフォリオのビジュアル・アイデンティティが明確になったところで、周りを見渡してみましょう。あなたのスタイルに似た他のフォトグラファーは、どのような配色を使っていますか?多くの場合、特定のスタイルやジャンルのウェブサイトで共有されている明確なパターンを見るのは簡単です。


例えば、結婚式の写真サイトの大半は、暖色系の柔らかい色と白をふんだんに使っている。新生児写真のポートフォリオでは、パステル調の組み合わせが一般的です。都会の写真家は暗い色を使う傾向がある。このようなジャンル内の同質性の背景には、特定の視覚的アイデンティティに惹かれる特定のオーディエンスをターゲットにしているという事実があります。にもかかわらず、多くのフォトグラファーが、独自のスタイルや目標に合わせて、これらのガイドラインから離れていくのを目にするかもしれません。



大局を見る


リサーチの最後のステップは、最新の 写真サイトのデザイントレンド.これらは通常、配色にあまり焦点を当てませんが、これらの傾向を理解することは、可能な限り最良の方法であなたのトーンを実装するための鍵となります。


2018年を例にとると、ほとんどの写真ポートフォリオがミニマルなアプローチを選んでいることがわかる。このトレンドに盲目的に従えと言っているわけではないが、訪問者に時代遅れと感じられるような色彩構成を避けるために、心に留めておきたい。



ブランドに合わせる


ポートフォリオ以外に 写真ロゴは、人々があなたの作品を識別するためのメインビジュアルです。まだお持ちでない方は、この色彩研究を実践して 写真ロゴを作りましょうを作成しましょう。もし作成するのであれば、調査から得られた知見に基づき、正しい決定を下すようにしましょう。


強力なブランドを作るためには、写真ウェブサイトの配色とロゴを一緒に使う必要があります。これは、両方に全く同じ色を使う必要があるということではありませんが、類似しているか、少なくともお互いを補い合うものでなければなりません。



フォトグラファーのロゴデザイン例


実験


さて、リサーチが終わったら、いよいよ楽しみながら理論を実践してみましょう。あなたの写真ウェブサイトに最適な配色を選ぶのに役立つツールは、オンライン上にほぼ無制限にあります。これらのツールのいくつかは、次のとおりです。 Coolors.co, アドビカラーCCそして カラーコード.それぞれ異なる機能と配色をブラウズするオプションが用意されているので、事前にすべてを見て、どれがより自分のニーズに合っているかを確認するとよいだろう。


このプロセスでは、支配的な色を2色以下、さらにアクセントカラーを1色か2色見つけることを目指すべきである。これらの形容詞がどのように聞こえるかもしれませんが、それらのどれもが残りを上回るべきではありません。互いに補い合ったり、対照的になったりして、うまく調和するはずだ。



あなたのドミナントカラーを見つけよう

これは、人々にあなたのブランドを覚えてもらいたい色です。つまり、ロゴ、マーケティング資産、ソーシャルメディアの要素の原色と一致させる必要があります。例えば、ニコンの黄色とキヤノンの赤。彼らのウェブサイトを見れば、ロゴとウェブサイトがいかにこの重要な特徴を共有しているかがわかるだろう。

あなたのウェブサイトでは、この支配的な色は訪問者の注意を向けるために使用されます。そのためには、この色の使用を特定のボタンやCTAに限定する必要があります。そうすることで、あなたのポートフォリオで訪問者に進んでもらいたい経路が明確になり、全体的なユーザーエクスペリエンス 。



ハイライト


アクセントカラーには主に2つの目的があります:ウェブサイトをより面白くすることと、訪問者の注意を第2層のアクションに導くことです。1つ目は、単色で構成されたウェブサイトは非常に退屈なものになるということです。ミニマルでクリーンな外観を目指すのであれば、ドミナントカラーの異なるトーンをアクセントカラーとして使用することができます。


閲覧者を正しい方向に導くために、これらの色は、すぐにアクションを起こす必要はないが、訪問者にインタラクションしてもらいたいコンテンツを強調することができます。これには、字幕やメニューから情報ボックスや背景ストリップまで、あらゆるものが含まれます。




バランスを取る


写真サイトの配色が決まったら、いよいよ実行に移しましょう。最良の結果を得るためには、よく知られている「60-30-10の法則」に従うべきです。ウェブデザインに当てはめると、サイトの60%をネガティブスペース、30%をドミナントカラー、10%をアクセントカラーにするということです。 最後にもう一度


公開ボタンをクリックして作品をシェアする前に、一歩引いてみて、改善できる点がないか考えてみましょう。配色は、あなたが紹介する画像とどのように相互作用していますか?このデザインは、あなたが写真家であることを本当に表していますか?あなたやあなたの作品に近い人にセカンドオピニオンを求めるのもいいかもしれません。出来上がりに完全に満足したら、いよいよ世に送り出す番です。

この記事は役に立ちましたか?

ページ下