Webサイトではユーザーに瞬時にメージの内容や情報を伝えるため、写真やグラフなどの図版を使用することもあります。
Webサイトに使用するための写真の選び方やトリミングのポイント、図版の種類をおさえておきましょう。
写真や図版は伝えたいことを瞬時にユーザーに伝えることが出来ます。しかし、無計画に使用するとサイトの雰囲気を壊してしまう場合もあるので注意が必要です。
写真選定のポイント
Webサイトをデザイン/作成する際には、ストックフオトサービスなどからイメージに近い写真を選定する作業が発生する場合があります。
写真は短時間でユーザーの目を惹きつけたり、Webページの内容を視覚的に伝えることが出来ます。一方で、写真の選定を誤ると違和感や誤解を生む原因にもなりかねません。
写真を選ぶ場合に気を付けたいポイントは下記の７つです。
- よく見かける写真を使わない
- 演出がかった写真は使わない
- CGを使わない
- 時代が古い写真を使わない
- ターゲットと異なる人種・国を使わない
- 全体の色味を合わせる
- フォーカスされている写真を使う
写真を選ぶ際にこのポイントを意識することで、クオリティが高く見えるサイトに仕上げることが出来ます。 下記で詳しく紹介していきます。
※これらは写真選定の基準であり、全てを必ず厳守しなければいけないというものではありません。制作するWebサイトやクライアントの意向などの状況によっても変わります。
1.よく見かける写真を使わない
ストックフォトは様々なサイトで使用されています。 検索をかけて上位に表示されるような画像を安易に利用すると、競合会社のイメージと被ってしまったり、全く意味が違う箇所に使用されていたりする可能性があります。フリーフォトは限られていため、全く同じ写真が使われているというサイトもありますね。
イメージ画像の被りは絶対に避けられるものではありませんが、日頃からよく見かける写真の利用は控えた方が無難でしょう。
2.演出がかった写真は使わない
自然なシーンを切り取ったものではなく、わざとらしくモチーフを寄せ集めたりした写真は使わないようにします。人の写真を使う場合も、力メラに向かって視線を送ったり、普段生活する上で自然にとらないようなポーズをしている写真は避けた方が良いでしょう。
こうしたイメージを多用してしまうと、サイトのイメージ全体も疑わしい印象になります。 小物にしろ、人にしろ、実在するシーンの一部を自然に切り取ったような写真をセレクトしましょう。
また、モデルとして登場する人物のクオリティもーつの判断基準です。 品質の高い写真は髪型や服装なども整えられていて、一目見た時の印象も良いものになります。
3.CGを使わない
CGによって作られたイメージ画像は、一見とても作り込まれているように見えますが、一昔前にトレンドのピークを迎えた表現です。これから作るWEBサイトのデザインの中に取り入れると、古臭くチープな印象を与えてしまう可能性があります。
作成するサイトの種類にもよりますが、基本的には使用ない方が無難です。
4.時代が古い写真を使わない
ファッション、髪型、インテリアや小物の姿形から、時代の古さを感じさせる写真は使用しません。
特に小物で電話やパソコンは年代が明らかに分かってしまいます。作成時に最新型であってもスマートフオンなどは直ぐに新作が販売されますしね。表現の対象イメージと合っているか・本当に必要かを考えて使用を決めましょう。
5.ターゲットと異なる人種・国を使わない
海外の消費者をターゲットとしない企業のビジュアルに、外国人を登場させてしまうと違和感があります。極力避けた方が良いでしょう。
また、場所が特定できる写真も、サービス内容・ターゲット層に無関係なものは使用しないようにしましょう。例えば、東京を中心としたサービスを展開している企業の場合は、右下の画像のように東京タワーが写っていても違和感はありません。しかし、国内限定サービスなのに右上のようにニューヨークの風景が入っていたらユーザーは困りますよね。
どうしても使用したいイメージビジュアルがない…という場合には、顔や人種が分からないようにトリミングして使用することもあります。
6.全体の色味を合わせる
べースデザインの配色設計に対して、まったく違う色味の写真を使うと全体のイメージがちぐはぐになってしまいます。Ulの配色時に決定した色味の印象から浮かない写真を使うようにしましょう。
例えば、下記は「ジェラートピケ」のキッズ商品のトップページです。 スライドの画像もサイトカラーに近い、淡めのトーンで統一されていますね。
https://gelatopique.com/kids_default.aspx
こちらは資生堂「インテグレート」のサイトです。
こちらは赤を基調に配色がなされています。 使用されている画像は全体的に赤みのある印象であったり、背景色をピンクにしていたりと色味を合わせていることが分かりますね。
このメインビジュアル箇所に、上図の「ジェラートピケ」のメインビジュアルが入ったところを想像してください。統一感が崩れて、バランスが悪いサイトに見えてしまうでしょう。
●写真の色のバランスを統一しましょう
写真は撮影された環境や機器の設定によって色のバランスが異なります。 セピアに近い黄色味のかかったもの、コントラストが強く青みのかかったもの、淡いもの…など色々なバリエーションがあります。
メイン画像以外の部分でも、こうした色味の違う写真を混在させてしまうと、全体像として見た場合はバランスが悪く見えてしまいます。できるだけ同じトーンの写真を選ぶか、可能な限り補正してトーンを近づけて使用しましょう。
7.フォーカスされている写真を使う
背景にボケ（レンズフレア）がある写真や、背景がボケて主役がフォー力スされている写真を使用することで比較的クオリティが高く見えます。
被写体の主役とわき役がはっきりしているので、くっきりと写っている（見せたい）部分に目線を誘導する働きもありますね。イメージの中でもこのようなメリハリがあると、メッセージが伝わりやすくなります。
写真をトリミングする際のポイント
画像の目的を明確にする
画像をトリミングする場合は、その写真を「何の目的で使用するのか」「何を表現するために使用しているのか」を考える必要があります。
そして、最も伝えたい内容を示す部分が、しっかり画像におさまるようにします。 例えば、下図の場合であれば以下のようなイメージです。
- 職場の環境面をアピールしたい→背景を広めにとる
- 職員の気持ちをアピールしたい→人にクローズアップする
単にサイトで使用するサイズに合わせることを目的としてトリミングするのではなく、写真からユーザーに伝えられるメッセージを意識しましょう。
関節部分で切らない
人物をトリミングする際には「関節部分で切らない」というセオリーがあります。 特に首で切れている状態はユーザーにも、モデルにも好まれません。 関節をずらした箇所で切り抜くようにしましょう。
ハットツールデザインさんでは、人物写真のトリミングに適した箇所を下図のようにまとめてくれています。
構図を考える
構図には王道として使われる基本パターンがあります。 構図の代表的なパターンを知っておくことで、トリミングを行ってもバランスよく、伝えたい部分に視点を誘導することが出来るようになります。
【2.デザインの法則を知ろう】で紹介した三分割法というのも構図の一つ。 それ以外にも様々な構図パターンが存在しています。
代表的なものを紹介します。
- 三分割法
- 二分割法
- 四分割構図
- トンネル構図
- シンメトリー（二分割）構図
- 日の丸構図
- 対角線構図
- 放射線構図
- 対比構図
- 三角形構図
- S字構図(アルファベット構図)
- サンドイッチ構図
その他の構図については https://fotoria.net/ja/blog/bc/photo-shoot-techniques/sc/composition/ar/16-photo-layouts/ さんの解説が分かりやすいです。
図版とは
webサイトの中では様々な図が使われますが、大きくは以下の3つに分類されます。
- 関係図
- イメージ図
- グラフ
こうした図版を入れることで、サイトの情報が見やすく整理され、ユーザーがページを離れずに内容を読んでくれる可能性が高まります。どの図版を使用するにしろ、ベースデザインの印象と合うように作成する必要があります。
では、それぞれの図版の特徴を見てみましょう。
関係図
関係図には組織図、ステップ図、フロー図などが含まれます。 物事の関係性や順番を示すものですね。
イメージ図
イメージ図は伝える対象を抽象的な形で表現します。 写真を使用する場合もあります。
グラフ
棒・折れ線・円・帯などのグラフ、ヒストグラム、レーダーチャート、散布図などがあります。
グラフの作り方(Illustrator)
グラフは色々なツールで作成することができます。 Illustratorでは数値を設定すると自動で形を生成してくれるので、今回はIllustratorを使ったグラフを作成してみましょう。最初にグラフの比率等を設定し、その後に色などをサイトに馴染むように調整していきます。
グラフの作成
●色の変更
グラフの配色にはべースデザインのUIの配色設計で定めた色を使うと無難でしょう。 べースカラー、メインカラー、アクセントカラーのうち、メインカラーを基準として考えると良いでしよう。アクセントカラーを使う場合は、特に目立たせたい項目にのみ使います。
円グラフはメインカラーが複数必要になります。 この場合はブレンドツールを使うと規則正しい色の変化を作ることができます。
生成された色を反映すると統一感を持たせることが出来ますね。 ただし、色の変化を付けすぎると元々の配色設計からかけ離れるため、注意が必要です。
◆実習：画像の挿入
前回色付けしたデザイン用ファイルに、実際にサイトで使用する画像を入れていきます。
ホーム
ファーストビューの部分は画像をそのまま使うと文字が読みにくいですよね。読みやすいよう文字色は濃いグレーに変え、不透明度60％に設定した白いオブジェクト（長方形）を重ねることにします。
文字サイズや位置を調整し、強調するために枠線を入れました。
カルーセル部分も文字の可読性を上げるため、背景色を入れて文字色をグレーに。 「おすすめヘアスタイル」との間が間延びして見えてしまうため、こちらにはベースカラー#EDEDEDを背景色に入れ、メリハリを加えました。
他の箇所はファイル名通り（番号がついているものは左上から番号順に）配置します。 配置を示していた長方形オブジェクトを、クリッピングマスクとして活用すると便利です。
カテゴリ
ホームのデザインと統一感を持たせるため、こちらも写真に不透明度60％の白を重ね、文字色・配置を変更しました。スマホ幅表示は枠をつけると余白が狭くなるので、日本語部分のフォント数を少し下げています。
今見ているページが分かるように、ナビゲーションのカレント表示をメインカラーに変更しておきます。パンくずリストの現在地も、今見ているページが分かるように太字に変えました。
写真の上に文字が乗る箇所は、ホームのカルーセルと同じデザインにしました。 スマホ版はカラム落ちさせるので、そのままです。
詳細
カテゴリの設定に合わせ、トップ画像部分のデザインを揃えます。
写真と見出しが重なる部分も、同じく不透明度60％の白を重ねました。
フォーム
カテゴリの設定に合わせ、トップ画像部分のデザインを揃えます。 予約・カレンダーボタンはメインカラーとアクセントカラーを入れました。
Map
フッターのマップ挿入箇所はグーグルマップのスクリーンショットを入れておきます。 今回はサンプルのため住所を特定していないので、適当な場所で良いです。
まとめ
一瞬でユーザーに内容を理解してもらうWebページを作るためには、イメージを伝える写真・視覚的に情報を確認できる図版を使用することも必要です。
写真や図版などはテキストよりも瞬時に内容を伝えられる反面、あやふやに使用すると誤解を招いたり、サイトのイメージを崩してしまう恐れもあります。 サイト全体のイメージやカラーを考慮し、トーン＆マナーに則ったものを作成しましょう。