あと一歩で買うのやめちゃうの、何が足りないんですか？

おしゃれな写真より、疑問が一つ減る写真です。

雰囲気はすごくいいんですよ。でもバッグに何が入るのか、わたしはそこが知りたいんです。画像って、価値を想像させるだけじゃなくて、判断の証拠でもあるので。

01 シズルおいしさは、断面と照りで伝わる

層、焼き色、溶けたバターの照り。味は写せないので、代わりに質感を写します。皿に散ったパン屑をあえて片づけないのは、たった今割ったばかりに見せるため。整いすぎた写真は、作りたてに見えません。

向いているとき：食べ物、体験そのものを売るとき。

02 透明感清潔さは、影の薄さでつくる

透明、気泡、水面の揺らぎ。影を濃くせず、全体を明るいまま撮ると「軽い」「しみこむ」印象になります。青みを少し残すのが冷たさの正体。同じジェルでも、影を濃くすると途端に重くなります。

向いているとき：スキンケア、清涼感、衛生を伝えたいとき。

03 単体迷わせないために、何も足さない

背景も小物も消して、形と色だけを見せます。雰囲気は出ませんが、「これを買うとこれが届く」がひと目で分かる。通販の一覧や比較の場面では、雰囲気より、取り違えないことのほうが役に立ちます。

向いているとき：通販の商品一覧、比較検討、価格を見せる場面。

04 使用シーン商品ではなく、使っている自分を見せる

写っているのは商品ではなく、使う人と場所と時間帯です。「朝の洗面台で、手のひらに一滴」まで見せると、使い方の説明が一行減ります。生活の温度が乗るぶん、誰の生活かを外すと途端に他人事になります。

向いているとき：使い方が想像しにくい商品、続けてほしい商品。

四枚とも「きれいな写真」ですが、減らしている情報が違います。1と2は質感を足し、3は情報を削り、4は状況を足す。何を足すかより、何を削るかで写真の役割は決まります。

選ぶときの観点は六つ。

①伝える価値、②お客さんと場面、③構図と文字を置く余白、④色と光と質感の統一、⑤権利と使用条件、⑥解像度と読み込みの重さ。モデルの顔が好みかどうかは、ここに入ってないです。

NN/gの研究では、情報を持つ画像と、ただの飾りの画像で見られ方が違うと報告されています。商品の詳細や実際のスタッフは意味を持ち得る。綺麗かどうかに加えて、理解を助けるかで選んでください。

トリミングと代替テキスト。

スマホで大事な対象が切れない構図にする。説明に必要な画像には内容を書いた代替テキストを、飾りだけなら空のaltを。図や表は、重要な情報をテキストでも読めるようにしておく。

生成画像が使える場所と、使っちゃだめな場所。

架空の案内役、概念の場面、世界観のイラストには使えます。このサイトのわたしと部屋も架空です。でも、商品の性能とか、施術の前後とか、実在するお客さんの成果を証明する写真の代わりには絶対にしないでください。あれは証拠の偽造です。

「送信」の向こうに何があるのか、教えてください。

押した先が分からないボタン、押せないです。クリック率を上げる小手先より、安心して最後まで終われる導線のほうが効きます。

LPは、広告の続きを話す場所です。

広告で言った約束と見出しがズレてると、その時点で信用を失います。便益→根拠→比較→不安の解消→条件→メインのボタン。この順を基本にして、お客さんの段階に合わせる。まだ買う準備ができてない人に購入だけ迫らない。

• ボタンには、行動か、得られる結果を具体的に書く。
• 必須入力は、その段階で本当に必要なものだけ。あとで聞けることは、あとで聞く。
• エラーは該当の欄の近くに、原因と直し方を出す。
• 完了画面で、受け付けた内容と次の連絡・操作を説明する。
• メインのボタンと補助リンクを区別して、タップとキーボード操作を邪魔しない。

ボタンの色をA/Bテストする前に、提案内容と条件が不明瞭なことのほうが、たぶん大きな障害です。クリックから完了、受注、継続まで見て、目的に合う行動が増えたかで判断してください。

で、参考サイトの色を変えたらオリジナルになりますか？

……その楽な結論に飛びつきたい気持ちは、めちゃくちゃ分かります。でもならないです。まず具体例を見てみましょう。架空の三ブランドのトップページです。並び方はそっくりなのに、受ける印象はまるで違います。

MIZU ─ スキンケア

じっくり選びたい人に向けたつくり

文字

明朝体を大きく、字間をゆったり。線が細いので、声のトーンが下がって聞こえます。

色

生成りの地に、深緑がひとつだけ。彩度を上げないことで「静か」を作っています。

写真

商品より水と光。何が入っているかより、使ったあとの感じを見せています。

余白

いちばん贅沢に使っている要素。詰めれば情報は増えますが、落ち着きは消えます。

ボタン

「商品を詳しく見る」＋「成分・使い方・価格をご案内」。買わせず、まず読ませる。

狙い：急かさないことで、信頼を取りにいっている。肌に塗るものは失敗が怖いので、勢いで押すと逆に引かれます。

KOMUGI ─ パン屋

考える前に、行きたくさせるつくり

文字

太いゴシックで大きく二行。読ませるというより、目に飛び込ませています。

色

クリーム地に焼き色の赤茶。全部が暖色で、寒色をひとつも使っていません。

写真

断面とパン屑が主役。商品説明ではなく、食欲そのものを担当しています。

余白

MIZUより詰まっています。手書き風の添え書きを隅に置いて、店の体温を出しています。

ボタン

「店舗・営業時間を見る」。買うではなく行く。ゴールが店になっています。

狙い：比較させず、その場で食べたくさせている。パンは調べてから買うものではないので、検討させるほど熱が冷めます。

SEIRI ─ 仕事のツール

不安を先に潰しにいくつくり

文字

極太ゴシックで、できることを一言。飾りをなくして、機能だけを言い切っています。

色

白に青がひとつ。画面の情報量が多いぶん、色数を増やすと迷子になります。

写真

写真ではなく管理画面そのもの。雰囲気ではなく、使っている姿を想像させています。

余白

三つの中でいちばん機械的。整列を優先し、感情の余韻は狙っていません。

ボタン

「デモ画面を見る」＋「操作イメージを確認できます」。押した先が分かるので怖くない。

狙い：本人だけでは決められない買い物を、社内で通せる形にしている。だから二番目の見出しが「導入前の疑問に、お答えします。」なんです。

三つとも、並びは同じです。

大きな見出し → 一行の補足 → ボタン → 下に三つ並ぶ枠。骨格はどれも同じで、この構成だけを真似ても、三つの印象の違いは再現できません。

違うのは、文字の太さ・色数・写真の役割・ボタンの言葉の四つだけです。そしてその四つは、見た目の好みではなく「この人は今、何を怖がっているか」から決まっています。肌に合わなかったらどうしよう（MIZU）、おいしくなかったらどうしよう（KOMUGI）、社内で反対されたらどうしよう（SEIRI）。

真似したいレイアウトを見つけたら、まずこの四つがどう決まっているかを書き出してみてください。そこを写さずに枠だけ写すと、「なんとなく似ているのに響かないページ」ができあがります。

参考を複数混ぜれば安全、という意味ではないです。

情報構造はA社、文字組みはB社、写真の役割はC社、みたいに観点を分けて参照する。特定の画面配置やコピーやイラストを丸ごと再現するんじゃなくて、理由を抜き出して自社の中身から作る。

「何％変えればセーフ」はありません。

著作権は、アイデアそのものと、具体的な創作的表現を区別します。完全一致じゃなくても表現の共通性が問題になる場合がある。写真・イラスト・文章・フォントの使用条件を個別に確認して、商標や他社との混同にも気をつけてください。

学習用の模写と、公開する制作物は分けて扱ってください。公開物では自社用の情報・画像・表現を作って、必要な利用許諾を確認する。権利の判断は個別の事情によるので、公開範囲や素材が不明なら、そこを確認してから出す。

最後の点検。「かわいい」で終わらせないやつです。

わたしの好みには合ってる。では、買う人の役には立ってる？ 最後にそこへ戻ってきます。

人に見せるなら、好みは聞かないでください。

「どう思う？」って聞くと、みんな優しいので「いいと思う」って言います。そうじゃなくて「何のページだと思う？」「自分向けだと思う？」「他と何が違うと思った？」「注文したあとどうなると思う？」「不安なところある？」と具体的に聞く。あと、何かを探してもらう課題を出すと、気づいてなかった障害が一気に出てきます。

直す順番も、戦略で決めます。

まず誤情報と操作できない不具合。次に理解と条件の不足。次に価値と証拠。細部の表現は最後です。影響が大きいものから。

あと、売上が上がっても、返品と解約と問い合わせが増えてないか見てください。お客さんに無理をさせて数字だけ作ると、あとからブランドと採算に返ってきます。だいたい、忘れた頃に。

身近な例と実務の提案は、本サイトによる説明用の仮説です。人物の発言は架空で、調査回答や利用者の証言ではありません。