Claude Codeで作ったサイト公開前に見落としがちな設定3つ

5月 26, 2026 5月 26, 2026

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Claude Codeを使って、ついにサイトが完成した。デザインも整ったし、コンテンツも書いた。「よし、あとは公開するだけだ」——そう思っていませんか？

実は、その「公開するだけ」の段階で、多くの人が見落としている設定が3つあります。これを放置したままサイトを公開してしまうと、どれだけ素晴らしいコンテンツを書いていても、検索エンジンにも、SNSでシェアされた先の読者にも、ブラウザのタブを見た人にも「素人が作ったサイト」という印象を与えてしまうのです。

私はWEBデザイナーとして、浜松市を中心に多くのクライアントのサイト制作・改善に携わってきました。その中で気づいたことがあります。Claude CodeをはじめとしたAIツールの普及によって、コーディング経験がない方でも驚くほど高品質なサイトが作れるようになった一方で、「見た目」以外の細かな設定——特にSEOや信頼性に直結する部分——が抜け落ちたまま公開されているサイトが非常に増えているのです。

具体的にどういう状況かというと、Twitterや FacebookでそのサイトのURLをシェアしたとき、殺風景なグレーの四角い画像しか表示されない。Googleで検索したとき、説明文の欄に意味不明な文字列や、ページ内の文章がそのままランダムに抜き出されて表示されている。そして、ブラウザのタブに「地球儀」のアイコンが表示されている——これだけで、多くのユーザーは無意識のうちに「このサイト、ちゃんとしていないな」と感じてしまいます。

でも安心してください。この3つの設定は、仕組みを理解すればそれほど難しくありません。むしろClaude Codeを使えば、具体的な指示を出すことで正確なコードを生成してもらうことができます。この記事では、各設定の「なぜ必要なのか」という背景から、「具体的にどう実装するか」まで、WEBデザイナー目線でわかりやすく解説していきます。

この記事を最後まで読むと、Claude Codeで作ったサイトを公開する前に確認すべき3つの設定を正しく理解し、自分のサイトに実装できるようになります。公開後に「あれ、シェアしたら変な表示になった」「ファビコンが地球儀のまま…」と慌てることがなくなります。ぜひ公開ボタンを押す前に、この記事を一通り確認してみてください。

それでは、見落とされがちな3つの設定を順番に見ていきましょう。

なぜClaude Codeで作ったサイトに設定漏れが起きやすいのか

AIはデザインと機能を優先してコードを生成する

Claude Codeは非常に優秀なツールです。「こんなデザインのサイトを作って」「お問い合わせフォームを追加して」といった指示に対して、見事なHTMLとCSSとJavaScriptを生成してくれます。しかし、AIが自動生成するコードは「見た目として機能するもの」を優先する傾向があります。

OGP画像の設定やメタディスクリプション、ファビコンといった要素は、ブラウザの画面上には表示されません。HTMLの<head>タグの中にひっそりと記述されるものです。だからこそ、Claude Codeに「サイトを作って」とだけ指示すると、これらが含まれないコードが出力されることが多いのです。

ポイント

Claude Codeに対して「SEO対策もしてほしい」「OGP設定も含めて」と明示的に伝えることで、これらの設定を含んだコードを生成してもらうことができます。指示の精度がサイトの完成度を左右します。

「見えないところ」への意識が薄くなりがち

WEBサイトを作るとき、多くの人はデザインやコンテンツに意識が集中します。それは自然なことです。しかし、プロのWEBデザイナーが必ずチェックするのは「ブラウザには表示されないけれど、検索エンジンやSNSプラットフォームが読み取る情報」です。

これはちょうど、部屋の掃除に例えると「見える場所をきれいにして、引き出しの中や床下は放置している」状態に近いです。一見きれいに見えても、プロが見れば一瞬でわかってしまう。私が浜松市でWEBデザイナーとして活動していると、完成度の高いデザインのサイトでも、ソースコードを確認すると<head>タグの中が空っぽのまま、ということが少なくありません。

「見えない設定」こそが、サイトの信頼性とSEO評価を決定づける重要な要素です。

見落とし1：OGP画像の設定（SNSシェアで表示される画像）

OGP画像とは何か：なぜ重要なのか

OGP（Open Graph Protocol）とは、FacebookやX（旧Twitter）、LINEなどのSNSでURLをシェアしたときに、サムネイル画像・タイトル・説明文をどのように表示するかを指定する仕組みです。HTMLの<head>タグ内にmetaタグとして記述します。

OGP設定がされていないサイトのURLをSNSでシェアすると、どうなるか。SNSプラットフォームはページの中から「それらしい画像」を自動で探してサムネイルにしようとします。しかし適切な画像が見つからない場合、グレーの無地の四角や、サイトロゴが引き伸ばされた不格好な画像が表示されることがほとんどです。

タイムラインに流れてくる投稿の中で、きれいなサムネイルが表示されているものと、グレーの四角が表示されているもの——どちらをクリックしたいと思うか、考えるまでもないですよね。

OGP画像の具体的な実装方法

OGP設定は<head>タグ内に以下のようなコードを記述します。Claude Codeに「OGP設定のmetaタグを追加してほしい」と伝えれば、以下のようなコードを生成してもらえます。

<!-- OGP基本設定 -->
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明文（120文字前後が理想）" />
<meta property="og:image" content="https://あなたのドメイン/ogp-image.png" />
<meta property="og:url" content="https://あなたのドメイン/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="サイト名" />

<!-- Twitter（X）Card設定 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページの説明文" />
<meta name="twitter:image" content="https://あなたのドメイン/ogp-image.png" />

OGP画像のサイズ指定

OGP画像は1200px × 630px（横長）が推奨サイズです。この比率で作成した画像をサーバーにアップロードし、絶対URL（https://から始まるURL）で指定してください。相対パスでは正しく読み込まれない場合があります。また、ファイルサイズは1MB以下に抑えることが推奨されています。

画像はCanvaやAdobe Expressなどのツールで簡単に作成できます。サイト名やキャッチコピーを入れたシンプルなデザインで十分です。SNSでシェアされたときに、ひと目でどのサイトの投稿かわかるようなデザインにしておくと、ブランディング効果もあります。

OGP画像のサイズは1200px × 630pxが推奨（最低でも600px × 315px以上）
画像のURLは必ず絶対URL（https://から始まる）で指定する
og:typeはトップページなら「website」、個別記事なら「article」を使う
設定後はFacebookのシェアデバッガーやX Card Validatorで確認する

設定が完了したら、Facebookの「シェアデバッガー」（developers.facebook.com/tools/debug/）やXの「Card Validator」を使って、実際にどう表示されるか必ず確認してください。

OGP画像はSNSでのクリック率を大きく左右します。設定するだけでシェアされたときの見た目が劇的に変わります。

見落とし2：メタディスクリプションの設定（検索結果に出る説明文）

メタディスクリプションとは何か：検索結果での第一印象を決める

GoogleやBingで検索をしたとき、タイトルの下に表示される2〜3行の説明文——これがメタディスクリプションです。HTMLの<head>タグ内にある<meta name="description">タグで設定します。

メタディスクリプションが設定されていない場合、Googleはページ本文の冒頭部分や、検索キーワードに関連する文章を自動的に抜き出して表示します。これが意図しない文章になることが多く、読者に「このページは何について書いているのか」が伝わりにくくなります。

浜松市でサイト改善の相談を受けるとき、Google Search Consoleのデータを見ると、メタディスクリプションが設定されていないサイトはクリック率（CTR）が低い傾向にあることを実感しています。検索順位が同じでも、説明文の書き方次第でクリック率は大きく変わります。

効果的なメタディスクリプションの書き方と実装

メタディスクリプションの実装はシンプルです。<head>タグ内に以下の1行を追加するだけです。

<meta name="description" content="ここにページの説明文を120〜160文字程度で書く。読者が検索結果を見てクリックしたくなるような内容にする。" />

効果的なメタディスクリプションを書くためのポイントを整理しておきましょう。

文字数は日本語で120〜160文字程度に収める（それ以上は検索結果で省略される）
ページの内容を正確に、魅力的に伝える文章にする
ターゲットとなる読者が検索しそうなキーワードを自然に含める
「〜できます」「〜がわかります」など、読者のベネフィットを示す言葉を入れる
ページごとに異なる内容を書く（同じ説明文をすべてのページに使い回さない）

Googleはメタディスクリプションを書き換えることがある

Googleは設定したメタディスクリプションをそのまま使わず、検索クエリに合わせてページ本文から文章を自動生成して表示することがあります。これはGoogleの仕様なので防ぎようがありませんが、適切なメタディスクリプションを設定することで、意図した説明文が表示される可能性が高まります。設定しないよりも設定した方が良い結果になることがほとんどです。

Claude Codeに対して「このページのメタディスクリプションを書いてほしい。ページの内容は〜で、ターゲット読者は〜です」と伝えれば、適切な説明文の案を複数提案してもらえます。そこから選んで調整するのが効率的なやり方です。

メタディスクリプションは検索結果での「広告コピー」です。クリックしたくなるような一文を意識して書くことが重要です。

見落とし3：ファビコンの設定（ブラウザタブに表示されるアイコン）

ファビコンとは何か：「地球儀アイコン」が与える印象

ファビコン（favicon）とは、ブラウザのタブや、ブックマークの一覧、スマートフォンのホーム画面に追加したときに表示される小さなアイコンのことです。サイズは通常16×16ピクセル、または32×32ピクセルの正方形です。

ファビコンが設定されていないサイトのタブには、ブラウザのデフォルトアイコンである「地球儀マーク」が表示されます。これを見た瞬間、WEB制作に詳しい人であれば「ファビコンすら設定していないサイト＝細部まで作り込まれていないサイト」という判断が即座に下されます。

私の体感ですが、浜松市の地域のビジネス主の方々でも、「なんかこのサイト地球儀が出てて怪しい気がした」という感覚を持っている方は少なくありません。言語化はできていなくても、直感的に「ちゃんとしていない」と感じてしまうのです。

信頼感や権威性を大切にするサイトであれば、ファビコンの設定は必須です。特にビジネス用途のサイト、コーポレートサイト、個人ブランディングのサイトでは、細部の作り込みが信頼に直結します。

ファビコンの作り方と実装方法

ファビコンの実装は3ステップで完了します。

ファビコン用の画像を用意する（512×512pxの正方形PNG推奨）
ファビコン生成ツール（favicon.ioやRealFaviconGeneratorなど）でICOファイルや各サイズのPNGを生成する
生成されたファイルをサーバーにアップロードし、HTMLの<head>タグ内にlinkタグを記述する

HTMLへの記述は以下のようになります。

<!-- ファビコン基本設定 -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple（iOS）向け設定 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Androidのホーム画面追加向け設定 -->
<link rel="manifest" href="/site.webmanifest" />

ファビコン生成ツールの活用

「RealFaviconGenerator（realfavicongenerator.net）」は、1枚の画像をアップロードするだけで、iOS・Android・デスクトップブラウザなど各環境向けのファビコンファイルと、<head>タグに貼り付けるコードをまとめて生成してくれる無料ツールです。生成されたファイルをサーバーのルートディレクトリにアップロードし、生成されたコードを<head>内に貼り付けるだけで完了します。Claude Codeに「このコードをheadタグに追加して」と依頼することもできます。

ファビコンに使う画像は、サイトのロゴや、ブランドカラーで作ったシンプルなアイコンが理想的です。32×32ピクセルという非常に小さなサイズで表示されるため、細かいデザインや文字は潰れてしまいます。シンプルで認識しやすいデザインを選びましょう。

ファビコンはたった1つのアイコンですが、サイトの「完成度」と「プロらしさ」を無言で伝えます。必ず設定してから公開してください。

Claude Codeを使って3つの設定を一括で実装する方法

Claude Codeへの効果的な指示の出し方

ここまで3つの設定を個別に解説してきましたが、Claude Codeを使えばこれらをまとめて実装することができます。重要なのは、具体的で詳細な指示を出すことです。

以下は、Claude Codeに対して3つの設定を一括で依頼するときの指示文の例です。

以下の条件でHTMLのheadタグ内に必要な設定を追加してください。

1. OGP設定
   - サイト名：（あなたのサイト名）
   - ページタイトル：（ページのタイトル）
   - 説明文：（120文字程度のページ説明）
   - OGP画像URL：https://（あなたのドメイン）/ogp-image.png
   - サイトURL：https://（あなたのドメイン）/
   - Twitter Cardも設定してください（summary_large_image）

2. メタディスクリプション
   - 内容：（120〜160文字の説明文）

3. ファビコン
   - favicon.ico, favicon-32x32.png, favicon-16x16.png
   - apple-touch-icon.pngの設定も含めてください
   - ファイルはサーバーのルートに置く前提で記述してください

このような形で具体的な情報を添えて指示を出すことで、Claude Codeは正確なコードを生成してくれます。

実装後の確認方法：ミスを防ぐチェックリスト

設定を実装したあと、必ず以下の方法で正しく動いているかを確認してください。確認をしないまま公開してしまい、「シェアしたら変な表示になった」という事態は避けたいところです。

OGP画像の確認：Facebookシェアデバッガー（developers.facebook.com/tools/debug/）にURLを入力して、正しく画像とタイトルが表示されるか確認する
Twitter Cardの確認：cards-dev.twitter.com/validator（現在はX Developer Portalから確認）でTwitterでのシェア表示を確認する
メタディスクリプションの確認：ブラウザの開発者ツール（F12キー）でソースコードを開き、<meta name="description">タグが正しく存在するか確認する
ファビコンの確認：ブラウザでサイトを開き、タブにサイトのアイコンが表示されているか目視確認する
Google Search Consoleの確認：サイトを登録済みであれば、URL検査ツールでGoogleがページをどのように認識しているか確認する

設定したら必ず各ツールで動作確認をしてください。コードに1文字でもミスがあると正しく機能しないことがあります。

WEBデザイナーが実際に経験したビフォーアフター事例

浜松市の飲食店サイトで起きた実際の問題

浜松市内の飲食店の方から「サイトを作ったけど、Instagramでシェアしたら変な画像が表示された」という相談を受けたことがあります。確認してみると、OGP画像が設定されておらず、SNSが自動で取得した画像がお世辞にも見栄えが良いとはいえないものでした。

修正したのはHTMLの<head>タグ内にOGP関連のmetaタグを10行ほど追加するだけでしたが、その後のInstagramでのシェア表示は劇的に変わりました。お店の雰囲気が伝わる写真が大きく表示されるようになり、投稿を見た方からの問い合わせが増えたと喜んでいただけました。

これだけのことで変わるのか、と驚く方も多いのですが、正直そういう小さな設定の積み重ねがWEBサイトの成果を左右します。

AIで作ったサイトこそ「仕上げ」が差を生む

Claude Codeに代表されるAIツールは、サイト制作の民主化を加速させています。以前は専門的な知識が必要だったHTMLやCSSの記述が、自然言語の指示だけで実現できるようになりました。これは素晴らしいことです。

しかし裏を返せば、見た目や機能面での差別化が難しくなってきているということでもあります。AIを使えば誰でも似たようなデザインのサイトが作れる時代に、差をつけるのは「見えない部分の仕上げ」です。

OGP設定をして、SNSでシェアされたときにきれいな画像が出る。メタディスクリプションを書いて、検索結果で読者の目を引く説明文が表示される。ファビコンを設定して、ブラウザのタブを見たとき「ちゃんとしたサイト」という印象を与える。これらはすべて、AIが自動では補ってくれない「人間が意図を持って設定する部分」です。

WEBデザイナーとして、AI時代だからこそ、こういった細部への意識が重要になると感じています。

AIで作ったサイトの「仕上げ」こそが、競合との差をつける最後の一手です。

まとめ

Claude Codeを使ってサイトを作った後、公開前に確認してほしい3つの設定をおさらいしましょう。

OGP画像の設定：SNSでURLをシェアしたとき、適切なサムネイル画像・タイトル・説明文が表示されるようにする。1200×630pxの画像を用意し、絶対URLで指定する。
メタディスクリプションの設定：検索結果に表示される説明文を120〜160文字で書く。読者がクリックしたくなるような、ベネフィットが伝わる文章にする。
ファビコンの設定：ブラウザのタブに自分のサイトのアイコンを表示させる。地球儀アイコンのままでは「素人サイト」の印象を与えてしまう。

これら3つは、どれも難しい技術ではありません。しかし設定されているかどうかで、サイトの信頼感・検索結果でのクリック率・SNSでの拡散効果が大きく変わります。

Claude Codeに具体的な指示を出せば、正確なコードを生成してもらえます。「OGP設定・メタディスクリプション・ファビコンをまとめて設定してほしい」と依頼し、生成されたコードをHTMLの<head>タグ内に追加するだけです。実装後は必ず各確認ツールで動作を確認してから公開してください。

公開ボタンを押す前のほんの10〜15分の作業で、サイトの完成度は大きく変わります。ぜひこの記事を参考に、3つの設定を済ませてから自信を持って公開してください。