デザインは一手間が大切！画像が見違えるほど魅力的になるデザインテクニックのまとめ

サイト構築 -デザイン

Post on:2016年5月12日

クロップ: 焦点と構図を強調させる

画像を美しく仕上げる一番簡単な方法がこの「クロップ」です。クロップは不必要だったり気を散らすエリアを取り去ることで、構図を見直し、焦点を強調することができます。

【注意】クロップするエリアが大きい場合は、可能な限り大きい画像を使用します。これは切り取った後の画像が小さくなってしまうからです。小さいからといって拡大してしまうと、ピクセレーションが起きてしまい、汚い画像になってしまいます。

クロップする時に便利なのが、「3分の1ルール」です。このテクニックは画像に2つの垂直線と2つの水平線を重ね、縦横に3分割します。

垂直線と水平線が交差している4つのポイントに焦点や重要なエリアを合わせると、バランスの良い構図になります。

ブラー: 背景イメージを強調させる

デザインで画像を重要な要素として目立たせたい、でも常に注目の的にしたくないという場合があります。そんな時にはこの背景を使ったテクニックがうまく機能します。

写真はさまざまなデザインに視覚的な面白い背景をつくりだすことができますが、ほとんどのデザインにはテキスト要素があり、写真のディテールがテキストを読むことを難しくします。
この解決方法は簡単です。背景となる画像にブラーを与えて滑らかにすることで、テキスト要素ははっきりと読むことができるようになります。背景写真にある形を残したい時には少し光を加えてブラーを和らげます。

劇的なブラー効果を使用すると、色は抽象的な渦をつくり、形はぼんやりとし、より滑らかで落ち着いたイメージを作りだすことができます。これはベタ塗りの背景を使うよりも気を散らせることがない良い選択です。

彩度: 色を強める・弱める

フォトグラファーとデザイナーが画像に手を加える時に最も一般的なのが、彩度の調整です。
彩度は色の強さと関係があり、彩度の高い色は大胆なで明るく、彩度の低い色は色あせて（グレーにより近く）見えます。彩度を低くすると、白黒のモノクロ写真のようになります。

どんな画像編集のテクニックでもやり過ぎには注意が必要で、あまりにも強い彩度は奇妙で、そして不自然に見えてしまいます。彩度を調整する時は控えめにするのがポイントです。強すぎると、ネオンのように輝いてしまいます。

コントラスト: ハイライトとシャドウを強調させる

画像のコントラストを上げることはポップなイメージになる良い方法で、画像が印象的になります。コントラストを上げると、明るい色はより明るく、暗い色はより暗くなり、中間色の範囲が広がります。これは画像をリアルの世界で見ているように近づけます。

逆にコンラストを下げることはフラットなイメージになり、均一のトーンを与えることができます。

コントラストも彩度と同様に、やり過ぎると良くありません。
明るすぎるとハイライトがなくなり、暗すぎるとシャドウがなくなり、そのエリアのディテールや奥行きが失われます。

輝度: 全体的な明るさを強調させる

ライティングはプロのカメラマンでも正しい光を当てるのは非常に難しいものです。正しいライティングを当てられた写真で始めることがベストな方法ですが、時には写真が暗い時があります。そんな時は輝度を調整することで、改善することができます。

輝度を調整する時に気をつけたいのは、全体が明るく（または暗く）なることです。輝度は少しずつ変え、過度に明るいエリアをつくらないということに注意をはらう必要があります。そして多くの場合、コントラストも同時に調整することでバランスがよくなり、よりよい結果が得られます。

フィルタ: 写真のいいとこを強調させる

Instagramや他のアプリのおかげで、フィルタは人気が高い写真編集の選択肢になりました。これらのフィルタは画像に特別な、またはアーティスティックな効果を簡単に与えることができ、画像のちょっとした問題を修正することも簡単にできます。

例えば上の画像で、左はちょっと黄色がかかったトーンをもっています。色のバランスを整えるためにフィルタを適用し、輝度とコントラストと彩度を調整しました。

配置: グリッドでレイアウトを強調させる

整然とされた組織的なレイアウトは、どんなデザインプロジェクトにおいても大切な資産です。もしどこから始めるのか分からない時は、安全策としてデザイン要素を一直線に並べることから始めてみてください。
多数の画像を見せる時にもグリッドは便利なテクニックです。

フレーム: 画像の形とスタイルを強調させる

壁にかけてある実際の絵画のフレームのように、デザインにおける画像のフレームも画像に注意をひきつけるために伝統的に使われるテクニックです。フレームはシンプルだったり、飾りがつけたり、1本のラインだったり、イラストをつけたり、色があるか否かに関わらず、デザインのスタイルと雰囲気に合わせて使用します。

レイヤー: スクリーンやオーバーレイで強調させる

テキストや他の要素が配置されている時など、画像をあまり目立たせたくない時があります。ブラーを使うのは一つの方法ですが、ここでは画像の明快さを維持したまま使用する方法があります。オーバーレイと呼ばれるスクリーンを重ねるテクニックです。

このテクニックは画像の一番上に色のついた透明なレイヤーを重ねます。不透明度を調整することで、画像の明快さを決めることができます。不透明度を高くするほどテキストは読みやすくなりますが、画像をぼんやりと隠してしまいます。デザインの目的に応じて、不透明度を調整します。
レイヤーは2枚以上を重ねたり、画像自身を透明にして背景の上に重ねることもできます。