Webサイトのデザイン制作フローのラスト！画像に関しての記事です。
「なぜ写真やイラストなどの画像を使うのか？」というと「読んでもらうため」「解り易くするため」です。
文字だけのコンテンツというのはどれだけ良いことを書いていてもパッと見小難しそうで嫌厭しがち！小説よりも漫画が読まれているように、Webもイメージを具現化したものが圧倒的に好まれます。
商用的なWebサイトなんかでは画像を使うだけでコンバージョン率が上がるなんて話も耳にするほどです。

そんな画像の覚えておくと役に立つかも知れない有効な使用方法と加工方法をいくつか！

コンテンツのテーマに沿った写真を使いましょう

飲料メーカーのサイトだったら、商品の写真、商品を飲んでいる場面の写真などを使いましょうということです。
飲料メーカーのサイトで家具がメインの写真を使ってたりすると「なんのサイト？」とユーザーを困惑させたり、ネガティブな感情を引き出てしまいます。

関連性のある画像をつけようとしてる人が大半でしょうし、このルールを破っている方はおられないとおもいますが、大事なので！

画像を置く位置を決めましょう

とくに理由がない場合は文章の冒頭につけるようにしましょう。
ユーザーは最初に見る場所でコンテンツを記憶する際のイメージが作られるといわれています。
画像は文章よりも記憶に残り易い性質があるので、冒頭に画像を置くことで、より記憶に残りやすいものとなります！

さらにWebサイトや紙媒体には視線移動の法則があります。Webサイトの場合は「Fの法則」！偉い人が研究した結果、ユーザーが無意識におこなっている視線移動がアルファベットのF字を描くことから、こう呼ばれるようになりました。
紙媒体の場合は「Zの法則」と呼ばれ、アルファベットのZを描きます。

記事一覧などではF字の軌道上にアイキャッチを置くと何の記事であるかをユーザーが判断し易くなります。
F字の軌道以外の箇所では、基本的には「左から右へ」視線は移動するのでそれを意識して制作するのが良心的だと思います。

図表の時間経過なども左から右に移動するように設計されています。
右肩上がりなんて言葉もありますが、右肩上がりってことは左から右に時間が経過してるといえますね！

進化論のサルから人間になる様子なども左から右に時間が流れており、視線移動を意識して作られています。
時間も「左は過去」「右は未来」と流れるように作ると見やすいものになります。

話がそれましたが文章の冒頭に画像を置いたものと、文章の後に画像を置いたものを比較してみましょう。

左に画像

画像から受ける印象に関連したコンテンツということが一目瞭然となり、印象深く全体的に明るいです。
上に画像、下に文章も同じ効果が得られます。

右に画像

左に写真を置いた状態より印象が薄く、コンテンツに関連する画像かどうか曖昧になり、少し重たいイメージを持たせます。
上に文章、下に写真も同じ効果が得られます。

画像処理による印象の違い

画像を扱う際にはPhotoshop（フォトショップ）なんかで処理を行いますが、処理方法によっても印象は大きく変わります。

角版

対象物を枠内に収める方法で、収まりが良いかわりに動きがなくなり、大人しいイメージを与えます。
写真を傾けたりランダムな配置をすると動きがでます。

切り抜き

背景を切り抜き、余計な情報を与えません。
見せたい情報だけに視点を集中させることができます。

裁ち落とし

コンテンツ枠いっぱいに写真を掲載でき、より印象付けれる写真の扱いができます。
アップで扱うと、迫力のある画像。引きで扱うと空間の広がりを表現できます。

アップ・引きによる印象の違い

先ほどの裁ち落としでの「アップ」と「引き」の違いを実際に画像を使って比べてみましょう！

アップ

「アップ」だと細かな情報が良くわかります。
動き、質感、色合いなど、人物の占める割合が多いため、人物に関する情報が圧倒的に多くなります。

引き

「引き」だと全体が見えてどこで何をしているのかが良く分かるようになります。
スケール、雰囲気、場所など、人物とは別に背景の情報が多く得られ「アップ」の時と比べると落ち着いた印象になりました。

こんな感じで「アップ」と「引き」では得られる情報がそれぞれ違います。
使い分けが大事です！

トリミングによる印象の違い

生物の目線、向きなどが非常に影響してきます。「無機質な物」であったり「目線が正面の画像」であれば、あまり注意すべきことはないかもしれません。
先ほどの視線移動を考慮し右に余白を作ってみます。

目線が右の場合

目線の先に余白を作ることで希望や先のことを見ている、未来を連想させるポジティブな印象になります。

目線が左の場合

今度は目線を左にしました。
目線とは逆方向に余白を作ることで不安や思い返しているといった、過去を連想させるネガティブな印象になります。

ちなみにこれは例で画像反転をしていますが、画像反転は基本的にやらないようにしましょう！

例として使用した写真のカメラマンは「吉野」でモデルは「優さん」です！
機材は「Nikon（ニコン） D800」だそうです。ありがとうございました！

画像のレタッチ

大体の印象について把握できたところで、扱う画像をもっと奇麗にみせたいという気持ちも高ぶってくる頃かと思います。
そんな時はレタッチしよう！いや！したい！！！！！

建物の画像なんかはWebサイトでは結構使うことが多いと思うので建物にします。適当に建物を拾ってきました！
まずはPhotoshopの「イメージ」の「色調補正」から「レベル補正」などをかけてあげてください。いい感じになったら、修正したほうがいい箇所を見つけましょう！

大体こんな感じでしょうか！では、これらを奇麗にしていきます。

全体のゆがみ

撮影すると、どうしても歪みが生じてしまいます。
カメラとレンズによるものなので仕方ないことなんですが、Photoshopには歪みを自動で補正してくれる機能があります！
その際に必要になるのが撮影した機材の情報です。撮影した日のことを忘れがちなかたはメモしておきましょう。

僕のは手動で歪みをなおしますが、機材がわかってたら作業は簡単！
「フィルタ」メニューの「レンズ補正」をクリックしてください。

こういったダイアログが出てきますので、検索条件に「カメラメーカー」「カメラモデル」「レンズモデル」を選択し、該当するレンズプロファイルを選んで「OK」を押すと歪みの補正ができます。
簡単ですね！

雨の跡・生地のシワ

今回の画像は気にならないんですが、建物によっては雨の跡やヒビなんかが入ってたりするので修復してしまいましょう！
使うツールは「スポット修復ブラシツール」です。左側のツールパネルにあります。
選択したら、上部の「コンテンツに応じる」にチェックが入っているか確認してください。入ってない場合はチェックをいれ、気になる箇所をなぞっていくだけ！

うまくいかない時は、ブラシのサイズを変えてやりましょう。
それでも少し荒いと感じたら「スポット修復ブラシツール」の下に「ブラシツール」がありますので、そこを長押ししてください。他にもいくつかツールが出てきますが、そのなかの「混合ブラシツール」を選択しましょう。

上部でにじみの量を調整できるので、そこを調整しながら荒いと思う箇所をひたすらなぞります！オラオラオラー！
修正前と後を見比べると、結構奇麗になりました。

電線

使うツールは「コンテンツに応じた移動ツール」と「コピースタンプツール」です！
まずはざっくりと出来る「コンテンツに応じた移動ツール」を選択しましょう。選択後、電線のない空の部分に円を描くようにすれば選択範囲ができます。
出来た選択範囲を電線の上に移動させれば、消えちゃいます！

これは選択された範囲のものを移動させるツールで、細かな修正には向いていません。細部をやるには「コピースタンプツール」が便利です！
コピーしたい箇所を「altキー」+「クリック」で指定し、電線をなぞってみましょう。

これを繰り返して電線を消していきます。
あまり奇麗にならないときは「ぼかしツール」や「指先ツール」を使用すると馴染むので、上手くいかない方はそちらも使いましょう！
これで気になる箇所は全て修正しました。

比較

当初の画像と修正後の画像を見比べましょう。

些細な修正ですが、結構変わるものですね！
空の色が違うのは色調補正のときに空の部分だけ「レンズフィルター」を入れた為です。

以上で「写真画像の扱い方と加工方法」は終了です。意図した印象を与え、奇麗な画像でユーザーの目を惹きましょう！

• ツイート
•