Webサイトの成果を決めるもの

サイトの印象は3秒ほどで決まり、その大半はスマートフォンで判断されます。ここでは業種を問わず共通する基本的な考え方をまとめます。上の4サイトも同じ前提で設計しています。

1. ファーストビューで3つに答える

「誰なのか」「何を提供しているのか」「次に何をすればよいのか」。スクロールせずにこの3つが分からなければ、その先はほとんど読まれません。

• 見出しは1つ。スローガンではなく普通の言葉で
• 主要な行動は1つに絞り、スクロール前に見える位置へ
• 確認は実機で。デスクトップの縮小表示では判断しない

2. トーンは業種ごと、構成は共通

旅館には静けさと余白、SaaSには数字と根拠、クリニックには安心感とアクセス情報、建設会社には規模と実績が要ります。一方で、情報を出す順序は業種が変わっても大きくは変わりません。

1. これが何かを一行で
2. なぜ読む価値があるのか
3. 根拠。実績、数字、人の顔、資格
4. 問い合わせたあとに何が起きるのか
5. 行動導線。決断する場所に繰り返し置く

3. 日本語は欧文より余白が要る

日本語は正方形の字面で、欧文のような上下の凹凸がありません。そのぶん行間がリズムをつくります。欧文で洗練して見える狭い行間は、日本語では文字の壁になります。

• 本文は行間1.8前後、1行あたり30〜40文字
• 見出しは文節で改行する。単語の途中で折らない
• 最終行に1〜2文字だけ残さない

4. 表示速度は設計段階の判断

表示が遅いサイトの多くは画像が原因です。設計段階で形式と寸法を決めておけば追加費用は発生しませんが、公開後に直すとやり直しになります。

• WebPとJPEGを併用し、画面幅ごとに寸法を用意する
• 全画像に幅と高さを指定し、読み込み中のズレを防ぐ
• ファーストビュー外の画像は遅延読み込みにする

キービジュアルに求められる役割

キービジュアルはページ上部の飾りではありません。スクロールされる前に「自分向けの店かどうか」を判断させる役割があります。アパレル・雑貨ブランドで共通する考え方をまとめます。

1. 1商品を、複数の生活で見せる

同じバッグをニット、冬のコート、春のワンピースに合わせる。これは画面を埋めるためではありません。「本当に何度も使えるのか」という、雑貨の購入を止める最大の疑問に答えるためです。

• 角度ではなく季節を変える
• 商品の見え方はどのカットでも同一に保つ
• 色と形が正確に分かる単体カットを必ず1点入れる

2. 光を揃えることがブランドらしさになる

小さなブランドがちぐはぐに見える原因の多くは、撮影ごとに光が違うことです。あらかじめ設計しておけば追加費用なしで揃えられますし、これがブランドの完成度として最も伝わりやすい要素になります。

3. 文字は短く、急かさない

キービジュアルに割引を大きく載せると、商品そのものの価値が下がって見えます。英文の見出しに日本語のサブコピーを添える構成は落ち着いて見えます。訴求はページの下、興味を持ったあとの位置に置きます。

4. 売るのはその下のショップページ

注目を集めるのがキービジュアル、購入につなげるのはその下の一覧です。カテゴリの入口、価格の明示、商品ページを開かずに分かる在庫状況。この3つで、購入判断までのタップ数が減ります。

着画がアパレルの成否を分ける理由

お客様が知りたいのは「その服がどう見えるか」ではなく「自分が着たらどう見えるか」です。この問いへの答え方と、サイズ理由の返品を減らす方法をまとめます。

1. 3つの身長を、同じ条件で

比較が成立するのは、他の条件が変わらないときだけです。背景、光、距離、ポーズをすべて揃えます。ポーズが違うと、視線は着丈ではなく雰囲気の違いを追ってしまいます。

• 身長は各カットの上に表示する。キャプションに埋めない
• 身長に加えて着用サイズも併記する
• 色を正確に伝える単体カットを同じセットに残す

2. 身体ではなく商品の寸法を載せる

「身長155〜165cm向け」はお客様についての推測です。「着丈78cm、ウエスト平置き68cm」は商品についての事実で、手持ちの服と直接比べられます。

• サイズごとの平置き実寸
• 生地の厚みと伸縮性。同じ寸法でも着心地が変わる要素
• 意図しているシルエットを一行で

3. 迷いが生まれる場所に置く

タブの奥にあるサイズガイドを開くのは、もともと買うつもりだった方だけです。比較画像はメインの画像スライドに入れ、主要な実寸はサイズ選択の横に再掲します。

4. 情報を充実させると、最初は返品が増えることもある

それまで我慢して手元に置いていたお客様が、合わないと判断できるようになるためです。短期的には損に見えますが、長期では利益になります。見るべき指標は返品率単体ではなく再購入率です。

商品写真に求められること

商品写真は作品写真ではありません。手に取らずに購入を判断できるだけの情報を伝えることが唯一の役割です。ここでは最も難しい条件を例に、基本的な考え方をまとめます。

1. 黒い商品を黒い背景で撮る

色の差で商品と背景を分けられないため、輪郭をつくれるのは光だけです。背面からのリムライトと、上面に走らせる反射で解決します。全体を明るくして解決しようとすると、素材感が失われます。

• 背景を明るくせず、光で輪郭を分離する
• 曲面が分かるハイライトを1本だけ残す
• 露出は全体の明るさではなく質感に合わせる

2. ほとんどの商品に必要な5カット

1. 正面。一覧に出るサムネイル
2. 斜め45度。奥行きと形が分かる
3. 背面または裏側。疑問が生まれやすい箇所
4. ディテール。縫製、ロゴ、金具、留め具
5. 質感。素材を判断できる距離まで寄る

3. 1枚の出来より、揃っていること

全商品が同じ光で撮られたカタログは、1枚1枚が特別でなくても整って見えます。逆に、きれいでも条件がばらばらの写真が並ぶと素人っぽく見えます。ライティングを固定し、まとめて撮り切ります。

4. 掲載先ごとに書き出す

モール、自社EC、広告、SNSでは、比率も背景や文字に関する規定も異なります。撮影前に決めておけば1回で全掲載先をまかなえますが、後から決めると撮り直しになります。

「商品撮影もAIモデル画像も両方頼める制作会社は？」とAIアシスタントに聞いたとき、回答は段落で返り、3件ほどの参照元が示されます。その3件に入ることは、検索結果で3位に入ることとは別の目標であり、最適化の方法も異なります。

まず、4つの用語を区別する

これらの略語は曖昧に、しばしば同じ意味で使われます。分けて考えると、やるべき作業がはっきりします。

• SEO：リンクの順位付きリストで、上の位置を取ること。
• AEO：強調スニペットのような、直接的な回答の出典になること。
• GEO：生成AIが出力する文章の中で、引用・言及されること。
• AIO：従来の検索結果の上に表示される、AI生成の概要の中に現れること。

SEOの作業は依然として必要です。クロールされないページは引用もされません。そのうえで追加される作業は、自社ページの主張を、他人の文章の中に、そのままの形で、出典付きで持ち出しやすくすることです。

結論を、前置きより先に書く

日本語のビジネス文章は、前置きを3段落置いてから結論に入りがちです。ページを要約するモデルは冒頭を最も重視します。見出し直下の1文目が、主語・述語・数値・条件まで含めて完結していれば、その一文だけで引用できます。

弱い例：「納期については、さまざまな要因によって変動します。」／強い例：「商品写真は最短3営業日、Webサイトは2〜6週間で納品します。」

後者にはエンティティ、数値、単位が含まれます。周囲から切り離されても意味が壊れません。生成AIがページに対して行うのは、まさにその切り離しです。

エンティティを、一貫した表記で定義する

モデルは、ある質問に対して自社を引用するかを判断する前に、自社が何者かを判断します。その判断材料になるのは、サイト全体で繰り返される一貫した記述と、それを機械可読な形で書き直した構造化データです。

1. 正式名称、ローマ字表記、事業内容の説明を1つに統一します。表記ゆれはエンティティを分裂させます。
2. サービス名は、抽象的なコピーではなく普通の名詞で書きます。「商品写真制作」はエンティティですが、「ビジュアル体験の提供」はそうではありません。
3. Organization、Service、FAQPage、BreadcrumbList の構造化データを実装し、画面上の記述と食い違わせないようにします。
4. 誰が、どんな根拠で書いたのかを明示します。執筆者情報と日付は、信頼性の推定材料です。

切り出されても壊れない構造

生成AIは断片を扱います。長い一続きの論旨で構成されたページは切り出しに弱く、見出しごとに完結した回答が並ぶページは切り出しに強くなります。

• 見出し1つにつき質問1つ。実際に人が口にする言い回しで書きます。
• 価格、納期、仕様など、比較性のある情報は表にします。
• 数値には単位と条件を添えます。「早い」のような形容詞だけでは使われません。
• 内部リンクのテキストには遷移先の名前を書きます。「こちら」では情報になりません。

効果をどう確認するか

AI回答内での引用は、多くのチームが既に使っている計測ツールには表示されません。測定は意図的に組み立てる必要があります。

1. 実際に顧客が聞く質問を20〜50件固定し、決めた頻度で各アシスタントに投げます。
2. 出現の有無、言及の位置、説明内容が正確かどうかを記録します。
3. 指名検索と直接流入を見ます。リンクなしの言及でも、この2つは動きます。
4. 誤った説明があれば元のページを修正し、再度テストします。モデルは自社サイトの記述をそのまま繰り返す傾向があります。

できないこと

構造化をどれだけ進めても、引用は保証されません。アシスタント側の挙動は予告なく変わりますし、権威のない領域について整った記事を書いても引用はされません。GEO(AI検索最適化)は、AIが自社を正しく使える確率を上げる作業であって、掲載枠を買う作業ではありません。

現実的な向き合い方としては、人が読んでも分かりやすくなるからやる、という前提に立ち、AIによる引用は2つ目の効果として捉えるのが妥当です。

月次のSNSレポートは、多くの場合フォロワー増減から始まります。見出しとしては妥当ですが、計器としては不十分です。動きが遅く、アカウント外の要因に左右され、下がったときに取るべき行動が紐づいていません。

指標を3層に分けて置く

今週動かせるものと、最終的に評価されるものを分けます。下の層が上の層に流れ込む構造にします。

1. クリエイティブ層：保存率、視聴完了率、シェア率。1投稿単位で反応し、内容そのものの良し悪しを示します。
2. アカウント層：プロフィール遷移数、遷移からのフォロー率、リンククリック。興味が関係に変わっているかを示します。
3. 事業層：指名検索数、直接流入、SNS経由の問い合わせ・受注。

毎月3層すべてを報告します。事業層が動かないとき、その下の層が理由を説明し、さらに下の層が「次にどの投稿を変えるか」を示します。

なぜ「いいね」より保存率か

「いいね」はコストがゼロで、意味も薄い反応です。保存は「後で見返すつもりがある」という宣言で、SNS上では意図に最も近いシグナルです。検討期間のある商材ほど、保存率は後の行動と強く相関します。

1サイクルに、変更は1つ

同じ月にフォーマット、投稿時間、トーンを同時に変えると、結果が読めなくなります。変数を1つに絞り、他を固定し、期間を決めて回してから判断します。

• 1つのテストは最低2週間。投稿数が少ないアカウントはさらに長く。
• 開始前に仮説を書き留めます。後から書き換えられないようにするためです。
• 意思決定ログを残します。何を、いつ変え、何が起きたか。

使えるレポートの中身

数字を並べるだけのレポートは、分析の仕事をクライアントに戻しているのと同じです。3つの節があれば足ります。

1. 効いた施策と、そう言える根拠。
2. 効かなかった施策。曖昧にせず、そのまま書く。
3. 次サイクルで変える1点と、それが動かすはずの指標。

この方法が効かない場合

月に数回しか投稿しないアカウントでは、そもそもデータ量が足りません。その場合に必要なのは計測ではなく制作体制です。また、アルゴリズムの変更は個別のテストを飲み込みます。アカウント全体が一斉に動いたときは、内容よりも先にプラットフォーム側を疑ってください。

サイズ理由の返品は二重に高くつきます。往復の送料が発生し、「この店はサイズが小さめ」と思い込んだお客様が離れていくためです。そして多くの場合、表の数値を直しても解決しません。お客様は表を読んでいないからです。

なぜ数値表だけでは足りないのか

表が伝えるのはセンチメートルです。購入の判断に必要なのは、着たときの絵です。「着丈78cm」と「自分が着るとどこにくるか」の間には変換作業があり、その変換の精度は人によって大きく違います。

サイズ表の中央値に近いお客様は正しく変換できます。それ以外の方、つまり大多数の方は当てずっぽうで判断しています。

同じ商品を3つの身長で見せる

最も効果が大きい改善は、1つの商品を身長の異なる3名が着用した写真を、同じ条件で撮って横並びにすることです。変換作業そのものが不要になります。

• 背景、光、距離、レンズをすべて揃える
• 同じポーズにして、視線が裾の位置だけを比較できるようにする
• 身長は画像の上に明記する。キャプションの中に埋めない
• 可能であれば、身長に加えて着用サイズも併記する

モデル3名の手配が現実的でない場合、生成による着用画像が有効に働く数少ない場面です。ただし条件があります。商品そのものは実写で、変えてよいのは着る人だけです。

身体ではなく商品を測って書く

「身長155〜165cmの方に」はお客様についての推測です。「着丈78cm、ウエスト平置き68cm」は商品についての事実です。事実を載せ、お客様が手持ちの服と比べられるようにします。

迷いが生まれる場所に置く

タブやモーダルの奥にあるサイズガイドを開くのは、もともと買うつもりだった方です。離脱するお客様は、開こうと思う前に離れています。

1. 比較画像はメインの画像スライドの中に入れる
2. サイズ選択のすぐ横に、主要な実寸を再掲する
3. よく聞かれるサイズの質問は、商品説明本文の中で答える

効果を確認する

返品理由別の件数を、商品ごとに変更前後で比較します。判断には最低でも1シーズン必要です。サイズ理由の返品は購入から数週間後に発生するため、1ヶ月のデータでは誤った結論になります。

一点、注意すべきことがあります。情報を充実させると、初期には返品率が上がる場合があります。それまで我慢して手元に置いていたお客様が、合わないと判断できるようになるためです。見るべき指標は返品率単体ではなく、再購入率です。

30投稿を1本ずつつくるのは、30投稿をまとめてつくるより圧倒的に時間がかかります。誰もが知っていることです。それでも1本ずつになるのは、まとめるには事前に決めておくことが必要で、その事前決定が一度経験するまでは余計な手間に見えるためです。

2日間の前に、フォーマットを決める

フォーマットとは、毎回デザインし直さずに量産できる投稿の型です。4〜5種類あれば1ヶ月分をまかなえます。

• 商品紹介：1商品、レイアウト固定、画像と文言だけ差し替え
• 使い方・豆知識：3ステップを固定の枠で
• よくある質問：1枚目に質問、2枚目以降に回答
• 舞台裏：あえて作り込まず、スマートフォンで撮影
• お知らせ：本当に必要な日付のためだけに使う

フォーマットは一度だけ、きちんとテンプレートとして設計します。2日間の作業は「デザイン」ではなく「テンプレートを埋めること」になります。

1日目、撮影をまとめて終わらせる

セットは1つ、ライティングは1条件。その月に撮る必要のある商品をすべて撮り切ります。撮影日を消費するのはセットの組み替えです。組み替える回数を最小にします。

1. 撮影前に、オリジナル画像が必要な投稿をすべて書き出す
2. 1カットから縦・正方形・横に切り出せる画角で撮る
3. 静止画と動画は同じ流れで撮る。別日にしない
4. うまくいったカットは5枚多めに撮る。翌月の余白になる

2日目、組み立てて予約投稿まで

テンプレートが決まり、画像が揃っていれば、組み立ては機械的な作業です。キャプションは一気に書き切ります。30回に分けて書くより、1回で書いたほうが文体が揃います。

• テンプレートに流し込み、必要な比率を一括で書き出す
• キャプションを一気に書き、最後に通しで読み返す
• すべて予約投稿にし、2枠だけその月の出来事用に空けておく

この方法で失われるもの

まとめて制作する方式は、即応性を犠牲にして一貫性を得ます。予約済みの1ヶ月は、昨日起きたことに反応できません。だからこそ2枠を空けておく意味があり、本当に時事性のある投稿はこの仕組みの外に置くべきです。

また、負荷が前倒しになります。初月はテンプレート制作が加わるため重く感じます。2ヶ月目からは、同じ2日で同じ成果物が、体感で半分程度の負担で仕上がります。

商品ページを見た人は、どの数字が価格かをすぐに判断できます。機械には確実には判断できません。構造化データは、それぞれの値にラベルをつけて推測をなくします。これは価格、これは通貨、これは在庫の有無、という具合です。

実際には何を書くのか

ページのソースに書かれたJSONの塊です。閲覧者の目には触れません。書く内容は、ページ上にすでに表示されている事実の繰り返しです。この最後の一点が、最も重要なルールです。

ページ上で人が確認できない値は、構造化データに書いてはいけません。表示と食い違うデータは、賢い近道ではなく品質上の問題として扱われます。

効いてくる項目

商品ページの場合、少数の項目が大部分の役割を担います。仕様上の任意項目をすべて埋めるより、この数項目を正確にすることのほうが重要です。

色・サイズ違いでつまずく

3色4サイズのシャツは、購入対象としては12種類です。1ページに1つの構造化データしか置かなければ、その大半について価格と在庫が誤った状態になります。

1. 商品全体に1つではなく、バリエーションごとに識別子を持たせる
2. 価格が異なる場合は、単一の金額ではなく範囲で示す
3. 在庫の更新は変動時に行う。週次の一括更新にしない

AIの回答にも効く理由

「5,000円以下でXを買えるところは」という質問に答えるアシスタントは、信頼できる価格を必要とします。文章から抜き出した数字より、ラベルのついた最新の値のほうが信頼しやすいものです。正確な構造化データを持つページは使いやすく、その分だけ引用もされやすくなります。

ただし保証はありません。あくまで、自社の商品が正しく説明される確率を上げる作業です。AI側の仕様が今後どう変わるとしても、やっておいて損のない作業ではあります。

確認のしかた

• 公開前に構造化データのテストツールで検証する
• テンプレート変更後は必ず再確認する。テーマ更新で静かに壊れる
• 流入が落ちてから気づくのではなく、Search Consoleの警告を見る