実績と 業界 × AI サンプル。
Next.js 15 + Cloudflare の最新スタックで作った 1 作目の本番事例と、 「あなたの本業 × AI」のニッチ深耕戦略を体現する業界別サンプル。 建設業・通信工事 — 通信業界の国家資格 4 つを持つ私だからこそ作れる、業界特化の WEB と AI ツールの形を提示します。
週間お買い物アシスタント
— 家族の食卓を AI と自動化で支える個人事業
毎週金曜 6:00 に AI が翌週分の家族向け献立を自動生成し、AEON ネットスーパーのカートに 食材を投入する個人事業の、マーケティングサイト。Next.js 15 + Cloudflare Workers + D1 で構築した、編集デザインとモダン UI を併せ持つ 6 ページ構成のサイト。
事業者の意図を、サイト全体で語る
「家族の食卓づくりを AI に肩代わりさせたい」という、共働き・育児中のご家庭の悩みに応える個人事業。 競合のスタートアップ的な軽さではなく、和の素材感と LayerX 風のモダンな動きを併せ持つ 「個人事業の、しずかな自信」を表現するサイトを目指しました。
価格と回数上限を率直に開示し、福祉プランも明示。家族が本当に使えるサービスかどうかを、 お客様が初訪問の数十秒で判断できる設計にしています。
柿色 × 和 × LayerX 風モダン
ブランド色は和の柿色（#b8431c）。背景はオフホワイト、本文はインク色のモノクロ基調に、 柿色を要所のアクセントとして配置。Noto Sans JP / Noto Serif JP の和タイポと、 Inter / Fraunces の欧文タイポを切り替えて使い分けました。
動きは LayerX 系の「大きく動かさず、フェード + わずかな translate + ブラー解除」を採用。 cubic-bezier(0.16, 1, 0.3, 1) のイージングで 900ms かけて静かにリビールします。 最上部の柿色進捗バーがページの読了率を視覚化。
没入型「FRIDAY 06:00」スクロール体験
本体ページとは独立した /morning ページを実装。Header/Footer 非表示で、 ある金曜朝 6:00 のスクロール短編体験を提供します。背景色がシーン進行で 5 段階フェードし、 縦組みの漢字が演出に使われる、編集デザイン的な実験ページ。
営業ページではなくコンテンツとして、ホームヒーロー直下に細い線でリンクされています。 「個人事業だからこそ、こういう実験ができる」というブランドの主張そのものになっています。
業界特化の 本業 × AI サンプル。
通信業界の国家資格 4 つと現場経験を活かして、業界特化の WEB と AI ツールがどのような形になるかを示す参考サンプル。 実在する企業のものではなく、業界の典型的な要件をベースに私が組み立てた構成案です。 「うちの業界なら、こんなものを作りたい」のたたき台として、ご活用ください。
建設業向け施工事例ギャラリー
+ 工事写真の AI 自動分類
元請け対応の信頼感ある会社案内サイトと、現場で撮った写真をスマホからアップするだけで AI が「外構 / 内装 / 構造体 / 設備」を自動分類して施工事例ページに公開する仕組み。 建設業の人手不足と「事例を載せる時間がない」課題を、AI で一気に解決します。
- 施工事例の自動投稿フォーム（スマホで写真 → AI が分類 → 自動公開）
- 管理建築士・施工管理技士などの資格者リストと顔写真
- 元請け対応の信頼感ある会社概要・許認可一覧ページ
- お問合せ → 概算見積もり → 現地調査の自動化フロー
通信工事業向け工事報告書 AI 自動生成
+ 国家資格者プロフィール
現場写真と一言メモから工事報告書を AI が自動生成するシステムと、 第一級無線技術士・電気通信主任技術者・工事担任者などの保有資格を一覧表示するコーポレートサイト。 技術系の元請け企業に「ここに頼める」と即決させる、技術文書品質の自動化が武器です。
- 現場写真 + 一言メモ → AI が日報・工事報告書を自動生成
- 国家資格保有者の一覧（資格証画像 + 担当領域）
- 技術案件カテゴリ別ポートフォリオ（光ファイバー / モバイル / セキュリティ等）
- 元請け企業向けセキュリティ・コンプライアンス証明ページ
