Claude × HTML Talk
1 / 17
登壇テーマ

Claudeと一緒に
サービスを作るときの
合言葉は HTML。

AIに「やりたいこと」を伝えるとき、いちばん早くて、いちばん間違わないのはHTML。
企画から動くプロトタイプまで、HTML一枚で会話が回るようになります。

HuX Inc. Claude Native UX × DX × AI
Profile ｜ 講師紹介
2 / 17
本日の話し手
亀田 重幸
CEO ／ 代表取締役

亀田 重幸

KAMEDA Shigeyuki
HCD-Net認定 人間中心設計専門家

ディップ株式会社に新卒入社、インフラエンジニアを経て、約10年新規事業＆サービス立ち上げに従事。 その後、社内DXの推進責任者を担当。全社工数削減 約11万時間、約3億円のコスト削減を実現。 現在は独立して、生成AIを活用したDXとUXコンサル事業に従事。

BOOKS ／ 著書 2冊
「いちばんやさしいDXの教本」
「いちばんやさしいAIリサーチの教本」
SPEAKING ／ 主な登壇
pmconf 2024・2025
コスプレUX／体験構造図
Company ｜ 会社情報
3 / 17
HuX について

AI × UX × DX の力で、人とテクノロジーの間に
最高の体験を生み出す

COMPANY
株式会社HuX
HuX Inc.（ヒュークス）
FOUNDED
2025年7月
Jul. 2025
CEO
亀田 重幸
KAMEDA Shigeyuki
WEBSITE
hux.co.jp
Human × Transformation
ADDRESS
〒221-0056　神奈川県横浜市神奈川区金港町5-14　クアドリフォリオ8階
BUSINESS
生成AI研修事業 ／ 福祉事業 ／ デザイン支援事業 ／ DX支援事業
CLIENTS
株式会社グッドパッチ ／ シンシアリー株式会社 ／ artience株式会社 ／ 合同会社DMM ／ ディップ株式会社 ／ 株式会社テクノデジタル （順不同・敬称略）
Recent Services
4 / 17
最近の自作

最近、自分でサービスを次々と作っています

今日は「自社サイト」を題材に、Claudeとどう作っているかをお話しします。

mitooshi LPのヒーローセクション。「もう何回言わせるの！と叫ばなくていい朝へ。」のキャッチコピーと子どもとスマホのイラスト。
みとおし
テンプレートを選ぶだけで、子どもが自分で次の行動を見つけられる。声かけに頼らない、新しい毎日の進めかた。
ジカーズLPのヒーローセクション。「あなたの車の今の価値を、いつでも。」のキャッチコピーと2台の車のイラスト。
ジカーズ
今売ったらいくら？ 買うなら何年後にいくらで売れる？ 2つの「知りたい」に答える、車の時価シミュレーター。
HuXコーポレートサイトのヒーローセクション。「AI時代を生き抜く、人間の真価を磨く。」のキャッチコピーと人とAIロボットのビジュアル。
コーポレート 本題
「Human × X（未知数）」の掛け合わせで、これからの時代に求められる人材と事業の変革をリードする。
▸ どれも Claudeとの会話 × HTML で立ち上げています。
Agenda
5 / 17
今日の流れ

今日お話しすること

DEMO
作ったサイトを見せます
「言葉で更新できる」HPの実例
PROBLEM
ノーコードで困ったこと
なぜ別のやり方を選んだか
PROCESS
こうやって作りました
4ステップの制作の流れ
INSIGHT
コツはHTMLで「会話」
うまくいく3つのコツ
SYNERGY
AIにも、チームにも優しい
なぜHTMLが効くのか

結論：HTMLは、AIと一緒にものづくりする時代の "共通言語" です。

Case Study — HuX.co.jp
6 / 17
作ったサイトを見せます

"言葉で更新できる" 自社サイト

このサイトの何が面白いか

実物のデモをまずお見せします
更新は「文章を書く」だけで完結する（コードは不要）
サイトの構造を「UXデザイン」で説明できる
Astro Claude Native Markdown駆動 GitHub Pages
HuXサイトのヒーローセクション。「AI時代を生き抜く、人間の真価を磨く。」のキャッチコピーと、人とロボットが向き合う緑のアクセント付きビジュアル。
Features
7 / 17
サイトの機能

サイトには、こんな機能が入っています

ヒーロー／メインメッセージ
"AI × UX × DX" の主軸を1画面で伝える表紙。コピーは Markdown で即差し替え。
代表プロフィール
経歴・著書・登壇情報を構造化。新しい登壇は1行追加で反映される。
サービス紹介
生成AI研修 / 福祉 / デザイン支援 / DX支援。サービス追加もMarkdownだけで完結。
実績・クライアント
案件・クライアントロゴをカード形式で紹介。並び替え・追加も会話で。
ニュース／登壇情報
「○○について追記して」と話すだけで記事が追加。今日の本題の代表例。
お問合せフォーム
入力 → Resend経由でメール送信。スパム対策とサンクスメールも自動。
Problem
8 / 17
ノーコードで困ったこと

ノーコードでは、ここが "あと一歩" だった

ノーコード（Studio など） BEFORE

  • デザインの自由度に天井がある
  • 結局マークアップの知識が必要になる
  • 画像のリサイズも一枚ずつ手作業
  • 細かな修正がエディタ操作に縛られる
  • AIに「ここ直して」が伝わりにくい
→

HTML × AI で作る AFTER

  • デザインも構造も自由に動かせる
  • 知識はAIが補完してくれる
  • 画像処理も会話で一括
  • テキスト指示でピンポイント編集
  • AIが構造を「読める」ので会話が成立する
ノーコードの便利さは大事にしつつ、「AIと一緒に作る」という観点では、HTMLが圧倒的に扱いやすかった。
How we built it
9 / 17
こうやって作りました

4つのステップで、こう作りました

VISUAL
「世界観」を絵にする
GPT Imageで色・雰囲気のイメージ画を作る
Flat vector editorial mood board on 4:3 canvas. HuX green, graphite, white color chips, typography sample, and simple line-art icons. トンマナ画像
PROTO
Coworkでざっと組む
AIに役割と知識を渡してプロトを生成
Coworkで会話からプロトタイプを作る画面イメージ。YOU/CLAUDEのチャットと、その下にWHY/WHAT/HOWのプロトタイプ生成フロー。
DESIGN
Claude Designで磨く
ワイヤーから本番品質のデザインへ
Claude DesignでワイヤーからHi-Fi画面へ磨くデザインキャンバスのイメージ。HuXのデザイントークン（緑#00FF3C / Graphite / Mist）とコンポーネント。
DEPLOY
Astroで実装・公開
Claude Codeで仕上げて本番デプロイ
Astroで実装して公開するデプロイ画面のイメージ。 デプロイ画面
GPT Image
トンマナ
→
Cowork
プロト
→
Claude Design
Hi-Fi
→
Claude Code
Astro実装
UX Concept — 01
10 / 17
道具を持つ前に

Claude Designで磨く前に、"誰に何を届けるか"を言葉にする

道具から入ると、誰に刺さるかが後付けになる
同じ画面でも、誰向けかで「正解」が変わる
「きれい」と「刺さる」は別物。きれいなだけのデザインは残らない
ORDER MATTERS
STEP — FIRST
UXコンセプトを言葉にする
誰に・何を・なぜ ── 3つの問いで価値を定義
↓
STEP — NEXT
Claude Designに渡す
「このコンセプトで磨いて」と頼める状態にする
順番が逆だと、磨くたびにコンセプトを 後付けで上書き することになる。
UX Concept — 02
11 / 17
価値の言語化

誰に・何を・なぜ ── 3つの問いで価値を定義する

WHO ／ 誰に
どんな人に届けるか
ユーザー像を、できるだけ具体的に。
役職・状況・抱えている文脈まで踏み込む。
HuX HPの場合
AI × UX × DXの伴走相手を探す スタートアップCEO・事業責任者
WHAT ／ 何を
体験前後で何が変わるか
ベネフィットを 動詞 で書く。
"特徴" ではなく "ユーザーに起きる変化"。
HuX HPの場合
"AI × UX × DX を伴走する人" として、亀田＆HuXを 信頼できる
WHY ／ なぜ今
なぜ今これをやるか
市場・自分の文脈から1行で。
"波が来ている根拠" を明文化する。
HuX HPの場合
Claude Code時代、"作れる人" から "何を作るか決める人" に価値が移った今こそ
▸ この3つが言葉になっていれば、Claude Designに渡したときに "刺さる" デザイン が返ってくる。逆に言葉にしないまま渡すと、磨けば磨くほど迷う。
My UX Lens
12 / 19
私のUX観

私の考える UX とは？

UXは、見た目を整える仕事ではない。
目に見えない「想い」や「モヤモヤ」を言葉にして、
新しい価値として体験できる形に翻訳すること。
想い ／ Feel
ユーザーが 言葉にできない 違和感や願い。
表に出てこない「心の奥」をすくい上げる。
言葉 ／ Frame
モヤモヤを 解像度高く言語化 し、
チームで握れる "共通の認識" に変える。
体験 ／ Form
言葉になった価値を、触れて感じられる体験 に翻訳する。
ここで初めて "見た目" が意味を持つ。
Key Insight
12 / 17
うまくいったコツ
コツは、
HTMLで「会話する」ことでした。
まず "世界観" を渡す
色・余白・温度感。
AIに「どんな表情で話すか」を最初に共有する。
"Why" から言葉にする
誰の課題を、どう解いて、どんな価値を出すか。
UXデザインで骨を作る。
HTMLで設計する
ここが一番効きました。
早い・AIに伝わる・そのまま動く。
Why HTML — 01
13 / 17
HTMLが効く理由 ①

"やりたいこと" を、その場で「形」で返してくれる

なぜ必要か

文章だけでは、頭の中のイメージがズレる
レビュー時に「何を直すか」が抽象的になる
関係者と「同じ画面」を見ながら話せない

なぜHTMLが効くか

構造はテキストの何倍もの情報を運ぶ
ブラウザで開けるから、視覚で読める
「ここを変えて」が指差し感覚で伝わる

テキストで頼む BEFORE

"サービス紹介を目立つ感じで作って"
  • "目立つ" の解釈にブレが残る
  • どんな構造になるかわからない
  • レビューも抽象的なまま
→

HTMLで頼む AFTER

"3カラムのカード型、アイコン＋タイトル＋本文"
  • ブラウザでその場で確認できる
  • 「中央だけ緑に」でピンポイント修正
  • レビューが具体的になる
Why HTML — 02
14 / 17
HTMLが効く理由 ②

"動き" まで、言葉でそのまま指示できる

FADE ／ フェードイン
「ふわっと現れて」
CLICK ME
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
HOVER ／ ホバー
「ホバーで少し浮かせて」
CLICK ME
.card:hover { transform: translateY(-2px); transition: .25s; }
PRESS ／ 押し込み
「押した瞬間に沈めて」
CLICK ME
.btn:active { transform: scale(.97); }
SO WHAT
コードが返ってくるから、ブラウザでその場で動きを確認できる。「もう少し遅く」「終わりだけ弾む」も会話で直せる。
Why HTML — 03
15 / 17
HTMLが効く理由 ③

"動くプロトタイプ" が、本実装の前に手に入る

図だけのレビューは "想像"。HTMLなら、関係者がブラウザで触ってフィードバックできる。

PROMPT
Claudeに依頼
「○○のプロトをHTMLで」と話す
→
OPEN
ブラウザで開く
そのままダブルクリックで触れる
→
SHARE
関係者に共有
URL／GitHub Pagesで配布
→
ITERATE
直して再共有
会話で数分で更新

これまで 図だけ

  • Figma または紙のワイヤー
  • 動きは伝わらない
  • 体験は "想像" するしかない
  • 修正のたびに描き直し
→

HTMLプロト 触れる

  • ブラウザでそのまま開ける
  • 触れる・遷移する・動く
  • 体験そのものを"握れる"
  • 修正は会話で数分
Recommended Pair
16 / 17
仕上げに大事なこと

Markdown と HTML、両方持つと何が起きるか

Markdown
"意味" を残すフォーマット
仕様・議事録・知識・記事のような 文章ベース のものに強い
AIへの入力 として最適。プロンプトもMarkdownで書ける
テキストなので 差分・履歴 が読みやすい（Git相性◎）
HTML
"形" を残すフォーマット
体験・構造・動き を一つに閉じ込められる
ブラウザでそのまま 触って動かせる。チームで共有しやすい
AIも構造を 読める・書ける ので、編集ループが速い
SYNERGY ｜ 両方持つと何が起きるか
AIへの伝わりが速い
指示はMarkdownで、結果はHTMLで。会話のループが最短になる。
議論の解像度が上がる
文章で "Why" を、HTMLで "How" を握る。意思決定がブレない。
作る→直すが最短に
中身（Markdown）と形（HTML）を別々に直せる。手戻りが減る。
HTML Documents
17 / 18
HTMLドキュメントの良さ

文書も "形" を持つと、伝わる情報量が変わる

Markdown と HTML、両方を保存するとできること

構造（見出し・表・コード）を そのまま視覚化 できる
ディレクトリ図・ターミナル・データ表を 一画面に混在
タイポ・余白・色で 読む順番 をデザインできる
リンクで横断、印刷／PDF化もそのまま
EXAMPLE — このページ
HuXサイトの「ディレクトリ構成」ページ。ターミナル風のツリーと Skillの一覧テーブル が同居していて、設計の "全景" が1ページで読める。
hux.co.jp / docs / structure
HuXサイトのディレクトリ構成ページ。ターミナル風ツリーとSkill一覧テーブルが同居
Conclusion
18 / 18
まとめ
HTMLは、
AIにも、チームにも、優しい。
チームでそのまま共有
HTMLがあれば誰でも開ける。
設計 → 共有 → 議論まで一直線。
スライドにも転用できる
HTMLからスライドも作れる。
（実はこのスライドもHTMLです）
AIにとっての "共通語"
AIが「読める・書ける」形式。
会話のループが最短になる。
TAKEAWAY ｜ 今日のお持ち帰り
AIと作るときは、まず トンマナ から渡す。
設計もプロトも HTMLで会話 すると速い。
Markdown × HTML をセットで残すと、両輪で回る。
ご清聴ありがとうございました。
1 / 14
SLIDES OVERVIEW