中小企業サイトで写真が用意できないときの設計——素材より先に決めること

結論から書くと、写真が用意できない案件では、フリー素材を探し始める前に「このページで写真に何を担わせたかったのか」を書き出すようにしています。役割が分かれば、その多くは文字・図・数字、あるいはスマホで撮れる小さな実物写真で置き換えられます。大きなイメージ写真を差し替えるだけでは、問題が見えにくくなるだけのことが多いと感じています。

写真は「見られる写真」と「飛ばされる写真」に分かれる

Nielsen Norman Group の Photos as Web Content（Jakob Nielsen、2010年）では、アイトラッキング調査をもとに、実在の社員のような情報を持つ写真はよく見られる一方、雰囲気づくりのための装飾的な写真は無視されやすい、と整理されています。

私の実感とも一致します。中小企業のサイトで問い合わせにつながっていたのは、トップの大きな「握手する手」ではなく、代表の顔や作業場の様子、納品物の写真でした。逆に言えば、写真が用意できない状況で困るのは「雰囲気」ではなく、実在していることの証明が薄くなる点です。そこを別の手段で補えるかどうかが設計の分かれ目になります。

写真の役割を4つに分けて置き換える

私は写真を置く予定だった場所ごとに、役割を次の4つに分けて考えます。

役割	写真がない場合の置き換え
実在の証明（誰が・どこで）	代表のひとこと＋署名、所在地の地図、創業年や拠点数などの事実
仕事内容の説明	工程を3〜5ステップに分けた図、Before/Afterの文章
成果の提示	導入事例を数字と引用で書く、納品物のスマホ写真を小さく
雰囲気・ブランド	書体と余白、1〜2色のキーカラー、図形やパターン

このうち最後の「雰囲気」だけが、写真を使わなくても比較的つくりやすい部分です。タイポグラフィと色を先に決めておけば、写真がなくても「どこの会社か」を見分けられる程度の個性は出せます。

実物写真は「小さく・揃えて」使う

「プロに撮ってもらえないなら写真はゼロ」にする必要はありません。担当者がスマホで撮った写真でも、使い方次第で十分に役に立ちます。私がお願いしているのは次の3点です。

• 撮る対象を絞る：人物より、手元・道具・納品物・作業場の一角。顔出しが難しい会社でも撮りやすいものです。
• 明るさと向きを揃える：窓際の自然光で、同じ高さ・同じ向きから撮ってもらう。枚数より揃い方のほうが印象を左右します。
• 表示サイズを小さくする：画面いっぱいのメインビジュアルではなく、カードの一部や本文中の添え物として使う。画質の粗さが目立ちにくくなります。

トリミングの比率を1つに統一し、色味だけ軽く補正すれば、それなりに「揃ったサイト」に見えます。

フリー素材を使うときの線引き

それでも素材写真を使う場面はあります。そのときは、ライセンスを案件ごとに確認します。たとえば Unsplash License は、執筆時点では商用利用が可能でクレジット表記は任意、ただし大きな加工なしでの販売や、画像を集めて類似サービスをつくることは認められていない、という内容です。ライセンスは変わることがあるので、採用時の条件を画面キャプチャで残しておくようにしています。

使い方としては、素材写真に「実在の証明」を担わせないことを決めています。社員紹介や事例のように、実在の人や場所に見える位置には置きません。背景や区切りなど、装飾として扱う場所に限定します。

装飾として置いた画像は、アクセシビリティの面でも扱いを分けます。W3C の Decorative Images では、装飾的な画像には空の alt="" を指定して支援技術に無視させる方法が示されています。装飾か情報かの判断は作り手にしかできない、とも書かれているので、私はワイヤーの段階で画像ごとに「装飾／情報」をメモしておきます。

明日から試せる一手

今つくっている（または運用している）サイトのワイヤーを開いて、写真枠ごとに「実在の証明・仕事内容・成果・雰囲気」のどれを担わせるつもりだったかを1語ずつ書き込んでみてください。「雰囲気」以外の枠は、写真がなくても文字や図で埋められるかを検討する。これだけで、撮影をお願いすべき写真の枚数と中身がかなり絞れるはずです。