メタタグ重複の直し方は?SEOで損しない基本対処を解説

[PR]

ウェブサイト運営中に「似たようなタイトルや説明文が複数ページに設定されている」「SEOプラグインとテーマが両方メタタグを出力して重複している」といった問題に出くわしたことはありませんか。これらは検索順位やクリック率に悪影響を及ぼします。本記事では“メタタグ 重複 直し方”をキーワードに、重複が起きる原因、簡単な発見方法、対策手順を詳しく説明し、Webデザイン/プログラミングに詳しい人でも満足できる内容をお届けします。

メタタグ 重複 直し方の基本理解

まず「メタタグ 重複 直し方」を実践するには、重複が何を指すかを明確にすることが大事です。タイトルタグ(title)やメタディスクリプション(description)がどのように検索結果やクリック率に影響するかを理解します。検索エンジンでは重複するメタタグを識別した際、どちらか一方を無視したり、どちらも使わない可能性もあるためです。信頼性が高いSEO調査では、ウェブサイトの大多数がメタディスクリプションを“欠如”または“重複”しており、最適化が不十分であることが指摘されています。特に商品ページやカテゴリーページなど、テンプレートでまとめられる部分で重複が発生しがちです。(検索エンジンの分析より)

メタタグの定義と役割

メタタグとはHTMLの内にあるタグで、検索エンジンやソーシャルメディアにページ内容を伝える重要な要素です。主にタイトルタグ・ディスクリプション・canonical・robotsなどが含まれます。タイトルは検索結果の見出しとしてユーザーの目を引き、ディスクリプションは検索結果での概要表示としてクリック率に影響を与えます。canonicalタグでは正規ページを指定し、重複コンテンツの問題を緩和します。

重複メタタグの種類と影響

重複とは主に以下のようなケースを指します。複数のページで同じタイトルやディスクリプションが使われている/同一ページ内でtitleタグやdescriptionタグが複数ある/テンプレートによって似た内容が自動で生成されているなどです。これらが検索エンジンのクロール効率を下げたり、クリック率の低下や関連性の低下、検索結果での順位不利につながることがあります。

なぜ「重複メタタグ」が検索結果で問題になるのか

重複メタタグによって検索エンジンがどのページをランキング対象とするか迷い、どちらのページも意図したキーワードで上位表示できなくなる可能性があります。またユーザーにとっては検索結果が不明瞭になるため、クリック率(CTR)が下がります。更にディスクリプションが自動で置き換えられることもあり、思い通りのメッセージが伝わらなくなる危険もあります。

重複メタタグを検出する具体的手順

直し方を始める前に、「重複」がどこで発生しているかを正しく把握しないと対策が的外れになります。検出には手動とツールの両方を活用します。手動ではソースコードを確認し、同一のタグやタグが複数存在していないか見ます。ツールによる監査ではSEO監査ツールやサイトクロールツールが便利です。重複が多い大規模サイトでは自動化も検討したいところです。</p> <h3><span id="HTML">手動でHTMLソースを確認するコツ</span></h3> <p>まずブラウザで該当ページを開き、右クリックしてページソースを表示します。<title>タグやタグを検索し、これらが重複していないかを見ます。またブラウザの開発者ツールでLive DOMをチェックして、JavaScriptなどで後から追加されて重複してしまっていないかを確認します。見つかった重複タグはどのテンプレートやプラグインが出力したかを特定するための手がかりになります。</p> <h3><span id="SEO">SEOツールを使った検査方法</span></h3> <p>Screaming Frog や Ahrefs や Sitebulb、それにCMS内部のサイト監査機能を使うと、多数のページをクロールして「重複タイトル」「重複ディスクリプション」があるページを一覧表示できます。サイト全体をスキャンして、重複発生率を把握することができます。またモバイル表示や文字数の制限の問題も併せて確認することが望ましいです。</p> <h3><span id="i-6">キーページ優先で問題を特定する戦略</span></h3> <p>サイトが大きい場合は、まずトラフィック量が多いページ、売上に直結するページなど「重要なページ」から手をつけたほうが効率的です。優先度の高いページで重複があるかを確認し、修正することで最も大きな効果が期待できます。次にカテゴリーページ、タグページ、フィルターページといったテンプレート生成されやすい場所を確認します。</p> <h2><span id="WordPress">WordPressでメタタグの重複を直す具体的対策</span></h2> <p>多くのサイトではWordPressを使っており、テーマやプラグインの設定ミスから重複が発生します。ここではWordPress環境を前提とした直し方を中心に解説します。テーマ内でのヘッダー設定とプラグインの設定の二重出力を防ぐこと、canonical や noindex 指定、テンプレートの動的変数化などを組み込む基本対策を押さえます。</p> <h3><span id="i-7">テーマとプラグインの出力を整理する</span></h3> <p>テーマによっては header.php や functions.php に<title>やメタディスクリプションをハードコードで出していることがあります。さらに SEO プラグインも同じメタタグを出力してしまえば重複が発生します。対策として、テーマの設定でその出力を無効にするか、プラグイン側で制御する設定を確認してください。また子テーマを使ってカスタマイズしている場合、どのレベルでタグが生成されているかを把握することが重要です。</p> <h3><span id="canonicalnoindex">canonicalタグ・noindex設定で重複を制御する</span></h3> <p>類似のページやフィルターページ、パラメータ付きURLなどで内容がほぼ同じページが複数ある場合、canonicalタグを使ってどれが正規のページかを検索エンジンに伝えます。必要に応じて重複しがちなページを noindex に設定することもよいです。索引対象外とするがリンクはたどらせる設定にすることで、重複によるペナルティや混乱を避けられます。</p> <h3><span id="i-8">テンプレート変数を使ってメタタグを動的に生成する</span></h3> <p>商品や投稿カテゴリなど複数ページで似た構造のページには、テンプレート変数(投稿タイトル、カテゴリー名、商品属性など)を使ってタイトルやディスクリプションを生成する方法が有効です。これにより“各ページ固有の情報”をメタタグに含めることができ、重複を大幅に減らせます。SEOプラグインでは通常このような変数をサポートしています。</p> <h2><span id="i-9">重複メタタグを修正した後の確認と運用のコツ</span></h2> <p>重複を直したら、それで終わらせず確認と継続的な運用が不可欠です。変更が検索エンジンに認識されるまでには時間がかかる場合があります。また今後どのように重複が生じるか監視し、再発を防ぐ仕組みを作っておくことが成功の鍵です。</p> <h3><span id="i-10">変更をインデックスさせる方法</span></h3> <p>修正したページを検索エンジンに再クロールさせるには、サイトマップの更新、Search Consoleなどで URL を提出するなどの方法があります。canonical タグが変更された場合はそれを確認し、不要になったタグの削除後の挙動もチェックします。加えて、ページキャッシュをクリアし、CDN やキャッシュプラグインが古い meta 出力を保存していないかも検証してください。</p> <h3><span id="i-11">運用ルールとチェックリストの策定</span></h3> <p>コンテンツ制作者や開発チーム向けに、公開前にタイトルとディスクリプションの重複がないかを確認するチェックリストを設けます。重複が起きやすいカテゴリーページやタグページに特別な注意を払い、テンプレートの更新時には必ず確認を行う習慣をつけることが肝心です。また SEO プラグインの設定を定期的に見直し、最新版の仕様に沿って運用します。</p> <h3><span id="i-12">定期監査とツールによるモニタリング</span></h3> <p>SEO監査ツールやサイトクロールツールを定期的に使って、重複メタタグの発生を検出します。重要なのは数を追うことではなく、重複がどのページで、どの原因で発生しているかを把握し、改善策を継続的に実行することです。モバイル表示や文字数の規定も併せてチェックすることで、検索結果の表示が望ましい形になるように保てます。</p> <h2><span id="JSSPA">高度な対策:動的サイト・JS/SPA対応・大規模サイトでの重複防止</span></h2> <p>複雑なテンプレート構造、JavaScript によるクライアントサイドでのメタタグ操作、SPA(シングルページアプリ)などの構成では重複が起こりやすく、検出も難しいです。こうした環境では設計段階での制御と最小化が有効です。キャッシュ構造やレンダリングパイプラインを調整し、メタタグ出力を集中させることがパフォーマンスと SEO の両面で望ましいです。</p> <h3><span id="i-13">サーバーサイドレンダリングとクライアントサイド挙動の整合性</span></h3> <p>SPA や動的レンダリングでは初期 HTML に meta タグを含め、JavaScript の操作で同じタグを追加しないようにします。サーバーサイドレンダリングで canonical や title、description を正しく出力し、それを JavaScript 層で上書きする場合のみ制御された方法で行います。重複を自動的に検出して防ぐ仕組みをコードに組み込むことも有効です。</p> <h3><span id="i-14">大規模サイトでのテンプレート統制とガバナンス</span></h3> <p>ページ数やコンテンツが多いサイトではテンプレートが複数存在し、重複発生源が多岐にわたります。それぞれのテンプレートがどうメタタグを生成するかを文書化し、所有者を明確化します。開発者・SEO担当者間でテンプレートの変更時レビューを設け、重複を防ぐ基準を守ることが信頼性の高いメタタグ運用につながります。</p> <h3><span id="JavaScript">JavaScript/クライアントサイドによる重複メタタグの防止</span></h3> <p>クライアントサイドで meta タグを操作するライブラリやフレームワークを使う際には、タグが既に存在しないかチェックしてから追加するようコードを書くことが望ましいです。例えば一意の key 属性を使った重複防止や、タグの発行元を制御して重複を回避する設計が必須です。</p> <h2><span id="i-15">まとめ</span></h2> <p>重複するメタタグは検索エンジンにとってページの関連性を曖昧にし、ユーザーにとっても検索結果がわかりにくくなる要因です。ページごとに固有の title タグと meta description を設定し、canonical や noindex で不必要なページを制御し、テンプレート変数で動的生成することで重複を減らせます。WordPress においてはテーマとプラグインの出力を整理し、変更後の確認と運用ルールの整備が効果的です。</p> <p>SPA や大規模サイトではサーバーサイド/クライアントサイドの整合性、テンプレートガバナンスが特に重要です。重複を検知するツールを定期的に使い、重要ページ優先でメタタグを見直す運用を構築すれば、SEO的な損失を回避できます。自社サイトのヘッダーコードとテンプレート出力を一度洗い直すところから始めてみてください。</p> </div> <div id="next_prev_post"> <div class="item prev_post clearfix"> <a class="animate_background" href="https://designsrc.jp/archives/302"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="title"><span>Figmaのページ構成例を紹介!整理しやすく迷わない作り方</span></p> <p class="nav">前の記事</p> </div> </a> </div> </div> </article><!-- END #article --> <div id="related_post"> <h2 class="design_headline1 rich_font"><span>関連記事</span></h2> <div class="post_list"> <article class="item"> <a class="animate_background" href="https://designsrc.jp/archives/206"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <h3 class="title rich_font_1"><span>OGPタグを自分で作る方法は?基本の書き方から設定手順まで解説</span></h3> </a> </article> <article class="item"> <a class="animate_background" href="https://designsrc.jp/archives/136"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <h3 class="title rich_font_1"><span>FAQの構造化データの例を解説!実装前に知りたい基本と注意点</span></h3> </a> </article> <article class="item"> <a class="animate_background" href="https://designsrc.jp/archives/293"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <h3 class="title rich_font_1"><span>パンくずリストの表示の仕組みとは?役割と設置の基本を解説</span></h3> </a> </article> <article class="item"> <a class="animate_background" href="https://designsrc.jp/archives/195"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <h3 class="title rich_font_1"><span>WordPressでOGP画像を設定するには?表示崩れを防ぐコツまで解説</span></h3> </a> </article> <article class="item"> <a class="animate_background" href="https://designsrc.jp/archives/248"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <h3 class="title rich_font_1"><span>滞在時間を伸ばす記事構成の作り方は?最後まで読まれる流れを解説</span></h3> </a> </article> <article class="item"> <a class="animate_background" href="https://designsrc.jp/archives/224"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <h3 class="title rich_font_1"><span>サブドメインを追加する手順は?初めてでも迷わない設定の流れを解説</span></h3> </a> </article> </div><!-- END .post_list --> </div><!-- END #related_post --> <div id="bottom_post_list"> <h2 class="design_headline1 rich_font">特集記事</h2> <div class="bottom_post_list"> <div class="item"> <a class="category cat_id15" href="https://designsrc.jp/archives/category/website-management">Web運用</a> <a class="link animate_background" href="https://designsrc.jp/archives/303"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-23T21:29:13+09:00">2026.05.23</time></p> <h3 class="title rich_font_1"><span>メタタグ重複の直し方は?SEOで損しない基本対処を解説</span></h3> </div> </a> </div> <div class="item"> <a class="category cat_id11" href="https://designsrc.jp/archives/category/figma">Figma</a> <a class="link animate_background" href="https://designsrc.jp/archives/302"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-23T13:10:21+09:00">2026.05.23</time></p> <h3 class="title rich_font_1"><span>Figmaのページ構成例を紹介!整理しやすく迷わない作り方</span></h3> </div> </a> </div> <div class="item"> <a class="category cat_id14" href="https://designsrc.jp/archives/category/coding">コーディング</a> <a class="link animate_background" href="https://designsrc.jp/archives/301"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-23T04:53:45+09:00">2026.05.23</time></p> <h3 class="title rich_font_1"><span>フォーム送信でpreventDefaultの使い方は?動きがわかる入門解説</span></h3> </div> </a> </div> <div class="item"> <a class="category cat_id16" href="https://designsrc.jp/archives/category/using-ai">AI活用</a> <a class="link animate_background" href="https://designsrc.jp/archives/300"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-22T20:32:45+09:00">2026.05.22</time></p> <h3 class="title rich_font_1"><span>AIで競合分析のやり方を解説!効率よく差を見つける手順</span></h3> </div> </a> </div> <div class="item"> <a class="category cat_id14" href="https://designsrc.jp/archives/category/coding">コーディング</a> <a class="link animate_background" href="https://designsrc.jp/archives/299"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-22T12:28:28+09:00">2026.05.22</time></p> <h3 class="title rich_font_1"><span>JavaScriptでURLパラメータ取得する方法!基本から実装例まで解説</span></h3> </div> </a> </div> <div class="item"> <a class="category cat_id8" href="https://designsrc.jp/archives/category/web-design">Webデザイン</a> <a class="link animate_background" href="https://designsrc.jp/archives/298"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-22T04:22:06+09:00">2026.05.22</time></p> <h3 class="title rich_font_1"><span>lit.link(リットリンク)の作り方でおしゃれ初心者向け!見映えよく整えるコツ</span></h3> </div> </a> </div> </div><!-- END .bottom_post_list --> </div><!-- END #bottom_post_list --> <div id="comments"> <h3 class="design_headline1 rich_font">コメント</h3> <div id="comment_header" class="clearfix"> <ul id="comment_tab" class="clearfix"> <li class="active"><a href="#pinglist_wrap">0 トラックバック</a></li> </ul> </div> <div id="pinglist_wrap" class="tab_contents" > <div id="trackback_url_area"> <label for="trackback_url">トラックバックURL</label> <input type="text" name="trackback_url" id="trackback_url" size="60" value="https://designsrc.jp/archives/303/trackback" readonly="readonly" onfocus="this.select()" /> </div> <div class="comment_message"> <p>この記事へのトラックバックはありません。</p> </div> </div><!-- END #pinglist_wrap --> </div><!-- END #comments --> </div><!-- END #main_col --> <div id="side_col"> <div class="widget_content clearfix styled_post_list1_widget" id="styled_post_list1_widget-2"> <div class="widget_headline"><span>最近の記事</span></div><ol class="styled_post_list1"> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/303" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>メタタグ重複の直し方は?SEOで損しない基本対処を解説</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-23T21:29:13+09:00">2026.05.23</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/302" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>Figmaのページ構成例を紹介!整理しやすく迷わない作り方</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-23T13:10:21+09:00">2026.05.23</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/301" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>フォーム送信でpreventDefaultの使い方は?動きがわかる入門解説</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-23T04:53:45+09:00">2026.05.23</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/300" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>AIで競合分析のやり方を解説!効率よく差を見つける手順</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-22T20:32:45+09:00">2026.05.22</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/299" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>JavaScriptでURLパラメータ取得する方法!基本から実装例まで解説</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-22T12:28:28+09:00">2026.05.22</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/298" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>lit.link(リットリンク)の作り方でおしゃれ初心者向け!見映えよく整えるコツ</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-22T04:22:06+09:00">2026.05.22</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/297" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>Webデザインとグラフィックデザインを両方学ぶならどっち?後悔しない選び方</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-21T20:09:36+09:00">2026.05.21</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/296" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>ファーストビューの文字量目安は?伝わる情報量の考え方</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-21T12:05:37+09:00">2026.05.21</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/295" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>スクリーンリーダーの確認方法は?今すぐできる基本チェック</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-21T04:04:33+09:00">2026.05.21</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/294" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>AIで学習計画の作り方を解説!挫折しにくい進め方のコツ</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-20T19:57:03+09:00">2026.05.20</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/293" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>パンくずリストの表示の仕組みとは?役割と設置の基本を解説</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-20T11:56:30+09:00">2026.05.20</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/292" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>プレースホルダーの使い方と注意は?入力しやすい設計の基本</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-20T03:55:28+09:00">2026.05.20</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/291" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>Webデザインの写真レイアウト術!視線を集める配置のコツ</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-19T19:52:26+09:00">2026.05.19</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/290" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>写真の配置デザインで差がつく!見やすくおしゃれに見せる考え方</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-19T11:50:40+09:00">2026.05.19</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/289" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>Webデザイナーの男女比は?業界のリアルと向いている人を解説</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-18T19:36:28+09:00">2026.05.18</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/288" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>AIでCSSを書かせるコツは?崩れにくい指示の出し方を解説</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-18T11:35:29+09:00">2026.05.18</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/287" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>Figmaのスタイルと変数の使い方は?管理しやすい設計の基本</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-18T03:30:23+09:00">2026.05.18</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/286" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>Illustrator(イラレ)でフレームの作り方を解説!装飾枠を手軽に作るコツ</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-17T19:26:47+09:00">2026.05.17</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/285" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>localhostが動かない原因は?まず確認したい切り分けポイント</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-17T11:23:42+09:00">2026.05.17</time></p> </div> </div> </a> </li> <li> <a class="clearfix animate_background" href="https://designsrc.jp/archives/284" style="background:none;"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image1.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <div class="title_area_inner"> <p class="title"><span>Figmaで角丸を個別設定する方法は?思い通りに整えるコツ</span></p> <p class="date"><time class="entry-date updated" datetime="2026-05-17T03:07:27+09:00">2026.05.17</time></p> </div> </div> </a> </li> </ol> </div> <div class="widget_content clearfix category_list_widget" id="category_list_widget-2"> <div class="widget_headline"><span>カテゴリー</span></div><ul> <li class="cat-item cat-item-16"><a href="https://designsrc.jp/archives/category/using-ai" class="clearfix"><span class="title">AI活用</span><span class="count">10</span></a> </li> <li class="cat-item cat-item-11"><a href="https://designsrc.jp/archives/category/figma" class="clearfix"><span class="title">Figma</span><span class="count">16</span></a> </li> <li class="cat-item cat-item-12"><a href="https://designsrc.jp/archives/category/illustrator" class="clearfix"><span class="title">Illustrator</span><span class="count">20</span></a> </li> <li class="cat-item cat-item-17"><a href="https://designsrc.jp/archives/category/pc-skills" class="clearfix"><span class="title">PC活用</span><span class="count">14</span></a> </li> <li class="cat-item cat-item-13"><a href="https://designsrc.jp/archives/category/photoshop" class="clearfix"><span class="title">Photoshop</span><span class="count">20</span></a> </li> <li class="cat-item cat-item-8"><a href="https://designsrc.jp/archives/category/web-design" class="clearfix"><span class="title">Webデザイン</span><span class="count">44</span></a> </li> <li class="cat-item cat-item-15"><a href="https://designsrc.jp/archives/category/website-management" class="clearfix"><span class="title">Web運用</span><span class="count">20</span></a> </li> <li class="cat-item cat-item-14"><a href="https://designsrc.jp/archives/category/coding" class="clearfix"><span class="title">コーディング</span><span class="count">41</span></a> </li> <li class="cat-item cat-item-9"><a href="https://designsrc.jp/archives/category/typography" class="clearfix"><span class="title">タイポグラフィ</span><span class="count">13</span></a> </li> <li class="cat-item cat-item-10"><a href="https://designsrc.jp/archives/category/color-schemes" class="clearfix"><span class="title">配色</span><span class="count">7</span></a> </li> </ul> </div> <div class="widget_content clearfix tcdw_archive_list_widget" id="tcdw_archive_list_widget-2"> <div class="p-dropdown"> <div class="p-dropdown__title">アーカイブ</div> <ul class="p-dropdown__list"> <li><a href='https://designsrc.jp/archives/date/2026/05'>2026年5月</a></li> <li><a href='https://designsrc.jp/archives/date/2026/04'>2026年4月</a></li> <li><a href='https://designsrc.jp/archives/date/2026/03'>2026年3月</a></li> </ul> </div> </div> </div> </div><!-- END #main_contents --> <div id="footer_carousel"> <div class="post_list"> <div class="item"> <a class="link animate_background" href="https://designsrc.jp/archives/303"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-23T21:29:13+09:00">2026.05.23</time></p> <div class="title rich_font_1"><span>メタタグ重複の直し方は?SEOで損しない基本対処を解説</span></div> </div> </a> </div> <div class="item"> <a class="link animate_background" href="https://designsrc.jp/archives/302"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-23T13:10:21+09:00">2026.05.23</time></p> <div class="title rich_font_1"><span>Figmaのページ構成例を紹介!整理しやすく迷わない作り方</span></div> </div> </a> </div> <div class="item"> <a class="link animate_background" href="https://designsrc.jp/archives/301"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-23T04:53:45+09:00">2026.05.23</time></p> <div class="title rich_font_1"><span>フォーム送信でpreventDefaultの使い方は?動きがわかる入門解説</span></div> </div> </a> </div> <div class="item"> <a class="link animate_background" href="https://designsrc.jp/archives/300"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-22T20:32:45+09:00">2026.05.22</time></p> <div class="title rich_font_1"><span>AIで競合分析のやり方を解説!効率よく差を見つける手順</span></div> </div> </a> </div> <div class="item"> <a class="link animate_background" href="https://designsrc.jp/archives/299"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-22T12:28:28+09:00">2026.05.22</time></p> <div class="title rich_font_1"><span>JavaScriptでURLパラメータ取得する方法!基本から実装例まで解説</span></div> </div> </a> </div> <div class="item"> <a class="link animate_background" href="https://designsrc.jp/archives/298"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-22T04:22:06+09:00">2026.05.22</time></p> <div class="title rich_font_1"><span>lit.link(リットリンク)の作り方でおしゃれ初心者向け!見映えよく整えるコツ</span></div> </div> </a> </div> <div class="item"> <a class="link animate_background" href="https://designsrc.jp/archives/297"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-21T20:09:36+09:00">2026.05.21</time></p> <div class="title rich_font_1"><span>Webデザインとグラフィックデザインを両方学ぶならどっち?後悔しない選び方</span></div> </div> </a> </div> <div class="item"> <a class="link animate_background" href="https://designsrc.jp/archives/296"> <div class="image_wrap"> <div class="image" style="background:url(https://designsrc.jp/wp-content/themes/muum_tcd085/img/common/no_image2.gif) no-repeat center center; background-size:cover;"></div> </div> <div class="title_area"> <p class="date"><time class="entry-date updated" datetime="2026-05-21T12:05:37+09:00">2026.05.21</time></p> <div class="title rich_font_1"><span>ファーストビューの文字量目安は?伝わる情報量の考え方</span></div> </div> </a> </div> </div><!-- END .post_list --> <div class="nav"> <div class="carousel_arrow next_item"></div> <div class="carousel_arrow prev_item"></div> </div> </div><!-- END #footer_carousel --> <footer id="footer"> <div id="footer_widget"> <div id="footer_widget_inner" class="clearfix"> <div class="widget_text widget_content clearfix widget_custom_html" id="custom_html-2"> <div class="textwidget custom-html-widget"></div></div> </div> </div> <div id="footer_menu"> <ul id="menu-%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc" class="menu"><li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92 "><a href="https://designsrc.jp/privacy">プライバシーポリシー</a></li> <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93 "><a href="https://designsrc.jp/contact">コンタクト</a></li> </ul> </div> <div id="footer_bottom"> <div id="footer_bottom_inner"> <ul id="footer_sns" class="footer_sns clearfix"> <li class="rss"><a href="https://designsrc.jp/feed" rel="nofollow noopener" target="_blank" title="RSS"><span>RSS</span></a></li> </ul> <p id="copyright">copyright all rights reserved</p> </div><!-- END #footer_bottom_inner --> </div><!-- END #footer_bottom --> </footer> <div id="return_top"> <a href="#body"><span>TOP</span></a> </div> </div><!-- #container --> <div id="drawer_menu"> <div id="close_menu"><a href="#">CLOSE</a></div> <nav> <ul id="mobile_menu" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13 "><a href="/">トップページ</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34 "><a href="/ranking">ランキング</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30 "><a href="/list">記事一覧</a></li> </ul> </nav> <div id="footer_search"> <form role="search" method="get" id="footer_searchform" action="https://designsrc.jp"> <div class="input_area"><input type="text" value="" id="footer_search_input" name="s" autocomplete="off"></div> <div class="button"><label for="footer_search_button"></label><input type="submit" id="footer_search_button" value=""></div> </form> </div> <div id="mobile_banner"> </div><!-- END #footer_mobile_banner --> </div> <script> </script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <!-- facebook share button code --> <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script> <script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/muum_tcd085/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" src="https://designsrc.jp/wp-includes/js/comment-reply.min.js?ver=6.9.4" id="comment-reply-js" async="async" data-wp-strategy="async" fetchpriority="low"></script> <script type="text/javascript" src="https://designsrc.jp/wp-includes/js/dist/hooks.min.js?ver=dd5603f07f9220ed27f1" id="wp-hooks-js"></script> <script type="text/javascript" src="https://designsrc.jp/wp-includes/js/dist/i18n.min.js?ver=c26c3dc7bed366793375" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); //# sourceURL=wp-i18n-js-after /* ]]> */ </script> <script type="text/javascript" src="https://designsrc.jp/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.6" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-translations"> /* <![CDATA[ */ ( function( domain, translations ) { var localeData = translations.locale_data[ domain ] || translations.locale_data.messages; localeData[""].domain = domain; wp.i18n.setLocaleData( localeData, domain ); } )( "contact-form-7", {"translation-revision-date":"2025-11-30 08:12:23+0000","generator":"GlotPress\/4.0.3","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=1; plural=0;","lang":"ja_JP"},"This contact form is placed in the wrong place.":["\u3053\u306e\u30b3\u30f3\u30bf\u30af\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u9593\u9055\u3063\u305f\u4f4d\u7f6e\u306b\u7f6e\u304b\u308c\u3066\u3044\u307e\u3059\u3002"],"Error:":["\u30a8\u30e9\u30fc:"]}},"comment":{"reference":"includes\/js\/index.js"}} ); //# sourceURL=contact-form-7-js-translations /* ]]> */ </script> <script type="text/javascript" id="contact-form-7-js-before"> /* <![CDATA[ */ var wpcf7 = { "api": { "root": "https:\/\/designsrc.jp\/wp-json\/", "namespace": "contact-form-7\/v1" } }; //# sourceURL=contact-form-7-js-before /* ]]> */ </script> <script type="text/javascript" src="https://designsrc.jp/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.6" id="contact-form-7-js"></script> <script type="text/javascript" id="toc-front-js-extra"> /* <![CDATA[ */ var tocplus = {"visibility_show":"\u8868\u793a","visibility_hide":"\u975e\u8868\u793a","visibility_hide_by_default":"1","width":"Auto"}; //# sourceURL=toc-front-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://designsrc.jp/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script type="text/javascript" src="https://designsrc.jp/wp-content/themes/muum_tcd085/js/jquery.inview.min.js?ver=3.7.5" id="muum-inview-js"></script> <script type="text/javascript" id="muum-cta-js-extra"> /* <![CDATA[ */ var tcd_cta = {"admin_url":"https://designsrc.jp/wp-admin/admin-ajax.php","ajax_nonce":"ad4776fa54"}; //# sourceURL=muum-cta-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://designsrc.jp/wp-content/themes/muum_tcd085/admin/js/cta.js?ver=3.7.5" id="muum-cta-js"></script> <script type="text/javascript" src="https://designsrc.jp/wp-content/themes/muum_tcd085/js/footer-cta.js?ver=3.7.5" id="muum-footer-cta-js"></script> <script type="text/javascript" id="muum-admin-footer-cta-js-extra"> /* <![CDATA[ */ var tcd_footer_cta = {"admin_url":"https://designsrc.jp/wp-admin/admin-ajax.php","ajax_nonce":"dee38cf24f"}; //# sourceURL=muum-admin-footer-cta-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://designsrc.jp/wp-content/themes/muum_tcd085/admin/js/footer-cta.js?ver=3.7.5" id="muum-admin-footer-cta-js"></script> <script type="text/javascript" src="https://designsrc.jp/wp-content/themes/muum_tcd085/js/slick.min.js?ver=1.0.0" id="slick-script-js"></script> <script> jQuery(function($) { jQuery.post('https://designsrc.jp/wp-admin/admin-ajax.php',{ action: 'views_count_up', post_id: 303, nonce: '71044ce3a8'}); }); </script> <script> jQuery(function(){ setTimeout(function(){ jQuery('body').addClass('start_first_animation'); }, 1200); }); </script> </body> </html>