Loading

blog

一丁目通信


コーポレートサイトをAIで作って公開する簡単な方法

身内からコーポレートサイトの作成依頼があったので、今回はAI(Claude)を使役してサイトを作ってみることにしました。

今回の案件は「林業会社🌳」のコーポレートサイトです。

使用したAIは、Anthropic社のClaudeです🤖

https://claude.com/ja

残念ながら私には2Dのデザインセンスが微塵もないため、デザインを含めてAI君にお任せします。

情報は最低限に絞り、さっそくプロンプトを与えて作ってもらいましょう。

プロンプトは以下の通りです📝


林業会社のコーポレートサイトを作ってください。
静的HTML、ページはトップ・業務内容・実績・会社概要・問い合わせの5つ。

■ 会社の業務・特徴
– 電力会社と契約し、配電線にかかる枝や木の伐採を行っている
– 台風などで倒木が発生した際に緊急出動して処理する
– 社員24名、創業1978年の地方の中小企業
– これまでWebサイトは未所有

■ 要望
– 写真を多く使いたい
– 静かで精密な、ミニマルな方向に振りたい
– いかにも「AIが作りました」というありがちなデザインは避けたい

※社名・電話番号・数値は仮で構いません。
※frontend-designのスキルを使って、ミニマルで精密なデザインに仕上げてください。


ここでの最大のポイントは frontend-design のスキル(指示)を指定することです。

これがないと、AI君はどこかで見たような「ありがち」なデザインを出力してしまいます。

で、上がってきた結果がこちら。(画像素材などはAI生成ツールでサクッと用意しました。)

うーん、林業といえば安易に緑色を使いたくなるところですが、指示通り非常にミニマルですっきりとしたデザインを出してくれました。

正直そこまで期待していなかったのですが、文言がダサいのは差し引いても、悪くないんじゃないでしょうか。結構私好みです☺

ではAI君からファイル一式ダウンロードさせてもらいましょう。


Cloudflare Pagesで世界に公開する

AI君からもらったHTMLファイルと用意した画像が揃ったので、さっそくサーバーに置いて世界に公開してみましょう。

私のおすすめは Cloudflare Pages です。ちょっとした静的サイトなら無料で使えます。

詳しい解説は省きますが、一般的なVPSやレンタルサーバーに比べてDDoS攻撃などに強く、セキュリティ面でも安心です。

操作も非常に直感的で、初心者でも簡単に公開できます。

https://www.cloudflare.com/ja-jp/developer-platform/products/pages/

※アカウント作成手順は省略します(無料ですのであらかじめ作っておいてください)。


公開の手順

  1. アカウントにログイン後、左メニューから「Workers & Pages」を選択

  2. 右上の「作成」ボタンをクリックし、「アプリケーションを作成する」タブを選択

  3. Upload your static files」を選択

  4. プロジェクト名を入力し、HTMLファイルや画像をまとめたフォルダ(またはZIPファイル)をアップロードして「デプロイ」をクリック

  5. バックエンドで処理が走るので、しばらく待機😴

  6. 完了すると固有のURLが発行されるので、クリックしてサイトを確認

  7. URLが表示されない場合は、画面中央の「ドメイン」をクリックし、『xxxx.workers.dev』が発行されたURLです。クリックしてみましょう。

 


画像生成に少し時間がかかりましたが、片手間の2〜3時間ほどで無事にコーポレートサイトを公開することができました。

こんなに簡単なら、ちょっとしたLP(ランディングページ)や個人サイトも気軽に作れますね。

もちろん完璧ではないので細かい調整は必要ですが、「デザインセンスをお母さんのお腹の中に置いてきた」私でも、AI君の手を借りればそこそこ見栄えのするサイトが作れてしまいました。

万歳!

サイトを更新したい場合も、ファイルをアップロードし直すだけで一瞬で切り替わります。カンタン、カンタン。

ちなみに、独自ドメインを取得してCloudflareのDNSに設定すれば、ちゃんとした自社ドメインで公開することも可能です。

ぜひ試してみてください。


今回作成したサイトはこちら:

https://sanko-ringyo.n-sato-aecom.workers.dev/

TOP