ウェブサイトの写真選びは「ほんとにそれ要る?」から始めよう

高島 藍子のプロフィール画像
デザイナー 高島 藍子

1,184 view

ウェブサイトに写真を配置する時、「このページは文字ばかりだから写真を入れないと」「なんか寂しいからイメージを挿入したい」と無意識に考えていないだろうか。

デザイナーの私は先日、ウェブサイトに掲載する写真選び方についてレクチャーを受けた。その中で、写真を選ぶ時はどんな写真をどう配置するかだけではなく、そもそもの必要性から考えるとよい、と教えていただいた。かなり学びになることが多かったので、以下にまとめる。

そもそも、本当に写真が必要か考える

まず、「文字ばっかりになるから写真を入れなくちゃ」という考え方は捨てるべきだ。そういった思考で配置された写真には、コンテンツにおける役割や情報的価値が生まれない。ユーザー目線で考えると、意味のない写真を見せられるよりも、テキストで必要な情報を取得できる方がいい。無駄な情報を省くのは、ウェブサイト制作の基本だ。

また、無駄な情報を省くと、内容の更新やメンテナンスなどクライアント側での運用もしやすくなる。「写真を配置しない」という判断をしたときは、このようなポイントも踏まえてクライアントにデザインを説明できるといい。

写真がないとどうしても寂しく感じる場合は、文字のフォントやサイズ、マージンを工夫してみるのもおすすめだ。他にも色々な観点があるが、写真の配置検討には以下のような視点を取り入れたい。

写真を配置する時に検討すべき5つのポイント

  • ユーザーにとって、ここで必要な情報は何か?
  • その情報を伝えるには、テキストのみ、テキスト+写真、テキスト+図版のどれが最適か?
  • 図版を配置する場合、スケジュールや技術的に作成可能か?
  • クライアント側で運用しやすいか?
  • 文字のフォントやサイズ、マージンをもっと工夫できないか?

「良い写真」の選び方

そもそも写真が必要か検討したうえで、ようやく写真選びに移れる。

写真を探す時は、サイトの方向性にあうキーワードをいくつ挙げて検索し、直感的に良いと感じる写真を100~200枚ほど溜めていく。この時は、写真を使う場所や表現したい意味について考えなくてもいい。

集め終わったら、サイトにストーリーや世界観を組み込むイメージで、以下の観点に注意しながら写真を精査していく。

・モチーフ

他社サイトとの差別化を図るため、典型的なモチーフは避けたほうがいい。他と似たような配色、似たようなレイアウト、似たような写真を使っているサイトは、ユーザーの印象に残りにくい。写真1枚であっても、そのサイトらしさを表現できるモチーフを検討するべきだ。

・色

何色の写真か聞かれた時に明確に答えられるような、単純な色味のものが良い。明度が高くて彩度が低めだと、クオリティの高い写真に見える。

写真を実際に配置した時の全体の色味のバランス、メインカラーとの兼ね合いも忘れずにチェックする。

・写真が表す意味

「自宅の机でPCを操作している人」で「テレワーク」を表現したり、「無数の光の線が張り巡らされた地球」で「インターネット」を表現したり、写真が担う意味は明確であるべきだ。しかし、選ぶときは一目見たときの分かりやすさにこだわらなくてもいい。

「職場で働く人」を表現したい、という意図ありきで、「オフィスで雑談する人」や「会議で発言している人」など、そこに当てはまる具体的な写真を後付け的に選んでいく方法もある。

ただし、同じ意味の写真は複数枚使わないようにする。(例)PCを見ている人の写真×3枚

 おわりに~「なんとなく苦手」の克服方法~

今回のレクチャーで大きな学びだったのは、写真を選ぶ時はそもそもの必要性から考えなくてはいけない、ということだった。

私はこれまで、写真に対してなんとなく苦手意識がありつつ、どうやって克服すればいいのか分からずにいた。もやもやしているところで得たこの気づきは、自分の苦手を分解して考えるヒントになりそうだ。

デザイナーに限らず、「なんとなく苦手」に邪魔されて身動きをとれずにいる私みたいな人も多いのではないかと思う。レクチャーでそのことについても相談してみると、「苦手分野を徹底的に勉強して苦手をなくすのが、成長するための1番の近道」と教えてもらった。

とりあえず関連書籍を読んでみたり、セミナーに参加してみたり、先輩に相談してみたり。自分にできることから手をつけていけば、おのずと「なんとなく苦手」の解像度も上がっていくはずだ。克服のしかたが分からないからといって、「なんとなく苦手」を放置するのはよくない。

苦手だと感じる部分は自分の伸びしろだと考えて、前向きに取り組んでいきたい。

 

関連する日報

    仕事の速さ=頭の回転の速さ、ではない

    16,849 view

    枌谷 力のプロフィール画像
    枌谷 力 代表取締役
    理由はいいから腕を磨け

    22,355 view

    枌谷 力のプロフィール画像
    枌谷 力 代表取締役
    ベイジの社員が今年始めてみて意外とよかったこと

    791 view

    西岡 紀子のプロフィール画像
    西岡 紀子 ライター
    事業会社から転職して気づいた制作会社で働く3つの楽しさ

    1,489 view

    西岡 紀子のプロフィール画像
    西岡 紀子 ライター
    エンジニアブログを開設してわかった、成長過程のチームが情報発信に取り組むメリット

    657 view

    菅野 黎樹のプロフィール画像
    菅野 黎樹 エンジニア
上に戻る