ハイクオリティなワイヤーフレームを、一瞬でつくりたい。
今回はそんなプロンプトを、1つにまとめました。
ワイヤールールをClaudeにおぼえさせると、かなり時短になります。
もくじ
- ルールとして「スキル登録」させる
- コピペ用プロンプト
- それぞれのルール解説
- 複数ページのサイトは、Claude Codeで
ルールとして「スキル登録」させる
プロンプトを貼ると、Claudeがスキル用のファイルを用意します。 それを登録すれば、次からは「ワイヤーをつくって」だけでOKです。
- 次の「コピペ用のプロンプト」を渡すと、ZIPファイルがつくられる。
- チャットに表示される「保存ボタン」を押す。
これで、毎回プロンプトを貼る必要がなくなります。
※スキル機能は、Pro・Maxなどの有料プランで使えます。
コピペ用プロンプト
Claudeのチャットに以下を貼りつけると、スキルの登録（ルールとしておぼえておくための登録）がはじまります。
チャットの案内に従って、✔️ 保存ボタン を押すだけでOK。
以下は、ワイヤーフレーム用プロンプトです。これをスキルにしてください。
HTMLで、ワイヤーフレームを作成して。 以下のルールを、すべて守ってください。
【レイアウト】 ・読む負担を感じさせない、みてわかるレイアウトにして。 ・洗練された、都会的でミニマルなレイアウトにして。 ・余白とバランスは、ページ全体をうまく活用して。 ・フォントは Noto Sans JP、やや小さめにして。
【デザイン】 ・色は「白・黒・グレー」だけにして。 ・背景は基本白にして。全面が黒のページは作らないで。 ・無駄な英語、線、シャドウなどの装飾は一切しないで。 ・図や画像が必要な部分は、グレーボックスにして。 ・アイコンは「Font Awesome」の無料版を使って。
【ライティング】 ・1文を、やや短くして。読点を1文に最低1度は使って。 ・1〜2文ごとに、段落を分けて。 ・漢字は違和感がない程度に、ひらがなにして。（例：行う=おこなう） ・強調したい名称やセリフには、記号「」を活用して。 ・誤字や脱字は直して、ですます口調に統一して。
それぞれのルール解説
ルールの内訳が知りたい方のための、解説です。
1.レイアウトとデザイン
「みてわかるレイアウト」で、情報の優先順位が整います。 「白・黒・グレーだけ」にすると、デザインが暴走しません。
https://x.com/hiroho150cm/status/2061576024878633393
2.アイコン
アイコンを「Font Awesome」に指定すると、見栄えがぐっと上がります。
https://x.com/hiroho150cm/status/2062376294688387540
3.HTMLでつくる
HTMLにすると、生成も修正もサクサクです。
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4.ライティング
中の文章まで、そのまま使える読みやすさになります。
https://x.com/hiroho150cm/status/2063750350776287429
複数ページのサイトは、Claude Codeで
ここまではLP（1ページ）の話です。 複数ページのサイトは、やり方を変えます。
チャットのプレビューでは、複数のHTMLの切り替えがうまくできません。 そこで「Claude Code」を使います。
デスクトップにフォルダを用意して、その中でまとめて管理します。 そうすれば、複数のHTMLファイルを、Claude Codeがちゃんと編集してくれます。
https://x.com/hiroho150cm/status/2065267853922898022
Claudeを使った、Web制作やディレクションの時短術を発信しています。
これからも役に立つ情報をお届けするので、よかったらフォローしてください。
