AIプログラミングツールは進化しているのに、なぜ作ったサイトは見栄えが悪いのか？AIコード生成からUIデザインまでの完全な解決策

W3Cは通常サイズの文字について、背景とのコントラスト比を少なくとも4.5:1にする基準を示しています。コントラスト比の基準があるように、見栄えはコードの生成だけでは整いません。今週は、最も重要なページを1つ選び、誰に何を伝えるかを決めてから、共通ルールを作り、画面を見ながら修正してください。AIコード生成で動くことと、読みやすく使いやすいことは別です。

AIプログラミングツールで作ったサイトの見た目に悩む開発者や、デザイナーなしで画面を仕上げたい個人制作者に向けた内容です。
小規模なサイトや試作品をチームで作り、見た目の判断基準をそろえたい場合にも役立ちます。

動作する画面と、整った画面の違い

AIプログラミングツールが指示からコードを生成しても、ページ全体の優先順位やブランドの雰囲気まで自動で決まるとは限りません。ツールごとに機能や得意な作業は異なります。見た目の問題を「AIのセンス」で片づけず、画面上のどこに不整合があるかを確認しましょう。

よくある原因は、主に次のとおりです。

依頼が抽象的です。「おしゃれに」「今風に」では、色や余白、文字の強弱を判定できる基準がありません。
画面の目的が曖昧です。誰が何を読むのかが定まらないと、見出し、説明、ボタンの優先順位も決めにくくなります。
部分ごとの生成が全体設計から離れます。ヘッダーとカードを別々に作ると、余白や角の処理、色の役割が食い違うことがあります。
仮の文言のまま確認します。短いダミー文では、実際の文章で起きる折り返しやカードの高さの違いが見えません。

同じページ内で、見出しの強弱が伝わるか、要素の左端がそろっているか、余白が一貫しているか、同じ役割の部品が同じ見た目かを見てください。問題を「なんとなく古い」とまとめず、「主ボタンが見出しより目立たない」のように画面上の事実へ言い換えます。

AIプログラミングツールで作ったページは、なぜ機能しても見栄えが悪いのでしょうか。動作確認は、リンクや処理が期待どおりかを見るものです。視覚のまとまりは別に確認する必要があり、レイアウト、情報の順序、文字、色のルールを指示しないままでは、機能確認だけで整った画面にはなりません。

曖昧な依頼と、判断できるデザイン方針

コードを作り始める前に、ページの使われ方を短く書き出します。ここが決まると、AIへの依頼も「見た目を改善して」から、判断可能な作業へ変えられます。

まず決めるのは、対象ユーザー、ページで完了してほしい作業、最初に伝える情報、画面に持たせたい印象です。たとえば、資料請求ページなら、最初にサービスの対象と利点を伝え、次に根拠、最後に申込方法を置く、という順番を決めます。「落ち着いた印象にする」だけで終わらず、装飾色を絞る、見出しの書体を統一する、といった目で確かめられる表現にします。

デザインの参考画面を使う場合も、丸ごと模倣するのではなく、参考にしたい要素を分解します。「見出しと本文の差」「カード間の余白」「ボタンの強さ」のように書けば、意図を共有しやすくなります。ページの目的と最初に見せる情報がつながっているかを確認し、違っていればコード生成へ進む前に見直してください。

注意：参考画像だけを渡すと、画面のどの特徴を取り入れるべきかが伝わらないことがあります。採用する要素と、変えずに残す要素を言葉で分けてください。

その場しのぎの装飾と、再利用できるルール

UIデザインの指示をAIが継続して反映できるように、色、文字、間隔、配置、部品の状態を共通ルールにします。ルールは、見栄えを飾るためではなく、画面間の一貫性を判断するためのものです。

色の役割：背景、本文、補助文字、主操作、警告を分けます。似た用途に別々の色を足さないようにします。
文字の階層：ページ見出し、節見出し、本文、注記の役割を決めます。サイズだけでなく、太さや行間もそろえます。
間隔と配置：コンテンツの幅、左右の余白、カード内部の余白を定めます。見た目を調整するたびに値を場当たり的に増やさないようにします。
部品の状態：通常時だけでなく、フォーカス時や無効時なども決めます。キーボードで操作した位置が見えなくならないように、フォーカス表示の説明も確認してください。

AIプログラミングツールで、統一されたレイアウトや文字を作らせるにはどうすればよいでしょうか。共通ルールを、対象の部品と適用範囲を含めて伝えます。「見出しを整える」ではなく、「すべてのページで同じ階層の見出しは同じ文字設定を使い、カード見出しは本文より明確に目立たせる」と指定します。生成後は、別ページの同じ部品にも同じルールが適用されているかを確認します。

UIデザインの希望を、実行できる指示にするにはどうすればよいでしょうか。「誰が使うか」「どの部分を変えるか」「どうなれば完了か」を一緒に書きます。たとえば、「初めて訪れた人が申込方法を見つけやすいよう、説明文より主ボタンを先に認識できる階層にし、スマートフォンでも本文とボタンが重ならないようにする」と伝えます。こうすれば、生成結果を画面上で照合できます。

一括生成と、段階を分けた制作

ページ全体を一度に作らせると、構造、装飾、文言、操作の課題が混ざり、どこを直すべきか見つけにくくなります。次の順に進め、各段階では確認する目的を絞ってください。

構造の下書き：必要な見出し、説明、操作を並べます。色や装飾は後回しにします。
ページの方向確認：重要な画面を1つ選び、最初に見せる内容と視覚の雰囲気を確認します。
部品の実装：決めたルールをヘッダー、ボタン、カードなどに反映します。同じ役割の部品が別の見た目になっていないかを確認します。
実際の文言への置き換え：完成予定の文章を入れ、長さや折り返しを確認します。仮の短文に合わせた配置を、そのまま完成と判断しないようにします。
画面幅への対応：画面幅が変わったときに、読み順や操作しやすさが保たれるよう調整します。CSSのメディアクエリーの役割は、MDNの解説で確認できます。

AIコード生成で作った初版を、どう段階的に改善すればよいでしょうか。各段階で変更対象を絞り、修正前後を比べます。たとえば、構造の確認中に色や影まで変更すると、問題が解決した理由を判断しにくくなります。画面の目的、実際の文章、主要な操作がそろってから全体を評価してください。

感覚的な評価と、スクリーンショットによる修正

スクリーンショットは、指示と結果を同じ画面で比較する手段です。見た目の問題を見つけたら、「もっときれいに」ではなく、位置、対象、期待する変化に分けて伝えます。

たとえば、カードの高さがばらつく場合は、「カードのタイトルと説明文の位置をそろえ、長い説明文でもボタンがカードの外に出ないようにする」と指定できます。主ボタンが目立たない場合は、「背景色を足す」だけでなく、周囲の文字との優先順位や配置も見直します。修正後は同じ画面を撮り直し、指定した問題が改善したか、別の要素を押しのけていないかを確かめます。

スクリーンショットを使って、画面を少しずつ改善するにはどうすればよいでしょうか。見出しの階層、整列、余白、色、文字、情報量を順に見て、気づいた点を具体的な変更指示にします。一度に多くの課題を渡すと、変更同士がぶつかりやすくなります。まず影響が大きい問題を直し、その結果を確認してから次へ進みます。

公開前の思い込みと、実画面での確認

見た目の改善は、制作者の好みだけで完了を決めないことが重要です。画面の大きさや操作方法が変わっても、内容と操作が損なわれないかを確認します。

W3Cのリフロー基準では、特定の例外を除き、幅320 CSSピクセル相当の表示でも横方向へスクロールせずに読めることが示されています。リフロー要件を基準に、狭い画面で見出しやボタンがはみ出さないかを確認しましょう。文字間隔や行間を広げても内容が欠けないかは、テキスト間隔の要件も参考になります。動きを使う場合は、利用者の設定に応じて抑えられるかをMDNの解説で確かめてください。

公開前には、次の項目を実際の画面で確認します。

[ ] ページを開いたとき、最も重要な情報と次に取る操作が見つかります。
[ ] 見出し、本文、補足の違いが文字の大きさや太さで伝わります。
[ ] 同じ役割のボタンやカードが、ページをまたいでも同じルールで表示されます。
[ ] 実際の文章を入れても、文字や画像が重ならず、内容が途中で切れません。
[ ] 狭い画面でも横スクロールが生じず、主要な操作を無理なく行えます。
[ ] キーボード操作中の位置が見え、ボタンなどの押せる範囲も確認できます。ターゲットサイズの基準では、例外を除く最小サイズとして24×24 CSSピクセルが示されています。
[ ] ページの主要な作業を最初から最後まで試し、操作の結果が利用者に分かります。

修正を続けるか迷ったら、気になる点を「誰が」「何を見落とすか」「何を変えれば改善するか」に分けてください。どれも具体化できないなら、色や装飾を追加する前に、ページの目的や情報の順序へ戻るほうが有効です。

すでに手元の環境で開発している場合、実画面の確認が同じ端末に偏ることや、開発環境と確認環境の違いが見落としにつながることがあります。一時的に別のMac環境で開発や表示確認を行う必要があるなら、利用できる環境や条件を事前に確認し、長期運用や物理接続が必要な作業は手元のMacと比べて選んでください。Hashvpsの利用手順に不明点があれば、ヘルプ情報を確認できます。

今週は、チェック項目を使って重要なページを1つ仕上げてください。デザインの指示、修正前後のスクリーンショット、複数の画面幅での確認まで記録すれば、次のページにも再利用できる判断基準が残ります。