Room8 Inc.

170710 Room8投稿記事 Webデザインにおける写真のトリセツ

170710 Room8投稿記事 Webデザインにおける写真のトリセツ
こんにちは!名古屋・春日井を中心にホームページ制作を提供しているRoom8にwebデザインを学びに来ているあきです。
より分かりやすいWebページを作る際に写真をつけることは効果的ですが、取扱い次第で伝わりやすさも変わってきます!
今回は「Webデザインにおける写真のトリセツ」
として人物写真の場合のポイントを備忘録としてまとめてみます。

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

全ては写真選びから!
たとえば学生に見てもらいたいページで写真を使う際に、中高年の人物が写っていても関連性がありませんよね?
読んでほしい人とリンクした内容の写真を選びましょう。
使用する写真が適していれば、より内容を理解してもらえるし親近感もわいて最後までページを読んでもらえる率もあがります。

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

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

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

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

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

先程の写真を適正サイズに戻してみましょう。さらに2点写真を追加します。
これが例えば運動方法の紹介だとします。
適正サイズの戻しても、あいかわらずこっち見んなって思いませんか?
他の人達はこちらを向いていませんよね。ひとりだけ悪目立ちしています。
目線ひとつでこうやって ん? と気になってしまってページの閲覧を邪魔してしまうんです。
視線がこちらにある写真でも、1枚だけの写真で大きく出したり訴えかけたい意図がある場合などはとても効果的になるので使い方しだいですね!
この自転車の写真も使い方を変えれば今はネタみたいになってますが充分使える写真になりえますよ!

3.人は関節で切る

関節で切るとは?物騒な表現ですがデータ上ではおもいきりたたっ斬りましょう!
こちらも参考を出します
なんだか足の所違和感がありませんか?
試しに膝から下をスクロール等で隠してみて下さい
おそらくひっかかりが消えたかと思います。
このように人体を関節部分で切ればすっきりとした写真になります。
素材の状態によって切り取る作業をした方がよいパターンがあるわけですね。
ただし!経営者の方などの肖像写真を出す際などは肩を切るのはやめたほうがいいそうです。
商売右肩あがりとかいいますよね。
縁起を担いだりすることを大事にしているお客さんもいるので考えて切ったほうがよさそうです。
これは現役デザイナーの人に教えてもらわなければ知らなかった内容だと思いますね〜。
まだまだ紹介したいポイントはありますが今回はとりあえずここまで。
Room8では LIFE GENICプロジェクト として私のようなWeb業界を目指す人の為に現役のプロの方に教えてもらえます!
詳しくは下記リンクを参照してみてくださいね。
【「自分らしく働く」ために、WEBの世界へチャレンジしてみませんか?】
Room8では「LIFE GENICプロジェクト」として、本気でWEB業界で働きたい人を育てます。
・WEBデザイナー
・WEBエンジニア
・WEBライター
になるための実践力を現場のプロが、なんと月々1000円で教えちゃいます。
この機会に新しい自分を見つけませんか?
▼詳しくはこちら!

記事を書いた人

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

コメント( FACEBOOK)

Return Top search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status image gallery music video category tag chat quote googleplus facebook instagram twitter rss