ガイド
AI でサイトを作り、見た目を整えて公開する方法。コピペで使えるプロンプト、シンプルなルール、チェックリストは Claude、ChatGPT など、どの AI でも使えます。
はじめての方はこちら
この順に読む 3 つのガイドで、チャットの中のファイルから、胸を張って共有できるサイトまでたどり着けます。
AI ウェブサイト早見表
すべてのルールを印刷できる 1 ページにまとめ、70 のプロンプトを作業別に整理しました：サイトを始める、スマホ表示を直す、文章を書き直す、壊れたところを直す、公開する。
公開する
チャットの中のファイルから、誰でも開けるアドレスへ。
デザイン
ルールをはっきり書けば、AI は毎回それを守ります。
デザイン16 分
美しいサイトのためのプロンプト・チェックリスト
デザインの原則をやさしい言葉で、判断ごとのプロンプト、そして出来がありきたりなときの手早い直し方。
ガイドを読む →
デザイン12分
AI アシスタント向けデザインブリーフ
シニアデザイナーが守るルールを AI 向けにまとめました。まず12の重要ルール、続いて詳細と提出前チェックリスト。リンクで渡すか、どのチャットにもコピーして貼り付けてください。
ブリーフを読む →
デザイン11 分
うまくいく配色とフォントの選び方
コントラストを確認済みの配色、目で見てわかるフォントの組み合わせ、文字サイズ、ダークモード。
ガイドを読む →
早見表印刷できます
AI ウェブサイト早見表
すべてのルールと 70 のプロンプトを、印刷できる 1 ページに。
チートシートを開く →
文章
テンプレートっぽくない、あなたらしい言葉を。
公開と安全
サイトを誰にとっても使いやすくするチェック。
クライアントの仕事
他人のためにサイトを作るフリーランス向け。
初心者がよく見落とすコツ
AI はデザインの原則を知っていますが、言葉にして伝えたほうがずっと一貫して適用してくれます。「モダンにして」と言うと、平均的なウェブサイトに近いものができます。階層、余白、コントラスト、モバイルを名指しすると、デザインされたように見えるサイトになります。次のプロンプトに、これを加えてみてください：
Design this like a senior product designer: clear visual hierarchy with one focal point per section, a consistent spacing scale, two fonts at most, text contrast of at least 4.5:1, mobile-first with 44 px tap targets, subtle motion that respects reduced-motion settings, and accessible to WCAG 2.2 AA. Before coding, ask me any questions you need, then describe the design direction in five bullets and wait for my OK. More details: pagelemon.com/guides/design-brief