士業さんのウェブサイトには、何らかの問題で困っている人、気持ちが塞いだ状態の人が訪れる可能性が高いですよね。
そのため通常、サイト全体の印象は、問題が解決した後の爽やかさ、肩の荷が下りた後のすがすがしさを感じさせる雰囲気を持たせるほうが、士業さんへの印象が良くなりウェブサイトからの反応も得やすくなります。
ウェブサイトに配置するイメージ写真で開放感を調整する
とは言っても、ウェブサイト全体をアホみたいに明るいポップ調にしてしまうと、「この事務所、アタマ大丈夫？」と訪問者に不信感を募らせる要因にもなりかねません。
そこでオススメなのが、ウェブサイトに配置する写真によって開放感を調整する方法です。ウェブサイトの制作をご依頼いただいた際、この「イメージ画像による開放感の調整」は、私も必ず注意している作業の一つです。
青空の見える写真、陽の当たっている写真の配置
具体的にどのようにイメージ画像を使ってウェブサイトに開放感・爽やかさを持たせるかですが、もっとも実践しやすいのはウェブサイトに「青空の写っている写真」「陽の当たっている写真」を配置する方法です。
青空の写った写真や陽の当たっている写真をウェブサイトに配置することで、あたかもサイトに窓があって裏側の空や光が差し込んでいる、暖かですがすがしい事務所で相談しているイメージに寄せていくことで、ウェブサイト全体が窓のある明るい部屋のような雰囲気になります。
その際、もし可能ならウェブサイトに訪問して最初に画面内に表示される範囲（ファーストビュー）に、青空の見える写真か陽の当たっている写真を配置するようにします。
メインの画像でバーンと青空の写真を使うことが難しい場合は、メイン画像の一部に被せるかたちで、ちょっと添えるように配置できないかも検討したいところです。
サイドバーに青空の街並みを配置する
そして個別のページにおいても、できるなら1箇所は青空が見えている写真や陽の当たっている写真を配置して、どのページを閲覧しているときでも多少の開放感は維持されている作りにしたいですよね。
そこで、たとえばサイドバーに事務所の案内やアクセスマップを配置しているなら、事務所ある街の街並みが青空とともに写っている写真を小さくでも配置します。
撮影しようとするとなぜか曇りだったり雨だったりすることも多いと思いますが、街並みや事務所付近の写真を載せるなら、ぜひ青空の日に行ってみてください。
これだけで、どのページを閲覧していても、ひとまずは青空の見える開放感に繋がる写真が表示されます（つまり、そのウェブサイトに窓が開いて外の景色が見えます）。また、事務所の所在地もイメージとして印象に残りやすくなるので一石二鳥です。
ただし、クリアな青空だからといって街路樹の葉がすべて落ちた冬の街並みの写真を使ってしまうと、どこか寂しい雰囲気を与えてしまうので要注意です。
スマートフォンではサイドバーが下へ回ります
士業事務所のウェブサイトを見る人の多くがスマートフォンを使うようになりました。
そしてスマートフォンで表示した場合、サイドバーの内容は本文をすべて読み終えたあと、画面のいちばん下に回ります。
つまり、サイドバーに配置した青空の写真は、本文を最後まで読んだ人にしか届きません。パソコンで見たときのように、常に視界の端にある状態にはならないということです。
スマートフォンでも開放感を維持したいなら、次のような配置になります。
- ファーストビューに置く（ここは変わらず最重要です）
- 本文の途中、長い説明が続いたあたりに1枚挟む
- お問い合わせへの導線の手前に置く
3つめは問い合わせようかどうか迷っている瞬間に、明るい写真が目に入るという配置になりますので。
写真がなくても開放感は作れる
開放感を出す方法は、写真だけではありません。意外と効果的なのが、余白の取り方です。
文字がぎっしり詰まったページは、内容が良くても息苦しく感じます。逆に、次のような調整を入れるだけで、ページの印象はずいぶん軽くなります。
- 行と行の間隔を広げる……文字サイズの1.8倍程度が目安
- 段落の間を空ける……ひとかたまりを3〜4行程度に区切る
- 左右にも余白を取る……画面の端まで文字が詰まっていると、窮屈に見えます
- 見出しの前に、しっかり空間を置く
これらは通常、制作会社側で調整する部分ですが、「なんだか読みづらい、詰まって見える」と感じたら、そのまま伝えてみてください。文章を減らさずに印象を変えられます。
配色についても同じことが言えます。濃い色を広い面積で使うと、それだけで重い印象になります。濃い色は、見出しやボタンなど狭い範囲に限定して使うほうが、全体の抜けが良くなります。
明るくしようとして読みにくくなる？
開放感を意識するあまり、陥りやすい失敗もあります。
明るい写真の上に白い文字を重ねてしまい、肝心のキャッチコピーが読めなくなっているというパターンです。
制作した側のパソコンでは、きれいに見えているかもしれません。しかし屋外でスマートフォンを見ている人、画面の明るさを落としている人、加齢によって見えづらくなっている人には、まったく読めていない可能性があります。
- 文字の下に半透明の帯を敷く
- 写真全体を少し暗くしてから文字を乗せる
- そもそも写真の上に文字を置かず、写真の下に配置する
明るさと読みやすさが衝突したときは、読みやすさを優先してください。読めないキャッチコピーは、存在しないのと同じですので。
士業事務所は相談者に高齢の方が多い業務も少なくありませんので、この点は意識しておくほうがよいでしょう。
ダークモードで見ている人もいる
スマートフォンやパソコンには、画面全体を暗い配色に切り替える「ダークモード」という設定があります。目が疲れにくいことから、常時これを使っている人は少なくありません。
多くの士業事務所のウェブサイトは、この設定に対応していません。ですので、ダークモードの端末で開いても、サイトは通常どおり白い背景で表示されます。
ここで、注意点が2つあります。
1つは、周囲の画面が暗い中で、白い背景のサイトが急に開くと、まぶしく感じられるということ。真っ白な背景をやめて、ごくわずかに色味を落とした白にするだけでも、この印象は和らぎます。
もう1つは、ブラウザやスマートフォンの機能によって、サイトの色を強制的に反転させて表示している場合があることです。この場合、せっかく調整した明るい雰囲気が、まったく別のものになって表示されます。
すべての環境に対応する必要はありませんが、自分のスマートフォンをダークモードに切り替えて、自社サイトを開いてみるのは一度やってみてもよいかもしれません。思っていた見え方と違う、ということは十分あり得ます。
その写真、季節が固定されていませんか
最後に、冬の街並みの話についてもう少しだけ。
一度配置した写真は、そのまま何年も残ります。その結果、こんな状態になっているサイトを見かけます。
- 桜の写真が、1年中トップページに出ている
- 紅葉の写真と、年末年始のお知らせが並んでいる
- 真夏の強い日差しの写真が、12月に表示されている
季節感のある写真は印象に残りやすい反面、時期がずれるとおかしな印象のウェブサイトになることもあります。
特に、「この旅行のときの写真が綺麗だからウェブサイトにも配置しておこう」といった動機があると、この罠に陥りやすいのでご注意ください。
対策としては、季節が特定されにくい写真を選んでおくのが無難です。空と建物、室内から差し込む光、抽象的な風景などであれば、いつ見ても違和感がありません。
閉塞感ではなく開放感のある事務所のイメージへ
士業事務所さんのウェブサイトは、事務作業中とか机の上とか、室内の写真ばかりが並びがちですが、それだけでウェブサイトに窓が開いて日の光が差し込んでいないと、全体としてはちょっと息苦しい雰囲気になってしまいます。
もし、いま公開中のウェブサイトに青空の写った写真、陽の光が当たっている写真がほとんど存在しないなら、一度配置を検討してみてください。士業さんは気づかずとも、訪問者には少し息苦しいサイトになっているかもしれません。
細かな部品やページ内の文章も、もちろんウェブを活用していく上で大事ですが、ウェブサイトから受ける抽象的・無意識的な印象も、意外と大事ですよ。
スマートフォンでも確認してみる
最初の1画面に、明るい部分がどれくらいあるかを見てみてください。
文字と白い背景だけで、光や空がまったく見えない状態であれば、それが訪問者の受け取る第一印象です。
そのうえで本文を最後までスクロールして、途中に一度でも明るい写真が出てくるかを確認します。出てこなければ、そのページは最初から最後まで、窓のない部屋の印象かもしれません。
