Claudeでホームページを作れるのか、実際に試してみました。
今回は仕事で使う本番サイトではなく、あくまで練習用です。
「ClaudeDesignだけで、どこまでホームページっぽいものが作れるのか」を試したかったので、架空の施設サイトを作って、Netlifyで公開してみました。
作ったサイトはこちらです。
内容は、車で5分くらいの場所にあったら嬉しいなと思う、妄想の架空施設です。
エビ養殖、シェアBBQ、野菜、ニジマス、カプセルホテル、産直市場などがある、かなり自由な施設設定にしました。
実在するお店や施設ではありません。
建設費だとか建築基準法だとか何も気にせず考えるの楽しかったです。
この記事の前提
今回使った主なツールはこちらです。
- ClaudeDesign
- ChatGPT
- Canva
- Netlify
私は、Claude・ChatGPT・Gemini・Adobe製品・Canvaなどを有料プランで使っています。
そのため、この記事の内容は、無料プランだけだと同じようにできない部分が多いかもしれません。
特に画像生成、ファイルのやり取り、デザイン作成、書き出しなどは、使っているプランや時期によってできることが変わる可能性があります。
課金ユーザーが試してみた作業記録です。
今回作ったもの
今回作ったのは、架空施設「EBi-SUPA」のホームページです。
施設の内容は、ざっくりこんな感じです。
- エビ養殖
- シェアBBQ
- ニジマス養殖
- 共生農法の畑
- カプセルホテル
- 産直市場
- 小さな宿泊エリア
- 自然の多い滞在型パーク
実在する施設ではなく、完全にこういうとこあったら良いのにという妄想で作ったものです。
作業の流れ
今回の流れは、大きく分けるとこんな感じです。
- ClaudeDesignでサイトのデザインを作る
- ChatGPTで挿入用の画像を生成する
- ChatGPTとCanvaでロゴを作成する
- ClaudeDesignに戻って、ロゴ・ファビコン・挿入画像を渡す
- 指示やedit機能で全体を微調整する
- ファイルを書き出す
- Netlifyにアップロードして公開する
順番に記録していきます。
各ツールの基本操作とかは省略します。Youtubeで分かりやすく解説してくださってる方いらっしゃるのでおすすめです。
① ClaudeDesignでサイトのデザインを作る
まずはClaudeDesignに、作りたいサイトの内容を文章で伝えました。
書いた内容
架空の「ビブリオカフェ×銭湯×コワーキングスペース」の「コワーキングスペースANN-MiTU」 という大型なコワーキング複合施設のHPを作りたい。足湯のスペースもあったり子連れも長時間のんびり過ごせる。ここは広い畳のスペースがあってそこで本を読むのも飲み食いもいい、畳は正方形のマットレスタイプが置いてあるから小さな子とかこぼして汚してもすぐに交換できる。本を読んだり勉強したりパソコンを持ち込んで仕事をしたり長時間ゆっくり過ごせる。デザインは桜モチーフでピンク系だけど和風で落ち着いてる感じ。下層ページは「メニュー一覧」「施設のご利用方法」「アクセス」「和菓子作り教室」で。内容はいい感じに作っていいです。ここで和菓子作ってる人が教室もそのままここで開いてる。アニメーションや画像挿入場所が豊富な視覚的に見てて楽しい感じに。画像を入れるとこは後で作るからスペースを確保で黒い背景でどのような画像がいるかだけ白い文字で書いてほしい。【画像1】と上から番号を振って。入場料はなくて畳エリアで休憩だけなら誰でも使える。カフェや銭湯を使うにはそれぞれで必要なだけ。飲み物食べ物の持ち込みもOKだし、近隣の提携してる飲食店からなら出前も注文できる。コワーキングの利用は無料にすることで他のもので利益上げてる。
最初はコワーキングスペースにしようとしてましたそういえば。プロンプトは全然詳しくないです、雰囲気で乗り切っています。
② ChatGPTで挿入用の画像を生成する
サイトの土台ができたら、次に挿入用の画像を作りました。
今回は、ChatGPTで画像生成を使っています。
③ ChatGPTとCanvaでロゴを作成する
ChatGPTでの生成だとなかなかしっくりが時間がかかったので、アイコンだけ使って、
文字はCanvaで入れました。
④ ClaudeDesignにロゴ・ファビコン・挿入画像を渡す
ここでは、作った素材をそのまま渡しました。
こんな感じ。後から知りましたがローカルのファイルを参照で一括でできたみたいです。
このとき、ファイル名に「どのページ・どの場所で使う画像なのか」が分かるように名前を入れておきました。
たとえば、
- top-main-image
- bbq-area
- shrimp-farm
- market-image
- logo
- favicon
のような感じです。
そして、ClaudeDesignにはかなり大雑把に、
「ファイル名を見て、合いそうなところに入れてください」
というように指示しました。
⑤ 指示やedit機能で全体を微調整する
素材を入れたあとは、全体を見ながら微調整しました。
レスポンシブデザインになってなかったりスマホサイズだと表示が崩れてたり。これも指示だけで直りました。
⑥ ファイルを書き出す
デザインと内容がある程度まとまったら、ファイルを書き出します。
右上のShare＞export＞Project archive＞Download
今回は、ClaudeDesignからホームページ用のファイルを出して、それを公開用に使いました。
本格的なWeb制作だと、コードの整理やSEO、表示速度、問い合わせフォーム、アクセス解析、独自ドメイン設定なども考える必要があります。
でも今回は練習なので、まずは「作ったものをブラウザで見られる状態にする」ところまでです。
最初にエクスポートしたらファイル名がNetlifyと互換性がなかったので、「index.htmlとかシンプルなファイル名に全部変えてください」と指示してやり直しれこれでOKです。
⑦ Netlifyにアップロードして公開完了
最後に、書き出したファイルをNetlifyにアップロードしました。
今回は、練習で公開したいだけだったのでNetlifyを使っています。
公開したサイトはこちらです。
本格的に独自ドメインで公開するなら、Xserverなどのレンタルサーバーでもできます。
普段から使っているサーバーや、管理しやすいサービスがあるなら、そちらで公開しても良いと思います。
今回のまとめ
今回は、ClaudeDesignを使って架空施設のホームページを作り、Netlifyで公開してみました。
今回の流れは、
- ClaudeDesignでサイトのデザインを作る
- ChatGPTで挿入用の画像を生成する
- Canvaでロゴを作成する
- ClaudeDesignに画像やロゴを渡す
- 指示やedit機能で微調整する
- ファイルを書き出す
- Netlifyにアップロードして公開する
という手順でした。
ClaudeCodeをローカルで使えるようにするっていうのがなんだか1番色々楽そう？で次はそっちを試してみたいと思います。
もっと楽できそうな方法がもう絶対ありそうな気がする。まだまだ試行錯誤中です。
コメント