Kokona

AI 使ったものづくり始めました🌱
Building things with AI × code, in public.

ブランド設計→実装まで、ひとりで作って公開中。
Solo dev. Hand-coded JP brands:
Café Noir ・ AURA ・ Kona Kon ・ 月詠 ・ Quill

[Kokona @kokona_codes]

高級旅館「月詠 -Tsukuyomi-」のサイトを作りました。

信州の架空旅館・全８室・創業大正十二年。

月齢カレンダー予約 / 縦書き俣句テロップ
春夏秋冬の季節切替UI など、和のこだわりを詰めました。

🔗 https://t.co/U6dEAvlxKO

#AIコーディング #WebDesign #ポートフォリ

[Kokona @kokona_codes]

補足。

SNS投稿の一番重いところは、
文章を書くことより「最初の一文を考える時間」だと思っています。

AIにたたき台を出してもらうだけで、
白紙から悩む時間が減る。

最後の言い回しだけ人が整えるくらいが、実務では使いやすいです。

[Kokona @kokona_codes]

今日のSNS投稿、何にしよう…」

この時間、なくせます。

ブランドとターゲット入れてボタン押すだけで
AIが各SNS向けの文章を全部出してくれる。
白紙から悩む必要、もうないかも。

🔗 https://t.co/CxdVTHUuce

#AI活用 #SNS運用 #個人開発

[Kokona @kokona_codes]

補足。

採用フォームも、送信されて終わりではなく、
その後の流れまで作ると一気に実務っぽくなります。

応募内容を記録
自動返信
担当者が確認
あとから一覧で見返せる

小さな自動化でも、抜け漏れ防止にはかなり効きます。

[Kokona @kokona_codes]

今日作ったもの：採用フォーム自動化🌱

応募 → スプレッドシートに記録 → 自動返信メール
全部GASで1本つながった。

架空会社「テックブリッジ」の採用LPとして仕上げてデモ化。

https://t.co/56pn6y1SVW

#BuildInPublic #GAS #業務自動化

[Kokona @kokona_codes]

補足。

AI議事録で大事なのは、
文字起こしそのものより「終わったあとに何が届くか」だと思っています。

要点
決定事項
次にやること
共有しやすい形

会議後の整理時間をどこまで減らせるか、を考えて作りました。

[Kokona @kokona_codes]

「デモ」って、本当は動いてないことが多い。

ボタンは押せるけど、データは架空。
フォームはあるけど、送信されない。

Quill のデモは、本物が動いています。
音声ファイルを入れると、議事録が出ます。

どうやって作ったか、書きました。

#BuildInPublic #個人開発
https://t.co/oKc5NYZL7q

[Kokona @kokona_codes]

補足。

LINE予約は、自由入力を増やすほど迷いやすくなります。

写真で選ぶ
ボタンで選ぶ
空き枠だけ出す
最後に名前だけ入力

このくらい選択肢を絞る方が、
お客さんにもお店側にもやさしい設計になると思っています。

[Kokona @kokona_codes]

ネイルサロン予約をLINEで完結する予約Bot🌷

写真でメニュー＆担当選択、1ヶ月先まで予約可、24h受付、二重予約防止付き。

Cloudflare Workers + D1 + KV + Claude Code で実装。

リアル店舗向けAIサービス #1
Lien Nail Studio（架空デモ）

#LINEBot #個人開発 #BuildInPublic #ClaudeCode

[Kokona @kokona_codes]

補足。

PDFをAIに読ませる系は、
派手に見えるけど使いどころはかなり地味です。

就業規則
業務マニュアル
契約書
サービス規約

「どこに書いてあるっけ？」を減らすだけでも、
社内の確認時間はかなり軽くなると思っています。

[Kokona @kokona_codes]

「社内のマニュアルをAI化したい」
という相談が増えている。

PDFをアップするだけで
文書の内容をAIが答えてくれる仕組みを作った。

就業規則に「有給は何日？」と聞いたら
ちゃんと文書を参照して返ってきた。

LangChain + ChromaDB + FastAPI → Railway

#個人開発 #AI活用 #BuildInPublic

[Kokona @kokona_codes]

補足。

地域のお店や院のサイトは、
おしゃれさだけより「今すぐ行動できること」が大事だと思っています。

電話
LINE予約
症状別メニュー
料金
アクセス

このあたりが迷わず見えるだけで、かなり使いやすくなる。

[Kokona @kokona_codes]

接骨院のHP、電話番号だけどーんと書いてあるやつ、よく見かける。

LINE予約も、症状別カードも、お客様の声も
ぜんぶ入れた架空デモを作ってみた。

▶ みどり接骨院（架空デモ）
https://t.co/3zUVemILRu

#ポートフォリオ #WebDesign #ClaudeCode

[Kokona @kokona_codes]

補足。

このサイトは、ただのトップページではなく
会社案内・サービス・事例・ニュース・採用まで入れた構成にしています。

架空ブランドでも、
実際にWordPress化したら運用できるくらいの情報量にすることで、
「実案件に近いデモ」として見せやすくなります。

[Kokona @kokona_codes]

最近作ったもの。

AI業務自動化スタートアップのコーポレートサイトを、架空ブランドとして作りました。

WordPressテーマ化を想定して、会社案内・サービス・事例・ニュース・採用・問い合わせまで全13ページ構成。

https://t.co/IP82P1trdv

#個人開発 #ClaudeCode #WebDesign

[Kokona @kokona_codes]

補足。

このLPは「かっこよく見せる」より、
相談前に知りたいことが先に見える構成を意識しました。

何を頼めるのか
いくらかかるのか
どう進むのか
よくある不安は何か

小規模事業のLPは、派手さより安心感が効くと思っています。

[Kokona @kokona_codes]

最近作ったもの。

中小企業向けの「ひとり情シス代行」LPを、架空サービスとして作りました。

できることをホバーで確認、料金の月額/年額切替、FAQまで入れて、
検討しやすい構成にしています。

HTML/CSS/JSで実装。

https://t.co/iRK6RUI7f1

#個人開発 #ClaudeCode #WebDesign

[Kokona @kokona_codes]

補足。

請求書チェックは、AIに全部任せるより
「人が見るべきものだけ残す」設計が大事だと思っています。

AI読取
→ 信頼度が低いものを人が確認
→ 保存・記録

この分担にすると、実務にかなり近くなります。

[Kokona @kokona_codes]

最近作ったもの。

実案件でよくある請求書チェックを、公開しやすい架空デモにしました。

Gmail取込→AI読取→人の確認→Drive保存までをReact + TypeScript + Viteで実装。

https://t.co/Lvq8qmgYEu

#個人開発 #ClaudeCode #業務自動化

[Kokona @kokona_codes]

補足。

完全自動で応募するのではなく、
AIには「探す・読む・下書きする」まで任せて、
最後の送信判断は人間が見る形にしています。

仕事探しの時間を減らして、
提案の質と制作時間を増やすための仕組みです。

[Kokona @kokona_codes]

案件探しの下ごしらえをClaudeに任せる仕組みを作りました。

CrowdWorksの7カテゴリを巡回
→ 条件外を除外
→ 候補だけ精読
→ 提案書の下書きを生成
→ Gmailに通知

送信は自分で確認してから。
地味な作業を減らして、作る時間を増やすための自動化です。

https://t.co/ekbY6gLKDf

[Kokona @kokona_codes]

補足。

フォームを作るだけなら簡単だけど、
本当に大事なのは送信後の処理だと思っています。

受付内容を記録する
担当者が見落とさない
自動返信する
あとから検索できる

ここまで繋げて、ようやく「業務が軽くなる」。

[Kokona @kokona_codes]

法律事務所の無料相談フォームを、受付後の処理まで自動化するデモを作りました。

フォーム送信
→ GASで受信
→ Notion DBへ記録
→ Gmailで受付完了メールを自動返信

相談対応の抜け漏れを減らすための、シンプルな業務自動化です。

https://t.co/5divybYwvx

[Kokona @kokona_codes]

補足。

このデモで見せたかったのは、
「AIチャットを置いた」ことよりも、

PDF・物件情報・問い合わせ対応みたいな
人が毎回確認している資料仕事を、
Web上でそのまま減らせることです。

不動産以外でも、規約・マニュアル・契約書確認に応用できます。

[Kokona @kokona_codes]

不動産サイトに、物件資料PDFを読めるAIアシスタントを組み込んだデモを作りました。

物件一覧
→ PDFアップロード
→ 条件や管理規約を自然文で質問
→ 資料に基づいて回答

不動産仲介の問い合わせ対応や、資料確認の手間を減らす想定です。

https://t.co/KI6h9JyUqN

[Kokona @kokona_codes]

☕ Café Noir

架空の自家焙煎カフェを、シネマティックなLPとして制作しました。

AI生成ビジュアルを起点に、配色・フォント・余白・スクロール演出まで「浸る」サイトに寄せています。

https://t.co/dLPBQzBwg9

#WebDesign #AI制作 #ポートフォリオ

[Kokona @kokona_codes]

実装面では、重くしすぎないことを意識しました。

Next.jsなどは使わず、HTML/CSS/JSだけで
ホバー表示・料金切替・FAQ開閉まで実装。

小規模なLPなら、まずは軽い構成で作って、
あとからWordPress化や問い合わせ連携を足す方が動かしやすいです。

[Kokona @kokona_codes]

こだわったところ。

・LPだけど、相談前に確認したいことが先に見える
・料金切替やFAQはJavaScriptで軽く実装
・架空サービスなので、実案件データや個人情報は使っていません

公開ポートフォリオとして見せやすい形にしています。