# 2026年のAI ウェブデザイン：節約できることと壊れること URL: https://noonwp.com/ja/journal/ai-web-design Type: blog Locale: ja Published: 2026-11-03 Updated: 2026-11-03 --- > AI ウェブデザインはレイアウトや下書きを速めますが、テーマのトークン、コントラスト、RTLで崩れることがよくあります。ブロックテーマでの使いどころを整理します。 AI ウェブデザインとは、ページの構成や配色、文章を平易な言葉で指示し、使える下書きを数分で受け取る作業を指すことが多いです。白紙の段階や似たパターンの量産では、実際に大きな時間の節約になります。一方で、生成されたページはデザイントークン、アクセシビリティ、右から左への表示（RTL）で崩れやすく、修正に予想以上の時間がかかります。このフォリオでは、AI ウェブデザインがどこで役立ち、どこで余計な手間を生むのかを、WordPress のブロックテーマ案件の視点で整理します。 ## 2026年のAI ウェブデザインは何を担うのか 「AI ウェブデザイン」という言葉の下には、性質の違う四つの仕事が隠れています。ひとまとめにして考えると、期待と結果のずれが起きやすくなります。 - **レイアウト生成**: 指示文からワイヤーフレームや、ページ全体の構成を作る。 - **ビジュアルスタイリング**: 配色、フォントの組み合わせ、余白の尺度、画像の雰囲気を決める。 - **コンテンツの下書き**: 見出し、マイクロコピー、代替テキスト、本文の最初の版を書く。 - **コード出力**: HTML や CSS、WordPress の場合はブロックマークアップと theme.json の値を出力する。 一つのツールがこの四つすべてを高い水準でこなすことは、まれです。説得力のあるヒーローセクションを生成するツールが、そのまま本番に出せないマークアップを吐くこともあります。逆に、きれいな PHP を書くコード支援ツールは、視覚的な階層を理解していないことがあります。ツールを選ぶ前に、どの仕事を任せたいのかを明確にしてください。補足すると、この整理は WordPress 6.5 以降に当てはまります。そこではブロックマークアップこそが実際の成果物だからです。 ![プリントしたウェブサイトのセクションカードを、ノートパソコンの横に並べるデザイナー](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/20bb59-i1.webp) ## どこで実際に時間を節約できるのか 実案件での経験では、主に三つの場面で効果があります。 **白紙の段階。** ブリーフから最初の構成を作るには、以前は半日のスケッチが必要でした。今では指示文ひとつで、数分のうちに六つの大まかな方向性が出てきます。そのうち五つは捨てることになるでしょう。それでも、悪い下書きを却下するほうが、中立的な案をゼロから考えるよりずっと速いので、十分な成果です。 **似たバリエーションの量産。** 同じセクションをダークとライトの両方で用意したい場合や、A/Bテスト用に料金表を四パターン作りたい場合、この作業は機械的です。AI は文句ひとつ言わずにこなします。 **コピーの土台づくり。** 実際のビジネスらしい仮のテキストがあると、クライアントはダミーテキスト（ロレムイプサム）ではなく、デザインそのものに反応できます。ただし、これは土台として扱うべきです。仮のまま公開する人はいないはずです。 海外のデザイン業界でも、同じ傾向が報告されています。UX Tools による [2026年春のデザイナーとビルダー向け調査](https://survey.uxtools.co/) では、ツールの乱立と AI 出力の品質が作業を遅らせる主な要因として挙がりました。フリーランスの実感とも一致します。最初の下書きは速い。時間がかかるのは修正作業のほうなのです。 ## 生成されたデザインが本番で壊れるのはなぜか スクリーンショットはシステムではないからです。生成されたページはプレビューでは完成して見えても、実際のコンテンツが入ると崩れます。 私たちが AI 生成ページの監査で繰り返し見ている問題は、次のようなものです。 - theme.json で定義された余白の尺度ではなく、ピクセル値を直接書き込んでいる。 - 色が各ブロック内に16進数で直接書かれているため、ブランドカラーを変えると四十か所の編集が必要になる。 - 見出しが構造ではなく大きさで選ばれていて、スクリーンリーダーが利用する見出しの階層が壊れている。 - グループブロックが何重にも入れ子になっていて、一つで足りる箇所に層が重なっている。 これらはプレビューには現れません。三か月後に、クライアントがアクセントカラーを変えたいと言い出したときに表面化します。既存のデザイントークンに対して出力できないツールは避けてください。theme.json を読めないツールは、デザインではなく描画をしているにすぎません。 ## AI ウェブデザインは初期状態でアクセシブルか いいえ。その理由は数字で明らかです。[WebAIM Million 2025 レポート](https://webaim.org/projects/million/2025) によると、アクセス数の多い上位100万のホームページの94.8%で、検出可能な WCAG 2 の違反が見つかりました。最も多かったのは、低コントラストのテキストです。モデルはそのウェブを学習しているため、同じ癖を再現してしまいます。 つまり、生成されたパレットはエレガントに見えても、本文で4.5:1のコントラスト基準を満たさないことがよくあります。生成画像は代替テキストなしで届くか、画像の中身を説明するだけで目的を伝えない代替テキストが付いてきます。生成されたボタンは、支援技術にとってラベルのないスタイル付きリンクになっていることもあります。 生成されたページには、必ずコントラストの確認とキーボード操作の確認を行ってください。十分ほどで済み、品質を守るもっとも安価な手段です。 ![カラーパレットのチップと書体のサンプルを、ルーペと一緒に平らに並べた様子](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/132d37-i3.webp) ## 主要ツールはWordPress実務者にとってどう比較されるか 比較は、測定できる基準で行いましょう。最初の下書きまでの時間、生成されるコードの品質、RTL への対応、そして成果物がどこに置かれるかです。 10Web は、プロンプト、URL、または Figma ファイルから WordPress サイト全体を生成し、そのままホスティングまで行います。WordPress 向けのエンドツーエンドにもっとも近い選択肢ですが、そのトレードオフとして、ネイティブブロックではなく Elementor ベースのエディタになります。クライアントとの打ち合わせ用の素早いプロトタイプには向いています。本番ビルドとして採用する前には、必ず監査してください。 Framer は、アニメーション付きの洗練されたページを素早く作り、見栄えの良い成果物を書き出せます。ただし WordPress の外で動きます。方向性を検証するために使い、ブロックテーマとして納品するためのものではありません。 Durable は速度を重視しています。事業の説明を入れると、小さなサイトが出てきます。今日中に公開しなければならないランディングページには十分です。カスタムテンプレートを持つ多言語サイトには向きません。 Webflow は、構造とクラスを細かく制御でき、その上に AI 機能が乗っています。エージェンシーが WordPress に縛られていないなら、ここでもっとも規律のある選択肢です。WordPress を使うのであれば、結局は結果をブロックで組み直すことになります。 詳しくは、[AI ウェブサイトビルダーの比較](/journal/best-ai-website-builders)と[WordPress での AI 活用](/journal/ai-for-wordpress)で扱っています。このフォリオはツールのランキングではなく、デザインの進め方に集中します。 ## サイトが右から左へ読まれるとき何が変わるのか それまで曖昧に済んでいた部分が、すべて目に見えるようになります。学習データの大半は左から右に組まれているため、RTL のウェブは AI ウェブデザインの死角がもっとも鮮明に出る場所です。 生成されたアラビア語やヘブライ語のレイアウトは、テキストは反転しても構造は反転しないことがよくあります。矢印や進捗バーのように方向を持つアイコンは、逆を向いたままです。left と right で指定された余白は反転しませんが、margin-inline-start のような論理プロパティなら反転します。ラテン文字向けに選ばれたフォントは、アラビア文字の隣で不釣り合いに見えるフォールバックが当たります。 ![右から左へ組まれたページのレイアウトを映すモニター](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/661d4c-i2.webp) 二言語の MENA 案件での私たちのルールは、こうです。構造は主要言語で一度だけ生成し、そこから先はテーマの中で論理プロパティを使ってミラー版を作ります。モデルに「アラビア語で作り直して」と頼むと、別のページが生まれ、余白もバグも別物になります。 ## クライアント案件で使える現実的なワークフローと指示の書き方 ブロックテーマでの作業を前提にした、実案件で使っている流れです。 **ステップ1: ブリーフを制約として書く。** 想定読者、トーン、必ず存在させる三つのセクション、theme.json にすでにあるブランドのトークン。制約つきの指示文は、比較できる結果を返します。形容詞だらけの指示文は、ムードボードを返すだけです。 **ステップ2: 画面ではなく構造を生成する。** まずセクションの順序とコンテンツの階層を求めてください。誰かが色を見る前に、骨組みを承認しておきます。 **ステップ3: ネイティブブロックに翻訳する。** 承認された構造を、コアブロックで組み立てます。動的なコンテンツにはクエリループ、繰り返される部分にはパターンを使います。noonwp の Pattern Forge は、まさにこの段階のために作られています。説明したセクションが、あなたのトークンを読み込んだブロックパターンになります。 クライアントが求めているのがパンフレットサイトではなくショップなら、早い段階で決めてください。WooCommerce での構築と、WiziShop のようなホスト型ショップとでは、デザインの方向性が異なります。その選択は、AI が代わりにしてはくれません。 **ステップ4: 納品前に監査する。** コントラスト、見出しのアウトライン、キーボードの操作順、画像の重さ、そしてクライアントが書きうる最も長いタイトルでの実コンテンツ確認です。 **ステップ5: 人間による最終承認を残す。** クライアントが対価を払っているのは判断力です。モデルは提案でき、判断するのは実務者です。 プロンプトはどのくらい具体的にすべきか。自然に感じるより具体的に、そして決まった順序で書くべきです。視覚的なムード（「モダン」「クリーン」「大胆」）から始まるプロンプトは、これまでに作られたあらゆるサイトに当てはまってしまうため、汎用的な結果になります。読者のタスクから始めるプロンプトは、構造を生みます。 私たちが使っている型は次のとおりです。 - このページを誰が開き、一分以内に何を終えようとしているのか。 - このページが生み出すべき単一のアクション。 - 必要なセクションを順番に、それぞれの文字数の目安とともに。 - 固定されたトークン。たとえばタイプスケール、パレット名、余白のステップ。 - 含めてはいけないもの。たとえばストック写真のヒーローバナーや、三列のアイコングリッド。 最後の項目は見た目以上に重要です。モデルはウェブ全体の平均へ引き寄せられ、その平均とは、ヒーロー、三つのアイコン、お客様の声のカルーセルです。ツールに避けるべきものを伝えることが、他と同じに見えないものを得るもっとも速い方法です。 プロンプトは一息で読み切れる長さに保ってください。下書きが外れたら、修正を積み重ねるのではなく、制約を一つだけ変えて生成し直します。修正を五つ重ねると、各指示が互いに争うページになり、どの変更が効いたのか分からなくなります。 ## 納品前に確認すべきことと、すべての案件で使うべきかどうか 毎回同じ順序で行う短いチェックリストが有効です。疲れた日に飛ばしてしまう念入りな確認より、一貫性のほうが大切だからです。幅360ピクセルでページを開き、はみ出しがないか確認します。ページ全体をタブキーで移動し、フォーカスリングがどこでも見えるかを確かめます。プレースホルダーの見出しを、実際のもっとも長い見出しに差し替えます。二言語サイトなら言語を切り替えます。そのうえで表示速度の監査を行います。生成された画像は、必要な量の数倍重いことがよくあるからです。 これはステージング環境で、クライアントの実際のフォントを読み込んだ状態で行ってください。代替フォントの状態で通るページも、最終的な書体が届いた瞬間に壊れることがあります。 では、すべての案件で AI ウェブデザインを使うべきでしょうか。予算が小さく、構造が一般的で、クライアントが主にスピードを求めている場合には価値があります。地域の店舗サイト、イベントページ、提案用の最初のプロトタイプなどが該当します。 一方で、サイトが独自のアイデンティティや厳格なアクセシビリティの約束、あるいはネイティブに感じられるべき RTL レイアウトに依存する場合は避けてください。その場合、修正作業は手で設計するより高くつき、生成された下書きが全員を凡庸な出発点に縛りつけてしまいます。 中間の立場は地味ですが、誠実です。初期の選択肢を広げることと、繰り返しの制作を任せることには AI を使い、構造、トークン、アクセシビリティは人の手に残します。ベンダーが約束するほどの大きな話ではありません。それでも、クライアントの最初の変更依頼を乗り越えられるのは、この小さな約束のほうです。 今週、実案件を一つ選び、骨組みだけを生成して、残りはブロックで組んでみてください。かかった時間を正直に測り、そのうえで、どれをワークフローに残すかを決めましょう。 ## FAQ ### AI ウェブデザインとは何ですか？ 文章による説明、URL、スケッチなどから、生成ツールを使ってページのレイアウト、ビジュアルスタイル、文章、コードを作ることです。WordPress では、役に立つ成果物はスクリーンショットではなく、ブロックマークアップと theme.json の値です。 ### AI はWebデザイナーを置き換えられますか？ クライアント案件では無理です。最初の下書きや反復的なバリエーションを速めることはできますが、構造、ブランドのトークン、アクセシビリティ、最終判断には、結果に責任を持つ実務者が必要です。 ### AI で生成したWebデザインはSEOに有効ですか？ 見出しの構成が適切で、画像が軽く、表示が速ければ有効になりえます。ただ、生成されたページの多くはこれらの点で不合格になるため、公開前に見出し、画像の重さ、Core Web Vitals を監査してください。 ### AI ウェブデザインは右から左へ読む言語で使えますか？ 注意すれば可能です。生成されたアラビア語やヘブライ語のレイアウトは、テキストは反転しても構造は反転しないことがよくあり、方向を持つアイコンが反転しないまま残り、物理的な余白を使っています。代わりに論理プロパティを使ってミラー版を作ってください。 ### WordPress に最適な AI ウェブデザインツールはどれですか？ 10Web がもっとも近いエンドツーエンドの選択肢ですが、Elementor ベースのエディタを使います。ネイティブのブロックテーマを使うなら、どのツールでも構造を生成し、その後コアブロックとパターンで組み直してください。 ### AI で生成したページを直すのにどのくらいかかりますか？ 私たちの監査では、修正作業のほうが生成より長くかかることが多いです。納品前に、トークン、コントラスト、見出しの構造、実コンテンツでのテストに時間を見込んでください。