カメラマンのサイトに学ぶ、写真にストーリーを与える演出

数あるサイトの中から、「この人にお願いしたい」「この商品を使ってみたい」と思わせるポイントのひとつに心情に訴えることが挙げられます。
ストーリー性を感じる写真と、説得力を増すメッセージを加え、印象に残すにはどのような方法があるのでしょうか。

今回、ウエディング・カメラマンのサイトを例に写真のクオリティだけでなくどのような要素がサイトにストーリー性を作るのか、その演出の秘密をWebデザイナーが紐解きます。
また素人目には、直すところなどなさそうな完成度ですが、プロのWebデザイナーの目線でさらにブラッシュアップするための実践的なアドバイスも伝授します。

目次

1.背景とスライドショーで写真を効果的に動かす
2.美しい配色で華やかさをプラス
3.SEO効果が狙える、マークアップを忘れずに
4.上級編：Dressを使い、画像を減らす

写真の魅力をうまく伝えるために

プロカメラマンならではの、1枚でも感動が伝わる洗練された写真に力があることは言うまでもありませんが、そこにページ構成や文章が加わると相乗効果でストーリー性を感じさせるサイトに仕上がります。

BiNDで作成したサイトを紹介しているナイスサイトより、まずはサイトをご覧ください。

▼結婚式写真を撮影している「Shinji Morita photography」さん。

結婚式に参列する人たちの表情をダイナミックに切り取ったトップページに始まり、ウェディングフォトに込めたコンセプト、ニーズに合わせたプランの提案と具体的な料金体系。
ページ構成の流れと写真の使い方がうまく、読者が読みたい情報と伝えたい効果がうまく引き立て合っています。

1.背景とスライドショーで写真を効果的に動かす

結婚式での感動的なシーンを何枚も重ねて見せることで、まるでその場に立ち会っているかのような臨場感を作り、サイトに訪れた瞬間にこの世界観に引き込むことに成功しています。

背景スライドショーやWallsなどSHiFTの使い方が効果的

スライドショーのSHiFTの使い方では、比較的動きがシンプルな「ウォールズ」を選ぶことで、写真のコンテンツに集中できるような工夫もさすがです。
SHiFTではスライド切替のスピードが調整できるので、ゆったりと見せることができています。

BiNDで設定するときのポイント

ウォールズは、ページの背景いっぱいに写真を配置することができるスライドショー。写真の力を使ってシンプルに表現したいときに向いています。

ダイナミックに写真を配置したいとき、同じような役割を担うのが、新しく追加された「ジャンボトロン」と「カルーセル」です。
どちらも動きはシンプルなので、コンテンツの中身を邪魔しません。

2.美しい配色で華やかさをプラス

書籍で言うなら章扉のような、各ページのビルボードの演出が上手い

各ページのトップは、書籍で言えば小扉のような役割を果たします。
それぞれのタイトルに使われるテクスチャー背景を、柔らかいトーンの3色で配色することで統一感を持たせています。

レッドとグリーンという補色でもコントラストが強すぎないのは、柔らかなトーンにまとめられているから。単調になりすぎず、ウェディングの華やかな印象を与えています。

3.SEO効果が狙える、マークアップを忘れずに

各ページの扉で使われているタイトルにデザインを施すため文字が画像化されているのですが、実は検索エンジンにおいて重要な見出しは、画像であるよりテキスト情報として読まれた方が有効です。

Webフォントを用いることでデザイン性もよく、まとめることができます。
その際、大切なのがその文字情報が検索エンジンにきちんと認識されること。これを専門的にはマークアップと呼びますが、ぜひ設定してみてください。

重要要素に段落のスタイルを当てて、検索エンジンを意識

SEOを意識して、タイトルにはそのサイトの特長を表すキーワードを入れましょう。
そのとき、検索エンジンにサイトを認識してもらうためにも、BiNDのエディタ画面で文字に段落スタイルを当てることが重要です。

BiNDで設定するときのポイント

このとき、デフォルトのフォントではなくWebフォントを使うとデザイン性もよくサイトの世界観の演出に一役買うことができます。
BiNDではフリーのWebフォントがサーバー契約に関係なく使えるのでぜひ活用してください。

ちなみに、日本語Webフォントは種類を抑えた方がすっきり見せられます。例えば、ジャンプ率を考えメリハリをつけたい場合には、文字の大きさを変えれば大丈夫。
見出し、本文の大きさをサイト内で統一してルール作りすると、さらに見やすくなると思います。

上級編：Dressを使い、画像を減らす

写真の邪魔をしないヘッダーの演出も

ヘッダー背景を透過させることで、写真の邪魔をしないデザイン演出も素敵なのですが、ここは画像よりもCSSの背景透過を使って表現するほうがベター。
掲載写真の多いサイトなどはページが重くなりがちなので、画像を使わず済む方法がある場合には、チャレンジしてみてもいいかもしれません。
BiNDではヘッダの透過の演出は、Dressを使って実現可能です。

BiNDで設定するときのポイント

方法は、Dressを起動して「適応範囲」を「ヘッダーエリア」にして「背景色」を選ぶ。背景色の設定で「設定する」にチェックを入れ、好きな色を設定したら「透過度」を調整します。

ヘッダーの背景の表現は、できれば透過背景画像を使わずにDressで表現すると、色を変更したい場合などそこからのカスタマイズもしやすく言うことありません。とはいえ、Dress機能は上級者向けなので、チャレンジできる方はぜひ試してみてください。

いかがでしょうか？Webサイトは完成した後も、伝えたいメッセージがどうしたら伝わるかを試行錯誤して育てて行くことに喜びと苦労があります。これからも実際のサイトを例に、Webデザイナーがサイトを美しく見せる秘密を紐解いていきますのでお楽しみに！

今回紹介したサイト以外にも、BiNDupで作られた素敵なサイトはナイスサイトでご覧いただけます。ぜひチェックしてみてくださいね。

新しいNiceSiteをチェック