Webデザインにおける写真のトリセツ

こんにちは!名古屋・春日井を中心にホームページ制作を提供しているRoom8にwebデザインを学びに来ているあきです。

より分かりやすいWebページを作る際に写真をつけることは効果的ですが、取扱い次第で伝わりやすさも変わってきます!
今回は「Webデザインにおける写真のトリセツ」
として人物写真の場合のポイントを備忘録としてまとめてみます。

写っている人物の選定は正しいか?

全ては写真選びから!
たとえば学生に見てもらいたいページで写真を使う際に、中高年の人物が写っていても関連性がありませんよね?

読んでほしい人とリンクした内容の写真を選びましょう。
使用する写真が適していれば、より内容を理解してもらえるし親近感もわいて最後までページを読んでもらえる率もあがります。

不快感をあたえない写真選び

せっかくターゲットを選んだ写真を見つけたのにそれが逆効果になってしまわないように注意点をいくつか紹介します。

パーソナルスペースを侵害していないか?

パーソナルスペースとはなんぞやという話ですが
分かりやすく例を出してみましょう。

思わず顔を引いてしまいますね!
画面ごしでも人の顔が近すぎるのは不快感をあたえます。
ここまでくると写真の方に意識が向いてしまい他のことが頭に入ってきませんね笑
ネタなどで意識的に使うのはアリですが、デザインするようなページにはあくまで写真は補助や効果としての役割までにとどめましょう。

目線がどこに向いているか?

先程の写真を適正サイズに戻してみましょう。さらに2点写真を追加します。

これが例えば運動方法の紹介だとします。
適正サイズの戻しても、真ん中の人ばかり気になりませんか?
他の人達はこちらを向いていませんよね。ひとりだけ悪目立ちしています。
目線ひとつでなにやってん? と気になってしまって他の写真の閲覧を邪魔してしまうんです。

訴えかけたい意図がある場合など、視線がこちらにある写真を使うことで、とても効果的になります。
要は、使い方次第ですね!

この自転車の写真も使い方を変えれば今はネタみたいになってますが充分使える写真になりえますよ!

人は関節で切らない

関節で切るとは?物騒な表現ですがデータ上ではおもいきりたたっ斬りましょう!

この写真は、プロが撮影した写真です。
違和感を感じませんよね?

どちらが自然だと感じますか?
左じゃないですか?
わかりにくくてすみません(もう少し思い切って上で切ればよかった・・・)

話を続けますが、関節で切ると少し違和感がでてきます。
なので、関節を避けて切るのが良いです。
例えば、一番わかり易いのが首です。

首で切ると生首みたいで異様な感じになってしまうので
肩の少し下の胸当たりで切ります。

クローズアップ、首の少し下
アップショット、肩の少し下
バストショット 、肘の少し上
ウエストショット、股関節の少し上
ニーショット、膝の少し上
というイメージです。

まずは、この当たりを気にしておけばいいですが、これが絶対というわけではありません。関節で切ったほうがバランスが良い場合もあります。

後は、見栄え以外にも気にする部分もあります。

例えば、経営者の方などの肖像写真を出す際などは肩を切るのはやめたほうがいいそうです。
商売右肩あがりとかいいますよね。
縁起を担いだりすることを大事にしているお客さんもいるので考えて切ったほうがよさそうです。
これは現役デザイナーの人に教えてもらわなければ知らなかった内容だと思いますね〜。

まだまだ紹介したいポイントはありますが今回はとりあえずここまで。

この記事を書いた人

あき

デザイナーの卵です。
はやく孵化したです。