オシャレなサイトは色使いが違う！サイトのカラーリングのヒント

フォトグラファーのサイトがカッコいいのは、写真自体のよさだけでなく写真を引き立たせる色使いにもその理由がありました。

今回は写真スタジオのサイトを例に、カラーリングでセンスのいいサイトに見せるコツを、プロの視点でWebデザイナーが紐解きます。また、さらに見やすいサイトにブラッシュアップするための実践的なアドバイスもご紹介します。

写真の色までも考慮に入れた魅力を引き出す色合わせ

BiNDで作成したサイトを紹介しているナイスサイトより、まずはサイトをご覧ください。
今回のサイトの作者、Happy Monsterさんは「Kriss Vector Salon」のテンプレートをベースにサイトを制作。ポップな色使いの美容院のテンプレートを大胆にアレンジし、柔らかな色合いでカラーコーディネートされた、オシャレなサイトです。

▼フォトスタジオ「HAPPY MONSTER」さん。

「Kriss Vector Salon」を上手くオリジナル化していますね。写真やグラフィックそれぞれがとても個性的で色も多いのに、オシャレにまとまって見えるのは、写真そのものも色のひとつと考えて、サイト全体をしっかりとコーディネートしているから。文字のジャンプ率やフォントの使い分けも明確。サイト全体でSSLに対応しているところも素晴らしいですね。

写真を引き立てる、あえて抑えた色使い

もしも、キーカラーがオリジナルのテンプレートそのままの赤だったら、どうでしょうか？
写真やグラフィックとエリアの背景色がケンカしてしまい、本来見せたい写真が主役ではなくなってしまう可能性があります。
今回さすがプロの写真家さんと感じたのは、サイト内で使う色の色味を揃えて写真を引き立てていることと、写真の背景色もサイトの色要素の一部として捉えてサイト全体をカラーコーディネートされているところ。
もともと色彩感覚が素晴らしいのかもしれませんが、オシャレに見せるコツはここにあると言えるでしょう。
自信がない人は、色の組み合わせを提案してくれるサイト「COOLORS」などもあるので、メインで使いたい写真素材とのカラーコーディネートの参考にしてみるといいかもしれません。

写真やグラフィックのクオリティが高い

サイトのデザインが洋服だとしたら、写真やグラフィック素材は人間の顔に当たる部分です。顔を変えることはできなくても、撮り方やクオリティー、演出などでいくらでも魅力的に見せられることを忘れずにいつも1枚1枚こだわりましょう。その点で、フォトグラファーのサイトがどれもカッコイイのは、納得できますね。

文字のジャンプ率やフォントの使い分けが明確で読みやすい

見出しで使われているフォントや大きさのルールも統一されているので、スクロールしたときに目に入る情報が整理されており、読みやすいのもスタイリッシュに見える要素のひとつです。メッセージも遊び心がありつつ、自分たちのこだわりを感じさせる内容です。1点「PRICE」エリアの背景は、背景画像を明るく調整するなりして、文字をもう少し立たせるとさらに見やすくなると思います。

BiNDで設定するときのポイント

BiNDの背景色は様々な箇所で設定できますが、今回の元テンプレート「Kriss Vector Salon」のイメージを決めているビビットな赤の背景色は、ブロックエディタの設定タブの「背景色」に設定されているので、ここをサイトの雰囲気に合った色に変更します。

CMSで事例ページを更新

事例紹介をBiND PressでCMS化しているのもこのサイトの特徴です。
ページをCMS化するとBiNDクラウドとの連携でスマホからの投稿も可能。
本来はブログやニュースをサイトに挿入するための機能ですが、このサイトのように自分のサイト内の更新頻度の高いところに活用するのもおすすめの方法です。
フォームのようなわかりやすい投稿画面に文字や写真を入力するだけでページが自動で作られるので、更新が楽になります。
BiND PressをCMSとして活用する方法は「CMS化が瀕死のサイトを救う！ BiND Pressでページ量産、更新を楽に。」で詳しく説明しているので参考にしてください。

写真からも記事に飛べるように工夫

CMS化すると、フォーマットが決まってしまうため、カスタマイズできる箇所は限られますが、写真から詳細ページへの導線作りは可能です。
ひとつひとつ写真が大きく見やすいのでその利点を生かし、画像からもリンクに飛べるように変更するのがおすすめ。

BiNDで設定するときのポイント

該当ブロックをSMタグ編集モードで開いて画像のクリック設定をリンクするにして、リンク先に [%link%] を挿入します。

これで画像にもリンクが設定され、利便性がアップするはずです。
また「続きを読む」をリンクボタン化してもいいでしょう。この辺の方法は長くなってしまいそうなので、別途ブログで解説したいと思います。

なお、事例ページの段のズレはブロックレイアウトを「目次」にすると直るかもしれませんので、試してみてください。
そのほか、スマホ表示時に全て1カラムになっていたので、「CREATIVE」や「RECENT WORKS」などは2カラムを用いて、高さを抑えるとさらに見やすくなると思いますよ。

いかがでしょうか？スタイリッシュなサイトを作るコツはバランスを考えながらの配色が鍵となります。今回紹介したサイトのアレンジを参考に、あなたのサイトも個性的に彩ってください。

フォトグラファーはもちろん、たくさんの職種の方に使われているBiNDupを使って、ぜひクオリティのよいサイト作りにチャレンジしてみてください。
無料でBiNDupを試してみる