<?xml version="1.0" encoding="UTF-8" ?>

<rdf:RDF
 xmlns="http://purl.org/rss/1.0/"
 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns:dc="http://purl.org/dc/elements/1.1/"
 xmlns:content="http://purl.org/rss/1.0/modules/content/"
 xml:lang="ja"
>

<channel rdf:about="https://ant2.net/magazine/feed/rss10/">
<title>CMSなら「ant2-ASP」でホームページ制作！ ant2お役立ち情報</title>
<link>https://ant2.net/magazine/</link>
<description>ant2お役立ち情報</description>
<dc:language>ja</dc:language>
<dc:date>2026-10-11T03:38:01+09:00</dc:date>
<items>
<rdf:Seq>
<rdf:li rdf:resource="https://ant2.net/magazine/2026/09/22009/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/09/22008/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/08/22007/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/07/22004/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/07/22003/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/06/22002/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/06/22001/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/05/22000/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/05/21999/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/04/21998/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/04/21995/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/03/21994/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/03/21993/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/02/21992/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/02/21990/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/01/21988/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2026/01/21987/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2025/12/21984/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2025/12/21982/" />
<rdf:li rdf:resource="https://ant2.net/magazine/2025/11/21981/" />
</rdf:Seq>
</items>
</channel>

<item rdf:about="https://ant2.net/magazine/2026/09/22009/">
<title>ゴーゴーAIがさらに便利に！新機能「AIテキストチェック」「AIサイトカラー提案」をご紹介</title>
<link>https://ant2.net/magazine/2026/09/22009/</link>
<description>




こんにちは。アントアントのメルマガ担当です。 いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。 今回は、2026年8月27日に「ゴーゴーAI」へ新たに追加された「AIテキストチェック機能」と「AIサイトカラー提案機能」についてご紹介します。
2026年2月に登場した文章生成機能に続き、今回のアップデートでは「文章を作る」だけではなく、 「公開前に文章を確認する」「サイトの配色を考える」ところまでAIがサポートできるようになりました。
WEBサイト制作や日々の更新で、「文章のミスがないか確認するのに時間がかかる」「サイトに合う色がなかなか決まらない」と感じたことがある方は、ぜひ参考にしてください。









ゴーゴーAIとは？




「ゴーゴーAI」は、ant2 CMSの編集画面から利用できるAIアシスト機能です。 これまでのゴーゴーAIでは、文章を新しく作成したり、既存の文章を読みやすくリライトしたりすることができました。&#160;
例えば、ページやブログ、トピックス、イベントなどのタイトルや本文を生成できるほか、ページ内のテキストを直接編集する際にもAI生成を利用できます。
「丁寧に」「柔らかく」といったトーンや文字数を指定して文章を生成することもできるため、ゼロから文章を考える作業負担を減らすことができます。
また、既存文章がある場合には、内容をもとに改善案を生成することもできます。





※画像をクリックすると、詳細ページに遷移します。








さらにタイトルや本文だけでなく、タイトルタグやメタディスクリプションなどの作成にも活用でき、ページごとのクオリティ向上をサポートします。
そして、今回の機能追加によって文章作成のサポートだけではなく、WEBサイト制作のより幅広い工程をサポートできるようになりました。




新機能1　公開前の文章をAIが確認する「AIテキストチェック機能」




まずご紹介するのが、「AIテキストチェック機能」です。
WEBサイトを更新するとき、文章そのものは完成していても、

 誤字脱字が残っていないかな？
 同じ言葉なのに表記がバラバラになっていないかな？
 日本語として少し不自然なところはないかな？

といった、公開前の内容チェックを必須で行わなければなりません。
ゴーゴーAIテキストチェックでは、現在表示しているページのテキストをAIが確認し、修正を検討したほうがよい箇所を分かりやすく提示してくれます。









現在用意されている主なチェック項目は、次の4つです。









 
 
 チェック項目
 確認する内容
 
 
 誤字脱字
 タイプミスや送り仮名、同音異義語の誤用、全角・半角の混在などを確認します。
 
 
 日本語表現
 文法や敬語、主語と述語の関係、冗長な表現などを確認します。
 
 
 表記ゆれ
 「サーバー」と「サーバ」のように、同じ意味の言葉が異なる表記になっている部分を確認します。
 
 
 景品表示法に関する確認観点
 優良誤認や有利誤認、ステルスマーケティングなど、広告表現として確認が必要となる可能性のある記述を確認します。
 
 









WEBサイトに掲載する文章は、情報を伝えるだけでなく、サイトや企業の印象にもつながります。
誤字脱字や不自然な日本語、表記ゆれが多いと、読み手に分かりにくさや違和感を与えてしまい、サイト全体の統一感や信頼感にも影響します。
また、商品やサービスについて、品質や価格面で実際よりも優れていると誤解を招く表現は、ユーザーの適切な判断を妨げる可能性があるため、注意が必要です。
さらに、検索エンジンでは、検索順位のためだけではなく、ユーザーにとって役立つ、信頼できるコンテンツを提供することが重視されています。
そのため、読みやすく正確で、内容に一貫性のある文章を掲載することは、SEOの観点からも大切です。







例えば誤字脱字チェックでは、タイプミスや送り仮名、同音異義語の誤用、全角・半角の混在などを確認できます。
日本語表現チェックでは、文法や敬語、主語と述語の関係、冗長な表現などをチェック、表記ゆれチェックでは、「サーバー」と「サーバ」のように、同じ意味の言葉が異なる表記になっている部分を確認できます。




「カスタムチェック」を使って自社独自のルールでもチェック可能




あらかじめ用意されているチェック項目だけでなく、自社独自の確認ルールを最大2,000文字まで入力できます。
例えば、
「『お客様』ではなく『お客さま』に統一する」 「会社名は『株式会社〇〇』と表記する」 「『最安値』という表現を使用しない」
といったルールを指定できます。複数人でWEBサイトを更新していると、担当者によって表現が変わってしまうこともあります。 カスタムチェックを活用すれば、社内の表記ルールに沿っているかを公開前に確認しやすくなります。




指摘された場所が分かりやすいのもポイント




テキストチェックを実行すると、画面右側にAIの指摘結果のパネルが表示されます。
指摘結果の内容ごとに、

 元の文章
 修正案
 指摘した理由

が表示され、ページ内の対象箇所にも番号が付きます。 「該当箇所へ」をクリックすれば対象の文章を確認でき、そのままant2 CMSのダイレクト編集で修正が可能です。 文章チェックのために別のツールへ文章をコピーし、修正後にCMSへ戻すといった作業を減らせる点も、CMSにAI機能が組み込まれているメリットです。




景品表示法に関する確認観点もチェック




WEBサイトでは、商品やサービスの魅力を伝えようとするあまり、意図せず強い表現を使用してしまう場合があります。 ゴーゴーAIでは、優良誤認や有利誤認、ステルスマーケティングなど、広告表現として確認が必要となる可能性のある記述についてもチェックできます。 ただし、この機能は法的な判断を行うものではありません。 AIの結果はあくまで確認を補助するための情報です。 すべてのリスクを検出することを保証するものではないため、最終的な公開判断はご自身で行い、重要な内容については必要に応じて法務担当者や専門家へご確認ください。




ant2 CMSでテキストチェックを使う方法



操作方法はとてもシンプル！

 テキストチェックをクリック&#160;
 ページ編集画面の左下に表示されるAIアイコンから「テキストチェック」を選択します。
 または、「コントロールパネル」 ＞ 「設定」&#160;＞&#160;「便利な機能」 ＞「AIテキストチェック」から開くこともできます。
 チェック項目を選択
 チェックしたい「誤字脱字」「日本語表現」「表記ゆれ」「景表法観点」などを選択し、必要であればカスタムチェックを入力して「チェック開始」をクリックします。
 指摘箇所の修正
 チェックが完了したら、表示された指摘内容を一つずつ確認し、必要な箇所をダイレクト編集で修正します。

修正後に再度チェックを行うことで、文章を段階的にブラッシュアップしていくこともできます。








なお、チェック対象となるのは、現在のページに表示されている「ダイレクト編集」が可能なテキストです。
画像内に記載された文字などは対象になりません。 また、1回のチェック対象は30,000文字までで、AI機能にはサイトごとの月間利用回数制限があります。







01


チェック項目を選択してチェックを開始

チェックしたい「誤字脱字」「日本語表現」「表記ゆれ」「景表法観点」などを選択し、必要であればカスタムチェックを入力して「チェック開始」をクリックします。








02


指摘内容を確認して修正

チェックが完了したら、表示された指摘内容を一つずつ確認し、必要な箇所をダイレクト編集で修正します。








03


再チェックで文章をブラッシュアップ

修正後に再度チェックを行うことで、文章を段階的にブラッシュアップしていくこともできます。





新機能2　サイトのイメージを伝えるだけ！「サイトカラー提案機能」




もう一つの新機能が、「サイトカラー提案機能」です。 
WEBサイトを制作するとき、意外と時間がかかるのが「色決め」です。

 信頼感を出したい
 高級感のある雰囲気にしたい
 春らしいサイトにしたい

といったイメージはあっても、それを具体的な配色にするには色の組み合わせを考える必要だったり、WEBデザインとして適した色の使い方を把握しておく必要があります。
ゴーゴーAIのサイトカラー提案では、こうしたイメージを文章で伝えるだけで、AIがサイト全体のバランスを考えたカラーセットを提案してくれます。










例えば、

 落ち着きと信頼感のあるコーポレートサイト
 女性向けで柔らかく、春らしい雰囲気
 和風モダンで高級感のある配色

といった伝え方でも利用できます。
コーポレートカラーや会社のコンセプトなど、より詳しい内容を入力することも可能です。




一度に4つの配色を比較できる




サイトカラー提案では、一度のプロンプトを送信で4パターンのカラーセットが生成されます。 
気になるカラーセットを選択すると、実際のサイト上でプレビューできるため、「色だけを見ると良かったけれど、実際のサイトに当てはめると少し印象が違う」といったことも確認できます。
別のパターンを見たい場合は「さらに提案」をクリックすると、新しいカラーセットを追加生成できます。
最大20セットまで比較できるため、何度も色をいちから組み直すことなく、複数の候補からイメージに合う配色を探せます。 
気に入った配色は「お気に入りカラー」として保存でき、後から呼び出して微調整することもできます。




ant2 CMSでサイトカラー提案を使う方法



文字を入れるだけでAIがカラーを提案！

 公式サイトデザインテンプレートを選択
 まず、サイトカラー変更に対応した公式サイトデザインテンプレートを使用し、「コントロールパネル」＞「作成」＞「デザイン」＞「サイトカラーを変える」を開きます。
 希望するかカラーテイストを入力
 サイトカラー変更サイドバー内の「ゴーゴーAIで提案」に、希望するサイトのイメージや要望を入力します。
 入力できる内容は最大2,000文字です。
 カラーを提案してもらう
 「提案してもらう」をクリックすると4つのカラーセットが表示されるため、気になるものを選択してサイト上でプレビューします。

配色が決まったら「保存」をクリックして完了です。
なお、この機能はサイトカラー変更に対応した公式サイトデザインテンプレートが対象です。








具体的なHEX値などを指定した場合でも、サイトの読みやすさやAIの特性によって多少調整された色が提案される場合があります。
色を厳密に指定するというよりは、「業種」「雰囲気」「ブランドイメージ」などを伝え、配色のアイデアを得る使い方がおすすめです。







01


カラーの提案内容を入力する

サイトカラー変更サイドバー内の「ゴーゴーAIで提案」に、希望するサイトのイメージや要望を入力します。
入力できる内容は最大2,000文字です。
「提案してもらう」をクリックすると4つのカラーセットが表示されるため、気になるものを選択してサイト上でプレビューします。








02


提案された配色を選択

配色が決まったら「保存」をクリックして完了です。
なお、この機能はサイトカラー変更に対応した公式サイトデザインテンプレートが対象です。
また、具体的なHEX値などを指定した場合でも、サイトの読みやすさやAIの特性によって多少調整された色が提案される場合があります。
色を厳密に指定するというよりは、「業種」「雰囲気」「ブランドイメージ」などを伝え、配色のアイデアを得る使い方がおすすめです。





ゴーゴーAIはこんな場面でおすすめです




ゴーゴーAIは、日々WEBサイトを更新している方はもちろん、複数人でサイトを管理している企業や、クライアントのWEBサイトを制作・運用している制作会社にも活用いただける機能です。
例えば、WEBサイトの担当者がひとりの場合、文章を作成した本人がそのまま校正まで行うと、誤字脱字や表記ゆれに気付きにくいことがあります。 
そのようなときにAIテキストチェックを活用することで、公開前の確認作業をサポートできます。
また、サイトカラーを決める際に具体的な配色が思い浮かばない場合も、ゴーゴーAIにイメージを伝えることで、デザインを検討する際のヒントとしてクライアントに提案したりできる機能です。





まとめ




2026年8月27日のアップデートにより、ゴーゴーAIに「テキストチェック機能」と「サイトカラー提案機能」が追加されました。
これにより、これまでの文章生成・リライトに加えて、公開前の文章確認や、サイトのイメージに合った配色の検討まで行えるようになり、WEBサイト制作を幅広くサポートできるようになりました。
日々のWEBサイト制作や更新にかかる「考える時間」「確認する時間」「試行錯誤する時間」を減らすためのアシスト機能として、ぜひ新しくなったゴーゴーAIをご活用ください。








デモ登録はこちら




【イベント出展】【DXPO福岡26】営業・マーケDXPO -IT・DX展示会に出展いたします！2026年10月22日（木）〜23日（金）







 会場：マリンメッセ福岡　A館
 ブース情報：小間番号【8 - 15】広告・コンテンツ制作展エリア
 日時：
 
 2026年10月22日（木）9:30～17:30
 2026年10月23日（金）9:30～16:30
 
 
 詳細はこちら





</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-09-24T00:10:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin179022552772092700" class="cms-content-parts-sin179022552772102300">
<div class="cms-content-parts-sin178952171713395500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952171713396900">
<p>こんにちは。アントアントのメルマガ担当です。 いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。 今回は、2026年8月27日に「ゴーゴーAI」へ新たに追加された「AIテキストチェック機能」と「AIサイトカラー提案機能」についてご紹介します。</p>
<p>2026年2月に登場した文章生成機能に続き、今回のアップデートでは「文章を作る」だけではなく、 「公開前に文章を確認する」「サイトの配色を考える」ところまでAIがサポートできるようになりました。</p>
<p>WEBサイト制作や日々の更新で、「文章のミスがないか確認するのに時間がかかる」「サイトに合う色がなかなか決まらない」と感じたことがある方は、ぜひ参考にしてください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178952171713397700 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin178952171713398300" class="cparts-editsite--img cms-easy-edit" alt="ゴーゴーAIがさらに便利に！新機能「AIテキストチェック」「AIサイトカラー提案」をご紹介" src="https://ant2.net/images/magazine/2026/09/images20260916141109.png" width="675" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178952171713400300 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178952171713400900">ゴーゴーAIとは？</h2>
<div class="cms-content-parts-sin178952179204111300 box cparts-id409--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952179204122800">
<p>「ゴーゴーAI」は、ant2 CMSの編集画面から利用できるAIアシスト機能です。 これまでのゴーゴーAIでは、文章を新しく作成したり、既存の文章を読みやすくリライトしたりすることができました。&#160;</p>
<p>例えば、ページやブログ、トピックス、イベントなどのタイトルや本文を生成できるほか、ページ内のテキストを直接編集する際にもAI生成を利用できます。</p>
<p>「丁寧に」「柔らかく」といったトーンや文字数を指定して文章を生成することもできるため、ゼロから文章を考える作業負担を減らすことができます。</p>
<p>また、既存文章がある場合には、内容をもとに改善案を生成することもできます。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-img-block lay-img-width--max lay-margin-b--1"><a href="https://ant2oem.net/knowhow/2026/03/89861/" rel="otherurl" title="" target="_blank"><img id="cms-editor-image-sin178952179204130700" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/09/images2026032510134970.jpg" width="330" title="" name="" /></a></div>
<div class="cparts-editsite--caption cparts-caption-block lay-reset-child lay-font-size--s cms-easy-edit" id="cms-editor-minieditor-sin178952179204137900">
<p><strong>※画像をクリックすると、詳細ページに遷移します。</strong></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178952209551079000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952209551083700">
<p>さらにタイトルや本文だけでなく、タイトルタグやメタディスクリプションなどの作成にも活用でき、ページごとのクオリティ向上をサポートします。<br />
そして、今回の機能追加によって文章作成のサポートだけではなく、WEBサイト制作のより幅広い工程をサポートできるようになりました。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178952171713403300 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178952171713403800">新機能1　公開前の文章をAIが確認する「AIテキストチェック機能」</h2>
<div class="cms-content-parts-sin178952236137295800 box cparts-id437--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952236137306900">
<p>まずご紹介するのが、「AIテキストチェック機能」です。</p>
<p>WEBサイトを更新するとき、文章そのものは完成していても、</p>
<ul>
    <li>誤字脱字が残っていないかな？</li>
    <li>同じ言葉なのに表記がバラバラになっていないかな？</li>
    <li>日本語として少し不自然なところはないかな？</li>
</ul>
<p>といった、公開前の内容チェックを必須で行わなければなりません。</p>
<p>ゴーゴーAIテキストチェックでは、現在表示しているページのテキストをAIが確認し、修正を検討したほうがよい箇所を分かりやすく提示してくれます。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178952236137314700" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/09/gogoai-check02.jpg" width="330" /></div>
</div>
</div>
<div class="cms-content-parts-sin178952239974593200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952239974597300">
<p>現在用意されている主なチェック項目は、次の4つです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178952171713406200 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin178952171713406600">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th>チェック項目</th>
            <th>確認する内容</th>
        </tr>
        <tr>
            <td>誤字脱字</td>
            <td>タイプミスや送り仮名、同音異義語の誤用、全角・半角の混在などを確認します。</td>
        </tr>
        <tr>
            <td>日本語表現</td>
            <td>文法や敬語、主語と述語の関係、冗長な表現などを確認します。</td>
        </tr>
        <tr>
            <td>表記ゆれ</td>
            <td>「サーバー」と「サーバ」のように、同じ意味の言葉が異なる表記になっている部分を確認します。</td>
        </tr>
        <tr>
            <td>景品表示法に関する確認観点</td>
            <td>優良誤認や有利誤認、ステルスマーケティングなど、広告表現として確認が必要となる可能性のある記述を確認します。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178971182371344100 box cparts-id439--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="clearfix">
<div class="cparts-img-block lay-margin-b--3 lay-margin-l--3 lay-img-float--right"><img id="cms-editor-image-sin178971182371354900" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/09/images2026091815094168.png" width="500" title="" name="" /></div>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin178971182371362600">
<p>WEBサイトに掲載する文章は、情報を伝えるだけでなく、サイトや企業の印象にもつながります。</p>
<p>誤字脱字や不自然な日本語、表記ゆれが多いと、読み手に分かりにくさや違和感を与えてしまい、サイト全体の統一感や信頼感にも影響します。</p>
<p>また、商品やサービスについて、品質や価格面で実際よりも優れていると誤解を招く表現は、ユーザーの適切な判断を妨げる可能性があるため、注意が必要です。</p>
<p>さらに、検索エンジンでは、検索順位のためだけではなく、ユーザーにとって役立つ、信頼できるコンテンツを提供することが重視されています。</p>
<p>そのため、読みやすく正確で、内容に一貫性のある文章を掲載することは、SEOの観点からも大切です。</p>
</div>
</div>
</div>
<div class="cms-content-parts-sin178971141278927600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178971141278930100">
<p>例えば誤字脱字チェックでは、タイプミスや送り仮名、同音異義語の誤用、全角・半角の混在などを確認できます。<br />
日本語表現チェックでは、文法や敬語、主語と述語の関係、冗長な表現などをチェック、表記ゆれチェックでは、「サーバー」と「サーバ」のように、同じ意味の言葉が異なる表記になっている部分を確認できます。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178952171713407100 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178952171713407500">「カスタムチェック」を使って自社独自のルールでもチェック可能</h3>
<div class="cms-content-parts-sin178952171713408900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952171713409400">
<p>あらかじめ用意されているチェック項目だけでなく、自社独自の確認ルールを最大2,000文字まで入力できます。</p>
<p>例えば、</p>
<p>「『お客様』ではなく『お客さま』に統一する」 「会社名は『株式会社〇〇』と表記する」 「『最安値』という表現を使用しない」</p>
<p>といったルールを指定できます。複数人でWEBサイトを更新していると、担当者によって表現が変わってしまうこともあります。 カスタムチェックを活用すれば、社内の表記ルールに沿っているかを公開前に確認しやすくなります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178952171713409800 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178952171713410300">指摘された場所が分かりやすいのもポイント</h3>
<div class="cms-content-parts-sin178952171713410700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952171713411200">
<p>テキストチェックを実行すると、画面右側にAIの指摘結果のパネルが表示されます。</p>
<p>指摘結果の内容ごとに、</p>
<ul>
    <li>元の文章</li>
    <li>修正案</li>
    <li>指摘した理由</li>
</ul>
<p>が表示され、ページ内の対象箇所にも番号が付きます。 「該当箇所へ」をクリックすれば対象の文章を確認でき、そのままant2 CMSのダイレクト編集で修正が可能です。 文章チェックのために別のツールへ文章をコピーし、修正後にCMSへ戻すといった作業を減らせる点も、CMSにAI機能が組み込まれているメリットです。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178952171713411600 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178952171713412100">景品表示法に関する確認観点もチェック</h3>
<div class="cms-content-parts-sin178952171713412600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952171713413000">
<p>WEBサイトでは、商品やサービスの魅力を伝えようとするあまり、意図せず強い表現を使用してしまう場合があります。 ゴーゴーAIでは、優良誤認や有利誤認、ステルスマーケティングなど、広告表現として確認が必要となる可能性のある記述についてもチェックできます。 ただし、この機能は法的な判断を行うものではありません。 AIの結果はあくまで確認を補助するための情報です。 すべてのリスクを検出することを保証するものではないため、最終的な公開判断はご自身で行い、重要な内容については必要に応じて法務担当者や専門家へご確認ください。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178952171713413400 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178952171713415300">ant2 CMSでテキストチェックを使う方法</h2>
<div class="cms-content-parts-sin178971050517562300 cparts-id89--01 cparts-fullwide-block box lay-margin-b--3 lay-padding-y--3 dec-bg--light" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-editsite--txt cparts-txt-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6 lay-reset-child" id="cms-editor-minieditor-sin178971050517577100">
<h4>操作方法はとてもシンプル！</h4>
<ol>
    <li><strong>テキストチェックをクリック</strong>&#160;<br />
    ページ編集画面の左下に表示されるAIアイコンから「テキストチェック」を選択します。<br />
    または、「コントロールパネル」 ＞ 「設定」&#160;<span style="font-size: 1.6rem;">＞</span><span style="font-size: 1.6rem;">&#160;「便利な機能」 </span><span style="font-size: 1.6rem;">＞</span><span style="font-size: 1.6rem;">「AIテキストチェック」</span>から開くこともできます。</li>
    <li><strong>チェック項目を選択</strong><br />
    チェックしたい「誤字脱字」「日本語表現」「表記ゆれ」「景表法観点」などを選択し、必要であればカスタムチェックを入力して「チェック開始」をクリックします。</li>
    <li><strong>指摘箇所の修正</strong><br />
    チェックが完了したら、表示された指摘内容を一つずつ確認し、必要な箇所をダイレクト編集で修正します。</li>
</ol>
<p>修正後に再度チェックを行うことで、文章を段階的にブラッシュアップしていくこともできます。</p>
</div>
<div class="cparts-img-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6 lay-img-width--max"><img id="cms-editor-image-sin178971050517585400" class="cparts-editsite--img" alt="" src="https://ant2.net/images/magazine/2026/09/images2026091610494544.png" /></div>
</div>
</div>
<div class="cms-content-parts-sin178971052560795100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178971052560801600">
<p>なお、チェック対象となるのは、現在のページに表示されている「ダイレクト編集」が可能なテキストです。</p>
<p>画像内に記載された文字などは対象になりません。 また、1回のチェック対象は30,000文字までで、AI機能にはサイトごとの月間利用回数制限があります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178952264192759400 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin178952264192763500">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin178952264192763800">チェック項目を選択してチェックを開始</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952264192764100">
<p>チェックしたい「誤字脱字」「日本語表現」「表記ゆれ」「景表法観点」などを選択し、必要であればカスタムチェックを入力して「チェック開始」をクリックします。</p>
<p><img src="https://ant2.net/images/magazine/2026/09/images2026091610495160.png" width="800" height="411" alt="" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178952364163441600 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin178952364163333400">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin178952364163345200">指摘内容を確認して修正</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952364163352100">
<p>チェックが完了したら、表示された指摘内容を一つずつ確認し、必要な箇所をダイレクト編集で修正します。</p>
<p><img src="https://ant2.net/images/magazine/2026/09/images2026091610495944.png" width="800" height="413" alt="" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178952372036683200 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin178952372036626500">03</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin178952372036635600">再チェックで文章をブラッシュアップ</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952372036645100">
<p>修正後に再度チェックを行うことで、文章を段階的にブラッシュアップしていくこともできます。</p>
<p><img src="https://ant2.net/images/magazine/2026/09/images2026091610495527.png" width="800" height="411" alt="" /></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178952171713423000 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178952171713423500">新機能2　サイトのイメージを伝えるだけ！「サイトカラー提案機能」</h2>
<div class="cms-content-parts-sin178952383037236200 box cparts-id437--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952383037246500">
<p>もう一つの新機能が、「サイトカラー提案機能」です。 <br />
WEBサイトを制作するとき、意外と時間がかかるのが「色決め」です。</p>
<ul>
    <li>信頼感を出したい</li>
    <li>高級感のある雰囲気にしたい</li>
    <li>春らしいサイトにしたい</li>
</ul>
<p>といったイメージはあっても、それを具体的な配色にするには色の組み合わせを考える必要だったり、WEBデザインとして適した色の使い方を把握しておく必要があります。</p>
<p>ゴーゴーAIのサイトカラー提案では、こうしたイメージを文章で伝えるだけで、AIがサイト全体のバランスを考えたカラーセットを提案してくれます。</p>
<p></p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178952383037254100" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/09/gogoai-color02.jpg" width="330" /></div>
</div>
</div>
<div class="cms-content-parts-sin178952386654756100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952386654760100">
<p>例えば、</p>
<ul>
    <li>落ち着きと信頼感のあるコーポレートサイト</li>
    <li>女性向けで柔らかく、春らしい雰囲気</li>
    <li>和風モダンで高級感のある配色</li>
</ul>
<p>といった伝え方でも利用できます。<br />
コーポレートカラーや会社のコンセプトなど、より詳しい内容を入力することも可能です。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178952171713426700 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178952171713429800">一度に4つの配色を比較できる</h3>
<div class="cms-content-parts-sin178952171713431600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952171713432100">
<p>サイトカラー提案では、一度のプロンプトを送信で4パターンのカラーセットが生成されます。 <br />
気になるカラーセットを選択すると、実際のサイト上でプレビューできるため、「色だけを見ると良かったけれど、実際のサイトに当てはめると少し印象が違う」といったことも確認できます。</p>
<p>別のパターンを見たい場合は「さらに提案」をクリックすると、新しいカラーセットを追加生成できます。<br />
最大20セットまで比較できるため、何度も色をいちから組み直すことなく、複数の候補からイメージに合う配色を探せます。 <br />
気に入った配色は「お気に入りカラー」として保存でき、後から呼び出して微調整することもできます。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178952171713432600 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178952171713433100">ant2 CMSでサイトカラー提案を使う方法</h2>
<div class="cms-content-parts-sin178971069899576900 cparts-id89--01 cparts-fullwide-block box lay-margin-b--3 lay-padding-y--3 dec-bg--light" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-editsite--txt cparts-txt-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6 lay-reset-child" id="cms-editor-minieditor-sin178971069899587700">
<h4>文字を入れるだけでAIがカラーを提案！</h4>
<ol>
    <li><strong>公式サイトデザインテンプレートを選択</strong><br />
    まず、サイトカラー変更に対応した公式サイトデザインテンプレートを使用し、<span style="font-size: 1.6rem;">「コントロールパネル」＞「作成」</span><span style="font-size: 1.6rem;">＞</span><span style="font-size: 1.6rem;">「デザイン」</span><span style="font-size: 1.6rem;">＞</span><span style="font-size: 1.6rem;">「サイトカラーを変える」</span><span style="font-size: 1.6rem;">を開きます。</span></li>
    <li><strong>希望するかカラーテイストを入力</strong><br />
    サイトカラー変更サイドバー内の「ゴーゴーAIで提案」に、希望するサイトのイメージや要望を入力します。<br />
    入力できる内容は最大2,000文字です。</li>
    <li><strong>カラーを提案してもらう</strong><br />
    「提案してもらう」をクリックすると4つのカラーセットが表示されるため、気になるものを選択してサイト上でプレビューします。</li>
</ol>
<p>配色が決まったら「保存」をクリックして完了です。<br />
なお、この機能はサイトカラー変更に対応した公式サイトデザインテンプレートが対象です。</p>
</div>
<div class="cparts-img-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6 lay-img-width--max"><img id="cms-editor-image-sin178971069899595300" class="cparts-editsite--img" alt="" src="https://ant2.net/images/magazine/2026/09/images20260916144032.png" /></div>
</div>
</div>
<div class="cms-content-parts-sin178953735799777500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178953735799781500">
<p>具体的なHEX値などを指定した場合でも、サイトの読みやすさやAIの特性によって多少調整された色が提案される場合があります。</p>
<p>色を厳密に指定するというよりは、「業種」「雰囲気」「ブランドイメージ」などを伝え、配色のアイデアを得る使い方がおすすめです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178952779499207600 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin178952779499211600">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin178952779499212000">カラーの提案内容を入力する</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952779499212300">
<p>サイトカラー変更サイドバー内の「ゴーゴーAIで提案」に、希望するサイトのイメージや要望を入力します。<br />
入力できる内容は最大2,000文字です。<br />
「提案してもらう」をクリックすると4つのカラーセットが表示されるため、気になるものを選択してサイト上でプレビューします。</p>
<p><img src="https://ant2.net/images/magazine/2026/09/images2026091610494813.png" width="600" height="674" alt="" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178952781962060800 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin178952781962012400">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin178952781962020400">提案された配色を選択</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952781962027100">
<p>配色が決まったら「保存」をクリックして完了です。</p>
<p>なお、この機能はサイトカラー変更に対応した公式サイトデザインテンプレートが対象です。<br />
また、具体的なHEX値などを指定した場合でも、サイトの読みやすさやAIの特性によって多少調整された色が提案される場合があります。<br />
色を厳密に指定するというよりは、「業種」「雰囲気」「ブランドイメージ」などを伝え、配色のアイデアを得る使い方がおすすめです。</p>
<p><img src="https://ant2.net/images/magazine/2026/09/images2026091610500446.png" width="800" height="410" alt="" /></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178952171713436800 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178952171713437300">ゴーゴーAIはこんな場面でおすすめです</h2>
<div class="cms-content-parts-sin178953611778986700 box cparts-id437--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178953611779004900">
<p>ゴーゴーAIは、日々WEBサイトを更新している方はもちろん、複数人でサイトを管理している企業や、クライアントのWEBサイトを制作・運用している制作会社にも活用いただける機能です。</p>
<p>例えば、WEBサイトの担当者がひとりの場合、文章を作成した本人がそのまま校正まで行うと、誤字脱字や表記ゆれに気付きにくいことがあります。 <br />
そのようなときにAIテキストチェックを活用することで、公開前の確認作業をサポートできます。</p>
<p>また、サイトカラーを決める際に具体的な配色が思い浮かばない場合も、ゴーゴーAIにイメージを伝えることで、デザインを検討する際のヒントとしてクライアントに提案したりできる機能です。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178953611779012800" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/09/images20260916143356.png" width="330" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178952171713439000 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178952171713439500">まとめ</h2>
<div class="cms-content-parts-sin178952171713440100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178952171713440700">
<p>2026年8月27日のアップデートにより、ゴーゴーAIに「テキストチェック機能」と「サイトカラー提案機能」が追加されました。</p>
<p>これにより、これまでの文章生成・リライトに加えて、公開前の文章確認や、サイトのイメージに合った配色の検討まで行えるようになり、WEBサイト制作を幅広くサポートできるようになりました。</p>
<p>日々のWEBサイト制作や更新にかかる「考える時間」「確認する時間」「試行錯誤する時間」を減らすためのアシスト機能として、ぜひ新しくなったゴーゴーAIをご活用ください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178953691386379900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178953691386379900 cparts-id119 lay-margin-b--3 box" style="margin-bottom:80px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178953691386423800">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178953704472774400 cparts-editsite--mainttl" id="cms-editor-textarea-sin178953704472777700">【イベント出展】【DXPO福岡26】営業・マーケDXPO -IT・DX展示会に出展いたします！2026年10月22日（木）〜23日（金）</h3>
<div class="cms-content-parts-sin178953704472785000 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178953704472786800" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/09/bnr-fk26_info_white-sales.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178953704472789000">
<div></div>
<ul>
    <li>会場：マリンメッセ福岡　A館</li>
    <li>ブース情報：小間番号【8 - 15】広告・コンテンツ制作展エリア</li>
    <li>日時：
    <ul>
        <li>2026年10月22日（木）9:30～17:30</li>
        <li>2026年10月23日（金）9:30～16:30</li>
    </ul>
    </li>
    <li><a href="https://dxpo.jp/real/fox/fukuoka/sales/" target="_blank">詳細はこちら</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/09/22008/">
<title>意外と知らない？WEB担当者が知っておくべき画像サイズと圧縮のコツ</title>
<link>https://ant2.net/magazine/2026/09/22008/</link>
<description>




こんにちは。アントアントのメルマガ担当です。 いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
「せっかく良い写真を撮ったのに、WEBサイトにアップしてみるとなんだかガタガタして見える&#8230;」 「画像が大きすぎてページの読み込みが遅い気がするけれど、どう直せばいいのか分からない」 CMSを使ってご自身でWEBサイトを運用していると、そんな「画像に関するお悩み」に直面することはありませんか？
実は、画像の種類・サイズ・容量を適切に設定するだけで、サイトの見やすさや表示速度は大きく変わります。
そして、いくつかの基本ルールを知っておくだけで、こうした悩みは簡単に改善できます。
そこで今回は、WEBサイトで使用する画像の種類とサイズの基本ルールについて、WEBやデザインに詳しくない方でも分かるように解説いたします。









WEBサイトで使われる主な画像形式





WEBサイトで使われる画像には、いくつかの「型」があります。
これを知るだけで、画質の劣化を防ぎ、サイトの表示速度をあげることができます。
一般的な画像（JPEGやPNG）は、たくさんの点（ピクセル）で作られた画像のため、大きく拡大すると画像がぼやけてしまいますが、SVGは拡大しても劣化しません。また色をCSSで簡単に変更することもできます。
迷った場合は「写真＝JPEGまたはWebP」「ロゴやアイコン＝SVGまたはPNG」と覚えておくと、画像形式で迷うことが少なくなります。









 
 
 形式
 特徴・用途
 
 
 PNG (ピング)
 背景を透明にできるためロゴ画像や何かの形に切り抜きたいイラストに適しています。
 
 
 JPEG (ジェイペグ)
 写真で最もよく使われる画像形式です。WEBサイトの写真は基本的にJPEGでOKと考えて問題ありません。
 
 
 WebP (ウェッピー)
 Googleが開発した画像形式で、JPEGやPNGよりもファイルサイズを小さくできるのが特徴です。サイト表示を高速化するため、近年採用するWEBサイトが増えています。
 
 
 SVG (エスブイジー)
 少し特殊な画像形式で図形データ（ベクター画像）という扱いになります。
 拡大しても画像がぼやけず、CSSでカラーを簡単に変更することもできます。
 
 





「表示速度」がWEBサイトの命運を分ける理由




なぜ、画像の「重さ（容量）」にここまでこだわる必要があるのでしょうか？ それは、表示速度が遅いと「ユーザー」と「検索エンジン」の両方から見放されてしまうからです。




（1）ユーザーの「3秒の壁」と離脱率





Googleの調査によると、モバイルサイトの読み込みに3秒以上かかると、約50%ものユーザーがページを閉じて去ってしまうというデータがあります。
どんなに素晴らしい文章や商品写真を掲載していても、表示される前にページを閉じられてしまっては、存在しないのと同じになってしまいます。
出典：Think with Google Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed（2016年のデータ、記事は削除済み、2026年でもこの認識は変わっていないと言われている）




（2）Googleの評価（SEO）への影響





Googleは「ユーザーにとって使いやすいサイト」を高く評価します。
そのため、ページの表示速度は検索順位を決める重要な指標（コアウェブバイタル）の一つとして公式に採用されています。

 重いサイト：
 検索順位が上がりにくく、表示の遅さがユーザー体験を低下させます。
 軽いサイト：
 検索エンジンに好まれ、スマートフォンユーザーにも親切なサイトと見なされる。

「画像1枚くらい&#8230;」という油断が、実は集客のチャンスを大きく損なっている可能性があるのです。




画像サイズを揃えるとWEBサイトが美しく見える




WEBサイトをパッと見たとき、わたしたちは無意識に「規則性」を探しています。
例えば、スタッフ紹介やブログ記事のサムネイル画像が、あるものは正方形、あるものは横長、またあるものは縦長&#8230;とバラバラだと、視線が定まらず「整理されていない印象」を与えてしまいます。
「サイズを揃える」だけで、サイトに清潔感と信頼感が生まれます。





迷ったらこれ！基本の画像サイズ




どんなサイズにすればいいか迷ったときは、以下の数値を基準にしてみてください。









 
 
 
 比率
 サイズ
 理由
 
 
 2列以上で表示したい画像
 3:2
 写真として最も自然に見える比率です
 幅 800px &#215; 高さ 534px
 PC画面で2列に並べても十分綺麗に見え、スマートフォンで見ても（縦で閲覧時）粗くなりません。
 
 
 1列で表示したい画像
 3:2
 写真として最も自然に見える比率です
 幅 1140px &#215; 高さ 760px
 ant2 CMSで1列表示する場合はウィンドウ幅100%のブロックでない限り、ブロックの最大値は1140pxになります。
 
 
 メイン画像（キービジュアル）
 16:9
 テレビやYouTubeと同じワイドな比率です
 幅 1920px &#215; 高さ 1080px
 最近の一般的なデスクトップモニターで端から端まで美しく表示されます。
 
 





プロが教えるトリミングのコツ




画像を切り抜く（トリミングする）際、意識してほしいのが「端っこ」です。
写真の端に、「隣にいた人の肩がほんの少しだけ映っている」とか「看板の文字が1文字だけ切れて残っている」といったことはありませんか？
実はこれ、見た目の印象に大きく影響しています。
人間は、不完全なものに目がいく習性があります。端に中途半端なオブジェクトがあると、「これは何だろう？」と無意識に気になってしまい、本来見てほしい写真の中央ではなく、その「切れ端」に視線が奪われてしまうのです。









逆に言えば、不要なものを思い切って切り落とし、画面をスッキリさせるだけで、写真の主役がグッと引き立ちます。「もったいないから残しておこう」と思いがちですが、余分な情報をそぎ落とすことこそが、伝わる写真への近道です。 トリミングするときは、仕上がりの四隅を確認する習慣をつけてみてください。
「端に余計なものが映り込んでいないか？」をチェックするだけで、写真のクオリティはぐっと上がります。







トリミング前



トリミング後







トリミング前



トリミング後




「画像の重さ」がサイトの命取りに？




どんなに美しい写真でも、1枚の容量が 5MB もあるような重い画像はNGです。 読み込みに3秒以上かかると、ユーザーの約50%が離脱すると言われています。 画像1枚あたり200KB〜300KB以下になるように圧縮をして画像の重さ（容量）を減らすようにしてみてください。




JPEG画像の場合




ant2 CMSではサーバーブラウザにアップ後、各画像のメニューボタンから「サイズの変更」を押すと縦横のサイズだけではなく、画質も圧縮させることができます。
見た目はほぼ変わらない程度に画質を少し調整することで、データ容量を軽くする圧縮が行われます。「低画質（80%）」にしてもそこまで画像が汚くなるということはありません。







圧縮なし（1.2MB）



低画質80%（175KB）




JPEG以外の画像の場合




JPEG以外の画像はサーバーブラウザ上では圧縮ができないため、無料のオンラインツールを使って見た目を変えずに容量だけを約1/5程度まで落とすことができます。
下記は有名な画像を圧縮できる無料のオンラインツールになりますが、日本語に対応しておりUIもわかりやすいので「ILoveIMG」がおすすめです。

 ILoveIMG（日本語対応で操作が直感的！）
 TinyPNG（パンダのアイコンでおなじみ。PNG圧縮に強い）
 Squoosh（Googleが提供。画質を確認しながら調整可能）





まとめ




WEBサイトにおいて、画像は単なる「飾り」ではなく、見た目・表示速度・ユーザーの見やすさに大きく影響する「強力な武器」です。
今回ご紹介した内容を振り返ると、押さえておきたいポイントは大きく3つです。

 「用途に合わせた形式を選ぶ」
 写真ならJPEG、ロゴや透過画像はPNG、軽量化ならWebP、アイコンはSVGと、目的に応じて使い分けましょう。
 「サイズを統一する」
 迷ったときは3:2（800&#215;535px）を基準に、キービジュアルは16:9（1920&#215;1080px）を目安にするとバランス良く仕上がります。 
 サイズを揃えるだけで、サイト全体にプロらしい統一感が生まれます。
 「適切に圧縮する」
 画像を圧縮して容量を軽くすることで、表示速度の改善にもつながります。

「難しそう&#8230;」と感じた方もご安心ください。一度ルールを決めてしまえば、あとの更新はグッと楽になります。
まずは1枚の画像から見直してみませんか？ 小さな積み重ねが、ユーザーにとって見やすく・ストレスのないWEBサイトへの近道です。








デモ登録はこちら




【イベント出展】【DXPO福岡26】営業・マーケDXPO -IT・DX展示会に出展いたします！2026年10月22日（木）〜23日（金）







 会場：マリンメッセ福岡　A館
 ブース情報：小間番号【8 - 15】広告・コンテンツ制作展エリア
 日時：
 
 2026年10月22日（木）9:30～17:30
 2026年10月23日（金）9:30～16:30
 
 
 詳細はこちら





</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-09-09T00:35:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin178891448216514500" class="cms-content-parts-sin178891448216523900">
<div class="cms-content-parts-sin178814045937312600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178814045937314000">
<p>こんにちは。アントアントのメルマガ担当です。 いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>「せっかく良い写真を撮ったのに、WEBサイトにアップしてみるとなんだかガタガタして見える&#8230;」 「画像が大きすぎてページの読み込みが遅い気がするけれど、どう直せばいいのか分からない」 CMSを使ってご自身でWEBサイトを運用していると、そんな「画像に関するお悩み」に直面することはありませんか？</p>
<p>実は、画像の種類・サイズ・容量を適切に設定するだけで、サイトの見やすさや表示速度は大きく変わります。<br />
そして、いくつかの基本ルールを知っておくだけで、こうした悩みは簡単に改善できます。</p>
<p>そこで今回は、WEBサイトで使用する画像の種類とサイズの基本ルールについて、WEBやデザインに詳しくない方でも分かるように解説いたします。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178814045937314800 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin178814045937315300" class="cparts-editsite--img cms-easy-edit" alt="意外と知らない？WEB担当者が知っておくべき画像サイズと圧縮のコツ" src="https://ant2.net/images/magazine/2026/09/knowhow2026098987301.png" width="675" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178814045937317100 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178814045937317600">WEBサイトで使われる主な画像形式</h2>
<div class="cms-content-parts-sin178814045937319500 box cparts-id437--03 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><a href="/images/knowhow/mg2026/09/images20260908175353.png" rel="lightbox_2[]" data-title=""><img id="cms-editor-image-sin178814045937321000" class="cparts-editsite--img cms-easy-edit" alt="WEBサイト画像形式の違い" src="https://ant2.net/images/magazine/2026/09/images20260908175353.png" width="330" title="" name="" /></a></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178814045937321400">
<p>WEBサイトで使われる画像には、いくつかの「型」があります。<br />
これを知るだけで、画質の劣化を防ぎ、サイトの表示速度をあげることができます。</p>
<p>一般的な画像（JPEGやPNG）は、たくさんの点（ピクセル）で作られた画像のため、大きく拡大すると画像がぼやけてしまいますが、SVGは拡大しても劣化しません。また色をCSSで簡単に変更することもできます。</p>
<p>迷った場合は「写真＝JPEGまたはWebP」「ロゴやアイコン＝SVGまたはPNG」と覚えておくと、画像形式で迷うことが少なくなります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178814045937321900 cparts-id93--02 lay-margin-b--3 box knowhow20260989873-table" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178814045937321900 cparts-id93--02 lay-margin-b--3 box" data-custom="knowhow20260989873-table">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin178814045937322300">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th width="20%">形式</th>
            <th>特徴・用途</th>
        </tr>
        <tr>
            <td>PNG (ピング)</td>
            <td>背景を透明にできるためロゴ画像や何かの形に切り抜きたいイラストに適しています。</td>
        </tr>
        <tr>
            <td>JPEG (ジェイペグ)</td>
            <td>写真で最もよく使われる画像形式です。WEBサイトの写真は基本的にJPEGでOKと考えて問題ありません。</td>
        </tr>
        <tr>
            <td>WebP (ウェッピー)</td>
            <td>Googleが開発した画像形式で、JPEGやPNGよりもファイルサイズを小さくできるのが特徴です。サイト表示を高速化するため、近年採用するWEBサイトが増えています。</td>
        </tr>
        <tr>
            <td>SVG (エスブイジー)</td>
            <td>少し特殊な画像形式で図形データ（ベクター画像）という扱いになります。<br />
            拡大しても画像がぼやけず、CSSでカラーを簡単に変更することもできます。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178814045937322900 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178814045937323300">「表示速度」がWEBサイトの命運を分ける理由</h2>
<div class="cms-content-parts-sin178815555324684200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178815555324694900">
<p>なぜ、画像の「重さ（容量）」にここまでこだわる必要があるのでしょうか？ それは、表示速度が遅いと「ユーザー」と「検索エンジン」の両方から見放されてしまうからです。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178814045937325100 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178814045937325600">（1）ユーザーの「3秒の壁」と離脱率</h3>
<div class="cms-content-parts-sin178833412450215100 box cparts-id437--03 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178833412450225500" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/09/knowhow2026098987303.png" width="330" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178833412450233200">
<p>Googleの調査によると、モバイルサイトの読み込みに3秒以上かかると、約50%ものユーザーがページを閉じて去ってしまうというデータがあります。</p>
<p>どんなに素晴らしい文章や商品写真を掲載していても、表示される前にページを閉じられてしまっては、存在しないのと同じになってしまいます。</p>
<p>出典：Think with Google Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed（2016年のデータ、記事は削除済み、2026年でもこの認識は変わっていないと言われている）</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178814045937327800 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178814045937328300">（2）Googleの評価（SEO）への影響</h3>
<div class="cms-content-parts-sin178833413034659800 box cparts-id437--03 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178833413034669400" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/09/knowhow2026098987304.png" width="330" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178833413034676600">
<p>Googleは「ユーザーにとって使いやすいサイト」を高く評価します。</p>
<p>そのため、ページの表示速度は検索順位を決める重要な指標（コアウェブバイタル）の一つとして公式に採用されています。</p>
<ul>
    <li><strong>重いサイト：</strong><br />
    検索順位が上がりにくく、表示の遅さがユーザー体験を低下させます。</li>
    <li><strong>軽いサイト：</strong><br />
    検索エンジンに好まれ、スマートフォンユーザーにも親切なサイトと見なされる。</li>
</ul>
<p>「画像1枚くらい&#8230;」という油断が、実は集客のチャンスを大きく損なっている可能性があるのです。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178814045937329600 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178814045937330100">画像サイズを揃えるとWEBサイトが美しく見える</h2>
<div class="cms-content-parts-sin178833411105830300 box cparts-id437--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178833411105842600">
<p>WEBサイトをパッと見たとき、わたしたちは無意識に「規則性」を探しています。</p>
<p>例えば、スタッフ紹介やブログ記事のサムネイル画像が、あるものは正方形、あるものは横長、またあるものは縦長&#8230;とバラバラだと、視線が定まらず「整理されていない印象」を与えてしまいます。</p>
<p>「サイズを揃える」だけで、サイトに清潔感と信頼感が生まれます。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178833411105851300" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/09/knowhow2026098987305.png" width="330" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin178815571317017200 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178815571317021100">迷ったらこれ！基本の画像サイズ</h3>
<div class="cms-content-parts-sin178815573359296300 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178815573359303300">
<p>どんなサイズにすればいいか迷ったときは、以下の数値を基準にしてみてください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178815623630553400 cparts-id93--02 lay-margin-b--3 box knowhow20260989873-table" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178815623630553400 cparts-id93--02 lay-margin-b--3 box" data-custom="knowhow20260989873-table">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin178815623630557100">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th></th>
            <th width="18%">比率</th>
            <th width="10%">サイズ</th>
            <th width="40%">理由</th>
        </tr>
        <tr>
            <th width="22%">2列以上で表示したい画像</th>
            <td>3:2<br />
            写真として最も自然に見える比率です</td>
            <td style="text-align: center;">幅 800px &#215; 高さ 534px</td>
            <td>PC画面で2列に並べても十分綺麗に見え、スマートフォンで見ても（縦で閲覧時）粗くなりません。</td>
        </tr>
        <tr>
            <th>1列で表示したい画像</th>
            <td>3:2<br />
            写真として最も自然に見える比率です</td>
            <td style="text-align: center;">幅 1140px &#215; 高さ 760px</td>
            <td>ant2 CMSで1列表示する場合はウィンドウ幅100%のブロックでない限り、ブロックの最大値は1140pxになります。</td>
        </tr>
        <tr>
            <th>メイン画像（キービジュアル）</th>
            <td>16:9<br />
            テレビやYouTubeと同じワイドな比率です</td>
            <td style="text-align: center;">幅 1920px &#215; 高さ 1080px</td>
            <td>最近の一般的なデスクトップモニターで端から端まで美しく表示されます。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178814045937335400 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178814045937335900">プロが教えるトリミングのコツ</h2>
<div class="cms-content-parts-sin178814045937336400 box cparts-id437--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178814045937336900">
<p>画像を切り抜く（トリミングする）際、意識してほしいのが「端っこ」です。</p>
<p>写真の端に、「隣にいた人の肩がほんの少しだけ映っている」とか「看板の文字が1文字だけ切れて残っている」といったことはありませんか？</p>
<p>実はこれ、見た目の印象に大きく影響しています。</p>
<p>人間は、不完全なものに目がいく習性があります。端に中途半端なオブジェクトがあると、「これは何だろう？」と無意識に気になってしまい、本来見てほしい写真の中央ではなく、その「切れ端」に視線が奪われてしまうのです。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178814045937337400" class="cparts-editsite--img cms-easy-edit" alt="プロが教えるトリミングのコツ" src="https://ant2.net/images/magazine/2026/09/knowhow2026098987306.png" width="330" title="" name="" /></div>
</div>
</div>
<div class="cms-content-parts-sin178815674427382400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178815674427386900">
<p>逆に言えば、不要なものを思い切って切り落とし、画面をスッキリさせるだけで、写真の主役がグッと引き立ちます。「もったいないから残しておこう」と思いがちですが、余分な情報をそぎ落とすことこそが、伝わる写真への近道です。 トリミングするときは、仕上がりの四隅を確認する習慣をつけてみてください。</p>
<p>「端に余計なものが映り込んでいないか？」をチェックするだけで、写真のクオリティはぐっと上がります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178815668504223800 box cparts-id443--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-editsite--mainttl cparts-id443--01__ttl lay-reset-title-mt--0 lay-margin-b--2 cms-easy-edit" id="cms-editor-textarea-sin178815668504227700">トリミング前</h4>
<div class="cparts-img-block lay-img-width--max"><img id="cms-editor-image-sin178815668504228100" class="cparts-editsite--img cms-easy-edit" alt="トリミング前" src="https://ant2.net/images/magazine/2026/09/knowhow2026098987307.jpg" width="330" title="" name="" /></div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-editsite--mainttl cparts-id443--01__ttl lay-reset-title-mt--0 lay-margin-b--2 cms-easy-edit" id="cms-editor-textarea-sin178815668504228300">トリミング後</h4>
<div class="cparts-img-block lay-img-width--max"><img id="cms-editor-image-sin178815668504228500" class="cparts-editsite--img cms-easy-edit" alt="トリミング後" src="https://ant2.net/images/magazine/2026/09/knowhow2026098987308.jpg" width="330" title="" name="" /></div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178815676894354000 box cparts-id443--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-editsite--mainttl cparts-id443--01__ttl lay-reset-title-mt--0 lay-margin-b--2 cms-easy-edit" id="cms-editor-textarea-sin178815676894284800">トリミング前</h4>
<div class="cparts-img-block lay-img-width--max"><img id="cms-editor-image-sin178815676894295300" class="cparts-editsite--img cms-easy-edit" alt="トリミング前" src="https://ant2.net/images/magazine/2026/09/knowhow2026098987309.jpg" width="330" title="" name="" /></div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-editsite--mainttl cparts-id443--01__ttl lay-reset-title-mt--0 lay-margin-b--2 cms-easy-edit" id="cms-editor-textarea-sin178815676894302900">トリミング後</h4>
<div class="cparts-img-block lay-img-width--max"><img id="cms-editor-image-sin178815676894309600" class="cparts-editsite--img cms-easy-edit" alt="トリミング後" src="https://ant2.net/images/magazine/2026/09/knowhow2026098987310.jpg" width="330" title="" name="" /></div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178814045937341800 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178814045937342300">「画像の重さ」がサイトの命取りに？</h2>
<div class="cms-content-parts-sin178814045937342900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178814045937343400">
<p>どんなに美しい写真でも、1枚の容量が 5MB もあるような重い画像はNGです。 読み込みに3秒以上かかると、ユーザーの約50%が離脱すると言われています。 画像1枚あたり200KB〜300KB以下になるように圧縮をして画像の重さ（容量）を減らすようにしてみてください。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178815713567384600 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178815713567388900">JPEG画像の場合</h3>
<div class="cms-content-parts-sin178815715349714700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178815715349686600">
<p>ant2 CMSではサーバーブラウザにアップ後、各画像のメニューボタンから「サイズの変更」を押すと縦横のサイズだけではなく、画質も圧縮させることができます。</p>
<p>見た目はほぼ変わらない程度に画質を少し調整することで、データ容量を軽くする圧縮が行われます。「低画質（80%）」にしてもそこまで画像が汚くなるということはありません。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178815718127747100 box cparts-id443--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-editsite--mainttl cparts-id443--01__ttl lay-reset-title-mt--0 lay-margin-b--2 cms-easy-edit" id="cms-editor-textarea-sin178815718127697400">圧縮なし（1.2MB）</h4>
<div class="cparts-img-block lay-img-width--max"><img id="cms-editor-image-sin178815718127704700" class="cparts-editsite--img cms-easy-edit" alt="圧縮なし（1.2MB）" src="https://ant2.net/images/magazine/2026/09/knowhow2026098987311.jpg" width="330" title="" name="" /></div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-editsite--mainttl cparts-id443--01__ttl lay-reset-title-mt--0 lay-margin-b--2 cms-easy-edit" id="cms-editor-textarea-sin178815718127711000">低画質80%（175KB）</h4>
<div class="cparts-img-block lay-img-width--max"><img id="cms-editor-image-sin178815718127717100" class="cparts-editsite--img cms-easy-edit" alt="低画質80%（175KB）" src="https://ant2.net/images/magazine/2026/09/knowhow2026098987312.jpg" width="330" title="" name="" /></div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178815721719847100 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178815721719853100">JPEG以外の画像の場合</h3>
<div class="cms-content-parts-sin178815722180105600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178815722180072500">
<p>JPEG以外の画像はサーバーブラウザ上では圧縮ができないため、無料のオンラインツールを使って見た目を変えずに容量だけを約1/5程度まで落とすことができます。</p>
<p>下記は有名な画像を圧縮できる無料のオンラインツールになりますが、日本語に対応しておりUIもわかりやすいので「ILoveIMG」がおすすめです。</p>
<ul>
    <li><a href="https://www.iloveimg.com/ja/compress-image" target="_blank">ILoveIMG（日本語対応で操作が直感的！）</a></li>
    <li><a href="https://tinypng.com/" target="_blank">TinyPNG（パンダのアイコンでおなじみ。PNG圧縮に強い）</a></li>
    <li><a href="https://squoosh.app/" target="_blank">Squoosh（Googleが提供。画質を確認しながら調整可能）</a></li>
</ul>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178814045937346500 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178814045937347100">まとめ</h2>
<div class="cms-content-parts-sin178814045937347800 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178814045937348300">
<p>WEBサイトにおいて、画像は単なる「飾り」ではなく、見た目・表示速度・ユーザーの見やすさに大きく影響する「強力な武器」です。</p>
<p>今回ご紹介した内容を振り返ると、押さえておきたいポイントは大きく3つです。</p>
<ol>
    <li><strong>「用途に合わせた形式を選ぶ」</strong><br />
    写真ならJPEG、ロゴや透過画像はPNG、軽量化ならWebP、アイコンはSVGと、目的に応じて使い分けましょう。</li>
    <li><strong>「サイズを統一する」</strong><br />
    迷ったときは3:2（800&#215;535px）を基準に、キービジュアルは16:9（1920&#215;1080px）を目安にするとバランス良く仕上がります。 <br />
    サイズを揃えるだけで、サイト全体にプロらしい統一感が生まれます。</li>
    <li><strong>「適切に圧縮する」</strong><br />
    画像を圧縮して容量を軽くすることで、表示速度の改善にもつながります。</li>
</ol>
<p>「難しそう&#8230;」と感じた方もご安心ください。一度ルールを決めてしまえば、あとの更新はグッと楽になります。<br />
まずは1枚の画像から見直してみませんか？ 小さな積み重ねが、ユーザーにとって見やすく・ストレスのないWEBサイトへの近道です。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178815735791001700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178815735791001700 cparts-id119 lay-margin-b--3 box" style="margin-bottom:80px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178815735791004900">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178833428846945400 cparts-editsite--mainttl" id="cms-editor-textarea-sin178833428846948500">【イベント出展】【DXPO福岡26】営業・マーケDXPO -IT・DX展示会に出展いたします！2026年10月22日（木）〜23日（金）</h3>
<div class="cms-content-parts-sin178833428846951600 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178833428846954400" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/09/bnr-fk26_info_white-sales.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178833428846955600">
<div></div>
<ul>
    <li>会場：マリンメッセ福岡　A館</li>
    <li>ブース情報：小間番号【8 - 15】広告・コンテンツ制作展エリア</li>
    <li>日時：
    <ul style="margin-bottom: 0;">
        <li>2026年10月22日（木）9:30～17:30</li>
        <li>2026年10月23日（金）9:30～16:30</li>
    </ul>
    </li>
    <li><a href="https://dxpo.jp/real/fox/fukuoka/sales/" target="_blank">詳細はこちら</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/08/22007/">
<title>Claude Code・Codexでサイトが作れる時代、WEB制作をプロに依頼する価値はどこにある？</title>
<link>https://ant2.net/magazine/2026/08/22007/</link>
<description>




こんにちは。アントアントのメルマガ担当です。 いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は、ノーコードCMSに加えて、Claude CodeやCodexといったAIコーディングエージェントを使ってWEBサイトを作成できる時代に、制作会社やWEB制作のプロへ依頼する価値はどこにあるのかを考えていきます。 あわせて、「AIに任せられること」「自社でできること」「プロに相談したほうがよいこと」を整理しながら、 ant2 CMSを活用して、制作後のWEBサイトを自社で無理なく運用していく方法についてもご紹介します。









WEB制作の変化




ここ数年で、WEBサイトの作り方は大きく変わってきました。 これまでは、WEBサイトを作るためにはHTMLやCSSなどの専門知識が必要で、 「WEB制作は制作会社やエンジニアに依頼するもの」というイメージをお持ちの方も多かったのではないでしょうか。
しかし現在では、専門的なコードを書かなくてもページを作成・更新できるノーコードCMSが広く利用されるようになりました。
さらに最近では、Claude CodeやCodexといったAIコーディングエージェントを活用し、 AIに「このようなページを作ってほしい」「この部分を修正してほしい」と指示しながら、WEBサイトを作成する方法も身近になりつつあります。
以前に比べると、WEB制作のハードルは大きく下がり、「自社でもWEBサイトを作れるのでは？」「AIを使えば制作会社に依頼しなくてもよいのでは？」と考える企業も増えてくるかもしれません。
実際に、AIをうまく活用すれば、簡単なページの作成や文章の変更、画像の差し替え、デザインの調整など、自社で対応できる範囲はこれまで以上に広がっています。 では、誰でもWEBサイトを作りやすくなった今、制作会社やWEB制作のプロへ依頼する意味はなくなってしまったのでしょうか。
実は、そうではありません。
WEBサイトは「ページを作って公開できれば完成」というものではなく、「誰に何を伝えるのか」「どのような順番で情報を見てもらうのか」「お問い合わせや購入など、次の行動へどうつなげるのか」といった設計も重要です。 
また、公開後には情報を更新し続ける必要がありますし、SEO対策、スマートフォンでの見やすさ、セキュリティ、運用方法なども考えていかなければなりません。
つまり、AIによって「WEBサイトを作る作業」は簡単になってきましたが、「成果につながるWEBサイトを考え、長く運用していくこと」には、また別の知識や経験が必要になります。







AIは、指示された内容を形にすることを得意としています。一方で、「そもそも何を作るべきなのか」という部分は、自社の事業、競合、目的などを踏まえて判断しなければなりません。
WEBサイトを作る手段が簡単になったからこそ、「作る前に何を決めるか」が、これまで以上に重要になっています。AIが生成したコードを利用する場合も、内容を確認し、必要に応じて修正できる体制が重要です。
プロへ依頼する価値は、コードを書く作業だけではなく、AIが作成したものを確認し、企業の目的に合ったWEBサイトへ整えることにもあります。









WEBサイトでは見た目以外にも確認すべきことがあります。 例えば、スマートフォンで見ても使いやすいか、必要な情報まで迷わずたどり着けるか、 お問い合わせフォームは正常に動くか、ページのタイトルや説明文は適切か、公開後に担当者自身で更新できるか、といった点です。
さらに、AIが生成したコードを利用する場合には、既存の機能へ影響していないか、安全性に問題がないか、変更内容をあとから確認できる状態になっているかといった視点も必要になります。
つまり、AIが作ったものをそのまま公開するのではなく、正しく作られているかを判断する工程も重要なのです。








AIがコードを書けるようになると、「プロの仕事がAIに置き換わるのでは？」と思われるかもしれません。 しかし、これからのWEB制作では、プロの役割がなくなるというより、役割の中心が変わってきています。
以前は「コードを書く」「ページを作る」といった制作作業そのものに専門性が求められていました。 
これからは、それに加えて、何を作るべきかを考え、AIが作ったものを確認し、成果につながる形へ整えることがより重要になります。




プロに制作を依頼する価値



01WEBサイトの目的を明確にする





 会社やサービスの信頼性を高める
 商品やサービスへのお問い合わせを増やす
 採用への応募を増やす
 店舗への来店を促す
 既存のお客さまへ情報を届ける

目的によって、必要なページや掲載する情報、ボタンの位置、更新すべき内容は変わります。 プロは、事業内容、お客さまの特徴、競合サイト、現在の課題などを整理し、WEBサイトが担う役割を明確にします。







02訪問者が迷わない導線を設計する



企業側が掲載したい情報と、訪問者が知りたい情報は、必ずしも一致しません。&#160;例えば、企業側は商品の特徴を伝えたいと思っていても、訪問者は料金や導入事例、サポート内容を先に知りたい場合があります。そのため、訪問者の立場で情報の順番やページ構成を考えることが重要です。







03企業らしさを伝える



AIへデザインを依頼すると、整ったデザインが生成されることがあります。 しかし、そのデザインが自社の商品、サービス、理念、対象とするお客さまに合っているとは限りません。
信頼感を伝えたいのか、専門性や先進性を伝えたいのかなどによって、使用する色、写真、フォント、文章、余白は変わります。
プロは、単に見た目を整えるだけではなく、その企業らしさが伝わるようにデザインを組み立てます。




整理しておきたい公開後の運用ポイント




WEBサイトは、公開した時点で完成ではありません。
お知らせ、事例、商品情報、採用情報、営業時間など、内容を継続的に更新する必要があります。&#160;
公開後も安心してWebサイトを運用するために、次のような情報を整理しておくことをおすすめします。

 使用しているサービスやシステム
 ドメインとサーバーの管理者
 更新と公開の手順
 バックアップ方法
 不具合が起きた場合の相談先
 セキュリティ対策
 社内担当者と外部業者の役割





Claude Code・Codexとant2 CMS




Claude CodeやCodexとant2 CMSは、どちらか一方を選ぶものではなく、目的によって使い分けることができます。
AIが得意な部分はAIに任せ、自社でできる更新は自社で行い、専門的な判断が必要な部分だけプロへ相談する方法もあります。 例えば、WEBサイトの目的や構成、デザインの基本ルール、重要なページなどはプロと一緒に設計します。
制作の過程では、Claude CodeやCodexなどを活用して作業を効率化することもできます。 そして、サイト公開後のお知らせやブログ、事例の追加などは、CMSを使って自社で更新します。
大きなデザイン変更、技術的な問題が発生したときには、必要に応じて再びプロへ相談します。 このように役割を分けることで、AIの手軽さや速さ、プロの専門性、CMSの運用しやすさを組み合わせられます。





 
 
 役割
 活用する内容
 
 
 AI
 コードの作成や修正、デザインの調整
 
 
 自社
 お知らせやブログ、事例の追加
 
 
 プロ
 WEBサイトの目的や構成、デザインの基本ルール、重要なページ
 
 
 ant2 CMS
 ページ作成、ブログ、トピックス、メールフォーム
 
 





ant2 CMS・サービスでの設定・活用方法




ant2 CMSでは、ページ作成、ブログ、トピックス、メールフォームなど、サイト運用に必要なさまざまなコンテンツを管理できます。
AIで制作を効率化し、その後の更新・管理をant2 CMSで仕組み化することで、「作った人しか分からないサイト」ではなく、会社として継続して管理できるWEBサイトを目指すことができます。
AIと組み合わせながらant2 CMSをどのように活用できるのかをご紹介します。





ページの追加・修正




AIを使えば、新しいページをすばやくその都度作ることができます。
しかし、担当者ごとに異なる指示でページを作成したり、同じ作業を繰り返したりすると、見出しの位置や情報の順番、 ボタンの配置などが少しずつ変わり、サイト全体の統一感がなくなってしまうことがあります。
そこで、よく作成するページは、最初にプロが「ひな形」を設計しておく方法がおすすめです。 ant2 CMSでは、新しいページを空の状態から作成するだけでなく、既存のページをコピーして作成することができます。
これにより、毎回ゼロからページを作る必要がなくなり、担当者が変わっても同じ構成・デザインでページを追加しやすくなります。サイト全体の統一感を保ちながら、更新作業の手間を減らすことにもつながります。





変更履歴の確認




複数人でサイトを更新していると、 「昨日まであった文章が変わっている」 「どの変更から表示がおかしくなったのか分からない」 ということが起こる場合があります。
ant2 CMSでは、変更履歴からログインしているアカウントの変更内容を確認でき、複数のアカウントで管理している場合には、全員の変更履歴も確認できます。
また、履歴から対象の変更を元に戻す操作も行えます。
AIを使うと短時間で多くの内容を変更できるからこそ、「変更できること」だけではなく、「変更した内容を追えること」も大切です。
変更内容を確認できる仕組みを持っておくことで、複数人でも安心してサイトを更新しやすくなります。





不具合が起きたときの対応




AIでサイトを制作した場合に見落とされやすいのが、「問題が起きたときに誰が対応するのか」という点です。

 ページが正しく表示されない
 お問い合わせが送信できない
 編集サイトにログインできない
 どこを変更したらよいのか分からない
 ドメインやサーバーに関する設定が分からない

といった問題が起きたとき、すべてをWEB担当者が解決できるとは限りません。 
AIに質問して解決できることもありますが、原因を正しく切り分け、責任を持って対応できる体制を用意しておくことが重要です。
ant2 CMSでは、操作方法が分からない場合や困ったことがあった場合に、電話・メール・お問い合わせフォームから相談できるサポート体制を用意しています。
そのため、「この操作で合っているのか分からない」「更新しようとしたら思った表示にならない」といったときにも、 担当者だけで悩み続けるのではなく、サポートへ相談しながらWEBサイトを運用できます。
また、WEBサイトの運用にはCMSだけでなく、サーバーやドメインの管理も必要です。
ant2 CMSのサービスでは、独自ドメインやサーバー、CMSなど、WEBサイトの運用に必要な環境をまとめて管理できます。そのため、WEB担当者が技術的な管理をすべて抱え込むのではなく、お知らせやページの更新、商品・サービスの情報発信といった、本来のWEBサイト運用に専念しやすくなります。
そのため、WEB担当者が技術的な管理をすべて抱え込むのではなく、お知らせやページの更新、商品・サービスの情報発信といった、本来のWEBサイト運用に専念しやすくなります。




セキュリティ対策




WEBサイトを自社で更新・運用していくうえでは、アカウントやログイン情報を適切に管理することも重要です。 ant2 CMSでは、対応するサイトで2段階認証を設定し、ID・パスワードに加えて認証コードを使ったログイン認証を利用できます。
また、アカウントごとに利用できる機能を制限することもできます。

 必要な人にだけアカウントを発行する
 ブログだけ更新できる権限のアカウントを発行する
 管理者権限を持つ人を限定する
 担当者が異動・退職した場合はアカウントを見直す

といったように、社内での役割に合わせて運用することができます。 誰でもすべての機能を操作できる状態にするのではなく、「必要な人が、必要な範囲だけ操作できる状態」にしておくことで、誤操作や意図しない変更を防ぎやすくなります。
さらに、WEBサイトのセキュリティ対策は、管理画面へのログイン対策だけではありません。 ant2 CMSでは、常時SSL化や2段階認証、メールフォームの連続送信制限に加え、定期的な脆弱性チェックや自動アップデートなど、WEBサイトを継続して利用するためのセキュリティ対策も行われています。
AIを利用したサイト制作では「完成させること」に意識が向きやすいですが、WEBサイトは公開後もセキュリティ上のリスクへ継続的に対応する必要があります。 その点、ant2 CMSでは、担当者がすべての技術的な対応を自分で行うのではなく、システム側のアップデートやセキュリティ対策を含めた環境でWEBサイトを運用できます。




まとめ




Claude CodeやCodexなどのAIコーディングエージェントによって、WEB制作のハードルは以前より大きく下がりました。
コードの作成や修正、デザインの調整など、これまで専門知識が必要だった作業の一部をAIに任せることで、WEB制作をより早く、効率的に進められるようになっています。 しかし、企業のWEBサイトで大切なのは、「ページを作れるかどうか」だけではありません。

 誰に何を伝えるのかを整理し、必要なページや導線を設計すること
 AIが作成した内容が適切かを確認すること
 公開後に誰が更新し、困ったときに誰へ相談するのかを決めること
 数年後も安全に運用し続けられる環境を整えること

こうした部分には、人による判断やプロの知識・経験が必要です。
これからのWEB制作では、「AIか、プロか」という二択ではなく、それぞれの得意な部分を組み合わせることが重要になってくるのではないでしょうか。
ant2 CMSでは、変更履歴やユーザー権限、バックアップ、2段階認証などの機能に加え、サーバー・ドメイン・セキュリティ面の管理や、困ったときに相談できるサポート体制も用意されています。 「作って終わり」ではなく、会社として安心して更新し、育て続けられるWEBサイトにすること。
AIでWEBサイトを作りやすくなった今だからこそ、制作後の運用まで見据えて、AI・プロ・ant2 CMSを上手に使い分けてみてはいかがでしょうか。







デモ登録はこちら



</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-08-26T00:05:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin178770906567181900" class="cms-content-parts-sin178770906567190900">
<div class="cms-content-parts-sin178711682811496600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711682811498600">
<p>こんにちは。アントアントのメルマガ担当です。 いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>今回は、ノーコードCMSに加えて、Claude CodeやCodexといったAIコーディングエージェントを使ってWEBサイトを作成できる時代に、制作会社やWEB制作のプロへ依頼する価値はどこにあるのかを考えていきます。 あわせて、「AIに任せられること」「自社でできること」「プロに相談したほうがよいこと」を整理しながら、 ant2 CMSを活用して、制作後のWEBサイトを自社で無理なく運用していく方法についてもご紹介します。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178711682811499300 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin178711682811499900" class="cparts-editsite--img cms-easy-edit" alt="Claude Code・Codexでサイトが作れる時代、WEB制作をプロに依頼する価値はどこにある？" src="https://ant2.net/images/magazine/2026/08/img.jpg" width="675" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178711682811501900 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178711682811502500">WEB制作の変化</h2>
<div class="cms-content-parts-sin178711689259733500 box cparts-id439--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="clearfix">
<div class="cparts-img-block lay-margin-b--3 lay-margin-l--3 lay-img-float--right"><img id="cms-editor-image-sin178711689259745700" class="cparts-editsite--img cms-easy-edit" alt="WEBサイト制作の変化" src="https://ant2.net/images/magazine/2026/08/01_web_site_evolution.jpg" width="500" title="" name="" /></div>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin178711689259754300">
<p>ここ数年で、WEBサイトの作り方は大きく変わってきました。 これまでは、WEBサイトを作るためにはHTMLやCSSなどの専門知識が必要で、 「WEB制作は制作会社やエンジニアに依頼するもの」というイメージをお持ちの方も多かったのではないでしょうか。</p>
<p>しかし現在では、専門的なコードを書かなくてもページを作成・更新できるノーコードCMSが広く利用されるようになりました。</p>
<p>さらに最近では、Claude CodeやCodexといったAIコーディングエージェントを活用し、 AIに「このようなページを作ってほしい」「この部分を修正してほしい」と指示しながら、WEBサイトを作成する方法も身近になりつつあります。</p>
<p>以前に比べると、WEB制作のハードルは大きく下がり、「自社でもWEBサイトを作れるのでは？」「AIを使えば制作会社に依頼しなくてもよいのでは？」と考える企業も増えてくるかもしれません。</p>
<p>実際に、AIをうまく活用すれば、簡単なページの作成や文章の変更、画像の差し替え、デザインの調整など、自社で対応できる範囲はこれまで以上に広がっています。 では、誰でもWEBサイトを作りやすくなった今、制作会社やWEB制作のプロへ依頼する意味はなくなってしまったのでしょうか。</p>
<p>実は、そうではありません。<br />
WEBサイトは「ページを作って公開できれば完成」というものではなく、「誰に何を伝えるのか」「どのような順番で情報を見てもらうのか」「お問い合わせや購入など、次の行動へどうつなげるのか」といった設計も重要です。 <br />
また、公開後には情報を更新し続ける必要がありますし、SEO対策、スマートフォンでの見やすさ、セキュリティ、運用方法なども考えていかなければなりません。</p>
<p>つまり、AIによって「WEBサイトを作る作業」は簡単になってきましたが、「成果につながるWEBサイトを考え、長く運用していくこと」には、また別の知識や経験が必要になります。</p>
</div>
</div>
</div>
<div class="cms-content-parts-sin178711750083066800 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711750083068900">
<p>AIは、指示された内容を形にすることを得意としています。一方で、「そもそも何を作るべきなのか」という部分は、自社の事業、競合、目的などを踏まえて判断しなければなりません。</p>
<p><span style="font-size: 1.6rem;">WEB</span>サイトを作る手段が簡単になったからこそ、「作る前に何を決めるか」が、これまで以上に重要になっています。AIが生成したコードを利用する場合も、内容を確認し、必要に応じて修正できる体制が重要です。</p>
<p>プロへ依頼する価値は、コードを書く作業だけではなく、AIが作成したものを確認し、企業の目的に合ったWEBサイトへ整えることにもあります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178711682811511800 box cparts-id437--03 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178711682811512300" class="cparts-editsite--img cms-easy-edit" alt="プロに依頼する価値" src="https://ant2.net/images/magazine/2026/08/04_value_of_professional_support.jpg" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711682811512800">
<p>WEBサイトでは見た目以外にも確認すべきことがあります。 例えば、スマートフォンで見ても使いやすいか、必要な情報まで迷わずたどり着けるか、 お問い合わせフォームは正常に動くか、ページのタイトルや説明文は適切か、公開後に担当者自身で更新できるか、といった点です。</p>
<p>さらに、AIが生成したコードを利用する場合には、既存の機能へ影響していないか、安全性に問題がないか、変更内容をあとから確認できる状態になっているかといった視点も必要になります。</p>
<p>つまり、AIが作ったものをそのまま公開するのではなく、正しく作られているかを判断する工程も重要なのです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178711756033564100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711756033567900">
<p>AIがコードを書けるようになると、「プロの仕事がAIに置き換わるのでは？」と思われるかもしれません。 しかし、これからのWEB制作では、プロの役割がなくなるというより、役割の中心が変わってきています。</p>
<p>以前は「コードを書く」「ページを作る」といった制作作業そのものに専門性が求められていました。 <br />
これからは、それに加えて、何を作るべきかを考え、AIが作ったものを確認し、成果につながる形へ整えることがより重要になります。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178765369100907600 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178765369100916300">プロに制作を依頼する価値</h2>
<div class="cms-content-parts-sin178711682811513600 box cparts-id131--01 lay-margin-b--3 dec-line--primary dec-bg--contents dec-line--radius-sm box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="cparts-head-block lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3 dec-bg--primary">
<h3><span class="cparts-no-block lay-margin-b--1" id="cms-editor-textbox-sin178711682811514200">01</span><span class="cparts-editsite--mainttl cparts-id131--01__ttl" id="cms-editor-textbox-sin178711682811514800">WEBサイトの目的を明確にする</span></h3>
</div>
<div class="cparts-body-block lay-col12-xs-12 lay-col12-md-9 lay-col12-lg-9">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711682811515300">
<p></p>
<ul>
    <li>会社やサービスの信頼性を高める</li>
    <li>商品やサービスへのお問い合わせを増やす</li>
    <li>採用への応募を増やす</li>
    <li>店舗への来店を促す</li>
    <li>既存のお客さまへ情報を届ける</li>
</ul>
<p>目的によって、必要なページや掲載する情報、ボタンの位置、更新すべき内容は変わります。 プロは、事業内容、お客さまの特徴、競合サイト、現在の課題などを整理し、WEBサイトが担う役割を明確にします。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178711682811515900 box cparts-id131--01 lay-margin-b--3 dec-line--primary dec-bg--contents dec-line--radius-sm box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="cparts-head-block lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3 dec-bg--primary">
<h3><span class="cparts-no-block lay-margin-b--1" id="cms-editor-textbox-sin178711682811516500">02</span><span class="cparts-editsite--mainttl cparts-id131--01__ttl" id="cms-editor-textbox-sin178711682811517100">訪問者が迷わない導線を設計する</span></h3>
</div>
<div class="cparts-body-block lay-col12-xs-12 lay-col12-md-9 lay-col12-lg-9">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711682811517700">
<p>企業側が掲載したい情報と、訪問者が知りたい情報は、必ずしも一致しません。&#160;例えば、企業側は商品の特徴を伝えたいと思っていても、訪問者は料金や導入事例、サポート内容を先に知りたい場合があります。そのため、訪問者の立場で情報の順番やページ構成を考えることが重要です。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178711682811519900 box cparts-id131--01 lay-margin-b--3 dec-line--primary dec-bg--contents dec-line--radius-sm box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="cparts-head-block lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3 dec-bg--primary">
<h3><span class="cparts-no-block lay-margin-b--1" id="cms-editor-textbox-sin178711682811520500">03</span><span class="cparts-editsite--mainttl cparts-id131--01__ttl" id="cms-editor-textbox-sin178711682811521100">企業らしさを伝える</span></h3>
</div>
<div class="cparts-body-block lay-col12-xs-12 lay-col12-md-9 lay-col12-lg-9">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711682811521700">
<p>AIへデザインを依頼すると、整ったデザインが生成されることがあります。 しかし、そのデザインが自社の商品、サービス、理念、対象とするお客さまに合っているとは限りません。</p>
<p>信頼感を伝えたいのか、専門性や先進性を伝えたいのかなどによって、使用する色、写真、フォント、文章、余白は変わります。</p>
<p>プロは、単に見た目を整えるだけではなく、その企業らしさが伝わるようにデザインを組み立てます。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178711682811528600 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178711682811529300">整理しておきたい公開後の運用ポイント</h2>
<div class="cms-content-parts-sin178711682811530000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711682811530600">
<p>WEBサイトは、公開した時点で完成ではありません。</p>
<p>お知らせ、事例、商品情報、採用情報、営業時間など、内容を継続的に更新する必要があります。&#160;<br />
公開後も安心してWebサイトを運用するために、次のような情報を整理しておくことをおすすめします。</p>
<ul>
    <li>使用しているサービスやシステム</li>
    <li>ドメインとサーバーの管理者</li>
    <li>更新と公開の手順</li>
    <li>バックアップ方法</li>
    <li>不具合が起きた場合の相談先</li>
    <li>セキュリティ対策</li>
    <li>社内担当者と外部業者の役割</li>
</ul>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178711682811531300 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178711682811538900">Claude Code・Codexとant2 CMS</h2>
<div class="cms-content-parts-sin178753646129678900 cparts-id119--02 box lay-margin-b--3 knowhow20260889872-table" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178753646129678900 cparts-id119--02 box lay-margin-b--3" data-custom="knowhow20260889872-table">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178753646129690600">
<p>Claude CodeやCodexとant2 CMSは、どちらか一方を選ぶものではなく、目的によって使い分けることができます。</p>
<p>AIが得意な部分はAIに任せ、自社でできる更新は自社で行い、専門的な判断が必要な部分だけプロへ相談する方法もあります。 例えば、WEBサイトの目的や構成、デザインの基本ルール、重要なページなどはプロと一緒に設計します。</p>
<p>制作の過程では、Claude CodeやCodexなどを活用して作業を効率化することもできます。 そして、サイト公開後のお知らせやブログ、事例の追加などは、CMSを使って自社で更新します。</p>
<p>大きなデザイン変更、技術的な問題が発生したときには、必要に応じて再びプロへ相談します。 このように役割を分けることで、AIの手軽さや速さ、プロの専門性、CMSの運用しやすさを組み合わせられます。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178753646129698100">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th width="20%">役割</th>
            <th>活用する内容</th>
        </tr>
        <tr>
            <td>AI</td>
            <td>コードの作成や修正、デザインの調整</td>
        </tr>
        <tr>
            <td>自社</td>
            <td>お知らせやブログ、事例の追加</td>
        </tr>
        <tr>
            <td>プロ</td>
            <td>WEBサイトの目的や構成、デザインの基本ルール、重要なページ</td>
        </tr>
        <tr>
            <td>ant2 CMS</td>
            <td>ページ作成、ブログ、トピックス、メールフォーム</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178711682811542300 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178711682811543000">ant2 CMS・サービスでの設定・活用方法</h2>
<div class="cms-content-parts-sin178711682811543900 box cparts-id437--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711682811544600">
<p>ant2 CMSでは、ページ作成、ブログ、トピックス、メールフォームなど、サイト運用に必要なさまざまなコンテンツを管理できます。</p>
<p>AIで制作を効率化し、その後の更新・管理をant2 CMSで仕組み化することで、「作った人しか分からないサイト」ではなく、会社として継続して管理できるWEBサイトを目指すことができます。</p>
<p>AIと組み合わせながらant2 CMSをどのように活用できるのかをご紹介します。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178711682811545200" class="cparts-editsite--img cms-easy-edit" alt="ant2 CMS・サービスでの設定・活用方法" src="https://ant2.net/images/magazine/2026/08/05_ant2_cms_settings_and_usage.jpg" width="330" title="" name="" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin178711682811546100 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178711682811546800">ページの追加・修正</h3>
<div class="cms-content-parts-sin178711781859005000 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711781859015800">
<p>AIを使えば、新しいページをすばやくその都度作ることができます。</p>
<p>しかし、担当者ごとに異なる指示でページを作成したり、同じ作業を繰り返したりすると、見出しの位置や情報の順番、 ボタンの配置などが少しずつ変わり、サイト全体の統一感がなくなってしまうことがあります。</p>
<p>そこで、よく作成するページは、最初にプロが「ひな形」を設計しておく方法がおすすめです。 ant2 CMSでは、新しいページを空の状態から作成するだけでなく、既存のページをコピーして作成することができます。</p>
<p>これにより、毎回ゼロからページを作る必要がなくなり、担当者が変わっても同じ構成・デザインでページを追加しやすくなります。サイト全体の統一感を保ちながら、更新作業の手間を減らすことにもつながります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178711781859023500" class="cparts-editsite--img cms-easy-edit" alt="ページ作成" src="https://ant2.net/images/magazine/2026/08/images2026081918000396.png" width="330" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin178711682811551600 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178711682811553200">変更履歴の確認</h3>
<div class="cms-content-parts-sin178711783812645500 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711783812656500">
<p>複数人でサイトを更新していると、 「昨日まであった文章が変わっている」 「どの変更から表示がおかしくなったのか分からない」 ということが起こる場合があります。</p>
<p>ant2 CMSでは、変更履歴からログインしているアカウントの変更内容を確認でき、複数のアカウントで管理している場合には、全員の変更履歴も確認できます。<br />
また、履歴から対象の変更を元に戻す操作も行えます。</p>
<p>AIを使うと短時間で多くの内容を変更できるからこそ、「変更できること」だけではなく、「変更した内容を追えること」も大切です。</p>
<p>変更内容を確認できる仕組みを持っておくことで、複数人でも安心してサイトを更新しやすくなります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178711783812663800" class="cparts-editsite--img cms-easy-edit" alt="変更履歴" src="https://ant2.net/images/magazine/2026/08/images2026081918000687.png" width="330" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin178711794547861800 cparts-editsite--mainttl" id="cms-editor-textarea-sin178711794547872200">不具合が起きたときの対応</h3>
<div class="cms-content-parts-sin178711682811556700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178711682811556700 cparts-id119 lay-margin-b--3 box" style="margin-bottom:50px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711682811557400">
<p>AIでサイトを制作した場合に見落とされやすいのが、「問題が起きたときに誰が対応するのか」という点です。</p>
<ul>
    <li>ページが正しく表示されない</li>
    <li>お問い合わせが送信できない</li>
    <li>編集サイトにログインできない</li>
    <li>どこを変更したらよいのか分からない</li>
    <li>ドメインやサーバーに関する設定が分からない</li>
</ul>
<p>といった問題が起きたとき、すべてをWEB担当者が解決できるとは限りません。 <br />
AIに質問して解決できることもありますが、原因を正しく切り分け、責任を持って対応できる体制を用意しておくことが重要です。</p>
<p>ant2 CMSでは、操作方法が分からない場合や困ったことがあった場合に、電話・メール・お問い合わせフォームから相談できるサポート体制を用意しています。</p>
<p>そのため、「この操作で合っているのか分からない」「更新しようとしたら思った表示にならない」といったときにも、 担当者だけで悩み続けるのではなく、サポートへ相談しながらWEBサイトを運用できます。</p>
<p>また、WEBサイトの運用にはCMSだけでなく、サーバーやドメインの管理も必要です。<br />
ant2 CMSのサービスでは、独自ドメインやサーバー、CMSなど、WEBサイトの運用に必要な環境をまとめて管理できます。そのため、WEB担当者が技術的な管理をすべて抱え込むのではなく、お知らせやページの更新、商品・サービスの情報発信といった、本来のWEBサイト運用に専念しやすくなります。</p>
<p>そのため、WEB担当者が技術的な管理をすべて抱え込むのではなく、お知らせやページの更新、商品・サービスの情報発信といった、本来のWEBサイト運用に専念しやすくなります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178711682811558200 cparts-editsite--mainttl cparts-id003" id="cms-editor-textarea-sin178711682811558900">セキュリティ対策</h3>
<div class="cms-content-parts-sin178711682811559600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178711682811559600 cparts-id119 lay-margin-b--3 box" style="margin-bottom:50px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711682811560300">
<p><span style="font-size: 1.6rem;">WEB</span>サイトを自社で更新・運用していくうえでは、アカウントやログイン情報を適切に管理することも重要です。 ant2 CMSでは、対応するサイトで2段階認証を設定し、ID・パスワードに加えて認証コードを使ったログイン認証を利用できます。</p>
<p>また、アカウントごとに利用できる機能を制限することもできます。</p>
<ul>
    <li>必要な人にだけアカウントを発行する</li>
    <li>ブログだけ更新できる権限のアカウントを発行する</li>
    <li>管理者権限を持つ人を限定する</li>
    <li>担当者が異動・退職した場合はアカウントを見直す</li>
</ul>
<p>といったように、社内での役割に合わせて運用することができます。 誰でもすべての機能を操作できる状態にするのではなく、「必要な人が、必要な範囲だけ操作できる状態」にしておくことで、誤操作や意図しない変更を防ぎやすくなります。</p>
<p>さらに、WEBサイトのセキュリティ対策は、管理画面へのログイン対策だけではありません。 ant2 CMSでは、常時SSL化や2段階認証、メールフォームの連続送信制限に加え、定期的な脆弱性チェックや自動アップデートなど、WEBサイトを継続して利用するためのセキュリティ対策も行われています。</p>
<p>AIを利用したサイト制作では「完成させること」に意識が向きやすいですが、WEBサイトは公開後もセキュリティ上のリスクへ継続的に対応する必要があります。 その点、ant2 CMSでは、担当者がすべての技術的な対応を自分で行うのではなく、システム側のアップデートやセキュリティ対策を含めた環境でWEBサイトを運用できます。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178711682811563900 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178711682811564700">まとめ</h2>
<div class="cms-content-parts-sin178711682811565600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178711682811566300">
<p>Claude CodeやCodexなどのAIコーディングエージェントによって、WEB制作のハードルは以前より大きく下がりました。</p>
<p>コードの作成や修正、デザインの調整など、これまで専門知識が必要だった作業の一部をAIに任せることで、WEB制作をより早く、効率的に進められるようになっています。 しかし、企業のWEBサイトで大切なのは、「ページを作れるかどうか」だけではありません。</p>
<ul>
    <li>誰に何を伝えるのかを整理し、必要なページや導線を設計すること</li>
    <li>AIが作成した内容が適切かを確認すること</li>
    <li>公開後に誰が更新し、困ったときに誰へ相談するのかを決めること</li>
    <li>数年後も安全に運用し続けられる環境を整えること</li>
</ul>
<p>こうした部分には、人による判断やプロの知識・経験が必要です。</p>
<p>これからのWEB制作では、「AIか、プロか」という二択ではなく、それぞれの得意な部分を組み合わせることが重要になってくるのではないでしょうか。</p>
<p>ant2 CMSでは、変更履歴やユーザー権限、バックアップ、2段階認証などの機能に加え、サーバー・ドメイン・セキュリティ面の管理や、困ったときに相談できるサポート体制も用意されています。 「作って終わり」ではなく、会社として安心して更新し、育て続けられるWEBサイトにすること。</p>
<p>AIでWEBサイトを作りやすくなった今だからこそ、制作後の運用まで見据えて、AI・プロ・ant2 CMSを上手に使い分けてみてはいかがでしょうか。</p>
</div>
</div>
</div>
</div>
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402150145358000">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/07/22004/">
<title>WordPress、Wix、STUDIO、ペライチ、ant2 CMSの違いとは？目的別に選ぶCMS比較</title>
<link>https://ant2.net/magazine/2026/07/22004/</link>
<description>




こんにちは。アントアントのメルマガ担当です。 いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は、ホームページ制作やWEBサイト運用でよく比較される「WordPress」「Wix」「STUDIO」「ペライチ」「ant2 CMS」の違いについてご紹介します。

 自社にはどのCMSが合っているのか分からない
 公開後に自分たちで更新しやすいものを選びたい
 お問い合わせや予約、メルマガ配信まで活用したい

このようなお悩みをお持ちの方も多いのではないでしょうか。
CMSやホームページ作成サービスは、それぞれ得意分野が異なります。大切なのは、単に「作りやすいか」だけではなく、「公開後にどのように運用していくか」まで考えて選ぶことです。
そこで今回は、それぞれの特徴、メリット、デメリットを整理したうえで、比較表を使って違いを分かりやすくご紹介します。









各サービスの特徴




まずは、それぞれのサービスが得意とするサイトや運用方法を整理します。
作成時の手軽さだけでなく、公開後の更新や機能追加まで見比べることが大切です。




WordPress




WordPressは、世界中で広く利用されているオープンソースのCMSです。ブログ、企業サイト、メディアサイト、採用サイト、オンラインショップなど、さまざまなWebサイトに対応しやすい点が特徴です。
ページや記事は、ブロックエディターを使って作成します。文章、画像、見出し、ボタンなどをブロック単位で配置できるため、コードを書かなくてもコンテンツを編集できます。
また、デザインは「テーマ」を使って変更でき、機能は「プラグイン」を追加することで拡張できます。
お問い合わせフォーム、SEO対策、バックアップ、オンラインショップ、SNS連携など、目的に合わせて機能を追加できる自由度の高さが魅力です。
一方で、プラグインの更新、セキュリティ対策、バックアップなど、公開後の管理も必要になります。









メリット
WordPressの大きなメリットは、自由度と拡張性の高さです。
テーマやプラグインが豊富なため、デザインや機能を目的に合わせて作り込みやすい点が魅力です。
ブログ、企業サイト、メディアサイト、採用サイト、ECサイトなど、幅広いサイトに対応しやすい点が特徴です。
長期的にサイトを育てていきたい場合にも向いています。




デメリット
一方で、サーバー管理、セキュリティ対策、プラグイン更新、バックアップなどを自社または制作会社側で管理する必要があります。
自由度が高い分、管理を怠ると不具合やセキュリティリスクにつながる可能性があります。
そのため、WEBに詳しい担当者がいない場合や、公開後の保守管理をできるだけ簡単にしたい場合は、運用体制を事前に考えておくことが大切です。




Wix




Wixは、テンプレートやAI機能を活用しながら、専門知識が少ない方でもWebサイトを作成しやすいサービスです。ドラッグ＆ドロップで直感的に編集できるため、店舗サイト、個人事業主のサービス紹介サイト、ポートフォリオ、簡易的な企業サイトなどを手軽に公開できます。
また、SEO設定、アクセス解析、メール配信、予約、オンラインショップなど、公開後の運用に役立つ機能も用意されています。Webサイトの作成から集客、予約、販売までを一つのサービス内で始めやすい点が特徴です。
一方で、独自の細かなカスタマイズや、将来的な他システムへの移行を重視する場合は、事前に確認しておくと安心です。









メリット
Wixのメリットは、専門知識が少なくても始めやすい点です。
テンプレートを選び、画面上で編集しながらサイトを作成できるため、短期間で見栄えのよいサイトを公開しやすいサービスです。
また、予約、EC、フォーム、メール配信、分析など、ビジネス向け機能も用意されています。




デメリット
独自仕様の中で運用するサービスのため、細かいカスタマイズやほかのシステムへの移行を重視する場合は注意が必要です。
手軽に始められる反面、将来的に複雑な機能追加や大規模な独自開発を行いたい場合は、どこまで対応できるかを事前に確認しておくと安心です。




STUDIO




STUDIOは、デザイン性の高いWebサイトをノーコードで制作できる国産のWebサイト制作プラットフォームです。コードを書かなくても、レイアウトや余白、文字の見せ方などを細かく調整しやすく、ブランドサイト、採用サイト、サービスサイト、LPなどに向いています。
CMS、フォーム、SEO設定、公開予約、チームでの編集などにも対応しているため、デザイン性を保ちながら、お知らせや記事コンテンツを更新していく運用にも活用できます。
一方で、予約管理、オンラインショップ、会員管理、メルマガ配信などを本格的に行いたい場合は、外部サービスとの連携や別途運用方法を確認しておくことが大切です。










メリット
STUDIOのメリットは、コードを書かずにデザイン性の高いサイトを作りやすい点です。
ブランドサイト、サービスサイト、LPなど、見た目の印象を重視したいWEBサイトに向いています。
デザインとコンテンツを分けて管理しやすいため、ニュースやブログなどの更新にも活用できます。




デメリット
会員管理、メルマガ配信、予約管理、オンラインショップなど、業務運用に関わる機能を本格的に使いたい場合は、外部サービスとの連携や別途設計が必要になる場合があります。
デザイン性を重視したサイト制作には強い一方で、予約、販売、会員向け情報発信まで一つのCMS内でまとめて管理したい場合は、必要な機能を事前に確認しておくことが大切です。




ペライチ




ペライチは、専門知識がなくてもホームページやLPを作成しやすいサービスです。
テンプレートを使ってページを作成できるため、セミナー告知、キャンペーンページ、イベント募集、商品販売、予約受付など、目的がはっきりした広告ページを素早く公開したい場合に向いています。
フォーム、決済、予約、メールマガジン、顧客管理などの機能も用意されており、ページを作るだけでなく、申し込み受付や販売、顧客への案内配信までつなげやすい点が特徴です。
一方で、ページ数が多い企業サイトや、階層構造が複雑なサイトを長期的に運用する場合は、事前にサイト構成を整理しておく必要があります。









メリット
LPや告知ページを素早く作りやすい点です。
セミナー告知、キャンペーンページ、イベント募集、商品販売、予約受付など、目的が明確なページに向いています。
また、フォーム、予約、決済、メール、顧客管理などの機能があり、顧客情報を管理してメール配信に活用できる機能もあります。




デメリット
ページ数が多い企業サイトや、階層構造が複雑なサイト、大規模なコンテンツ運用を行う場合は、事前の設計が重要です。
LPや小規模サイトには向いていますが、会社案内、サービス紹介、実績紹介、採用情報、ブログ、会員向けページなどを長期的に増やしていく場合は、運用しやすい構成にできるかを確認しておく必要があります。




ant2 CMS




ant2 CMSは、WEBサイトの作成だけでなく、公開後の更新、集客、顧客管理まで考えられたCMSです。
ページ作成、トピックス、ブログ、イベント、アルバム、ページリスト、メニューリスト、外国語ページ自動作成、デザイン変更など、サイト制作と更新に必要な機能が用意されています。
さらに、SEOに関する設定やアクセス状況の確認も行えます。
検索されたいキーワードを意識してページを見直したり、アクセス解析を確認しながら改善点を探したりできるため、公開後もサイトを育てていく運用に役立ちます。









メリット
ant2 CMSのメリットは、ホームページを作るだけでなく、運用まで一つの管理画面で行いやすい点です。
ニュースやブログの更新、AI機能による文章作成、SEO設定、問い合わせや予約、会員向け情報、メルマガ配信、オンラインショップなど、公開後の活用まで考えやすい構成になっています。
また、オンラインショップ、会員管理、メルマガ管理、LINE予約連携、外国語ページ自動作成、スマホアプリなどの機能も用意されています。




デメリット
ant2 CMSは多機能なCMSのため、使い始める前に「どの機能を優先して活用するか」を整理しておくことが大切です。
ページ作成、ブログ、SEO、会員管理、メルマガ配信、オンラインショップ、LINE予約連携など、できることが多い分、目的があいまいなまま始めると、どこから設定すればよいか迷ってしまう場合があります。
導入時には、まず必要なページや更新内容を整理し、次に集客や顧客管理に必要な機能を段階的に活用していくとスムーズです。




比較項目




サービスを選ぶ際は、制作時の使いやすさだけでなく、公開後に必要となる更新、集客、予約、販売、顧客管理まで含めて比較しましょう。
利用するプラン、拡張機能、外部連携、制作・運用体制によって対応範囲が変わるため、導入前に各サービス公式からの最新の情報をご確認ください。









 ◎：特に向いている
 〇：対応しやすい
 △：対応は可能だが、プラン、外部連携、拡張機能、制作知識などの確認が必要
 &#215;：標準機能としては向きにくい、または別サービスとの連携が前提になりやすい









※横にスクロールできます。









 
 
 比較項目
 WordPress
 Wix
 STUDIO
 ペライチ
 ant2 CMS
 
 
 専門知識が少なくても作成しやすい
 &#215;
 ◎
 〇
 ◎
 ◎
 
 
 デザインを調整しやすい
 ◎
 〇
 ◎
 △
 〇
 
 
 ブログ・ニュースなどを更新しやすい
 ◎
 〇
 〇
 〇
 ◎
 
 
 複数ページの企業サイトに向いている
 ◎
 ◎
 〇
 △
 ◎
 
 
 SEO設定やアクセス改善に活用しやすい
 △
 〇
 〇
 〇
 ◎
 
 
 予約を管理しやすい
 △
 ◎
 △
 ◎
 △
 
 
 オンラインショップ・決済に対応しやすい
 △
 ◎
 &#215;
 〇
 〇
 
 
 会員管理・メルマガ配信に活用しやすい
 △
 〇
 &#215;
 〇
 ◎
 
 
 変更履歴・バックアップなど運用管理がしやすい
 △
 〇
 〇
 △
 ◎
 
 
 公開後の集客・顧客管理まで含めて活用しやすい
 △
 〇
 △
 〇
 ◎
 
 





ant2 CMSの良いところ





CMS選びで大切なのは、「どのサービスで作るか」だけではありません。
公開後に、誰が、どのように、どのくらいの頻度で更新するかが重要です。
ant2 CMSの良いところは、ホームページを「作って終わり」にせず、継続的に育てていきやすい点です。

 更新担当者が使いやすい
 SEOとアクセス解析を運用に組み込める
 顧客との関係づくりに活用できる
 販売にもつなげやすい
 長期運用に必要な管理機能がある








01更新担当者が使いやすい



ant2 CMSは、ページ作成、ニュース、ブログ、イベント記事、アルバムなどを管理画面から作成できます。
ページリストでは、サイト内のページを一覧で管理し、URLの管理やページの追加・削除などを一元管理できます。
日々の更新を制作会社だけに任せるのではなく、社内担当者や店舗スタッフが必要な情報を更新しやすい点は、長期運用において大きなメリットです。







02SEOとアクセス解析を運用に組み込める



ant2 CMSでは、SEOの目標設定、Google Search Console・Googleアナリティクスとの連携、SEOキーワード確認などが用意されています。
目標設定したキーワードがページ内に使われているか確認できる機能もあります。
そのため、「公開して終わり」ではなく、「どのページを改善するか」「どのキーワードを意識して記事を書くか」といった運用につなげやすくなります。







03顧客との関係づくりに活用できる



ant2 CMSでは、会員管理やメルマガ管理を活用できます。会員管理では、マイページ表示、お知らせ配信、会員グループごとのアクセス制御などを設定できます。
メルマガ配信機能にて、サイト会員やオンラインショップの顧客へメールマガジンを配信できます。例えば、次のような活用ができます。

 会員限定のお知らせを掲載する
 既存顧客へキャンペーン情報を配信する
 セミナー参加者へ次回案内を送る
 スクール会員へ教材や更新情報を届ける
 店舗のリピーターへ特典情報を案内する

ホームページを「見てもらう場所」から、「お客さまとつながり続ける場所」に変えていくことができます。







04販売にもつなげやすい



ant2 CMSでは、オンラインショップも活用できます。
オンラインショップでは、商品登録、支払方法、配送設定、顧客管理など、ショップ運営に必要な設定を行えます。
店舗、スクール、サロン、相談サービス、イベント運営などでは、ホームページから購入につなげる導線づくりが重要です。ant2 CMSなら、情報発信だけでなく、申し込み、販売までを見据えた運用がしやすくなります。







05長期運用に必要な管理機能がある



ant2 CMSには、変更履歴、バックアップ、サイト公開予約などの機能があります。
変更履歴では操作のやり直しやほかアカウントの変更履歴確認ができ、バックアップではサイトデータの保存・復元ができます。サイト公開予約では、編集した内容を反映する日時を予約できます。
キャンペーン開始日、ニュースリリース、採用情報の公開、年末年始のお知らせなど、公開日時が決まっている情報発信にも活用できます。




CMS選びは「公開後の運用」で考えましょう




CMSを選ぶときは、デザインや初期費用だけで判断するのではなく、公開後の運用をイメージすることが大切です。
このような視点で考えると、自社に合ったCMSを選びやすくなります。

 誰が更新するのか
 どのくらいの頻度で情報発信するのか
 問い合わせや予約を増やしたいのか
 会員向けに情報を届けたいのか
 メルマガやオンラインショップも活用したいのか
 将来的にページ数や機能を増やす可能性があるのか






まとめ




WordPress、Wix、STUDIO、ペライチ、ant2 CMSは、それぞれ得意分野が異なります。
自由度の高さを重視するならWordPress、手軽にWEBサイトを公開したいならWix、デザイン性を重視するならSTUDIO、LPや予約・決済を素早く始めたいならペライチが候補になります。
一方で、企業や店舗がホームページを継続的に更新し、ニュース、ブログ、SEO、問い合わせ、予約、会員管理、メルマガ配信、オンラインショップまで活用したい場合は、ant2 CMSが向いています。
ホームページは、作って終わりではありません。公開後に更新し、改善し、お客さまとの接点を増やしていくことで、集客や顧客づくりに役立つ大切な営業ツールになります。
CMSを選ぶ際は、「どのサービスで作るか」だけでなく、「公開後にどのように活用するか」まで考えてみてください。
ホームページを長く運用し、集客、予約、販売、リピーターづくりにつなげたい場合は、ant2 CMSの機能をぜひ有効にご活用ください。








デモ登録はこちら




【イベント出展】『営業・マーケDXPO東京&#039;26【夏】』に出展いたします！
（2026年8月20日・8月21日）







 会場：東京ビッグサイト 西1・2・3ホール
 ブース情報：小間番号【3 - 66】広告・コンテンツ制作展エリア
 日時：
 
 8月20日（木） 9:30～17:30
 8月21日（金） 9:30～16:30
 
 
 詳細はこちら





</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-07-22T00:00:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin178468441656561900" class="cms-content-parts-sin178468441656570400">
<div class="cms-content-parts-sin178401901158877900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401901158883500">
<p>こんにちは。アントアントのメルマガ担当です。 いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>今回は、ホームページ制作やWEBサイト運用でよく比較される「WordPress」「Wix」「STUDIO」「ペライチ」「ant2 CMS」の違いについてご紹介します。</p>
<ul>
    <li>自社にはどのCMSが合っているのか分からない</li>
    <li>公開後に自分たちで更新しやすいものを選びたい</li>
    <li>お問い合わせや予約、メルマガ配信まで活用したい</li>
</ul>
<p>このようなお悩みをお持ちの方も多いのではないでしょうか。</p>
<p>CMSやホームページ作成サービスは、それぞれ得意分野が異なります。大切なのは、単に「作りやすいか」だけではなく、「公開後にどのように運用していくか」まで考えて選ぶことです。</p>
<p>そこで今回は、それぞれの特徴、メリット、デメリットを整理したうえで、比較表を使って違いを分かりやすくご紹介します。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178401901158884700 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin178401901158886600" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/07/knowhow20260789871-02.png" width="675" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178401901158888500 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178401901158889000">各サービスの特徴</h2>
<div class="cms-content-parts-sin178402099094418500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402099094428900">
<p>まずは、それぞれのサービスが得意とするサイトや運用方法を整理します。<br />
作成時の手軽さだけでなく、公開後の更新や機能追加まで見比べることが大切です。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178401917028278300 cparts-editsite--mainttl" id="cms-editor-textarea-sin178401917028282000">WordPress</h3>
<div class="cms-content-parts-sin178463215148453500 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178463215148463200">
<p>WordPressは、世界中で広く利用されているオープンソースのCMSです。ブログ、企業サイト、メディアサイト、採用サイト、オンラインショップなど、さまざまなWebサイトに対応しやすい点が特徴です。<br />
ページや記事は、ブロックエディターを使って作成します。文章、画像、見出し、ボタンなどをブロック単位で配置できるため、コードを書かなくてもコンテンツを編集できます。<br />
また、デザインは「テーマ」を使って変更でき、機能は「プラグイン」を追加することで拡張できます。<br />
お問い合わせフォーム、SEO対策、バックアップ、オンラインショップ、SNS連携など、目的に合わせて機能を追加できる自由度の高さが魅力です。<br />
一方で、プラグインの更新、セキュリティ対策、バックアップなど、公開後の管理も必要になります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><a href="https://ja.wordpress.org/" rel="otherurl" title="" target="_blank"><img id="cms-editor-image-sin178463215148470400" class="cparts-editsite--img cms-easy-edit" alt="スクリーンショット 2026-07-21 200822" src="https://ant2.net/images/magazine/2026/07/images2026072120080960.png" width="330" title="" name="" /></a></div>
</div>
</div>
<div class="cms-content-parts-sin178401922184601700 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401922184604700">
<h4>メリット</h4>
<p>WordPressの大きなメリットは、自由度と拡張性の高さです。</p>
<p>テーマやプラグインが豊富なため、デザインや機能を目的に合わせて作り込みやすい点が魅力です。</p>
<p>ブログ、企業サイト、メディアサイト、採用サイト、ECサイトなど、幅広いサイトに対応しやすい点が特徴です。</p>
<p>長期的にサイトを育てていきたい場合にも向いています。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401922184605000">
<h4>デメリット</h4>
<p>一方で、サーバー管理、セキュリティ対策、プラグイン更新、バックアップなどを自社または制作会社側で管理する必要があります。</p>
<p>自由度が高い分、管理を怠ると不具合やセキュリティリスクにつながる可能性があります。</p>
<p>そのため、WEBに詳しい担当者がいない場合や、公開後の保守管理をできるだけ簡単にしたい場合は、運用体制を事前に考えておくことが大切です。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178402087405400600 cparts-editsite--mainttl" id="cms-editor-textarea-sin178402087405408700">Wix</h3>
<div class="cms-content-parts-sin178463204282753700 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178463204282764000">
<p class="isSelectedEnd">Wixは、テンプレートやAI機能を活用しながら、専門知識が少ない方でもWebサイトを作成しやすいサービスです。ドラッグ＆ドロップで直感的に編集できるため、店舗サイト、個人事業主のサービス紹介サイト、ポートフォリオ、簡易的な企業サイトなどを手軽に公開できます。</p>
<p class="isSelectedEnd">また、SEO設定、アクセス解析、メール配信、予約、オンラインショップなど、公開後の運用に役立つ機能も用意されています。Webサイトの作成から集客、予約、販売までを一つのサービス内で始めやすい点が特徴です。</p>
<p>一方で、独自の細かなカスタマイズや、将来的な他システムへの移行を重視する場合は、事前に確認しておくと安心です。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img src="https://ant2.net/images/magazine/202607/images20260728093412.png" class="cparts-editsite--img cms-easy-edit" width="330" alt="" style="max-width: 100%; height: auto;" /></div>
</div>
</div>
<div class="cms-content-parts-sin178402087405413500 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402087405414800">
<h4>メリット</h4>
<p>Wixのメリットは、専門知識が少なくても始めやすい点です。</p>
<p>テンプレートを選び、画面上で編集しながらサイトを作成できるため、短期間で見栄えのよいサイトを公開しやすいサービスです。</p>
<p>また、予約、EC、フォーム、メール配信、分析など、ビジネス向け機能も用意されています。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402087405416600">
<h4>デメリット</h4>
<p>独自仕様の中で運用するサービスのため、細かいカスタマイズやほかのシステムへの移行を重視する場合は注意が必要です。</p>
<p>手軽に始められる反面、将来的に複雑な機能追加や大規模な独自開発を行いたい場合は、どこまで対応できるかを事前に確認しておくと安心です。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178402087405418200 cparts-editsite--mainttl" id="cms-editor-textarea-sin178402087405418500">STUDIO</h3>
<div class="cms-content-parts-sin178463220261627700 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178463220261638100">
<p class="isSelectedEnd">STUDIOは、デザイン性の高いWebサイトをノーコードで制作できる国産のWebサイト制作プラットフォームです。コードを書かなくても、レイアウトや余白、文字の見せ方などを細かく調整しやすく、ブランドサイト、採用サイト、サービスサイト、LPなどに向いています。</p>
<p class="isSelectedEnd">CMS、フォーム、SEO設定、公開予約、チームでの編集などにも対応しているため、デザイン性を保ちながら、お知らせや記事コンテンツを更新していく運用にも活用できます。</p>
<p>一方で、予約管理、オンラインショップ、会員管理、メルマガ配信などを本格的に行いたい場合は、外部サービスとの連携や別途運用方法を確認しておくことが大切です。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/202607/images20260728093650.png" width="330" title="" name="" /></div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178402087405419500 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402087405419800">
<h4>メリット</h4>
<p>STUDIOのメリットは、コードを書かずにデザイン性の高いサイトを作りやすい点です。</p>
<p>ブランドサイト、サービスサイト、LPなど、見た目の印象を重視したいWEBサイトに向いています。</p>
<p>デザインとコンテンツを分けて管理しやすいため、ニュースやブログなどの更新にも活用できます。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402087405420100">
<h4>デメリット</h4>
<p>会員管理、メルマガ配信、予約管理、オンラインショップなど、業務運用に関わる機能を本格的に使いたい場合は、外部サービスとの連携や別途設計が必要になる場合があります。</p>
<p>デザイン性を重視したサイト制作には強い一方で、予約、販売、会員向け情報発信まで一つのCMS内でまとめて管理したい場合は、必要な機能を事前に確認しておくことが大切です。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178402087405420400 cparts-editsite--mainttl" id="cms-editor-textarea-sin178402087405420800">ペライチ</h3>
<div class="cms-content-parts-sin178463224452530800 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178463224452541000">
<p class="isSelectedEnd">ペライチは、専門知識がなくてもホームページやLPを作成しやすいサービスです。<br />
テンプレートを使ってページを作成できるため、セミナー告知、キャンペーンページ、イベント募集、商品販売、予約受付など、目的がはっきりした広告ページを素早く公開したい場合に向いています。</p>
<p class="isSelectedEnd">フォーム、決済、予約、メールマガジン、顧客管理などの機能も用意されており、ページを作るだけでなく、申し込み受付や販売、顧客への案内配信までつなげやすい点が特徴です。</p>
<p>一方で、ページ数が多い企業サイトや、階層構造が複雑なサイトを長期的に運用する場合は、事前にサイト構成を整理しておく必要があります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><a href="https://peraichi.com/" rel="otherurl" title="" target="_blank"><img id="cms-editor-image-sin178463224452548600" class="cparts-editsite--img cms-easy-edit" alt="スクリーンショット 2026-07-21 200524" src="https://ant2.net/images/magazine/2026/07/images2026072120075955.png" width="330" title="" name="" /></a></div>
</div>
</div>
<div class="cms-content-parts-sin178402087405421600 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402087405422000">
<h4>メリット</h4>
<p>LPや告知ページを素早く作りやすい点です。</p>
<p>セミナー告知、キャンペーンページ、イベント募集、商品販売、予約受付など、目的が明確なページに向いています。</p>
<p>また、フォーム、予約、決済、メール、顧客管理などの機能があり、顧客情報を管理してメール配信に活用できる機能もあります。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402087405422300">
<h4>デメリット</h4>
<p>ページ数が多い企業サイトや、階層構造が複雑なサイト、大規模なコンテンツ運用を行う場合は、事前の設計が重要です。</p>
<p>LPや小規模サイトには向いていますが、会社案内、サービス紹介、実績紹介、採用情報、ブログ、会員向けページなどを長期的に増やしていく場合は、運用しやすい構成にできるかを確認しておく必要があります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178402087405422700 cparts-editsite--mainttl" id="cms-editor-textarea-sin178402087405423000">ant2 CMS</h3>
<div class="cms-content-parts-sin178468226016329000 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178468226016339600">
<p>ant2 CMSは、WEBサイトの作成だけでなく、公開後の更新、集客、顧客管理まで考えられたCMSです。</p>
<p>ページ作成、トピックス、ブログ、イベント、アルバム、ページリスト、メニューリスト、外国語ページ自動作成、デザイン変更など、サイト制作と更新に必要な機能が用意されています。</p>
<p>さらに、SEOに関する設定やアクセス状況の確認も行えます。<br />
検索されたいキーワードを意識してページを見直したり、アクセス解析を確認しながら改善点を探したりできるため、公開後もサイトを育てていく運用に役立ちます。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><a href="https://ant2.net/" rel="otherurl" title="" target="_blank"><img id="cms-editor-image-sin178468226016347700" class="cparts-editsite--img cms-easy-edit" alt="スクリーンショット 2026-07-22 104024" src="https://ant2.net/images/magazine/2026/07/images20260722103712.png" width="330" title="" name="" /></a></div>
</div>
</div>
<div class="cms-content-parts-sin178402087405424200 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402087405424600">
<h4>メリット</h4>
<p>ant2 CMSのメリットは、ホームページを作るだけでなく、運用まで一つの管理画面で行いやすい点です。</p>
<p>ニュースやブログの更新、AI機能による文章作成、SEO設定、問い合わせや予約、会員向け情報、メルマガ配信、オンラインショップなど、公開後の活用まで考えやすい構成になっています。</p>
<p>また、オンラインショップ、会員管理、メルマガ管理、LINE予約連携、外国語ページ自動作成、スマホアプリなどの機能も用意されています。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402087405424900">
<h4>デメリット</h4>
<p>ant2 CMSは多機能なCMSのため、使い始める前に「どの機能を優先して活用するか」を整理しておくことが大切です。</p>
<p>ページ作成、ブログ、SEO、会員管理、メルマガ配信、オンラインショップ、LINE予約連携など、できることが多い分、目的があいまいなまま始めると、どこから設定すればよいか迷ってしまう場合があります。</p>
<p>導入時には、まず必要なページや更新内容を整理し、次に集客や顧客管理に必要な機能を段階的に活用していくとスムーズです。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178401901158898800 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178401901158899300">比較項目</h2>
<div class="cms-content-parts-sin178401942316210900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401942316220700">
<p>サービスを選ぶ際は、制作時の使いやすさだけでなく、公開後に必要となる更新、集客、予約、販売、顧客管理まで含めて比較しましょう。</p>
<p>利用するプラン、拡張機能、外部連携、制作・運用体制によって対応範囲が変わるため、導入前に各サービス公式からの最新の情報をご確認ください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178401943547270600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401943547236200">
<ul>
    <li>◎：特に向いている</li>
    <li>〇：対応しやすい</li>
    <li>△：対応は可能だが、プラン、外部連携、拡張機能、制作知識などの確認が必要</li>
    <li>&#215;：標準機能としては向きにくい、または別サービスとの連携が前提になりやすい</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178410057658345600 cparts-id119 lay-margin-b--3 box cparts-hide-pc" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178410057658345600 cparts-id119 lay-margin-b--3 box" style="margin-bottom:10px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178410057658349300">
<p>※横にスクロールできます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178401901158901200 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin178401901158901600">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th width="25%" style="text-align: center;">比較項目</th>
            <th style="text-align: center;" width="14%">WordPress</th>
            <th style="text-align: center;" width="14%">Wix</th>
            <th style="text-align: center;" width="14%">STUDIO</th>
            <th style="text-align: center;" width="14%">ペライチ</th>
            <th style="text-align: center;" width="14%" bgcolor="#f6f8ff"><span style="color: rgb(59, 78, 154);">ant2 CMS</span></th>
        </tr>
        <tr>
            <td style="text-align: left;">専門知識が少なくても作成しやすい</td>
            <td style="text-align: center;">&#215;</td>
            <td style="text-align: center;">◎</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center;">◎</td>
            <td style="text-align: center;" bgcolor="#f6f8ff"><span style="font-weight: 700; margin-bottom: 0px; -webkit-text-stroke-width: 0.5px;"><span style="color: rgb(59, 78, 154);">◎</span></span></td>
        </tr>
        <tr>
            <td style="text-align: left;">デザインを調整しやすい</td>
            <td style="text-align: center;">◎</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center;">◎</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;" bgcolor="#f6f8ff"><span style="color: rgb(59, 78, 154);"><strong>〇</strong></span></td>
        </tr>
        <tr>
            <td style="text-align: left;">ブログ・ニュースなどを更新しやすい</td>
            <td style="text-align: center;">◎</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center; -webkit-text-stroke: 0.5px currentColor;" bgcolor="#f6f8ff"><strong><span style="color: rgb(59, 78, 154);">◎</span></strong></td>
        </tr>
        <tr>
            <td style="text-align: left;">複数ページの企業サイトに向いている</td>
            <td style="text-align: center;">◎</td>
            <td style="text-align: center;">◎</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center; -webkit-text-stroke: 0.5px currentColor;" bgcolor="#f6f8ff"><span style="color: rgb(59, 78, 154);"><strong>◎</strong></span></td>
        </tr>
        <tr>
            <td style="text-align: left;">SEO設定やアクセス改善に活用しやすい</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center; -webkit-text-stroke: 0.5px currentColor;" bgcolor="#f6f8ff"><span style="color: rgb(59, 78, 154);"><strong>◎</strong></span></td>
        </tr>
        <tr>
            <td style="text-align: left;">予約を管理しやすい</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">◎</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">◎</td>
            <td style="text-align: center; -webkit-text-stroke: 0.5px currentColor;" bgcolor="#f6f8ff"><span style="color: rgb(59, 78, 154);"><strong>△</strong></span></td>
        </tr>
        <tr>
            <td style="text-align: left;">オンラインショップ・決済に対応しやすい</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">◎</td>
            <td style="text-align: center;">&#215;</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center; -webkit-text-stroke: 0.5px currentColor;" bgcolor="#f6f8ff"><span style="font-weight: 700; color: rgb(59, 78, 154); -webkit-text-stroke-width: 0px;">〇</span></td>
        </tr>
        <tr>
            <td style="text-align: left;">会員管理・メルマガ配信に活用しやすい</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center;">&#215;</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center; -webkit-text-stroke: 0.5px currentColor;" bgcolor="#f6f8ff"><span style="color: rgb(59, 78, 154);"><strong>◎</strong></span></td>
        </tr>
        <tr>
            <td style="text-align: left;">変更履歴・バックアップなど運用管理がしやすい</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center; -webkit-text-stroke: 0.5px currentColor;" bgcolor="#f6f8ff"><span style="color: rgb(59, 78, 154);"><strong>◎</strong></span></td>
        </tr>
        <tr>
            <td style="text-align: left;">公開後の集客・顧客管理まで含めて活用しやすい</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">〇</td>
            <td style="text-align: center; -webkit-text-stroke: 0.5px currentColor;" bgcolor="#f6f8ff"><span style="color: rgb(59, 78, 154);"><strong>◎</strong></span></td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178401901158902100 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178401901158902600">ant2 CMSの良いところ</h2>
<div class="cms-content-parts-sin178401901158903300 box cparts-id437--03 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178401901158903800" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/07/ant2_logo_white.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401901158904300">
<p>CMS選びで大切なのは、「どのサービスで作るか」だけではありません。<br />
公開後に、誰が、どのように、どのくらいの頻度で更新するかが重要です。</p>
<p>ant2 CMSの良いところは、ホームページを「作って終わり」にせず、継続的に育てていきやすい点です。</p>
<ol>
    <li>更新担当者が使いやすい</li>
    <li>SEOとアクセス解析を運用に組み込める</li>
    <li>顧客との関係づくりに活用できる</li>
    <li>販売にもつなげやすい</li>
    <li>長期運用に必要な管理機能がある</li>
</ol>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178401901158905000 box cparts-id131--01 lay-margin-b--3 dec-line--primary dec-bg--contents dec-line--radius-sm box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="cparts-head-block lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3 dec-bg--primary">
<h3><span class="cparts-no-block lay-margin-b--1" id="cms-editor-textbox-sin178401901158905500">01</span><span class="cparts-editsite--mainttl cparts-id131--01__ttl" id="cms-editor-textbox-sin178401901158906000">更新担当者が使いやすい</span></h3>
</div>
<div class="cparts-body-block lay-col12-xs-12 lay-col12-md-9 lay-col12-lg-9">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401901158906500">
<p>ant2 CMSは、ページ作成、ニュース、ブログ、イベント記事、アルバムなどを管理画面から作成できます。</p>
<p>ページリストでは、サイト内のページを一覧で管理し、URLの管理やページの追加・削除などを一元管理できます。</p>
<p>日々の更新を制作会社だけに任せるのではなく、社内担当者や店舗スタッフが必要な情報を更新しやすい点は、長期運用において大きなメリットです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178401901158907000 box cparts-id131--01 lay-margin-b--3 dec-line--primary dec-bg--contents dec-line--radius-sm box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="cparts-head-block lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3 dec-bg--primary">
<h3><span class="cparts-no-block lay-margin-b--1" id="cms-editor-textbox-sin178401901158907500">02</span><span class="cparts-editsite--mainttl cparts-id131--01__ttl" id="cms-editor-textbox-sin178401901158908400">SEOとアクセス解析を運用に組み込める</span></h3>
</div>
<div class="cparts-body-block lay-col12-xs-12 lay-col12-md-9 lay-col12-lg-9">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401901158909000">
<p>ant2 CMSでは、SEOの目標設定、Google Search Console・Googleアナリティクスとの連携、SEOキーワード確認などが用意されています。</p>
<p>目標設定したキーワードがページ内に使われているか確認できる機能もあります。<br />
そのため、「公開して終わり」ではなく、「どのページを改善するか」「どのキーワードを意識して記事を書くか」といった運用につなげやすくなります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178401901158909500 box cparts-id131--01 lay-margin-b--3 dec-line--primary dec-bg--contents dec-line--radius-sm box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="cparts-head-block lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3 dec-bg--primary">
<h3><span class="cparts-no-block lay-margin-b--1" id="cms-editor-textbox-sin178401901158910000">03</span><span class="cparts-editsite--mainttl cparts-id131--01__ttl" id="cms-editor-textbox-sin178401901158910500">顧客との関係づくりに活用できる</span></h3>
</div>
<div class="cparts-body-block lay-col12-xs-12 lay-col12-md-9 lay-col12-lg-9">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401901158911000">
<p>ant2 CMSでは、会員管理やメルマガ管理を活用できます。会員管理では、マイページ表示、お知らせ配信、会員グループごとのアクセス制御などを設定できます。<br />
メルマガ配信機能にて、サイト会員やオンラインショップの顧客へメールマガジンを配信できます。例えば、次のような活用ができます。</p>
<ul>
    <li>会員限定のお知らせを掲載する</li>
    <li>既存顧客へキャンペーン情報を配信する</li>
    <li>セミナー参加者へ次回案内を送る</li>
    <li>スクール会員へ教材や更新情報を届ける</li>
    <li>店舗のリピーターへ特典情報を案内する</li>
</ul>
<p>ホームページを「見てもらう場所」から、「お客さまとつながり続ける場所」に変えていくことができます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178401901158911500 box cparts-id131--01 lay-margin-b--3 dec-line--primary dec-bg--contents dec-line--radius-sm box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="cparts-head-block lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3 dec-bg--primary">
<h3><span class="cparts-no-block lay-margin-b--1" id="cms-editor-textbox-sin178401901158912000">04</span><span class="cparts-editsite--mainttl cparts-id131--01__ttl" id="cms-editor-textbox-sin178401901158912500">販売にもつなげやすい</span></h3>
</div>
<div class="cparts-body-block lay-col12-xs-12 lay-col12-md-9 lay-col12-lg-9">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401901158913000">
<p>ant2 CMSでは、オンラインショップも活用できます。</p>
<p>オンラインショップでは、商品登録、支払方法、配送設定、顧客管理など、ショップ運営に必要な設定を行えます。</p>
<p>店舗、スクール、サロン、相談サービス、イベント運営などでは、ホームページから購入につなげる導線づくりが重要です。ant2 CMSなら、情報発信だけでなく、申し込み、販売までを見据えた運用がしやすくなります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178401901158913600 box cparts-id131--01 lay-margin-b--3 dec-line--primary dec-bg--contents dec-line--radius-sm box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="cparts-head-block lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3 dec-bg--primary">
<h3><span class="cparts-no-block lay-margin-b--1" id="cms-editor-textbox-sin178401901158914100">05</span><span class="cparts-editsite--mainttl cparts-id131--01__ttl" id="cms-editor-textbox-sin178401901158914600">長期運用に必要な管理機能がある</span></h3>
</div>
<div class="cparts-body-block lay-col12-xs-12 lay-col12-md-9 lay-col12-lg-9">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401901158915100">
<p>ant2 CMSには、変更履歴、バックアップ、サイト公開予約などの機能があります。</p>
<p>変更履歴では操作のやり直しやほかアカウントの変更履歴確認ができ、バックアップではサイトデータの保存・復元ができます。サイト公開予約では、編集した内容を反映する日時を予約できます。</p>
<p>キャンペーン開始日、ニュースリリース、採用情報の公開、年末年始のお知らせなど、公開日時が決まっている情報発信にも活用できます。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178401901158915700 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178401901158916200">CMS選びは「公開後の運用」で考えましょう</h2>
<div class="cms-content-parts-sin178408104096885000 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178408104096893300">
<p>CMSを選ぶときは、デザインや初期費用だけで判断するのではなく、公開後の運用をイメージすることが大切です。</p>
<p>このような視点で考えると、自社に合ったCMSを選びやすくなります。</p>
<ul>
    <li>誰が更新するのか</li>
    <li>どのくらいの頻度で情報発信するのか</li>
    <li>問い合わせや予約を増やしたいのか</li>
    <li>会員向けに情報を届けたいのか</li>
    <li>メルマガやオンラインショップも活用したいのか</li>
    <li>将来的にページ数や機能を増やす可能性があるのか</li>
</ul>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178408104096900100" class="cparts-editsite--img cms-easy-edit" alt="CMS選びは「公開後の運用」で考えましょう" src="https://ant2.net/images/magazine/2026/07/knowhow20260789871-01.png" width="330" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178401901158917900 cparts-editsite--mainttl cparts-id002" id="cms-editor-textarea-sin178401901158918500">まとめ</h2>
<div class="cms-content-parts-sin178401901158919200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178401901158919800">
<p>WordPress、Wix、STUDIO、ペライチ、ant2 CMSは、それぞれ得意分野が異なります。<br />
自由度の高さを重視するならWordPress、手軽にWEBサイトを公開したいならWix、デザイン性を重視するならSTUDIO、LPや予約・決済を素早く始めたいならペライチが候補になります。<br />
一方で、企業や店舗がホームページを継続的に更新し、ニュース、ブログ、SEO、問い合わせ、予約、会員管理、メルマガ配信、オンラインショップまで活用したい場合は、ant2 CMSが向いています。</p>
<p>ホームページは、作って終わりではありません。公開後に更新し、改善し、お客さまとの接点を増やしていくことで、集客や顧客づくりに役立つ大切な営業ツールになります。<br />
CMSを選ぶ際は、「どのサービスで作るか」だけでなく、「公開後にどのように活用するか」まで考えてみてください。</p>
<p>ホームページを長く運用し、集客、予約、販売、リピーターづくりにつなげたい場合は、ant2 CMSの機能をぜひ有効にご活用ください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178402150145318800 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178402150145318800 cparts-id119 lay-margin-b--3 box" style="margin-bottom:80px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402150145358000">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178402156969237800 cparts-editsite--mainttl" id="cms-editor-textarea-sin178402156969240700">【イベント出展】『営業・マーケDXPO東京'26【夏】』に出展いたします！<br />
（2026年8月20日・8月21日）</h3>
<div class="cms-content-parts-sin178402156969245400 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178402156969247000" class="cparts-editsite--img cms-easy-edit" alt="『営業・マーケDXPO東京'26【夏】" src="https://ant2.net/images/magazine/2026/07/bnr-tks26_info_white-sales.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178402156969248100">
<div></div>
<ul>
    <li>会場：東京ビッグサイト 西1・2・3ホール</li>
    <li>ブース情報：小間番号【3 - 66】広告・コンテンツ制作展エリア</li>
    <li>日時：
    <ul>
        <li>8月20日（木） 9:30～17:30</li>
        <li>8月21日（金） 9:30～16:30</li>
    </ul>
    </li>
    <li><a href="https://dxpo.jp/real/fox/tokyo/sales/" target="_blank">詳細はこちら</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/07/22003/">
<title>Gmailにも広がるAI機能！メール業務はここまで便利に</title>
<link>https://ant2.net/magazine/2026/07/22003/</link>
<description>

こんにちは。アントアントのメルマガ担当です。いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は、Gmailにも広がっているAI機能をテーマに、日々のメール業務でどのようにAIが活用できるのかをご紹介いたします。
ビジネスにおいて、メールの確認や返信は日常的に欠かせない業務のひとつです。
AIを上手に活用すれば、メール作成や確認にかかる時間を短縮し、ほかの業務に充てる時間を増やすことができます。
特に最近では、GmailにもGeminiをはじめとしたAI機能が広がっており、メールの下書き作成、長いやり取りの要約、返信文の提案、過去メールの検索、Google カレンダーとの連携など、実務で役立つ機能が増えています。
本記事では、Gmailに搭載されているAI機能の概要や、どの画面から利用できるのか、利用時に気を付けたいポイントをご紹介いたします。
ご利用中の環境によって表示される機能は異なりますが、日々のメール業務を効率化するヒントとして、ぜひ参考にしてみてください。






実は以前からGmailにはAIが使われています




Gmailでは以前からAIや機械学習を活用した機能が使われています。









 迷惑メールの自動判定
 受信トレイのカテゴリ別分類
 短い返信候補を表示するスマートリプライ
 返信忘れを知らせるナッジ機能
 予約や配送情報などを見やすく表示する概要カード

これらは、メールの内容や利用状況をもとに、必要な情報を整理したり、確認漏れを防いだりするための機能です。
つまり、わたしたちはすでに日常的にGmailのAI機能を利用していたともいえます。









最近注目されているのは、そこにGeminiのような生成AIが加わり、メールの作成や要約、検索、予定調整など、より幅広い業務をサポートできるようになってきた点です。
AIには「整理するAI」と「作成するAI」があり、メールに使われるAIには、大きく分けて「機械学習型AI」と「生成AI」があります。








従来のAIは「整理する」「分類する」「気付かせる」役割が中心でしたが、生成AIの登場により、「文章を作る」「要点をまとめる」「次の行動を提案する」といったサポートまで広がっています。








機械学習型AI
過去のデータや利用状況をもとにパターンを学習し、分類や判定を行う仕組みです。
Gmailでいえば、迷惑メールの判定、受信トレイの自動分類、重要そうなメールの表示、返信忘れの通知などが該当します。




生成AI
入力された内容をもとに文章や要約を作成するAIです。
Gmailでは、メール本文の下書き作成、返信文の作成、長いメールの要約、過去メールからの情報検索などに活用できます。




利用できる機能はアカウントやプランによって異なります




GmailのAI機能は便利ですが、すべてのユーザーが同じ機能を利用できるわけではありません。
利用できる機能は、Google Workspaceの契約プラン、Google AIプラン、管理者側の設定、利用している国や地域、言語設定、端末の種類などによって異なります。








そのため、紹介されている機能であっても、現在ご利用中のGmail画面に表示されない場合があります。
個人用の無料Gmailアカウントでは、一部のAI機能が利用できなかったり、利用できる地域や言語が限られていたりする場合があります。
一方、Google Workspaceを利用している企業や団体では、管理者がAI機能やスマート機能を有効にしているかどうかによって、表示される機能が変わることがあります。





 Google WorkspaceまたはGoogle AIプランの対象か
 管理者によってGemini機能が有効になっているか
 Gmailのスマート機能とパーソナライズ設定が有効か
 Googleアカウントの言語設定が対応言語になっているか
 パソコン版、Android版、iPhone・iPad版のどれを利用しているか









同じGmailでも、利用環境によって表示されるボタンや使える機能が異なる点に注意が必要です。
※2026年7月8日時点の情報であり、Googleの仕様変更などにより予告なく提供ルールが変更される場合がありますのであらかじめご了承ください。




GmailでできるAI活用の例




Gmailでは、AIを活用してメール業務を様々な面からサポートできます。
たとえば、次のような使い方があります。






主な使い方




 簡単な返信文を作成する
 丁寧な表現に整える
 挨拶文や案内文のたたき台を作る
 長いやり取りの要点を確認する
 返信内容の候補を作成する
 過去のメールから必要な情報を探す
 予定に関する内容を確認する
 Google カレンダーに予定を追加する



「返信内容を考えるのに時間がかかる」
「簡単な返事だけれど、文章に迷う」
「長いメールを読む時間を短縮したい」
「日程調整のやり取りを効率化したい」
このような場面では、AIによる文章作成や要約機能が業務時間の短縮に役立ちます。



GeminiはGmail画面右上のアイコンから利用できます




GmailでGeminiを利用できる環境では、パソコン版Gmailの画面右上にGeminiのアイコンが表示される場合があります。
このアイコンをクリックすると、Gmail画面の右側にサイドパネルが開きます。
サイドパネルでは、開いているメールに対して要約を依頼したり、返信案を作成したり、過去のメールから情報を探したりできます。

 このメールを要約して
 このメールへの返信案を作成して
 対応が必要な内容を箇条書きにして
 過去のメールから〇〇に関する内容を探して
 明日の予定を教えて
 会議を金曜日の10時に設定して










Gmailの中で直接質問できるため、別のAIツールを開かなくても、メールを確認しながら作業を進められる点が便利です。




AIでメール作成は「作成画面」や「返信画面」から利用できます




Gmailでメール作成をAIにサポートしてもらう場合は、メールの作成画面や返信画面から利用します。
パソコン版Gmailでは、「作成」をクリックして新規メールを開いた後、本文入力欄の近くに表示される「文書作成サポート」や「 / 」を入力することによって、AIによる下書き作成を利用できます。

 Gmailで「作成」をクリックする
 「文書作成サポート」ボタンを選択する
 「打ち合わせ日程の候補を送るメールを作成して」など、
 作りたい内容を入力する
 AIが作成した下書きを確認する
 必要に応じて内容を修正して送信する










文章をいちから考えるのではなく、AIに下書きを作ってもらい、それを人が確認して整えることで、メール作成にかかる時間を減らすことができます。
返信メールの場合は、受信したメールを開いた状態で返信画面を開き、AIに返信文の作成を依頼できます。
また、作成された文章に対して、より丁寧な表現にしたり、短くしたり、柔らかい表現にしたりする調整ができる場合もあります。












返信提案は、次のような場面で便利です。

 日程調整への返信
 資料受領のお礼
 確認しました、という簡単な返信
 お問い合わせへの一次回答
 社内連絡への返信
 お客さまへの丁寧な案内文

ただし、AIが提案した返信文は、相手との関係性や状況を完全に理解しているとは限りません。
送信前には、宛名、内容、言い回し、日程、金額、添付ファイルの有無などを必ず確認しましょう。




長いやり取りの確認には「要約」機能が役立ちます




Gmailでは、長文のメールや複数回やり取りしているメールに対して、内容を要約できる機能が表示される場合があります。
メールのやり取りが長くなると、

 どこまで話が進んでいるのか
 誰が何を確認する必要があるのか
 次に対応すべき内容は何か
 過去にどのような回答をしていたか

を把握するのに時間がかかることがあります。
AIによる要約機能を活用すると、過去のやり取りをすべて読み返さなくても、概要を把握しやすくなります。
メールスレッドを開いた状態で、PC版：画面右上・スマホ版：画面上部真ん中のGeminiアイコンからサイドパネルを開き、「このスレッドを要約」や「このメールを要約して」といった操作を行うことで、メール内容の要約を確認できます。








PC版の要約





スマホ版の要約









要約機能は、次のような場面で役立ちます。

 長期間続いている問い合わせを確認する
 複数人で進めているプロジェクトの経緯を把握する
 打ち合わせ前に過去のやり取りを確認する
 休暇明けに未確認メールの内容を整理する
 対応事項や期限を確認する

ただし、AIの要約だけで判断するのではなく、重要な決定事項や金額、日程、契約内容などは必ず原文を確認することが大切です。
AIは確認作業を短縮するための補助として使い、最終確認は人が行うという使い方が安心です。




過去のメールやGoogle ドライブ内の情報の探し方




Geminiを利用できる環境では、Gmail内の過去メールから必要な情報を探すこともできます。









 以前届いた見積書のメールを探す
 特定の担当者とのやり取りを確認する
 今週の未読メールを確認する
 予約や配送に関するメールを探す
 過去に受け取った資料の内容を確認する

従来のメール検索では、キーワードや送信者名、日付などを自分で指定して探す必要がありました。
一方、AIを活用すると、「先週届いた会議日程に関するメールを探して」「〇〇さんとのやり取りで、次回の打ち合わせ日時を確認して」のように、自然な言葉で探したい内容を伝えられます。
また、Google ドライブと連携している環境では、「今朝共有された資料の要点を教えて」のように、Google ドライブ内のファイルから情報を確認できる場合もあります。
メールとファイルを横断して情報を探せるようになることで、確認作業の時間短縮につながります。





Google カレンダーとの連携で予定登録もスムーズに




GmailのAI機能では、メール本文の内容をもとにGoogle カレンダーと連携できる場合があります。
たとえば、メールの中に打ち合わせ日時やイベント内容が記載されている場合、Geminiに指示を出すことで、その内容をもとにGoogle カレンダーへ予定を作成できます。









 このメールの内容をカレンダーに追加して
 この打ち合わせをGoogle カレンダーに登録して
 明日の14時からの会議を予定に追加して
 金曜日の10時に打ち合わせを登録して

このように、自然な言葉で指示することで、メール本文の内容や入力した日時をもとに、Google カレンダーへの予定登録をサポートしてくれます。
たとえば、お客さまから「7月8日 15時から打ち合わせをお願いします」というメールが届いた場合、
メールを開いた状態でGeminiに「このメールの内容をカレンダーに追加して」と依頼すると、日時や予定名を読み取り、カレンダー予定の作成につなげることができます。









また、予定登録だけでなく、カレンダーの確認にも活用できます。








たとえば、

 明日の最初の予定を教えて
 今週の会議予定を確認して
 次に〇〇さんと会う予定はいつですか
 今日の午後に空いている時間はありますか

といった確認もできる場合があります。
これにより、メールを確認しながら別画面でカレンダーを開き、日時をコピーして予定を作成する手間を減らしやすくなります。
打ち合わせ、商談、社内会議、面談、オンライン説明会、イベント参加など、メールから予定を登録する機会が多い業務では特に便利です。









Geminiが読み取った日時や予定名が必ず正しいとは限りません。
予定を登録する前、または登録後には、日付、時間、参加者、会議URL、タイムゾーン、予定名などを必ず確認しましょう。




業務効率化につながるAIメールアシスタント




GmailのAI機能は、単に文章を作成するだけの機能ではありません。
本記事でご説明したように【メールの分類、返信提案、要約、検索、翻訳、日程調整】など、メール業務全体を支える「AIメールアシスタント」として活用できます。









 メール作成にかかる時間を短縮できる
 長いメールの要点を把握しやすくなる
 返信漏れや確認漏れを減らしやすくなる
 予定調整の手間を減らせる
 過去メールや関連資料を探しやすくなる

日々のメール業務は、1件ごとの作業時間は短くても、積み重なると大きな負担になります。
AIを活用することで、文章を考える時間や情報を探す時間を減らし、本来集中したい業務に時間を使いやすくなります。





AI活用で気を付けたいこと




GmailのAI機能は便利ですが、利用する際には注意点もあります。
AIが作成した文章や要約は、必ずしもすべて正しいとは限りません。内容の一部が抜けていたり、意図と異なる表現になっていたりする場合があります。








そのため、送信前には次の点を確認しましょう。

 宛名や会社名に誤りがないか
 日付、時間、金額、数量が正しいか
 相手に失礼な表現になっていないか
 必要な情報が抜けていないか
 添付ファイルの案内と実際の添付が合っているか
 機密情報や個人情報を不用意に含めていないか
 AIが作成した文章が自社の方針に合っているか

特に、お客さまへのご案内、契約に関わる内容、費用に関する連絡、個人情報を含むやり取りでは、AIの提案をそのまま使わず、必ず人の目で確認しましょう。









AIは便利な道具ですが、最終的な判断や確認は人が行う必要があります。
「AIが作ったから大丈夫」と考えるのではなく、「AIが作った下書きを、人が確認して整える」という使い方を意識することが大切です。




まとめ




GmailにもAI機能が広がり、メール本文の作成、返信文の提案、文章の調整、長いやり取りの要約、過去メールの検索、Google ドライブ内の情報確認、
Google カレンダーとの連携など、日々の業務をサポートする機能が身近になってきました。
以前からGmailには、迷惑メール判定や自動分類、スマートリプライ、ナッジ機能といったAI機能が搭載されていましたが、新たにGeminiなどの生成AIが加わったことで、現在ではメールの作成や要約、情報検索、予定調整まで幅広くサポートできるようになっています。
ただし、利用できるAI機能は、アカウントの種類や契約プラン、地域、言語、管理者設定によって異なります。
個人用アカウントで使える機能がある一方で、対象プラン限定の機能もある点には注意が必要です。
また、AIが生成した内容はそのまま使用せず、必ず人の目で正確性や表現を確認することが大切です。
AIを「任せるもの」ではなく「補助してくれるもの」として上手に取り入れながら、日々のメール業務をよりスムーズに進めていきましょう。








ant2 CMSのデモ登録はこちら




【イベント出展】『営業・マーケDXPO東京&#039;26【夏】』に出展いたします！
（2026年8月20日・8月21日）







 会場：東京ビッグサイト 西1・2・3ホール
 ブース情報：小間番号【3 - 66】広告・コンテンツ制作展エリア
 日時：
 
 8月20日（木） 9:30～17:30
 8月21日（金） 9:30～16:30
 
 
 詳細はこちら





</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-07-08T00:00:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin178347108717094700" class="cms-content-parts-sin178347108717103300">
<div id="cms-editor-minieditor-sin178298546020534200" class="cms-content-parts-sin178298546020542000">
<p>こんにちは。アントアントのメルマガ担当です。いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。<br />
今回は、Gmailにも広がっているAI機能をテーマに、日々のメール業務でどのようにAIが活用できるのかをご紹介いたします。</p>
<p>ビジネスにおいて、メールの確認や返信は日常的に欠かせない業務のひとつです。<br />
AIを上手に活用すれば、メール作成や確認にかかる時間を短縮し、ほかの業務に充てる時間を増やすことができます。</p>
<p>特に最近では、GmailにもGeminiをはじめとしたAI機能が広がっており、メールの下書き作成、長いやり取りの要約、返信文の提案、過去メールの検索、Google カレンダーとの連携など、実務で役立つ機能が増えています。</p>
<p>本記事では、Gmailに搭載されているAI機能の概要や、どの画面から利用できるのか、利用時に気を付けたいポイントをご紹介いたします。<br />
ご利用中の環境によって表示される機能は異なりますが、日々のメール業務を効率化するヒントとして、ぜひ参考にしてみてください。</p>
</div>
<div class="cms-content-parts-sin178298555382146000 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin178298555382152300" class="cparts-editsite--img cms-easy-edit" alt="Gmailにも広がるAI機能！メール業務はここまで便利に" src="https://ant2.net/images/magazine/2026/07/img01.png" width="675" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178298556439232600 cparts-editsite--mainttl" id="cms-editor-textarea-sin178298556439236300">実は以前からGmailにはAIが使われています</h2>
<div class="cms-content-parts-sin178298559281872700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178298559281876400">
<p>Gmailでは以前からAIや機械学習を活用した機能が使われています。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178298560374447500 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178298560374456300">
<ul>
    <li>迷惑メールの自動判定</li>
    <li>受信トレイのカテゴリ別分類</li>
    <li>短い返信候補を表示するスマートリプライ</li>
    <li>返信忘れを知らせるナッジ機能</li>
    <li>予約や配送情報などを見やすく表示する概要カード</li>
</ul>
<p>これらは、メールの内容や利用状況をもとに、必要な情報を整理したり、確認漏れを防いだりするための機能です。</p>
<p>つまり、わたしたちはすでに日常的にGmailのAI機能を利用していたともいえます。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178298560374456900" class="cparts-editsite--img cms-easy-edit" alt="実は以前からGmailにはAIが使われています" src="https://ant2.net/images/magazine/2026/07/img02.png" width="330" title="" name="" /></div>
</div>
</div>
<div class="cms-content-parts-sin178298563864845900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178298563864849500">
<p>最近注目されているのは、そこにGeminiのような生成AIが加わり、メールの作成や要約、検索、予定調整など、より幅広い業務をサポートできるようになってきた点です。</p>
<p>AIには「整理するAI」と「作成するAI」があり、メールに使われるAIには、大きく分けて「機械学習型AI」と「生成AI」があります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178304547745577700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304547745539800">
<p>従来のAIは「整理する」「分類する」「気付かせる」役割が中心でしたが、生成AIの登場により、「文章を作る」「要点をまとめる」「次の行動を提案する」といったサポートまで広がっています。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178298569486905200 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178298569486911200">
<p style="text-align: left;"><span style="font-size: large;"><strong>機械学習型AI</strong></span></p>
<p>過去のデータや利用状況をもとにパターンを学習し、分類や判定を行う仕組みです。</p>
<p>Gmailでいえば、迷惑メールの判定、受信トレイの自動分類、重要そうなメールの表示、返信忘れの通知などが該当します。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178298569486911600">
<p><span style="font-size: large;"><strong>生成AI</strong></span></p>
<p>入力された内容をもとに文章や要約を作成するAIです。</p>
<p>Gmailでは、メール本文の下書き作成、返信文の作成、長いメールの要約、過去メールからの情報検索などに活用できます。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178298580922288300 cparts-editsite--mainttl" id="cms-editor-textarea-sin178298580922294700">利用できる機能はアカウントやプランによって異なります</h2>
<div class="cms-content-parts-sin178298584997117700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178298584997121400">
<p>GmailのAI機能は便利ですが、すべてのユーザーが同じ機能を利用できるわけではありません。<br />
利用できる機能は、Google Workspaceの契約プラン、Google AIプラン、管理者側の設定、利用している国や地域、言語設定、端末の種類などによって異なります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178298633729013500 cparts-id119--02 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178298633729017100">
<p>そのため、紹介されている機能であっても、現在ご利用中のGmail画面に表示されない場合があります。</p>
<p><span style="color: rgb(255, 0, 0);">個人用の無料Gmailアカウントでは、一部のAI機能が利用できなかったり、利用できる地域や言語が限られていたりする場合があります。</span></p>
<p>一方、Google Workspaceを利用している企業や団体では、管理者がAI機能やスマート機能を有効にしているかどうかによって、表示される機能が変わることがあります。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block knowhow20260789870-text lay-reset-child" id="cms-editor-minieditor-sin178298633729017400">
<ul>
    <li>Google WorkspaceまたはGoogle AIプランの対象か</li>
    <li>管理者によってGemini機能が有効になっているか</li>
    <li>Gmailのスマート機能とパーソナライズ設定が有効か</li>
    <li>Googleアカウントの言語設定が対応言語になっているか</li>
    <li>パソコン版、Android版、iPhone・iPad版のどれを利用しているか</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178304575274182900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304575274186600">
<p>同じGmailでも、利用環境によって表示されるボタンや使える機能が異なる点に注意が必要です。<br />
<span style="color: rgb(255, 0, 0);"><strong>※2026年7月8日時点の情報であり、Googleの仕様変更などにより予告なく提供ルールが変更される場合がありますのであらかじめご了承ください。</strong></span></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178298638717810100 cparts-editsite--mainttl" id="cms-editor-textarea-sin178298638717813900">GmailでできるAI活用の例</h2>
<div class="cms-content-parts-sin178298641418362100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178298641418399800">
<p>Gmailでは、AIを活用してメール業務を様々な面からサポートできます。<br />
たとえば、次のような使い方があります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178304626163195700 box cparts-id299--02 lay-margin-b--3 dec-line--primary" col-flex="1-2" data-reload="yes" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="cparts-head-block">
<h3 class="cparts-editsite--mainttl cparts-id299--02__ttl dec-bg--contents cms-easy-edit" id="cms-editor-textbox-sin178304626163207200">主な使い方</h3>
</div>
<div class="cparts-body-block lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6 cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304626163215100">
<ul>
    <li>簡単な返信文を作成する</li>
    <li>丁寧な表現に整える</li>
    <li>挨拶文や案内文のたたき台を作る</li>
    <li>長いやり取りの要点を確認する</li>
    <li>返信内容の候補を作成する</li>
    <li>過去のメールから必要な情報を探す</li>
    <li>予定に関する内容を確認する</li>
    <li>Google カレンダーに予定を追加する</li>
</ul>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6 cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304626163222200">
<p>「返信内容を考えるのに時間がかかる」</p>
<p>「簡単な返事だけれど、文章に迷う」</p>
<p>「長いメールを読む時間を短縮したい」</p>
<p>「日程調整のやり取りを効率化したい」</p>
<p>このような場面では、AIによる文章作成や要約機能が業務時間の短縮に役立ちます。</p>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178304630906130900 cparts-editsite--mainttl" id="cms-editor-textarea-sin178304630906134500">GeminiはGmail画面右上のアイコンから利用できます</h2>
<div class="cms-content-parts-sin178304632942635500 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304632942639000">
<p>GmailでGeminiを利用できる環境では、パソコン版Gmailの画面右上にGeminiのアイコンが表示される場合があります。</p>
<p>このアイコンをクリックすると、Gmail画面の右側にサイドパネルが開きます。</p>
<p>サイドパネルでは、開いているメールに対して要約を依頼したり、返信案を作成したり、過去のメールから情報を探したりできます。</p>
<ul>
    <li>このメールを要約して</li>
    <li>このメールへの返信案を作成して</li>
    <li>対応が必要な内容を箇条書きにして</li>
    <li>過去のメールから〇〇に関する内容を探して</li>
    <li>明日の予定を教えて</li>
    <li>会議を金曜日の10時に設定して</li>
</ul>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178304632942639400" class="cparts-editsite--img cms-easy-edit" alt="Geminiアイコン" src="https://ant2.net/images/magazine/2026/07/images2026070313253584.png" width="330" /></div>
</div>
</div>
<div class="cms-content-parts-sin178305670687244700 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305670687254900">
<p>Gmailの中で直接質問できるため、別のAIツールを開かなくても、メールを確認しながら作業を進められる点が便利です。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178304639855285500 cparts-editsite--mainttl" id="cms-editor-textarea-sin178304639855293600">AIでメール作成は「作成画面」や「返信画面」から利用できます</h2>
<div class="cms-content-parts-sin178304643589347300 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304643589290600">
<p>Gmailでメール作成をAIにサポートしてもらう場合は、メールの作成画面や返信画面から利用します。</p>
<p>パソコン版Gmailでは、「作成」をクリックして新規メールを開いた後、本文入力欄の近くに表示される「文書作成サポート」や「 / 」を入力することによって、AIによる下書き作成を利用できます。</p>
<ol>
    <li>Gmailで「作成」をクリックする</li>
    <li>「文書作成サポート」ボタンを選択する</li>
    <li>「打ち合わせ日程の候補を送るメールを作成して」など、<br />
    作りたい内容を入力する</li>
    <li>AIが作成した下書きを確認する</li>
    <li>必要に応じて内容を修正して送信する</li>
</ol>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178304643589298700" class="cparts-editsite--img cms-easy-edit" alt="新規作成_文書作成サポート" src="https://ant2.net/images/magazine/2026/07/images2026070313253099.png" width="330" /></div>
</div>
</div>
<div class="cms-content-parts-sin178305669544656200 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305669544665100">
<p>文章をいちから考えるのではなく、AIに下書きを作ってもらい、それを人が確認して整えることで、メール作成にかかる時間を減らすことができます。</p>
<p>返信メールの場合は、受信したメールを開いた状態で返信画面を開き、AIに返信文の作成を依頼できます。<br />
また、作成された文章に対して、より丁寧な表現にしたり、短くしたり、柔らかい表現にしたりする調整ができる場合もあります。</p>
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178304655623727900" class="cparts-editsite--img cms-easy-edit" alt="返信サンプル" src="https://ant2.net/images/magazine/2026/07/images2026070313253141.png" width="330" /></div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178304655623735500" class="cparts-editsite--img cms-easy-edit" alt="返信サンプル2" src="https://ant2.net/images/magazine/2026/07/images2026070313253453.png" width="330" /></div>
</div>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178304667238693800 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304667238714500">
<p>返信提案は、次のような場面で便利です。</p>
<ul>
    <li>日程調整への返信</li>
    <li>資料受領のお礼</li>
    <li>確認しました、という簡単な返信</li>
    <li>お問い合わせへの一次回答</li>
    <li>社内連絡への返信</li>
    <li>お客さまへの丁寧な案内文</li>
</ul>
<p>ただし、AIが提案した返信文は、相手との関係性や状況を完全に理解しているとは限りません。<br />
送信前には、宛名、内容、言い回し、日程、金額、添付ファイルの有無などを必ず確認しましょう。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178304669906719500 cparts-editsite--mainttl" id="cms-editor-textarea-sin178304669906796800">長いやり取りの確認には「要約」機能が役立ちます</h2>
<div class="cms-content-parts-sin178304678011255500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304678011257500">
<p>Gmailでは、長文のメールや複数回やり取りしているメールに対して、内容を要約できる機能が表示される場合があります。<br />
メールのやり取りが長くなると、</p>
<ul>
    <li>どこまで話が進んでいるのか</li>
    <li>誰が何を確認する必要があるのか</li>
    <li>次に対応すべき内容は何か</li>
    <li>過去にどのような回答をしていたか</li>
</ul>
<p>を把握するのに時間がかかることがあります。<br />
AIによる要約機能を活用すると、過去のやり取りをすべて読み返さなくても、概要を把握しやすくなります。</p>
<p>メールスレッドを開いた状態で、PC版：画面右上・スマホ版：画面上部真ん中のGeminiアイコンからサイドパネルを開き、「このスレッドを要約」や「このメールを要約して」といった操作を行うことで、メール内容の要約を確認できます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178305320070786600 cparts-id119--02 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305320070796200">
<p><strong><span style="font-size: large;">PC版の要約</span></strong></p>
<p><img src="https://ant2.net/images/magazine/2026/07/images2026070313252699.png" width="500" height="560" alt="" /></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305320070803300">
<p><strong><span style="font-size: large;">スマホ版の要約</span></strong></p>
<p><img src="https://ant2.net/images/magazine/2026/07/images2026070313252951.png" width="320" height="646" alt="" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178305672968446300 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305672968454100">
<p>要約機能は、次のような場面で役立ちます。</p>
<ul>
    <li>長期間続いている問い合わせを確認する</li>
    <li>複数人で進めているプロジェクトの経緯を把握する</li>
    <li>打ち合わせ前に過去のやり取りを確認する</li>
    <li>休暇明けに未確認メールの内容を整理する</li>
    <li>対応事項や期限を確認する</li>
</ul>
<p>ただし、AIの要約だけで判断するのではなく、重要な決定事項や金額、日程、契約内容などは必ず原文を確認することが大切です。<br />
AIは確認作業を短縮するための補助として使い、最終確認は人が行うという使い方が安心です。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178304698166601700 cparts-editsite--mainttl" id="cms-editor-textarea-sin178304698166635800">過去のメールやGoogle ドライブ内の情報の探し方</h2>
<div class="cms-content-parts-sin178304707334618500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304707334658600">
<p>Geminiを利用できる環境では、Gmail内の過去メールから必要な情報を探すこともできます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178304708876498000 box cparts-id437--01 lay-margin-b--3 knowhow20260789870-textImg" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178304708876498000 box cparts-id437--01 lay-margin-b--3" data-custom="knowhow20260789870-textImg">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304708876502700">
<ul>
    <li>以前届いた見積書のメールを探す</li>
    <li>特定の担当者とのやり取りを確認する</li>
    <li>今週の未読メールを確認する</li>
    <li>予約や配送に関するメールを探す</li>
    <li>過去に受け取った資料の内容を確認する</li>
</ul>
<p>従来のメール検索では、キーワードや送信者名、日付などを自分で指定して探す必要がありました。</p>
<p>一方、AIを活用すると、「先週届いた会議日程に関するメールを探して」「〇〇さんとのやり取りで、次回の打ち合わせ日時を確認して」のように、自然な言葉で探したい内容を伝えられます。</p>
<p>また、Google ドライブと連携している環境では、「今朝共有された資料の要点を教えて」のように、Google ドライブ内のファイルから情報を確認できる場合もあります。</p>
<p>メールとファイルを横断して情報を探せるようになることで、確認作業の時間短縮につながります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178304708876503100" class="cparts-editsite--img cms-easy-edit" alt="探す" src="https://ant2.net/images/magazine/2026/07/images2026070313253291.png" width="330" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178304714163241100 cparts-editsite--mainttl" id="cms-editor-textarea-sin178304714163248700">Google カレンダーとの連携で予定登録もスムーズに</h2>
<div class="cms-content-parts-sin178304715288160000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304715288124100">
<p>GmailのAI機能では、メール本文の内容をもとにGoogle カレンダーと連携できる場合があります。</p>
<p>たとえば、メールの中に打ち合わせ日時やイベント内容が記載されている場合、Geminiに指示を出すことで、その内容をもとにGoogle カレンダーへ予定を作成できます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178304718969062300 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304718969011100">
<ul>
    <li>このメールの内容をカレンダーに追加して</li>
    <li>この打ち合わせをGoogle カレンダーに登録して</li>
    <li>明日の14時からの会議を予定に追加して</li>
    <li>金曜日の10時に打ち合わせを登録して</li>
</ul>
<p>このように、自然な言葉で指示することで、メール本文の内容や入力した日時をもとに、Google カレンダーへの予定登録をサポートしてくれます。</p>
<p>たとえば、お客さまから「7月8日 15時から打ち合わせをお願いします」というメールが届いた場合、</p>
<p>メールを開いた状態でGeminiに「このメールの内容をカレンダーに追加して」と依頼すると、日時や予定名を読み取り、カレンダー予定の作成につなげることができます。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178304718969019100" class="cparts-editsite--img cms-easy-edit" alt="カレンダー登録" src="https://ant2.net/images/magazine/2026/07/images2026070313252852.png" width="330" /></div>
</div>
</div>
<div class="cms-content-parts-sin178304727313039700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304727313044200">
<p>また、予定登録だけでなく、カレンダーの確認にも活用できます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178304753416941900 box cparts-id437--01 lay-margin-b--3 knowhow20260789870-textImg" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178304753416941900 box cparts-id437--01 lay-margin-b--3" data-custom="knowhow20260789870-textImg">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178304753416892100">
<p>たとえば、</p>
<ul>
    <li>明日の最初の予定を教えて</li>
    <li>今週の会議予定を確認して</li>
    <li>次に〇〇さんと会う予定はいつですか</li>
    <li>今日の午後に空いている時間はありますか</li>
</ul>
<p>といった確認もできる場合があります。</p>
<p>これにより、メールを確認しながら別画面でカレンダーを開き、日時をコピーして予定を作成する手間を減らしやすくなります。</p>
<p>打ち合わせ、商談、社内会議、面談、オンライン説明会、イベント参加など、メールから予定を登録する機会が多い業務では特に便利です。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178304753416900100" class="cparts-editsite--img cms-easy-edit" alt="予定確認" src="https://ant2.net/images/magazine/2026/07/images2026070313253683.png" width="330" /></div>
</div>
</div>
<div class="cms-content-parts-sin178305680007313600 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305680007317400">
<p>Geminiが読み取った日時や予定名が必ず正しいとは限りません。<br />
予定を登録する前、または登録後には、日付、時間、参加者、会議URL、タイムゾーン、予定名などを必ず確認しましょう。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178305211829126800 cparts-editsite--mainttl" id="cms-editor-textarea-sin178305211829130400">業務効率化につながるAIメールアシスタント</h2>
<div class="cms-content-parts-sin178305214004847800 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305214004855200">
<p>GmailのAI機能は、単に文章を作成するだけの機能ではありません。<br />
本記事でご説明したように【メールの分類、返信提案、要約、検索、翻訳、日程調整】など、メール業務全体を支える「AIメールアシスタント」として活用できます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178305216359891300 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305216359897800">
<ul>
    <li>メール作成にかかる時間を短縮できる</li>
    <li>長いメールの要点を把握しやすくなる</li>
    <li>返信漏れや確認漏れを減らしやすくなる</li>
    <li>予定調整の手間を減らせる</li>
    <li>過去メールや関連資料を探しやすくなる</li>
</ul>
<p>日々のメール業務は、1件ごとの作業時間は短くても、積み重なると大きな負担になります。</p>
<p>AIを活用することで、文章を考える時間や情報を探す時間を減らし、本来集中したい業務に時間を使いやすくなります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178305216359898300" class="cparts-editsite--img cms-easy-edit" alt="業務効率化につながるAIメールアシスタント" src="https://ant2.net/images/magazine/2026/07/img03.png" width="330" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178305219106130200 cparts-editsite--mainttl" id="cms-editor-textarea-sin178305219106138700">AI活用で気を付けたいこと</h2>
<div class="cms-content-parts-sin178305220970194200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305220970196100">
<p>GmailのAI機能は便利ですが、利用する際には注意点もあります。<br />
AIが作成した文章や要約は、必ずしもすべて正しいとは限りません。内容の一部が抜けていたり、意図と異なる表現になっていたりする場合があります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178305222611449400 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305222611452800">
<p>そのため、送信前には次の点を確認しましょう。</p>
<ul>
    <li>宛名や会社名に誤りがないか</li>
    <li>日付、時間、金額、数量が正しいか</li>
    <li>相手に失礼な表現になっていないか</li>
    <li>必要な情報が抜けていないか</li>
    <li>添付ファイルの案内と実際の添付が合っているか</li>
    <li>機密情報や個人情報を不用意に含めていないか</li>
    <li>AIが作成した文章が自社の方針に合っているか</li>
</ul>
<p>特に、お客さまへのご案内、契約に関わる内容、費用に関する連絡、個人情報を含むやり取りでは、AIの提案をそのまま使わず、必ず人の目で確認しましょう。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178305222611453000" class="cparts-editsite--img cms-easy-edit" alt="AI活用で気を付けたいこと" src="https://ant2.net/images/magazine/2026/07/img04.png" width="330" title="" name="" /></div>
</div>
</div>
<div class="cms-content-parts-sin178305676156668600 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305676156678900">
<p><span style="font-size: 1.6rem;">AIは便利な道具ですが、最終的な判断や確認は人が行う必要があります。</span><br />
「AIが作ったから大丈夫」と考えるのではなく、「AIが作った下書きを、人が確認して整える」という使い方を意識することが大切です。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178305230082633700 cparts-editsite--mainttl" id="cms-editor-textarea-sin178305230082639100">まとめ</h2>
<div class="cms-content-parts-sin178305231402958000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305231402925700">
<p>GmailにもAI機能が広がり、メール本文の作成、返信文の提案、文章の調整、長いやり取りの要約、過去メールの検索、Google ドライブ内の情報確認、<br />
Google カレンダーとの連携など、日々の業務をサポートする機能が身近になってきました。</p>
<p>以前からGmailには、迷惑メール判定や自動分類、スマートリプライ、ナッジ機能といったAI機能が搭載されていましたが、新たにGeminiなどの生成AIが加わったことで、現在ではメールの作成や要約、情報検索、予定調整まで幅広くサポートできるようになっています。</p>
<p>ただし、利用できるAI機能は、アカウントの種類や契約プラン、地域、言語、管理者設定によって異なります。<br />
個人用アカウントで使える機能がある一方で、対象プラン限定の機能もある点には注意が必要です。</p>
<p>また、AIが生成した内容はそのまま使用せず、必ず人の目で正確性や表現を確認することが大切です。</p>
<p>AIを「任せるもの」ではなく「補助してくれるもの」として上手に取り入れながら、日々のメール業務をよりスムーズに進めていきましょう。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178305245925882600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178305245925882600 cparts-id119 lay-margin-b--3 box" style="margin-top:80px;margin-bottom:80px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178305245925885700">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">ant2 CMSのデモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177935241660519900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935241660522600">【イベント出展】『営業・マーケDXPO東京'26【夏】』に出展いたします！<br />
（2026年8月20日・8月21日）</h3>
<div class="cms-content-parts-sin177935241660528600 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177935241660530400" class="cparts-editsite--img cms-easy-edit" alt="『営業・マーケDXPO東京'26【夏】" src="https://ant2.net/images/magazine/2026/07/bnr-tks26_info_white-sales.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177935241660531600">
<div></div>
<ul>
    <li>会場：東京ビッグサイト 西1・2・3ホール</li>
    <li>ブース情報：小間番号【3 - 66】広告・コンテンツ制作展エリア</li>
    <li>日時：
    <ul>
        <li>8月20日（木） 9:30～17:30</li>
        <li>8月21日（金） 9:30～16:30</li>
    </ul>
    </li>
    <li><a href="https://dxpo.jp/real/fox/tokyo/sales/" target="_blank">詳細はこちら</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/06/22002/">
<title>その採用サイト、募集要項だけになっていませんか？応募につながる情報発信のポイント</title>
<link>https://ant2.net/magazine/2026/06/22002/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。

 採用サイトはあるけれど、募集要項を載せているだけになっている
 求人媒体に掲載しているから、自社サイトは簡単な内容で十分だと思っている

このようにお考えの方もいらっしゃるのではないでしょうか。
しかし最近では、求職者が応募前に企業サイトや採用サイトを確認し、仕事内容だけでなく、職場の雰囲気や働く人、会社の考え方まで見たうえで応募を検討するケースが増えています。
つまり採用サイトは、単に募集情報を掲載する場所ではなく、「この会社で働いてみたい」と思ってもらうための大切な入口になっているのです。
今回は、採用サイトに求められている内容と、ant2 CMSでの設定・活用方法について分かりやすくご紹介いたします。










近年、求職者は求人媒体の募集要項だけでなく、企業の採用サイト、SNS、口コミ、社員紹介など、様々な情報を見比べながら応募先を検討する傾向があります。
特に採用サイトでは、仕事内容の具体性、社員の声、社風、働く環境、キャリアの見通しなど、「入社後の自分をイメージできる情報」が重視されています。
採用ホームページに関する調査でも、

 仕事内容が具体的に記載されていること
 先輩社員の紹介が豊富であること
 社員インタビュー動画などで社風が伝わること

社風が伝わることが好印象につながる要素として挙げられています。
つまり、採用サイトは「募集要項を載せる場所」から、「会社を知ってもらい、応募前の不安を減らす場所」へと役割が広がっているのです。




募集ページだけでは伝わりにくいこと




募集ページには、職種、給与、勤務地、勤務時間、休日、応募条件など、応募に必要な基本情報を掲載します。
もちろん、これらはとても大切です。








しかし、求職者が本当に知りたいことは、それだけではありません。
たとえば、

 実際にどのような仕事をするのか
 どんな人が働いているのか
 入社後に成長できるのか
 職場の雰囲気は自分に合いそうか
 未経験でも安心して働けるのか

といった情報は、募集要項だけでは伝わりにくいものです。
最近の採用サイトでは、社員インタビュー、1日の仕事の流れ、数字で見る会社、教育制度、よくある質問、社内イベント、働く環境の写真や動画などを組み合わせ、求職者が自然に企業理解を深められる構成が増えています。
求職者目線で「知りたい情報」を整理することが、応募への後押しになります。



採用サイトに追加したいおすすめコンテンツと作成方法




採用サイトでは、募集要項だけでなく「働くイメージが伝わる情報」を掲載することが大切です。
ここでは、採用サイトに追加しておきたい代表的なコンテンツをご紹介します。




社員紹介・社員インタビュー




実際に働いている社員の声は、求職者にとって会社を知る大きなきっかけになります。
仕事内容、入社理由、仕事のやりがい、1日のスケジュール、今後の目標などを掲載すると、入社後の働き方を具体的にイメージしやすくなります。




ant2 CMS活用法




社員ごとに個別ページを作成し、写真、プロフィール、インタビュー本文を掲載できます。
採用トップページや社員紹介一覧ページから各社員ページへリンクを設置すれば、求職者が気になる社員の情報を見やすくなります。
また、ページ作成時にはページタイトルや概要文、キーワードを設定できるため、「営業職 社員インタビュー」「未経験 入社」など、検索されやすい言葉を意識したページづくりにも活用できます。





採用サイト［05］




1日の仕事の流れ




求職者は、入社後にどのような1日を過ごすのかを気にしています。
出社から退勤までの流れ、担当業務、休憩時間、打ち合わせ、外出、研修などを紹介することで働き方のイメージがより具体的になります。




ant2 CMS活用法




「1日の仕事の流れ」ページを作成し、時間ごとに見出しを分けて内容を掲載できます。
写真を組み合わせることで、仕事の様子や職場の雰囲気も伝えやすくなります。
たとえば、

 
 
 9:00
 出社・朝礼
 
 
 10:00
 お客さま対応
 
 
 12:00
 昼休憩
 
 
 14:00
 打ち合わせ
 
 
 17:30
 退勤
 
 

といった形で掲載すると、読み手にも分かりやすくなります。





ハミングバード株式会社様




職場の雰囲気が伝わる写真・動画




文章だけでは、会社の雰囲気を十分に伝えることが難しい場合があります。
社内の様子、仕事中の風景、打ち合わせ、研修、社内イベントなどの写真や動画を掲載すると、求職者に安心感を与えることができます。




ant2 CMS活用法




社員写真や社内イベントなども簡単に表示できます。
社員同士の雰囲気が伝わるため、採用サイトの印象づくりに効果的です。
また、画像を差し替えることで、季節ごとのイベントも簡単に反映できます。





東洋ステンレス化工株式会社様




よくある質問




応募前の不安を減らすためには、「よくある質問」のページを用意しておくことも大切です。
選考の流れ、応募前の見学、服装、必要な資格、入社後の研修、配属、残業、休日など、求職者が気になりやすい内容を先に掲載しておくことで、安心して応募に進んでもらえるようになります。




ant2 CMS活用法




「よくある質問」ページを作成し、質問と回答を項目ごとに整理して掲載できます。
採用トップページや募集要項ページからリンクを設置しておけば、応募前に確認してもらいやすくなります。
また、問い合わせが多い内容があれば、後から項目を追加・修正できるため、運用しながら内容を充実させていくことができます。





採用サイト［04］




採用ブログ・お知らせ




採用サイトは、定期的に更新されていることも大切です。
採用イベントの案内、会社説明会の様子、新入社員研修、社員の取り組み、社内行事などを発信することで、求職者に「情報が新しい会社」という印象を与えることができます。




ant2 CMS活用法




お知らせページやブログページを作成し、採用に関する情報を定期的に投稿できます。
採用トップページに新着情報として表示すれば、WEBサイトを訪れた人に最新情報をすぐ届けることができます。
ant2 CMSでは、ブログやトピックスを1つのWEBサイト内で用途に合わせて複数個運用することができます。
また、説明会の開催日や募集開始日など、公開するタイミングが決まっている情報は、サイト公開予約を活用して事前に準備しておくこともできます。





採用サイト［04］




募集要項・応募フォーム




募集要項は、採用サイトに欠かせない基本情報です。
職種、仕事内容、給与、勤務地、勤務時間、休日、応募条件、福利厚生、選考フローなどを分かりやすく掲載しましょう。




ant2 CMS活用法




募集要項ページを作成し、仕事内容や条件を整理して掲載できます。
複数職種を募集している場合は、「営業職」「事務職」「技術職」など、ページを分けると求職者が探しやすくなります。
応募受付には、メールフォーム機能を活用できます。
氏名、メールアドレス、電話番号、希望職種、志望動機、見学希望日など、必要な項目を設定し、採用応募フォームとして利用できます。
会社見学お申し込みフォーム、説明会お申し込みフォーム、インターンシップお申し込みフォーム、採用に関するお問い合わせフォームなどにも活用できます。





採用サイト［04］




採用サイト運用のポイント




採用サイトは、一度作って終わりではありません。
募集要項の更新、社員紹介の追加、写真の差し替え、採用イベントのお知らせ、よくある質問の見直しなど、定期的に更新することが大切です。
また、求職者はスマートフォンで採用サイトを見ることも多いため、スマートフォンで見たときの分かりやすさも確認しておきましょう。








特に確認したいポイントは、次のような点です。

 文字が読みやすいか
 写真が見やすいか
 応募ボタンが分かりやすい場所にあるか
 フォームに入力しやすいか
 必要な情報にすぐたどり着けるか

求職者が応募前に知りたいことを先回りして掲載しておくことで、不安を減らし、応募につながりやすい採用サイトになります。





まとめ




採用サイトは、今や「募集ページを置くだけ」の場所ではありません。
会社の魅力や働く人の姿を伝え、求職者に「ここで働いてみたい」と感じてもらうための大切な場所です。
募集要項に加えて、社員インタビュー、職場の写真・動画、採用ブログ、よくある質問、説明会情報、応募フォームなどを整えることで、求職者にとって分かりやすく、安心して応募しやすい採用サイトになります。
ant2 CMSでは、様々な機能を活用しながら、採用サイトを継続的に育てていくことができます。
採用サイトを見直す際は、「募集情報が載っているか」だけでなく、「この会社で働くイメージが伝わるか」という視点で確認してみてはいかがでしょうか。








デモ登録はこちら




【イベント出展】『営業・マーケDXPO東京&#039;26【夏】』に出展いたします！
（2026年8月20日・8月21日）







 日時：
 
 8月20日（木） 9:30～17:30
 8月21日（金） 9:30～16:30
 
 
 詳細はこちら





</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-06-24T09:40:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin178226243948794000" class="cms-content-parts-sin178226243948802500">
<div id="cms-editor-minieditor-sin178182974051186100" class="cms-content-parts-sin178182974051194100">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<ul>
    <li>採用サイトはあるけれど、募集要項を載せているだけになっている</li>
    <li>求人媒体に掲載しているから、自社サイトは簡単な内容で十分だと思っている</li>
</ul>
<p>このようにお考えの方もいらっしゃるのではないでしょうか。</p>
<p>しかし最近では、求職者が応募前に企業サイトや採用サイトを確認し、仕事内容だけでなく、職場の雰囲気や働く人、会社の考え方まで見たうえで応募を検討するケースが増えています。</p>
<p>つまり採用サイトは、単に募集情報を掲載する場所ではなく、「この会社で働いてみたい」と思ってもらうための大切な入口になっているのです。</p>
<p>今回は、採用サイトに求められている内容と、ant2 CMSでの設定・活用方法について分かりやすくご紹介いたします。</p>
</div>
<div class="cms-content-parts-sin178183281946985500 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin178183281946989200" class="cparts-editsite--img cms-easy-edit" alt="その採用サイト、募集要項だけになっていませんか？応募につながる情報発信のポイント" src="https://ant2.net/images/magazine/2026/06/images2026061915294838.png" width="675" title="" name="" /></div>
</div>
</div>
<div class="cms-content-parts-sin178183281406795300 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178183281406800500">
<p>近年、求職者は求人媒体の募集要項だけでなく、企業の採用サイト、SNS、口コミ、社員紹介など、様々な情報を見比べながら応募先を検討する傾向があります。</p>
<p>特に採用サイトでは、仕事内容の具体性、社員の声、社風、働く環境、キャリアの見通しなど、「入社後の自分をイメージできる情報」が重視されています。</p>
<p>採用ホームページに関する調査でも、</p>
<ul>
    <li>仕事内容が具体的に記載されていること</li>
    <li>先輩社員の紹介が豊富であること</li>
    <li>社員インタビュー動画などで社風が伝わること</li>
</ul>
<p>社風が伝わることが好印象につながる要素として挙げられています。</p>
<p>つまり、採用サイトは「募集要項を載せる場所」から、「<strong>会社を知ってもらい、応募前の不安を減らす場所</strong>」へと役割が広がっているのです。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178183334571094800 cparts-editsite--mainttl" id="cms-editor-textarea-sin178183334571101400">募集ページだけでは伝わりにくいこと</h2>
<div class="cms-content-parts-sin178183355029095900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178183355029099500">
<p>募集ページには、職種、給与、勤務地、勤務時間、休日、応募条件など、応募に必要な基本情報を掲載します。<br />
もちろん、これらはとても大切です。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178183345984314500 box cparts-id439--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="clearfix">
<div class="cparts-img-block lay-margin-b--3 lay-margin-l--3 lay-img-float--right"><img id="cms-editor-image-sin178183345984324800" class="cparts-editsite--img cms-easy-edit" alt="募集ページだけでは伝わりにくいこと" src="https://ant2.net/images/magazine/2026/06/images2026061915293572.png" width="500" title="" name="" /></div>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin178183345984332500">
<p>しかし、求職者が本当に知りたいことは、それだけではありません。</p>
<p>たとえば、</p>
<ul>
    <li>実際にどのような仕事をするのか</li>
    <li>どんな人が働いているのか</li>
    <li>入社後に成長できるのか</li>
    <li>職場の雰囲気は自分に合いそうか</li>
    <li>未経験でも安心して働けるのか</li>
</ul>
<p>といった情報は、募集要項だけでは伝わりにくいものです。</p>
<p>最近の採用サイトでは、社員インタビュー、1日の仕事の流れ、数字で見る会社、教育制度、よくある質問、社内イベント、働く環境の写真や動画などを組み合わせ、求職者が自然に企業理解を深められる構成が増えています。</p>
<p>求職者目線で「知りたい情報」を整理することが、応募への後押しになります。</p>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178183357356754500 cparts-editsite--mainttl" id="cms-editor-textarea-sin178183357356762700">採用サイトに追加したいおすすめコンテンツと作成方法</h2>
<div class="cms-content-parts-sin178183365760513200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178183365760516800">
<p>採用サイトでは、募集要項だけでなく「働くイメージが伝わる情報」を掲載することが大切です。<br />
ここでは、採用サイトに追加しておきたい代表的なコンテンツをご紹介します。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178183390454341400 cparts-editsite--mainttl" id="cms-editor-textarea-sin178183390454380100">社員紹介・社員インタビュー</h3>
<div class="cms-content-parts-sin178183393268488200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178183393268462400">
<p>実際に働いている社員の声は、求職者にとって会社を知る大きなきっかけになります。<br />
仕事内容、入社理由、仕事のやりがい、1日のスケジュール、今後の目標などを掲載すると、入社後の働き方を具体的にイメージしやすくなります。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin178183395599099700 cparts-editsite--mainttl" id="cms-editor-textarea-sin178183395599103600">ant2 CMS活用法</h4>
<div class="cms-content-parts-sin178184889254086300 box cparts-id409--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184889254097100">
<p>社員ごとに個別ページを作成し、写真、プロフィール、インタビュー本文を掲載できます。</p>
<p>採用トップページや社員紹介一覧ページから各社員ページへリンクを設置すれば、求職者が気になる社員の情報を見やすくなります。</p>
<p>また、ページ作成時にはページタイトルや概要文、キーワードを設定できるため、「営業職 社員インタビュー」「未経験 入社」など、検索されやすい言葉を意識したページづくりにも活用できます。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-img-block lay-img-width--max lay-margin-b--1"><img id="cms-editor-image-sin178184889254105200" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/06/images2026061914593810.png" width="330" /></div>
<div class="cparts-editsite--caption cparts-caption-block lay-reset-child lay-font-size--s cms-easy-edit" id="cms-editor-minieditor-sin178184889254112300">
<p><a href="https://list.cms-design.jp/template/2023/10/90004/" target="_blank">採用サイト［05］</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178183448107197100 cparts-editsite--mainttl" id="cms-editor-textarea-sin178183448107205300">1日の仕事の流れ</h3>
<div class="cms-content-parts-sin178183448911285100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178183448911254200">
<p>求職者は、入社後にどのような1日を過ごすのかを気にしています。<br />
出社から退勤までの流れ、担当業務、休憩時間、打ち合わせ、外出、研修などを紹介することで働き方のイメージがより具体的になります。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin178183449382055800 cparts-editsite--mainttl" id="cms-editor-textarea-sin178183449382066400">ant2 CMS活用法</h4>
<div class="cms-content-parts-sin178184342949634600 box cparts-id409--02 lay-margin-b--3 knowhow20260689868" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178184342949634600 box cparts-id409--02 lay-margin-b--3" data-custom="knowhow20260689868">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184342949644700">
<p>「1日の仕事の流れ」ページを作成し、時間ごとに見出しを分けて内容を掲載できます。</p>
<p>写真を組み合わせることで、仕事の様子や職場の雰囲気も伝えやすくなります。</p>
<p>たとえば、</p>
<table width="200" border="1" cellpadding="1" cellspacing="1" dir="ltr">
    <tbody>
        <tr>
            <td>9:00</td>
            <td>出社・朝礼</td>
        </tr>
        <tr>
            <td>10:00</td>
            <td>お客さま対応</td>
        </tr>
        <tr>
            <td>12:00</td>
            <td>昼休憩</td>
        </tr>
        <tr>
            <td>14:00</td>
            <td>打ち合わせ</td>
        </tr>
        <tr>
            <td>17:30</td>
            <td>退勤</td>
        </tr>
    </tbody>
</table>
<p>といった形で掲載すると、読み手にも分かりやすくなります。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-img-block lay-img-width--max lay-margin-b--1"><img id="cms-editor-image-sin178184342949652500" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/06/images2026061913260939.png" width="330" /></div>
<div class="cparts-editsite--caption cparts-caption-block lay-reset-child lay-font-size--s cms-easy-edit" id="cms-editor-minieditor-sin178184342949659600">
<p><a href="https://hummingbird-inc.jp/recruit/" target="_blank">ハミングバード株式会社様</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178183457998626500 cparts-editsite--mainttl" id="cms-editor-textarea-sin178183457998634600">職場の雰囲気が伝わる写真・動画</h3>
<div class="cms-content-parts-sin178183458865424500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178183458865392600">
<p>文章だけでは、会社の雰囲気を十分に伝えることが難しい場合があります。<br />
社内の様子、仕事中の風景、打ち合わせ、研修、社内イベントなどの写真や動画を掲載すると、求職者に安心感を与えることができます。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin178183459373759700 cparts-editsite--mainttl" id="cms-editor-textarea-sin178183459373767900">ant2 CMS活用法</h4>
<div class="cms-content-parts-sin178184350166742800 box cparts-id409--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184350166752300">
<p>社員写真や社内イベントなども簡単に表示できます。</p>
<p>社員同士の雰囲気が伝わるため、採用サイトの印象づくりに効果的です。</p>
<p>また、画像を差し替えることで、季節ごとのイベントも簡単に反映できます。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-img-block lay-img-width--max lay-margin-b--1"><img id="cms-editor-image-sin178184350166759900" class="cparts-editsite--img cms-easy-edit" alt="雰囲気が伝わる写真" src="https://ant2.net/images/magazine/2026/06/images20260619163834.png" width="330" /></div>
<div class="cparts-editsite--caption cparts-caption-block lay-reset-child lay-font-size--s cms-easy-edit" id="cms-editor-minieditor-sin178184350166767000">
<p><a href="https://www.toyostainless-kako.co.jp/recruit/recruitment/" target="_blank">東洋ステンレス化工株式会社様</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178184232540137500 cparts-editsite--mainttl" id="cms-editor-textarea-sin178184232540145800">よくある質問</h3>
<div class="cms-content-parts-sin178184233135115100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184233135090100">
<p>応募前の不安を減らすためには、「よくある質問」のページを用意しておくことも大切です。</p>
<p>選考の流れ、応募前の見学、服装、必要な資格、入社後の研修、配属、残業、休日など、求職者が気になりやすい内容を先に掲載しておくことで、安心して応募に進んでもらえるようになります。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin178184233674649300 cparts-editsite--mainttl" id="cms-editor-textarea-sin178184233674657700">ant2 CMS活用法</h4>
<div class="cms-content-parts-sin178184466792326300 box cparts-id409--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184466792337100">
<p>「よくある質問」ページを作成し、質問と回答を項目ごとに整理して掲載できます。</p>
<p>採用トップページや募集要項ページからリンクを設置しておけば、応募前に確認してもらいやすくなります。</p>
<p>また、問い合わせが多い内容があれば、後から項目を追加・修正できるため、運用しながら内容を充実させていくことができます。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-img-block lay-img-width--max lay-margin-b--1"><img id="cms-editor-image-sin178184466792344900" class="cparts-editsite--img cms-easy-edit" alt="スクリーンショット 2026-06-19 164451" src="https://ant2.net/images/magazine/2026/06/images20260619164131.png" width="330" /></div>
<div class="cparts-editsite--caption cparts-caption-block lay-reset-child lay-font-size--s cms-easy-edit" id="cms-editor-minieditor-sin178184466792352100">
<p><a href="https://list.cms-design.jp/template/2023/10/89845/" target="_blank">採用サイト［04］</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178184243968639900 cparts-editsite--mainttl" id="cms-editor-textarea-sin178184243968647200">採用ブログ・お知らせ</h3>
<div class="cms-content-parts-sin178184244425629700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184244425600100">
<p>採用サイトは、定期的に更新されていることも大切です。</p>
<p>採用イベントの案内、会社説明会の様子、新入社員研修、社員の取り組み、社内行事などを発信することで、求職者に「情報が新しい会社」という印象を与えることができます。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin178184244946197600 cparts-editsite--mainttl" id="cms-editor-textarea-sin178184244946205700">ant2 CMS活用法</h4>
<div class="cms-content-parts-sin178184476764199600 box cparts-id409--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184476764210200">
<p>お知らせページやブログページを作成し、採用に関する情報を定期的に投稿できます。</p>
<p>採用トップページに新着情報として表示すれば、WEBサイトを訪れた人に最新情報をすぐ届けることができます。</p>
<p>ant2 CMSでは、ブログやトピックスを1つのWEBサイト内で用途に合わせて複数個運用することができます。</p>
<p>また、説明会の開催日や募集開始日など、公開するタイミングが決まっている情報は、サイト公開予約を活用して事前に準備しておくこともできます。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-img-block lay-img-width--max lay-margin-b--1"><img id="cms-editor-image-sin178184476764217900" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/06/images2026061913261193.png" width="330" /></div>
<div class="cparts-editsite--caption cparts-caption-block lay-reset-child lay-font-size--s cms-easy-edit" id="cms-editor-minieditor-sin178184476764225000">
<p><a href="https://list.cms-design.jp/template/2023/10/89845/" target="_blank">採用サイト［04］</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178184251814066600 cparts-editsite--mainttl" id="cms-editor-textarea-sin178184251814075100">募集要項・応募フォーム</h3>
<div class="cms-content-parts-sin178184252257698000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184252257666700">
<p>募集要項は、採用サイトに欠かせない基本情報です。</p>
<p>職種、仕事内容、給与、勤務地、勤務時間、休日、応募条件、福利厚生、選考フローなどを分かりやすく掲載しましょう。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin178184252710326000 cparts-editsite--mainttl" id="cms-editor-textarea-sin178184252710334100">ant2 CMS活用法</h4>
<div class="cms-content-parts-sin178184885369453400 box cparts-id409--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184885369463600">
<p>募集要項ページを作成し、仕事内容や条件を整理して掲載できます。</p>
<p>複数職種を募集している場合は、「営業職」「事務職」「技術職」など、ページを分けると求職者が探しやすくなります。</p>
<p>応募受付には、メールフォーム機能を活用できます。</p>
<p>氏名、メールアドレス、電話番号、希望職種、志望動機、見学希望日など、必要な項目を設定し、採用応募フォームとして利用できます。</p>
<p>会社見学お申し込みフォーム、説明会お申し込みフォーム、インターンシップお申し込みフォーム、採用に関するお問い合わせフォームなどにも活用できます。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-img-block lay-img-width--max lay-margin-b--1"><img id="cms-editor-image-sin178184885369471100" class="cparts-editsite--img cms-easy-edit" alt="応募フォーム" src="https://ant2.net/images/magazine/2026/06/images2026061914594498.png" width="330" /></div>
<div class="cparts-editsite--caption cparts-caption-block lay-reset-child lay-font-size--s cms-easy-edit" id="cms-editor-minieditor-sin178184885369479100">
<p><a href="https://list.cms-design.jp/template/2023/10/89845/" target="_blank">採用サイト［04］</a></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178184263482461800 cparts-editsite--mainttl" id="cms-editor-textarea-sin178184263482469900">採用サイト運用のポイント</h2>
<div class="cms-content-parts-sin178184266438819700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184266438823200">
<p>採用サイトは、一度作って終わりではありません。</p>
<p>募集要項の更新、社員紹介の追加、写真の差し替え、採用イベントのお知らせ、よくある質問の見直しなど、定期的に更新することが大切です。<br />
また、求職者はスマートフォンで採用サイトを見ることも多いため、スマートフォンで見たときの分かりやすさも確認しておきましょう。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178184270394715000 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184270394725900">
<p>特に確認したいポイントは、次のような点です。</p>
<ul>
    <li>文字が読みやすいか</li>
    <li>写真が見やすいか</li>
    <li>応募ボタンが分かりやすい場所にあるか</li>
    <li>フォームに入力しやすいか</li>
    <li>必要な情報にすぐたどり着けるか</li>
</ul>
<p>求職者が応募前に知りたいことを先回りして掲載しておくことで、不安を減らし、応募につながりやすい採用サイトになります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178184270394733000" class="cparts-editsite--img cms-easy-edit" alt="採用サイト運用のポイント" src="https://ant2.net/images/magazine/2026/06/images2026061915292318.png" width="330" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178184273936516200 cparts-editsite--mainttl" id="cms-editor-textarea-sin178184273936519800">まとめ</h2>
<div class="cms-content-parts-sin178184277019697800 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178184277019702900">
<p>採用サイトは、今や「募集ページを置くだけ」の場所ではありません。</p>
<p>会社の魅力や働く人の姿を伝え、求職者に「ここで働いてみたい」と感じてもらうための大切な場所です。</p>
<p>募集要項に加えて、社員インタビュー、職場の写真・動画、採用ブログ、よくある質問、説明会情報、応募フォームなどを整えることで、求職者にとって分かりやすく、安心して応募しやすい採用サイトになります。</p>
<p>ant2 CMSでは、様々な機能を活用しながら、採用サイトを継続的に育てていくことができます。</p>
<p>採用サイトを見直す際は、「募集情報が載っているか」だけでなく、「この会社で働くイメージが伝わるか」という視点で確認してみてはいかがでしょうか。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178185045641745500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178185045641745500 cparts-id119 lay-margin-b--3 box" style="margin-bottom:80px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178185045641749500">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177935241660519900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935241660522600">【イベント出展】『営業・マーケDXPO東京'26【夏】』に出展いたします！<br />
（2026年8月20日・8月21日）</h3>
<div class="cms-content-parts-sin177935241660528600 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177935241660530400" class="cparts-editsite--img cms-easy-edit" alt="『営業・マーケDXPO東京'26【夏】" src="https://ant2.net/images/magazine/2026/06/bnr-tks26_info_white-sales.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177935241660531600">
<div></div>
<ul>
    <li>日時：
    <ul>
        <li>8月20日（木） 9:30～17:30</li>
        <li>8月21日（金） 9:30～16:30</li>
    </ul>
    </li>
    <li><a href="https://dxpo.jp/real/fox/tokyo/sales/" target="_blank">詳細はこちら</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/06/22001/">
<title>第一印象で差をつける。メイン画像系コンテンツパーツの選び方ガイド</title>
<link>https://ant2.net/magazine/2026/06/22001/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつも「ここだけは知っておきたい編」をご覧いただき、ありがとうございます。
「よし、WEBサイトを作ろう！」と考えたとき、最初につまずくのは「メイン画像（キービジュアル）」の選び方です。
良さそうだと感じてもらえるか、イメージと違って離脱されるか。その差はデザインのセンスではなく、パーツ選びにあります。
制作現場では、「どのメイン画像パーツを使うべきか分からない」「写真は良いのにレイアウトが合わない」「同じパーツを使いがち」
といったお悩みをよく聞きます。
ant2 CMSにはメイン画像系パーツが豊富ですが、選ぶのが難しいと感じる方もいます。
そこで、数あるメイン画像系パーツの中から最適を選ぶ「選定の公式」を、わかりやすく解説します。






最初の一瞬がWEBサイトの印象を左右する、「メイン画像」の重要性




ユーザーがWEBサイトに訪れた瞬間、まず目に入るのがメイン画像です。
人と人との出会いと同じように、第一印象はほんの数秒で決まると言われています。WEBサイトも例外ではありません。
この短い時間の中で、

 会社の雰囲気
 サービスのイメージ
 信頼感

といった、WEBサイト全体の「空気感」がほぼ決まってしまいます。
メイン画像は、いわばお店の看板や入口のようなもの。
「なんか良さそう」「自分に合いそう」と感じてもらえれば、ユーザーは自然と次のコンテンツへと目を向けてくれます。









逆に、第一印象がイメージと合わないと、内容を読む前に離脱されてしまうことも少なくありません。
だからこそ、メイン画像（キービジュアル）は「どんな写真を使うか」だけで完成するわけではありません。
写真の見せ方、テキストの配置、余白のバランス&#8212;&#8212;これらをひとまとめにコントロールするのがant2の「コンテンツパーツ」の役割です。
どれだけ素敵な写真を用意しても、レイアウトが合っていなければ、その魅力は半減してしまいます。
反対に、コンテンツパーツ選びがうまくいけば、シンプルな写真でも洗練された印象を与えられます。
つまり、「写真選び」と「コンテンツパーツ選び」はセット。
メイン画像を制するために、この両輪をしっかり押さえておきましょう。




メイン画像系コンテンツパーツは大きく6種類




既存のメイン画像系コンテンツパーツは大きく6種類に分けられます。




1.写真1枚・フル幅タイプ（最もスタンダード）




最も多いタイプで、メイン画像_ver.1や10、15、22など写真が画面いっぱいに表示されるレイアウトです。
企業サイトやサービスサイトなど、幅広い業種に向いています。









 
 
 向いている写真
 オフィス風景・サービスの利用シーン・スタッフ写真・建物外観
 
 
 向いている業種
 コーポレートサイト・製造業・建設業・士業・クリニック
 
 
 対象コンテンツパーツ
 メイン画像_ver.1、2、3、4、5、7、9、10、11、13、15、16、17、18、22、25、26、28、29、35、36、37
 ※HEADERブロックもしくはUPPERブロックに配置した場合の仕様です。

 
 









写真がダイナミックに表示されるため、信頼感やスケール感を出したいWEBサイトに向いています。








メイン画像_ver.10





メイン画像_ver.22





2.写真がウィンドウ幅いっぱいにならないタイプ




メイン画像_ver.6や14、20、23などはコンテンツパーツ自体はウィンドウ幅になりますが、写真自体はウィンドウ幅いっぱいにならずに、ほかの要素と分割されているタイプは画像とテキストをバランスよく配置できるデザインになります。
余白があることでテキストが読みやすく、落ち着いた印象を与えます。









 
 
 向いている写真
 人物写真・商品写真・イメージカット
 
 
 向いている業種
 美容院・エステ・カフェ・福祉施設
 
 
 対象コンテンツパーツ
 メイン画像_ver.6、8、12、14、19、20、21、23、31、32、33、34

 
 









派手さよりも安心感・やさしさを出したい場合にお勧めです。








メイン画像_ver.14





メイン画像_ver.20





3.写真が透過されるタイプ




メイン画像_ver.9や10、11、13、26などは画像と配置したブロックのメインカラーが透過されて重なり、写真が少し暗めに表示されます。
そのため白いテキストがとても読みやすくなるという特徴があります。
※少し暗めにはなりますが、明るい写真だとテキストが読みづらいこともありますので暗めの写真を使用することをお勧めします。










 
 
 向いている写真
 風景・街並み・人物シルエット・抽象的な写真
 
 
 向いている業種
 IT企業・コンサルタント・採用サイト・スタートアップ
 
 
 対象コンテンツパーツ
 メイン画像_ver.9、10、11、13、26

 
 









少しデザイン性が高く、スタイリッシュな印象になります。








メイン画像_ver.9





メイン画像_ver.26





4.写真を複数使えるタイプ




メイン画像_ver.13や24、25、27などは2～3枚の写真を同時に見せることができます。










 
 
 向いている写真
 商品ラインアップ・スタッフ・サービス
 
 
 向いている業種
 飲食・アパレル・小売・ECサイト
 
 
 対象コンテンツパーツ
 メイン画像_ver.13、24、25、27

 
 









1枚では伝わらない情報を視覚的に伝えることができるのが特徴です。








メイン画像_ver.24





メイン画像_ver.27





5.背景画像＋パララックス（スクロール演出）タイプ




メイン画像_ver.15と18は少し変わっており、画像を「背景」として設定し、
スクロール時に背景が固定されたままになるパララックスという演出が入る仕様になります。
パララックスとは、背景と前景が異なる速度で動くことで奥行き感や高級感を演出するデザイン手法です。










 
 
 向いている写真
 自然風景・建築写真・街並み・広がりのある風景
 
 
 向いている業種
 観光・ホテル・レストラン・リゾート・ブランドサイト
 
 
 対象コンテンツパーツ
 メイン画像_ver.15、18

 
 









通常のメイン画像よりも印象に残りやすく、高級感が出るため、ブランドイメージを作りやすいというメリットがあります。








メイン画像_ver.15





メイン画像_ver.18





6.個性派デザインタイプ（装飾・アニメーション系）




メイン画像_ver.19や31、35などはほかのメイン画像系コンテンツパーツとは違い、波のような装飾や、写真が特徴的な形に切り抜かれる、テキストが流れるように表示されるなど、視覚的な演出が特徴のパーツです。
一般的なコーポレートサイトよりも、デザイン性や印象を重視するWEBサイトに向いています。









 
 
 向いている写真
 カラフルな写真・雰囲気のある人物写真・ブランドイメージ写真・イラスト系ビジュアル
 
 
 向いている業種
 デザイン事務所・クリエイティブ企業・イベント会社・アパレル・ブランドサイト
 
 
 対象コンテンツパーツ
 メイン画像_ver.19、31、35、36

 
 









こうしたパーツを使うことでWEBサイトの個性が出て記憶に残るデザインになり、若いユーザーに刺さりやすいというメリットがあります。
ただし、企業サイトや士業サイトなどでは少し派手すぎる場合もあるため、WEBサイトの目的に合わせて使用することが大切です。








メイン画像_ver.35





メイン画像_ver.31





メイン画像選びの3つのコツ




メイン画像系コンテンツパーツ選びで覚えておきたいポイントを3つご紹介します。




1.写真の横幅を意識する




フル幅タイプでは横長写真（16:9など）が最もきれいに表示されます。
画像の大きさは一般的なデスクトップのモニターに合わせて横幅を1920px以上にすると良いでしょう。
ただ、容量が大きすぎると読み込みに時間がかかってしまいますので、サーバーブラウザにアップ後は「サイズの変更」から画質を「標準（90%）」にして容量を下げることをお勧めします。
また、サーバーブラウザアップ時に「最適化＋大きい画像の自動縮小」にチェックを入れたまま画像をアップしてしまうとせっかく横幅を1920pxで制作しても縮小されてしまいますので、画像をサーバーブラウザにアップする際はチェックを忘れずに外してください。





2.テキストが読みやすいか確認




写真の文字は、被写体と背景の色が近い場合や文字自体が小さい場合に見えにくくなることがあります。
そのようなときには、写真の明度や彩度を調整して視認性を高める方法が有効です。作業を進める際は、オリジナルを保護するために段階的に調整し、最終的に読みやすさと写真の雰囲気のバランスを確認してください。
明度・彩度の調整だけでなく、画像編集ソフトで写真の上に黒系のレイヤーを重ねる手法も有効です。
写真全体の暗部を強調しすぎず、文字が浮き出るように、透明度を10～40%程度に設定して重ねると、見づらさを抑えつつ情報を伝えやすくなります。





3.WEBサイトの雰囲気に合わせる




例えば迫力を出したい時はフル幅のタイプ、優しい雰囲気にしたい場合は余白があるタイプ、スタイリッシュにしたい場合は透過するタイプといったように、WEBサイトの目的に合わせて選ぶことが重要です。
同じ写真でも、選ぶコンテンツパーツによってWEBサイト全体の印象は大きく変わります。
そのため、「どんな会社に見せたいのか」「どんな雰囲気のWEBサイトにしたいのか」を意識して選ぶことが、メイン画像（キービジュアル）を効果的に活かすポイントです。





業種別参考メイン画像系コンテンツパーツ一覧




最後に、業種別に最適化されたメイン画像の一覧をご紹介します。
制作するWEBサイトの業種に合わせ、メイン画像を構成するコンテンツパーツを絞り込み、デザインの方向性を掴む手がかりとしてご活用ください。









 
 
 業種カテゴリ
 お勧めメイン画像系コンテンツパーツ
 メイン画像サンプル
 
 
 コーポレート（企業サイト全般）
 ver.1 / ver.2 / ver.7 / ver.17 / ver.32
 
 
 メイン画像_ver.2
 
 
 
 IT・スタートアップ
 ver.4 / ver.9 / ver.10 / ver.26
 
 メイン画像_ver.10
 
 
 建設・製造
 ver.1 / ver.13 / ver.16 / ver.24
 
 メイン画像_ver.13
 
 
 医療（クリニック・病院）
 ver.6 / ver.12 / ver.30 / ver.36
 
 メイン画像_ver.12
 
 
 福祉・教育（保育・スクール）
 ver.5 / ver.14 / ver.20 / ver.31 / ver.33 / ver.34 / ver.38
 
 メイン画像_ver.14
 
 
 観光・ホテル
 ver.3 / ver.11 / ver.15 / ver.18 / ver.27
 
 メイン画像_ver.27
 
 
 飲食・カフェ
 ver.8 / ver.19 / ver.22 / ver.25 / ver.35
 
 メイン画像_ver.22
 
 
 美容・サロン
 ver.8 / ver.19 / ver.23 / ver.21
 
 メイン画像_ver.21
 
 
 EC・商品サイト
 ver.25
 
 メイン画像_ver.25
 
 
 クリエイティブ（デザイン・ブランド）
 ver.28 / ver.29 / ver.37
 
 メイン画像_ver.29
 
 





まとめ




メイン画像（キービジュアル）は、訪問者が最初に目にする「WEBサイトの顔」ともいえる重要な部分です。
ant2 CMSには、35種類以上のメイン画像系コンテンツパーツがありますが、大きく分けると「フル幅タイプ」「余白タイプ」「透過タイプ」「複数画像タイプ」「パララックスタイプ」「個性デザインタイプ」の6種類に分類できます。
それぞれの特徴を理解し、WEBサイトの目的や業種、伝えたい雰囲気に合わせて選ぶことで、WEBサイト全体の印象や伝わり方は大きく変わります。
ぜひ今回の内容を参考に、写真とコンテンツパーツを上手に組み合わせて、より魅力的なWEBづくりに役立ててみてください。








デモ登録はこちら




【イベント出展】『AI NATIVE EXPO2026』に出展いたします！
（2026年6月10日～6月12日）






 ブース情報：幕張メッセ　3ホール　小間番号【3N07】
 日時：2026年6月10日（水）～12日（金）　10：00～18：00
 詳細はこちら





</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-06-10T00:10:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin178105189843406900" class="cms-content-parts-sin178105189843417900">
<div id="cms-editor-minieditor-sin178029464202405600" class="cms-content-parts-sin178029464202413500">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつも「ここだけは知っておきたい編」をご覧いただき、ありがとうございます。</p>
<p>「よし、WEBサイトを作ろう！」と考えたとき、最初につまずくのは「メイン画像（キービジュアル）」の選び方です。<br />
<span style="font-size: 1.6rem;">良さそうだと感じてもらえるか、イメージと違って離脱されるか。その差はデザインのセンスではなく、パーツ選びにあります。</span></p>
<p>制作現場では、「<span style="font-size: 1.6rem;">どのメイン画像パーツを使うべきか分からない」</span>「写真は良いのにレイアウトが合わない」「同じパーツを使いがち」<br />
といったお悩みをよく聞きます。<br />
ant2 CMSにはメイン画像系パーツが豊富ですが、選ぶのが難しいと感じる方もいます。</p>
<p>そこで、数あるメイン画像系パーツの中から最適を選ぶ「選定の公式」を、わかりやすく解説します。</p>
</div>
<div class="cms-content-parts-sin178088808169144000 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin178088808169147600" class="cparts-editsite--img cms-easy-edit" alt="第一印象で差をつける。メイン画像系コンテンツパーツの選び方ガイド" src="https://ant2.net/images/magazine/2026/06/images2026060115200423.jpg" width="675" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178029491215494400 cparts-editsite--mainttl" id="cms-editor-textarea-sin178029491215497900">最初の一瞬がWEBサイトの印象を左右する、「メイン画像」の重要性</h2>
<div class="cms-content-parts-sin178029512245194400 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029512245198100">
<p>ユーザーがWEBサイトに訪れた瞬間、まず目に入るのがメイン画像です。<br />
人と人との出会いと同じように、第一印象はほんの数秒で決まると言われています。WEBサイトも例外ではありません。</p>
<p>この短い時間の中で、</p>
<ul>
    <li>会社の雰囲気</li>
    <li>サービスのイメージ</li>
    <li>信頼感</li>
</ul>
<p>といった、WEBサイト全体の「空気感」がほぼ決まってしまいます。</p>
<p>メイン画像は、いわばお店の看板や入口のようなもの。</p>
<p>「なんか良さそう」「自分に合いそう」と感じてもらえれば、ユーザーは自然と次のコンテンツへと目を向けてくれます。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178029512245198400" class="cparts-editsite--img cms-easy-edit" alt="「メイン画像」の重要性 イラスト" src="https://ant2.net/images/magazine/2026/06/images2026060213440680.png" width="330" title="" name="" /></div>
</div>
</div>
<div class="cms-content-parts-sin178029494203529900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029494203533500">
<p>逆に、第一印象がイメージと合わないと、内容を読む前に離脱されてしまうことも少なくありません。</p>
<p>だからこそ、メイン画像（キービジュアル）は「どんな写真を使うか」だけで完成するわけではありません。<br />
写真の見せ方、テキストの配置、余白のバランス&#8212;&#8212;これらをひとまとめにコントロールするのがant2の「コンテンツパーツ」の役割です。</p>
<p>どれだけ素敵な写真を用意しても、レイアウトが合っていなければ、その魅力は半減してしまいます。<br />
反対に、コンテンツパーツ選びがうまくいけば、シンプルな写真でも洗練された印象を与えられます。</p>
<p>つまり、「写真選び」と「コンテンツパーツ選び」はセット。<br />
メイン画像を制するために、この両輪をしっかり押さえておきましょう。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178029516140413300 cparts-editsite--mainttl" id="cms-editor-textarea-sin178029516140419000">メイン画像系コンテンツパーツは大きく6種類</h2>
<div class="cms-content-parts-sin178029517538812900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029517538817300">
<p>既存のメイン画像系コンテンツパーツは大きく6種類に分けられます。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178029519707742200 cparts-editsite--mainttl" id="cms-editor-textarea-sin178029519707747100">1.写真1枚・フル幅タイプ（最もスタンダード）</h3>
<div class="cms-content-parts-sin178029524486866300 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029524486870000">
<p>最も多いタイプで、メイン画像_ver.1や10、15、22など写真が画面いっぱいに表示されるレイアウトです。<br />
企業サイトやサービスサイトなど、幅広い業種に向いています。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029530693219600 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin178029530693229900">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th>向いている写真</th>
            <td>オフィス風景・サービスの利用シーン・スタッフ写真・建物外観</td>
        </tr>
        <tr>
            <th>向いている業種</th>
            <td>コーポレートサイト・製造業・建設業・士業・クリニック</td>
        </tr>
        <tr>
            <th>対象コンテンツパーツ</th>
            <td>メイン画像_ver.1、2、3、4、5、7、9、10、11、13、15、16、17、18、22、25、26、28、29、35、36、37<br />
            <span style="font-size: small;">※HEADERブロックもしくはUPPERブロックに配置した場合の仕様です。</span></td>

        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029538524307200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029538524284200">
<p>写真がダイナミックに表示されるため、信頼感やスケール感を出したいWEBサイトに向いています。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029541344125300 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029541344127700">
<p style="text-align: center;"><strong><span style="font-size: large;">メイン画像_ver.10</span></strong></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/ver.10.jpg" width="1280" height="657" alt="メイン画像_ver.10" /></span></strong></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029541344128100">
<p style="text-align: center;"><strong><span style="font-size: large;">メイン画像_ver.22</span></strong></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/ver22.jpg" alt="メイン画像_ver.22" width="1280" height="657" /></span></strong></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178029563821865200 cparts-editsite--mainttl" id="cms-editor-textarea-sin178029563821873300">2.写真がウィンドウ幅いっぱいにならないタイプ</h3>
<div class="cms-content-parts-sin178029564343408000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029564343378100">
<p>メイン画像_ver.6や14、20、23などはコンテンツパーツ自体はウィンドウ幅になりますが、写真自体はウィンドウ幅いっぱいにならずに、ほかの要素と分割されているタイプは画像とテキストをバランスよく配置できるデザインになります。<br />
余白があることでテキストが読みやすく、落ち着いた印象を与えます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029564768276600 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin178029564768241700">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th>向いている写真</th>
            <td>人物写真・商品写真・イメージカット</td>
        </tr>
        <tr>
            <th>向いている業種</th>
            <td>美容院・エステ・カフェ・福祉施設</td>
        </tr>
        <tr>
            <th>対象コンテンツパーツ</th>
            <td>メイン画像_ver.6、8、12、14、19、20、21、23、31、32、33、34</td>

        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029565379095600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029565379066300">
<p>派手さよりも安心感・やさしさを出したい場合にお勧めです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029565803569600 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029565803519300">
<p style="text-align: center;"><strong><span style="font-size: large;">メイン画像_ver.14</span></strong></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/ver14.jpg" width="1280" height="657" alt="メイン画像_ver.14" /></span></strong></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029565803527000">
<p style="text-align: center;"><strong><span style="font-size: large;">メイン画像_ver.20</span></strong></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/ver20.jpg" alt="メイン画像_ver.20" width="1280" height="657" /></span></strong></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178029585455684200 cparts-editsite--mainttl" id="cms-editor-textarea-sin178029585455692300">3.写真が透過されるタイプ</h3>
<div class="cms-content-parts-sin178029586026819500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029586026787700">
<p>メイン画像_ver.9や10、11、13、26などは画像と配置したブロックのメインカラーが透過されて重なり、写真が少し暗めに表示されます。<br />
そのため白いテキストがとても読みやすくなるという特徴があります。<br />
※少し暗めにはなりますが、明るい写真だとテキストが読みづらいこともありますので暗めの写真を使用することをお勧めします。</p>
<div></div>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029586440869900 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin178029586440833600">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th>向いている写真</th>
            <td>風景・街並み・人物シルエット・抽象的な写真</td>
        </tr>
        <tr>
            <th>向いている業種</th>
            <td>IT企業・コンサルタント・採用サイト・スタートアップ</td>
        </tr>
        <tr>
            <th>対象コンテンツパーツ</th>
            <td>メイン画像_ver.9、10、11、13、26</td>

        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029586841584400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029586841554300">
<p>少しデザイン性が高く、スタイリッシュな印象になります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029609932652100 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029609932607700">
<p style="text-align: center;"><strong><span style="font-size: large;">メイン画像_ver.9</span></strong></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/ver9.jpg" width="1280" height="657" alt="メイン画像_ver.9" /></span></strong></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029609932615100">
<p style="text-align: center;"><strong><span style="font-size: large;">メイン画像_ver.26</span></strong></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/ver26.jpg" alt="メイン画像_ver.26" width="1280" height="768" /></span></strong></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178029607258423300 cparts-editsite--mainttl" id="cms-editor-textarea-sin178029607258431300">4.写真を複数使えるタイプ</h3>
<div class="cms-content-parts-sin178029607991277400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029607991248600">
<p>メイン画像_ver.13や24、25、27などは2～3枚の写真を同時に見せることができます。</p>
<div></div>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029608403167400 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin178029608403134800">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th>向いている写真</th>
            <td>商品ラインアップ・スタッフ・サービス</td>
        </tr>
        <tr>
            <th>向いている業種</th>
            <td>飲食・アパレル・小売・ECサイト</td>
        </tr>
        <tr>
            <th>対象コンテンツパーツ</th>
            <td>メイン画像_ver.13、24、25、27</td>

        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029609291735500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029609291701000">
<p>1枚では伝わらない情報を視覚的に伝えることができるのが特徴です。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178029587444028300 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029587443980500">
<p style="text-align: center;"><strong><span style="font-size: large;">メイン画像_ver.24</span></strong></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/ver24.jpg" width="1280" height="768" alt="メイン画像_ver.24" /></span></strong></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178029587443989400">
<p style="text-align: center;"><strong><span style="font-size: large;">メイン画像_ver.27</span></strong></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/ver27.jpg" alt="メイン画像_ver.27" width="1280" height="768" /></span></strong></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178037340603225400 cparts-editsite--mainttl" id="cms-editor-textarea-sin178037340603233100">5.背景画像＋パララックス（スクロール演出）タイプ</h3>
<div class="cms-content-parts-sin178037341108898900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037341108859300">
<p>メイン画像_ver.15と18は少し変わっており、画像を「背景」として設定し、<br />
スクロール時に背景が固定されたままになるパララックスという演出が入る仕様になります。<br />
パララックスとは、背景と前景が異なる速度で動くことで奥行き感や高級感を演出するデザイン手法です。</p>
<div></div>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178037341640864800 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin178037341640830600">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th>向いている写真</th>
            <td>自然風景・建築写真・街並み・広がりのある風景</td>
        </tr>
        <tr>
            <th>向いている業種</th>
            <td>観光・ホテル・レストラン・リゾート・ブランドサイト</td>
        </tr>
        <tr>
            <th>対象コンテンツパーツ</th>
            <td>メイン画像_ver.15、18</td>

        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178037342188069100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037342188032100">
<p>通常のメイン画像よりも印象に残りやすく、高級感が出るため、ブランドイメージを作りやすいというメリットがあります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178037342747684900 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037342747635900">
<p style="text-align: center;"><strong><span style="font-size: large;">メイン画像_ver.15</span></strong></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/v15.webp" width="800" height="412" alt="メイン画像_ver.15" /></span></strong></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037342747644000">
<p style="text-align: center;"><strong><span style="font-size: large;">メイン画像_ver.18</span></strong></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/v18.webp" width="800" height="413" alt="メイン画像_ver.18" /></span></strong></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178037373191649500 cparts-editsite--mainttl" id="cms-editor-textarea-sin178037373191659800">6.個性派デザインタイプ（装飾・アニメーション系）</h3>
<div class="cms-content-parts-sin178037373655912200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037373655860600">
<p>メイン画像_ver.19や31、35などはほかのメイン画像系コンテンツパーツとは違い、波のような装飾や、写真が特徴的な形に切り抜かれる、テキストが流れるように表示されるなど、視覚的な演出が特徴のパーツです。<br />
一般的なコーポレートサイトよりも、デザイン性や印象を重視するWEBサイトに向いています。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178037374135552200 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin178037374135514100">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th>向いている写真</th>
            <td>カラフルな写真・雰囲気のある人物写真・ブランドイメージ写真・イラスト系ビジュアル</td>
        </tr>
        <tr>
            <th>向いている業種</th>
            <td>デザイン事務所・クリエイティブ企業・イベント会社・アパレル・ブランドサイト</td>
        </tr>
        <tr>
            <th>対象コンテンツパーツ</th>
            <td>メイン画像_ver.19、31、35、36</td>

        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178037374727429600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037374727403500">
<p>こうしたパーツを使うことでWEBサイトの個性が出て記憶に残るデザインになり、若いユーザーに刺さりやすいというメリットがあります。<br />
ただし、企業サイトや士業サイトなどでは少し派手すぎる場合もあるため、WEBサイトの目的に合わせて使用することが大切です。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178037375242421000 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037375242371700">
<p style="text-align: center;"><strong><span style="font-size: large;">メイン画像_ver.35</span></strong></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/v35.webp" width="800" height="432" alt="メイン画像_ver.35" /></span></strong></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037375242379900">
<p style="text-align: center;"><font size="4"><b>メイン画像_ver.31</b></font></p>
<p style="text-align: center;"><strong><span style="font-size: large;"><img src="https://ant2.net/images/magazine/2026/06/ver31.jpg" width="1280" height="692" alt="メイン画像_ver.31" /></span></strong></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178037396490445400 cparts-editsite--mainttl" id="cms-editor-textarea-sin178037396490449600">メイン画像選びの3つのコツ</h2>
<div class="cms-content-parts-sin178037397551281400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037397551286300">
<p>メイン画像系コンテンツパーツ選びで覚えておきたいポイントを3つご紹介します。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin178037399780183200 cparts-editsite--mainttl" id="cms-editor-textarea-sin178037399780196700">1.写真の横幅を意識する</h3>
<div class="cms-content-parts-sin178037402609978000 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037402609981800">
<p>フル幅タイプでは横長写真（16:9など）が最もきれいに表示されます。</p>
<p>画像の大きさは一般的なデスクトップのモニターに合わせて横幅を1920px以上にすると良いでしょう。</p>
<p>ただ、容量が大きすぎると読み込みに時間がかかってしまいますので、サーバーブラウザにアップ後は「サイズの変更」から画質を「標準（90%）」にして容量を下げることをお勧めします。</p>
<p>また、サーバーブラウザアップ時に「最適化＋大きい画像の自動縮小」にチェックを入れたまま画像をアップしてしまうとせっかく横幅を1920pxで制作しても縮小されてしまいますので、画像をサーバーブラウザにアップする際はチェックを忘れずに外してください。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178037402609982100" class="cparts-editsite--img cms-easy-edit" alt="写真の横幅 イメージ画像" src="https://ant2.net/images/magazine/2026/06/images2026060115200486.jpg" width="330" title="" name="" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin178037403897020400 cparts-editsite--mainttl" id="cms-editor-textarea-sin178037403897027700">2.テキストが読みやすいか確認</h3>
<div class="cms-content-parts-sin178037404154866600 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037404154805900">
<p>写真の文字は、被写体と背景の色が近い場合や文字自体が小さい場合に見えにくくなることがあります。</p>
<p>そのようなときには、写真の明度や彩度を調整して視認性を高める方法が有効です。作業を進める際は、オリジナルを保護するために段階的に調整し、最終的に読みやすさと写真の雰囲気のバランスを確認してください。</p>
<p>明度・彩度の調整だけでなく、画像編集ソフトで写真の上に黒系のレイヤーを重ねる手法も有効です。</p>
<p>写真全体の暗部を強調しすぎず、文字が浮き出るように、透明度を10～40%程度に設定して重ねると、見づらさを抑えつつ情報を伝えやすくなります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178037404154813000" class="cparts-editsite--img cms-easy-edit" alt="テキストが読みやすいか確認 イメージ画像" src="https://ant2.net/images/magazine/2026/06/images2026060115200414.jpg" width="330" title="" name="" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin178037421759600300 cparts-editsite--mainttl" id="cms-editor-textarea-sin178037421759610600">3.WEBサイトの雰囲気に合わせる</h3>
<div class="cms-content-parts-sin178037422062575200 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037422062522700">
<p>例えば迫力を出したい時はフル幅のタイプ、優しい雰囲気にしたい場合は余白があるタイプ、スタイリッシュにしたい場合は透過するタイプといったように、WEBサイトの目的に合わせて選ぶことが重要です。</p>
<p>同じ写真でも、選ぶコンテンツパーツによってWEBサイト全体の印象は大きく変わります。</p>
<p>そのため、「どんな会社に見せたいのか」「どんな雰囲気のWEBサイトにしたいのか」を意識して選ぶことが、メイン画像（キービジュアル）を効果的に活かすポイントです。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin178037422062530700" class="cparts-editsite--img cms-easy-edit" alt="サイトの雰囲気に合わせる イメージ画像" src="https://ant2.net/images/magazine/2026/06/images2026060115200466.jpg" width="330" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin178037439577768600 cparts-editsite--mainttl" id="cms-editor-textarea-sin178037439577773700">業種別参考メイン画像系コンテンツパーツ一覧</h2>
<div class="cms-content-parts-sin178037441484174500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037441484180000">
<p>最後に、業種別に最適化されたメイン画像の一覧をご紹介します。</p>
<p>制作するWEBサイトの業種に合わせ、メイン画像を構成するコンテンツパーツを絞り込み、デザインの方向性を掴む手がかりとしてご活用ください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178037491610484300 cparts-id93--01 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin178037491610493200">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th style="text-align: center;">業種カテゴリ</th>
            <th style="text-align: center;">お勧めメイン画像系コンテンツパーツ</th>
            <th style="text-align: center;">メイン画像サンプル</th>
        </tr>
        <tr>
            <td style="text-align: center;">コーポレート（企業サイト全般）</td>
            <td style="text-align: center;">ver.1 / ver.2 / ver.7 / ver.17 / ver.32</td>
            <td>
            <p style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/06/images2026060912524954.jpg" width="300" height="188" alt="メイン画像_ver.2" /><br />
            <strong>メイン画像_ver.2</strong></p>
            </td>
        </tr>
        <tr>
            <td style="text-align: center;">IT・スタートアップ</td>
            <td style="text-align: center;">ver.4 / ver.9 / ver.10 / ver.26</td>
            <td style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/06/images2026060912524958.jpg" alt="メイン画像_ver.10" width="300" height="188" /><br />
            <strong>メイン画像_ver.10</strong></td>
        </tr>
        <tr>
            <td style="text-align: center;">建設・製造</td>
            <td style="text-align: center;">ver.1 / ver.13 / ver.16 / ver.24</td>
            <td style="text-align: center;"><strong><img src="https://ant2.net/images/magazine/2026/06/images2026060912524960.jpg" alt="メイン画像_ver.13" width="300" height="188" /></strong><br />
            <strong>メイン画像_ver.13</strong></td>
        </tr>
        <tr>
            <td style="text-align: center;">医療（クリニック・病院）</td>
            <td style="text-align: center;">ver.6 / ver.12 / ver.30 / ver.36</td>
            <td style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/06/images2026060912524855.jpg" alt="メイン画像_ver.12" width="300" height="188" /><br />
            <strong>メイン画像_ver.12</strong></td>
        </tr>
        <tr>
            <td style="text-align: center;">福祉・教育（保育・スクール）</td>
            <td style="text-align: center;">ver.5 / ver.14 / ver.20 / ver.31 / ver.33 / ver.34 / ver.38</td>
            <td style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/06/images2026060912524950.jpg" alt="メイン画像_ver.14" width="300" height="188" /><br />
            <strong>メイン画像_ver.14</strong></td>
        </tr>
        <tr>
            <td style="text-align: center;">観光・ホテル</td>
            <td style="text-align: center;">ver.3 / ver.11 / ver.15 / ver.18 / ver.27</td>
            <td style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/06/images2026060912524915.jpg" alt="メイン画像_ver.27" width="300" height="188" /><br />
            <strong>メイン画像_ver.27</strong></td>
        </tr>
        <tr>
            <td style="text-align: center;">飲食・カフェ</td>
            <td style="text-align: center;">ver.8 / ver.19 / ver.22 / ver.25 / ver.35</td>
            <td style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/06/images2026060912524921.jpg" alt="メイン画像_ver.22" width="300" height="188" /><br />
            <strong>メイン画像_ver.22</strong></td>
        </tr>
        <tr>
            <td style="text-align: center;">美容・サロン</td>
            <td style="text-align: center;">ver.8 / ver.19 / ver.23 / ver.21</td>
            <td style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/06/images2026060913315570.jpg" alt="メイン画像_ver.21" width="300" height="188" /><br />
            <strong>メイン画像_ver.21</strong></td>
        </tr>
        <tr>
            <td style="text-align: center;">EC・商品サイト</td>
            <td style="text-align: center;">ver.25</td>
            <td style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/06/images2026060913361337.jpg" alt="メイン画像_ver.25" width="300" height="188" /><br />
            <strong>メイン画像_ver.25</strong></td>
        </tr>
        <tr>
            <td style="text-align: center;">クリエイティブ（デザイン・ブランド）</td>
            <td style="text-align: center;">ver.28 / ver.29 / ver.37</td>
            <td style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/06/images2026060913315553.jpg" alt="メイン画像_ver.29" width="300" height="188" /><br />
            <strong>メイン画像_ver.29</strong></td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin178037517821540600 cparts-editsite--mainttl" id="cms-editor-textarea-sin178037517821585500">まとめ</h2>
<div class="cms-content-parts-sin178037519493707300 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037519493714100">
<p>メイン画像（キービジュアル）は、訪問者が最初に目にする「WEBサイトの顔」ともいえる重要な部分です。</p>
<p>ant2 CMSには、35種類以上のメイン画像系コンテンツパーツがありますが、大きく分けると「フル幅タイプ」「余白タイプ」「透過タイプ」「複数画像タイプ」「パララックスタイプ」「個性デザインタイプ」の6種類に分類できます。</p>
<p>それぞれの特徴を理解し、WEBサイトの目的や業種、伝えたい雰囲気に合わせて選ぶことで、WEBサイト全体の印象や伝わり方は大きく変わります。</p>
<p>ぜひ今回の内容を参考に、写真とコンテンツパーツを上手に組み合わせて、より魅力的なWEBづくりに役立ててみてください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin178037599896592900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin178037599896592900 cparts-id119 lay-margin-b--3 box" style="margin-bottom:80px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin178037599896600000">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177935241660519900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935241660522600">【イベント出展】『AI NATIVE EXPO2026』に出展いたします！<br />
（2026年6月10日～6月12日）</h3>
<div class="cms-content-parts-sin177935241660528600 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177935241660530400" class="cparts-editsite--img cms-easy-edit" alt="AI NATIVE EXPO2026" src="https://ant2.net/images/magazine/2026/06/AINE26_Logo_color.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177935241660531600">
<ul>
    <li>ブース情報：幕張メッセ　3ホール　小間番号【3N07】</li>
    <li>日時：2026年6月10日（水）～12日（金）　10：00～18：00</li>
    <li><a href="https://f2ff.jp/2026/aine/exhibitor/show.php?id=3678&#38;lang=ja" target="_blank">詳細はこちら</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/05/22000/">
<title>初心者でも簡単！WEBサイトの印象を変えるWEBフォント活用術</title>
<link>https://ant2.net/magazine/2026/05/22000/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
突然ですが、皆さんは他社のWEBサイトを見ていて「なんだかこのサイト、すごく読みやすい」「おしゃれで洗練されている」と感じたことはありませんか？
実は、その要因のひとつが 「フォント（文字のデザイン）」 にあることが少なくありません。
WEBサイトでは、写真や色に目が行きがちですが、ページの大部分を占めているのは「文字」です。
つまりフォントを整えるだけで、WEBサイト全体の印象は大きく変わります。
今回は

 WEBフォントとは何か
 日本のWEBサイトで最も使われているフォント
 雰囲気別おすすめフォント

などを、初心者の方でも分かるように解説いたします。






WEBフォントとは




WEBフォントとは、インターネット上から読み込んで表示するフォントのことです。
通常、WEBサイトの文字は、見ている人のパソコンやスマートフォンに入っているフォントで表示されます。
そのため、見る環境によって異なるフォントで表示されてしまうことがありましたが、WEBフォントを使えば、どのパソコン、どのスマートフォン、どのブラウザでも、同じフォントで表示することができます。
最近のWEBサイトでは、WEBフォントを使うことが一般的になっています。
インターネットを通じてフォントを読み込むため、「誰が、どの端末で見ても、あなたが選んだこだわりのデザイン」で表示させることができるのです。




WEBフォントを使用するメリット
1.どの端末でも同じデザインで表示できる




WEBフォントの最大のメリットは、閲覧する環境に左右されず、同じフォントで表示できることです。
従来のWEBサイトでは、パソコンやスマートフォンに入っているフォントを使って表示していたため、

 Windowsではゴシック体
 Mac OSでは別のフォント
 スマートフォンではさらに違うフォント

といったように、同じWEBサイトでも表示が変わってしまうことがありました。
WEBフォントを使えば、フォントをインターネットから読み込むため、どのパソコン・どのスマートフォン・どのブラウザでも同じフォントで表示できます。
これにより、WEBサイトのデザインやブランドイメージを統一することができます。





2.デザインの自由度が高くなる




WEBフォントを使うことで、使用できるフォントの種類が大きく広がります。以前は、パソコンに標準で入っているフォントしか使えなかったため、どうしても似たようなデザインのWEBサイトになりがちでした。
WEBフォントを使えば、

 シンプルで読みやすいフォント
 柔らかい印象の丸ゴシック
 高級感のある明朝体
 海外サイトのようなスタイリッシュな英字フォント

など、WEBサイトのイメージに合わせてフォントを選ぶことができます。
フォントを変えるだけでも、WEBサイトの印象は大きく変わります。





3.読みやすさを改善できる




最近のWEBフォントは、スマートフォンやパソコンでの読みやすさを考えて設計されているものが多くあります。例えば、Googleが提供している「Noto Sans JP」は、日本語でも非常に読みやすいフォントとして、多くの企業サイトで採用されています。
文字が読みやすくなることで、

 ページの滞在時間が長くなる
 記事が最後まで読まれやすくなる
 ユーザーのストレスが減る

といった効果も期待できます。





WEBフォントを使用するデメリット




デザインやユーザビリティ的にもメリットが大きい一方で、デメリットもあります。









 
 
 ページ表示が
 少し遅くなることがある
 WEBフォントはインターネットからフォントデータを読み込むため、フォントを多く設定しすぎるとページの表示速度が少し遅くなる場合があります。
 ただし、最近のWEBフォントは軽量化されているため、通常のWEBサイトで1〜2種類のフォントを使用する程度であれば、ほとんど問題ありません。
 
 
 インターネット環境に
 依存する
 WEBフォントはネット経由で読み込む仕組みのため、通信環境が極端に悪い場合には、フォントが読み込まれるまで少し時間がかかることがあります。 
 その場合、一時的に別のフォントで表示されることがあります。 
 とはいえ、近年はユーザーの通信環境が整っているケースも多く、一般的なWEBサイトでは大きな問題になることはほとんどありません。
 
 
 フォントによっては
 利用条件がある
 Google Fontsのように無料で利用できるフォントも多いですが、Adobe Fontsなど一部のフォントは利用ライセンス（使用条件）があります。 
 そのため、WEBサイトで利用する場合は商用利用が可能かどうかを確認する必要があります。
 
 









このように、WEBフォントには読み込み速度や通信環境、利用条件など、いくつか注意しておきたいポイントがあります。
使用するフォントの種類を絞り、WEBサイトの雰囲気に合ったものを選ぶことで、デザイン性と読みやすさを両立することができます。
ポイントを押さえて上手に活用すれば、WEBフォントはWEBサイトの印象をより魅力的に見せる強い味方になります。
WEBサイトの目的やターゲットに合わせて、効果的にWEBフォントを取り入れていきましょう。




日本で不動の人気No.1WEBフォント「Noto Sans JP」




「たくさん種類がありすぎて、どれを選べばいいかわからない&#8230;」
そんな方に、まず間違いない選択肢としておすすめしたいのが、日本のWEBサイトで非常によく採用されている「Noto Sans JP（ノト・サンズ・ジェーピー）」と呼ばれるゴシック体のフォントです。
Googleが提供しているこのフォントは日本のWEBサイトで最も利用されているWEBフォントの一つです。




Noto Sans JPを使用するメリット




圧倒的な読みやすさ
細い文字から太い文字まで揃っており、スマートフォンの小さな画面でも目が疲れにくい設計です。




誠実でモダンな印象
余計な飾りがないため、企業サイトに欠かせない「信頼感」や「清潔感」を演出できます。








Noto Sans JPは、読みやすさと端正な印象を両立する日本語対応フォントとして広く支持されており、企業サイト・コーポレートサイト・サービスサイトなど、さまざまなジャンルで採用されています。
さらに、洗練された字形と安定感のある字幅が、ブランドの表現力を高め、訪問者に信頼感と品位を伝えます。
高い可読性と統一感のあるデザインが、ブランドメッセージの伝達力を高め、訪問者に好印象を与えます。
読みやすさを支える適切な字間・行間設計と、長文にも疲れにくい滑らかな視認性が特徴です。あらゆるデバイスで一貫したビジュアル体験を実現できるフォントです。





ant2 CMSで「Noto Sans JP」を設定するには



01


フォントサービス（Google Fonts）をインストールする

コントロールパネルから[作成] &#8594; [デザイン] &#8594; [フォントを変える]を選択します。
&#8220;フォント設定ダイアログ&#8221;が表示されますので、【インストール】タブを選択し、[追加]ボタンをクリックして、フォントサービス一覧から「Google Fonts」の[追加]ボタンをクリックします。
※「Google Fonts + 日本語早期アクセス」は開発中のフォントが含まれます。通常は、正式版である「Google Fonts」を選択するのがおすすめです。








02


使いたい書体「Noto Sans JP」を追加する

フォントサービスがインストールできたら【書体】タブの[追加]ボタンをクリックして、「書体」のプルダウンの中から「Noto Sans JP」を選び[OK]ボタンをクリックします。
「書体」はアルファベット順に表示されています。








03


WEBサイト全体の文字を切り替える

最後に【全般設定】タブを開き、対象（タグ）の一覧から、フォントを設定する対象（タグ）の[編集]ボタンをクリックします。
WEBサイト全体で「Noto Sans JP」を使用する場合は対象一覧の中から 「全体（BODY）」 の横にある [編集] ボタンをクリックします。
設定画面で、フォントサービスでは 「Google Fonts」 を、追加済み書体では「Noto Sans JP」 を選んで [OK] を押します。
【全般設定】タブで設定書体に「Noto Sans JP」が設定されていれば設定完了です。





日本語フォントを選定したい時は




WEBサイトで使用するフォントを選定したい場合、ant2 CMSのダイアログでは日本語フォントを確認することができません。
ダイアログで設定する前に、Google Fontsのサイトで「Filter」の「Language」から「Japanese」を選択すると日本語（漢字）に対応したWEBフォントが表示されますので、その状態で使用したいフォントを選定してください。
また、WEBサイト全体（BODY）で使用したい場合はフォントによっては小さいサイズで読みづらくなる場合があります。
詳細を見たいフォントをクリックすると文字サイズを変更して確認ができますので、14pxや16pxのサイズで確認することをお勧めします。
Google Fontsで日本語フォントを確認する




「なりたい雰囲気」で選ぶ！おすすめフォント4選




「Noto Sans JP」以外にも、Googleが無料で提供しているフォントはたくさんあります。WEBサイトの目的に合わせて使い分けてみましょう。
いずれも「Google Fonts」でインストールできるフォントになります。




（1）優しく、親しみやすい雰囲気にしたい場合





 
 
 
 フォント名
 特徴
 
 
 日本語
 Zen Maru Gothic
 （ゼン丸ゴシック）
 文字の角が丸くなっており、幼稚園や介護施設、ハンドメイドショップ、カフェなど「安心感・柔らかさ」を伝えたいWEBサイトに最適です。
 
 
 英語
 Quicksand
 （クイックサンド）
 文字の端が丸くなっており、Zen Maru Gothicの「柔らかさ」と完璧に調和します。幾何学的でモダンな印象もプラスされるため、子供向け、カフェ、美容系などのWEBサイトにぴったりです。
 
 











（2）伝統的・高級感を演出したい場合





 
 
 
 フォント名
 特徴
 
 
 日本語
 Noto Serif JP
 （ノト・セリフ・ジェーピー）
 いわゆる「明朝体」です。縦書きが似合うような和風のWEBサイトや、落ち着いたホテルのWEBサイト、士業の方など、カチッとした権威性を出したい時におすすめです。
 
 
 英語
 Libre Baskerville
 （リブラ・バスカヴィル）
 伝統的なセリフ体で、上品さと信頼感があります。Noto Serif JPの「誠実さ」を損なわず、かつWEB画面でも読みやすいよう設計されているため、非常に相性が良いです。
 
 











（3）おしゃれなアクセントを加えたい場合





 
 
 
 フォント名
 特徴
 
 
 日本語
 Zen Kaku Gothic New
 （ゼン角ゴシック）
 現代のデジタルデバイス（スマートフォンやPC）で見られることを前提に設計された、非常にクリーンでスタンダードなゴシック体です。
 
 
 英語
 Montserrat
 （モンセラート）
 見出しやメニューの一部に使うだけで、一気に海外のカタログのような都会的な雰囲気になります。幾何学的な形がとても美しいフォントです。
 
 











（4）遊びごころのあるWEBサイトにしたい場合





 
 
 
 フォント名
 特徴
 
 
 日本語
 Stick（スティック）
 曲線がほとんどなく、カクカクとした直線だけで構成されたユニークな書体です。どこか「レトロゲーム」のようなデジタル感と、「手作り工作」のような素朴さが同居しています。
 
 
 英語
 Stick No Bills
 （スティック・ノー・ビルズ）
 文字の線がところどころ途切れているのが特徴で、これが「角ばった印象」と「インダストリアル（工業的）な雰囲気」を際立たせます。
 
 











「Google Fonts」以外のWEBフォント




「Google Fonts」以外にも、よく使われるWEBフォントがあります。
もっとも有名なのは、デザインソフトで有名なAdobeが提供している「Adobe Fonts」です。
「Adobe Fonts」は、高品質な日本語フォントやデザイン性が高いフォント、有名ブランドでも使用されているフォントがあります。
例えば

 源ノ明朝
 筑紫フォント
 貂明朝

など、プロのデザイン現場でもよく使われています。









「Adobe Fonts」をant2 CMSで作成したWEBサイト内で使う場合は、Adobeアカウントを取得してプロジェクトを登録し、
提供される使用したいフォントのコードを、ant2 CMSのGoogle Search Consoleダイアログの「メタタグ」内に貼り付けるだけで使うことができます。




まとめ




WEBサイトのデザインというと、写真や色、レイアウトに目が行きがちですが、実はフォントも非常に重要な要素です。
フォントを変えるだけで読みやすさが向上したり、WEBサイトの印象が良くなったり、ブランドイメージが統一されるといった効果があります。
「文字」は、あなたの会社のメッセージを届ける大切な「声」のようなものです。
WEBフォントを活用することで、その声はより鮮明に、より魅力的に届くようになります。

 まずは「Noto Sans JP」に変えてみる。
 慣れてきたら、サイトの雰囲気に合わせてフォントを選んでみる。

ant2 CMSならGoogle WEBフォントを簡単に設定できる機能があります。
まだ設定されていない方は、ぜひ一度お試しください。
その手軽さと変化の大きさに、きっと驚くはずです。








デモ登録はこちら




【イベント出展】『AI NATIVE EXPO2026』に出展いたします！
（2026年6月10日～6月12日）






 ブース情報：幕張メッセ　3ホール　小間番号【3N07】
 日時：2026年6月10日（水）～12日（金）　10：00～18：00
 詳細はこちら





</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-05-27T00:00:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin177984260449316800" class="cms-content-parts-sin177984260449325400">
<div id="cms-editor-minieditor-sin177934732702582700" class="cms-content-parts-sin177934732702590600">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>突然ですが、皆さんは他社のWEBサイトを見ていて「なんだかこのサイト、すごく読みやすい」「おしゃれで洗練されている」と感じたことはありませんか？</p>
<p>実は、その要因のひとつが 「フォント（文字のデザイン）」 にあることが少なくありません。<br />
WEBサイトでは、写真や色に目が行きがちですが、ページの大部分を占めているのは「文字」です。</p>
<p>つまりフォントを整えるだけで、WEBサイト全体の印象は大きく変わります。</p>
<p>今回は</p>
<ul>
    <li>WEBフォントとは何か</li>
    <li>日本のWEBサイトで最も使われているフォント</li>
    <li>雰囲気別おすすめフォント</li>
</ul>
<p>などを、初心者の方でも分かるように解説いたします。</p>
</div>
<div class="cms-content-parts-sin177934743446642000 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin177934743446647700" class="cparts-editsite--img cms-easy-edit" alt="初心者でも簡単！サイトの印象を変えるWEBフォント活用術" src="https://ant2.net/images/magazine/2026/05/image02.jpg" width="675" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177934750889006800 cparts-editsite--mainttl" id="cms-editor-textarea-sin177934750889010400">WEBフォントとは</h2>
<div class="cms-content-parts-sin177934755441563600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177934755441575300">
<p>WEBフォントとは、インターネット上から読み込んで表示するフォントのことです。</p>
<p>通常、WEBサイトの文字は、見ている人のパソコンやスマートフォンに入っているフォントで表示されます。</p>
<p>そのため、見る環境によって異なるフォントで表示されてしまうことがありましたが、WEBフォントを使えば、どのパソコン、どのスマートフォン、どのブラウザでも、同じフォントで表示することができます。</p>
<p>最近のWEBサイトでは、WEBフォントを使うことが一般的になっています。<br />
インターネットを通じてフォントを読み込むため、「誰が、どの端末で見ても、あなたが選んだこだわりのデザイン」で表示させることができるのです。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177934764831339000 cparts-editsite--mainttl" id="cms-editor-textarea-sin177934764831342700">WEBフォントを使用するメリット</h3>
<h4 class="cms-content-parts-sin177934766943658700 cparts-editsite--mainttl" id="cms-editor-textarea-sin177934766943661800">1.どの端末でも同じデザインで表示できる</h4>
<div class="cms-content-parts-sin177934770035935900 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177934770035969800">
<p>WEBフォントの最大のメリットは、閲覧する環境に左右されず、同じフォントで表示できることです。<br />
従来のWEBサイトでは、パソコンやスマートフォンに入っているフォントを使って表示していたため、</p>
<ul>
    <li>Windowsではゴシック体</li>
    <li>Mac OSでは別のフォント</li>
    <li>スマートフォンではさらに違うフォント</li>
</ul>
<p>といったように、同じWEBサイトでも表示が変わってしまうことがありました。</p>
<p>WEBフォントを使えば、フォントをインターネットから読み込むため、どのパソコン・どのスマートフォン・どのブラウザでも同じフォントで表示できます。</p>
<p>これにより、WEBサイトのデザインやブランドイメージを統一することができます。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177934770035970400" class="cparts-editsite--img cms-easy-edit" alt="どの端末でも同じデザインで表示できる" src="https://ant2.net/images/magazine/2026/05/image04.jpg" width="330" title="" name="" /></div>
</div>
</div>
<h4 class="cms-content-parts-sin177934782311866200 cparts-editsite--mainttl" id="cms-editor-textarea-sin177934782311879400">2.デザインの自由度が高くなる</h4>
<div class="cms-content-parts-sin177934782575640700 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177934782575585400">
<p>WEBフォントを使うことで、使用できるフォントの種類が大きく広がります。以前は、パソコンに標準で入っているフォントしか使えなかったため、どうしても似たようなデザインのWEBサイトになりがちでした。</p>
<p>WEBフォントを使えば、</p>
<ul>
    <li>シンプルで読みやすいフォント</li>
    <li>柔らかい印象の丸ゴシック</li>
    <li>高級感のある明朝体</li>
    <li>海外サイトのようなスタイリッシュな英字フォント</li>
</ul>
<p>など、WEBサイトのイメージに合わせてフォントを選ぶことができます。</p>
<p>フォントを変えるだけでも、WEBサイトの印象は大きく変わります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177934782575593300" class="cparts-editsite--img cms-easy-edit" alt="デザインの自由度が高くなる" src="https://ant2.net/images/magazine/2026/05/image05.jpg" width="330" title="" name="" /></div>
</div>
</div>
<h4 class="cms-content-parts-sin177934791932783500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177934791932791800">3.読みやすさを改善できる</h4>
<div class="cms-content-parts-sin177934792194045400 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177934792193993700">
<p>最近のWEBフォントは、スマートフォンやパソコンでの読みやすさを考えて設計されているものが多くあります。例えば、Googleが提供している「Noto Sans JP」は、日本語でも非常に読みやすいフォントとして、多くの企業サイトで採用されています。</p>
<p>文字が読みやすくなることで、</p>
<ul>
    <li>ページの滞在時間が長くなる</li>
    <li>記事が最後まで読まれやすくなる</li>
    <li>ユーザーのストレスが減る</li>
</ul>
<p>といった効果も期待できます。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177934792194000900" class="cparts-editsite--img cms-easy-edit" alt="読みやすさを改善できる" src="https://ant2.net/images/magazine/2026/05/image06.jpg" width="330" title="" name="" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin177934805035802500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177934805035806100">WEBフォントを使用するデメリット</h3>
<div class="cms-content-parts-sin177934885543635500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177934885543640400">
<p>デザインやユーザビリティ的にもメリットが大きい一方で、デメリットもあります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177934810065852100 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177934810065854000">
<table cellspacing="10" dir="ltr">
    <tbody class="lay-margin-b--1">
        <tr>
            <th width="20%">ページ表示が<br />
            少し遅くなることがある</th>
            <td>WEBフォントはインターネットからフォントデータを読み込むため、<span style="background-color: transparent; font-family: &#34;Noto Sans JP&#34;, sans-serif; font-size: 1.6rem;">フォントを多く設定しすぎるとページの表示速度が少し遅くなる場合があります。</span><br />
            ただし、最近のWEBフォントは軽量化されているため、通常のWEBサイトで1〜2種類のフォントを使用する程度であれば、ほとんど問題ありません。</td>
        </tr>
        <tr>
            <th width="20%">インターネット環境に<br />
            依存する</th>
            <td>WEBフォントはネット経由で読み込む仕組みのため、通信環境が極端に悪い場合には、フォントが読み込まれるまで少し時間がかかることがあります。 <br />
            その場合、一時的に別のフォントで表示されることがあります。 <br />
            とはいえ、近年はユーザーの通信環境が整っているケースも多く、一般的なWEBサイトでは大きな問題になることはほとんどありません。</td>
        </tr>
        <tr>
            <th width="20%">フォントによっては<br />
            利用条件がある</th>
            <td>Google Fontsのように無料で利用できるフォントも多いですが、Adobe Fontsなど一部のフォントは利用ライセンス（使用条件）があります。 <br />
            そのため、WEBサイトで利用する場合は商用利用が可能かどうかを確認する必要があります。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177934904525654400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177934904525657500">
<p>このように、WEBフォントには読み込み速度や通信環境、利用条件など、いくつか注意しておきたいポイントがあります。<br />
使用するフォントの種類を絞り、WEBサイトの雰囲気に合ったものを選ぶことで、デザイン性と読みやすさを両立することができます。</p>
<p>ポイントを押さえて上手に活用すれば、WEBフォントはWEBサイトの印象をより魅力的に見せる強い味方になります。<br />
WEBサイトの目的やターゲットに合わせて、効果的にWEBフォントを取り入れていきましょう。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177934908421095100 cparts-editsite--mainttl" id="cms-editor-textarea-sin177934908421098800">日本で不動の人気No.1WEBフォント「Noto Sans JP」</h2>
<div class="cms-content-parts-sin177934911226000700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177934911226003700">
<p>「たくさん種類がありすぎて、どれを選べばいいかわからない&#8230;」<br />
そんな方に、まず間違いない選択肢としておすすめしたいのが、日本のWEBサイトで非常によく採用されている「Noto Sans JP（ノト・サンズ・ジェーピー）」と呼ばれるゴシック体のフォントです。</p>
<p>Googleが提供しているこのフォントは日本のWEBサイトで最も利用されているWEBフォントの一つです。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177934913843423000 cparts-editsite--mainttl" id="cms-editor-textarea-sin177934913843426600">Noto Sans JPを使用するメリット</h3>
<div class="cms-content-parts-sin177943866283767700 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177943866283772300">
<h4>圧倒的な読みやすさ</h4>
<p>細い文字から太い文字まで揃っており、スマートフォンの小さな画面でも目が疲れにくい設計です。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177943866283772700">
<h4>誠実でモダンな印象</h4>
<p>余計な飾りがないため、企業サイトに欠かせない「信頼感」や「清潔感」を演出できます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177934926984962000 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177934926984962000 box cparts-id437--01 lay-margin-b--3" style="margin-bottom:15px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177934926984966900">
<p>Noto Sans JPは、読みやすさと端正な印象を両立する日本語対応フォントとして広く支持されており、企業サイト・コーポレートサイト・サービスサイトなど、さまざまなジャンルで採用されています。</p>
<p>さらに、洗練された字形と安定感のある字幅が、ブランドの表現力を高め、訪問者に信頼感と品位を伝えます。</p>
<p><span style="color: rgb(51, 51, 51); font-family: &#34;Noto Sans JP&#34;, sans-serif; font-size: 1.6rem;">高い可読性と統一感のあるデザインが、ブランドメッセージの伝達力を高め、訪問者に好印象を与えます。</span></p>
<p><span style="color: rgb(51, 51, 51); font-family: &#34;Noto Sans JP&#34;, sans-serif; font-size: 1.6rem;">読みやすさを支える適切な字間・行間設計と、長文にも疲れにくい滑らかな視認性が特徴です。あらゆるデバイスで一貫したビジュアル体験を実現できるフォントです。</span></p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177934926984967200" class="cparts-editsite--img cms-easy-edit" alt="Noto Sans JPを使用するメリット" src="https://ant2.net/images/magazine/2026/05/images2026052217293882.png" width="330" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177934988230491700 cparts-editsite--mainttl" id="cms-editor-textarea-sin177934988230495300">ant2 CMSで「Noto Sans JP」を設定するには</h2>
<div class="cms-content-parts-sin177934993046888300 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177934993046893700">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177934993046894200">フォントサービス（Google Fonts）をインストールする</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177934993046894400">
<p>コントロールパネルから[作成] &#8594; [デザイン] &#8594; [フォントを変える]を選択します。</p>
<p>&#8220;フォント設定ダイアログ&#8221;が表示されますので、【インストール】タブを選択し、[追加]ボタンをクリックして、フォントサービス一覧から「Google Fonts」の[追加]ボタンをクリックします。</p>
<p>※「Google Fonts + 日本語早期アクセス」は開発中のフォントが含まれます。通常は、正式版である「Google Fonts」を選択するのがおすすめです。</p>
<p><img src="https://ant2.net/images/magazine/2026/05/image10.png" width="542" height="393" alt="フォントサービス（Google Fonts）をインストールする" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177935001512205400 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177935001512148200">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177935001512152800">使いたい書体「Noto Sans JP」を追加する</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177935001512159900">
<p>フォントサービスがインストールできたら【書体】タブの[追加]ボタンをクリックして、「書体」のプルダウンの中から「Noto Sans JP」を選び[OK]ボタンをクリックします。</p>
<p>「書体」はアルファベット順に表示されています。</p>
<p><img src="https://ant2.net/images/magazine/2026/05/image11.png" width="700" height="604" alt="使いたい書体「Noto Sans JP」を追加する" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177935005060300500 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177935005060248100">03</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177935005060251500">WEBサイト全体の文字を切り替える</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177935005060258600">
<p>最後に【全般設定】タブを開き、対象（タグ）の一覧から、フォントを設定する対象（タグ）の[編集]ボタンをクリックします。</p>
<p>WEBサイト全体で「Noto Sans JP」を使用する場合は対象一覧の中から 「全体（BODY）」 の横にある [編集] ボタンをクリックします。</p>
<p>設定画面で、フォントサービスでは 「Google Fonts」 を、追加済み書体では「Noto Sans JP」 を選んで [OK] を押します。</p>
<p>【全般設定】タブで設定書体に<span style="font-family: &#34;Noto Sans JP&#34;, sans-serif; font-size: 1.6rem;">「Noto Sans JP」が設定されていれば設定完了です。</span></p>
<p><img src="https://ant2.net/images/magazine/2026/05/image12.png" width="700" height="604" alt="サイト全体の文字を切り替える" /></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177935014207818400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935014207822200">日本語フォントを選定したい時は</h2>
<div class="cms-content-parts-sin177935015235744100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177935015235747900">
<p>WEBサイトで使用するフォントを選定したい場合、ant2 CMSのダイアログでは日本語フォントを確認することができません。<br />
ダイアログで設定する前に、Google Fontsのサイトで「Filter」の「Language」から「Japanese」を選択すると日本語（漢字）に対応したWEBフォントが表示されますので、その状態で使用したいフォントを選定してください。</p>
<p>また、WEBサイト全体（BODY）で使用したい場合はフォントによっては小さいサイズで読みづらくなる場合があります。<br />
詳細を見たいフォントをクリックすると文字サイズを変更して確認ができますので、14pxや16pxのサイズで確認することをお勧めします。</p>
<p><a href="https://fonts.google.com/?authuser=1&#38;lang=ja_Jpan" target="_blank">Google Fontsで日本語フォントを確認する</a></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177935037599977400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935037599985500">「なりたい雰囲気」で選ぶ！おすすめフォント4選</h2>
<div class="cms-content-parts-sin177935040093645800 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177935040093647800">
<p>「Noto Sans JP」以外にも、Googleが無料で提供しているフォントはたくさんあります。WEBサイトの目的に合わせて使い分けてみましょう。<br />
いずれも「Google Fonts」でインストールできるフォントになります。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin177935098927464000 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935098927505800">（1）優しく、親しみやすい雰囲気にしたい場合</h4>
<div class="cms-content-parts-sin177967570159123200 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177967570159134500">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th width="15%"></th>
            <th width="30%">フォント名</th>
            <th>特徴</th>
        </tr>
        <tr>
            <th width="10%">日本語</th>
            <td>Zen Maru Gothic<br />
            <span style="font-size: small;">（ゼン丸ゴシック）</span></td>
            <td>文字の角が丸くなっており、幼稚園や介護施設、ハンドメイドショップ、カフェなど「安心感・柔らかさ」を伝えたいWEBサイトに最適です。</td>
        </tr>
        <tr>
            <th width="10%">英語</th>
            <td>Quicksand<br />
            <span style="font-size: small;">（クイックサンド）</span></td>
            <td>文字の端が丸くなっており、Zen Maru Gothicの「柔らかさ」と完璧に調和します。幾何学的でモダンな印象もプラスされるため、子供向け、カフェ、美容系などのWEBサイトにぴったりです。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177967539773843100 box cparts-id403--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177967539773846800" class="cparts-editsite--img cms-easy-edit" src="https://ant2.net/images/magazine/2026/05/image08.jpg" width="1280" name="" height="600" alt="" /></div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177967539773847200" class="cparts-editsite--img cms-easy-edit" src="https://ant2.net/images/magazine/2026/05/images2026052511160626.png" width="1280" name="" height="1783" alt="" /></div>
</div>
</div>
<h4 class="cms-content-parts-sin177935098927515900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935098927516200">（2）伝統的・高級感を演出したい場合</h4>
<div class="cms-content-parts-sin177967569249307000 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177967569249317400">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th width="15%"></th>
            <th width="30%">フォント名</th>
            <th>特徴</th>
        </tr>
        <tr>
            <th width="10%">日本語</th>
            <td>Noto Serif JP<br />
            <span style="font-size: small;">（ノト・セリフ・ジェーピー）</span></td>
            <td>いわゆる「明朝体」です。縦書きが似合うような和風のWEBサイトや、落ち着いたホテルのWEBサイト、士業の方など、カチッとした権威性を出したい時におすすめです。</td>
        </tr>
        <tr>
            <th width="10%">英語</th>
            <td>Libre Baskerville<br />
            <span style="font-size: small;">（リブラ・バスカヴィル）</span></td>
            <td>伝統的なセリフ体で、上品さと信頼感があります。Noto Serif JPの「誠実さ」を損なわず、かつWEB画面でも読みやすいよう設計されているため、非常に相性が良いです。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177967552124103800 box cparts-id403--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177967552124064400" class="cparts-editsite--img cms-easy-edit" alt="Noto Serif JP、Libre Baskerville" src="https://ant2.net/images/magazine/2026/05/image07.jpg" width="330" title="" name="" /></div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177967552124072500" class="cparts-editsite--img cms-easy-edit" alt="伝統的・高級感を演出したい場合" src="https://ant2.net/images/magazine/2026/05/images2026052511160083.png" width="330" title="" name="" /></div>
</div>
</div>
<h4 class="cms-content-parts-sin177935098927516800 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935098927517000">（3）おしゃれなアクセントを加えたい場合</h4>
<div class="cms-content-parts-sin177967568023588900 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177967568023599500">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th width="15%"></th>
            <th width="30%">フォント名</th>
            <th>特徴</th>
        </tr>
        <tr>
            <th width="10%">日本語</th>
            <td>Zen Kaku Gothic New<br />
            <span style="font-size: small;">（ゼン角ゴシック）</span></td>
            <td>現代のデジタルデバイス（スマートフォンやPC）で見られることを前提に設計された、非常にクリーンでスタンダードなゴシック体です。</td>
        </tr>
        <tr>
            <th width="10%">英語</th>
            <td>Montserrat<br />
            <span style="font-size: small;">（モンセラート）</span></td>
            <td>見出しやメニューの一部に使うだけで、一気に海外のカタログのような都会的な雰囲気になります。幾何学的な形がとても美しいフォントです。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177967558305712500 box cparts-id403--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177967558305667600" class="cparts-editsite--img cms-easy-edit" alt="Zen Kaku Gothic New、&#9;Montserrat" src="https://ant2.net/images/magazine/2026/05/image03.jpg" width="330" title="" name="" /></div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177967558305676700" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/05/images2026052511161778.png" width="330" title="" name="" /></div>
</div>
</div>
<h4 class="cms-content-parts-sin177935098927517700 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935098927518100">（4）遊びごころのあるWEBサイトにしたい場合</h4>
<div class="cms-content-parts-sin177967566949265700 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177967566949276300">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th width="15%"></th>
            <th width="30%">フォント名</th>
            <th>特徴</th>
        </tr>
        <tr>
            <th width="10%">日本語</th>
            <td>Stick<span style="font-size: small;">（スティック）</span></td>
            <td>曲線がほとんどなく、カクカクとした直線だけで構成されたユニークな書体です。どこか「レトロゲーム」のようなデジタル感と、「手作り工作」のような素朴さが同居しています。</td>
        </tr>
        <tr>
            <th width="10%">英語</th>
            <td>Stick No Bills<br />
            <font size="2">（スティック・ノー・ビルズ）</font></td>
            <td>文字の線がところどころ途切れているのが特徴で、これが「角ばった印象」と「インダストリアル（工業的）な雰囲気」を際立たせます。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177967561987027400 box cparts-id403--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177967561986978500" class="cparts-editsite--img cms-easy-edit" alt="Stick、Stick No Bills" src="https://ant2.net/images/magazine/2026/05/image09.jpg" width="330" title="" name="" /></div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177967561986986600" class="cparts-editsite--img cms-easy-edit" alt="遊びごころのあるサイトにしたい場合" src="https://ant2.net/images/magazine/2026/05/images2026052511161294.png" width="330" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177935115242235700 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935115242238100">「Google Fonts」以外のWEBフォント</h2>
<div class="cms-content-parts-sin177943748463070600 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177943748463081000">
<p>「Google Fonts」以外にも、よく使われるWEBフォントがあります。<br />
もっとも有名なのは、デザインソフトで有名なAdobeが提供している「Adobe Fonts」です。</p>
<p>「Adobe Fonts」は、高品質な日本語フォントやデザイン性が高いフォント、有名ブランドでも使用されているフォントがあります。</p>
<p>例えば</p>
<ul>
    <li>源ノ明朝</li>
    <li>筑紫フォント</li>
    <li>貂明朝</li>
</ul>
<p>など、プロのデザイン現場でもよく使われています。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177943748463088600" class="cparts-editsite--img cms-easy-edit" alt="Adobe Fonts" src="https://ant2.net/images/magazine/2026/05/images2026052217131532.png" width="330" title="" name="" /></div>
</div>
</div>
<div class="cms-content-parts-sin177943763406153900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177943763406158200">
<p>「Adobe Fonts」をant2 CMSで作成したWEBサイト内で使う場合は、Adobeアカウントを取得してプロジェクトを登録し、<br />
提供される使用したいフォントのコードを、ant2 CMSのGoogle Search Consoleダイアログの「メタタグ」内に貼り付けるだけで使うことができます。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177935228305386700 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935228305390400">まとめ</h2>
<div class="cms-content-parts-sin177935230467915700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177935230467917500">
<p>WEBサイトのデザインというと、写真や色、レイアウトに目が行きがちですが、実はフォントも非常に重要な要素です。<br />
フォントを変えるだけで読みやすさが向上したり、WEBサイトの印象が良くなったり、ブランドイメージが統一されるといった効果があります。<br />
「文字」は、あなたの会社のメッセージを届ける大切な「声」のようなものです。<br />
WEBフォントを活用することで、その声はより鮮明に、より魅力的に届くようになります。</p>
<ul>
    <li>まずは「Noto Sans JP」に変えてみる。</li>
    <li>慣れてきたら、サイトの雰囲気に合わせてフォントを選んでみる。</li>
</ul>
<p>ant2 CMSならGoogle WEBフォントを簡単に設定できる機能があります。<br />
まだ設定されていない方は、ぜひ一度お試しください。</p>
<p>その手軽さと変化の大きさに、きっと驚くはずです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177935235538706200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177935235538706200 cparts-id119 lay-margin-b--3 box" style="margin-bottom:80px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177935235538709700">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177935241660519900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177935241660522600">【イベント出展】『AI NATIVE EXPO2026』に出展いたします！<br />
（2026年6月10日～6月12日）</h3>
<div class="cms-content-parts-sin177935241660528600 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177935241660530400" class="cparts-editsite--img cms-easy-edit" alt="AI NATIVE EXPO2026" src="https://ant2.net/images/magazine/2026/05/AINE26_Logo_color.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177935241660531600">
<ul>
    <li>ブース情報：幕張メッセ　3ホール　小間番号【3N07】</li>
    <li>日時：2026年6月10日（水）～12日（金）　10：00～18：00</li>
    <li><a href="https://f2ff.jp/2026/aine/exhibitor/show.php?id=3678&#38;lang=ja" target="_blank">詳細はこちら</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/05/21999/">
<title>PCとスマホで表示を分けたい！ant2 CMS「パーツ設定」の基本と裏ワザ</title>
<link>https://ant2.net/magazine/2026/05/21999/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
ant2 CMSでWEBサイトを制作する際、「パーツ設定」をどこまで活用できていますか？
「なんとなく設定している」「デフォルトのまま使っている」という方も多いのではないでしょうか。実は、表示設定や余白設定をほんの一歩踏み込んで使いこなすだけで、WEBサイト全体の完成度や購買率・お問い合わせへの誘導率は大きく変わります。
今回は、

 PCとスマホの表示を使い分けることで得られるデザイン・販促効果
 ネガティブマージンを使ったデザイン効果と、具体的な設定方法

について解説します。
制作現場で実際に使っているノウハウをもとに、明日からすぐ試せるポイントをまとめました。ぜひご覧ください。






パーツのPCとスマホの使い分けで得られるデザイン的な効果




PCとスマホでパーツの表示・非表示を切り替えることで、単なる「レスポンシブ対応」にとどまらず、デバイスごとの閲覧環境に合わせたデザイン設計が可能になります。
そこで、PC用とスマホ用で表示するパーツを分けることで、それぞれのデバイスに適した余白・画像サイズ・文字量・配置を調整できます。
結果として、見た目の美しさだけでなく、読みやすさや操作のしやすさも向上し、ユーザーにとってストレスの少ないページづくりにつながる重要なデザイン設定です。





デザイン的な効果




例えば

 PCでは横長の画像を使うことで、情報を横並びに一覧表示でき、視認性と情報量を同時に高める
 スマホでは縦長の画像を使うことで、画面全体に映える迫力ある表示になり、ユーザーの視線を自然に上から下へ誘導できる効果がある

このように設計することで、

 情報の優先順位が明確になる
 余計な要素が減り、読みやすくなる
 直感的に理解できる構成になる

結果として、「整っているWEBサイト」という印象を与えることができます。




&#160;販促（売上・集客）への効果




スマホユーザーは、「流し読み」「短時間閲覧」が基本です。
デバイスごとに「ユーザー心理」が違うため、パーツの表示・非表示を使い分けることで、

 滞在時間の向上
 離脱率の改善
 CV率の向上

といった販促効果が期待できます。
このようなパーツの設定はant2 CMSで設定することができるので、具体的な設定方法をご紹介します。




ant2 CMSでコンテンツパーツをPCとスマホで使い分ける方法




それでは、「PCとスマホそれぞれで違う画像を表示する」具体的な設定方法を解説します。







01


PC用とスマホ用のコンテンツパーツを用意

PC表示、スマホ表示させるパーツをそれぞれ追加します。








02


それぞれコンテンツパーツのパーツ設定から表示設定を変更

PC用
スマホ用








03


サイトを公開する

PCではPC用のコンテンツパーツのみが表示され、スマホではスマホ用のコンテンツパーツのみが表示されます。

PC表示


スマホ表示











たったこれだけの設定で、PCとスマホそれぞれに最適化された表示が実現できます。
 ぜひ一度お試しいただき、デバイスごとに最適化されたWEBサイト作りに役立ててください。




ネガティブマージンで得られるデザイン効果と効果的な設定方法




ネガティブマージンとは、通常、余白設定では「10px」「30px」などプラスの数値を入れますが、実はマイナス値（例：-20px）を入力することが可能 です。
これがいわゆる「ネガティブマージン」です。





デザイン的な効果




ネガティブマージンを使うことで、以下のような効果が得られます。

 セクションの一体感を出せる
 上下の余白を詰めることで、関連性の高いパーツをひとまとまりに見せることができます。
 ダイナミックなレイアウトが作れる
 画像を次のセクションに少し重ねるなど、&#8220;動き&#8221;のあるレイアウトが可能になります。
 情報密度をコントロールできる
 余白を詰めることで、「コンパクトで整理された印象」を作ることができます。

特にスマホ表示では、縦スクロールの長さを抑える効果もあります。




効果的な設定方法（実務的ポイント）




ネガティブマージンは便利ですが、使い方を誤るとレイアウト崩れの原因になります。








小さな値から試す
ネガティブマージンを設定する際は、いきなり「-50px」ではなく、-5px、-10px、-15pxなど、段階的に調整するのがコツです。




PCとスマホで別々に確認する
PCでは良くても、スマホで崩れるケースはよくあります。
必ず両方で確認しましょう。




意図を持って使う
「なんとなく詰める」ではなく、「一体化させたい」「視線を止めたい」など、目的を明確にして使うことが重要です。








これらの設定もant2 CMSで設定が可能です。具体的な例を見ていきましょう。




ant2 CMSでコンテンツパーツにネガティブマージンを設定する方法




ant2 CMSでは、各コンテンツパーツの「マージン設定」から、上下のマージンにマイナス値を入力することができます。
設定したいコンテンツパーツのパーツ設定を開き、余白のマージンの入力欄に-10や-20といった形式で値を入力するだけで、ネガティブマージンを適用できます。




ケース1：画像とテキストの余白を縮めて、情報の関連性を高めたい。




WEBサイトを制作している際に、「あと少し画像とテキストの距離を縮められたら...」というケースはあるのではないでしょうか。
ネガティブマージンを設定することで情報の緻密性を向上させることができます。
















01


ネガティブマージンを設定する

「パーツ設定」＞「余白」＞「マージン(外側)」の距離を詰めたい方向にマイナスの数値を入力し、「保存」＞「OK」の順番でクリック
今回は、下のテキストパーツに上方向のネガティブマージンを設定しました。








02


余白を詰めて、情報のまとまりを高める

画像とテキストの距離が縮まり、情報としての緻密性が高まりました。
このように、ネガティブマージンを活用することで、既存のレイアウトを大きく変えることなく、細かな余白調整が可能になります。
「もう少しだけ詰めたい」という微妙なニュアンスにも対応できるのが、この機能の大きな魅力です。

設定前

設定後






ケース2：画像を重ねて、デザイン的なテイストを追加したい




WEBサイトを制作している際に、「もう少し画像に動きや奥行きを出せたら...」というケースはあるのではないでしょうか。
ネガティブマージンを活用して複数の画像を意図的に重ねることで、デザインにリズムと個性を加えることができます。
















01


テキストパーツに画像を挿入する

①「テキスト」パーツを追加し、上部のエディターから「イメージ挿入/編集」をクリック ＞「サーバーブラウザー」から任意の画像を選択
②幅に指定したい数値を入力
※スマホでも指定した幅で表示されるため、パーツ設定からスマホ表示を「非表示」に設定してください。








02


余白設定で画像の位置を調整する

画像を設定した「テキスト」パーツの「パーツ設定」＞「余白」に、「マージン(外側)」＞「上」に、-120 を入力し、「左」には120を入力します。
ネガティブマージンだけでなく、通常のマージンと掛け合わせることでよりデザインに柔軟性を持たせることができます。








03


画像を重ねて奥行きのあるデザインに

画像が重なることで、パーツのデザインに奥行きが生まれ、ページ全体に印象的なデザインを表現することができます。
スマホ表示ではレイアウトが崩れる場合があるので必ず確認するようにし、崩れる場合はコンテンツパーツをPCとスマホで表示を切り替えてデザインを調整します。

設定前

設定後






まとめ




今回は、ant2 CMSの「パーツのPC・スマホ使い分け」と「ネガティブマージン」という2つの機能をご紹介しました。
どちらも、難しいコーディングの知識がなくても、パーツ設定を少し工夫するだけで実現できるテクニックです。
デバイスごとに最適化された表示設定と、細かな余白調整を組み合わせることで、WEBサイト全体の完成度は大きく変わります。
「なんとなく作っていたWEBサイト」が、ユーザーにとって見やすく、行動しやすいWEBサイトへと変わるきっかけになれば幸いです。
小さな設定の積み重ねが、WEBサイト全体の完成度とユーザー体験の向上につながります。
ぜひ次回のWEBサイト制作の際に試してみてください。








デモ登録はこちら




【イベント出展】『e-messe kanazawa』に出展いたします！
（2026年5月21日・5月22日）






 ブース情報：石川県産業展示館　4号館　小間番号【046】
 日時：2026年5月21日（木）～22日（金）　10：00～17：00
 詳細はこちら





【イベント出展】『AI NATIVE EXPO2026』に出展いたします！
（2026年6月10日～6月12日）






 ブース情報：幕張メッセ　3ホール　小間番号【3N07】
 日時：2026年6月10日（水）～12日（金）　10：00～18：00
 詳細はこちら





</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-05-13T08:20:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin177863531263739800" class="cms-content-parts-sin177863531263748300">
<div id="cms-editor-minieditor-sin177776635985004100" class="cms-content-parts-sin177776635985011900">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>ant2 CMSでWEBサイトを制作する際、「パーツ設定」をどこまで活用できていますか？</p>
<p>「なんとなく設定している」「デフォルトのまま使っている」という方も多いのではないでしょうか。実は、表示設定や余白設定をほんの一歩踏み込んで使いこなすだけで、WEBサイト全体の完成度や購買率・お問い合わせへの誘導率は大きく変わります。</p>
<p>今回は、</p>
<ul>
    <li>PCとスマホの表示を使い分けることで得られるデザイン・販促効果</li>
    <li>ネガティブマージンを使ったデザイン効果と、具体的な設定方法</li>
</ul>
<p>について解説します。</p>
<p>制作現場で実際に使っているノウハウをもとに、明日からすぐ試せるポイントをまとめました。ぜひご覧ください。</p>
</div>
<div class="cms-content-parts-sin177776652671451800 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin177776652671455600" class="cparts-editsite--img cms-easy-edit" alt="PCとスマホで表示を分けたい！ant2 CMS「パーツ設定」の基本と裏ワザ" src="https://ant2.net/images/magazine/2026/05/images20260503173511.png" width="675" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177776701333228600 cparts-editsite--mainttl" id="cms-editor-textarea-sin177776701333232300">パーツのPCとスマホの使い分けで得られるデザイン的な効果</h2>
<div class="cms-content-parts-sin177776737940031300 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177776737940041600">
<p>PCとスマホでパーツの表示・非表示を切り替えることで、単なる「レスポンシブ対応」にとどまらず、デバイスごとの閲覧環境に合わせたデザイン設計が可能になります。</p>
<p><span style="font-family: &#34;Noto Sans JP&#34;, sans-serif; font-size: 1.6rem;">そこで、PC用とスマホ用で表示するパーツを分けることで、それぞれのデバイスに適した余白・画像サイズ・文字量・配置を調整できます。</span></p>
<p><span style="font-family: &#34;Noto Sans JP&#34;, sans-serif; font-size: 1.6rem;">結果として、見た目の美しさだけでなく、読みやすさや操作のしやすさも向上し、ユーザーにとってストレスの少ないページづくりにつながる</span><span style="font-family: &#34;Noto Sans JP&#34;, sans-serif; font-size: 1.6rem;">重要なデザイン設定です。</span></p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177776737940049200" class="cparts-editsite--img cms-easy-edit" alt="PCとスマホでパーツの表示・非表示 イメージ画像" src="https://ant2.net/images/magazine/2026/05/images2026050317464773.png" width="330" title="" name="" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin177776704063491000 cparts-editsite--mainttl" id="cms-editor-textarea-sin177776704063494400">デザイン的な効果</h3>
<div class="cms-content-parts-sin177776705387649600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177776705387628200">
<p>例えば</p>
<ul>
    <li>PCでは横長の画像を使うことで、情報を横並びに一覧表示でき、視認性と情報量を同時に高める</li>
    <li>スマホでは縦長の画像を使うことで、画面全体に映える迫力ある表示になり、ユーザーの視線を自然に上から下へ誘導できる効果がある</li>
</ul>
<p>このように設計することで、</p>
<ul>
    <li>情報の優先順位が明確になる</li>
    <li>余計な要素が減り、読みやすくなる</li>
    <li>直感的に理解できる構成になる</li>
</ul>
<p>結果として、「整っているWEBサイト」という印象を与えることができます。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177776706933996200 cparts-editsite--mainttl" id="cms-editor-textarea-sin177776706934003400">&#160;販促（売上・集客）への効果</h3>
<div class="cms-content-parts-sin177776707197190900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177776707197165000">
<p>スマホユーザーは、「流し読み」「短時間閲覧」が基本です。</p>
<p>デバイスごとに「ユーザー心理」が違うため、パーツの表示・非表示を使い分けることで、</p>
<ul>
    <li>滞在時間の向上</li>
    <li>離脱率の改善</li>
    <li>CV率の向上</li>
</ul>
<p>といった販促効果が期待できます。<br />
このようなパーツの設定はant2 CMSで設定することができるので、具体的な設定方法をご紹介します。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177776711209263400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177776711209267000">ant2 CMSでコンテンツパーツをPCとスマホで使い分ける方法</h2>
<div class="cms-content-parts-sin177776711570820200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177776711570797000">
<p>それでは、「PCとスマホそれぞれで違う画像を表示する」具体的な設定方法を解説します。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177821305226205400 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177821305226211200">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177821305226211600">PC用とスマホ用のコンテンツパーツを用意</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177821305226211900">
<p>PC表示、スマホ表示させるパーツをそれぞれ追加します。</p>
<p><img src="https://ant2.net/images/magazine/2026/05/parts.png" alt="PC用とスマホ用のコンテンツパーツ" width="700" height="602" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177821311283800100 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight ant2oem20260589864org-step" data-original="cms-content-parts-sin177821311283800100 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight" data-custom="ant2oem20260589864org-step">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177821311283748100">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177821311283751300">それぞれコンテンツパーツのパーツ設定から表示設定を変更</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177821311283758500">
<p><span style="font-size: large;"><span style="color: rgb(255, 0, 0);"><strong>PC用</strong></span></span><img src="https://ant2.net/images/magazine/2026/05/pc_settei.png" width="700" height="608" alt="PC用パーツ 設定画面" /></p>
<p><span style="font-size: large;"><span style="color: rgb(255, 0, 0);"><strong>スマホ用</strong></span></span><span style="color: rgb(255, 0, 0);"><strong><span style="font-size: x-large;"><img src="https://ant2.net/images/magazine/2026/05/sp_settei.png" width="700" height="605" alt="スマホ用パーツ 設定画面" /><br type="_moz" />
</span></strong></span></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177821341941583500 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight ant2oem20260589864org-step02" data-original="cms-content-parts-sin177821341941583500 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight" data-custom="ant2oem20260589864org-step02">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177821341941531700">03</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177821341941540500">サイトを公開する</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177821341941547300">
<p>PCではPC用のコンテンツパーツのみが表示され、スマホではスマホ用のコンテンツパーツのみが表示されます。</p>
<div>
<p><span style="font-size: large;"><span style="color: rgb(255, 0, 0);"><strong>PC表示<br />
<img src="https://ant2.net/images/magazine/2026/05/pc_result.png" width="700" height="395" alt="PC表示 設定後イメージ画像" /><br type="_moz" />
</strong></span></span></p>
<p><strong><span style="color: rgb(255, 0, 0);"><span style="font-size: large;">スマホ表示<br />
<img src="https://ant2.net/images/magazine/2026/05/sp_result.png" width="300" height="651" alt="スマホ表示 設定後イメージ画像" /><br type="_moz" />
</span></span></strong></p>
</div>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177776989908895800 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177776989908870800">
<p style="text-align: center;"><font size="4">たったこれだけの設定で、PCとスマホそれぞれに最適化された表示が実現できます。</font><br />
<font size="4"> ぜひ一度お試しいただき、デバイスごとに最適化されたWEBサイト作りに役立ててください。</font></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177777850384986300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177777850384990100">ネガティブマージンで得られるデザイン効果と効果的な設定方法</h2>
<div class="cms-content-parts-sin177777853533483400 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177777853533487000">
<p>ネガティブマージンとは、通常、余白設定では「10px」「30px」などプラスの数値を入れますが、実はマイナス値（例：-20px）を入力することが可能 です。</p>
<p>これがいわゆる「ネガティブマージン」です。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177777853533487300" class="cparts-editsite--img cms-easy-edit" alt="ネガティブマージン イメージ画像" src="https://ant2.net/images/magazine/2026/05/images2026050317463763.png" width="330" title="" name="" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin177777858198249400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177777858198256400">デザイン的な効果</h3>
<div class="cms-content-parts-sin177777859148080200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177777859148085400">
<p>ネガティブマージンを使うことで、以下のような効果が得られます。</p>
<ol>
    <li><strong>セクションの一体感を出せる</strong><br />
    上下の余白を詰めることで、関連性の高いパーツをひとまとまりに見せることができます。</li>
    <li><strong>ダイナミックなレイアウトが作れる</strong><br />
    画像を次のセクションに少し重ねるなど、&#8220;動き&#8221;のあるレイアウトが可能になります。</li>
    <li><strong>情報密度をコントロールできる</strong><br />
    余白を詰めることで、「コンパクトで整理された印象」を作ることができます。</li>
</ol>
<p>特にスマホ表示では、縦スクロールの長さを抑える効果もあります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177777860832475500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177777860832483300">効果的な設定方法（実務的ポイント）</h3>
<div class="cms-content-parts-sin177777861126205200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177777861126171100">
<p>ネガティブマージンは便利ですが、使い方を誤るとレイアウト崩れの原因になります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177821365727647700 box parts_text_type02 cparts-id120--03 lay-margin-b--3 lay-padding--2" col-flex="1-3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177821365727664400">
<h4>小さな値から試す</h4>
<p>ネガティブマージンを設定する際は、いきなり「-50px」ではなく、-5px、-10px、-15pxなど、段階的に調整するのがコツです。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177821365727671600">
<h4>PCとスマホで別々に確認する</h4>
<p>PCでは良くても、スマホで崩れるケースはよくあります。<br />
必ず両方で確認しましょう。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177821365727678300">
<h4>意図を持って使う</h4>
<p>「なんとなく詰める」ではなく、「<span style="font-family: &#34;Noto Sans JP&#34;, sans-serif; font-size: 1.6rem;">一体化させたい」「</span><span style="font-family: &#34;Noto Sans JP&#34;, sans-serif; font-size: 1.6rem;">視線を止めたい</span><span style="font-family: &#34;Noto Sans JP&#34;, sans-serif; font-size: 1.6rem;">」など、</span><font face="Noto Sans JP, sans-serif">目的を明確にして使うことが重要です。</font></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177820907899353700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177820907899369100">
<p><span style="font-size: medium;">これらの設定もant2 CMSで設定が可能です。具体的な例を見ていきましょう。</span></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177779392102088800 cparts-editsite--mainttl" id="cms-editor-textarea-sin177779392102092800">ant2 CMSでコンテンツパーツにネガティブマージンを設定する方法</h2>
<div class="cms-content-parts-sin177779394543043100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177779394543045000">
<p>ant2 CMSでは、各コンテンツパーツの「マージン設定」から、上下のマージンにマイナス値を入力することができます。<br />
設定したいコンテンツパーツのパーツ設定を開き、余白のマージンの入力欄に-10や-20といった形式で値を入力するだけで、ネガティブマージンを適用できます。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177779400827947500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177779400827956100">ケース1：画像とテキストの余白を縮めて、情報の関連性を高めたい。</h3>
<div class="cms-content-parts-sin177779402656536500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177779402656504400">
<p>WEBサイトを制作している際に、「あと少し画像とテキストの距離を縮められたら...」というケースはあるのではないでしょうか。<br />
ネガティブマージンを設定することで情報の緻密性を向上させることができます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177779431398718600 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177779431398722300">
<p><img src="https://ant2.net/images/magazine/2026/05/negativemargin01.png" width="1143" height="603" alt="ネガティブマージン 設定用パーツ" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177821254786610200 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177821254786615000">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177821254786615900">ネガティブマージンを設定する</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177821254786616100">
<p>「パーツ設定」＞「余白」＞「マージン(外側)」の距離を詰めたい方向にマイナスの数値を入力し、「保存」＞「OK」の順番でクリック</p>
<p>今回は、下のテキストパーツに上方向のネガティブマージンを設定しました。</p>
<p><img src="https://ant2.net/images/magazine/2026/05/negativemargin02.png" width="700" height="606" alt="パーツ設定画面" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177821261288862000 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight ant2oem20260589864org-step02" data-original="cms-content-parts-sin177821261288862000 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight" data-custom="ant2oem20260589864org-step02">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177821261288811000">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177821261288819600">余白を詰めて、情報のまとまりを高める</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177821261288826500">
<p>画像とテキストの距離が縮まり、情報としての緻密性が高まりました。</p>
<p>このように、ネガティブマージンを活用することで、既存のレイアウトを大きく変えることなく、細かな余白調整が可能になります。<br />
「もう少しだけ詰めたい」という微妙なニュアンスにも対応できるのが、この機能の大きな魅力です。</p>
<div>
<p><span style="color: rgb(255, 0, 0);"><strong><span style="font-size: large;">設定前</span></strong></span><br />
<img src="https://ant2.net/images/magazine/2026/05/negativemargin01.png" width="1141" height="591" alt="" /></p>
<p><span style="color: rgb(255, 0, 0);"><strong><span style="font-size: large;">設定後</span></strong></span><br />
<img src="https://ant2.net/images/magazine/2026/05/negativemargin03.png" width="700" height="338" alt="ネガティブマージン 設定後イメージ画像" /></p>
</div>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177779412254089300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177779412254097300">ケース2：画像を重ねて、デザイン的なテイストを追加したい</h3>
<div class="cms-content-parts-sin177779413541741100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177779413541711400">
<p>WEBサイトを制作している際に、「もう少し画像に動きや奥行きを出せたら...」というケースはあるのではないでしょうか。<br />
ネガティブマージンを活用して複数の画像を意図的に重ねることで、デザインにリズムと個性を加えることができます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177779448519281600 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177779448519283600">
<p><img src="https://ant2.net/images/magazine/2026/05/negativemargin04.png" width="1022" height="709" alt="ネガティブマージン 設定用パーツ" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177821269473584800 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177821269473589600">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177821269473589900">テキストパーツに画像を挿入する</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177821269473590100">
<p>①「テキスト」パーツを追加し、上部のエディターから「イメージ挿入/編集」をクリック ＞「サーバーブラウザー」から任意の画像を選択<br />
②幅に指定したい数値を入力</p>
<p>※スマホでも指定した幅で表示されるため、パーツ設定からスマホ表示を「非表示」に設定してください。</p>
<p><img src="https://ant2.net/images/magazine/2026/05/negativemargin05.png" width="450" height="836" alt="画像設定 イメージ画像" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177821276840785900 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177821276840733600">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177821276840742700">余白設定で画像の位置を調整する</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177821276840749600">
<p>画像を設定した「テキスト」パーツの「パーツ設定」＞「余白」に、「マージン(外側)」＞「上」に、-120 を入力し、「左」には120を入力します。</p>
<p>ネガティブマージンだけでなく、通常のマージンと掛け合わせることでよりデザインに柔軟性を持たせることができます。</p>
<p><img src="https://ant2.net/images/magazine/2026/05/negativemargin06.png" width="700" height="296" alt="パーツ設定画面" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177821286043590800 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight ant2oem20260589864org-step02" data-original="cms-content-parts-sin177821286043590800 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight" data-custom="ant2oem20260589864org-step02">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177821286043519000">03</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177821286043527800">画像を重ねて奥行きのあるデザインに</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177821286043534600">
<p>画像が重なることで、パーツのデザインに奥行きが生まれ、ページ全体に印象的なデザインを表現することができます。</p>
<p>スマホ表示ではレイアウトが崩れる場合があるので必ず確認するようにし、崩れる場合はコンテンツパーツをPCとスマホで表示を切り替えてデザインを調整します。</p>
<div>
<p><span style="color: rgb(255, 0, 0);"><strong><span style="font-size: large;">設定前</span></strong></span><br />
<img src="https://ant2.net/images/magazine/2026/05/negativemargin04.png" width="1045" height="716" alt="" /></p>
<p><span style="color: rgb(255, 0, 0);"><strong><span style="font-size: large;">設定後</span></strong></span><br />
<img src="https://ant2.net/images/magazine/2026/05/negativemargin07.png" width="700" height="426" alt="ネガティブマージン 設定後イメージ画像" /></p>
</div>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177779483845280000 cparts-editsite--mainttl" id="cms-editor-textarea-sin177779483845283800">まとめ</h2>
<div class="cms-content-parts-sin177779485930170500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177779485930225000">
<p>今回は、ant2 CMSの「パーツのPC・スマホ使い分け」と「ネガティブマージン」という2つの機能をご紹介しました。</p>
<p>どちらも、難しいコーディングの知識がなくても、パーツ設定を少し工夫するだけで実現できるテクニックです。</p>
<p>デバイスごとに最適化された表示設定と、細かな余白調整を組み合わせることで、WEBサイト全体の完成度は大きく変わります。<br />
「なんとなく作っていたWEBサイト」が、ユーザーにとって見やすく、行動しやすいWEBサイトへと変わるきっかけになれば幸いです。</p>
<p>小さな設定の積み重ねが、WEBサイト全体の完成度とユーザー体験の向上につながります。<br />
ぜひ次回のWEBサイト制作の際に試してみてください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177779490518123300 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177779490518123300 cparts-id119 lay-margin-b--3 box" style="margin-bottom:80px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177779490518135200">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177552583702659300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177552583702663000">【イベント出展】『e-messe kanazawa』に出展いたします！<br />
（2026年5月21日・5月22日）</h3>
<div class="cms-content-parts-sin177552591570410300 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177552591570416400" class="cparts-editsite--img cms-easy-edit" alt="e-messe kanazawa 2026 ロゴ" src="https://ant2.net/images/magazine/2026/05/images2026040710435982.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177552591570416900">
<ul>
    <li>ブース情報：石川県産業展示館　4号館　小間番号【046】</li>
    <li>日時：2026年5月21日（木）～22日（金）　10：00～17：00</li>
    <li><a href="https://www.e-messe.jp/exhibitor_detail.php?company_id=99" target="_blank">詳細はこちら</a></li>
</ul>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177552583702659300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177552583702663000">【イベント出展】『AI NATIVE EXPO2026』に出展いたします！<br />
（2026年6月10日～6月12日）</h3>
<div class="cms-content-parts-sin177552591570410300 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177552591570416400" class="cparts-editsite--img cms-easy-edit" alt="AI NATIVE EXPO2026" src="https://ant2.net/images/magazine/2026/05/AINE26_Logo_color.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177552591570416900">
<ul>
    <li>ブース情報：幕張メッセ　3ホール　小間番号【3N07】</li>
    <li>日時：2026年6月10日（水）～12日（金）　10：00～18：00</li>
    <li><a href="https://f2ff.jp/2026/aine/exhibitor/show.php?id=3678&#38;lang=ja" target="_blank">詳細はこちら</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/04/21998/">
<title>AIで記事作成して終わっていませんか？成果につながるWEBページ更新の進め方</title>
<link>https://ant2.net/magazine/2026/04/21998/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は、「AIで記事作成して終わっていませんか？成果につながるWEBページ更新の進め方」というテーマでご紹介いたします。
先日3月25日に配信した記事「【新機能リリース】AI機能で記事作成がもっとスムーズに。ant2 CMS「ゴーゴーAI」の使い方と活用方法をご紹介」でご案内したように、ant2 CMSでは、AIを使って記事のたたき台やタイトル・概要を作るだけでなく、メタタグの設定、アクセス解析、SEO関連の確認まで一連の流れで運用できます。
つまり、「書く」だけで終わらせず、「見つけてもらい、改善し続ける」更新体制を作りやすいCMSです。
そこで今回は、AIを活用した記事作成を出発点に、公開前の設定と公開後の振り返りまで含めて、ant2 CMSで実践したいWEB更新の進め方を分かりやすくご紹介いたします。






AIで記事作成して終わっていませんか？




AIで記事を作ること自体は、いまや珍しいことではありません。
ant2 CMSの「ゴーゴーAI」は、ブログやページのタイトル、本文などをAIが自動で作成・提案し、既存文章のリライトにも活用できます。
記事の下書きを短時間で整えられるため、更新のハードルを下げるうえでとても便利です。
ただし、AIで本文を作って公開しただけでは、成果につながりにくい場面もあります。
なぜなら、WEB更新で本当に大切なのは、公開前の設計と公開後の確認まで含めた運用だからです。








たとえば&#8230;








公開前に必要な準備

 どの検索キーワードで見つけてもらいたいかを考える
 記事内容に合ったタイトルやメタディスクリプションを整える





公開後に必要な確認と改善

 公開後にアクセス状況を確認する
 数字を見ながらタイトルや導入文、導線を見直す









このように、AIは記事作成の効率化に役立ちますが、成果につなげるためには、人の視点で内容を確認し、公開後の改善まで行うことが大切です。
ant2 CMSでは、AI機能を使って本文生成だけでなく、タイトルや概要文の作成にも対応しています。
そのため、フリーページ、トピックス、ブログ、イベントなど、様々な画面で記事作成をスムーズに進めることができます。








また、[設定] &#8594; [SEO対策] には、

 SEOと目標の設定
 アクセス解析の確認
 メタタグの設定
 SEOキーワードの確認

などがまとまっており、記事の公開前から公開後の見直しまで、同じ管理画面の流れで進めやすくなっています。
さらに、更新頻度やアクセス数の目標を設定し、達成状況を確認できる点も特長です。





実践したい運用の流れ
1.まずはAIで記事のたたき台を作る




新しい記事を作るときは、ブログやニュース、ページ作成の画面から内容を入力し、必要に応じてAI機能を使ってタイトルや概要、本文の案を作成します。
ant2 CMSの「ゴーゴーAI」は、キーワードをもとに新規作成するだけでなく、既存の文章をもとに改善案を出すこともできます。
ここで大切なのは、AIに「全部任せる」ことではなく、誰に向けた記事か、どんな行動につなげたいかを明確にしておくことです。
たとえば、次のように役割を分けて考えると分かりやすくなります。








AIに任せやすいこと

 記事のたたき台を作る
 タイトル案や構成案を出す
 既存文章をリライトする





人が確認・調整したいこと

 内容が正確かどうかを確認する
 自社の伝えたい内容に合っているかを見直す
 公開後の反応を踏まえて改善する









このように、AIは原稿作成の時短に使い、最終的な方向づけは人が行う形がおすすめです。
なお、AI生成文は内容が正確でない場合や指定文字数と異なる場合があるため、必ず確認して必要に応じて修正したうえで公開してください。




2.記事本文だけでなく、メタタグまで整える




記事本文を丁寧に作成していても、検索結果上で内容の魅力が十分に伝わらなければ、思うように閲覧につながらないことがあります。
そこで意識したいのが、メタタグの設定です。
ant2 CMSでは、URLごとにメタタイトル、メタディスクリプション、OGP、追加タグなどを設定できます。
AIで記事本文を作成したあとは、記事の要点を短く分かりやすく伝える説明文として、メタディスクリプションまで整えておくことが大切です。




ant2 CMSでの設定・活用方法




[設定] &#8594; [SEO対策] &#8594; [メタタグの設定] から、URLごとのメタ情報を登録できます。








設定の際は、次のような点を意識すると効果的です。

 記事公開前に、タイトルタグとメタディスクリプションを必ず確認する
 本文とまったく同じ表現ではなく、検索結果でクリックしたくなる要約にする
 SNSでの見え方を意識し、OGPも必要に応じて整える
 ページごとに固有の内容にする

これにより、「書いた記事」から「選ばれる記事」へ一歩進めやすくなります。





3.公開後はアクセス解析で反応を見る




記事は公開して終わりではありません。
公開したあとに、実際にどのような反応があったかを確認することで、次の改善につなげやすくなります。
ant2 CMSでは、Google アナリティクスと連携し、WEBサイトのアクセス状況を確認でき、継続的に数字を見て改善できるようになっています。
記事公開後は、

 どのページがどのくらい読まれているか
 追加した記事が実際に見られているか
 更新後にアクセスが増えているか

といったポイントを確認してみましょう。




ant2 CMSでの設定・活用方法




[設定] &#8594; [SEO対策] &#8594; [アクセス解析の確認] から簡易的にアクセス解析を確認できます。
月に一度でもよいので、公開した記事の反応を確認する習慣を作ることが大切です。
運用の流れとして、

 AIで記事案を作成する
 メタタグを整えて公開する
 数週間後にアクセス状況を見る
 反応が弱ければ、タイトル・導入文・導線を見直す
 次回の記事テーマ選びに反映する

この繰り返しによって、更新の精度が少しずつ高まっていきます。





4. 目標設定まで行うと、更新が続けやすくなります




ant2 CMSには、WEBサイト運営にあたって更新頻度やアクセス数の目標を設定し、達成状況を確認する機能があります。
記事を作ること自体が目的になると、更新は続きにくくなりますが、「月に何本更新するか」「どのくらい見てもらうか」といった目標があると、取り組みの意味が明確になります。




ant2 CMSでの設定・活用方法




[設定] &#8594; [SEO対策] &#8594; [SEOと目標の設定] を活用し、まずは無理のない数字を置いてみてください。

 月2本はブログを更新する
 季節商品ページは必ず説明文を見直す
 よく見られるページのメタディスクリプションを改善する

といった小さな目標でも十分です。
AIを使うと更新のスピードは上がりますが、目標設定を組み合わせることで、「なんとなく更新する」状態から抜け出しやすくなります。





まとめ




AIで記事を作ることは、WEB更新のスタートとしてとても有効です。
しかし、本当に大切なのはその先です。

 AIで記事案を作る
 メタタグを整える
 アクセス解析で反応を見る
 結果をもとに改善する

この流れまでできてはじめて、WEB更新は成果につながる動きになります。
ant2 CMSは、記事作成、メタタグ設定、アクセス解析、SEO確認、目標設定までをつなげて運用しやすい環境が整っています。
だからこそ、これからの更新は「AIで作成して終わり」ではなく、AIを起点に改善を回していく運用へ進化させることが重要です。
次回の更新では、ぜひ本文作成だけでなく、メタタグと公開後の確認までセットで取り組んでみてください。








デモ登録はこちら




【イベント出展】『e-messe kanazawa』に出展いたします！（2026年5月21日・5月22日）






 ブース情報：石川県産業展示館　4号館　小間番号【046】
 日時：2026年5月21日（木）～22日（金）　10：00～17：00
 詳細：e-messe.jp/exhibitor_detail.php?company_id=99





</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-04-22T00:25:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin177681863938641600" class="cms-content-parts-sin177681863938651900">
<div id="cms-editor-minieditor-sin177606540994160100" class="cms-content-parts-sin177606540994168100">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>今回は、「AIで記事作成して終わっていませんか？成果につながるWEBページ更新の進め方」というテーマでご紹介いたします。</p>
<p>先日3月25日に配信した記事「【新機能リリース】AI機能で記事作成がもっとスムーズに。ant2 CMS「ゴーゴーAI」の使い方と活用方法をご紹介」でご案内したように、ant2 CMSでは、AIを使って記事のたたき台やタイトル・概要を作るだけでなく、メタタグの設定、アクセス解析、SEO関連の確認まで一連の流れで運用できます。<br />
つまり、「書く」だけで終わらせず、「見つけてもらい、改善し続ける」更新体制を作りやすいCMSです。</p>
<p>そこで今回は、AIを活用した記事作成を出発点に、公開前の設定と公開後の振り返りまで含めて、ant2 CMSで実践したいWEB更新の進め方を分かりやすくご紹介いたします。</p>
</div>
<div class="cms-content-parts-sin177613202718340600 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin177613202718344600" class="cparts-editsite--img cms-easy-edit" alt="AIで記事作成して終わっていませんか？成果につながるWEBページ更新の進め方" src="https://ant2.net/images/magazine/2026/04/images2026041511563096.jpg" width="675" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177613216967815500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177613216967819700">AIで記事作成して終わっていませんか？</h2>
<div class="cms-content-parts-sin177614164410419000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614164410429100">
<p>AIで記事を作ること自体は、いまや珍しいことではありません。</p>
<p>ant2 CMSの「ゴーゴーAI」は、ブログやページのタイトル、本文などをAIが自動で作成・提案し、既存文章のリライトにも活用できます。</p>
<p>記事の下書きを短時間で整えられるため、更新のハードルを下げるうえでとても便利です。</p>
<p>ただし、AIで本文を作って公開しただけでは、成果につながりにくい場面もあります。</p>
<p>なぜなら、WEB更新で本当に大切なのは、公開前の設計と公開後の確認まで含めた運用だからです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177613297177544600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177613297177544600 cparts-id119 lay-margin-b--3 box" style="margin-bottom: 10px !important;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177613297177557200">
<p><font face="Noto Sans JP, sans-serif" size="4"><b>たとえば&#8230;</b></font></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177613302800512900 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177613302800519800">
<p style="text-align: left;"><span style="font-size: large;"><strong>公開前に必要な準備</strong></span></p>
<ul>
    <li>どの検索キーワードで見つけてもらいたいかを考える</li>
    <li>記事内容に合ったタイトルやメタディスクリプションを整える</li>
</ul>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177613302800520200">
<p style="text-align: left;"><span style="font-size: large;"><strong>公開後に必要な確認と改善</strong></span></p>
<ul>
    <li>公開後にアクセス状況を確認する</li>
    <li>数字を見ながらタイトルや導入文、導線を見直す</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177613320912622700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177613320912627500">
<p>このように、AIは記事作成の効率化に役立ちますが、成果につなげるためには、人の視点で内容を確認し、公開後の改善まで行うことが大切です。</p>
<p>ant2 CMSでは、AI機能を使って本文生成だけでなく、タイトルや概要文の作成にも対応しています。<br />
そのため、フリーページ、トピックス、ブログ、イベントなど、様々な画面で記事作成をスムーズに進めることができます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177614059679172800 box cparts-id437--01 lay-margin-b--3 ant2oem20260489863org-txtImg" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177614059679172800 box cparts-id437--01 lay-margin-b--3" data-custom="ant2oem20260489863org-txtImg">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614059679188400">
<p>また、[設定] &#8594; [SEO対策] には、</p>
<ul>
    <li>SEOと目標の設定</li>
    <li>アクセス解析の確認</li>
    <li>メタタグの設定</li>
    <li>SEOキーワードの確認</li>
</ul>
<p>などがまとまっており、記事の公開前から公開後の見直しまで、同じ管理画面の流れで進めやすくなっています。</p>
<p>さらに、更新頻度やアクセス数の目標を設定し、達成状況を確認できる点も特長です。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177614059679196400" class="cparts-editsite--img cms-easy-edit" alt="SEOコンパネ" src="https://ant2.net/images/magazine/2026/04/images2026041510284022.png" width="330" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177613373522360300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177613373522364000">実践したい運用の流れ</h2>
<h3 class="cms-content-parts-sin177613377011230900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177613377011234500">1.まずはAIで記事のたたき台を作る</h3>
<div class="cms-content-parts-sin177613380051157700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177613380051161000">
<p>新しい記事を作るときは、ブログやニュース、ページ作成の画面から内容を入力し、必要に応じてAI機能を使ってタイトルや概要、本文の案を作成します。</p>
<p>ant2 CMSの「ゴーゴーAI」は、キーワードをもとに新規作成するだけでなく、既存の文章をもとに改善案を出すこともできます。<br />
ここで大切なのは、AIに「全部任せる」ことではなく、誰に向けた記事か、どんな行動につなげたいかを明確にしておくことです。</p>
<p>たとえば、次のように役割を分けて考えると分かりやすくなります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177613492720426400 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177613492720431300">
<p><span style="font-size: large;"><strong>AIに任せやすいこと</strong></span></p>
<ul>
    <li>記事のたたき台を作る</li>
    <li>タイトル案や構成案を出す</li>
    <li>既存文章をリライトする</li>
</ul>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177613492720432800">
<p><span style="font-size: large;"><strong>人が確認・調整したいこと</strong></span></p>
<ul>
    <li>内容が正確かどうかを確認する</li>
    <li>自社の伝えたい内容に合っているかを見直す</li>
    <li>公開後の反応を踏まえて改善する</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177614023836480700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614023836443200">
<p>このように、AIは原稿作成の時短に使い、最終的な方向づけは人が行う形がおすすめです。<br />
なお、AI生成文は内容が正確でない場合や指定文字数と異なる場合があるため、必ず確認して必要に応じて修正したうえで公開してください。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177614035862381700 cparts-editsite--mainttl" id="cms-editor-textarea-sin177614035862460200">2.記事本文だけでなく、メタタグまで整える</h3>
<div class="cms-content-parts-sin177614039302599400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614039302571800">
<p>記事本文を丁寧に作成していても、検索結果上で内容の魅力が十分に伝わらなければ、思うように閲覧につながらないことがあります。<br />
そこで意識したいのが、メタタグの設定です。</p>
<p>ant2 CMSでは、URLごとにメタタイトル、メタディスクリプション、OGP、追加タグなどを設定できます。<br />
AIで記事本文を作成したあとは、記事の要点を短く分かりやすく伝える説明文として、メタディスクリプションまで整えておくことが大切です。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin177614044230889900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177614044230926900">ant2 CMSでの設定・活用方法</h4>
<div class="cms-content-parts-sin177614057955762900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614057955768700">
<p>[設定] &#8594; [SEO対策] &#8594; [メタタグの設定] から、URLごとのメタ情報を登録できます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177614055567580300 box cparts-id437--01 lay-margin-b--3 ant2oem20260489863org-txtImg" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177614055567580300 box cparts-id437--01 lay-margin-b--3" data-custom="ant2oem20260489863org-txtImg">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614055567595800">
<p>設定の際は、次のような点を意識すると効果的です。</p>
<ul>
    <li>記事公開前に、タイトルタグとメタディスクリプションを必ず確認する</li>
    <li>本文とまったく同じ表現ではなく、検索結果でクリックしたくなる要約にする</li>
    <li>SNSでの見え方を意識し、OGPも必要に応じて整える</li>
    <li>ページごとに固有の内容にする</li>
</ul>
<p>これにより、「書いた記事」から「選ばれる記事」へ一歩進めやすくなります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177614055567603800" class="cparts-editsite--img cms-easy-edit" alt="メタタグコンパネ" src="https://ant2.net/images/magazine/2026/04/images2026041510284137.png" width="330" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin177614063630921000 cparts-editsite--mainttl" id="cms-editor-textarea-sin177614063630929000">3.公開後はアクセス解析で反応を見る</h3>
<div class="cms-content-parts-sin177614066804041100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614066804054700">
<p>記事は公開して終わりではありません。<br />
公開したあとに、実際にどのような反応があったかを確認することで、次の改善につなげやすくなります。</p>
<p>ant2 CMSでは、Google アナリティクスと連携し、WEBサイトのアクセス状況を確認でき、継続的に数字を見て改善できるようになっています。</p>
<p>記事公開後は、</p>
<ul>
    <li>どのページがどのくらい読まれているか</li>
    <li>追加した記事が実際に見られているか</li>
    <li>更新後にアクセスが増えているか</li>
</ul>
<p>といったポイントを確認してみましょう。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin177614123326702200 cparts-editsite--mainttl" id="cms-editor-textarea-sin177614123326705900">ant2 CMSでの設定・活用方法</h4>
<div class="cms-content-parts-sin177614126659989200 box cparts-id437--01 lay-margin-b--3 ant2oem20260489863org-txtImg" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177614126659989200 box cparts-id437--01 lay-margin-b--3" data-custom="ant2oem20260489863org-txtImg">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614126659992800">
<p>[設定] &#8594; [SEO対策] &#8594; [アクセス解析の確認] から簡易的にアクセス解析を確認できます。</p>
<p>月に一度でもよいので、公開した記事の反応を確認する習慣を作ることが大切です。</p>
<p>運用の流れとして、</p>
<ul>
    <li>AIで記事案を作成する</li>
    <li>メタタグを整えて公開する</li>
    <li>数週間後にアクセス状況を見る</li>
    <li>反応が弱ければ、タイトル・導入文・導線を見直す</li>
    <li>次回の記事テーマ選びに反映する</li>
</ul>
<p>この繰り返しによって、更新の精度が少しずつ高まっていきます。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177614126659993200" class="cparts-editsite--img cms-easy-edit" alt="アクセス解析コンパネ" src="https://ant2.net/images/magazine/2026/04/images2026041510284362.png" width="330" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin177614119592085200 cparts-editsite--mainttl" id="cms-editor-textarea-sin177614119592093500">4. 目標設定まで行うと、更新が続けやすくなります</h3>
<div class="cms-content-parts-sin177614146894495700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614146894500900">
<p>ant2 CMSには、WEBサイト運営にあたって更新頻度やアクセス数の目標を設定し、達成状況を確認する機能があります。</p>
<p>記事を作ること自体が目的になると、更新は続きにくくなりますが、「月に何本更新するか」「どのくらい見てもらうか」といった目標があると、取り組みの意味が明確になります。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin177614149400548300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177614149400553400">ant2 CMSでの設定・活用方法</h4>
<div class="cms-content-parts-sin177614151799653900 box cparts-id437--01 lay-margin-b--3 ant2oem20260489863org-txtImg" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177614151799653900 box cparts-id437--01 lay-margin-b--3" data-custom="ant2oem20260489863org-txtImg">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614151799656500">
<p>[設定] &#8594; [SEO対策] &#8594; [SEOと目標の設定] を活用し、まずは無理のない数字を置いてみてください。</p>
<ul>
    <li>月2本はブログを更新する</li>
    <li>季節商品ページは必ず説明文を見直す</li>
    <li>よく見られるページのメタディスクリプションを改善する</li>
</ul>
<p>といった小さな目標でも十分です。<br />
AIを使うと更新のスピードは上がりますが、目標設定を組み合わせることで、「なんとなく更新する」状態から抜け出しやすくなります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177614151799656800" class="cparts-editsite--img cms-easy-edit" alt="SEO目標コンパネ" src="https://ant2.net/images/magazine/2026/04/images2026041510284179.png" width="330" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177614155418972800 cparts-editsite--mainttl" id="cms-editor-textarea-sin177614155419014100">まとめ</h2>
<div class="cms-content-parts-sin177614157589547600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614157589586000">
<p>AIで記事を作ることは、WEB更新のスタートとしてとても有効です。<br />
しかし、本当に大切なのはその先です。</p>
<ul>
    <li>AIで記事案を作る</li>
    <li>メタタグを整える</li>
    <li>アクセス解析で反応を見る</li>
    <li>結果をもとに改善する</li>
</ul>
<p>この流れまでできてはじめて、WEB更新は成果につながる動きになります。</p>
<p>ant2 CMSは、記事作成、メタタグ設定、アクセス解析、SEO確認、目標設定までをつなげて運用しやすい環境が整っています。<br />
だからこそ、これからの更新は「AIで作成して終わり」ではなく、AIを起点に改善を回していく運用へ進化させることが重要です。</p>
<p>次回の更新では、ぜひ本文作成だけでなく、メタタグと公開後の確認までセットで取り組んでみてください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177614162775756300 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177614162775811000">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177552583702659300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177552583702663000">【イベント出展】『e-messe kanazawa』に出展いたします！（2026年5月21日・5月22日）</h3>
<div class="cms-content-parts-sin177552591570410300 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177552591570416400" class="cparts-editsite--img cms-easy-edit" alt="e-messe kanazawa 2026 ロゴ" src="https://ant2.net/images/magazine/2026/04/images2026040710435982.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177552591570416900">
<ul>
    <li>ブース情報：石川県産業展示館　4号館　小間番号【046】</li>
    <li>日時：2026年5月21日（木）～22日（金）　10：00～17：00</li>
    <li>詳細：<a href="https://www.e-messe.jp/exhibitor_detail.php?company_id=99" target="_blank">e-messe.jp/exhibitor_detail.php?company_id=99</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/04/21995/">
<title>センス不要！AIとプロの法則で作る「失敗しない」WEBサイト配色術</title>
<link>https://ant2.net/magazine/2026/04/21995/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
WEBサイトの印象は「配色」でほぼ決まります。しかし実際には「何色をどう組み合わせればいいのか分からない」と悩む方が非常に多いポイントです。

 「メインカラーは決まったけれど、サブカラーは何色が正解？」
 「アクセントカラーってどこまで派手にしていいの？」
 「そもそも、9色も設定項目があって、どう組み合わせればいいのか見当もつかない&#8230;。」

実は「色」の選択は、プロでも非常に頭を悩ませるポイントでもあります。
ant2 CMSでWEBサイトを制作する場合、「サイトカラー変更」機能の設定項目に複数の色があり、

 メインカラー（ダーク）
 メインカラー（ライト）
 サブカラー
 アクセントカラー

は、どの色をどう決めればよいか迷ってしまう方も多いのではないでしょうか。
そこで今回は、「バランスのよいカラーパレットを簡単に作る方法」をAIの活用方法も含めて分かりやすく解説いたします。






なぜ「配色」でWEBサイトの印象は決まるのか




WEBサイトを訪れた人が、その会社を「信頼できる」と感じるか「なんだか不安だ」と感じるか。
その判断は、わずか数秒のうちに行われると言われています。
配色がバラバラだと、せっかくの良いコンテンツも「素人っぽさ」によって打ち消されてしまいます。
逆に、ルールに基づいた配色が設定されているサイトは、それだけで「清潔感」や「プロフェッショナリズム」を感じさせ、成約率やお問い合わせ率の向上にもつながります。
ant2 CMSの「サイトカラー変更」機能には、以下の9色の設定項目がありますが、「多すぎて選べない！」という方もおられるのではないでしょうか。

 メインカラー（ダーク）：サイトの主役。重厚感を出す濃い色
 メインカラー（ライト）：主役の補助。爽やかさを出す薄い色
 サブカラー：メインを支える色。白い文字の背景になっても読めるような濃い色
 アクセントカラー：メインカラーに対して反対の色など対になるような濃い色
 bodyの背景色：文字の読みやすさを決める土台
 bodyのテキストの色：目が疲れない程度の黒やグレー
 基本のリンクテキストの色：クリックできる場所と認識させる色
 基本の線の色：表組の罫線などの色。目立ちすぎない控えめな色
 エラーメッセージの色：注意を促す色（一般的に赤系）

そんな時にはプロがお勧めする「色の決め方」を参考にしてください。




パターン別の配色の決め方
ロゴや会社の「コーポレートカラー」が決まっている場合




すでに会社のロゴやテーマカラー（例：誠実なネイビー、情熱的な赤など）が決まっている場合は、それを「メインカラー（濃い）」に設定してその色を軸に「同系色」でまとめていくのが最も失敗の少ない方法です。




1.&#160;「メインカラー（ダーク）」を元に「メインカラー（ライト）」と「サブカラー」を決める




メインカラーと同じ色味の色を薄くして少しグレーを混ぜたものを「メインカラー（ライト）」に、逆に明度を落として濃くしたものを「サブカラー」に設定して濃淡で色を決めるとサイト全体に統一感が生まれます。
また、メインカラーが鮮やかな青や緑、赤などの色の場合、カチッとした印象のコーポレートサイトを作成したい場合は「メインカラー（ライト）」には色味を足さずに薄いグレーに、「サブカラー」を黒に近い濃いグレーにすると引き締まった印象になります。










2. 「アクセントカラー」は反対の色を選ぶ




すべて同系色だとボヤけてしまうので、「アクセントカラー」だけは、「メインカラー（ダーク）」の反対色（補色）を選ぶのがポイントです。
青がメインなら、黄色やオレンジが映えるため「アクセントカラー」として用いられることが多いです。
ただし、どうしても派手になってしまいますので暖色系は使用したくない場合は同じ程度の明るさの同系色（「メインカラー（ダーク）」が青なら緑）を選ぶと良いでしょう。










3. 残りの色を決める





 
 
 bodyの背景色
 bodyの背景色は基本は白、もしくは薄いグレーやベージュなどがテキストが読みやすくメインカラーなども映えるのでお勧めです。
 逆に濃い黒などにしたい場合はメインカラーも明るめの色にするなど調整をしてください。
 
 
 bodyのテキストの色
 テキストカラーは黒（#000000）よりも少しグレーがかった色の方がモニターを通した場合に目に負担をかけず読みやすいとされています。
 WEBデザインでよく使用されるのは#333333ですがもう少しハッキリした色が良い場合は#222222、逆に背景がベージュなどで文字にも温かみを出したい場合などは少しオレンジ系を混ぜた色#2F2820などを使用してみても良いでしょう。
 
 
 基本のリンクテキストの色
 リンクテキストの色は背景色と同化せず、なおかつテキストの色とは異なる色を設定する方が見る人にもわかりやすくて良いでしょう。
 お勧めは配色の統一感を出すために「サブカラー」と同じ色にするなど既に配色が決まっている色と同じ色にすることです。
 サブカラーが少し淡くてテキストにすると読みにくい場合は少し明度と彩度を落として暗めにすると文字が読みやすくなります（同じ色でも、背景のような大きな面積で見る時と、細いテキストで見る時では、テキストの方が薄く感じられる性質（面積効果）があるため、テキストで使用すると読みづらい場合は少し濃い目の色にするのがポイントです）。
 
 
 基本の線の色
 迷ったら#CCCCCCなどの淡いグレー、少しモダンな印象にしたい場合はメインカラーをわかるかわからないかくらいの少しだけ混ぜたカラーにするのがお勧めです。
 濃すぎると表内のテキストよりも罫線が目立ちすぎてしまいますので、目立たず薄すぎない色になるように調整してください。
 
 
 エラーメッセージの色
 基本的にはエラーメッセージは赤系がベストです。
 真っ赤ではなく、少し明度を落として#BF0202くらいの暗めの赤にすると目に優しく読みやすい色味になります。
 後は背景色に合わせて読みやすい色味になるように調整してください。
 
 









上記の流れで9色の基本設定の色を決めた場合の配色パレットになります。





「コーポレートカラー」が決まっていない場合やカラーを一新したい場合




「そもそも何色が自社に合うのかわからない」という方は、最初からAIに「色のコンセプト」を丸投げしてしまうのが近道です。
AIを活用することで、配色の失敗を減らす、作業時間を短縮する、デザインの統一感を出すことができるといったメリットがあります。




1. AIに配色を決めてもらうプロンプトを投げる




AIに配色を決めてもらうには作成するWEBサイトについてまずは下記を洗い出します。

 どのような業種のWEBサイトか
 メインターゲット層はどのような人か
 どのような印象を与えたいか

上記が決まれば下記のようなプロンプトをAIに投げます。
［　］の部分は作成したい内容に合わせて変更してください。








【プロンプト例】








私たちは、［20代～30代の若い夫婦・家族］をターゲットにした、［優しくて安心感のある家づくりを提案する工務店］です。
［シンプルでモダンで爽やかさと安心感］のあるWEBサイトを作成したいと思います。
そのWEBサイトのカラー設定に必要な以下の9色の配色パレットを、カラーコード（#ffffff形式）で作成してください。
・メインカラー（ダーク）
・メインカラー（ライト）
・サブカラー
・アクセントカラー
・bodyの背景色
・bodyのテキストの色
・基本のリンクテキストの色
・基本の線の色
・エラーメッセージの色
なお、メインカラー(ダーク)、サブカラー、アクセントカラーはこの色を背景にしても白いテキストが読めるような色合いに、メインカラー(ライト)は背景色にしてもbodyのテキストの色が読めるような薄い色合いにしてください。					








AIで生成されたカラーコード









 
 
 項目
 カラーコード
 色の役割・解説
 
 
 メインカラー（ダーク）
 #546E7A
 ブルーグレー。誠実さと安心感、モダンな洗練さを表現。見出しや目立たせたい背景に。
 
 
 メインカラー（ライト）
 #E1E8ED
 ライトスカイグレー。メインカラーの淡いトーン。セクションの背景などで可読性を保ちつつ変化を。
 
 
 サブカラー
 #A3B18A
 セージグリーン。優しさと自然、安らぎを演出。サブボタンや装飾的な背景に。
 
 
 アクセントカラー
 #8D6E63
 ウォームブラウン。安心感と土、木の温もりを表現。コンバージョン（お問い合わせ）ボタンに最適。
 
 
 bodyの背景色
 #F9F9F7
 オフホワイト。真っ白よりも目に優しく、紙や塗り壁のようなナチュラルな質感を与えます。
 
 
 bodyのテキストの色
 #333333
 チャコールブラック。コントラストを抑えつつ、読みやすさを確保した深いグレー。
 
 
 基本のリンク色
 #455A64
 スレートブルー。メインカラーに近い色味で統一感を出し、リンクであることを示します。
 
 
 基本の線の色
 #D1D1D1
 ライトグレー。セクションの区切りや枠線など、主張しすぎず空間を整理します。
 
 
 エラーメッセージの色
 #C62828
 ソフトレッド。警告を伝えつつも、サイトの雰囲気を壊さない少し落ち着いた赤色。
 
 





2. 色をカラーパレット作成ツールを利用して確認する




AIに提案された色を確かめたい時は「Coolors」というツールを使用すると便利です。
Coolorsのサイトにアクセスして「Start the Generator」というボタンをクリックします。
5色のカラーパレットが表示されますので、画面の右端にマウスを移動させ、「+」ボタンを4回押して9色にし、各カラーのカラーコードをAIから提案したカラーコードに変更します。
Coolors公式サイトはこちら









特定の箇所だけ色を変更したい場合はカラーコードを選択することで色を変更することができます。
また、変更したくない色はカラーコードの上のカギアイコンをクリックしてロックをかけた状態で「spaceキー」を押すと、ロックをしていない箇所がお勧めのカラーに自動で変更されます。
※「spaceキー」での色変更は色数が多い場合は有料プランに変更する必要がありますので、カラーの上の&#215;アイコンをクリックして5色に減らしてから行ってください。









作成したカラーをWEBサイトに適用した例





違うカラーパレットをWEBサイトに適用した例









淡い色をメインカラーとして使用したい場合
メインカラーが淡い色（パステルカラーやペールトーン）の場合、WEBサイト全体の印象は「優しく」「柔らかく」「洗練された」ものになります。
しかし、サイトカラー設定の基本設定にある9色の役割を正しく理解して使い分けないと、全体がぼやけてメリハリのない、読みづらいサイトになってしまう危険性があります。
その場合はサブカラーを同系色、同一トーンの明度が濃い色にし、アクセントカラーに同じトーン、明度の補色をもってくるか、高級感を出すなら「落ち着いたゴールド」をアクセントに1色入れるのがお勧めです。


















配色に役立つ無料ツールのご紹介




Coolors以外にも、直感的に色を選べる便利なツールがあります。

 Adobe Color：世界中のクリエイターが作成した配色パターンが見放題です。
 Color Hunt：人気のパレットが一目でわかり、クリックするだけでカラーコードがコピーできます。
 ColorMagic：AIを活用したカラーパレットツールです。

これらのツールで「いいな」と思った配色を見つけたら、そのコード（#から始まる6桁の英数字）をカラー設定の各設定項目に貼り付けるだけで、WEBサイトは見違えるほどオシャレになるでしょう。








Adobe Color





Color Hunt





ColorMagic





まとめ




美しいWEBサイトを構築するためには、単に好きな色を並べるのではなく、戦略的なアプローチが不可欠です。
もし、すでに会社のロゴなどでメインカラーが決まっているのなら、無理に新しい色を増やす必要はなく、そのメインカラーの「濃淡」を使い分けることで、洗練されたデザインにすることができます。
同じ色味の中で明るさを変えた色をサブカラーに据えることで、WEBサイト全体に深い統一感が生まれ、プロが作り込んだような安定感を演出できます。
また、それでも「どの色が相性がいいのか確信が持てない」と立ち止まってしまったら、AIを専属の「カラーコーディネーター」として活用してみましょう。
具体的なブランドイメージを添えたプロンプトを一つ送るだけで、ant2 CMSの設定に必要な9色すべてのカラーコードを提案してくれます。
最後に忘れてはならないのが、ant2 CMSにある9色の設定項目それぞれの「役割」を明確に意識することです。
背景色や文字色は「情報の読みやすさ（可読性）」を最優先し、アクセントカラーは「クリックを促す目立ちやすさ」に特化させる、このメリハリこそが、ユーザーを迷わせない「使いやすいサイト」を作るための最大の秘訣となります。
WEBサイトの配色に迷った場合はぜひ一度、今回の方法を活用した配色パレット作成を試してください。
配色に迷う時間が減り、WEBサイト制作のスピードも大きく向上すると思います。








デモ登録はこちら




【イベント出展】『e-messe kanazawa』に出展いたします！（2026年5月21日・5月22日）






 ブース情報：石川県産業展示館　4号館　小間番号【046】
 日時：2026年5月21日（木）～22日（金）　10：00～17：00
 詳細：e-messe.jp/exhibitor_detail.php?company_id=99





</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-04-08T00:00:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin177561346617552000" class="cms-content-parts-sin177561346617560400">
<div id="cms-editor-minieditor-sin177494541137075600" class="cms-content-parts-sin177494541137083800">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>WEBサイトの印象は「配色」でほぼ決まります。しかし実際には「何色をどう組み合わせればいいのか分からない」と悩む方が非常に多いポイントです。</p>
<ul>
    <li>「メインカラーは決まったけれど、サブカラーは何色が正解？」</li>
    <li>「アクセントカラーってどこまで派手にしていいの？」</li>
    <li>「そもそも、9色も設定項目があって、どう組み合わせればいいのか見当もつかない&#8230;。」</li>
</ul>
<p>実は「色」の選択は、プロでも非常に頭を悩ませるポイントでもあります。<br />
ant2 CMSでWEBサイトを制作する場合、「サイトカラー変更」機能の設定項目に複数の色があり、</p>
<ul>
    <li>メインカラー（ダーク）</li>
    <li>メインカラー（ライト）</li>
    <li>サブカラー</li>
    <li>アクセントカラー</li>
</ul>
<p>は、どの色をどう決めればよいか迷ってしまう方も多いのではないでしょうか。</p>
<p>そこで今回は、「バランスのよいカラーパレットを簡単に作る方法」をAIの活用方法も含めて分かりやすく解説いたします。</p>
</div>
<div class="cms-content-parts-sin177494578015176100 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin177494578015183900" class="cparts-editsite--img cms-easy-edit" alt="センス不要！AIとプロの法則で作る「失敗しない」WEBサイト配色術" src="https://ant2.net/images/magazine/2026/04/images2026040313191137.png" width="675" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177494582127295900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177494582127301500">なぜ「配色」でWEBサイトの印象は決まるのか</h2>
<div class="cms-content-parts-sin177494584474795000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177494584474798700">
<p>WEBサイトを訪れた人が、その会社を「信頼できる」と感じるか「なんだか不安だ」と感じるか。<br />
その判断は、わずか数秒のうちに行われると言われています。<br />
配色がバラバラだと、せっかくの良いコンテンツも「素人っぽさ」によって打ち消されてしまいます。<br />
逆に、ルールに基づいた配色が設定されているサイトは、それだけで「清潔感」や「プロフェッショナリズム」を感じさせ、成約率やお問い合わせ率の向上にもつながります。</p>
<p>ant2 CMSの「サイトカラー変更」機能には、以下の9色の設定項目がありますが、「多すぎて選べない！」という方もおられるのではないでしょうか。</p>
<ul>
    <li>メインカラー（ダーク）：サイトの主役。重厚感を出す濃い色</li>
    <li>メインカラー（ライト）：主役の補助。爽やかさを出す薄い色</li>
    <li>サブカラー：メインを支える色。白い文字の背景になっても読めるような濃い色</li>
    <li>アクセントカラー：メインカラーに対して反対の色など対になるような濃い色</li>
    <li>bodyの背景色：文字の読みやすさを決める土台</li>
    <li>bodyのテキストの色：目が疲れない程度の黒やグレー</li>
    <li>基本のリンクテキストの色：クリックできる場所と認識させる色</li>
    <li>基本の線の色：表組の罫線などの色。目立ちすぎない控えめな色</li>
    <li>エラーメッセージの色：注意を促す色（一般的に赤系）</li>
</ul>
<p>そんな時にはプロがお勧めする「色の決め方」を参考にしてください。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177494629904620300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177494629904629500">パターン別の配色の決め方</h2>
<h3 class="cms-content-parts-sin177494639369026300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177494639369034800">ロゴや会社の「コーポレートカラー」が決まっている場合</h3>
<div class="cms-content-parts-sin177494641145874600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177494641145825100">
<p>すでに会社のロゴやテーマカラー（例：誠実なネイビー、情熱的な赤など）が決まっている場合は、それを「メインカラー（濃い）」に設定してその色を軸に「同系色」でまとめていくのが最も失敗の少ない方法です。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin177494643843139300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177494643843142600">1.&#160;「メインカラー（ダーク）」を元に「メインカラー（ライト）」と「サブカラー」を決める</h4>
<div class="cms-content-parts-sin177494688024420900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177494688024424500">
<p>メインカラーと同じ色味の色を薄くして少しグレーを混ぜたものを「メインカラー（ライト）」に、逆に明度を落として濃くしたものを「サブカラー」に設定して濃淡で色を決めるとサイト全体に統一感が生まれます。<br />
また、メインカラーが鮮やかな青や緑、赤などの色の場合、カチッとした印象のコーポレートサイトを作成したい場合は「メインカラー（ライト）」には色味を足さずに薄いグレーに、「サブカラー」を黒に近い濃いグレーにすると引き締まった印象になります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177552722820215500 box cparts-id403--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177552722820229000" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/04/image02.png" width="330" /></div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177552722820236800" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/04/image03.png" width="330" /></div>
</div>
</div>
<h4 class="cms-content-parts-sin177494689997187400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177494689997195600">2. 「アクセントカラー」は反対の色を選ぶ</h4>
<div class="cms-content-parts-sin177494690838605900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177494690838568800">
<p>すべて同系色だとボヤけてしまうので、「アクセントカラー」だけは、「メインカラー（ダーク）」の反対色（補色）を選ぶのがポイントです。<br />
青がメインなら、黄色やオレンジが映えるため「アクセントカラー」として用いられることが多いです。<br />
ただし、どうしても派手になってしまいますので暖色系は使用したくない場合は同じ程度の明るさの同系色（「メインカラー（ダーク）」が青なら緑）を選ぶと良いでしょう。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177552766511117200 box cparts-id403--02 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177552766511127800" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/04/image07.png" width="330" /></div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177552766511135400" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/04/image06.png" width="330" /></div>
</div>
</div>
<h4 class="cms-content-parts-sin177494709568761000 cparts-editsite--mainttl" id="cms-editor-textarea-sin177494709568770000">3. 残りの色を決める</h4>
<div class="cms-content-parts-sin177494713080037400 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177494713080040900">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th>bodyの背景色</th>
            <td>bodyの背景色は基本は白、もしくは薄いグレーやベージュなどがテキストが読みやすくメインカラーなども映えるのでお勧めです。<br />
            逆に濃い黒などにしたい場合はメインカラーも明るめの色にするなど調整をしてください。</td>
        </tr>
        <tr>
            <th>bodyのテキストの色</th>
            <td>テキストカラーは黒（#000000）よりも少しグレーがかった色の方がモニターを通した場合に目に負担をかけず読みやすいとされています。<br />
            WEBデザインでよく使用されるのは#333333ですがもう少しハッキリした色が良い場合は#222222、逆に背景がベージュなどで文字にも温かみを出したい場合などは少しオレンジ系を混ぜた色#2F2820などを使用してみても良いでしょう。</td>
        </tr>
        <tr>
            <th>基本のリンクテキストの色</th>
            <td>リンクテキストの色は背景色と同化せず、なおかつテキストの色とは異なる色を設定する方が見る人にもわかりやすくて良いでしょう。<br />
            お勧めは配色の統一感を出すために「サブカラー」と同じ色にするなど既に配色が決まっている色と同じ色にすることです。<br />
            サブカラーが少し淡くてテキストにすると読みにくい場合は少し明度と彩度を落として暗めにすると文字が読みやすくなります（同じ色でも、背景のような大きな面積で見る時と、細いテキストで見る時では、テキストの方が薄く感じられる性質（面積効果）があるため、テキストで使用すると読みづらい場合は少し濃い目の色にするのがポイントです）。</td>
        </tr>
        <tr>
            <th>基本の線の色</th>
            <td>迷ったら#CCCCCCなどの淡いグレー、少しモダンな印象にしたい場合はメインカラーをわかるかわからないかくらいの少しだけ混ぜたカラーにするのがお勧めです。<br />
            濃すぎると表内のテキストよりも罫線が目立ちすぎてしまいますので、目立たず薄すぎない色になるように調整してください。</td>
        </tr>
        <tr>
            <th>エラーメッセージの色</th>
            <td>基本的にはエラーメッセージは赤系がベストです。<br />
            真っ赤ではなく、少し明度を落として#BF0202くらいの暗めの赤にすると目に優しく読みやすい色味になります。<br />
            後は背景色に合わせて読みやすい色味になるように調整してください。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177494892279974600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177494892279986200">
<p style="text-align: left;"><span style="font-size: large;"><strong>上記の流れで9色の基本設定の色を決めた場合の配色パレットになります。</strong></span></p>
<p style="text-align: left;"><span style="font-size: large;"><strong><img src="https://ant2.net/images/magazine/2026/04/image12.png" alt="上記の流れで9色の基本設定の色を決めた場合の配色パレット" width="640" height="448" /></strong></span></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177494914272528300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177494914272539900">「コーポレートカラー」が決まっていない場合やカラーを一新したい場合</h3>
<div class="cms-content-parts-sin177494900134810300 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177494900134814800">
<p>「そもそも何色が自社に合うのかわからない」という方は、最初からAIに「色のコンセプト」を丸投げしてしまうのが近道です。<br />
AIを活用することで、配色の失敗を減らす、作業時間を短縮する、デザインの統一感を出すことができるといったメリットがあります。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin177494917586874100 cparts-editsite--mainttl" id="cms-editor-textarea-sin177494917586877700">1. AIに配色を決めてもらうプロンプトを投げる</h4>
<div class="cms-content-parts-sin177494919467977700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177494919467948400">
<p>AIに配色を決めてもらうには作成するWEBサイトについてまずは下記を洗い出します。</p>
<ul>
    <li>どのような業種のWEBサイトか</li>
    <li>メインターゲット層はどのような人か</li>
    <li>どのような印象を与えたいか</li>
</ul>
<p>上記が決まれば下記のようなプロンプトをAIに投げます。</p>
<p>［　］の部分は作成したい内容に合わせて変更してください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177494928969908300 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177494928969908300 cparts-id119 lay-margin-b--3 box" style="margin-bottom:10px !important;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177494928969880200">
<p><strong>【プロンプト例】</strong></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177494923465965700 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177494923466025700">
<p>私たちは、［20代～30代の若い夫婦・家族］をターゲットにした、［優しくて安心感のある家づくりを提案する工務店］です。<br />
［シンプルでモダンで爽やかさと安心感］のあるWEBサイトを作成したいと思います。<br />
そのWEBサイトのカラー設定に必要な以下の9色の配色パレットを、カラーコード（#ffffff形式）で作成してください。</p>
<p>・メインカラー（ダーク）<br />
・メインカラー（ライト）<br />
・サブカラー<br />
・アクセントカラー<br />
・bodyの背景色<br />
・bodyのテキストの色<br />
・基本のリンクテキストの色<br />
・基本の線の色<br />
・エラーメッセージの色</p>
<p>なお、メインカラー(ダーク)、サブカラー、アクセントカラーはこの色を背景にしても白いテキストが読めるような色合いに、メインカラー(ライト)は背景色にしてもbodyのテキストの色が読めるような薄い色合いにしてください。<span style="white-space:pre">					</span></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177500758173881000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177500758173881000 cparts-id119 lay-margin-b--3 box" style="margin-bottom:10px !important;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177500758173887300">
<p><span style="font-size: large;"><strong>AIで生成されたカラーコード</strong></span></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177500711912567200 cparts-id93--01 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177500711912570800">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th style="text-align: center;">項目</th>
            <th>カラーコード</th>
            <th style="text-align: center;">色の役割・解説</th>
        </tr>
        <tr>
            <td>メインカラー（ダーク）</td>
            <td style="text-align: center;">#546E7A</td>
            <td>ブルーグレー。誠実さと安心感、モダンな洗練さを表現。見出しや目立たせたい背景に。</td>
        </tr>
        <tr>
            <td>メインカラー（ライト）</td>
            <td style="text-align: center;">#E1E8ED</td>
            <td>ライトスカイグレー。メインカラーの淡いトーン。セクションの背景などで可読性を保ちつつ変化を。</td>
        </tr>
        <tr>
            <td>サブカラー</td>
            <td style="text-align: center;">#A3B18A</td>
            <td>セージグリーン。優しさと自然、安らぎを演出。サブボタンや装飾的な背景に。</td>
        </tr>
        <tr>
            <td>アクセントカラー</td>
            <td style="text-align: center;">#8D6E63</td>
            <td>ウォームブラウン。安心感と土、木の温もりを表現。コンバージョン（お問い合わせ）ボタンに最適。</td>
        </tr>
        <tr>
            <td>bodyの背景色</td>
            <td style="text-align: center;">#F9F9F7</td>
            <td>オフホワイト。真っ白よりも目に優しく、紙や塗り壁のようなナチュラルな質感を与えます。</td>
        </tr>
        <tr>
            <td>bodyのテキストの色</td>
            <td style="text-align: center;">#333333</td>
            <td>チャコールブラック。コントラストを抑えつつ、読みやすさを確保した深いグレー。</td>
        </tr>
        <tr>
            <td>基本のリンク色</td>
            <td style="text-align: center;">#455A64</td>
            <td>スレートブルー。メインカラーに近い色味で統一感を出し、リンクであることを示します。</td>
        </tr>
        <tr>
            <td>基本の線の色</td>
            <td style="text-align: center;">#D1D1D1</td>
            <td>ライトグレー。セクションの区切りや枠線など、主張しすぎず空間を整理します。</td>
        </tr>
        <tr>
            <td>エラーメッセージの色</td>
            <td style="text-align: center;">#C62828</td>
            <td>ソフトレッド。警告を伝えつつも、サイトの雰囲気を壊さない少し落ち着いた赤色。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin177500785906479700 cparts-editsite--mainttl" id="cms-editor-textarea-sin177500785906484100">2. 色をカラーパレット作成ツールを利用して確認する</h4>
<div class="cms-content-parts-sin177518771074336500 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177518771074345600">
<p>AIに提案された色を確かめたい時は「Coolors」というツールを使用すると便利です。<br />
Coolorsのサイトにアクセスして「Start the Generator」というボタンをクリックします。<br />
5色のカラーパレットが表示されますので、画面の右端にマウスを移動させ、「+」ボタンを4回押して9色にし、各カラーのカラーコードをAIから提案したカラーコードに変更します。</p>
<p><a href="https://coolors.co/" target="_blank">Coolors公式サイトはこちら</a></p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177518771074351200" class="cparts-editsite--img cms-easy-edit" alt="生成されたカラーパレット" src="https://ant2.net/images/magazine/2026/04/image14.png" width="330" title="" name="" /></div>
</div>
</div>
<div class="cms-content-parts-sin177552835955330300 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177552835955341600">
<p>特定の箇所だけ色を変更したい場合はカラーコードを選択することで色を変更することができます。<br />
また、変更したくない色はカラーコードの上のカギアイコンをクリックしてロックをかけた状態で「spaceキー」を押すと、ロックをしていない箇所がお勧めのカラーに自動で変更されます。</p>
<p>※「spaceキー」での色変更は色数が多い場合は有料プランに変更する必要がありますので、カラーの上の&#215;アイコンをクリックして5色に減らしてから行ってください。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177552835955349300" class="cparts-editsite--img cms-easy-edit" alt="アクセントカラーだけを変更した場合のカラーパレット" src="https://ant2.net/images/magazine/2026/04/image09.png" width="330" title="" name="" /></div>
</div>
</div>
<div class="cms-content-parts-sin177500823344353900 cparts-id119--02 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177500823344361000">
<p style="text-align: left;"><span style="font-size: large;"><strong>作成したカラーをWEBサイトに適用した例</strong></span></p>
<p style="text-align: center;"><strong><img src="https://ant2.net/images/magazine/2026/04/image10.png" width="806" height="1280" alt="作成したカラーをWEBサイトに適用した例" /></strong></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177500823344361500">
<p style="text-align: left;"><span style="font-size: large;"><strong>違うカラーパレットをWEBサイトに適用した例</strong></span></p>
<p style="text-align: center;"><strong><img src="https://ant2.net/images/magazine/2026/04/image11.png" width="806" height="1280" alt="違うカラーパレットをWEBサイトに適用した例" /></strong></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177500848342732900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177500848342699000">
<h5><font size="4"><b><span style="font-size: x-large;">淡い色をメインカラーとして使用したい場合</span></b></font></h5>
<p>メインカラーが淡い色（パステルカラーやペールトーン）の場合、WEBサイト全体の印象は「優しく」「柔らかく」「洗練された」ものになります。<br />
しかし、サイトカラー設定の基本設定にある9色の役割を正しく理解して使い分けないと、全体がぼやけてメリハリのない、読みづらいサイトになってしまう危険性があります。<br />
その場合はサブカラーを同系色、同一トーンの明度が濃い色にし、アクセントカラーに同じトーン、明度の補色をもってくるか、高級感を出すなら「落ち着いたゴールド」をアクセントに1色入れるのがお勧めです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177500861775322300 cparts-id119--02 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177500861775269500">
<p style="text-align: left;"><strong><img src="https://ant2.net/images/magazine/2026/04/image13.png" width="1280" height="896" alt="淡い色が「メインカラー（ダーク）」の場合の配色例" /></strong></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177500861775280200">
<p style="text-align: left;"><strong><img src="https://ant2.net/images/magazine/2026/04/image15.png" width="1280" height="896" alt="淡い色が「メインカラー（ダーク）」の場合の配色例" /></strong></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177500876210258400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177500876210296300">配色に役立つ無料ツールのご紹介</h2>
<div class="cms-content-parts-sin177500878519534100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177500878519539400">
<p>Coolors以外にも、直感的に色を選べる便利なツールがあります。</p>
<ul>
    <li>Adobe Color：世界中のクリエイターが作成した配色パターンが見放題です。</li>
    <li>Color Hunt：人気のパレットが一目でわかり、クリックするだけでカラーコードがコピーできます。</li>
    <li>ColorMagic：AIを活用したカラーパレットツールです。</li>
</ul>
<p>これらのツールで「いいな」と思った配色を見つけたら、そのコード（#から始まる6桁の英数字）をカラー設定の各設定項目に貼り付けるだけで、WEBサイトは見違えるほどオシャレになるでしょう。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177503092263020000 cparts-id119--03 box lay-margin-b--3" col-flex="1-3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177503092263061100">
<p style="text-align: center;"><span style="font-size: large;"><strong>Adobe Color</strong></span></p>
<p style="text-align: left;"><strong><img src="https://ant2.net/images/magazine/2026/04/image01.png" width="1280" height="838" alt="Adobe Color" /></strong></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177503092263066900">
<p style="text-align: center;"><span style="font-size: large;"><strong>Color Hunt</strong></span></p>
<p style="text-align: left;"><strong><img src="https://ant2.net/images/magazine/2026/04/image04.png" width="1280" height="838" alt="Color Hunt" /></strong></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177503092263077700">
<p style="text-align: center;"><span style="font-size: large;"><strong>ColorMagic</strong></span></p>
<p><img src="https://ant2.net/images/magazine/2026/04/image05.png" width="1280" height="838" alt="ColorMagic" /></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177500892351137700 cparts-editsite--mainttl" id="cms-editor-textarea-sin177500892351147700">まとめ</h2>
<div class="cms-content-parts-sin177500895086855500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177500895086859300">
<p>美しいWEBサイトを構築するためには、単に好きな色を並べるのではなく、戦略的なアプローチが不可欠です。<br />
もし、すでに会社のロゴなどでメインカラーが決まっているのなら、無理に新しい色を増やす必要はなく、そのメインカラーの「濃淡」を使い分けることで、洗練されたデザインにすることができます。<br />
同じ色味の中で明るさを変えた色をサブカラーに据えることで、WEBサイト全体に深い統一感が生まれ、プロが作り込んだような安定感を演出できます。</p>
<p>また、それでも「どの色が相性がいいのか確信が持てない」と立ち止まってしまったら、AIを専属の「カラーコーディネーター」として活用してみましょう。<br />
具体的なブランドイメージを添えたプロンプトを一つ送るだけで、ant2 CMSの設定に必要な9色すべてのカラーコードを提案してくれます。</p>
<p>最後に忘れてはならないのが、ant2 CMSにある9色の設定項目それぞれの「役割」を明確に意識することです。</p>
<p>背景色や文字色は「情報の読みやすさ（可読性）」を最優先し、アクセントカラーは「クリックを促す目立ちやすさ」に特化させる、このメリハリこそが、ユーザーを迷わせない「使いやすいサイト」を作るための最大の秘訣となります。</p>
<p>WEBサイトの配色に迷った場合はぜひ一度、今回の方法を活用した配色パレット作成を試してください。</p>
<p>配色に迷う時間が減り、WEBサイト制作のスピードも大きく向上すると思います。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177500902683652300 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177500902683655500">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177552583702659300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177552583702663000">【イベント出展】『e-messe kanazawa』に出展いたします！（2026年5月21日・5月22日）</h3>
<div class="cms-content-parts-sin177552591570410300 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177552591570416400" class="cparts-editsite--img cms-easy-edit" alt="e-messe kanazawa 2026 ロゴ" src="https://ant2.net/images/magazine/2026/04/images2026040710435982.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177552591570416900">
<ul>
    <li>ブース情報：石川県産業展示館　4号館　小間番号【046】</li>
    <li>日時：2026年5月21日（木）～22日（金）　10：00～17：00</li>
    <li>詳細：<a href="https://www.e-messe.jp/exhibitor_detail.php?company_id=99" target="_blank">e-messe.jp/exhibitor_detail.php?company_id=99</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/03/21994/">
<title>【新機能リリース】AI機能で記事作成がもっとスムーズに。ant2 CMS「ゴーゴーAI」の使い方と活用方法をご紹介</title>
<link>https://ant2.net/magazine/2026/03/21994/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は、ant2 CMSのAI機能「ゴーゴーAI」を使って簡単にテキスト原稿作成や修正ができるようになったことと、
その使い方、さらに実際の運用でどのように活用できるのかをご紹介いたします。

 何を書けばよいかわからない
 原稿がなかなかまとまらない
 メタタグの設定が後回しになってしまう

といったお悩みを、ゴーゴーAIがサポートいたします。






AI機能【ゴーゴーAI】をリリースしました！




このたび、ant2 CMSでAIを使ったテキスト作成機能「ゴーゴーAI」をご利用いただけるようになりました。









「何を書けばよいかわからない」「記事のたたき台を短時間で作りたい」「今ある文章をもう少し丁寧に整えたい」といった場面で、AIが文章案を自動で作成・提案してくれます。
キーワードから新規作成するだけでなく、既存の文章をもとにリライトしたり、トーンや文字数を調整しながら再生成できます。
特に便利なのは、最初から完璧な原稿を用意しなくてもよい点です。
AIが作った下書きをもとに、伝えたい内容や自社らしさを少し加えるだけで、記事作成の負担を大きく減らせます。
タイトルや概要文の作成にも使えるため、本文だけでなく、公開時に必要な周辺テキストまでまとめて整えやすくなります。
「原稿待ちで進まない」を減らし、制作や更新を前に進めやすくしてくれるのが、ゴーゴーAIの大きな魅力です。




ゴーゴーAIはこんな風に使えます
文章を最短30秒で自動生成





ゴーゴーAIが自動で原稿を生成します。
ページ作成・ブログ・ニュース・イベントの記事タイトルや概要の生成、ページ内テキストのAI生成や改善、メタタグのタイトルタグやメタディスクリプションの作成、さらに既存文の外国語翻訳や、やさしい表現への言い換えにも活用できます。
さらに、トーンは「プロフェッショナル」「カジュアル」「丁寧」から選択可能で、文字数の指定にも対応しています。
急いで原稿のベースを作りたいときにも、使いやすい機能です。




ブログのタイトルも生成可能





本文だけでなく、ブログやお知らせのテーマ、タイトル案の作成にも活用できます。
「どんな切り口にしようか迷う」「タイトルがなかなか決まらない」といったときにAIと相談しながら候補を作れるため、記事作成の入り口がぐっと楽になります。
さらに、眠っていた記事のリライトにも役立ち、過去記事の再活用にも向いています。




専門知識が必要なメタタグの作成も





SEO対策に必要なメタタグ作成も、ゴーゴーAIに任せることができます。
ページ内容をもとに、ディスクリプション案も生成でき、
後回しになりがちなSEO設定も進めやすくなります。
本文を書いて終わりではなく、検索結果での見え方まで整えられるのは大きなメリットです。




翻訳もゴーゴーAIに依頼を





翻訳もゴーゴーAIで対応できます。
翻訳依頼のコストと時間を大幅に削減し、
多言語展開をその場で実現できます。
海外向けページや多言語案内の準備を進めたいときにも、手軽に取り入れやすい機能です。









 記事タイトルを考える
 記事概要を整える
 本文の下書きを作る
 既存文章を読みやすく書き直す
 SEOを意識した説明文を作る
 外国語の翻訳を作る
 トーン（丁寧・やわらかいなど）を選べる

これらの作業を、ひとつのCMS内で進めることができます。
ゴーゴーAIで作った文章を、ページやブログの編集、その後の公開までつなげて運用できるのがant2 CMSの大きな魅力です。




ゴーゴーAIの使い方！
基本操作




これまでの編集画面と大きくは変わっていませんが、機能が使える部分には、ゴーゴーAIのアイコンが表示されるようになっています。












01


ダイアログやダイレクト編集の際に表示される[ゴーゴーAIアイコン]をクリックします。









02


表示される「ゴーゴAIで生成」ダイアログにリクエストを入力し、「トーン」や「文字数」を設定して[作成]ボタンをクリックします。

既存文章がある場合は、リクエスト欄は未入力でも「ゴーゴーAIおまかせ生成」が自動で改善案を作成します。
※2回目以降のおまかせ生成は、「トーン」もしくは「文字数」は指定が必要です。








03


修正したい場合は、リクエストやトーンを変更して再度[作成]ボタンをクリックします。

※何度でも再生成が可能です。








04


AIが生成した文章を確認し、問題なければ[上記で決定する]ボタンをクリックします。









05


決定した文章が編集内容に反映されますので、必要に応じて修正し保存してください。






記事を生成する




ant2 CMSの各画面で、ゴーゴーAIアイコンまたはゴーゴーAIアイコンが表示されている項目から利用できます。
ページ作成・ページ設定・トピックス記事追加／編集・ブログ記事追加／編集・イベント記事追加／編集・メタタグ・サイト設定などが対象です。
記事を作る場合は、次のような流れで進めます。







01


記事作成画面を開く

コントロールパネルから、ページ作成・ニュース作成・ブログ作成など、目的に応じた画面を開きます。
[作成]メニューからページを作る、ニュースを書く、ブログを書く、イベント記事を書くといった作成導線が用意されています。








02


ゴーゴーAIアイコンをクリックする

タイトルや概要の入力欄の横にあるゴーゴーAIアイコンをクリックすると、「ゴーゴAIで生成」ダイアログが開きます。
ページ作成画面でも、ブログやニュースの追加画面でも、この流れでAIを呼び出せます。








03


リクエストを入力する

作成したい内容を入力し、必要に応じてトーンや文字数を指定します。
具体的なキーワードやターゲット情報を入れるほど、生成結果の精度が高まります。








04


生成結果を確認して反映する

AIが作成した文章を確認し、問題なければ「上記で決定する」を押すと、
先ほど作成した記事のタイトルに反映されます。





おすすめ活用方法





 
 
 まずは「タイトル」と「概要」から使う
 AI機能は、いきなり本文をすべて任せるより、まずタイトルや概要文の作成から使い始めると導入しやすいです。
 新規ページ作成、ニュース記事追加、ブログエントリー追加の各画面で、タイトルや概要にAIを使えます。
 いつもタイトル決めに時間がかかる場合や、説明文がうまくまとまらない場合に特におすすめです。
 
 
 本文は「たたき台」として活用する
 ゴーゴーAIは、ページ内のテキスト編集時にも利用でき、見出しや文章の作成・改善に役立ちます。
 ダイレクト編集でテキストを編集しながらAIを呼び出せるため、まずAIで骨組みを作り、
 その後に自社のサービス内容や事例、具体的な案内を追記する使い方が実用的です。
 
 
 ブログ・お知らせ更新の頻度を上げる
 ブログやトピックス、ページの追加が更新として扱われ、SEO目標の管理にもつながります。
 更新頻度の目標を設定できる機能もあるため、AIを使って記事作成のハードルを下げることで、更新頻度の向上にもつなげやすくなります。
 
 
 SEO設定とあわせて活用する
 AIで作成したタイトルや概要は、SEOを意識した文章づくりにも活用できます。
 ant2 CMSには、SEOと目標の設定、ターゲットキーワードの確認、メタタグの設定といった機能があります。
 記事本文だけでなく、検索結果で見られる説明文まで整えることで、サイト全体の情報発信力を高められます。
 
 
 公開予約まで含めて運用する
 記事を作ったあと、公開タイミングまで管理できるのもant2 CMSの便利な点です。
 ブログやニュースの記事日付には未来日時を指定でき、さらにサイト公開予約を設定しておくことで、指定日時にあわせた公開運用ができます。
 キャンペーン告知やイベント告知など、公開日が決まっている記事にも向いています。
 
 
 複数人運用でも安心して使う
 AIで下書きを作っても、最終調整は社内で確認したいというケースは多いかと思います。
 ant2 CMSでは変更履歴の確認ができ、複数アカウントで管理している場合は全員の履歴も確認できます。 AIを活用しながら、社内確認をはさむ運用にも向いています。
 
 





ant2 CMSだからできる、記事公開後の広がり





ant2 CMSは、記事を作るだけでなく、その後の展開までCMS内で進めやすい構成になっています。
そのため、AIで作成した記事を起点に、

 商品紹介ページへつなげる
 会員向け情報として展開する
 メルマガ管理と組み合わせて配信する

といった流れを、複数のツールを行き来せず、
ひとつの環境の中で作成から配信までスムーズに進められます。




まとめ




ant2 CMSのAI機能「ゴーゴーAI」は、記事作成の手間を減らし、日々の更新を進めやすくしてくれる新しいサポート機能です。
タイトルや概要の作成から、本文の下書き、リライト、SEOを意識した説明文づくりまで、さまざまな場面で活用できます。
今後は、文章生成だけでなく、画像生成機能なども含めてAI機能の展開をさらに広げていく予定です。
AIをうまく活用しながら、ant2 CMSでより効率的で続けやすい情報発信を進めていきましょう。








デモ登録はこちら




</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-03-25T00:00:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin177440426368126000" class="cms-content-parts-sin177440426368134500">
<div id="cms-editor-minieditor-sin177425803977290900" class="cms-content-parts-sin177425803977298900">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>今回は、ant2 CMSのAI機能「ゴーゴーAI」を使って簡単にテキスト原稿作成や修正ができるようになったことと、<br />
その使い方、さらに実際の運用でどのように活用できるのかをご紹介いたします。</p>
<ul>
    <li>何を書けばよいかわからない</li>
    <li>原稿がなかなかまとまらない</li>
    <li>メタタグの設定が後回しになってしまう</li>
</ul>
<p>といったお悩みを、ゴーゴーAIがサポートいたします。</p>
</div>
<div class="cms-content-parts-sin177433095707894600 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin177433095707898300" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/03/images2026032510134970.jpg" width="675" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177425826559394600 cparts-editsite--mainttl" id="cms-editor-textarea-sin177425826559398300">AI機能【ゴーゴーAI】をリリースしました！</h2>
<div class="cms-content-parts-sin177425829422444200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177425829422448400">
<p>このたび、ant2 CMSでAIを使ったテキスト作成機能「ゴーゴーAI」をご利用いただけるようになりました。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177425836280883200 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177425836280890300" class="cparts-editsite--img cms-easy-edit" alt="ゴーゴーAI バナー" src="https://ant2.net/images/magazine/2026/03/oem-banner-gogoai.jpg" width="330" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177425836280890800">
<p>「何を書けばよいかわからない」「記事のたたき台を短時間で作りたい」「今ある文章をもう少し丁寧に整えたい」といった場面で、AIが文章案を自動で作成・提案してくれます。</p>
<p>キーワードから新規作成するだけでなく、既存の文章をもとにリライトしたり、トーンや文字数を調整しながら再生成できます。</p>
<p>特に便利なのは、最初から完璧な原稿を用意しなくてもよい点です。</p>
<p>AIが作った下書きをもとに、伝えたい内容や自社らしさを少し加えるだけで、記事作成の負担を大きく減らせます。</p>
<p>タイトルや概要文の作成にも使えるため、本文だけでなく、公開時に必要な周辺テキストまでまとめて整えやすくなります。</p>
<p>「原稿待ちで進まない」を減らし、制作や更新を前に進めやすくしてくれるのが、ゴーゴーAIの大きな魅力です。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177425849710160900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177425849710168800">ゴーゴーAIはこんな風に使えます</h2>
<h3 class="cms-content-parts-sin177425868563323300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177425868563331300">文章を最短30秒で自動生成</h3>
<div class="cms-content-parts-sin177425865859373700 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177425865859317100" class="cparts-editsite--img cms-easy-edit" alt="ゴーゴーAI 文章生成" src="https://ant2.net/images/magazine/2026/03/gogo-ai01.jpg" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177425865859325300">
<p>ゴーゴーAIが自動で原稿を生成します。</p>
<p>ページ作成・ブログ・ニュース・イベントの記事タイトルや概要の生成、ページ内テキストのAI生成や改善、メタタグのタイトルタグやメタディスクリプションの作成、さらに既存文の外国語翻訳や、やさしい表現への言い換えにも活用できます。</p>
<p>さらに、トーンは「プロフェッショナル」「カジュアル」「丁寧」から選択可能で、文字数の指定にも対応しています。</p>
<p>急いで原稿のベースを作りたいときにも、使いやすい機能です。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177425864545983600 cparts-editsite--mainttl" id="cms-editor-textarea-sin177425864545988800">ブログのタイトルも生成可能</h3>
<div class="cms-content-parts-sin177425869277754900 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177425869277715100" class="cparts-editsite--img cms-easy-edit" alt="ゴーゴーAI ブログタイトル生成" src="https://ant2.net/images/magazine/2026/03/gogo-ai02.jpg" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177425869277722500">
<p>本文だけでなく、ブログやお知らせのテーマ、タイトル案の作成にも活用できます。</p>
<p>「どんな切り口にしようか迷う」「タイトルがなかなか決まらない」といったときにAIと相談しながら候補を作れるため、記事作成の入り口がぐっと楽になります。</p>
<p>さらに、眠っていた記事のリライトにも役立ち、過去記事の再活用にも向いています。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177425872036931400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177425872036939400">専門知識が必要なメタタグの作成も</h3>
<div class="cms-content-parts-sin177425872349203100 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177425872349160600" class="cparts-editsite--img cms-easy-edit" alt="ゴーゴーAI メタタグ作成" src="https://ant2.net/images/magazine/2026/03/gogo-ai03.jpg" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177425872349167800">
<p>SEO対策に必要なメタタグ作成も、ゴーゴーAIに任せることができます。</p>
<p>ページ内容をもとに、ディスクリプション案も生成でき、<br />
後回しになりがちなSEO設定も進めやすくなります。</p>
<p>本文を書いて終わりではなく、検索結果での見え方まで整えられるのは大きなメリットです。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177425874566445600 cparts-editsite--mainttl" id="cms-editor-textarea-sin177425874566452500">翻訳もゴーゴーAIに依頼を</h3>
<div class="cms-content-parts-sin177425874800121000 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177425874800081100" class="cparts-editsite--img cms-easy-edit" alt="ゴーゴーAI 文章翻訳" src="https://ant2.net/images/magazine/2026/03/gogo-ai04.jpg" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177425874800089200">
<p>翻訳もゴーゴーAIで対応できます。</p>
<p>翻訳依頼のコストと時間を大幅に削減し、<br />
多言語展開をその場で実現できます。</p>
<p>海外向けページや多言語案内の準備を進めたいときにも、手軽に取り入れやすい機能です。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177425889439329000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177425889439332600">
<ul>
    <li>記事タイトルを考える</li>
    <li>記事概要を整える</li>
    <li>本文の下書きを作る</li>
    <li>既存文章を読みやすく書き直す</li>
    <li>SEOを意識した説明文を作る</li>
    <li>外国語の翻訳を作る</li>
    <li>トーン（丁寧・やわらかいなど）を選べる</li>
</ul>
<p>これらの作業を、ひとつのCMS内で進めることができます。</p>
<p>ゴーゴーAIで作った文章を、ページやブログの編集、その後の公開までつなげて運用できるのがant2 CMSの大きな魅力です。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177425901528296500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177425901528335700">ゴーゴーAIの使い方！</h2>
<h3 class="cms-content-parts-sin177425915165533600 cparts-editsite--mainttl" id="cms-editor-textarea-sin177425915165537200">基本操作</h3>
<div class="cms-content-parts-sin177431289826094300 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431289826114500">
<p>これまでの編集画面と大きくは変わっていませんが、機能が使える部分には、ゴーゴーAIのアイコンが表示されるようになっています。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177431305154309600 box cparts-id403--01 lay-margin-b--3 AIマーク" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177431305154309600 box cparts-id403--01 lay-margin-b--3" data-custom="AIマーク" style="margin-bottom:80px;">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin177431305154320100" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/03/images2026032418002042.jpg" width="675" title="" name="" /></div>
</div>
</div>
<div class="cms-content-parts-sin177425965767028200 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177425965767031800">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177425965767032100">ダイアログやダイレクト編集の際に表示される[ゴーゴーAIアイコン]をクリックします。</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177425965767032400">
<p><img src="https://ant2.net/images/magazine/2026/03/images2026032410360181.png" width="1212" height="665" alt="ゴーゴーAIアイコン" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177431344055174600 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177431344055127900">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177431344055136000">表示される「ゴーゴAIで生成」ダイアログにリクエストを入力し、「トーン」や「文字数」を設定して[作成]ボタンをクリックします。</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431344055142800">
<p>既存文章がある場合は、リクエスト欄は未入力でも「ゴーゴーAIおまかせ生成」が自動で改善案を作成します。<br />
※2回目以降のおまかせ生成は、「トーン」もしくは「文字数」は指定が必要です。</p>
<p><img src="https://ant2.net/images/magazine/2026/03/images2026032409395940.png" width="1280" height="670" alt="ゴーゴーAI 生成箇所" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177431355392242100 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177431355392182800">03</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177431355392190800">修正したい場合は、リクエストやトーンを変更して再度[作成]ボタンをクリックします。</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431355392197600">
<p>※何度でも再生成が可能です。</p>
<p><img src="https://ant2.net/images/magazine/2026/03/images2026032409400144.png" alt="ゴーゴーAI 再生成" width="1280" height="947" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177431362155598300 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177431362155553400">04</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177431362155561400">AIが生成した文章を確認し、問題なければ[上記で決定する]ボタンをクリックします。</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431362155568100">
<p><img src="https://ant2.net/images/magazine/2026/03/images2026032409400424.png" alt="ゴーゴーAI 内容反映" width="1280" height="940" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177431370409243300 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177431370409181600">05</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177431370409191900">決定した文章が編集内容に反映されますので、必要に応じて修正し保存してください。</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431370409203900">
<p><img src="https://ant2.net/images/magazine/2026/03/images2026032409394910.png" alt="ゴーゴーAI テキスト編集" width="1202" height="750" /></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177431378347665700 cparts-editsite--mainttl" id="cms-editor-textarea-sin177431378347672800">記事を生成する</h3>
<div class="cms-content-parts-sin177431379315538500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431379315545300">
<p>ant2 CMSの各画面で、ゴーゴーAIアイコンまたはゴーゴーAIアイコンが表示されている項目から利用できます。<br />
ページ作成・ページ設定・トピックス記事追加／編集・ブログ記事追加／編集・イベント記事追加／編集・メタタグ・サイト設定などが対象です。</p>
<p>記事を作る場合は、次のような流れで進めます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177431390706992900 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177431390706998700">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177431390706999100">記事作成画面を開く</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431390706999400">
<p>コントロールパネルから、ページ作成・ニュース作成・ブログ作成など、目的に応じた画面を開きます。<br />
[作成]メニューからページを作る、ニュースを書く、ブログを書く、イベント記事を書くといった作成導線が用意されています。</p>
<p><img src="https://ant2.net/images/magazine/2026/03/images2026032410003566.png" width="240" height="588" alt="ゴーゴーAIアイコン" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177431406961877600 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177431406961824200">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177431406961831600">ゴーゴーAIアイコンをクリックする</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431406961838700">
<p>タイトルや概要の入力欄の横にあるゴーゴーAIアイコンをクリックすると、「ゴーゴAIで生成」ダイアログが開きます。<br />
ページ作成画面でも、ブログやニュースの追加画面でも、この流れでAIを呼び出せます。</p>
<p><img src="https://ant2.net/images/magazine/2026/03/images2026032410031448.png" width="1280" height="482" alt="ゴーゴーAI 記事タイトル・概要" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177431424014844500 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177431424014792100">03</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177431424014804300">リクエストを入力する</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431424014811500">
<p>作成したい内容を入力し、必要に応じてトーンや文字数を指定します。<br />
具体的なキーワードやターゲット情報を入れるほど、生成結果の精度が高まります。</p>
<p><img src="https://ant2.net/images/magazine/2026/03/images2026032409395384.png" alt="ゴーゴーAI 記事タイトル生成" width="1280" height="546" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177431436078169200 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177431436078114400">04</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177431436078122600">生成結果を確認して反映する</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431436078129400">
<p>AIが作成した文章を確認し、問題なければ「上記で決定する」を押すと、<br />
先ほど作成した記事のタイトルに反映されます。</p>
<p><img src="https://ant2.net/images/magazine/2026/03/images2026032410080924.png" alt="ゴーゴーAI 記事タイトル決定・反映" width="1280" height="390" /></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177431461947228400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177431461947234000">おすすめ活用方法</h2>
<div class="cms-content-parts-sin177431466249217000 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177431466249220700">
<table dir="ltr">
    <tbody class="lay-margin-b--1">
        <tr>
            <th>まずは「タイトル」と「概要」から使う</th>
            <td>AI機能は、いきなり本文をすべて任せるより、まずタイトルや概要文の作成から使い始めると導入しやすいです。<br />
            新規ページ作成、ニュース記事追加、ブログエントリー追加の各画面で、タイトルや概要にAIを使えます。<br />
            いつもタイトル決めに時間がかかる場合や、説明文がうまくまとまらない場合に特におすすめです。</td>
        </tr>
        <tr>
            <th>本文は「たたき台」として活用する</th>
            <td>ゴーゴーAIは、ページ内のテキスト編集時にも利用でき、見出しや文章の作成・改善に役立ちます。<br />
            ダイレクト編集でテキストを編集しながらAIを呼び出せるため、まずAIで骨組みを作り、<br />
            その後に自社のサービス内容や事例、具体的な案内を追記する使い方が実用的です。</td>
        </tr>
        <tr>
            <th>ブログ・お知らせ更新の頻度を上げる</th>
            <td>ブログやトピックス、ページの追加が更新として扱われ、SEO目標の管理にもつながります。<br />
            更新頻度の目標を設定できる機能もあるため、AIを使って記事作成のハードルを下げることで、更新頻度の向上にもつなげやすくなります。</td>
        </tr>
        <tr>
            <th>SEO設定とあわせて活用する</th>
            <td>AIで作成したタイトルや概要は、SEOを意識した文章づくりにも活用できます。<br />
            ant2 CMSには、SEOと目標の設定、ターゲットキーワードの確認、メタタグの設定といった機能があります。<br />
            記事本文だけでなく、検索結果で見られる説明文まで整えることで、サイト全体の情報発信力を高められます。</td>
        </tr>
        <tr>
            <th>公開予約まで含めて運用する</th>
            <td>記事を作ったあと、公開タイミングまで管理できるのもant2 CMSの便利な点です。<br />
            ブログやニュースの記事日付には未来日時を指定でき、さらにサイト公開予約を設定しておくことで、指定日時にあわせた公開運用ができます。<br />
            キャンペーン告知やイベント告知など、公開日が決まっている記事にも向いています。</td>
        </tr>
        <tr>
            <th>複数人運用でも安心して使う</th>
            <td>AIで下書きを作っても、最終調整は社内で確認したいというケースは多いかと思います。<br />
            ant2 CMSでは変更履歴の確認ができ、複数アカウントで管理している場合は全員の履歴も確認できます。 AIを活用しながら、社内確認をはさむ運用にも向いています。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177431526775544400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177431526775549100">ant2 CMSだからできる、記事公開後の広がり</h3>
<div class="cms-content-parts-sin177431529892459600 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177431529892463300" class="cparts-editsite--img cms-easy-edit" alt="ゴーゴーAI ロゴ" src="https://ant2.net/images/magazine/2026/03/images2026032414474483.jpg" width="330" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431529892463600">
<p>ant2 CMSは、記事を作るだけでなく、その後の展開までCMS内で進めやすい構成になっています。</p>
<p>そのため、AIで作成した記事を起点に、</p>
<ul>
    <li>商品紹介ページへつなげる</li>
    <li>会員向け情報として展開する</li>
    <li>メルマガ管理と組み合わせて配信する</li>
</ul>
<p>といった流れを、複数のツールを行き来せず、<br />
ひとつの環境の中で作成から配信までスムーズに進められます。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177431540307598000 cparts-editsite--mainttl" id="cms-editor-textarea-sin177431540307600400">まとめ</h2>
<div class="cms-content-parts-sin177431542757888100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431542757939300">
<p>ant2 CMSのAI機能「ゴーゴーAI」は、記事作成の手間を減らし、日々の更新を進めやすくしてくれる新しいサポート機能です。<br />
タイトルや概要の作成から、本文の下書き、リライト、SEOを意識した説明文づくりまで、さまざまな場面で活用できます。</p>
<p>今後は、文章生成だけでなく、画像生成機能なども含めてAI機能の展開をさらに広げていく予定です。</p>
<p>AIをうまく活用しながら、ant2 CMSでより効率的で続けやすい情報発信を進めていきましょう。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177431546619226900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177431546619230000">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/03/21993/">
<title>困ったときの生成AI活用術！WEBサイト用の画像を効率よく作成する方法</title>
<link>https://ant2.net/magazine/2026/03/21993/</link>
<description>




こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
テキスト原稿はなんとかなったけれど、
「キービジュアルに置く写真が決まらない」
「フリー素材だと探すのが大変」
「制作や写真撮影を依頼すると費用がかかってしまう」
このように、WEBサイト内で使用する写真や画像の選定に困ったことはないでしょうか。
実は、制作時間の中で「画像選定」が最も時間を使う工程になることも少なくありません。
そこで今、制作現場で活用が進んでいるのが生成AIによる画像自動生成です。
今回は有名な生成AIである「ChatGPT」と「Gemini（Nano Banana 2）」を使用して、WEBサイトで使いやすい画像を生成するためのプロンプト例と、実際に生成された画像をご紹介します。









ChatGPTとGeminiの違い




まずは簡単にChatGPTとGemini（Nano Banana 2）を使用して画像を生成する場合の向き・不向きを実際に使用した感想をもとに比較してみます。
（2026年3月現在）
※AIは日々アップデートされているため、この傾向は常に変化しています。









 
 
 比較項目
 Gemini
 ChatGPT
 備考
 
 
 
 
 写真・リアル系
 ○
 △
 Geminiは実写に近い質感が得意。ChatGPTは曖昧な指示に強い。
 
 
 フラットイラスト
 ○
 △
 Geminiの方が現代的なビジネス用イラストに向いています。
 
 
 抽象背景
 △
 ○
 芸術的・抽象的な表現はChatGPTが得意。
 
 
 日本人表現の自然さ
 ○
 △
 リアルな写真については、Geminiの方が自然に仕上がる傾向。
 
 
 ポップ・柔らかい表現
 △
 ○
 ビジネスライクなものであればGeminiの方が得意な傾向。
 
 
 サイズ・縦横比指定
 ○
 &#215;
 ChatGPTは指定通りにならない場合があり、トリミングが必要。
 
 
 ロゴの制作
 △
 ○
 文字や記号を組み合わせたデザインはChatGPTが先行。
 
 
 背景が透明な画像
 &#215;
 ○
 素材として使いやすい透過背景の生成はChatGPTが得意。
 
 





すぐに使える！画像生成プロンプト3選
1. トップページ用「信頼感のあるキービジュアル」




例えば「トップに置く写真が決まらない」「コーポレート感・安心感を出したいが写真撮影をしている時間と予算がない」という時に、AIを使用してリアルな写真を作成することができます。








プロンプト例
日本の中小企業向けコーポレートサイトのトップページ用イメージ画像（リアルな写真）を作成してください。
清潔感と信頼感がある雰囲気。
明るい自然光、白と青を基調とした配色。
人物は20代～30代くらいの日本人が3人、作り込みすぎない自然な表情。
WEBサイト向け、横長構図（縦横比率は16:9、横幅は1920px）。
写真のみでロゴやテキストなど入れないでください。
















1Gemini（Nano Banana 2）



2ChatGPT




2. 業種イメージ「サービス内容を伝える1枚」




例えば「業種に合うイラストが見つからない」「フリー素材だとイメージが合わない」という時に、AIを使用して希望するイラストを作成することができます。








プロンプト例
日本の清掃業のWEBサイト用のフラットアイコン風のイラスト画像を作成してください。
実際の作業風景をイメージした表現。
過度な演出は避け、プロフェッショナルで誠実な印象。
作業着を着た日本の現場、日本人スタッフが3名。
テキストやロゴ、文字など入れないでください。
背景は切り抜けるように透明または白にしてください。
















1Gemini（Nano Banana 2）



2ChatGPT








また、場合によってはプロンプト内の文章が画像内に含まれて生成されることもあります。
テキストが「必要か・不要か」を明確に指定すると、より意図に近い画像が生成されやすくなります。
さらに、イラストの場合は「〇〇風」と指定する内容次第で、雰囲気を大きく変えることも可能です。









絵本の挿絵のような水彩画風





日本のアニメーション風





アメコミ風




3. 背景・装飾用「文字を邪魔しないイメージ」




例えば「見出し背景やセクションの区切りに使いたい」「写真が主張しすぎるのは避けたい」という時に、AIを使用して背景などの装飾を作成することができます。








プロンプト例
WEBサイトの背景に使える抽象的なデザイン画像を作成してください。
淡いグラデーション、やさしい色合い。
主張しすぎず、文字が読みやすい構図。
ビジネスサイト向け、シンプルで上品な印象。
















1Gemini（Nano Banana 2）



2ChatGPT








いかがでしょうか。
同じプロンプトでも、生成するAIによって仕上がる画像は異なりますので、ぜひいろいろと試してみてください。




画像生成で&#8220;絶対に入れたほうがいい指示&#8221;




画像生成を行った際によくある失敗としては「勝手に文字が入る」「構図が縦になる」「テイストがバラバラになる」「余計な装飾がつく」といったことがあげられます。そのため、そういった問題を防ぐために最低限以下の指定を入れることをおすすめします。
※プロンプトは足りないより、具体的なほうが成功率は高くなります。




プロンプトに入れたほうがいい指示




1）構図指定

 横長構図
 縦横比率16:9
 キービジュアル用





2）不要要素の明示

 ロゴやテキストは入れない
 人物はカメラ目線にしない





3）テイストの指定

 フラットなイラスト
 リアルな写真風
 過度な演出は避けたい





4）色味指定

 白と青を基調
 淡い色合い
 グラデーション





【重要】商用利用について




AIで生成した画像の商用利用可否・クレジット表記・再配布可否は利用するAIや契約内容によって異なりますので、必ず利用規約をご確認ください。
※スタッフ写真や実績紹介などの事実性が求められる写真には使用せず、背景やイメージカットなど補助用途での活用がおすすめです。






作成した画像の生成AI別商用利用について



■ChatGPT（2026年3月現在）
無料、有料プランともに商用利用可能。


■Gemini（2026年3月現在）
有料プランであれば商用利用可能。



まとめ




生成AIを活用すれば、「写真が決まらない」「イメージが合わない」といったWEB制作時の悩みを、短時間かつ低コストで解決できる可能性が広がります。
ポイントは、用途を明確にし、プロンプトで「雰囲気・構図・不要な要素」を具体的に指定することです。
完璧を目指すのではなく、叩き台やイメージ補助として上手に取り入れることで、制作効率は大きく向上しますので、ぜひサイト制作に困った時には生成AIを取り入れてみてください。








デモ登録はこちら




</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-03-11T10:00:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin177319168427814100" class="cms-content-parts-sin177319168427822600">
<div class="cms-content-parts-sin177268911939556500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177268911939560300">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>テキスト原稿はなんとかなったけれど、</p>
<p><strong>「キービジュアルに置く写真が決まらない」<br />
「フリー素材だと探すのが大変」<br />
「制作や写真撮影を依頼すると費用がかかってしまう」</strong></p>
<p>このように、WEBサイト内で使用する写真や画像の選定に困ったことはないでしょうか。<br />
実は、制作時間の中で「画像選定」が最も時間を使う工程になることも少なくありません。</p>
<p>そこで今、制作現場で活用が進んでいるのが生成AIによる画像自動生成です。<br />
今回は有名な生成AIである「ChatGPT」と「Gemini（Nano Banana 2）」を使用して、WEBサイトで使いやすい画像を生成するためのプロンプト例と、実際に生成された画像をご紹介します。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177268959172400500 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin177268959172404100" class="cparts-editsite--img cms-easy-edit" alt="困ったときの生成AI活用術 WEBサイト内で使用する写真や画像の選定に困った場合はAI生成を使用してみよう" src="https://ant2.net/images/magazine/2026/03/mg20260311_thumbnail.jpg" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177268926921668700 cparts-editsite--mainttl" id="cms-editor-textarea-sin177268926921673000" data-original="cms-content-parts-sin177268926921668700 cparts-editsite--mainttl" style="margin-top:80px;">ChatGPTとGeminiの違い</h2>
<div class="cms-content-parts-sin177268928983942900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177268928983947400">
<p>まずは簡単にChatGPTとGemini（Nano Banana 2）を使用して画像を生成する場合の向き・不向きを実際に使用した感想をもとに比較してみます。<br />
（2026年3月現在）<br />
※AIは日々アップデートされているため、この傾向は常に変化しています。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177268931610504300 cparts-id93--01 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177268931610558100">
<table>
    <thead>
        <tr>
            <th style="text-align: center;" width="20%" nowrap="nowrap">比較項目</th>
            <th style="text-align: center;" width="12%" nowrap="nowrap">Gemini</th>
            <th style="text-align: center;" width="12%" nowrap="nowrap">ChatGPT</th>
            <th style="text-align: center;">備考</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>写真・リアル系</td>
            <td style="text-align: center;">○</td>
            <td style="text-align: center;">△</td>
            <td>Geminiは実写に近い質感が得意。ChatGPTは曖昧な指示に強い。</td>
        </tr>
        <tr>
            <td>フラットイラスト</td>
            <td style="text-align: center;">○</td>
            <td style="text-align: center;">△</td>
            <td>Geminiの方が現代的なビジネス用イラストに向いています。</td>
        </tr>
        <tr>
            <td>抽象背景</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">○</td>
            <td>芸術的・抽象的な表現はChatGPTが得意。</td>
        </tr>
        <tr>
            <td>日本人表現の自然さ</td>
            <td style="text-align: center;">○</td>
            <td style="text-align: center;">△</td>
            <td>リアルな写真については、Geminiの方が自然に仕上がる傾向。</td>
        </tr>
        <tr>
            <td>ポップ・柔らかい表現</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">○</td>
            <td>ビジネスライクなものであればGeminiの方が得意な傾向。</td>
        </tr>
        <tr>
            <td>サイズ・縦横比指定</td>
            <td style="text-align: center;">○</td>
            <td style="text-align: center;">&#215;</td>
            <td>ChatGPTは指定通りにならない場合があり、トリミングが必要。</td>
        </tr>
        <tr>
            <td>ロゴの制作</td>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">○</td>
            <td>文字や記号を組み合わせたデザインはChatGPTが先行。</td>
        </tr>
        <tr>
            <td>背景が透明な画像</td>
            <td style="text-align: center;">&#215;</td>
            <td style="text-align: center;">○</td>
            <td>素材として使いやすい透過背景の生成はChatGPTが得意。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177268963386106500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177268963386110100" data-original="cms-content-parts-sin177268963386106500 cparts-editsite--mainttl" style="margin-top:80px;">すぐに使える！画像生成プロンプト3選</h2>
<h3 class="cms-content-parts-sin177268965158505500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177268965158509700">1. トップページ用「信頼感のあるキービジュアル」</h3>
<div class="cms-content-parts-sin177268999836564100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177268999836567700">
<p>例えば<strong>「トップに置く写真が決まらない」「コーポレート感・安心感を出したいが写真撮影をしている時間と予算がない」</strong>という時に、AIを使用してリアルな写真を作成することができます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177268995141539100 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177268995141543900">
<h4>プロンプト例</h4>
<p>日本の中小企業向けコーポレートサイトのトップページ用イメージ画像（リアルな写真）を作成してください。<br />
清潔感と信頼感がある雰囲気。<br />
明るい自然光、白と青を基調とした配色。<br />
人物は20代～30代くらいの日本人が3人、作り込みすぎない自然な表情。<br />
WEBサイト向け、横長構図（縦横比率は16:9、横幅は1920px）。<br />
写真のみでロゴやテキストなど入れないでください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177269445144678000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269445144685700">
<p style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/03/mg20260311_arrow.png" width="42" height="24" alt="" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177269454426005600 cparts-id548-02 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-id548-02__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177269454426009200">1</span><span class="cparts-editsite--mainttl cparts-ttl-block" id="cms-editor-textarea-sin177269454426009700">Gemini（Nano Banana 2）</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><a href="/images/magazine/2026/03/mg20260311_01.jpg" rel="lightbox_2[]" data-title=""><img id="cms-editor-image-sin177269454426009900" class="cparts-editsite--img" alt="Geminiで生成したキービジュアル" src="https://ant2.net/images/magazine/2026/03/mg20260311_01.jpg" title="" name="" /></a></div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-id548-02__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177269454426010200">2</span><span class="cparts-editsite--mainttl cparts-ttl-block" id="cms-editor-textarea-sin177269454426010400">ChatGPT</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><a href="/images/magazine/2026/03/mg20260311_02.jpg" rel="lightbox_2[]" data-title=""><img id="cms-editor-image-sin177269454426010600" class="cparts-editsite--img" alt="ChatGPTで生成したキービジュアル" src="https://ant2.net/images/magazine/2026/03/mg20260311_02.jpg" title="" name="" /></a></div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177269476876249000 cparts-editsite--mainttl" id="cms-editor-textarea-sin177269476876261300" data-original="cms-content-parts-sin177269476876249000 cparts-editsite--mainttl" style="margin-top:60px;">2. 業種イメージ「サービス内容を伝える1枚」</h3>
<div class="cms-content-parts-sin177269477699432700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269477699401900">
<p>例えば<strong>「業種に合うイラストが見つからない」「フリー素材だとイメージが合わない」</strong>という時に、AIを使用して希望するイラストを作成することができます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177269478290192200 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269478290163200">
<h4>プロンプト例</h4>
<p>日本の清掃業のWEBサイト用のフラットアイコン風のイラスト画像を作成してください。<br />
実際の作業風景をイメージした表現。<br />
過度な演出は避け、プロフェッショナルで誠実な印象。<br />
作業着を着た日本の現場、日本人スタッフが3名。<br />
テキストやロゴ、文字など入れないでください。<br />
背景は切り抜けるように透明または白にしてください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177269479077047600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269479077023600">
<p style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/03/mg20260311_arrow.png" width="42" height="24" alt="" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177269479573463300 cparts-id548-02 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-id548-02__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177269479573362900">1</span><span class="cparts-editsite--mainttl cparts-ttl-block" id="cms-editor-textarea-sin177269479573371000">Gemini（Nano Banana 2）</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><a href="/images/magazine/2026/03/mg20260311_03.jpg" rel="lightbox_2[]" data-title=""><img id="cms-editor-image-sin177269479573377800" class="cparts-editsite--img" alt="Geminiで生成したイラスト" src="https://ant2.net/images/magazine/2026/03/mg20260311_03.jpg" title="" name="" /></a></div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-id548-02__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177269479573391100">2</span><span class="cparts-editsite--mainttl cparts-ttl-block" id="cms-editor-textarea-sin177269479573397300">ChatGPT</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><a href="/images/magazine/2026/03/mg20260311_04.png" rel="lightbox_2[]" data-title=""><img id="cms-editor-image-sin177269479573403400" class="cparts-editsite--img" alt="ChatGPTで生成したイラスト" src="https://ant2.net/images/magazine/2026/03/mg20260311_04.png" title="" name="" /></a></div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177269559847015900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269559847017700">
<p>また、場合によってはプロンプト内の文章が画像内に含まれて生成されることもあります。<br />
テキストが「必要か・不要か」を明確に指定すると、より意図に近い画像が生成されやすくなります。</p>
<p>さらに、イラストの場合は<strong>「〇〇風」と指定する内容次第で、雰囲気を大きく変えることも可能</strong>です。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177269568145760700 box cparts-id411--02 lay-margin-b--3" col-flex="1-3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-img-block lay-img-width--max lay-margin-b--1"><a href="/images/magazine/2026/03/mg20260311_07.jpg" rel="lightbox_2[]" data-title=""><img id="cms-editor-image-sin177269568145765700" class="cparts-editsite--img cms-easy-edit" alt="絵本の挿絵のような水彩画風" src="https://ant2.net/images/magazine/2026/03/mg20260311_07.jpg" width="215" title="" name="" /></a></div>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin177269568145766200">
<h4 style="text-align: center;">絵本の挿絵のような水彩画風</h4>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-img-block lay-img-width--max lay-margin-b--1"><a href="/images/magazine/2026/03/mg20260311_08.jpg" rel="lightbox_2[]" data-title=""><img id="cms-editor-image-sin177269568145766400" class="cparts-editsite--img cms-easy-edit" alt="日本のアニメーション風" src="https://ant2.net/images/magazine/2026/03/mg20260311_08.jpg" width="215" title="" name="" /></a></div>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin177269568145766500">
<h4 style="text-align: center;">日本のアニメーション風</h4>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-img-block lay-img-width--max lay-margin-b--1"><a href="/images/magazine/2026/03/mg20260311_09.jpg" rel="lightbox_2[]" data-title=""><img id="cms-editor-image-sin177269568145766800" class="cparts-editsite--img cms-easy-edit" alt="アメコミ風" src="https://ant2.net/images/magazine/2026/03/mg20260311_09.jpg" width="215" title="" name="" /></a></div>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin177269568145767000">
<h4 style="text-align: center;">アメコミ風</h4>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177269510579415400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177269510579426200" data-original="cms-content-parts-sin177269510579415400 cparts-editsite--mainttl" style="margin-top:60px;">3. 背景・装飾用「文字を邪魔しないイメージ」</h3>
<div class="cms-content-parts-sin177269511377065500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269511377038600">
<p>例えば<strong>「見出し背景やセクションの区切りに使いたい」「写真が主張しすぎるのは避けたい」</strong>という時に、AIを使用して背景などの装飾を作成することができます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177269512053122700 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269512053090200">
<h4>プロンプト例</h4>
<p>WEBサイトの背景に使える抽象的なデザイン画像を作成してください。<br />
淡いグラデーション、やさしい色合い。<br />
主張しすぎず、文字が読みやすい構図。<br />
ビジネスサイト向け、シンプルで上品な印象。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177269512896968900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269512896939000">
<p style="text-align: center;"><img src="https://ant2.net/images/magazine/2026/03/mg20260311_arrow.png" width="42" height="24" alt="" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177269548681640300 cparts-id548-02 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-id548-02__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177269548681540200">1</span><span class="cparts-editsite--mainttl cparts-ttl-block" id="cms-editor-textarea-sin177269548681548600">Gemini（Nano Banana 2）</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><a href="/images/magazine/2026/03/mg20260311_05.jpg" rel="lightbox_2[]" data-title=""><img id="cms-editor-image-sin177269548681552200" class="cparts-editsite--img" alt="Geminiで生成した背景画像" src="https://ant2.net/images/magazine/2026/03/mg20260311_05.jpg" title="" name="" /></a></div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-id548-02__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177269548681565900">2</span><span class="cparts-editsite--mainttl cparts-ttl-block" id="cms-editor-textarea-sin177269548681572600">ChatGPT</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><a href="/images/magazine/2026/03/mg20260311_06.jpg" rel="lightbox_2[]" data-title=""><img id="cms-editor-image-sin177269548681578700" class="cparts-editsite--img" alt="ChatGPTで生成した背景画像" src="https://ant2.net/images/magazine/2026/03/mg20260311_06.jpg" title="" name="" /></a></div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177303217018700100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177303217018661900">
<p>いかがでしょうか。<br />
同じプロンプトでも、生成するAIによって仕上がる画像は異なりますので、ぜひいろいろと試してみてください。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177269775502515600 cparts-editsite--mainttl" id="cms-editor-textarea-sin177269775502519000" data-original="cms-content-parts-sin177269775502515600 cparts-editsite--mainttl" style="margin-top:80px;">画像生成で&#8220;絶対に入れたほうがいい指示&#8221;</h2>
<div class="cms-content-parts-sin177269781088477000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177269781088477000 cparts-id119 lay-margin-b--3 box">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269781088447700">
<p>画像生成を行った際によくある失敗としては「勝手に文字が入る」「構図が縦になる」「テイストがバラバラになる」「余計な装飾がつく」といったことがあげられます。そのため、そういった問題を防ぐために最低限以下の指定を入れることをおすすめします。<br />
※プロンプトは足りないより、具体的なほうが成功率は高くなります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177269809296591300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177269809296594800">プロンプトに入れたほうがいい指示</h3>
<div class="cms-content-parts-sin177313257939816400 cparts-id119--04 box lay-margin-b--3" col-flex="1-4" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177313257939821900">
<h4>1）構図指定</h4>
<ul>
    <li>横長構図</li>
    <li>縦横比率16:9</li>
    <li>キービジュアル用</li>
</ul>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177313257939822300">
<h4>2）不要要素の明示</h4>
<ul>
    <li>ロゴやテキストは入れない</li>
    <li>人物はカメラ目線にしない</li>
</ul>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177313257939822500">
<h4>3）テイストの指定</h4>
<ul>
    <li>フラットなイラスト</li>
    <li>リアルな写真風</li>
    <li>過度な演出は避けたい</li>
</ul>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177313257939822700">
<h4>4）色味指定</h4>
<ul>
    <li>白と青を基調</li>
    <li>淡い色合い</li>
    <li>グラデーション</li>
</ul>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177269813345757500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177269813345765500" data-original="cms-content-parts-sin177269813345757500 cparts-editsite--mainttl" style="margin-top:80px;">【重要】商用利用について</h2>
<div class="cms-content-parts-sin177269817343701800 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177269817343701800 cparts-id119 lay-margin-b--3 box">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269817343669200">
<p>AIで生成した画像の商用利用可否・クレジット表記・再配布可否は利用するAIや契約内容によって異なりますので、必ず利用規約をご確認ください。<br />
※スタッフ写真や実績紹介などの事実性が求められる写真には使用せず、背景やイメージカットなど補助用途での活用がおすすめです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177269824812023200 box cparts-id299--02 lay-margin-b--3 dec-line--primary" col-flex="1-2" data-reload="yes" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="cparts-head-block">
<h3 class="cparts-editsite--mainttl cparts-id299--02__ttl dec-bg--contents cms-easy-edit" id="cms-editor-textbox-sin177269824812033500">作成した画像の生成AI別商用利用について</h3>
</div>
<div class="cparts-body-block lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6 cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269824812041000">
<h4>■ChatGPT（2026年3月現在）</h4>
<p>無料、有料プランともに商用利用可能。</p>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6 cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269824812047700">
<h4>■Gemini（2026年3月現在）</h4>
<p>有料プランであれば商用利用可能。</p>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177269828052660200 cparts-editsite--mainttl" id="cms-editor-textarea-sin177269828052668300" data-original="cms-content-parts-sin177269828052660200 cparts-editsite--mainttl" style="margin-top:80px;">まとめ</h2>
<div class="cms-content-parts-sin177269838434363700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177269838434363700 cparts-id119 lay-margin-b--3 box">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177269838434328700">
<p>生成AIを活用すれば、「写真が決まらない」「イメージが合わない」といったWEB制作時の悩みを、短時間かつ低コストで解決できる可能性が広がります。<br />
ポイントは、用途を明確にし、プロンプトで「雰囲気・構図・不要な要素」を具体的に指定することです。</p>
<p>完璧を目指すのではなく、叩き台やイメージ補助として上手に取り入れることで、制作効率は大きく向上しますので、ぜひサイト制作に困った時には生成AIを取り入れてみてください。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177303222925934700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177303222925939700">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/02/21992/">
<title>AIが参考にするサイトの作り方―LLMOとは何か？</title>
<link>https://ant2.net/magazine/2026/02/21992/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は、最近よく耳にする「LLMO（エルエルエムオー）」について、そもそも何の略で、どのような意味を持つ言葉なのかという基本から、
前回のメルマガでご紹介した「AIO」との違いまでを、専門知識がなくても分かるように解説いたします。
あわせて、LLMOの考え方を踏まえながら、ant2 CMSでどのように具体的に実践・活用していくのかについても丁寧にご紹介いたします。






LLMOとは？




単語の意味を分解すると

 Large = 大規模
 Language Model = 言語モデル（文章を生成するAI）
 Optimization = 最適化

つまり直訳すると、「大規模言語モデルに対する最適化」となります。





「大規模言語モデル」とは？




では「大規模言語モデル」とは何か？代表的なものは、次のような生成AIです。

 ChatGPT
 Gemini
 Claude など

これらは「検索エンジン」ではなく、大量の情報をもとに&#8220;文章で答えを生成するAI&#8221;です。
少し前までは、「Google検索で上に表示される」「検索順位を上げる」ことが重要でした。









これは今でも大切ですが、最近はそれに加えて、
「AIに質問したとき、どのサイトの情報が使われるか」「AIの回答文の中に、どの会社・どのサービスが出てくるか」が、とても重要になってきています。
この「AIに使われる前提でサイトを整える考え方」が、LLMOです。




AIOとLLMOの違いとは？




前回のメルマガでご紹介した AIOと、今回取り上げるLLMO。
「結局何が違うの？」と感じている方も多いのではないでしょうか。
どちらも&#8220;AIに関係する最適化&#8221;という点では共通していますが、対象としているAIの範囲や考え方の軸に違いがあります。




AIOとは?




前回のメルマガでのAIOは、Google検索結果の上部に表示されるAI Overviewsのことをメインにご紹介しました。
これは、ユーザーが検索した際に、GoogleがAIによって情報を要約し、検索結果の最上部に表示する機能です。
また、AI Overviewsに表示されるための対策としてのAIO（AI Optimization）についても解説しました。




LLMOとは？




一方、今回取り上げる LLMO（Large Language Model Optimization） は、
ChatGPTなどの文章生成AIが回答を作る際に、どの情報を参照するかという「AIの内部処理や判断基準」に対する最適化を指します。








つまり、AIOは、「検索結果の概要に表示される&#8220;アウトプット&#8221;」および「そこへ表示されるための対策」を指し、
LLMOは「AIが回答を生成する際に、どの情報を参照するかという&#8220;インプット&#8221;」を指します。




AI時代のホームページ





これまでのホームページは、

 会社案内
 サービス紹介
 お問い合わせ

が中心でした。しかしAI時代では、ホームページの役割が少し変わります。




AIが見ているのは「正しい説明があるページ」




AIは、情報の整理具合を見ています。例えば、

 用語の意味がきちんと説明されている
 手順が順番に書いてある
 料金や条件がはっきり書かれている
 「よくある質問」に答えている

こうしたページは、AIにとって 非常に使いやすい情報源 です。
つまり、「ホームページ = AIにとっての参考書・教科書」という意識が重要になります。




「AIの回答に載るサイト」になるには何が必要？




「どうしたら、AIの回答に自社のサイトが表示されるの？」という質問をよくいただきます。
ポイントは、大きく3つです。









 
 
 ① AIや検索エンジンが
 &#8220;見に来られる状態&#8221;にする
 
 
 Googleにサイトを登録している
 サイトマップが作られている
 検索させたくない設定（noindex）を誤って付けていない
 
 
 
 
 ② ページごとに
 「何の説明か」が分かるようにする
 
 AIは、ページを1ページずつ 理解します。
 
 このページは何について書いているのか
 誰向けの情報なのか
 
 を、ページごとに明確にする必要があります。
 
 ページごとのタイトル
 説明文（ディスクリプション）
 SNS表示用の情報（OGP）
 
 を個別に設定し、AIにも人にも「分かりやすいページ」を作成することが必要です。
 
 
 
 ③「質問 &#8594; 答え」の形で内容を書く
 
 AIは質問に答えるのが得意です。
 
 「〇〇とは？」
 「〇〇の使い方」
 「〇〇の注意点」
 「〇〇はどんな人に向いている？」
 
 といったQ&#38;A形式でページを作ると、AIが回答に使いやすくなります。
 
 
 





どこにサイトが掲載されるの？




GoogleのAI要約枠（AI Overviews）では根拠リンクとして表示され、生成AIの回答で、参照元としてリンク・サイト名が表示されます。









SNSでシェアされた際に、OGPが整って見栄え良く出ます。（クリックされやすい）
この&#8220;載り方&#8221;を増やすには、ざっくり言うと

 AIや検索エンジンがクロールできる状態
 ページごとに意味が明確（メタ情報・構造が整理）
 引用しやすい文章構造（結論&#8594;根拠&#8594;具体）

が重要です。




ant2 CMSで行うLLMO対策



01


Google登録とサイトマップ設定

ant2 CMSでは、管理画面からGoogle Search Console登録の導線が用意されています。
さらに、/sitemap.xml を自動生成できます。
AIや検索エンジンに「ここにページがあります」と知らせる地図の役割です。








02


ページ単位でメタ情報を設定する

ant2 CMSでは、ページごとに

 タイトルタグ
 メタディスクリプション
 OGP
 追加タグ

を設定できます。

LLMO視点では特に重要なのが、
● タイトル
&#8594; 質問形式や具体的な内容を含める
● メタディスクリプション
&#8594; 結論を簡潔に書く
これはAIがページの要点を理解する助けになります。







03


トピックス・ブログの活用

LLMOで重要なのは「情報の蓄積」です。
ant2 CMSの

 トピックス（最新情報）
 ブログ（解説・ノウハウ）

を活用することで、AIが参照できる情報量を増やすことができます。







04


FAQ・用語集ページの作成

AIは「質問&#8594;回答」の形式を理解しやすいです。

 よくある質問ページ
 用語解説ページ
 比較ページ

は、LLMOと非常に相性が良い構造です。




ホームページは&#8220;営業ツール&#8221;から&#8220;情報資産&#8221;へ




LLMO時代では、
「ホームページ ＝ 会社案内」ではなく、「ホームページ ＝ AIに参照される情報資産」という考え方が重要になります。
一度しっかり作った解説ページは、
AIに繰り返し参照される可能性があります。
これは、広告とは違い、積み上げ型の資産になります。





まとめ




LLMO（Large Language Model Optimization）とは、ChatGPTなどの文章生成AIに向けた最適化を指す言葉です。
これまでのSEOが「検索順位」を主な目標としてきたのに対し、LLMOは「AIの回答の中で引用・参照されること」を意識した考え方である点が大きな特徴です。
前回ご紹介したAIOは、AI全体に向けた広い最適化の概念ですが、LLMOはその中でも特に文章生成AIに焦点を当てた、より具体的で実践的な取り組みといえます。
つまり、AIOが大きな方向性を示す考え方だとすれば、LLMOはその中身をどう作り込むかという実務レベルの設計に近いものです。
これからのホームページは、単なる会社案内やサービス紹介の場ではなく、AIに正しく理解され、説明の根拠として活用される&#8220;情報資産&#8221;としての役割が求められます。
そのためには、情報を分かりやすく整理し、質問に答える形で構成し、検索エンジンやAIが正しく読み取れる状態を整えることが重要です。
ant2 CMSでは、Googleへの登録やサイトマップの自動生成、ページごとのメタタグ設定、noindex管理、トピックスやブログによる継続的な情報発信など、LLMOを意識した運用を行うための機能が揃っています。これらを正しく活用することで、「人に読まれるサイト」から「AIに選ばれるサイト」へと進化させることが可能です。
これからの時代は、人とAIの両方に伝わるホームページづくりが鍵になります。ぜひant2 CMSを活用しながら、AIに引用されるサイトづくりを一歩ずつ進めていきましょう。








デモ登録はこちら




</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-02-25T00:00:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin177199045350184700" class="cms-content-parts-sin177199045350193100">
<div id="cms-editor-minieditor-sin177189331116502500" class="cms-content-parts-sin177189331116510300">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>今回は、最近よく耳にする「LLMO（エルエルエムオー）」について、そもそも何の略で、どのような意味を持つ言葉なのかという基本から、<br />
前回のメルマガでご紹介した「AIO」との違いまでを、専門知識がなくても分かるように解説いたします。</p>
<p>あわせて、LLMOの考え方を踏まえながら、ant2 CMSでどのように具体的に実践・活用していくのかについても丁寧にご紹介いたします。</p>
</div>
<div class="cms-content-parts-sin177189390621940400 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin177189390621946800" class="cparts-editsite--img cms-easy-edit" alt="AIが参考にするサイトの作り方―LLMOとは何か？" src="https://ant2.net/images/magazine/2026/02/20260289858_kv.jpg" width="675" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177189393757755900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177189393757762700">LLMOとは？</h2>
<div class="cms-content-parts-sin177189395564272000 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189395564275600">
<p>単語の意味を分解すると</p>
<ul>
    <li>Large = 大規模</li>
    <li>Language Model = 言語モデル（文章を生成するAI）</li>
    <li>Optimization = 最適化</li>
</ul>
<p>つまり直訳すると、「<strong>大規模言語モデルに対する最適化</strong>」となります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177189395564276000" class="cparts-editsite--img cms-easy-edit" alt="LLMOとは？" src="https://ant2.net/images/magazine/2026/02/images2026022412023598.jpg" width="330" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177189407688846200 cparts-editsite--mainttl" id="cms-editor-textarea-sin177189407688861300">「大規模言語モデル」とは？</h2>
<div class="cms-content-parts-sin177190314209275400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177190314209287600">
<p>では「大規模言語モデル」とは何か？代表的なものは、次のような生成AIです。</p>
<ul>
    <li>ChatGPT</li>
    <li>Gemini</li>
    <li>Claude など</li>
</ul>
<p>これらは「検索エンジン」ではなく、大量の情報をもとに&#8220;<strong>文章で答えを生成するAI</strong>&#8221;です。</p>
<p>少し前までは、「Google検索で上に表示される」「検索順位を上げる」ことが重要でした。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177190312379519100 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177190312379530100" class="cparts-editsite--img cms-easy-edit" alt="大規模言語モデルとは？" src="https://ant2.net/images/magazine/2026/02/20260289858_img03.jpg" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177190312379538700">
<p style="text-align: left;"><span style="font-size: 1.6rem;">これは今でも大切ですが、最近はそれに加えて、</span></p>
<p>「<strong>AIに質問したとき、どのサイトの情報が使われるか</strong>」「<strong>AIの回答文の中に、どの会社・どのサービスが出てくるか</strong>」が、とても重要になってきています。</p>
<p>この「AIに使われる前提でサイトを整える考え方」が、LLMOです。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177189440627404300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177189440627414100">AIOとLLMOの違いとは？</h2>
<div class="cms-content-parts-sin177189474474734600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189474474700200">
<p>前回のメルマガでご紹介した AIOと、今回取り上げるLLMO。<br />
「結局何が違うの？」と感じている方も多いのではないでしょうか。</p>
<p>どちらも&#8220;AIに関係する最適化&#8221;という点では共通していますが、対象としているAIの範囲や考え方の軸に違いがあります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177198395212362100 cparts-editsite--mainttl" id="cms-editor-textarea-sin177198395212365400">AIOとは?</h3>
<div class="cms-content-parts-sin177198399890404700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177198399890372500">
<p>前回のメルマガでのAIOは、Google検索結果の上部に表示されるAI Overviewsのことをメインにご紹介しました。<br />
これは、ユーザーが検索した際に、GoogleがAIによって情報を要約し、検索結果の最上部に表示する機能です。</p>
<p>また、AI Overviewsに表示されるための対策としてのAIO（AI Optimization）についても解説しました。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177198403500120200 cparts-editsite--mainttl" id="cms-editor-textarea-sin177198403500123900">LLMOとは？</h3>
<div class="cms-content-parts-sin177198404064510100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177198404064475000">
<p>一方、今回取り上げる LLMO（Large Language Model Optimization） は、<br />
ChatGPTなどの文章生成AIが回答を作る際に、どの情報を参照するかという「AIの内部処理や判断基準」に対する最適化を指します。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177198429741203500 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177198429741207200">
<p style="text-align: center;"><span style="font-size: large;">つまり、</span><span style="font-size: large;">AIOは、「<strong>検索結果の概要に表示される&#8220;アウトプット&#8221;</strong>」および「<strong>そこへ表示されるための対策</strong>」を指し、</span></p>
<p style="text-align: center;"><span style="font-size: large;">LLMOは「<strong>AIが回答を生成する際に、どの情報を参照するかという&#8220;インプット&#8221;</strong>」を指します。</span></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177189546417792200 cparts-editsite--mainttl" id="cms-editor-textarea-sin177189546417804000">AI時代のホームページ</h2>
<div class="cms-content-parts-sin177189550339201100 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177189550339204600" class="cparts-editsite--img cms-easy-edit" alt="AI時代のホームページ" src="https://ant2.net/images/magazine/2026/02/20260289858_img02.jpg" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189550339204900">
<p>これまでのホームページは、</p>
<ul>
    <li>会社案内</li>
    <li>サービス紹介</li>
    <li>お問い合わせ</li>
</ul>
<p>が中心でした。しかしAI時代では、ホームページの役割が少し変わります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177189556036862900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177189556036867700">AIが見ているのは「正しい説明があるページ」</h3>
<div class="cms-content-parts-sin177189562399883900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189562399885800">
<p>AIは、情報の整理具合を見ています。例えば、</p>
<ul>
    <li>用語の意味がきちんと説明されている</li>
    <li>手順が順番に書いてある</li>
    <li>料金や条件がはっきり書かれている</li>
    <li>「よくある質問」に答えている</li>
</ul>
<p>こうしたページは、AIにとって 非常に使いやすい情報源 です。</p>
<p>つまり、「<strong>ホームページ = AIにとっての参考書・教科書</strong>」という意識が重要になります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177189574840008400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177189574840021000">「AIの回答に載るサイト」になるには何が必要？</h3>
<div class="cms-content-parts-sin177189577331636700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189577331603100">
<p>「どうしたら、AIの回答に自社のサイトが表示されるの？」という質問をよくいただきます。</p>
<p>ポイントは、大きく3つです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177192700006194400 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177192700006198000">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th><strong>① AIや検索エンジンが<br />
            &#8220;見に来られる状態&#8221;にする</strong></th>
            <td>
            <ul>
                <li>Googleにサイトを登録している</li>
                <li>サイトマップが作られている</li>
                <li>検索させたくない設定（noindex）を誤って付けていない</li>
            </ul>
            </td>
        </tr>
        <tr>
            <th><strong>② ページごとに<br />
            「何の説明か」が分かるようにする</strong></th>
            <td>
            <p>AIは、ページを1ページずつ 理解します。</p>
            <ul>
                <li>このページは何について書いているのか</li>
                <li>誰向けの情報なのか</li>
            </ul>
            <p>を、ページごとに明確にする必要があります。</p>
            <ul>
                <li>ページごとのタイトル</li>
                <li>説明文（ディスクリプション）</li>
                <li>SNS表示用の情報（OGP）</li>
            </ul>
            <p>を個別に設定し、AIにも人にも「分かりやすいページ」を作成することが必要です。</p>
            </td>
        </tr>
        <tr>
            <th><strong>③「質問 &#8594; 答え」の形で内容を書く</strong></th>
            <td>
            <p>AIは質問に答えるのが得意です。</p>
            <ul>
                <li>「〇〇とは？」</li>
                <li>「〇〇の使い方」</li>
                <li>「〇〇の注意点」</li>
                <li>「〇〇はどんな人に向いている？」</li>
            </ul>
            <p>といったQ&#38;A形式でページを作ると、AIが回答に使いやすくなります。</p>
            </td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177189622526056500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177189622526112900">どこにサイトが掲載されるの？</h2>
<div class="cms-content-parts-sin177189628103152500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189628103157100">
<p>GoogleのAI要約枠（AI Overviews）では根拠リンクとして表示され、生成AIの回答で、参照元としてリンク・サイト名が表示されます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177189638340097800 box cparts-id437--01 lay-margin-b--3 ant2oemorg-89858-01" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177189638340097800 box cparts-id437--01 lay-margin-b--3" data-custom="ant2oemorg-89858-01">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177189638340101400" class="cparts-editsite--img cms-easy-edit" alt="ChatGPT参照画面" src="https://ant2.net/images/magazine/2026/02/images2026022410381441.png" width="330" title="" name="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189638340101700">
<p>SNSでシェアされた際に、OGPが整って見栄え良く出ます。（クリックされやすい）<br />
この&#8220;載り方&#8221;を増やすには、ざっくり言うと</p>
<ul>
    <li>AIや検索エンジンがクロールできる状態</li>
    <li>ページごとに意味が明確（メタ情報・構造が整理）</li>
    <li>引用しやすい文章構造（結論&#8594;根拠&#8594;具体）</li>
</ul>
<p>が重要です。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177189682811149300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177189682811162100">ant2 CMSで行うLLMO対策</h2>
<div class="cms-content-parts-sin177189686815093400 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177189686815097000">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177189686815097400">Google登録とサイトマップ設定</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189686815097600">
<p>ant2 CMSでは、管理画面からGoogle Search Console登録の導線が用意されています。</p>
<p>さらに、/sitemap.xml を自動生成できます。</p>
<p>AIや検索エンジンに「ここにページがあります」と知らせる地図の役割です。</p>
<p><img src="https://ant2.net/images/magazine/2026/02/images2026022410381369.png" width="1280" height="901" alt="Google Search Console登録画面" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177189714501868200 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177189714501793100">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177189714501801900">ページ単位でメタ情報を設定する</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189714501812100">
<p>ant2 CMSでは、ページごとに</p>
<ul>
    <li>タイトルタグ</li>
    <li>メタディスクリプション</li>
    <li>OGP</li>
    <li>追加タグ</li>
</ul>
<p>を設定できます。</p>
<p><img src="https://ant2.net/images/magazine/2026/02/images2026022410381296.png" width="1280" height="901" alt="メタ情報設定画面" /></p>
<p>LLMO視点では特に重要なのが、</p>
<p>● タイトル<br />
&#8594; 質問形式や具体的な内容を含める</p>
<p>● メタディスクリプション<br />
&#8594; 結論を簡潔に書く</p>
<p>これはAIがページの要点を理解する助けになります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177189724621406000 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177189724621354600">03</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177189724621363400">トピックス・ブログの活用</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189724621370100">
<p>LLMOで重要なのは「情報の蓄積」です。</p>
<p>ant2 CMSの</p>
<ul>
    <li>トピックス（最新情報）</li>
    <li>ブログ（解説・ノウハウ）</li>
</ul>
<p>を活用することで、AIが参照できる情報量を増やすことができます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177189743281922200 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177189743281874600">04</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177189743281882700">FAQ・用語集ページの作成</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189743281889500">
<p>AIは「質問&#8594;回答」の形式を理解しやすいです。</p>
<ul>
    <li>よくある質問ページ</li>
    <li>用語解説ページ</li>
    <li>比較ページ</li>
</ul>
<p>は、LLMOと非常に相性が良い構造です。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177189756243812200 cparts-editsite--mainttl" id="cms-editor-textarea-sin177189756243816400">ホームページは&#8220;営業ツール&#8221;から&#8220;情報資産&#8221;へ</h2>
<div class="cms-content-parts-sin177189759610328600 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189759610332100">
<p>LLMO時代では、<br />
「ホームページ ＝ 会社案内」ではなく、「ホームページ ＝ <strong>AIに参照される情報資産</strong>」という考え方が重要になります。</p>
<p>一度しっかり作った解説ページは、<br />
AIに繰り返し参照される可能性があります。</p>
<p>これは、広告とは違い、<strong>積み上げ型の資産</strong>になります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177189759610332500" class="cparts-editsite--img cms-easy-edit" alt="ホームページは&#8220;営業ツール&#8221;から&#8220;情報資産&#8221;へ" src="https://ant2.net/images/magazine/2026/02/20260289858_img05.jpg" width="330" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177189786138333600 cparts-editsite--mainttl" id="cms-editor-textarea-sin177189786138342400"><strong>まとめ</strong></h2>
<div class="cms-content-parts-sin177189811370087100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189811370090800">
<p>LLMO（Large Language Model Optimization）とは、ChatGPTなどの文章生成AIに向けた最適化を指す言葉です。<br />
これまでのSEOが「検索順位」を主な目標としてきたのに対し、LLMOは「AIの回答の中で引用・参照されること」を意識した考え方である点が大きな特徴です。</p>
<p>前回ご紹介したAIOは、AI全体に向けた広い最適化の概念ですが、LLMOはその中でも特に文章生成AIに焦点を当てた、より具体的で実践的な取り組みといえます。<br />
つまり、AIOが大きな方向性を示す考え方だとすれば、LLMOはその中身をどう作り込むかという実務レベルの設計に近いものです。</p>
<p>これからのホームページは、単なる会社案内やサービス紹介の場ではなく、AIに正しく理解され、説明の根拠として活用される&#8220;情報資産&#8221;としての役割が求められます。<br />
そのためには、情報を分かりやすく整理し、質問に答える形で構成し、検索エンジンやAIが正しく読み取れる状態を整えることが重要です。</p>
<p>ant2 CMSでは、Googleへの登録やサイトマップの自動生成、ページごとのメタタグ設定、noindex管理、トピックスやブログによる継続的な情報発信など、LLMOを意識した運用を行うための機能が揃っています。これらを正しく活用することで、「人に読まれるサイト」から「AIに選ばれるサイト」へと進化させることが可能です。</p>
<p>これからの時代は、人とAIの両方に伝わるホームページづくりが鍵になります。ぜひant2 CMSを活用しながら、AIに引用されるサイトづくりを一歩ずつ進めていきましょう。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177189822746347000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177189822746413600">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/02/21990/">
<title>Google検索が大きく変わる！？AIO（AI Overviews）とは？</title>
<link>https://ant2.net/magazine/2026/02/21990/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
これまでのSEO対策といえば、「いかに検索結果の上位に表示されるか」が重要視されてきました。
しかし今、検索結果そのものの&#8220;表示の仕組み&#8221;が大きく変わろうとしています。
それが、Googleが導入を進めている「AIO（AI Overviews）」という新機能です。
検索キーワードに対して、AIが自動で複数の情報をまとめて、ユーザーに「要点だけを」先に提示してくれるという仕組みです。
つまり、ホームページは「人に見られる」だけでなく、
「AIに読まれる」「AIに理解される」ことがますます重要になってきているのです。
今回は、Google検索における最新機能「AIO（AI Overviews）」とは何か？&#160;
そして、それがホームページにどのような影響を与えるのか？
さらには、ant2 CMSを使ってどのように対応・活用できるのか？ を分かりやすく解説いたします。






そもそもAIO（AI Overviews）って何？




AIOとは、AI Overviews（エーアイ・オーバービューズ）の略称であり、Googleが生成AIを使って検索結果の上部に「質問への要約回答」を自動で表示する機能です。
これまでのGoogle検索は、【検索 &#8594; リンク一覧 &#8594; クリック &#8594; 情報を見る】という流れでしたが、
AIOが導入されると、【検索 &#8594; AIが答えをまとめて表示】という流れになります。




これまでの検索との違い




従来の検索







複数のリンクが表示






検索ワード入力






ユーザーが1つずつクリックして読む







AIO導入後







検索ワード入力






AIが複数の信頼性のあるサイトを読み取り、要約を表示






複数のリンクが表示






興味がある記事をユーザーが
1つずつクリックして読む







たとえば「東京 渋谷 美容院 おすすめ」と検索すると、AIがいくつかの美容室のサイトや口コミを読み取り、
「渋谷で人気の美容室には、丁寧なカウンセリングが好評なサロンA、カット技術に定評のあるサロンBなどがあります」といったように、AIが内容をまとめて最初に教えてくれるのです。
つまり、「ユーザーが自ら探して情報を精査する」から「AIが検索して情報を精査し教える」検索体験に変わりつつあります。




どこに表示されるの？





AIOは検索結果の基本一番上に表示され、まとめた情報のそれぞれの参照サイトがリンクされています。
そして、その下に従来のリンク一覧が並びます。
つまり、「AIに選ばれるサイト」になれば、検索結果の最上部に自社の情報が載るチャンスがあります。







AIOに表示されるとどうなる？

 あなたのサイトが信頼できる情報源と認識される
 アクセスが増え、認知度アップにもつながる
 SEOの新しいチャンスになる

ただし、AIOが答えを完結させてしまうと、ユーザーが自社サイトをクリックしなくなる可能性もあるため、
「もっと詳しく知りたい」と思わせるコンテンツ作りが大切です。




どんなサイトがAIOに選ばれるの？




「ユーザーの問いに対して、最も正確で、信頼でき、かつ整理された答え」をソースとして引用します。
そのため、単に検索順位が高いだけでなく、「AIが情報を抽出しやすい構造」を持っているかどうかが重要です。





 
 
 わかりやすい構成
 見出しやリストを使って情報が整理されている
 
 
 専門的な内容
 FAQ形式や専門家・経験者の視点で書かれている
 
 
 信頼性のある情報
 出典・実績・事例などがしっかりしている
 
 
 更新されている
 古い情報のままで放置されていない
 
 
 検索意図に合っている
 読者が知りたいことに正確に答えている
 
 





もうSEOは意味ない？




AIOのように、AIが検索結果の一番上に要約を表示してしまうなら、「もうSEOなんて意味がないのでは？」と不安に感じている方も多いかもしれません。
たしかに、これまでのような「検索結果で上位表示されればクリックが増える」という仕組みは、AIOによって変わりつつあります。
ユーザーが、リンクをクリックせずにAIOの要約だけで満足してしまう、いわゆる「ゼロクリック検索」が増えているのも事実です。
しかし、SEOが意味を失ったわけではありません。
重要なのは、AIOに引用されるためにもSEOの土台は欠かせないという点です。
AIはWEB上のあらゆるページを無作為に参照しているわけではなく、もともと検索結果で評価されているページや、信頼性が高いと判断されたページを中心に情報を抽出します。
そのため、検索順位が高いページほどAIOに引用される可能性も高まる傾向があります。









「SEOをやらなくてよくなる」のではなく、「SEOにくわえてAIに伝わる工夫が必要になる」という変化なのです。
従来のSEOで培ってきた「わかりやすい構造」「専門性」「信頼性」は、AIO時代でも引き続き大きな武器になります。




AIOのためのSEOは「AIに伝わる」ことが大前提




AIOは、Googleの生成AIがWEB上の情報を読み取り、複数の信頼性あるページから要点を抽出し、ユーザーに分かりやすく要約して表示する機能です。
つまり、AIが正しく読み取れるようなページ構成や情報設計ができていなければ、どれだけ良い内容でも「存在しないもの」として扱われてしまう可能性があります。




これからのSEOで大切になるポイント




かつてのような、「キーワードをたくさん入れるだけの対策」や「とにかく被リンクを集めるような手法」は、AIOには通用しません。
その代わりに求められるのは、ユーザーの疑問に対して丁寧かつ構造的に情報を伝える姿勢です。
これは、AIにもユーザーにも親切なWEBコンテンツを作るという意味で、今後のSEOはより本質的なものになったと言えるでしょう。









 
 
 重要な要素
 なぜ重要？
 
 
 見出し構造（Hタグ）
 AIが情報の階層を理解しやすくなる
 
 
 FAQや箇条書きの活用
 情報の要点が明確で、要約に使われやすい
 
 
 一次情報・専門的内容
 信頼性の高い情報源として評価されやすい
 
 
 定期的な更新
 情報の鮮度はAIが重要視する指標の一つ
 
 
 メタ情報（タイトル・説明文）
 検索意図とのマッチ度を高めることでAIOの参照対象に
 
 





ant2 CMSでの具体的なAIO対策・活用方法




従来のSEOからAIOという新しい検索体験に変わっても、ページ構成の最適化、FAQブロックの設置、定期的な記事更新、専門性の高いブログコンテンツなど、ant2 CMSでも実現可能な施策がたくさんあります。







01


「見出し」でページ構造を整理する

H1・H2・H3などの見出しタグは、AIが内容を理解するのにとても大切です。
例：
H1：犬のしつけ方
└H2：基本のしつけ3つ
└H3：おすわりの教え方
ant2 CMSでは、コンテンツパーツでいろいろなデザインの見出しを入れることができます。








02


よくある質問（FAQ）を作成する

FAQ形式は、AIに好まれる情報スタイルです。
ant2 CMSでは、コンテンツパーツで質問と答えの形式をすぐに作成できます。
オンラインショップ用、クリニック用、スクール用などそれぞれに合わせたコンテンツパーツもご用意しています。








03


ページの説明文をしっかり書く（メタタグ）

GoogleやAIは、「ページタイトル（タイトルタグ）」と「説明文（メタディスクリプション）」を最初に読みます。
従来のSEOと同じくメタタグを記入することが大切になってきます。
ant2 CMSでは、コンテンツパーツ「設定」＞「SEO対策」＞「メタタグの設定」から設定できます。








04


画像に説明をつける（alt属性）

画像にも「説明文（alt）」を入れておくことで、AIが画像の内容を理解できます。
これは視覚障害者のアクセシビリティ対策としても重要です。
ant2 CMSでは、コンテンツパーツ「画像設定」から作成できます。





その他、こんな工夫もおすすめ！




実体験を交えた
コラムやブログ
「経験」重視のAIOで有利に。




専門的な用語をわかりやすく解説
初心者にも評価されやすい。




動画や図解の活用&#160;
内容理解をサポートし、
信頼感UP。




地域密着情報を強化
ローカル検索に強く、
AIにも拾われやすい。




AIOに載るために気をつけたいこと





 無理にキーワードを詰め込みすぎない
 ほかサイトのコピーや転載をしない
 誤情報・古い情報を載せない
 アフィリエイトリンクばかりのページは避ける









「AIに親切なサイト」は、結果として「人にも親切なサイト」になります。




まとめ




AIO（AI Overviews）は、Google検索の新しい姿です。
これからは、「人に見せる」だけでなく、「AIに読まれる」ことも意識したサイトづくりが求められます。
ant2 CMSには、AIO対策に役立つ便利な機能がたくさん用意されています。
見出しの整理、FAQ作成、ページ情報の設定、定期更新など、今日から少しずつ取り組んでいきましょう。








デモ登録はこちら




</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-02-12T00:00:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin177086394341785400" class="cms-content-parts-sin177086394341799200">
<div id="cms-editor-minieditor-sin177026636732698100" class="cms-content-parts-sin177026636732704900">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>これまでのSEO対策といえば、「いかに検索結果の上位に表示されるか」が重要視されてきました。<br />
しかし今、検索結果そのものの&#8220;表示の仕組み&#8221;が大きく変わろうとしています。</p>
<p>それが、Googleが導入を進めている「AIO（AI Overviews）」という新機能です。<br />
検索キーワードに対して、AIが自動で複数の情報をまとめて、ユーザーに「要点だけを」先に提示してくれるという仕組みです。</p>
<p>つまり、ホームページは「人に見られる」だけでなく、<br />
「AIに読まれる」「AIに理解される」ことがますます重要になってきているのです。</p>
<p>今回は、Google検索における最新機能「AIO（AI Overviews）」とは何か？&#160;<br />
そして、それがホームページにどのような影響を与えるのか？</p>
<p>さらには、ant2 CMSを使ってどのように対応・活用できるのか？ を分かりやすく解説いたします。</p>
</div>
<div class="cms-content-parts-sin177026641522231500 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin177026641522234200" class="cparts-editsite--img cms-easy-edit" alt="Google検索が大きく変わる！？AIO（AI Overviews）とは？" src="https://ant2.net/images/magazine/2026/02/images2026020516514365.jpg" width="675" title="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177026642371920900 cparts-editsite--mainttl" id="cms-editor-textarea-sin177026642371930600">そもそもAIO（AI Overviews）って何？</h2>
<div class="cms-content-parts-sin177026643871055600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026643871059400">
<p>AIOとは、AI Overviews（エーアイ・オーバービューズ）の略称であり、Googleが生成AIを使って検索結果の上部に「質問への要約回答」を自動で表示する機能です。</p>
<p>これまでのGoogle検索は、【検索 &#8594; リンク一覧 &#8594; クリック &#8594; 情報を見る】という流れでしたが、<br />
AIOが導入されると、【検索 &#8594; AIが答えをまとめて表示】という流れになります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177026677267927700 cparts-editsite--mainttl" id="cms-editor-textarea-sin177026677267931500">これまでの検索との違い</h3>
<div class="cms-content-parts-sin177026714887390600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177026714887390600 cparts-id119 lay-margin-b--3 box" style="margin-bottom:10px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026714887396600">
<p><span style="font-size: large;">従来の検索</span></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026703110673500 box cparts-var03-type21 cparts-id117 lay-margin-b--3 cparts-cell-block" data-reload="yes">
<div class="cparts-body-block lay-padding--2">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026703110642900">
<p style="text-align: center;">複数のリンクが表示</p>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026702878916300 box cparts-var03-type21 cparts-id117 lay-margin-b--3 cparts-cell-block" data-reload="yes">
<div class="cparts-body-block lay-padding--2">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026702878920300">
<p style="text-align: center;">検索ワード入力</p>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026703304671300 box cparts-var03-type21 cparts-id117 lay-margin-b--3 cparts-cell-block" data-reload="yes">
<div class="cparts-body-block lay-padding--2">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026703304639200">
<p style="text-align: center;">ユーザーが1つずつクリックして読む</p>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026725725432600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177026725725432600 cparts-id119 lay-margin-b--3 box" style="margin-bottom:15px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026725725435400">
<p><span style="font-size: large;"><strong>AIO導入後</strong></span></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026726513932200 box cparts-var03-type21 cparts-id117 lay-margin-b--3 cparts-cell-block" data-reload="yes">
<div class="cparts-body-block lay-padding--2">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026726513941800">
<p style="text-align: center;"><strong>検索ワード入力</strong></p>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026726933715300 box cparts-var03-type21 cparts-id117 lay-margin-b--3 cparts-cell-block" data-reload="yes">
<div class="cparts-body-block lay-padding--2">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026726933686900">
<p style="text-align: center;"><strong>AIが複数の信頼性のあるサイトを読み取り、要約を表示</strong></p>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026732364541500 box cparts-var03-type21 cparts-id117 lay-margin-b--3 cparts-cell-block" data-reload="yes">
<div class="cparts-body-block lay-padding--2">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026732364509800">
<p style="text-align: center;"><strong>複数のリンクが表示</strong></p>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026741297445400 box cparts-var03-type21 cparts-id117 lay-margin-b--3 cparts-cell-block" data-reload="yes">
<div class="cparts-body-block lay-padding--2">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026741297417500">
<p style="text-align: center;"><strong>興味がある記事を</strong><strong>ユーザーが<br />
1つずつクリックして読む</strong></p>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026764331654100 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026764331658000">
<p>たとえば「東京 渋谷 美容院 おすすめ」と検索すると、AIがいくつかの美容室のサイトや口コミを読み取り、<br />
「渋谷で人気の美容室には、丁寧なカウンセリングが好評なサロンA、カット技術に定評のあるサロンBなどがあります」といったように、AIが内容をまとめて最初に教えてくれるのです。</p>
<p style="text-align: center;"><strong>つまり、「ユーザーが自ら探して情報を精査する」から「AIが検索して情報を精査し教える」検索体験に変わりつつあります。</strong></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177026769901675800 cparts-editsite--mainttl" id="cms-editor-textarea-sin177026769901720300">どこに表示されるの？</h2>
<div class="cms-content-parts-sin177026783895980700 box cparts-id437--01 lay-margin-b--3 ant2oemorg-89857-01" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177026783895980700 box cparts-id437--01 lay-margin-b--3" data-custom="ant2oemorg-89857-01" style="margin-bottom:60px;">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177026783896045100" class="cparts-editsite--img cms-easy-edit" alt="AIOの検索結果" src="https://ant2.net/images/magazine/2026/02/images2026020514252112.png" width="330" title="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026783896045700">
<p>AIOは検索結果の基本一番上に表示され、まとめた情報のそれぞれの参照サイトがリンクされています。<br />
そして、その下に従来のリンク一覧が並びます。</p>
<p>つまり、「AIに選ばれるサイト」になれば、検索結果の最上部に自社の情報が載るチャンスがあります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026803191891300 cparts-id89--01 cparts-fullwide-block box lay-margin-b--3 lay-padding-y--3 dec-bg--light" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-editsite--txt cparts-txt-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6 lay-reset-child" id="cms-editor-minieditor-sin177026803191907000">
<h2><strong>AIOに表示されるとどうなる？</strong></h2>
<ul>
    <li>あなたのサイトが信頼できる情報源と認識される</li>
    <li>アクセスが増え、認知度アップにもつながる</li>
    <li>SEOの新しいチャンスになる</li>
</ul>
<p>ただし、AIOが答えを完結させてしまうと、ユーザーが自社サイトをクリックしなくなる可能性もあるため、<br />
「もっと詳しく知りたい」と思わせるコンテンツ作りが大切です。</p>
</div>
<div class="cparts-img-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6 lay-img-width--max"><img id="cms-editor-image-sin177026803191915300" class="cparts-editsite--img" alt="AIOのイメージ画像" src="https://ant2.net/images/magazine/2026/02/images2026020516592132.jpg" title="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin177026811456513400 cparts-editsite--mainttl" id="cms-editor-textarea-sin177026811456521600">どんなサイトがAIOに選ばれるの？</h2>
<div class="cms-content-parts-sin177026829733207400 cparts-id99--02 box lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-3">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026829733217400">
<p>「ユーザーの問いに対して、最も正確で、信頼でき、かつ整理された答え」をソースとして引用します。</p>
<p>そのため、単に検索順位が高いだけでなく、<strong>「AIが情報を抽出しやすい構造」</strong>を持っているかどうかが重要です。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-9">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177026829733224500">
<table width="80%" dir="ltr">
    <tbody class="lay-margin-b--1">
        <tr>
            <th><strong>わかりやすい構成</strong></th>
            <td>見出しやリストを使って情報が整理されている</td>
        </tr>
        <tr>
            <th><strong>専門的な内容</strong></th>
            <td>FAQ形式や専門家・経験者の視点で書かれている</td>
        </tr>
        <tr>
            <th><strong>信頼性のある情報</strong></th>
            <td>出典・実績・事例などがしっかりしている</td>
        </tr>
        <tr>
            <th><strong>更新されている</strong></th>
            <td>古い情報のままで放置されていない</td>
        </tr>
        <tr>
            <th><strong>検索意図に合っている</strong></th>
            <td>読者が知りたいことに正確に答えている</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177026833498014500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177026833498022100">もうSEOは意味ない？</h2>
<div class="cms-content-parts-sin177026841223245400 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026841223259600">
<p>AIOのように、AIが検索結果の一番上に要約を表示してしまうなら、「もうSEOなんて意味がないのでは？」と不安に感じている方も多いかもしれません。</p>
<p>たしかに、これまでのような「検索結果で上位表示されればクリックが増える」という仕組みは、AIOによって変わりつつあります。</p>
<p>ユーザーが、リンクをクリックせずにAIOの要約だけで満足してしまう、いわゆる「ゼロクリック検索」が増えているのも事実です。</p>
<p>しかし、SEOが意味を失ったわけではありません。<br />
重要なのは、AIOに引用されるためにもSEOの土台は欠かせないという点です。<br />
AIはWEB上のあらゆるページを無作為に参照しているわけではなく、もともと検索結果で評価されているページや、信頼性が高いと判断されたページを中心に情報を抽出します。<br />
そのため、検索順位が高いページほどAIOに引用される可能性も高まる傾向があります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin177026841223268500" class="cparts-editsite--img cms-easy-edit" alt="SEOのイメージ画像" src="https://ant2.net/images/magazine/2026/02/images2026020517160150.jpg" width="330" title="" /></div>
</div>
</div>
<div class="cms-content-parts-sin177026856111268500 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026856111275000">
<p style="text-align: center;"><strong>「SEOをやらなくてよくなる」のではなく、「SEOにくわえて</strong><strong>AIに伝わる工夫が必要になる」という変化なのです。<br />
従来のSEOで培ってきた「わかりやすい構造」「専門性」「信頼性」は、AIO時代でも引き続き大きな武器になります。</strong></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177026859940758600 cparts-editsite--mainttl" id="cms-editor-textarea-sin177026859940762400">AIOのためのSEOは「AIに伝わる」ことが大前提</h2>
<div class="cms-content-parts-sin177026861818465500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026861818469200">
<p>AIOは、Googleの生成AIがWEB上の情報を読み取り、複数の信頼性あるページから要点を抽出し、ユーザーに分かりやすく要約して表示する機能です。</p>
<p>つまり、AIが正しく読み取れるようなページ構成や情報設計ができていなければ、どれだけ良い内容でも「存在しないもの」として扱われてしまう可能性があります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin177026868536273300 cparts-editsite--mainttl" id="cms-editor-textarea-sin177026868536317900">これからのSEOで大切になるポイント</h3>
<div class="cms-content-parts-sin177026889621365600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026889621369700">
<p>かつてのような、「キーワードをたくさん入れるだけの対策」や「とにかく被リンクを集めるような手法」は、AIOには通用しません。</p>
<p>その代わりに求められるのは、ユーザーの疑問に対して丁寧かつ構造的に情報を伝える姿勢です。<br />
これは、AIにもユーザーにも親切なWEBコンテンツを作るという意味で、今後のSEOはより本質的なものになったと言えるでしょう。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026873835944400 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin177026873835954200">
<table dir="ltr">
    <tbody>
        <tr>
            <th><strong>重要な要素</strong></th>
            <td>なぜ重要？</td>
        </tr>
        <tr>
            <th><strong>見出し構造（Hタグ）</strong></th>
            <td>AIが情報の階層を理解しやすくなる</td>
        </tr>
        <tr>
            <th><strong>FAQや箇条書きの活用</strong></th>
            <td>情報の要点が明確で、要約に使われやすい</td>
        </tr>
        <tr>
            <th><strong>一次情報・専門的内容</strong></th>
            <td>信頼性の高い情報源として評価されやすい</td>
        </tr>
        <tr>
            <th><strong>定期的な更新</strong></th>
            <td>情報の鮮度はAIが重要視する指標の一つ</td>
        </tr>
        <tr>
            <th><strong>メタ情報（タイトル・説明文）</strong></th>
            <td>検索意図とのマッチ度を高めることでAIOの参照対象に</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177026893740344500 cparts-editsite--mainttl" id="cms-editor-textarea-sin177026893740348300">ant2 CMSでの具体的なAIO対策・活用方法</h2>
<div class="cms-content-parts-sin177026895118125800 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026895118129600">
<p>従来のSEOからAIOという新しい検索体験に変わっても、ページ構成の最適化、FAQブロックの設置、定期的な記事更新、専門性の高いブログコンテンツなど、ant2 CMSでも実現可能な施策がたくさんあります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026901014995900 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177026901015001500">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177026901015002000">「見出し」でページ構造を整理する</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026901015002200">
<p>H1・H2・H3などの見出しタグは、AIが内容を理解するのにとても大切です。<br />
例：<br />
H1：犬のしつけ方<br />
└H2：基本のしつけ3つ<br />
└H3：おすわりの教え方</p>
<p>ant2 CMSでは、コンテンツパーツでいろいろなデザインの見出しを入れることができます。<br />
<img src="https://ant2.net/images/magazine/2026/02/images2026020514251768.png" width="1280" height="776" alt="「見出し」でページ構造を整理する" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026923210318600 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177026923210261700">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177026923210269900">よくある質問（FAQ）を作成する</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026923210276700">
<p>FAQ形式は、AIに好まれる情報スタイルです。<br />
ant2 CMSでは、コンテンツパーツで質問と答えの形式をすぐに作成できます。<br />
オンラインショップ用、クリニック用、スクール用などそれぞれに合わせたコンテンツパーツもご用意しています。</p>
<p><img src="https://ant2.net/images/magazine/2026/02/images2026020514251892.png" width="1280" height="775" alt="よくある質問（FAQ）を作成する" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026916271965500 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177026916271906800">03</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177026916271915000">ページの説明文をしっかり書く（メタタグ）</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026916271921900">
<p>GoogleやAIは、「ページタイトル（タイトルタグ）」と「説明文（メタディスクリプション）」を最初に読みます。<br />
従来のSEOと同じくメタタグを記入することが大切になってきます。<br />
ant2 CMSでは、コンテンツパーツ「設定」＞「SEO対策」＞「メタタグの設定」から設定できます。</p>
<p><img src="https://ant2.net/images/magazine/2026/02/images2026020514252050.png" width="1280" height="1006" alt="ページの説明文をしっかり書く（メタタグ）" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177026935825432800 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin177026935825376500">04</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin177026935825385800">画像に説明をつける（alt属性）</h3>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026935825392600">
<p>画像にも「説明文（alt）」を入れておくことで、AIが画像の内容を理解できます。<br />
これは視覚障害者のアクセシビリティ対策としても重要です。<br />
ant2 CMSでは、コンテンツパーツ「画像設定」から作成できます。</p>
<p><img src="https://ant2.net/images/magazine/2026/02/images2026020514252384.png" width="1280" height="1006" alt="画像に説明をつける（alt属性）" /></p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177026937326752100 cparts-editsite--mainttl" id="cms-editor-textarea-sin177026937326757100">その他、こんな工夫もおすすめ！</h2>
<div class="cms-content-parts-sin177026952072515300 box parts_text_type02 cparts-id120--04 lay-margin-b--3 lay-padding--2" col-flex="1-4" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177026952072515300 box parts_text_type02 cparts-id120--04 lay-margin-b--3 lay-padding--2" style="padding-right:15px;padding-left:15px;">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026952072517400">
<p style="text-align: center;"><span style="font-size: large;"><strong>実体験を交えた<br />
コラムやブログ</strong></span></p>
<p style="text-align: center;">「経験」重視のAIOで有利に。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026952072517700">
<p style="text-align: center;"><span style="font-size: large;"><strong>専門的な用語を<br />わかりやすく解説</strong></span></p>
<p style="text-align: center;">初心者にも評価されやすい。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026952072517800">
<p style="text-align: center;"><span style="font-size: large;"><strong>動画や図解の活用&#160;</strong></span></p>
<p style="text-align: center;">内容理解をサポートし、<br />
信頼感UP。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177026952072518100">
<p style="text-align: center;"><span style="font-size: large;"><strong>地域密着情報を強化</strong></span></p>
<p style="text-align: center;">ローカル検索に強く、<br />
AIにも拾われやすい。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177026986236780800 cparts-editsite--mainttl" id="cms-editor-textarea-sin177026986236789000">AIOに載るために気をつけたいこと</h2>
<div class="cms-content-parts-sin177027021712323600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin177027021712323600 cparts-id119 lay-margin-b--3 box" style="margin-bottom:16px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177027021712327500">
<ul>
    <li>無理にキーワードを詰め込みすぎない</li>
    <li>ほかサイトのコピーや転載をしない</li>
    <li>誤情報・古い情報を載せない</li>
    <li>アフィリエイトリンクばかりのページは避ける</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177027007139824900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177027007139827400">
<div>「AIに親切なサイト」は、結果として「人にも親切なサイト」になります。</div>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin177027028239616200 cparts-editsite--mainttl" id="cms-editor-textarea-sin177027028239624500"><strong>まとめ</strong></h2>
<div class="cms-content-parts-sin177027030173702400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177027030173706400">
<p>AIO（AI Overviews）は、Google検索の新しい姿です。<br />
これからは、「人に見せる」だけでなく、「AIに読まれる」ことも意識したサイトづくりが求められます。</p>
<p>ant2 CMSには、AIO対策に役立つ便利な機能がたくさん用意されています。<br />
見出しの整理、FAQ作成、ページ情報の設定、定期更新など、今日から少しずつ取り組んでいきましょう。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin177027033411588700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin177027033411634000">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/01/21988/">
<title>実は簡単！フォームの使い分けでお問い合わせ対応がもっとスムーズに</title>
<link>https://ant2.net/magazine/2026/01/21988/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は、「実は簡単！フォームの使い分けでお問い合わせ対応がもっとスムーズに」というテーマでお届けいたします。
WEBサイトの運用において、「お問い合わせフォーム」は欠かせない存在です。
しかし、お問い合わせが一箇所に集中してしまい、社内での振り分けや対応に手間取ってしまう&#8230;&#8230;というご相談をよくいただきます。
実は、ant2 CMSの「フォーム機能」を上手に使い分けることで、お問い合わせ対応をぐっと効率化できるのです。






サイト運用をフォームで解消！




WEBサイトに訪れたユーザーの中には、「ちょっと質問してみたい」「資料を取り寄せたい」「応募したい」といったニーズを持つ方が多くいます。
しかし、1つのお問い合わせフォームしか用意されていないと、以下のような問題が発生しがちです。

 お問い合わせ内容が不明確で、部署ごとの対応に時間がかかる
 本来なら獲得できたリード（見込み客）が離脱してしまう
 担当者によって返信対応にばらつきが出る





フォームを使い分けるメリットとは？




1つの「お問い合わせフォーム」だけでは、内容が曖昧で、誰が対応すべきかわからなくなるケースが多くなります。
しかし、目的別にフォームを分けて設置することで、以下のようなメリットが生まれます。








担当部署への自動振り分けが可能になる




必要な情報をあらかじめ取得できるため、
やり取りの手間が減る




ユーザーも迷わずお問い合わせでき、
ストレスが軽減される




どんなフォームを用意すべき？




WEBサイトを運営するうえで、訪問ユーザーの目的に合った複数の専用フォームを設けることが、お問い合わせ対応の効率化と機会損失の防止につながります。









 
 
 フォームの種類
 概要・活用シーン
 特徴的・活用に有効な項目
 
 
 資料請求フォーム
 
 
 カタログ・パンフレットのダウンロード申し込みに使用
 製品やサービスに興味を持った方の情報収集段階で活用
 
 
 
 
 資料請求のきっかけ（WEB広告・SNS・検索など）
 興味のある製品・サービス名
 今後の導入時期（すぐに・3ヶ月以内・半年以上先）
 
 
 
 
 採用エントリーフォーム
 
 
 応募希望者の基本情報、職歴、志望動機などを事前に取得
 ファイル添付で履歴書・職務経歴書の受け取りも可能
 
 
 
 
 希望職種・ポジション（選択式）
 志望動機・自己PR（自由記入）
 職務経歴の概要- 履歴書／職務経歴書（ファイル添付）
 
 
 
 
 商品・サービスお問い合わせフォーム
 
 
 商品カテゴリーごとに設けると、対応部署へ自動で振り分けやすい
 お問い合わせ項目に「製品名」「型番」などを設定することでやり取りがスムーズに
 
 
 
 
 製品名・型番（選択または自由記入）
 お問い合わせの種類（価格・仕様・導入相談など）
 用途・導入予定時期- ご利用予定の業種／現在のご利用環境
 
 
 
 
 サポート依頼フォーム
 
 
 購入後のお問い合わせ専用フォーム
 注文番号や不具合の内容など、確認に必要な情報を事前に入力してもらう
 
 
 
 
 注文番号・製品番号
 ご利用中の製品名・型番
 不具合の内容・症状、発生時期・頻度
 添付ファイル（エラー画面や写真など）
 希望する対応方法（メール・電話など）
 
 
 
 





ant2 CMSでのフォーム作成・活用方法




ant2 CMSでは、管理画面から複数のフォームを自由に作成・設置することができます。
ここでは、基本的なフォーム作成方法と便利な活用ポイントをご紹介します。




ステップ1：フォームページ作成



01


コントロールパネルメニューの「コンテンツ管理」＞「ページリスト」から「同じ階層にコンテンツを追加」をクリック









02


「タイトル」と「URL」を入力し、種類「メールフォーム」を選択し、保存









03


「新しいフォーム作成」か「既存フォームを複製して作成」か選択し、再度保存






ステップ2：フォーム内容作成



01


作成したフォームページで「メニュー」をクリックし、「メールフォーム」＞「設問の追加」をクリック









02


入力項目の追加（名前、メールアドレス、お問い合わせ内容など）

必須設定や回答形式、プレースホルダーなども自由に設定可能です。
※ 入力チェック機能（半角英数のみ、メール形式など）も充実しており、ユーザー入力のミス防止にも役立ちます。





ステップ3：メール設定と通知の最適化




フォーム送信後にユーザーへ送信される自動返信メールの内容もカスタマイズ可能です。
「ありがとうございます。●●についてのご連絡を承りました。」など、フォームごとに内容を分けておくことで、より丁寧な印象を与えることができます。




自動返信メールの設定




件名・本文ともにカスタマイズ可能です。
フォームの種類に応じたテンプレートを用意しておくと便利です。







01


「メニュー」をクリックし、「メールフォーム」＞「メールフォームの設定」をクリック









02


「全般設定」タブ＞「メールの設定」から自動返信メールの設定ができます。






管理者通知メールの設定




担当者別に通知先メールアドレスを指定可能です。
「複数メールアドレスの指定」も可能なので、チーム全体での情報共有にも対応できます。





その他メールフォームでできる4つのこと



1受付日時や定員のカスタマイズ


フォームを公開していても、指定の期間外には送信できないように制御されます。
また、イベントや体験会、限定キャンペーンなど、参加人数に制限のある企画でも安心して運用できます。
「メールフォーム」＞「メールフォームの設定」＞「全般設定」タブ＞「受付設定」から設定ができます。



2フォーム送信前後のページ最適化


フォーム送信前後のページに入れたいテキストや画像を入れることができます。
「メールフォーム」＞「メールフォームの設定」＞「ページ」タブ
例）フォーム送信後の完了画面（サンクスページ）に

 関連資料のダウンロードリンク
 次のアクション誘導（例：公式LINE登録、ブログ閲覧）
 クーポン表示などの特典提示

を設けることで、ユーザーとの関係性構築がより深まります。







3データの保存、CSV出力


すべてのフォームはデータを保存するかどうかを選択でき、保存したデータはCSVで出力可能です。
たとえば、資料請求の件数や応募者数などを月次でまとめて集計する際にも便利です。
「メールフォーム」＞「データ一覧」
※「全般設定」＞「データの保存 」で「サーバーに保存する」に変更するとデータが保持されます。



4スパム対策


reCAPTCHAの設定や連続送信制限でスパム投稿を防止できます。
「メールフォーム」＞「メールフォームの設定」＞「全般設定」タブから設定ができます。




まとめ




ant2 CMSには、お問い合わせフォームを「ただ設置するだけ」で終わらせないための機能が豊富に搭載されています。
以下のようなポイントを押さえることで、お問い合わせ対応のスピードと質が向上し、ユーザー満足度の高いサイト運営が可能になります。

 フォームを目的別に分けて、ユーザー・管理者双方にとって使いやすく
 自動返信・通知設定で情報共有をスムーズに
 サンクスページやCSV出力などの応用でマーケティングにも活用
 セキュリティ対策も標準で安心

フォームをただの「窓口」にするのではなく、「価値を生む接点」として活用するために、今一度、フォーム運用を見直してみませんか？
お気軽にアントアントまでお問い合わせください。
今後も、みなさまのサイト運営をサポートするための情報をお届けしてまいります。








デモ登録はこちら




</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-01-28T00:00:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin176956910106888200" class="cms-content-parts-sin176956910106896600">
<div id="cms-editor-minieditor-sin176913657760480400" class="cms-content-parts-sin176913657760487500">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>今回は、「実は簡単！フォームの使い分けでお問い合わせ対応がもっとスムーズに」というテーマでお届けいたします。<br />
WEBサイトの運用において、「お問い合わせフォーム」は欠かせない存在です。<br />
しかし、お問い合わせが一箇所に集中してしまい、社内での振り分けや対応に手間取ってしまう&#8230;&#8230;というご相談をよくいただきます。<br />
実は、ant2 CMSの「フォーム機能」を上手に使い分けることで、お問い合わせ対応をぐっと効率化できるのです。</p>
</div>
<div class="cms-content-parts-sin176913666482578100 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin176913666482581800" class="cparts-editsite--img cms-easy-edit" alt="実は簡単！フォームの使い分けでお問い合わせ対応がもっとスムーズに" src="https://ant2.net/images/magazine/2026/01/images2026012611424032.jpg" width="675" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin176913667886956500 cparts-editsite--mainttl" id="cms-editor-textarea-sin176913667886963100">サイト運用をフォームで解消！</h2>
<div class="cms-content-parts-sin176913695180185500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176913695180196700">
<p><span style="font-size: 1.6rem;">WEB</span>サイトに訪れたユーザーの中には、「ちょっと質問してみたい」「資料を取り寄せたい」「応募したい」といったニーズを持つ方が多くいます。<br />
しかし、1つのお問い合わせフォームしか用意されていないと、以下のような問題が発生しがちです。</p>
<ul>
    <li>お問い合わせ内容が不明確で、部署ごとの対応に時間がかかる</li>
    <li>本来なら獲得できたリード（見込み客）が離脱してしまう</li>
    <li>担当者によって返信対応にばらつきが出る</li>
</ul>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176913693441323100 cparts-editsite--mainttl" id="cms-editor-textarea-sin176913693441328500">フォームを使い分けるメリットとは？</h3>
<div class="cms-content-parts-sin176913696739789400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176913696739759500">
<p>1つの「お問い合わせフォーム」だけでは、内容が曖昧で、誰が対応すべきかわからなくなるケースが多くなります。<br />
しかし、目的別にフォームを分けて設置することで、以下のようなメリットが生まれます。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176913677989684300 box parts_text_type02 cparts-id120--03 lay-margin-b--3 lay-padding--2" col-flex="1-3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176913677989688100">
<p style="text-align: center;"><font color="#3b4e9a"><b>担当部署への自動振り分けが可能になる</b></font></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176913677989688500">
<p style="text-align: center;"><font color="#3b4e9a"><b>必要な情報をあらかじめ取得できるため、<br />
やり取りの手間が減る</b></font></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176913677989688700">
<p style="text-align: center;"><font color="#3b4e9a"><b>ユーザーも迷わずお問い合わせでき、<br />
ストレスが軽減される</b></font></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176913713175310800 cparts-editsite--mainttl" id="cms-editor-textarea-sin176913713175321100">どんなフォームを用意すべき？</h3>
<div class="cms-content-parts-sin176913713711985000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176913713711954900">
<p><span style="font-size: 1.6rem;">WEB</span>サイトを運営するうえで、訪問ユーザーの目的に合った複数の専用フォームを設けることが、お問い合わせ対応の効率化と機会損失の防止につながります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176913717430622500 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin176913717430626500">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th style="text-align: center;"><strong>フォームの種類</strong></th>
            <td style="text-align: center;"><strong>概要・活用シーン</strong></td>
            <td style="text-align: center;"><strong>特徴的・活用に有効な項目</strong></td>
        </tr>
        <tr>
            <th>資料請求フォーム</th>
            <td>
            <ul>
                <li>カタログ・パンフレットのダウンロード申し込みに使用</li>
                <li>製品やサービスに興味を持った方の情報収集段階で活用</li>
            </ul>
            </td>
            <td>
            <ul>
                <li>資料請求のきっかけ（WEB広告・SNS・検索など）</li>
                <li>興味のある製品・サービス名</li>
                <li>今後の導入時期（すぐに・3ヶ月以内・半年以上先）</li>
            </ul>
            </td>
        </tr>
        <tr>
            <th>採用エントリーフォーム</th>
            <td>
            <ul>
                <li>応募希望者の基本情報、職歴、志望動機などを事前に取得</li>
                <li>ファイル添付で履歴書・職務経歴書の受け取りも可能</li>
            </ul>
            </td>
            <td>
            <ul>
                <li>希望職種・ポジション（選択式）</li>
                <li>志望動機・自己PR（自由記入）</li>
                <li>職務経歴の概要- 履歴書／職務経歴書（ファイル添付）</li>
            </ul>
            </td>
        </tr>
        <tr>
            <th>商品・サービスお問い合わせフォーム</th>
            <td>
            <ul>
                <li>商品カテゴリーごとに設けると、対応部署へ自動で振り分けやすい</li>
                <li>お問い合わせ項目に「製品名」「型番」などを設定することでやり取りがスムーズに</li>
            </ul>
            </td>
            <td>
            <ul>
                <li>製品名・型番（選択または自由記入）</li>
                <li>お問い合わせの種類（価格・仕様・導入相談など）</li>
                <li>用途・導入予定時期- ご利用予定の業種／現在のご利用環境</li>
            </ul>
            </td>
        </tr>
        <tr>
            <th>サポート依頼フォーム</th>
            <td>
            <ul>
                <li>購入後のお問い合わせ専用フォーム</li>
                <li>注文番号や不具合の内容など、確認に必要な情報を事前に入力してもらう</li>
            </ul>
            </td>
            <td>
            <ul>
                <li>注文番号・製品番号</li>
                <li>ご利用中の製品名・型番</li>
                <li>不具合の内容・症状、発生時期・頻度</li>
                <li>添付ファイル（エラー画面や写真など）</li>
                <li>希望する対応方法（メール・電話など）</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176915469872219900 cparts-editsite--mainttl" id="cms-editor-textarea-sin176915469872228300">ant2 CMSでのフォーム作成・活用方法</h3>
<div class="cms-content-parts-sin176915471346194700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176915471346198600">
<p>ant2 CMSでは、管理画面から複数のフォームを自由に作成・設置することができます。<br />
ここでは、基本的なフォーム作成方法と便利な活用ポイントをご紹介します。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin176915569777063000 cparts-editsite--mainttl" id="cms-editor-textarea-sin176915569777067900">ステップ1：フォームページ作成</h4>
<div class="cms-content-parts-sin176916046694780200 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight ant2oemorg-steplist01" data-original="cms-content-parts-sin176916046694780200 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight" data-custom="ant2oemorg-steplist01">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176916046694784100">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h5 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin176916046694784500">コントロールパネルメニューの「コンテンツ管理」＞「ページリスト」から「同じ階層にコンテンツを追加」をクリック</h5>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176916046694784700">
<p><img src="https://ant2.net/images/magazine/2026/01/images2026012318202523.jpg" width="1280" height="634" alt="ページリスト設定画面" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176916052480607000 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight ant2oemorg-steplist01" data-original="cms-content-parts-sin176916052480607000 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight" data-custom="ant2oemorg-steplist01">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176916052480555400">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h5 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin176916052480563300">「タイトル」と「URL」を入力し、種類「メールフォーム」を選択し、保存</h5>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176916052480575300">
<p><img src="https://ant2.net/images/magazine/2026/01/images2026012317024224.png" width="1280" height="692" alt="メールフォーム設定箇所の説明" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176916058154352600 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight ant2oemorg-steplist01" data-original="cms-content-parts-sin176916058154352600 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight" data-custom="ant2oemorg-steplist01">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176916058154303600">03</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h5 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin176916058154311000">「新しいフォーム作成」か「既存フォームを複製して作成」か選択し、再度保存</h5>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176916058154317200">
<p><img src="https://ant2.net/images/magazine/2026/01/images2026012317024457.png" width="1280" height="692" alt="既存フォームを複製して作成する設定画面" /></p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin176916028815653000 cparts-editsite--mainttl" id="cms-editor-textarea-sin176916028815661000">ステップ2：フォーム内容作成</h4>
<div class="cms-content-parts-sin176916070340053200 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight ant2oemorg-steplist01" data-original="cms-content-parts-sin176916070340053200 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight" data-custom="ant2oemorg-steplist01">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176916070340005400">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h5 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin176916070340013500">作成したフォームページで「メニュー」をクリックし、「メールフォーム」＞「設問の追加」をクリック</h5>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176916070340019800">
<p><img src="https://ant2.net/images/magazine/2026/01/images2026012317025186.png" width="1280" height="652" alt="設問の追加説明" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176916063638056100 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight ant2oemorg-steplist01" data-original="cms-content-parts-sin176916063638056100 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight" data-custom="ant2oemorg-steplist01">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176916063637996500">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h5 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin176916063638008600">入力項目の追加（名前、メールアドレス、お問い合わせ内容など）</h5>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176916063638018200">
<p>必須設定や回答形式、プレースホルダーなども自由に設定可能です。<br />
※ 入力チェック機能（半角英数のみ、メール形式など）も充実しており、ユーザー入力のミス防止にも役立ちます。</p>
<p><img src="https://ant2.net/images/magazine/2026/01/images2026012317024934.png" width="1280" height="1003" alt="入力項目の追加説明" /></p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin176916085706889500 cparts-editsite--mainttl ant2oemorg-steplist01" id="cms-editor-textarea-sin176916085706897600" data-original="cms-content-parts-sin176916085706889500 cparts-editsite--mainttl" data-custom="ant2oemorg-steplist01">ステップ3：メール設定と通知の最適化</h4>
<div class="cms-content-parts-sin176916087471615600 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176916087471624700">
<p>フォーム送信後にユーザーへ送信される自動返信メールの内容もカスタマイズ可能です。<br />
「ありがとうございます。●●についてのご連絡を承りました。」など、フォームごとに内容を分けておくことで、より丁寧な印象を与えることができます。</p>
</div>
</div>
</div>
</div>
<h5 class="cms-content-parts-sin176916089894086800 cparts-editsite--mainttl" id="cms-editor-textarea-sin176916089894090500">自動返信メールの設定</h5>
<div class="cms-content-parts-sin176916092618153800 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176916092618122400">
<p>件名・本文ともにカスタマイズ可能です。<br />
フォームの種類に応じたテンプレートを用意しておくと便利です。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176916096384525300 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight ant2oemorg-steplist01" data-original="cms-content-parts-sin176916096384525300 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight" data-custom="ant2oemorg-steplist01">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176916096384564600">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h5 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin176916096384565300">「メニュー」をクリックし、「メールフォーム」＞「メールフォームの設定」をクリック</h5>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176916096384565500">
<p><img src="https://ant2.net/images/magazine/2026/01/images2026012317023831.png" width="1280" height="1135" alt="メールフォームの設定説明" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176916101296646700 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight ant2oemorg-steplist01" data-original="cms-content-parts-sin176916101296646700 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight" data-custom="ant2oemorg-steplist01">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176916101296593100">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h5 class="cparts-editsite--mainttl cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin176916101296603900">「全般設定」タブ＞「メールの設定」から自動返信メールの設定ができます。</h5>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176916101296613000">
<p><img src="https://ant2.net/images/magazine/2026/01/images2026012317023627.png" width="1280" height="1137" alt="自動返信メールの設定説明" /></p>
</div>
</div>
</div>
</div>
<h5 class="cms-content-parts-sin176916109376487200 cparts-editsite--mainttl" id="cms-editor-textarea-sin176916109376495300" data-original="cms-content-parts-sin176916109376487200 cparts-editsite--mainttl">管理者通知メールの設定</h5>
<div class="cms-content-parts-sin176941989185375300 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176941989185385600">
<p>担当者別に通知先メールアドレスを指定可能です。<br />
「複数メールアドレスの指定」も可能なので、チーム全体での情報共有にも対応できます。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin176941989185396200" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/01/images2026012317024013.png" width="330" /></div>
</div>
</div>
<h4 class="cms-content-parts-sin176916137676443400 cparts-editsite--mainttl" id="cms-editor-textarea-sin176916137676447200">その他メールフォームでできる4つのこと</h4>
<div class="cms-content-parts-sin176916222407366000 cparts-id548-02 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-id548-02__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176916222407375900">1</span><span class="cparts-editsite--mainttl cparts-ttl-block" id="cms-editor-textarea-sin176916222407383100">受付日時や定員のカスタマイズ</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><img id="cms-editor-image-sin176916222407389800" class="cparts-editsite--img" alt="受付日時や定員のカスタマイズ" src="https://ant2.net/images/magazine/2026/01/images2026012317024731.png" title="" name="" /></div>
<div class="cparts-editsite--txt cparts-txt-block lay-margin-t--1 lay-reset-child" id="cms-editor-minieditor-sin176916222407396000">
<p>フォームを公開していても、指定の期間外には送信できないように制御されます。</p>
<p>また、イベントや体験会、限定キャンペーンなど、参加人数に制限のある企画でも安心して運用できます。</p>
<p>「メールフォーム」＞「メールフォームの設定」＞「全般設定」タブ＞「受付設定」から設定ができます。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-id548-02__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176916222407402200">2</span><span class="cparts-editsite--mainttl cparts-ttl-block" id="cms-editor-textarea-sin176916222407408300">フォーム送信前後のページ最適化</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><img id="cms-editor-image-sin176916222407414500" class="cparts-editsite--img" alt="フォーム送信前後のページ最適化" src="https://ant2.net/images/magazine/2026/01/images2026012317024870.png" title="" name="" /></div>
<div class="cparts-editsite--txt cparts-txt-block lay-margin-t--1 lay-reset-child" id="cms-editor-minieditor-sin176916222407420600">
<p>フォーム送信前後のページに入れたいテキストや画像を入れることができます。</p>
<p>「メールフォーム」＞「メールフォームの設定」＞「ページ」タブ<br />
例）フォーム送信後の完了画面（サンクスページ）に</p>
<ul>
    <li>関連資料のダウンロードリンク</li>
    <li>次のアクション誘導（例：公式LINE登録、ブログ閲覧）</li>
    <li>クーポン表示などの特典提示</li>
</ul>
<p>を設けることで、ユーザーとの関係性構築がより深まります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176916223511891300 cparts-id548-02 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-id548-02__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176916223511900200">3</span><span class="cparts-editsite--mainttl cparts-ttl-block" id="cms-editor-textarea-sin176916223511907400">データの保存、CSV出力</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><img id="cms-editor-image-sin176916223511952600" class="cparts-editsite--img" alt="データの保存、CSV出力" src="https://ant2.net/images/magazine/2026/01/images2026012317024649.png" title="" name="" /></div>
<div class="cparts-editsite--txt cparts-txt-block lay-margin-t--1 lay-reset-child" id="cms-editor-minieditor-sin176916223511959400">
<p>すべてのフォームはデータを保存するかどうかを選択でき、保存したデータはCSVで出力可能です。</p>
<p>たとえば、資料請求の件数や応募者数などを月次でまとめて集計する際にも便利です。</p>
<p>「メールフォーム」＞「データ一覧」</p>
<p>※「全般設定」＞「データの保存 」で「サーバーに保存する」に変更するとデータが保持されます。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<h4 class="cparts-id548-02__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176916223511968900">4</span><span class="cparts-editsite--mainttl cparts-ttl-block" id="cms-editor-textarea-sin176916223511977900">スパム対策</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><img id="cms-editor-image-sin176916223511985300" class="cparts-editsite--img" alt="ダイアログでのスパム対策の設定" src="https://ant2.net/images/magazine/2026/01/images2026012318584823.png" title="" name="" /></div>
<div class="cparts-editsite--txt cparts-txt-block lay-margin-t--1 lay-reset-child" id="cms-editor-minieditor-sin176916223511997400">
<p>reCAPTCHAの設定や連続送信制限でスパム投稿を防止できます。</p>
<p>「メールフォーム」＞「メールフォームの設定」＞「全般設定」タブから設定ができます。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin176916203706557300 cparts-editsite--mainttl" id="cms-editor-textarea-sin176916203706567600">まとめ</h4>
<div class="cms-content-parts-sin176916205674708000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176916205674716800">
<p>ant2 CMSには、お問い合わせフォームを「ただ設置するだけ」で終わらせないための機能が豊富に搭載されています。<br />
以下のようなポイントを押さえることで、お問い合わせ対応のスピードと質が向上し、ユーザー満足度の高いサイト運営が可能になります。</p>
<ul>
    <li>フォームを目的別に分けて、ユーザー・管理者双方にとって使いやすく</li>
    <li>自動返信・通知設定で情報共有をスムーズに</li>
    <li>サンクスページやCSV出力などの応用でマーケティングにも活用</li>
    <li>セキュリティ対策も標準で安心</li>
</ul>
<p>フォームをただの「窓口」にするのではなく、「価値を生む接点」として活用するために、今一度、フォーム運用を見直してみませんか？</p>
<p>お気軽にアントアントまでお問い合わせください。<br />
今後も、みなさまのサイト運営をサポートするための情報をお届けしてまいります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176941983721588000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176941983721591900">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2026/01/21987/">
<title>GmailでのPOP受信サポート終了の影響と解決方法</title>
<link>https://ant2.net/magazine/2026/01/21987/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は、「GmailでのPOP受信サポート終了の影響と解決方法」をテーマにお届けいたします。
Gmailの外部メールアカウントのPOPサポート終了は、セキュリティ強化を目的としたものですが、
これまでGmailを使って会社や独自ドメインのメールアドレスを一元管理していた方にとっては、日々の業務に大きな影響があります。
「急にメールが届かなくなった」
「Outlookなどのメールソフトに戻ると不便すぎる」
「引き続きGmailの同じ画面を見るにはどうすればいいの？」
現在、多くのユーザーの現場でこうした不安や混乱の声が広がっています。
今回は、Gmailの「外部メールアカウントのPOP受信」機能のサポート終了に伴い、
みなさまのメール運用にどのような影響があるのか、どう対応すればよいかについて詳しくご案内いたします。






GmailのPOP受信機能がサポート終了へ




Googleは2025年12月31日をもって、Gmailに外部メールアカウント（独自ドメインのメールなど）をPOP経由で取り込む機能の提供を終了しました。
【Gmail の Gmailify と POP の今後の変更について】




Gmail【外部メールアカウント設定箇所】





下記設定をされている場合

 Gmailアカウント1つで、複数のメールアドレス（例：info@○○.comやcontact@△△.jpなど）をまとめて受信している
 Gmailの「設定」&#8594;「アカウントとインポート」からほかのメールアドレスを追加している
 Gmailの画面だけで、すべてのメールを確認・返信していた

この機能はPOP（Post Office Protocol）というメール受信の仕組みを利用しており、今回そのPOPによる外部メールの取り込みが終了したため、上記のような使い方ができなくなっています。




POPってなに？




POP（Post Office Protocol）
メールにおけるPOPとは、メールサーバーに届いたメールをパソコンやスマホなどの端末にダウンロードして受信・管理する方式のことです。
「郵便局（Post Office）から手紙を持ち帰る」ようなイメージで、一度ダウンロードするとサーバーからは削除される（設定で残すことも可能）ため、オフラインでも過去のメールが読めるのが特徴です。



POP方式の仕組みと特徴






ダウンロード方式
サーバー上のメールをローカル（端末）にダウンロードします。







オフライン閲覧
ダウンロード済みのメールはインターネット接続なしでも閲覧可能です。







端末依存
メールはダウンロードした端末に保存されるため、ほかの端末では見られません。









端末容量が許す限り大量のメールを保存してオフラインで読めるメリットがある一方で、デメリットとして複数端末での利用には不向きで、端末故障時にメールが失われるリスクもあります。




Gmail POP受信終了で「実際に起こること」



以前までの状態


 Gmailから独自ドメインのメールを受信できた
 Gmailアプリで一括管理していた
 自動でメールを取り込み、確認・返信できた




2026年1月以降の状態


 受信できなくなる（新着メールが届かない）
 一括管理ができなくなる
 Gmail上での確認・返信ができないため、別手段が必要









「PCのWEBブラウザでGmailを開いても、新しい会社のメールが届かなくなる」ということです。
スマホアプリ版ではIMAP接続を行うこともできますが、デスクワークでPCのGmail画面を愛用していた方にとっては、業務フローが根底から崩れる事態となります。
では、今後どうすれば良いのでしょうか？




代替策1：「メールソフト」に戻る（Outlook / Thunderbird等）




もっとも手軽な方法の一つは、Gmailの利用をやめ、PCにインストールされたメールソフトに戻ることです。







メリット


・追加コスト不要
OutlookやThunderbirdなどの無料ソフトを使用すれば、費用はかかりません。　
・サーバー変更不要
現在契約中のレンタルサーバーをそのまま使えます。




デメリット

・Gmailの便利な画面が使えない
タブ切替・高速検索・スレッド表示などの機能がなくなります。
・検索効率が大幅に低下
Gmailのような高速検索ができず、過去メールの検索に時間がかかります。
・データ消失のリスク
メールがPC内に保存されるため、PCが故障した際にメールも消えてしまう可能性があります。
・スマホとの同期不全
「スマホで送ったメールが、PCでは見えない」といった同期ズレが発生することがあります。




代替策2：「転送設定」でGmailに送る




「どうしてもGmailの画面で見たい」という方がよく検討されるのが、レンタルサーバーで届いたメールをGmailへ自動転送するという方法です。







メリット


・Gmailの受信トレイでメールが確認できる
従来通りメールを確認できるため、操作感が変わりません。




決定的なデメリット
（ビジネス利用では非推奨）

・メール不達・消失リスク
最近のGoogleをはじめとしたメールサービスは、なりすましメール対策を強化しており、転送メールが「なりすまし」と判断されるケースが増えています。
・迷惑メールの連続転送による評価低下
転送元のサーバー評価が下がり、重要な取引先からのメールまでが「迷惑メール」に振り分けられる、あるいは届かないリスクがあります。
特に「大切な見積もり依頼が相手から届いていなかった」という事故につながる可能性があるため、安易なメール転送は避けていただくことを強くおすすめします。




解決策：「Google Workspace」への移行（最も推奨）




最も安全かつ業務に適した方法が、Google Workspaceへの移行です。
これは、「今のメールをGmailで取り込む」のではなく、会社のメールシステム全体をGmail（Google）側に移す方法です。







メリット


・WEB版Gmailをそのまま使える
操作画面は今まで通りでスムーズに移行できます。
・リアルタイム受信が可能
POP方式特有のタイムラグもなく、即時にメールが届きます。
・複雑な設定が不要
POPやIMAPのサーバー設定、パスワード更新などの煩わしさから解放されます。
・PC・スマホで常に同期
どの端末からも同じメールが見られ、送受信履歴も一致します。
・ビジネスレベルの信頼性とセキュリティ
Googleが提供する堅牢なインフラにより、安定した運用が可能です。




デメリット

・コストが発生する
無料ではなく、ユーザー数に応じた月額または年額の利用料がかかります。




対応策の比較





 
 
 
 メールソフトへ戻る
 「転送設定」でGmailに送る
 Google Workspace
 
 
 使い慣れたGmailの画面が使えるか
 ✕
 使用不可
 〇
 表面的には可能
 ◎
 継続利用可能
 
 
 PCブラウザでの操作
 ✕
 メールソフト必須
 〇
 Gmail画面で閲覧可能
 ◎
 今まで通りの画面を継続
 
 
 メールの到達信頼性
 〇
 高い
 ✕
 転送で不達・遅延のリスク
 ◎
 ビジネスクラスの安定性
 
 
 セキュリティの強さ
 △
 PC依存・バックアップ必須
 ✕
 なりすまし扱いの危険あり
 ◎
 Googleの法人向けセキュリティ
 
 
 導入・運用コスト
 無料
 無料
 有料
 
 
 推奨度（総合評価）
 △
 ✕
 ◎
 
 





まとめ




2025年12月31日をもって、Gmailの外部メールアカウントに対するPOP受信機能が終了し、従来の「Gmailで会社のメールを一括管理する」方法が使えなくなりました。
この変更により、Gmailでメールが届かない、見られない、送れないといったトラブルが起こっています。
今後の運用方法としては、

 メールソフトに戻る（最低限の対応だが操作性に課題あり）
 転送設定でGmailに送る（非推奨：不達リスクが高い）
 Google Workspaceへ移行（操作性・安定性・セキュリティの観点から最も推奨）

特に、業務でGmailを使い慣れている方にとっては、Google Workspaceへの移行が、今まで通りの使い勝手を維持できる安心な方法です。
本記事の内容を参考に、今後の運用方法については自社の方針に基づきご判断・ご対応いただきますようお願いいたします。








デモ登録はこちら




</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2026-01-13T00:00:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin176829109360489200" class="cms-content-parts-sin176829109360497800">
<div id="cms-editor-minieditor-sin176680335729739100" class="cms-content-parts-sin176680335729746900">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>今回は、「GmailでのPOP受信サポート終了の影響と解決方法」をテーマにお届けいたします。<br />
Gmailの外部メールアカウントのPOPサポート終了は、セキュリティ強化を目的としたものですが、<br />
これまでGmailを使って会社や独自ドメインのメールアドレスを一元管理していた方にとっては、日々の業務に大きな影響があります。</p>
<p>「急にメールが届かなくなった」<br />
「Outlookなどのメールソフトに戻ると不便すぎる」<br />
「引き続きGmailの同じ画面を見るにはどうすればいいの？」</p>
<p>現在、多くのユーザーの現場でこうした不安や混乱の声が広がっています。</p>
<p>今回は、Gmailの「外部メールアカウントのPOP受信」機能のサポート終了に伴い、<br />
みなさまのメール運用にどのような影響があるのか、どう対応すればよいかについて詳しくご案内いたします。</p>
</div>
<div class="cms-content-parts-sin176680353002695600 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img id="cms-editor-image-sin176680353002699300" class="cparts-editsite--img cms-easy-edit" alt="" src="https://ant2.net/images/magazine/2026/01/images2026010918095225.jpg" width="675" title="" name="" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin176680355877392600 cparts-editsite--mainttl" id="cms-editor-textarea-sin176680355877395300">GmailのPOP受信機能がサポート終了へ</h2>
<div class="cms-content-parts-sin176680358399207200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176680358399210900">
<p>Googleは2025年12月31日をもって、Gmailに外部メールアカウント（独自ドメインのメールなど）をPOP経由で取り込む機能の提供を終了しました。<br />
<a href="https://support.google.com/mail/answer/16604719?hl=ja" target="_blank">【Gmail の Gmailify と POP の今後の変更について】</a></p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176680370124599800 cparts-editsite--mainttl" id="cms-editor-textarea-sin176680370124603600">Gmail【外部メールアカウント設定箇所】</h3>
<div class="cms-content-parts-sin176680402607577800 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176680402607577800 box cparts-id437--01 lay-margin-b--3">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img id="cms-editor-image-sin176680402607588700" class="cparts-editsite--img cms-easy-edit" alt="Gmailアカウント追加画面" src="https://ant2.net/images/magazine/2026/01/images2025122712032826.png" width="330" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176680402607596100">
<p>下記設定をされている場合</p>
<ul>
    <li>Gmailアカウント1つで、複数のメールアドレス（例：info@○○.comやcontact@△△.jpなど）をまとめて受信している</li>
    <li>Gmailの「設定」&#8594;「アカウントとインポート」からほかのメールアドレスを追加している</li>
    <li>Gmailの画面だけで、すべてのメールを確認・返信していた</li>
</ul>
<p>この機能はPOP（Post Office Protocol）というメール受信の仕組みを利用しており、今回そのPOPによる外部メールの取り込みが終了したため、上記のような使い方ができなくなっています。</p>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin176680476081271800 cparts-editsite--mainttl" id="cms-editor-textarea-sin176680476081318200">POPってなに？</h2>
<div class="cms-content-parts-sin176680481109553000 box cparts-id439--02 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="clearfix">
<div class="cparts-img-block lay-margin-b--3 lay-margin-r--3 lay-img-float--left"><img id="cms-editor-image-sin176680481109563100" class="cparts-editsite--img cms-easy-edit" alt="POP（Post Office Protocol）" src="https://ant2.net/images/magazine/2026/01/1720405338_960.jpg" width="215" title="" name="" /></div>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin176680481109570700">
<p><span style="font-size: large;"><strong>POP（Post Office Protocol）</strong></span><br />
メールにおけるPOPとは、メールサーバーに届いたメールをパソコンやスマホなどの端末にダウンロードして受信・管理する方式のことです。<br />
「郵便局（Post Office）から手紙を持ち帰る」ようなイメージで、一度ダウンロードするとサーバーからは削除される（設定で残すことも可能）ため、オフラインでも過去のメールが読めるのが特徴です。</p>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176680484262807300 cparts-editsite--mainttl" id="cms-editor-textarea-sin176680484262813000">POP方式の仕組みと特徴</h3>
<div class="cms-content-parts-sin176774857222401300 cparts-id535--03 lay-margin-b--3 box" col-flex="1-3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-body-block dec-bg--light">
<div class="cparts-img-block lay-img-width--max"><img id="cms-editor-image-sin176774857222411700" class="cparts-editsite--img" alt="" src="https://ant2.net/images/magazine/2026/01/images2026010617083993.jpg" /></div>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child lay-padding--1" id="cms-editor-minieditor-sin176774857222419400">
<h4 style="text-align: center;">ダウンロード方式</h4>
<p>サーバー上のメールをローカル（端末）にダウンロードします。</p>
</div>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-body-block dec-bg--light">
<div class="cparts-img-block lay-img-width--max"><img id="cms-editor-image-sin176774857222426500" class="cparts-editsite--img" alt="" src="https://ant2.net/images/magazine/2026/01/images2026010617084017.jpg" /></div>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child lay-padding--1" id="cms-editor-minieditor-sin176774857222433500">
<h4 style="text-align: center;">オフライン閲覧</h4>
<p>ダウンロード済みのメールはインターネット接続なしでも閲覧可能です。</p>
</div>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-body-block dec-bg--light">
<div class="cparts-img-block lay-img-width--max lay-img-width--max"><img id="cms-editor-image-sin176774857222440200" class="cparts-editsite--img" alt="" src="https://ant2.net/images/magazine/2026/01/images2026010617084025.jpg" /></div>
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child lay-padding--1" id="cms-editor-minieditor-sin176774857222446800">
<h4 style="text-align: center;">端末依存</h4>
<p>メールはダウンロードした端末に保存されるため、ほかの端末では見られません。</p>
</div>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176680514212088500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176680514212160600">
<p>端末容量が許す限り大量のメールを保存してオフラインで読めるメリットがある一方で、デメリットとして複数端末での利用には不向きで、端末故障時にメールが失われるリスクもあります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176680518562826900 cparts-editsite--mainttl" id="cms-editor-textarea-sin176680518562835600" data-original="cms-content-parts-sin176680518562826900 cparts-editsite--mainttl">Gmail POP受信終了で「実際に起こること」</h3>
<div class="cms-content-parts-sin176774750987076900 cparts-id223 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176774750987076900 cparts-id223 box lay-margin-b--3" style="padding-right:15px;padding-left:15px;">
<div class="lay-row">
<div class="cparts-txt-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;background: #f6f8ff;">
<h4 class="cparts-editsite--mainttl cparts-id223__ttl" id="cms-editor-textarea-sin176774750987080900 " style="text-align: center;">以前までの状態</h4>
<div class="cparts-editsite--txt cparts-notes-block lay-reset-child" id="cms-editor-minieditor-sin176774750987081300">
<ul>
    <li>Gmailから独自ドメインのメールを受信できた</li>
    <li>Gmailアプリで一括管理していた</li>
    <li>自動でメールを取り込み、確認・返信できた</li>
</ul>
</div>
</div>
<div class="cparts-txt-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;background: #ffe8ef;">
<h4 class="cparts-editsite--mainttl cparts-id223__ttl" id="cms-editor-textarea-sin176774750987081500 " style="text-align: center;">2026年1月以降の状態</h4>
<div class="cparts-editsite--txt cparts-notes-block lay-reset-child" id="cms-editor-minieditor-sin176774750987081700">
<ul>
    <li>受信できなくなる（新着メールが届かない）</li>
    <li>一括管理ができなくなる</li>
    <li>Gmail上での確認・返信ができないため、別手段が必要</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176680556207078900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176680556207083600">
<p>「PCのWEBブラウザでGmailを開いても、新しい会社のメールが届かなくなる」ということです。<br />
スマホアプリ版ではIMAP接続を行うこともできますが、デスクワークでPCのGmail画面を愛用していた方にとっては、業務フローが根底から崩れる事態となります。</p>
<p>では、今後どうすれば良いのでしょうか？</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176758659959644300 cparts-editsite--mainttl" id="cms-editor-textarea-sin176758659959652100">代替策1：「メールソフト」に戻る（Outlook / Thunderbird等）</h3>
<div class="cms-content-parts-sin176758662071817300 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176758662071817300 cparts-id119 lay-margin-b--3 box">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176758662071821000">
<p>もっとも手軽な方法の一つは、Gmailの利用をやめ、PCにインストールされたメールソフトに戻ることです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176774818981034000 cparts-id223 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176774818981034000 cparts-id223 box lay-margin-b--3" style="padding-right:15px;padding-left:15px;">
<div class="lay-row">
<div class="cparts-txt-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;background: #f6f8ff;">
<h4 class="cparts-editsite--mainttl cparts-id223__ttl" id="cms-editor-textarea-sin176774818980955900 " style="text-align: center;">メリット</h4>
<div class="cparts-editsite--txt cparts-notes-block lay-reset-child" id="cms-editor-minieditor-sin176774818980964200">
<div>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・追加コスト不要</span><br />
OutlookやThunderbirdなどの無料ソフトを使用すれば、費用はかかりません。　</p>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・サーバー変更不要</span><br />
現在契約中のレンタルサーバーをそのまま使えます。</p>
</div>
</div>
</div>
<div class="cparts-txt-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;background: #ffe8ef;">
<h4 class="cparts-editsite--mainttl cparts-id223__ttl" id="cms-editor-textarea-sin176774818980971100 " style="text-align: center;">デメリット</h4>
<div class="cparts-editsite--txt cparts-notes-block lay-reset-child" id="cms-editor-minieditor-sin176774818980977700">
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・Gmailの便利な画面が使えない</span><br />
タブ切替・高速検索・スレッド表示などの機能がなくなります。</p>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・検索効率が大幅に低下</span><br />
Gmailのような高速検索ができず、過去メールの検索に時間がかかります。</p>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・データ消失のリスク</span><br />
メールがPC内に保存されるため、PCが故障した際にメールも消えてしまう可能性があります。</p>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・スマホとの同期不全</span><br />
「スマホで送ったメールが、PCでは見えない」といった同期ズレが発生することがあります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176758691295995300 cparts-editsite--mainttl" id="cms-editor-textarea-sin176758691296003500">代替策2：「転送設定」でGmailに送る</h3>
<div class="cms-content-parts-sin176758691717449400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176758691717449400 cparts-id119 lay-margin-b--3 box">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176758691717418400">
<p>「どうしてもGmailの画面で見たい」という方がよく検討されるのが、レンタルサーバーで届いたメールをGmailへ自動転送するという方法です。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176774796617055800 cparts-id223 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176774796617055800 cparts-id223 box lay-margin-b--3" style="padding-right:15px;padding-left:15px;">
<div class="lay-row">
<div class="cparts-txt-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;background: #f6f8ff;">
<h4 class="cparts-editsite--mainttl cparts-id223__ttl" id="cms-editor-textarea-sin176774796616980600 " style="text-align: center;">メリット</h4>
<div class="cparts-editsite--txt cparts-notes-block lay-reset-child" id="cms-editor-minieditor-sin176774796616990600">
<div>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・Gmailの受信トレイでメールが確認できる</span><br />
従来通りメールを確認できるため、操作感が変わりません。</p>
</div>
</div>
</div>
<div class="cparts-txt-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;background: #ffe8ef;">
<h4 class="cparts-editsite--mainttl cparts-id223__ttl" id="cms-editor-textarea-sin176774796616998300 " style="text-align: center;">決定的なデメリット<br />
（ビジネス利用では非推奨）</h4>
<div class="cparts-editsite--txt cparts-notes-block lay-reset-child" id="cms-editor-minieditor-sin176774796617007900">
<p><span style="font-weight: 700; color: rgb(59, 78, 154);"><span style="color: rgb(255, 0, 0);">・メール不達・消失リスク</span></span><br />
最近のGoogleをはじめとしたメールサービスは、なりすましメール対策を強化しており、転送メールが「なりすまし」と判断されるケースが増えています。</p>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・迷惑メールの連続転送による評価低下</span><br />
転送元のサーバー評価が下がり、重要な取引先からのメールまでが「迷惑メール」に振り分けられる、あるいは届かないリスクがあります。</p>
<p>特に「大切な見積もり依頼が相手から届いていなかった」という事故につながる可能性があるため、安易なメール転送は避けていただくことを強くおすすめします。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176758726232504300 cparts-editsite--mainttl" id="cms-editor-textarea-sin176758726232512400" data-original="cms-content-parts-sin176758726232504300 cparts-editsite--mainttl">解決策：「Google Workspace」への移行（最も推奨）</h3>
<div class="cms-content-parts-sin176758726439371900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176758726439371900 cparts-id119 lay-margin-b--3 box">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176758726439348000">
<p>最も安全かつ業務に適した方法が、Google Workspaceへの移行です。<br />
これは、「今のメールをGmailで取り込む」のではなく、会社のメールシステム全体をGmail（Google）側に移す方法です。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176774829985330800 cparts-id223 box lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176774829985330800 cparts-id223 box lay-margin-b--3" style="padding-right:15px;padding-left:15px;">
<div class="lay-row">
<div class="cparts-txt-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;background: #f6f8ff;">
<h4 class="cparts-editsite--mainttl cparts-id223__ttl" id="cms-editor-textarea-sin176774829985253400 " style="text-align: center;">メリット</h4>
<div class="cparts-editsite--txt cparts-notes-block lay-reset-child" id="cms-editor-minieditor-sin176774829985263500">
<div>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・WEB版Gmailをそのまま使える</span><br />
操作画面は今まで通りでスムーズに移行できます。</p>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・リアルタイム受信が可能</span><br />
POP方式特有のタイムラグもなく、即時にメールが届きます。</p>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・複雑な設定が不要</span><br />
POPやIMAPのサーバー設定、パスワード更新などの煩わしさから解放されます。</p>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・PC・スマホで常に同期</span><br />
どの端末からも同じメールが見られ、送受信履歴も一致します。</p>
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・ビジネスレベルの信頼性とセキュリティ</span><br />
Googleが提供する堅牢なインフラにより、安定した運用が可能です。</p>
</div>
</div>
</div>
<div class="cparts-txt-block lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;background: #ffe8ef;">
<h4 class="cparts-editsite--mainttl cparts-id223__ttl" id="cms-editor-textarea-sin176774829985270400 " style="text-align: center;">デメリット</h4>
<div class="cparts-editsite--txt cparts-notes-block lay-reset-child" id="cms-editor-minieditor-sin176774829985277000">
<p><span style="font-weight: 700; color: rgb(59, 78, 154);">・コストが発生する<br />
</span>無料ではなく、ユーザー数に応じた月額または年額の利用料がかかります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176758737896511300 cparts-editsite--mainttl" id="cms-editor-textarea-sin176758737896524400">対応策の比較</h3>
<div class="cms-content-parts-sin176758742996597900 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--table cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin176758742996601600">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th></th>
            <th style="text-align: center;">メールソフトへ戻る</th>
            <th style="text-align: center;">「転送設定」でGmailに送る</th>
            <th style="text-align: center;" bgcolor="#f6f8ff">Google Workspace</th>
        </tr>
        <tr>
            <th>使い慣れたGmailの画面が使えるか</th>
            <td style="text-align: center;">✕<br />
            使用不可</td>
            <td style="text-align: center;">〇<br />
            表面的には可能</td>
            <td style="text-align: center;" bgcolor="#f6f8ff"><strong>◎<br />
            継続利用可能</strong></td>
        </tr>
        <tr>
            <th>PCブラウザでの操作</th>
            <td style="text-align: center;">✕<br />
            メールソフト必須</td>
            <td style="text-align: center;">〇<br />
            Gmail画面で閲覧可能</td>
            <td style="text-align: center;" bgcolor="#f6f8ff"><strong>◎<br />
            今まで通りの画面を継続</strong></td>
        </tr>
        <tr>
            <th>メールの到達信頼性</th>
            <td style="text-align: center;">〇<br />
            高い</td>
            <td style="text-align: center;">✕<br />
            転送で不達・遅延のリスク</td>
            <td style="text-align: center;" bgcolor="#f6f8ff"><strong>◎<br />
            ビジネスクラスの安定性</strong></td>
        </tr>
        <tr>
            <th>セキュリティの強さ</th>
            <td style="text-align: center;">△<br />
            PC依存・バックアップ必須</td>
            <td style="text-align: center;">✕<br />
            なりすまし扱いの危険あり</td>
            <td style="text-align: center;" bgcolor="#f6f8ff"><strong>◎<br />
            Googleの法人向けセキュリティ</strong></td>
        </tr>
        <tr>
            <th>導入・運用コスト</th>
            <td style="text-align: center;">無料</td>
            <td style="text-align: center;">無料</td>
            <td style="text-align: center;" bgcolor="#f6f8ff">有料</td>
        </tr>
        <tr>
            <th>推奨度（総合評価）</th>
            <td style="text-align: center;">△</td>
            <td style="text-align: center;">✕</td>
            <td style="text-align: center;" bgcolor="#f6f8ff"><strong>◎</strong></td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin176759031723020500 cparts-editsite--mainttl" id="cms-editor-textarea-sin176759031723027900" data-original="cms-content-parts-sin176759031723020500 cparts-editsite--mainttl" style="margin-top:48px;">まとめ</h4>
<div class="cms-content-parts-sin176759033753351100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176759033753353200">
<p>2025年12月31日をもって、Gmailの外部メールアカウントに対するPOP受信機能が終了し、従来の「Gmailで会社のメールを一括管理する」方法が使えなくなりました。<br />
この変更により、Gmailでメールが届かない、見られない、送れないといったトラブルが起こっています。</p>
<p>今後の運用方法としては、</p>
<ul>
    <li>メールソフトに戻る（最低限の対応だが操作性に課題あり）</li>
    <li>転送設定でGmailに送る（非推奨：不達リスクが高い）</li>
    <li>Google Workspaceへ移行（操作性・安定性・セキュリティの観点から最も推奨）</li>
</ul>
<p>特に、業務でGmailを使い慣れている方にとっては、Google Workspaceへの移行が、今まで通りの使い勝手を維持できる安心な方法です。</p>
<p>本記事の内容を参考に、今後の運用方法については自社の方針に基づきご判断・ご対応いただきますようお願いいたします。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176759042957344500 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176759042957352400">
<p style="text-align: center;"><a href="https://ant2demo.com/" target="_blank" class="dec-btn--primary dec-btn--size-lg">デモ登録はこちら</a></p>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2025/12/21984/">
<title>企業のWEBサイトを守るために知っておきたいセキュリティ対策～ランサムウェア～</title>
<link>https://ant2.net/magazine/2025/12/21984/</link>
<description>こんにちは。アントアントのメルマガ担当です。 いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。 今回は、「企業のWEBサイトを守るために知っておきたいセキュリティ対策～ランサムウェア～」をテーマにお届けいたします。 昨今、大手企業がランサムウェアによるサーバー攻撃を受け、一時的に業務が停止するという重大な事案が相次いで報道されました。 これらの事例は、企業規模にかかわらず「セキュリティ対策の重要性」を改めて認識させるものです。 こうした背景を踏まえ、本日はant2 CMSにおけるセキュリティ機能と安全な運用のポイントについて、具体的にご紹介いたします。 ランサムウェアとは ランサムウェアとは、ウイルスの一種で、感染するとパソコンやサーバー内のデータが暗号化されて使えなくなります。 攻撃者は、「元に戻したければお金（身代金）を払え」と要求してくるため、「ランサム（身代金）ウェア」と呼ばれています。 攻撃者は一度侵入に成功すると、社内ネットワークを通じてほかのパソコンやサーバーにも感染を広げ、会社全体の業務が止まってしまうことがあります。 暗号化されたデータは、攻撃者が持つ特別な鍵がないと元に戻せず、非常に復旧が困難です。 もともとは個人のパソコンが主な標的でしたが、現在は企業や病院、公共機関など、組織全体を狙う攻撃が主流です。 業務停止や情報漏洩、金銭的な損失などの影響が大きく、早急な対策が求められています。 ランサムウェア攻撃手法 01 メール経由 （フィッシング攻撃） 最も多いパターンです。 「請求書」「納品書」「業務連絡」などの偽メールに添付されたファイルや、本文中のリンクを開くと、ウイルスに感染します。 02 リモートデスクトップ攻撃（RDP攻撃） テレワーク普及により、リモート接続設定が甘いPCやサーバーが狙われやすくなっています。 12文字未満の単純なパスワードが簡単だったり、サポートが終了したWindows10などの古いOSを使用していたりすると、乗っ取られるリスクが高まります。 03 WEBサイト改ざん・ 脆弱性の悪用 ソフトウェアやCMSにセキュリティの穴（脆弱性）があると、そこから攻撃が仕掛けられることがあります。 古いバージョンのCMSや未更新のプラグインが原因になることも。 04 USBメモリや 外部デバイス経由 ウイルスが仕込まれたUSBメモリを挿すだけで、社内ネットワークに感染が広がるケースも報告されています。 ランサムウェアの特徴と目的 ファイル暗号化 Word、Excel、PDF、画像、サーバーデータなどすべて使用不可にされる。 身代金要求 「ビットコインで支払え」などと要求される。支払っても解除されないことも。 二重恐喝 データを盗み出したうえで、「支払わなければ情報を公開する」と脅すケースも増加中。 自動拡散 社内ネットワーク全体に感染を広げ、複数PC・サーバーが同時に停止することも。 ランサムウェア攻撃による被害と影響 ランサムウェアによる被害は、金銭的損失だけにとどまりません。 実際の被害事例（一部抜粋） 国内の大手通販企業 システム障害により商品の出荷が一時停止し、顧客対応や業務の継続に大きな影響が出ました。 食品・飲料業界の大手企業 業務システムが一部ダウンし、製造・物流・販売の各部門にわたって業務が滞る事態となりました。 地方自治体や医療機関 患者情報や住民データの漏えいが発生し、業務の全面停止や社会的信用の低下など、深刻な影響が報告されています。 中小企業であっても、数日〜数週間の業務停止や数百万円〜数千万円に及ぶ復旧・調査費用に加え、情報漏洩による法的リスクや取引先との信頼関係破綻など、経営に深刻なダメージを及ぼす可能性があります。 ランサムウェア被害を防ぐには？ 被害を未然に防ぐには、「仕組み」と「習慣」の両面から対策することが大切です。 運用でできる5つの基本対策 不審なメールや リンクを絶対に開かない 件名に「至急」や「請求書」があるメールは特に注意が必要です。 差出人アドレスや添付ファイル名をよく確認しましょう。 ソフトウェア・CMSは 常に最新版に 脆弱性は攻撃の入り口になります。CMSやプラグインは定期的にアップデートしましょう。 バックアップの実施 万が一の時、バックアップがあれば業務の復旧が可能です。 サーバーやクラウド、外部ストレージなど複数箇所に保存するのが理想です。 アカウント管理と アクセス制限 退職者や外注のアカウントを放置せず、操作範囲に応じて適切な権限を設定し、アクセス履歴を定期的に確認しましょう。 2段階認証・IP制限などのセキュリティ設定を活用 2段階認証を有効にすれば、スマートフォンで発行される確認コードが必要になり、不正ログインの防止につながります。 また、IPアドレス制限を使うことで、特定のネットワークからしかアクセスできないように設定できます。 ant2 CMSでできるセキュリティ対策と活用法 ant2 CMSは、こうしたリスクに備えるため、堅牢なセキュリティ機能と柔軟な設定オプションを備えています。 ant2 CMSでは、主要なセキュリティ対策を標準装備しています。 管理画面のアクセス制御 不正ログイン防止機能としてIPアドレス制限や2段階認証を実装。 管理画面へのアクセス制限を強化し、安全な運用をサポートします。 権限ごとの操作制限 「記事編集だけ可」「サイト公開は不可」など操作範囲を制御できます。アカウントの追加・削除も簡単に管理することが可能です。 アクセスログ・ 操作ログの確認 編集画面の操作履歴やログイン履歴を確認し、異常を早期発見できます。 安心の日本国内サーバー＆ 自動SSL対応 CMSのサーバーは日本国内のサーバーを使用しています。 通信はすべてSSLで暗号化されており、メールフォームも安全に利用できます。 まとめ ランサムウェアは、誰にでも起こりうるサイバー攻撃です。 「自社には関係ない」と思っていると、ある日突然、業務が完全に止まってしまうこともあります。 ant2 CMSには、セキュリティ機能がしっかり備わっていますが、その力を活かすためには正しい運用が不可欠です。 今一度、CMSの設定・管理体制を見直し、安心・安全なWEB運用を一緒に目指していきましょう。 デモ登録はこちら</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2025-12-24T00:00:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin176653943821112600" class="cms-content-parts-sin176653943821121400"><div id="cms-editor-minieditor-sin176578685344134100" class="cms-content-parts-sin176578685344143300"><p>こんにちは。アントアントのメルマガ担当です。<br /> いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p> <p>今回は、「企業のWEBサイトを守るために知っておきたいセキュリティ対策～ランサムウェア～」をテーマにお届けいたします。</p> <p>昨今、大手企業がランサムウェアによるサーバー攻撃を受け、一時的に業務が停止するという重大な事案が相次いで報道されました。<br /> これらの事例は、企業規模にかかわらず「セキュリティ対策の重要性」を改めて認識させるものです。</p> <p>こうした背景を踏まえ、本日はant2 CMSにおけるセキュリティ機能と安全な運用のポイントについて、具体的にご紹介いたします。</p></div> <div class="cms-content-parts-sin176578692654261900 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="lay-row"><div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img alt="" class="cms-easy-edit" id="cms-editor-image-sin176578692654268000" src="https://ant2.net/images/magazine/2025/12/knowhow-89853.jpg" width="675" /></div></div></div> <h2 class="cms-content-parts-sin176586137736095300" id="cms-editor-textarea-sin176586137736105400">ランサムウェアとは</h2> <div class="cms-content-parts-sin176578698259329500 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="lay-row"><div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img alt="ランサムウェアとは" class="cms-easy-edit" id="cms-editor-image-sin176578698259333400" src="https://ant2.net/images/magazine/2025/12/images2025121615375569.png" width="330" /></div> <div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176578698259333800"><p>ランサムウェアとは、ウイルスの一種で、感染するとパソコンやサーバー内のデータが暗号化されて使えなくなります。<br /> 攻撃者は、「元に戻したければお金（身代金）を払え」と要求してくるため、「ランサム（身代金）ウェア」と呼ばれています。<br /> 攻撃者は一度侵入に成功すると、社内ネットワークを通じてほかのパソコンやサーバーにも感染を広げ、会社全体の業務が止まってしまうことがあります。<br /> 暗号化されたデータは、攻撃者が持つ特別な鍵がないと元に戻せず、非常に復旧が困難です。<br /> もともとは個人のパソコンが主な標的でしたが、現在は企業や病院、公共機関など、組織全体を狙う攻撃が主流です。<br /> 業務停止や情報漏洩、金銭的な損失などの影響が大きく、早急な対策が求められています。</p></div></div></div></div> <h3 class="cms-content-parts-sin176578701524355000" id="cms-editor-textarea-sin176578701524365800">ランサムウェア攻撃手法</h3> <div class="cms-content-parts-sin176602318760538900 box cparts-id569--04 lay-margin-b--3" col-flex="1-4" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="lay-row"><div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-img-block lay-img-width--max lay-margin-b--3"><div class="cparts-no-block dec-bg--primary" id="cms-editor-textarea-sin176602318760239800">01</div> <img id="cms-editor-image-sin176602318760285100" class="cparts-editsite--img" alt="" src="https://ant2.net/images/magazine/2025/12/images2025121710525948.jpg" /></div> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176602318760316600"><h4 style="text-align: center;">メール経由<br /> （フィッシング攻撃）</h4> <p>最も多いパターンです。<br /> 「請求書」「納品書」「業務連絡」などの偽メールに添付されたファイルや、本文中のリンクを開くと、ウイルスに感染します。</p></div></div> <div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-img-block lay-img-width--max lay-margin-b--3"><div class="cparts-no-block dec-bg--primary" id="cms-editor-textarea-sin176602318760265600">02</div> <img id="cms-editor-image-sin176602318760372700" class="cparts-editsite--img" alt="" src="https://ant2.net/images/magazine/2025/12/images2025121710525910.jpg" /></div> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176602318760391200"><h4 style="text-align: center;">リモートデスクトップ攻撃<br />（RDP攻撃）</h4> <p>テレワーク普及により、リモート接続設定が甘いPCやサーバーが狙われやすくなっています。<br /> 12文字未満の単純なパスワードが簡単だったり、サポートが終了したWindows10などの古いOSを使用していたりすると、乗っ取られるリスクが高まります。</p></div></div> <div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-img-block lay-img-width--max lay-margin-b--3"><div class="cparts-no-block dec-bg--primary" id="cms-editor-textarea-sin176602318760339600">03</div> <img id="cms-editor-image-sin176602318760443500" class="cparts-editsite--img" alt="WEBサイト改ざん・脆弱性の悪用" src="https://ant2.net/images/magazine/2025/12/images2025121812142382.jpg" /></div> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176602318760465900"><h4 style="text-align: center;">WEBサイト改ざん・<br /> 脆弱性の悪用</h4> <p>ソフトウェアやCMSにセキュリティの穴（脆弱性）があると、そこから攻撃が仕掛けられることがあります。<br /> 古いバージョンのCMSや未更新のプラグインが原因になることも。</p></div></div> <div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-img-block lay-img-width--max lay-margin-b--3"><div class="cparts-no-block dec-bg--primary" id="cms-editor-textarea-sin176602318760360800">04</div> <img id="cms-editor-image-sin176602318760509400" class="cparts-editsite--img" alt="" src="https://ant2.net/images/magazine/2025/12/images2025121711075695.jpg" /></div> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176602318760528300"><h4 style="text-align: center;">USBメモリや<br /> 外部デバイス経由</h4> <p>ウイルスが仕込まれたUSBメモリを挿すだけで、社内ネットワークに感染が広がるケースも報告されています。</p></div></div></div></div> <h4 class="cms-content-parts-sin176602378984565900 cparts-editsite--mainttl" id="cms-editor-textarea-sin176602378984570400">ランサムウェアの特徴と目的</h4> <div class="cms-content-parts-sin176602740217675000 box parts_text_type02 cparts-id120--04 lay-margin-b--3 lay-padding--2" col-flex="1-4" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="lay-row lay-no-gutters"><div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176602740217590200"><h5 style="text-align: center;"><strong>ファイル暗号化</strong></h5> <p>Word、Excel、PDF、画像、サーバーデータなどすべて使用不可にされる。</p></div></div> <div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176602740217598700"><h5 style="text-align: center;"><strong>身代金要求</strong></h5> <p>「ビットコインで支払え」などと要求される。支払っても解除されないことも。</p></div></div> <div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176602740217605600"><h5 style="text-align: center;"><strong>二重恐喝</strong></h5> <p>データを盗み出したうえで、「支払わなければ情報を公開する」と脅すケースも増加中。</p></div></div> <div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176602740217612300"><h5 style="text-align: center;"><strong>自動拡散</strong></h5> <p>社内ネットワーク全体に感染を広げ、複数PC・サーバーが同時に停止することも。</p></div></div></div></div> <h3 class="cms-content-parts-sin176586139909407500" id="cms-editor-textarea-sin176586139909415800">ランサムウェア攻撃による被害と影響</h3> <div class="cms-content-parts-sin176586143389181000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176586143389181000 cparts-id119 lay-margin-b--3 box" style="margin-bottom:0px;"><div class="lay-row"><div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12"><div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176586143389187500"><p>ランサムウェアによる被害は、金銭的損失だけにとどまりません。</p></div></div></div></div> <div class="cms-content-parts-sin176586156587855000 box cparts-id299--03 lay-margin-b--3 dec-line--primary" col-flex="1-3" data-reload="yes" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176586156587855000 box cparts-id299--03 lay-margin-b--3 dec-line--primary"><div class="cparts-head-block"><h3 class="cparts-id299--03__ttl dec-bg--contents cms-easy-edit" id="cms-editor-textbox-sin176586156587763000">実際の被害事例（一部抜粋）</h3></div> <div class="cparts-body-block lay-row lay-no-gutters"><div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4 cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176586156587792400"><h4 style="text-align: center;">国内の大手通販企業</h4> <p>システム障害により商品の出荷が一時停止し、顧客対応や業務の継続に大きな影響が出ました。</p></div> <div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4 cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176586156587811900"><h4 style="text-align: center;">食品・飲料業界の大手企業</h4> <p>業務システムが一部ダウンし、製造・物流・販売の各部門にわたって業務が滞る事態となりました。</p></div> <div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4 cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176586156587829500"><h4 style="text-align: center;">地方自治体や医療機関</h4> <p>患者情報や住民データの漏えいが発生し、業務の全面停止や社会的信用の低下など、深刻な影響が報告されています。</p></div></div></div> <div class="cms-content-parts-sin176586158756252100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="lay-row"><div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12"><div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176586158756254200"><p>中小企業であっても、数日〜数週間の業務停止や数百万円〜数千万円に及ぶ復旧・調査費用に加え、情報漏洩による法的リスクや取引先との信頼関係破綻など、経営に深刻なダメージを及ぼす可能性があります。</p></div></div></div></div> <h2 class="cms-content-parts-sin176602436933918100 cparts-editsite--mainttl" id="cms-editor-textarea-sin176602436933921800">ランサムウェア被害を防ぐには？</h2> <div class="cms-content-parts-sin176586175811807400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="lay-row"><div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12"><div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176586175811782200"><p>被害を未然に防ぐには、「仕組み」と「習慣」の両面から対策することが大切です。</p></div></div></div></div> <h3 class="cms-content-parts-sin176586250165518700" id="cms-editor-textarea-sin176586250165524400" data-original="cms-content-parts-sin176586250165518700" style="margin-bottom:10px;">運用でできる5つの基本対策</h3> <div class="cms-content-parts-sin176610466217502800 box cparts-id114 cparts-flexinline-block lay-margin-b--3 lay-col12-xs-12 lay-col12-md-4" data-reload="yes" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="cparts-body-block lay-padding--3 dec-bg--light dec-line--primary"><h4 class="cparts-editsite--mainttl cparts-id114__ttl" id="cms-editor-textbox-sin176610466217513000" style="text-align: center;">不審なメールや<br /> リンクを絶対に開かない</h4> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176610466217520200"><p>件名に「至急」や「請求書」があるメールは特に注意が必要です。<br /> 差出人アドレスや添付ファイル名をよく確認しましょう。</p></div></div></div> <div class="cms-content-parts-sin176610466805673500 box cparts-id114 cparts-flexinline-block lay-margin-b--3 lay-col12-xs-12 lay-col12-md-4" data-reload="yes" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="cparts-body-block lay-padding--3 dec-bg--light dec-line--primary"><h4 class="cparts-editsite--mainttl cparts-id114__ttl" id="cms-editor-textbox-sin176610466805630300" style="text-align: center;">ソフトウェア・CMSは<br /> 常に最新版に</h4> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176610466805639100"><p>脆弱性は攻撃の入り口になります。CMSやプラグインは定期的にアップデートしましょう。</p></div></div></div> <div class="cms-content-parts-sin176610468089801400 box cparts-id114 cparts-flexinline-block lay-margin-b--3 lay-col12-xs-12 lay-col12-md-4" data-reload="yes" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="cparts-body-block lay-padding--3 dec-bg--light dec-line--primary"><h4 class="cparts-editsite--mainttl cparts-id114__ttl" id="cms-editor-textbox-sin176610468089755900" style="text-align: center;">バックアップの実施</h4> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176610468089766400"><p>万が一の時、バックアップがあれば業務の復旧が可能です。<br /> サーバーやクラウド、外部ストレージなど複数箇所に保存するのが理想です。</p></div></div></div> <div class="cms-content-parts-sin176610467890459300 box cparts-id114 cparts-flexinline-block lay-margin-b--3 lay-col12-xs-12 lay-col12-md-4" data-reload="yes" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="cparts-body-block lay-padding--3 dec-bg--light dec-line--primary"><h4 class="cparts-editsite--mainttl cparts-id114__ttl" id="cms-editor-textbox-sin176610467890419800" style="text-align: center;">アカウント管理と<br /> アクセス制限</h4> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176610467890427900"><p>退職者や外注のアカウントを放置せず、操作範囲に応じて適切な権限を設定し、アクセス履歴を定期的に確認しましょう。</p></div></div></div> <div class="cms-content-parts-sin176610467691309200 box cparts-id114 cparts-flexinline-block lay-margin-b--3 lay-col12-xs-12 lay-col12-md-4" data-reload="yes" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="cparts-body-block lay-padding--3 dec-bg--light dec-line--primary"><h4 class="cparts-editsite--mainttl cparts-id114__ttl" id="cms-editor-textbox-sin176610467691269400">2段階認証・IP制限などのセキュリティ設定を活用</h4> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176610467691277400"><p>2段階認証を有効にすれば、スマートフォンで発行される確認コードが必要になり、不正ログインの防止につながります。<br /> また、IPアドレス制限を使うことで、特定のネットワークからしかアクセスできないように設定できます。</p></div></div></div> <h3 class="cms-content-parts-sin176586435150597200" id="cms-editor-textarea-sin176586435150607400">ant2 CMSでできるセキュリティ対策と活用法</h3> <div class="cms-content-parts-sin176586333806986000 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="lay-row"><div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12"><div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176586333806957900"><p>ant2 CMSは、こうしたリスクに備えるため、堅牢なセキュリティ機能と柔軟な設定オプションを備えています。</p></div></div></div></div> <h4 class="cms-content-parts-sin176602570237206600 cparts-editsite--mainttl" id="cms-editor-textarea-sin176602570237214200">ant2 CMSでは、主要なセキュリティ対策を標準装備しています。</h4> <div class="cms-content-parts-sin176602573220499700 box cparts-id411--03 lay-margin-b--3" col-flex="1-4" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="lay-row"><div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-img-block lay-img-width--max lay-margin-b--1"><img id="cms-editor-image-sin176602573220503500" class="cparts-editsite--img cms-easy-edit" alt="管理画面のアクセス制御" src="https://ant2.net/images/magazine/2025/12/images2025121811541759.jpg" width="146" /></div> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin176602573220503900"><h5 style="text-align: center;"><strong>管理画面のアクセス制御</strong></h5> <p>不正ログイン防止機能としてIPアドレス制限や2段階認証を実装。<br /> 管理画面へのアクセス制限を強化し、安全な運用をサポートします。</p></div></div> <div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-img-block lay-img-width--max lay-margin-b--1"><img id="cms-editor-image-sin176602573220504200" class="cparts-editsite--img cms-easy-edit" alt="権限ごとの操作制限" src="https://ant2.net/images/magazine/2025/12/images2025121812094737.jpg" width="146" /></div> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin176602573220504400"><h5 style="text-align: center;"><strong>権限ごとの操作制限</strong></h5> <p>「記事編集だけ可」「サイト公開は不可」など操作範囲を制御できます。アカウントの追加・削除も簡単に管理することが可能です。</p></div></div> <div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-img-block lay-img-width--max lay-margin-b--1"><img id="cms-editor-image-sin176602573220504600" class="cparts-editsite--img cms-easy-edit" alt="アクセスログ・ 操作ログの確認" src="https://ant2.net/images/magazine/2025/12/images2025121812025898.jpg" width="146" /></div> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin176602573220504800"><h5 style="text-align: center;"><strong>アクセスログ・<br /> 操作ログの確認</strong></h5> <p>編集画面の操作履歴やログイン履歴を確認し、異常を早期発見できます。</p></div></div> <div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3"><div class="cparts-img-block lay-img-width--max lay-margin-b--1"><img id="cms-editor-image-sin176602573220505000" class="cparts-editsite--img cms-easy-edit" alt="安心の日本国内サーバー＆ 自動SSL対応" src="https://ant2.net/images/magazine/2025/12/images2025121812060962.jpg" width="146" /></div> <div class="cparts-editsite--txt cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin176602573220505200"><h5 style="text-align: center;"><strong>安心の日本国内サーバー＆<br /> 自動SSL対応</strong></h5> <p>CMSのサーバーは日本国内のサーバーを使用しています。<br /> 通信はすべてSSLで暗号化されており、メールフォームも安全に利用できます。</p></div></div></div></div> <h4 class="cms-content-parts-sin176610389996315000 cparts-editsite--mainttl" id="cms-editor-textarea-sin176610389996318800">まとめ</h4> <div class="cms-content-parts-sin176586414389172400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="lay-row"><div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12"><div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176586414389141500"><p>ランサムウェアは、誰にでも起こりうるサイバー攻撃です。<br /> 「自社には関係ない」と思っていると、ある日突然、業務が完全に止まってしまうこともあります。</p> <p>ant2 CMSには、セキュリティ機能がしっかり備わっていますが、その力を活かすためには正しい運用が不可欠です。<br /> 今一度、CMSの設定・管理体制を見直し、安心・安全なWEB運用を一緒に目指していきましょう。</p></div></div></div></div> <div class="cms-content-parts-sin176586418886070900 cparts-id160--03 box lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド"><div class="lay-row"><div class="lay-col12-12"><div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176586418886075500"><p style="text-align: center;"><a class="dec-btn--primary dec-btn--size-lg" href="https://ant2demo.com/" target="_blank">デモ登録はこちら</a></p></div></div></div></div></div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2025/12/21982/">
<title>WEBサイトにAIチャットボット導入、何から始める？外部サービス選定の3つのポイント</title>
<link>https://ant2.net/magazine/2025/12/21982/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は、「WEBサイトにAIチャットボット導入、何から始める？外部サービス選定の3つのポイント」というテーマでお届けします。
近年、WEBサイト訪問者とのコミュニケーションを自動化・効率化する手段としてAIチャットボットのニーズが急増しています。
WEB制作の現場でも「お問い合わせ対応を自動化したい」「FAQをもっと便利にしたい」といったご相談が増えており、特に採用サイトやコーポレートサイトでの活用が進んでいます。
WEBサイトにAIチャットボットを導入する際の考え方や選定ポイント、そしてant2 CMSでの設置・運用方法についてご紹介します。






チャットボットのニーズが高まる今、WEBサイトにも導入を




近年、AIチャットボットは、WEBサイト運用の&#8220;新しい常識&#8221;となりつつあります。
「お問い合わせを自動化したい」「夜間でもユーザー対応したい」「人手不足を解消したい」といった課題を抱える企業様から、多くのご相談をいただいています。
しかし、「どのサービスを選べばいいのか分からない」「CMSとの相性が心配」といった不安の声も少なくありません。



外部サービス一択の現実




AIチャットボットをゼロから自社開発するのは、コスト・技術・運用の観点から現実的ではありません。
現在は、以下のようなSaaS型の外部サービスを導入するのが一般的です。




代表的なチャットボットの種類とサービス例





 
 
 タイプ
 主なサービス例
 特徴
 
 
 ChatGPT連携型
 ChatGPT API＋Botpress / gptkitなど
 高度な自然言語処理が可能。自由度が高い反面、設定はやや複雑。
 
 
 有人対応切替型
 KARTE、Zendesk、Intercomなど
 チャットでの一次対応後に有人サポートへ引き継ぎ可能。
 
 
 Q&#38;A特化型
 Helpfeel、チャネルトーク
 よくある質問に特化。FAQの効率化に強み。
 
 
 SNS連携型
 hachidori、sincloなど
 LINEやInstagramなどのSNSと連携しやすい。
 
 









CMSとの相性がカギを握る
多くのチャットボットはJavaScriptやiframeで設置しますが、CMSによっては制限や競合が発生することがあります。

 既存のスクリプトと干渉して表示が崩れる
 iframeが禁止されていて設置できない
 JavaScriptを設定エリアに設置しても動かない

見た目は簡単でも、実際には設置できないケースもあるため、CMS側の仕様確認が必須です。




導入前に押さえておきたい3つの視点



1導入の目的を明確にする


「お問い合わせ削減」「資料請求数アップ」「採用サポート」など、目的により選定すべきツールは異なります。



2設置可否、運用環境の確認


多くの外部チャットボットはJavaScriptの埋め込みタグやiframeの挿入が必要です。CMSによっては制限がある場合があるため、事前に確認が必要です。



3費用体系と運用負荷の把握


多くのサービスが月額数千円〜数万円。加えて、チャット内容の登録・チューニング・ログの確認など、運用工数が発生します。




ant2 CMSでのAIチャットボットの設置・活用方法と注意点




ant2 CMSでは、外部サービスの埋め込みが非常に簡単に行えるように設計されています。以下に基本的な設置方法をご紹介します。







01


チャットボットサービス側でスクリプトコード（JavaScript）を発行

スクリプトコードをどこに設置するか、チャットボットサービス側で確認しておきましょう







02


ant2 CMSにログイン

「Googleサーチコンソール」機能または、対象ページの「メタタグ」を選択








03


設定箇所

『サイトをGoogleに登録（Googleサーチコンソール）』での設定

『メタタグ』での設定









【注意点】

 一部のチャットボットサービスでは、既存のJavaScriptや埋め込みタグと競合して正常に動作しないことがあります。
 システム全体に影響を及ぼす可能性もあるため、事前にテスト環境で確認するか、開発担当に相談するのがベストです。
 ※AIチャットボット「tripla」につきましては、弊社CMSと機能上の競合で正常に動作しないため、ご利用いただくことができません。








目的を明確にし、チャットボットの効果を最大化しよう




チャットボットの導入において、最も大切なのは「どんな課題を解決したいか」を明確にすることです。

 「お問い合わせ削減」が目的ならFAQ特化型を
 「資料請求数アップ」が目的ならマーケ連携型を
 「採用サポート」ならChatGPT連携型での質の高い応対を

CMSとの相性も含めて、自社の状況に合ったサービス選びが成功のカギとなります。






まとめ




AIチャットボットは、お問い合わせ対応の効率化だけでなく、マーケティングや社内サポートまで、幅広い活用が可能です。
ただし導入にあたっては、

 目的の明確化
 CMSとの相性確認
 費用・運用負荷の把握

をしっかりと行うことが大切です。
ant2 CMSをお使いの皆様は、外部スクリプトの設置が可能な柔軟なCMS環境を活かしつつ、事前の検証と丁寧な設計で、安全かつ効果的なチャットボット導入を進めていきましょう。





デモ登録はこちら

元記事を読む...
</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2025-12-10T10:20:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin176533929880197100" class="cms-content-parts-sin176533929880216300">
<div id="cms-editor-minieditor-sin176475383632673100" class="cms-content-parts-sin176475383632681000">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>今回は、「WEBサイトにAIチャットボット導入、何から始める？外部サービス選定の3つのポイント」というテーマでお届けします。</p>
<p>近年、WEBサイト訪問者とのコミュニケーションを<strong>自動化・効率化する手段としてAIチャットボットのニーズが急増</strong>しています。<br />
WEB制作の現場でも「お問い合わせ対応を自動化したい」「FAQをもっと便利にしたい」といったご相談が増えており、特に<strong>採用サイトやコーポレートサイト</strong>での活用が進んでいます。</p>
<p>WEBサイトにAIチャットボットを導入する際の考え方や選定ポイント、そしてant2 CMSでの設置・運用方法についてご紹介します。</p>
</div>
<div class="cms-content-parts-sin176475384426934400 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img alt="" class="cms-easy-edit" id="cms-editor-image-sin176475384426938200" src="https://ant2.net/images/magazine/2025/12/images20251205101848.png" width="675" /></div>
</div>
</div>
<h3 class="cms-content-parts-sin176484172298340400" id="cms-editor-textarea-sin176484172298344300">チャットボットのニーズが高まる今、WEBサイトにも導入を</h3>
<div class="cms-content-parts-sin176484360412876900 box cparts-id439--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176484360412876900 box cparts-id439--01 lay-margin-b--3">
<div class="clearfix">
<div class="cparts-img-block lay-margin-b--3 lay-margin-l--3 lay-img-float--right"><img class="cms-easy-edit" src="https://ant2.net/images/magazine/2025/12/1764843729_960.png" alt="" width="215" id="cms-editor-image-sin176484360412891100" /></div>
<div class="cparts-txt-block lay-reset-child cms-easy-edit" id="cms-editor-minieditor-sin176484360412859500">
<p>近年、AIチャットボットは、WEBサイト運用の&#8220;新しい常識&#8221;となりつつあります。<br />
「お問い合わせを自動化したい」「夜間でもユーザー対応したい」「人手不足を解消したい」といった課題を抱える企業様から、多くのご相談をいただいています。<br />
しかし、「どのサービスを選べばいいのか分からない」「CMSとの相性が心配」といった不安の声も少なくありません。</p>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176475528394974700" id="cms-editor-textarea-sin176475528394979100">外部サービス一択の現実</h3>
<div class="cms-content-parts-sin176475532107624200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176475532107628600">
<p>AIチャットボットをゼロから自社開発するのは、コスト・技術・運用の観点から現実的ではありません。<br />
現在は、以下のようなSaaS型の外部サービスを導入するのが一般的です。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin176481348607353500" id="cms-editor-textarea-sin176481348607357500">代表的なチャットボットの種類とサービス例</h4>
<div class="cms-content-parts-sin176475535081781900 cparts-id93--01 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin176475535081788700">
<table>
    <tbody class="lay-margin-b--1">
        <tr>
            <th>タイプ</th>
            <th>主なサービス例</th>
            <th>特徴</th>
        </tr>
        <tr>
            <td>ChatGPT連携型</td>
            <td>ChatGPT API＋Botpress / gptkitなど</td>
            <td>高度な自然言語処理が可能。自由度が高い反面、設定はやや複雑。</td>
        </tr>
        <tr>
            <td>有人対応切替型</td>
            <td>KARTE、Zendesk、Intercomなど</td>
            <td>チャットでの一次対応後に有人サポートへ引き継ぎ可能。</td>
        </tr>
        <tr>
            <td>Q&#38;A特化型</td>
            <td>Helpfeel、チャネルトーク</td>
            <td>よくある質問に特化。FAQの効率化に強み。</td>
        </tr>
        <tr>
            <td>SNS連携型</td>
            <td>hachidori、sincloなど</td>
            <td>LINEやInstagramなどのSNSと連携しやすい。</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176484182221095100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176484182221095100 cparts-id119 lay-margin-b--3 box" style="margin-bottom:70px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176484182221098900">
<h4>CMSとの相性がカギを握る</h4>
<p>多くのチャットボットはJavaScriptやiframeで設置しますが、CMSによっては制限や競合が発生することがあります。</p>
<ul>
    <li>既存のスクリプトと干渉して表示が崩れる</li>
    <li>iframeが禁止されていて設置できない</li>
    <li>JavaScriptを設定エリアに設置しても動かない</li>
</ul>
<p>見た目は簡単でも、実際には設置できないケースもあるため、CMS側の仕様確認が必須です。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176481347202540100" id="cms-editor-textarea-sin176481347202546500">導入前に押さえておきたい3つの視点</h3>
<div class="cms-content-parts-sin176484384183697000 cparts-id548-03 box lay-margin-b--3" col-flex="1-3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176484384183697000 cparts-id548-03 box lay-margin-b--3" style="margin-bottom:70px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<h4 class="cparts-id548-03__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176484384183488200 ">1</span><span class="cparts-ttl-block" id="cms-editor-textarea-sin176484384183595100">導入の目的を明確にする</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><img src="https://ant2.net/images/magazine/2025/12/1734663477_960.jpg" alt="" id="cms-editor-image-sin176484384183536100" /></div>
<div class="cparts-txt-block lay-margin-t--1 lay-reset-child" id="cms-editor-minieditor-sin176484384183569800">
<p><span style="color: rgb(51, 51, 51); font-size: 1.6rem;">「お問い合わせ削減」「資料請求数アップ」「採用サポート」など、目的により選定すべきツールは異なります。</span></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<h4 class="cparts-id548-03__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176484384183645100 ">2</span><span class="cparts-ttl-block" id="cms-editor-textarea-sin176484384183704900">設置可否、運用環境の確認</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><img src="https://ant2.net/images/magazine/2025/12/1715519891_960-1-1.jpg" alt="" id="cms-editor-image-sin176484384183607600" /></div>
<div class="cparts-txt-block lay-margin-t--1 lay-reset-child" id="cms-editor-minieditor-sin176484384183627100">
<p><span style="color: rgb(51, 51, 51); font-size: 1.6rem;">多くの外部チャットボットはJavaScriptの埋め込みタグやiframeの挿入が必要です。CMSによっては制限がある場合があるため、事前に確認が必要です。</span></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<h4 class="cparts-id548-03__ttl"><span class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176484384183711200 ">3</span><span class="cparts-ttl-block" id="cms-editor-textarea-sin176484384183717400">費用体系と運用負荷の把握</span></h4>
<div class="cparts-img-block lay-margin-t--1 lay-img-width--max"><img src="https://ant2.net/images/magazine/2025/12/1764844864_960-1.png" alt="" id="cms-editor-image-sin176484384183660900" /></div>
<div class="cparts-txt-block lay-margin-t--1 lay-reset-child" id="cms-editor-minieditor-sin176484384183684700">
<p>多くのサービスが月額数千円〜数万円。加えて、チャット内容の登録・チューニング・ログの確認など、運用工数が発生します。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176484110610619800" id="cms-editor-textarea-sin176484110610624600">ant2 CMSでのAIチャットボットの設置・活用方法と注意点</h3>
<div class="cms-content-parts-sin176484113546527400 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176484113546531300">
<p>ant2 CMSでは、外部サービスの埋め込みが非常に簡単に行えるように設計されています。以下に基本的な設置方法をご紹介します。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176481357960587000 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176481357960590800">01</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin176481357960591100">チャットボットサービス側でスクリプトコード（JavaScript）を発行</h3>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176481357960591300">
<p>スクリプトコードをどこに設置するか、チャットボットサービス側で確認しておきましょう</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176481358272073700 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176481358272025700">02</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin176481358272034000">ant2 CMSにログイン</h3>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176481358272046800">
<p>「Googleサーチコンソール」機能または、対象ページの「メタタグ」を選択</p>
<p><img src="https://ant2.net/images/magazine/2025/12/images2025120419120453.png" width="254" height="600" alt="" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176481358505779900 box cparts-var03-type24 cparts-id118--01 lay-margin-b--3 lay-row lay-no-gutters cparts-connector--straight">
<div class="lay-col12-12">
<div class="cparts-head-block">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textbox-sin176481358505741600">03</div>
</div>
<div class="cparts-body-block dec-line--primary dec-line-pe--primary">
<h3 class="cparts-ttl-block cparts-id118__ttl dec-txt--primary" id="cms-editor-textarea-sin176481358505749000">設定箇所</h3>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176481358505751800">
<p>『サイトをGoogleに登録（Googleサーチコンソール）』での設定</p>
<p><img src="https://ant2.net/images/magazine/2025/12/images2025120419120542.png" width="676" height="600" alt="" /></p>
<p>『メタタグ』での設定<br />
<img src="https://ant2.net/images/magazine/2025/12/images2025120419120396.png" width="677" height="600" alt="" /></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176484405546341500 box parts_text_type02 cparts-id120--01 lay-margin-b--3 lay-padding--2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-12">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176484405546346400">
<h4>【注意点】</h4>
<ul>
    <li>一部のチャットボットサービスでは、既存のJavaScriptや埋め込みタグと競合して正常に動作しないことがあります。</li>
    <li>システム全体に影響を及ぼす可能性もあるため、事前にテスト環境で確認するか、開発担当に相談するのがベストです。<br />
    ※AIチャットボット「tripla」につきましては、弊社CMSと機能上の競合で正常に動作しないため、ご利用いただくことができません。</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176484740778888500 cparts-id8--03 box lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row dec-bg--primary">
<div class="cparts-head-block lay-col12-xs-12">
<h4 class="cparts-id8--03__ttl" id="cms-editor-textarea-sin176484740778830600">目的を明確にし、チャットボットの効果を最大化しよう</h4>
</div>
<div class="cparts-body-block dec-bg--contents">
<div class="lay-row">
<div class="cparts-txt-block lay-col12-xs-12 lay-col12-md-8 lay-reset-child" id="cms-editor-minieditor-sin176484740778872200">
<p>チャットボットの導入において、最も大切なのは「どんな課題を解決したいか」を明確にすることです。</p>
<ul>
    <li>「お問い合わせ削減」が目的ならFAQ特化型を</li>
    <li>「資料請求数アップ」が目的ならマーケ連携型を</li>
    <li>「採用サポート」ならChatGPT連携型での質の高い応対を</li>
</ul>
<p>CMSとの相性も含めて、自社の状況に合ったサービス選びが成功のカギとなります。</p>
</div>
<div class="cparts-img-block lay-col12-xs-12 lay-col12-md-4 lay-img-width--max"><img src="https://ant2.net/images/magazine/2025/12/1646812437_960.png" alt="" id="cms-editor-image-sin176484740778897800" /></div>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin176484439734317600" id="cms-editor-textarea-sin176484439734362700">まとめ</h4>
<div class="cms-content-parts-sin176484441756209900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176484441756213700">
<p>AIチャットボットは、お問い合わせ対応の効率化だけでなく、マーケティングや社内サポートまで、幅広い活用が可能です。<br />
ただし導入にあたっては、</p>
<ul>
    <li>目的の明確化</li>
    <li>CMSとの相性確認</li>
    <li>費用・運用負荷の把握</li>
</ul>
<p>をしっかりと行うことが大切です。</p>
<p>ant2 CMSをお使いの皆様は、外部スクリプトの設置が可能な柔軟なCMS環境を活かしつつ、事前の検証と丁寧な設計で、安全かつ効果的なチャットボット導入を進めていきましょう。</p>
</div>
</div>
</div>
</div>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin174522787727042200">
<p style="text-align: center;"><a class="dec-btn--primary dec-btn--size-lg" href="https://ant2demo.com/" target="_blank">デモ登録はこちら</a></p>
</div>
<p style="text-align:right;"><a href="https://ant2oem.net/knowhow/2025/12/89852/" target="_blank">元記事を読む...</a></p>
</div>
]]></content:encoded>
</item>

<item rdf:about="https://ant2.net/magazine/2025/11/21981/">
<title>無料CMSとの比較で見えてくる「本当に選ぶべきCMS」</title>
<link>https://ant2.net/magazine/2025/11/21981/</link>
<description>

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は、「無料CMS」に注目し、無料で使える代表的なCMS（WordPress、STUDIO、Wixなど）と、有料でありながら多くのお客様に選ばれているant2 CMSを比較し、「本当に選ぶべきCMSとは何か？」について分かりやすくご紹介いたします。






無料CMSにはどんなものがある？




Webサイトを作成・運用する際、無料のCMS（コンテンツ管理システム）は基本的に初期費用がかからず、登録後すぐにサイト制作を開始できるのが大きな魅力です。代表的なものは『WordPress（ワードプレス）』『STUDIO（スタジオ）』『Wix（ウィックス）』などがあります。









 
 
 WordPress
 
 世界的シェアNo.1のCMS
 豊富なテーマ・プラグインで自由度が高い
 
 
 
 STUDIO
 
 ノーコードで美しいデザインが可能
 日本語UI・デザイン重視の方に人気
 
 
 
 Wix
 
 ドラッグ＆ドロップで操作が簡単
 無料プランでもテンプレートが豊富
 
 
 






無料CMSはどんな人に向いている？





 趣味やポートフォリオサイトを作りたい個人
 コストをかけずにとりあえずWebページを持ちたい小規模店舗
 HTML/CSSなどのスキルがあり、自分である程度カスタマイズできる方

ただし、「商用利用」「顧客との接点」「集客・運用」などを考えると、無料CMSでは限界が見えてくるケースもあります。




無料CMSのメリット・デメリット




メリット

 無料ですぐに始められる
 初心者でも簡単な操作が可能
 テンプレートが豊富で見た目も整えやすい





デメリット

 機能制限（独自ドメイン不可、広告表示ありなど）
 サポートが不十分（自己解決が基本）
 セキュリティ管理が自己責任
 サイト表示速度やSEO最適化に限界がある





有料CMS「ant2 CMS」導入のメリット！




ant2 CMSは、企業・団体・店舗などの「本格的なWeb運用」に必要な機能がすべてオールインワンで揃った有料CMSです。
操作性と機能性のバランスに優れ、官公庁・企業・教育機関・店舗など、実用性の高いWeb運用が求められる現場で幅広く活用されています。
テンプレートに沿って作成を始めれば、最短1日でWebサイト公開も可能。
Webの専門知識がなくても、長く安心して使えるCMSです。







ant2 CMSでできること





 直感的な操作でページ作成・更新が可能（ノーコード対応）
 問い合わせフォーム・EC・多言語ページ自動作成などの機能を標準装備
 スマホ最適化済みテンプレート300種類以上
 2段階認証やIPログイン制御などセキュリティ対策あり
 日本語による安心のサポート体制
 独自ドメインの取得・管理、サーバーも管理可能
 アクセス解析・SEO設定も簡単に可能











1



見たまま直感編集
「1．クリック 2．編集 3．保存」のシンプルな操作で誰でも簡単にホームページの編集・更新ができます。




2



豊富な機能が充実
ブログやメールフォーム、 Google アナリティクス連携など サイト運用に必要な機能を 標準搭載しています。




3



豊富なテンプレート
簡単にWebサイトを制作できるように「デザインテンプレート」という名前で業種別のひな型テンプレートを300種類以上ご用意しています。








4


セキュリティ対策
安全に運用するための機能を標準搭載しています。
SSL証明書・2段階認証・メールフォーム連続送信制限・reCAPTCHAによるスパム対策




5


安心のサポート
電話・メール・お問い合わせフォームにて「困った！」をサポートします。




6


サーバー／ドメイン
Webサーバーの管理はもちろん、ドメインの新規取得から現在利用中のドメインの管理代行まで一括で行います。




7


SEO対策
ページごとにメタタグを管理・設定キーワード使用回数も確認できます。




無料CMSとant2 CMSの比較表





 
 
 
 
 無料CMS
 ant2 CMS
 
 
 初期費用
 
 なし
 なし
 
 
 操作性
 
 簡単なものが多いが多少知識は必要
 直感的で初心者にも優しい
 
 
 デザイン自由度
 
 制限あり
 カスタマイズ性が高い
 
 
 テンプレート数
 
 
 無料で使用できる種類が限られている場合あり
 
 300種類以上
 
 
 機能
 
 使用できる機能の制限あり
 ブログ・トピックスなどはもちろん、
 問い合わせフォーム・EC・多言語ページ自動作成など標準装備
 
 
 セキュリティ
 
 自己管理が必要
 2段階認証、IPログイン制限など
 システム側で対応
 
 
 サポート
 
 フォーラム中心 / 英語多め
 国産CMSなので日本語サポート対応
 電話、メール、フォームでのサポート
 
 


















ant2 CMSはこんな方におすすめ！

 自社で簡単にサイト更新・修正を行いたい中小企業
 管理やセキュリティも任せられる安心なCMSを使いたい方
 高額な費用をかけずに高機能なCMSを導入したい方
 店舗・教室・病院など、予約や問い合わせ対応が必要な事業者
 会員専用ページを活用した情報提供を行いたい団体
 簡単にサイトの中でECショップを開きたい店舗

このようなニーズを持つ方には、ant2CMSが最適な選択肢となります。





まとめ




CMS選びは、単なる「サイト作成ツール選び」ではなく、ビジネスの成長や顧客対応の土台をどう構築するかという重要な判断です。
無料CMSは「とりあえず始めたい」にはぴったりですが、「安心して運用できるか？成果につながるか？」という視点でCMSを選ぶことで、後悔のないWebサイト運用が可能になります。
ant2 CMSは、高機能・高セキュリティ・高サポートで、コスト以上の価値を提供するCMSです。
「情報を守りたい」「情報更新を自社で完結したい」そんな方は、ぜひant2 CMSをご検討ください。





デモ登録はこちら

【イベント出展】『営業・マーケDXPO 東京&#039;25【秋】』に出展いたします！（2025年11月27日・11月28日）





ブース情報：有明GYM-EX（ジメックス）　小間番号【1 - 12】
日時：2025年11月27日（木）～28日（金）　9：30～17：00
詳細：https://ant2oem.net/event/2025/121999/




</description>
<dc:creator></dc:creator>
<dc:subject></dc:subject>
<dc:date>2025-11-26T10:05:00+09:00</dc:date>
<content:encoded><![CDATA[
<div id="cms-editor-minieditor-sin176412849875039900" class="cms-content-parts-sin176412849875053400">
<div id="cms-editor-minieditor-sin176352157067130100" class="cms-content-parts-sin176352157067138400">
<p>こんにちは。アントアントのメルマガ担当です。<br />
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。</p>
<p>今回は、「無料CMS」に注目し、無料で使える代表的なCMS（WordPress、STUDIO、Wixなど）と、有料でありながら多くのお客様に選ばれているant2 CMSを比較し、「本当に選ぶべきCMSとは何か？」について分かりやすくご紹介いたします。</p>
</div>
<div class="cms-content-parts-sin176352158170437400 box cparts-id403--01 lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12"><img alt="" class="cms-easy-edit" id="cms-editor-image-sin176352158170442900" src="https://ant2.net/images/magazine/2025/11/images20251119143001.jpg" width="675" /></div>
</div>
</div>
<h2 class="cms-content-parts-sin176353132825058500" id="cms-editor-textarea-sin176353132825062500">無料CMSにはどんなものがある？</h2>
<div class="cms-content-parts-sin176362974151806900 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176362974151813500">
<p>Webサイトを作成・運用する際、無料のCMS（コンテンツ管理システム）は基本的に<strong>初期費用がかからず、登録後すぐにサイト制作を開始できる</strong>のが大きな魅力です。代表的なものは『WordPress（ワードプレス）』『STUDIO（スタジオ）』『Wix（ウィックス）』などがあります。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176363011116088100 cparts-id93--02 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176363011116088100 cparts-id93--02 lay-margin-b--3 box" style="max-width: 700px; margin-left: auto; margin-right: auto;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin176363011116073600">
<table dir="ltr">
    <tbody class="lay-margin-b--1">
        <tr>
            <td width="300">WordPress</td>
            <td>
            <p data-start="662" data-end="678">世界的シェアNo.1のCMS<br />
            豊富なテーマ・プラグインで自由度が高い</p>
            </td>
        </tr>
        <tr>
            <td>STUDIO</td>
            <td>
            <p data-start="570" data-end="588">ノーコードで美しいデザインが可能<br />
            日本語UI・デザイン重視の方に人気</p>
            </td>
        </tr>
        <tr>
            <td>Wix</td>
            <td>
            <p data-start="751" data-end="768">ドラッグ＆ドロップで操作が簡単<br />
            <span style="background-color: transparent; font-size: 1.6rem;">無料プランでもテンプレートが豊富</span></p>
            </td>
        </tr>
    </tbody>
</table>
<p></p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin176363039603838000" id="cms-editor-textarea-sin176363039603847900">無料CMSはどんな人に向いている？</h4>
<div class="cms-content-parts-sin176363018609257700 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176363018609260200">
<ul>
    <li>趣味やポートフォリオサイトを作りたい個人</li>
    <li>コストをかけずにとりあえずWebページを持ちたい小規模店舗</li>
    <li>HTML/CSSなどのスキルがあり、自分である程度カスタマイズできる方</li>
</ul>
<p>ただし、「商用利用」「顧客との接点」「集客・運用」などを考えると、無料CMSでは限界が見えてくるケースもあります。</p>
</div>
</div>
</div>
</div>
<h3 class="cms-content-parts-sin176363030090797400" id="cms-editor-textarea-sin176363030090801300">無料CMSのメリット・デメリット</h3>
<div class="cms-content-parts-sin176363047962149400 box parts_text_type02 cparts-id120--02 lay-margin-b--3 lay-padding--2" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row lay-no-gutters">
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176363047962155700">
<h4>メリット</h4>
<ul>
    <li>無料ですぐに始められる</li>
    <li>初心者でも簡単な操作が可能</li>
    <li>テンプレートが豊富で見た目も整えやすい</li>
</ul>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176363047962156100">
<h4>デメリット</h4>
<ul>
    <li>機能制限（独自ドメイン不可、広告表示ありなど）</li>
    <li>サポートが不十分（自己解決が基本）</li>
    <li>セキュリティ管理が自己責任</li>
    <li>サイト表示速度やSEO最適化に限界がある</li>
</ul>
</div>
</div>
</div>
</div>
<h2 class="cms-content-parts-sin176363227260662200" id="cms-editor-textarea-sin176363227260672500">有料CMS「ant2 CMS」導入のメリット！</h2>
<div class="cms-content-parts-sin176363073881521100 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176363073881521100 cparts-id119 lay-margin-b--3 box" style="margin-bottom:50px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176363073881525100">
<p>ant2 CMSは、企業・団体・店舗などの「本格的なWeb運用」に必要な機能がすべてオールインワンで揃った有料CMSです。<br />
操作性と機能性のバランスに優れ、官公庁・企業・教育機関・店舗など、<strong data-start="2180" data-end="2195">実用性の高いWeb運用</strong>が求められる現場で幅広く活用されています。<br />
テンプレートに沿って作成を始めれば、<strong data-start="2236" data-end="2256">最短1日でWebサイト公開も可能</strong>。<br data-start="2257" data-end="2260" />
Webの専門知識がなくても、長く安心して使えるCMSです。</p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176363234305711900 cparts-id8--03 box lay-margin-b--3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row dec-bg--primary">
<div class="cparts-head-block lay-col12-xs-12">
<h4 class="cparts-id8--03__ttl" id="cms-editor-textarea-sin176363234305715900">ant2 CMSでできること</h4>
</div>
<div class="cparts-body-block dec-bg--contents">
<div class="lay-row">
<div class="cparts-txt-block lay-col12-xs-12 lay-col12-md-8 lay-reset-child" id="cms-editor-minieditor-sin176363234305716200">
<ol>
    <li>直感的な操作でページ作成・更新が可能（ノーコード対応）</li>
    <li>問い合わせフォーム・EC・多言語ページ自動作成などの機能を標準装備</li>
    <li>スマホ最適化済みテンプレート300種類以上</li>
    <li>2段階認証やIPログイン制御などセキュリティ対策あり</li>
    <li>日本語による安心のサポート体制</li>
    <li>独自ドメインの取得・管理、サーバーも管理可能</li>
    <li>アクセス解析・SEO設定も簡単に可能</li>
</ol>
</div>
<div class="cparts-img-block lay-col12-xs-12 lay-col12-md-4 lay-img-width--max"><img src="https://ant2.net/images/magazine/2025/11/1763632461_960.png" alt="" id="cms-editor-image-sin176363234305716500" /></div>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176372148419937900 box cparts-id569--03 lay-margin-b--3" col-flex="1-3" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176372148419937900 box cparts-id569--03 lay-margin-b--3" style="margin-bottom:70px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-img-block lay-img-width--max lay-margin-b--3">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textarea-sin176372148419943000">1</div>
<p><img src="https://ant2.net/images/magazine/2025/11/cms-main-color01.png" alt="" id="cms-editor-image-sin176372148419943500" /></p>
</div>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176372148419943700">
<h4 style="text-align: center;"><strong>見たまま直感編集</strong></h4>
<p style="text-align: left;"><span style="font-size: medium;">「1．クリック 2．編集 3．保存」のシンプルな操作で誰でも簡単にホームページの編集・更新ができます。</span></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-img-block lay-img-width--max lay-margin-b--3">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textarea-sin176372148419944000">2</div>
<p><img src="https://ant2.net/images/magazine/2025/11/1715519891_960-1-1.jpg" alt="" id="cms-editor-image-sin176372148419944300" title="" name="" height="211" width="360" /></p>
</div>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176372148419944800">
<h4 style="text-align: center;">豊富な機能が充実</h4>
<p style="text-align: left;">ブログやメールフォーム、 Google アナリティクス連携など サイト運用に必要な機能を 標準搭載しています。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-4 lay-col12-lg-4">
<div class="cparts-img-block lay-img-width--max lay-margin-b--3">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textarea-sin176372148419945000">3</div>
<p><img src="https://ant2.net/images/magazine/2025/11/cms-main-parts01.png" alt="" id="cms-editor-image-sin176372148419945200" /></p>
</div>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176372148419945400">
<h4 style="text-align: center;"><span style="font-size: x-large;">豊富なテンプレート</span></h4>
<p style="text-align: left;"><span style="font-family: &#34;Noto Sans JP&#34;; text-align: center;">簡単にWebサイトを制作できるように「デザインテンプレート」という名前で業種別のひな型テンプレートを300種類以上ご用意しています。</span></p>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176403240440972900 box cparts-id569--04 lay-margin-b--3" col-flex="1-4" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176403240440972900 box cparts-id569--04 lay-margin-b--3" style="margin-bottom:50px;">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-img-block lay-img-width--max lay-margin-b--3">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textarea-sin176403240440783000">4</div>
<img alt="" id="cms-editor-image-sin176403240440812600" src="https://ant2.net/images/magazine/2025/11/1764036223_960-1.png" title="" name="" width="263" height="161" /></div>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176403240440847200">
<h4 style="text-align: center;">セキュリティ対策</h4>
<p style="text-align: left;"><span style="font-size: medium;">安全に運用するための機能を標準搭載しています。</span><br />
<span style="font-size: smaller;">SSL証明書・2段階認証・メールフォーム連続送信制限・reCAPTCHAによるスパム対策</span></p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-img-block lay-img-width--max lay-margin-b--3">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textarea-sin176403240440876200">5</div>
<img alt="" id="cms-editor-image-sin176403240440888700" src="https://ant2.net/images/magazine/2025/11/1764035766_960.jpg" /></div>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176403240440908100">
<h4 style="text-align: center;">安心のサポート</h4>
<p style="text-align: left;">電話・メール・お問い合わせフォームにて「困った！」をサポートします。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-img-block lay-img-width--max lay-margin-b--3">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textarea-sin176403240440927600">6</div>
<img alt="" id="cms-editor-image-sin176403240440939500" src="https://ant2.net/images/magazine/2025/11/1764034113_960-1.png" /></div>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176403240440959400">
<h4 style="text-align: center;">サーバー／ドメイン</h4>
<p style="text-align: left;">Webサーバーの管理はもちろん、ドメインの新規取得から現在利用中のドメインの管理代行まで一括で行います。</p>
</div>
</div>
<div class="lay-col12-xs-12 lay-col12-md-3 lay-col12-lg-3">
<div class="cparts-img-block lay-img-width--max lay-margin-b--3">
<div class="cparts-no-block dec-bg--primary" id="cms-editor-textarea-sin176403240440984100">7</div>
<img alt="" id="cms-editor-image-sin176403240440991100" src="https://ant2.net/images/magazine/2025/11/1739527871_960.png" /></div>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176403240440997700">
<h4 style="text-align: center;">SEO対策</h4>
<p style="text-align: left;">ページごとにメタタグを管理・設定キーワード使用回数も確認できます。</p>
</div>
</div>
</div>
</div>
<h4 class="cms-content-parts-sin176363130391072100" id="cms-editor-textarea-sin176363130391076100">無料CMSとant2 CMSの比較表</h4>
<div class="cms-content-parts-sin176363134568495200 cparts-id93--01 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176363134568495200 cparts-id93--01 lay-margin-b--3 box">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-table-block lay-reset-child" id="cms-editor-minieditor-sin176363134568497800">
<table dir="ltr" cellpadding="90" cellspacing="90">
    <tbody class="lay-margin-b--1">
        <tr>
            <th></th>
            <th></th>
            <th>無料CMS</th>
            <th>ant2 CMS</th>
        </tr>
        <tr>
            <td>初期費用</td>
            <td></td>
            <td>なし</td>
            <td>なし</td>
        </tr>
        <tr>
            <td>操作性</td>
            <td></td>
            <td>簡単なものが多いが多少知識は必要</td>
            <td>直感的で初心者にも優しい</td>
        </tr>
        <tr>
            <td>デザイン自由度</td>
            <td></td>
            <td>制限あり</td>
            <td>カスタマイズ性が高い</td>
        </tr>
        <tr>
            <td width="180">テンプレート数</td>
            <td></td>
            <td width="500">
            <p>無料で使用できる種類が限られている場合あり</p>
            </td>
            <td width="500">300種類以上</td>
        </tr>
        <tr>
            <td>機能</td>
            <td></td>
            <td width="300">使用できる機能の制限あり</td>
            <td><span style="font-family: &#34;Noto Sans JP&#34;;">ブログ・トピックスなどはもちろん、<br />
            問い合わせフォーム・EC・多言語ページ自動作成など標準装備</span></td>
        </tr>
        <tr>
            <td>セキュリティ</td>
            <td></td>
            <td>自己管理が必要</td>
            <td>2段階認証、IPログイン制限など<br />
            システム側で対応</td>
        </tr>
        <tr>
            <td>サポート</td>
            <td></td>
            <td>フォーラム中心 / 英語多め</td>
            <td>国産CMSなので日本語サポート対応<br />
            電話、メール、フォームでのサポート</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12 direct-editing-wrap">
<div class="about-function-box bg-light">
<div class="direct-editing">
<div class="direct-editing__photo"></div>
</div>
</div>
</div>
</div>
<div class="cms-content-parts-sin176372026453456000 cparts-id79--01 dec-bg--light lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド" data-original="cms-content-parts-sin176372026453456000 cparts-id79--01 dec-bg--light lay-margin-b--3 box" style="margin-bottom:70px;">
<div class="lay-row">
<div class="cparts-txt-block lay-align-self-center lay-col12-xs-12 lay-col12-md-7 lay-col12-lg-7">
<div class="lay-reset-child" id="cms-editor-minieditor-sin176372026453441700">
<h4>ant2 CMSはこんな方におすすめ！</h4>
<ul>
    <li>自社で簡単にサイト更新・修正を行いたい中小企業</li>
    <li>管理やセキュリティも任せられる安心なCMSを使いたい方</li>
    <li>高額な費用をかけずに高機能なCMSを導入したい方</li>
    <li>店舗・教室・病院など、予約や問い合わせ対応が必要な事業者</li>
    <li>会員専用ページを活用した情報提供を行いたい団体</li>
    <li>簡単にサイトの中でECショップを開きたい店舗</li>
</ul>
<p>このようなニーズを持つ方には、<span data-start="2795" data-end="2813" style="font-weight: 700; color: rgb(59, 78, 154);">ant2CMSが最適な選択肢</span>となります。</p>
</div>
</div>
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-5 lay-col12-lg-5"><img src="https://ant2.net/images/magazine/2025/11/1763720203_960.jpg" alt="" width="200" id="cms-editor-image-sin176372026453409500" title="" name="" /></div>
</div>
</div>
<h4 class="cms-content-parts-sin176363181514085700" id="cms-editor-textarea-sin176363181514126500">まとめ</h4>
<div class="cms-content-parts-sin176363183321310200 cparts-id119 lay-margin-b--3 box" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="lay-col12-xs-12 lay-col12-md-12 lay-col12-lg-12">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin176363183321314300">
<p data-start="2304" data-end="2391">CMS選びは、単なる「サイト作成ツール選び」ではなく、ビジネスの成長や顧客対応の土台をどう構築するかという重要な判断です。<br />
無料CMSは「とりあえず始めたい」にはぴったりですが、「安心して運用できるか？成果につながるか？」という視点でCMSを選ぶことで、後悔のないWebサイト運用が可能になります。</p>
<p>ant2 CMSは、<strong>高機能・高セキュリティ・高サポート</strong>で、コスト以上の価値を提供するCMSです。</p>
<p>「情報を守りたい」「情報更新を自社で完結したい」そんな方は、ぜひant2 CMSをご検討ください。</p>
</div>
</div>
</div>
</div>
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin174522787727042200">
<p style="text-align: center;"><a class="dec-btn--primary dec-btn--size-lg" href="https://ant2demo.com/" target="_blank">デモ登録はこちら</a></p>
</div>
<h3 class="cms-content-parts-sin174704270199095800" id="cms-editor-textarea-sin174704270199100200" data-original="cms-content-parts-sin174704270199095800" style="margin-top:50px;">【イベント出展】『営業・マーケDXPO 東京'25【秋】』に出展いたします！（2025年11月27日・11月28日）</h3>
<div class="cms-content-parts-sin174704313143689400 box cparts-id437--01 lay-margin-b--3" col-flex="1-2" data-selectable="cparts-animate cparts-animate--slideInUp:上へスライド,cparts-animate cparts-animate--slideInDown:下へスライド,cparts-animate cparts-animate--slideInLeft:左へスライド,cparts-animate cparts-animate--slideInRight:右へスライド">
<div class="lay-row">
<div class="cparts-img-block lay-img-width--max lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6"><img class="cms-easy-edit" id="cms-editor-image-sin174704313143693200" src="https://ant2.net/images/magazine/2025/11/bnr-tka25_info_white-sales.png" width="300" height="74" alt="" /></div>
<div class="lay-col12-xs-12 lay-col12-md-6 lay-col12-lg-6">
<div class="cparts-txt-block lay-reset-child" id="cms-editor-minieditor-sin174704313143693600">
<p>ブース情報：<span style="white-space: normal;">有明GYM-EX（ジメックス）　小間番号【1 - 12】</span><br />
日時：2025年11月27日（木）～28日（金）　9：30～17：00<br />
詳細：<a href="https://ant2oem.net/event/2025/121999/">https://ant2oem.net/event/2025/121999/</a></p>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
</item>

</rdf:RDF>
