背景
株式会社うるかすの会社HPは、以前ノーコードツールのSTUDIOで突貫で作ったものでした。Claude Codeをだいぶ使い慣れてきたこともあり、「AIでHP作りをちゃんとやってみよう」と思い立って、作り直すことにしました。始めたのは前日の夜。思いつきのわりに、翌日には独自ドメインでの公開まで辿り着きました。
公開先: https://urukasu.net
構成
- Astro + Vercel: 静的サイト生成。GitHubのmainブランチにpushすると自動で本番に反映されます
- microCMS: お知らせ機能用のヘッドレスCMS。管理画面が日本語で、非エンジニアにも渡しやすいのが決め手でした
- 写真素材がまだないので、当面はSVGとCSSだけで画面を作っています
ノーコードツールからの乗り換えで一番気になっていたのは「CMS的な更新機能をどうするか」でしたが、ヘッドレスCMSで解決できました。記事を公開するとWebhook経由でVercelが再ビルドし、数分で本番に反映される流れです。投稿者にはmicroCMSのアカウントを渡せば、コードに触れずにお知らせだけ更新してもらえます（お知らせ自体は、最初の記事ができるまで非表示にしています）。
デザイン: 水の世界観をアニメーションで
「うるかす」は北海道・東北の方言で、米を水に浸してやわらかくすること。この水の世界観をサイトの見た目にも反映させたくて、事業構造の図を「中核から波紋が広がる」アニメーションにしました。
面白かったのは波紋の質感の検討です。物理的に正確な波の干渉をCanvasで計算する案も試したのですが、正確にやるほどモアレ状になって「もう波紋には見えない」結果に。最終的には「中核からだけ・ゆっくり・にじみ」というくっきり線＋ぼかし層の二層方式に落ち着きました。正確さと、それらしく見えることは別物なんだなと。
デザインの相談は、口頭で説明してもらうより「動く比較モックを作って見比べる」方が圧倒的に速く決まりました。波紋の質感も、ボタンの色も、会社概要の表の組み方も、全部この方式で即決です。ノーコードツールだと少しハードルのあるアニメーションも、AIとならサクッと作れるのが良いところです。
独自ドメインの移行
最後に、STUDIOに向いていた urukasu.net をVercelに切り替えました。手順は3つだけです。
- STUDIO側で独自ドメイン接続を解除
- Vercelのプロジェクトにドメインを追加（CLIで
vercel domains add） - DNSレコードを変更（apexのAレコードをVercelのIPへ、wwwはCNAMEを追加）
DNSの反映は約1分、SSL証明書はVercelが自動発行してくれて、身構えていたわりにあっさり完了しました。wwwからはリダイレクトでURLをapexに統一しています。
使ってみて
ノーコードツールとAIでのHP制作、どちらが良いかは使う人によると思いますが、自分の使い方にはAIの方が合っていそうです。体裁としてはシンプルにまとまって満足しています。アニメーションの追加や写真・コンテンツの掲載など、まだやることはありますが、コードで持っているのでこの先も少しずつ育てていけます。