📱 Macは置いてあるだけ。スマホからClaude Designでサイトをリデザインした話

今朝、ゴロゴロしながらサイトをリデザインしました。

Macは自宅で起動したまま置いてある。スマホ1台で完結。

「コードは書けないけどサイトのデザインを変えたい」という人に、

Claude Design は大きな武器になる。

学長マガジンでClaude Designが即共有されていて、

びっくりしましたΣ(･ω･ﾉ)ﾉ！

なぜなら両学長が朝ライブでClaude Designを知ったはずなのに、10:26にはマガジンで知識をシェアしていたから…。

Claude Designについては両学長のマガジンに説明があるのでこちらをみてください。

短時間でサイトのデザインを変更できる事実は、マガジンの投稿時間からわかると思います。

産業革命にあやかろうとあがく日々

私は収入0円の個人事業主。自分のブログ(サイト)を運営していますが、エンジニアではありません。

今までデザイン変更は「Claudeに全部任せた」方式でした。細かい色の修正や使いづらさは、テキストで頑張って伝えて大雑把な指示しかできませんでした。

それが今回、Claude Designを使ったら、プロンプトを打ち込むだけでデザインが完成しました。

実作業は1時間ちょっとで終了✨

こんな感じで進めました

プレビュー画面を見ながら、ここがちがうな？と思ったら、スクショして、Claude AIにどうにかできないかなと相談。

作ってくれたプロンプトをClaude Designに入力。

💡 ワンポイント：Claude AI → Claude Designの2段階プロンプト

修正したい箇所をスクショしてClaude AIに相談すると、Claude Designに入れる用のプロンプトを作ってくれます。

直接Claude Designに書くより、一度別のClaudeに相談してから投げるのが効率的でした。

🧭 そもそもClaude Designって何？

Anthropic社が提供する、AIにデザインを作ってもらえるツール。

2026年4月17日にローンチされた。Research Preview（お試し公開）の段階なので、今後仕様が変わる可能性はあり。

スマホで開ける。インストール不要、アプリも不要、ブラウザだけで動く。

「デザインを一緒に考えてくれるAI」。プロンプトを入力すると、HTMLとCSSでデザイン案を作成。

🔓 STEP1　SafariでClaude Designを開く

URLはこれだけ。

claude.ai/design

Claudeにログインしていれば使えます。

※私はMaxプランを使用。

操作の流れ：

※わたしは Safari を使用。

1. claude.ai/design を開く

2. Prototype タブ

3. Project name：＿＿＿.com

4. High fidelity を選択

5. + Create をタップ

6. Claude AI で作成したプロンプトを貼って送信

✍️ STEP2　プロンプトは「レイアウト・色・フォント・世界観」を具体的に

ここが一番大事。

「おしゃれにして」は絶対NG。方向性がバラバラになって、収拾がつかなくなります。

コツは固有名詞を入れること。フォント名・色名・レイアウト名を具体的に書くと、ぐっと精度がアップ。

あと、世界観のメタファーをひとつ決めるとグッド。

私の場合は、やりとりの中で「棚」というメタファーが自然に生まれ、それを軸にしました。AIも自分も迷子にならないよう、見本のリサーチが大切🔰

メタファー

デザイン界隈ではよく使う言葉です。「概念的なイメージのたとえ」みたいな意味で。ただわかりづらい💦

私が実際に打ったプロンプト内容

Bento型グリッドレイアウト。

手描き風のやわらかいカード。

クリーム色ベース、アクセントはコーラル。

フォントは日本語 Klee One、英字 Fraunces。

アプリが20個に増えても崩れない構造で。

載せるアプリは（5つの名前）

クロコと一緒に見本のテイストを決める

Claude AI にプロンプトを考える前に、クロコに自分のホーム画面を読み込んでもらって、見本となるサイトを見つけてもらいました。

テイストを真似る。

そして、Claude AI にプロンプトを考えてもらいました。

↓

Claude Designに投げたプロンプト

個人開発アプリ置き場「＿＿＿＿.com」のホームページ。

【レイアウト】

Bento型グリッド。カード大きさを変えて強弱。

アプリが20個に増えても崩れない構造。

モバイル1列、PC 2-3列。

【デザイン】

手描き風カード（角丸、ラフな線、ほんのり傾き）

クリーム色ベース + コーラルのアクセント

フォント：日本語 Klee One / 英字 Fraunces

温かみ重視

【カード内容】

各アプリカードに：アイコン・アプリ名・一言説明・

カテゴリタグ（🏠日常 / 📚学習 / 🛟防災）

【掲載アプリ】

🏠日常

・今何をする（imanani）- 予定・日課・学校・浣腸

・なんじにでようかな - 出発時間がわかる

📚学習

・アズキの算数 - 小3算数ゲーム

🛟防災

・1こだけ、そなえる。- 今日1つだけ準備

・Kurenai. 紅、ひとつぶん。- 35章防災シミュレーション

【ヘッダー】

MY APPS / ＿＿＿＿＿ / by クロコ × わたし

【フッター】

Made with ♡ by ClaudeCode

✂️ STEP3　修正は1回1箇所。消す指示を怖がらない

1回目は盛られすぎていた。

装飾が多い、情報が重複している、使っていない機能のボタンが飾りで置かれている。

修正の鉄則は1回の指示で1箇所だけ。一度に複数変えようとすると、思っていない場所まで変わってしまう。

「消して」「削除して」という指示を怖がらなくてOK。Claudeは親切なので盛りがちになる。だからこそ引き算の指示が大事。

私が実際に投げた修正指示①

上部のフィルタタグを全部削除して。フィルタ機能がないのに表示されてるから

修正指示②

各カードの中にある「日常」「学習」などのカテゴリタグも削除して。セクションタイトルで分類されているから重複している

修正指示③

左下の「v01」という表記を「2026」に変えて。バージョン番号は訪問者に意味が伝わらないから、作った年に

修正指示④

ヘッダーをスリムにして。ファーストビューに1枚目のカードがしっかり収まるように

📤 STEP4　書き出しは2パターン

デザインが完成したら、次はサイトへの反映。2パターンを紹介します。

パターンA　Claude Code環境がある人

デザイン画面の右上に、ダウンロードアイコンがある。そこから「Handoff to Claude Code」を選ぶと、「Copy command」というボタンが出てきます。

これをコピーして、Claude Codeに貼り付けるだけ。自動でファイルが生成されます。

Copy commandの下に「Give the agent more detail on what to implement」という入力欄。ここに実装要件を書き足しておくと、後のやり取りが減って楽。

私はここに「index.htmlとして実装」「各アプリカードのリンク先URL」「レスポンシブ対応」と記入。

ちなみに、ファイルパスを書くときは ~/プロジェクト名/ のように書くと、ユーザー名が映らない。スクショをSNSに上げるときに安心です。

※環境設定についてはこちらで紹介しています。

パターンB　Claude Code環境がない人

「Download project as .zip」はZIPがダウンロードできる機能。中に入っているHTMLをサーバーにアップする流れになると思う。

私はパターンAで完結したので、こちらは未確認💦

🛠 ちなみに私の環境

自宅のMacにClaude Codeを入れています。

Tailscaleで自宅のネットワークに繋いで、Terminusで遠隔操作。

実家のお母さん(クロコ)に、電話して指示をしているイメージ。

詳しくはこちらで説明しています。

スマホから自宅Macを操作して、Claude Codeにコマンドを貼って、サーバーに直接ファイルを配置する流れ。

この環境を組むまで、試行錯誤はこちらで紹介。そのおかげで、今回のリデザインもスマホ1台で完結できました。

子守でゴロゴロしながら、作業できるのでありがたいです✨

なぜか、離れると気がついて起きるので、子どもって不思議ですよね。

🎁 まとめ

コードは書いていない。デザインの知識もない。

プロンプトで「世界観」を伝えて、修正を重ねて、コマンドを貼った。それだけ。

「デザインを変えたいけどコードがわからない」という人は、まず claude.ai/design で遊んでみてください。

1回目が出てきたときの感覚は、なかなかおもしろい

(=ﾟωﾟ)ﾉ

感謝 : Windowsでノウハウ記事は書きました。スクショに使用したのは「MOZ-3 Quick Shot(QS)」。サクサク画面をスクショできたのでなんとかノウハウ図書館での Claude Design レビュー記事のほぼ最速公開に間に合いました。

途中、PC🖥️だとホーム画面のデザインが惜しい感じになっているのに気がつきましたが…

まぁ、許容範囲です。気が向いたときに修正しときます。おそらく、続々とノウハウが寄稿されると思うので、情報を待って修正します。

---

シリーズ1本目: スマホだけで Claude Code を操作する方法

シリーズ2本目：コードが読めない私のAIに「いつものやつ」が通じた7つの仕組み｜Claude Code一次情報

シリーズ3本目：スマホからClaude Designでサイトをリデザインした話