背景
株式会社うるかすの会社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に統一している。
感想
昨晩、思いつきではじめたHP制作だったが、思いの外、形になって、既存の突貫で作ったHPから乗り換えられた。アニメーションや写真掲載、コンテンツ掲載など、まだやることはあるが、体裁としてはシンプルにまとまって満足。独自ドメインでのvercel公開もはじめてやってみたが、思っていたより楽だった。
ノーコードツールとAIでのHP制作、どちらが良いかは使う人によると思うが、自分の使い方にはAIでのHP制作の方が合っていそうだ。コードで持っているので、この先も少しずつ育てていける。