ClaudeDesignでアプリのモックを使ってみた。非デザイナー・非エンジニアの2時間の試行錯誤の成果（アプリ機能の思考の時間も含む）。

営業の平田です。

はじめに

先日リリースされたClaudeの新機能であるClaudeDesignを使い、自分の中でふわっと考えていた”こんなアプリがあったら良いな”のモックを作ってみました。私自身、自分の業務でどのような使い方をするのがより有意義なのかを模索しているさなかではありますが、取り急ぎClaudeDesignについての概要や利用枠について、初めて使ってみた所感や出来たものを中心にこのブログを通して、共有をしたいと思います。

ClaudeDesignについて

https://claude.ai/design/
まず、ClaudeDesignについての情報をAnthropicのサイトから一部情報を引用します。
参照：
https://support.claude.com/ja/articles/14604416-claude-designを始める

• 概要

  • Anthropic Labsによる実験的な研究プレビューとして、現地時間2026年4月17日に公開された新機能。
  • プラン
    • Pro・Max・Team・Enterpriseプラン（※）で利用可能。
      • つまり、Freeプラン、Claude API、Amazon Bedrock経由でのご利用以外の契約形態だったら利用可能。
      • ※Enterpriseプランではデフォルトでオフ。
  • ブラウザ版で利用可、デスクトップ版では利用不可。
    • このようにブラウザ版の検索やプロジェクト等の下に表示。
      

• 機能：

  • チャットで自然言語で指示をするだけでデザイン・インタラクティブプロトタイプ・プレゼンテーションをキャンバス上に自動生成することが可能。
  • 組織のデザインシステム（色・フォント・コンポーネント）を自動で引き継ぐことが可能。
  • チャットとインラインコメントで修正・微調整を容易に行うことが出来る。
  • ZIP・PDF・PPTX・HTML・Canvaなど様々な形式でエクスポート対応。
  • 監査ログや使用状況の詳細な追跡機能：現状未対応。
  • 4月26日現在使用することが出来るモデルは下記の通り。
    • Claude Haiku 4.5
    • Claude Opus 4.7
    • Claude Sonnet 4.6
    • Claude Opus 4.6
    • Claude Opus 3
    • Claude Sonnet 4.5

• 想定ユースケース：

  • ダッシュボードやモバイルアプリの画面設計
  • LP作成や社内ツールのプロトタイピング
  • ステークホルダー向けの資料作成

• 利用枠／カウントの考え方：

  • チャットやClaude Codeとは別軸でのカウント：ClaudeDesignの使用量は、通常のチャットやClaude Codeの制限とは別に管理され、チャットやClaude Codeの制限に干渉しない。
  • 週単位でリセット：
    • 7日ごとに自動リセットされる。継続的に付与される。
    • ただし、Enterpriseの従量課金プランは例外となり、開始時に1回限りのクレジットが付与される。期限は2026年7月18日に設定されており、それ以降、またクレジットを超過した使用は通常のAPIレートで課金される。下記はEnterpriseプランの画像。
      

ClaudeDisignで作ったモックについて

私は、読書が好きなので読書家向けモバイルアプリのアイディアをClaudeDisignで形にしてみました。

• はじめ方

1. ブラウザ版Claudeを開き、DesignからClaudeDesignの画面に飛ぶ。
2. Prototypeを選択し、Project nameを入力し、Design systemはNoneを選択。
   • Prototype・Slide deck・Form template・Otherの選択
     • WebアプリやモバイルアプリのUIのモックを作りたい場合はPrototype、プレゼン等に向けた資料作成の場合はSlide deck、既存のテンプレをもとに作りたい場合はForm template、それ以外はOther。
     • 今回はモバイルアプリ想定のためPrototypeを選択。
   • Project name：このタイミングで入力するが、のちにリネームすることが可能なため適当でも問題なし。
   • Design system：Noneを選択
     • クラスメソッドはEnterpriseプランのため、組織内で他のユーザーが作り公開されているものを使用することも可能。
     • フォーマットとして作っているものがあればそちらを選択するでもOK、今回はNoneを選択。
     • このようにCreateから自分で作成することも可能。
       
   • Wireframe・High fidelityの選択
     • よりシンプルなレイアウトで作りたい場合はWireframe、高精度なUI画面を作りたい場合はHigh fidelityが推奨。
     • 今回はHigh fidelityを選択。
3. 下記のような画面に遷移。
   
4. 画面左手のチャットで指示を出し、作りたいもののイメージを伝えていく。
5. モックが出来たら、Shareからリンクをエンジニアに共有して、デプロイ。（今回はこちらは行っておりません。）

ClaudeDisignを作ってみた所感

• 言葉で伝えることが難しい微調整・修正が容易に。

  • ClaudeDesignがリリースされる前にClaudeCodeでWebアプリのモックを作っていました。その際は言葉で伝えることが難しい部分に関しては、Claudeに対してキャプチャでここ！と伝えていました。しかし、ClaudeDesignでは、Draw機能やコメント機能等により的確にかつ直感的に伝えることが出来、個人的にすごく便利に感じました。
    • Draw機能では、修正をしたい範囲を示したり、矢印を用いてどこに移動したい等の要望を伝える際に駆使しました。また、文字も認識してくれるのか確認したら、問題なく求めている修正をしてくれたので、マウス等で文字を書くのが得意な場合はこちらも使えると思いました。そして、このDraw機能では線を描いてから画面下部にあるSendで実行をするのですが、それを忘れて、チャット欄で「ここを〇〇して」と伝えて、Claudeに「こことはどこですか」とぼちぼち聞かれたので、今後の自分のためにもここに記しておきます。笑
      
    • コメント機能も同様でピンポイントで修正をすることを容易にしてくれます。
      
    • Edit機能も同様です。
      • 例えば、洗練されたイメージのフォントにしたい等の抽象的なイメージであれば、コメント機能の中で伝えたり、画面左手のチャットの部分で伝えるのが良いと思いますが、フォントや文字の大きさや色、行間などを細かく指示したい場合はこちらのEdit機能を使うのが適しています。
      • デザイン経験がない私からすると、正直最初こそ「こんなに細かく希望がないしそれぞれの項目をいじったとてどうなるのかのイメージがつかないからEdit機能使わなくて良いや...」と思っていました。すごくとっつきにくいと思ったんです。
      • そんなことを思いながらも、色々な箇所を選択していじってみました。例えば、文字同士の間隔であったり、言葉に表現しづらい色のイメージや透過度合い等。そうする中で、この項目はアプリ画面のここの大きさが変わるんだ！等気づき、試行するごとに今よりはここの間隔が広い方がきれいだな等とどんどん自分のイメージがより具体になっていきました。この機能は、Draw機能やコメント機能よりは直感的にやるのは難しいけれども、色々触ってみて調整する甲斐を感じたのは、私の中ではEdit機能でした。
        

• 修正をして反映されたものをローカルで確認することが容易に。

  • 上記で記載しているWebアプリのモックのときは、修正するたびにlocalhostで画面をリロードして確認していました。一方、ClaudeDesignは同じ画面内でデザインとチャットが統合されているため、指示出しから修正確認までがシームレスに進められるのが便利です。
    

• トークンの消費を抑制する策は必要。

  • 私は、0ベースで開始し思いついたらClaudeに伝えてビジュアル化してもらい確認して修正ということを繰り返しました。その結果、修正→再生成→修正の繰り返しになり、過去の会話の読み込みが多かったからかトークンをかなり消費してしまったという反省点があります。
  • そのため、今後実施する際は、最初に数分（この時点で出来ているイメージの完成度にもよる）かけて仕様書を作ってからClaudeDesignに働いてもらうようにしようと思いました。主要機能やフォントやレイアウトのイメージやトーン等を先にざっくり仕様書にインプットをして、出来たものに対して修正をかけていく方がトークン消費の効率が良いと思いました。

• AIぽいデザインを抜け出すのもClaudeに手伝ってもらう。

  • このアプリのモックを作っているとき、「概ねやりたいことを分かってもらえているし画面上に欲しい情報もある、でもこれはAIが作ったものすぎる」と思いました。
  • そこで、Claudeに「AIぽいデザインになっているのが気になっている。特に〇〇の画面のこのあたりを中心にAIが作ったデザインであることを感じる。より洗練されたデザインにしたい。」と伝えたところ大きな変化を遂げました。特に何がAI感の要因だったのかをClaudeに質問をしたら、最大の要因としては絵文字の使用、そしてカード構造の不自然さ、配色や余白の単調さ、タイポグラフィの弱さ等が挙げらたので、そこを修正してもらいました。
    • Before
      
      
    • After
      
      

出来たもの

プロダクト概要

1 コンセプト

Hirakuは、AIと他者の知見を通じて「自分だけでは出会えない本に出会い、読書の世界を拓く」ための小説特化型プラットフォームです。ユーザーの読書傾向をレーダーチャートで可視化し、既存の好みから段階的に新しいジャンルへの探索を促します。

2 ターゲットユーザー

• 既に読書ライフを楽しんでいるが、もっと幅を広げたい人
• 小説を中心に読んでいる読書家
• 全年代対応

3 トーン＆マナー

• 冒険的でワクワクする印象
• 知的で信頼感のあるデザイン
• 装飾を減らし、コンテンツを主役にする

デザインシステム

1 カラーパレット

ベースカラー

用途	カラーコード
背景（プライマリ）	#FFFFFF
背景（セカンダリ）	#FAFAFA
テキスト（プライマリ）	#111111
テキスト（セカンダリ）	#555555
テキスト（ターシャリ）	#999999
ボーダー/ディバイダー	#EBEBEB
アクセント	#4A6741
アクセント（ライト）	#EFF5EE
アクセント（テキスト）	#3D5636

ジャンル別カラー

ジャンル	カラーコード	用途
純文学	#5B7DB1	レーダーチャート、タグ、ボーダー
ミステリー	#8B5E83	同上
SF	#6A8D73	同上
恋愛	#D4807B	同上
歴史小説	#B8956A	同上
ホラー	#7A7A7A	同上
アクション	#C7853D	同上
エッセイ系	#7BAAAA	同上

レベルカラー（提案の拡張度）

レベル	カラーコード	意味
レベル1	#555555（無彩色）	安心の一冊
レベル2	#888888（無彩色）	少し拓く
レベル3	#BBBBBB（無彩色）	チャレンジ

2 タイポグラフィ

• フォントファミリー: 'Noto Serif JP', Georgia, serif
• サイズ階層:
  • 見出し: 16〜22px（font-weight: 500〜600）
  • 本文: 13〜15px（font-weight: 400〜500）
  • 補助: 10〜12px（font-weight: 400〜500）

3 アイコン

• SVGアイコン（Lucide Icons系のストロークスタイル）
• 絵文字は一切使用しない
• アバターはイニシャルサークル（英字）

4 レイアウト原則

• 8pxグリッドシステム
• セクション間: 24px以上
• 要素間: 8〜12px
• カード内カードのネストを避ける
• 区切りは0.5px divider（#EBEBEB）
• box-shadowは控えめ

画面構成

1 タブ構成（4タブ）

順序	タブ名	アイコン	役割
1	ひらく	sparkles	読書マップ＋AI提案（メイン機能）
2	読了	listCheck	フォロー中ユーザーの読了タイムライン
3	記録	edit	読んだ本の記録フォーム
4	マイページ	user	プロフィール・設定・蔵書リスト

2 共通UI

• ステータスバー: iOS標準（時刻、電波、Wi-Fi、バッテリー）
• ヘッダー: アプリ名「Hiraku」＋サブタイトル「本を開く、世界を拓く」、右側にヘルプ（❓）・設定（⚙️）アイコン
• タブバー: iOS Human Interface Guidelines準拠、backdrop-filter blur、選択中タブのみアクセントカラー

機能詳細

1 ひらくタブ（メイン機能）

1.1 読書マップ（レーダーチャート）

• 表示内容: 小説8サブジャンルの読書傾向をレーダーチャートで可視化
• ジャンル軸: 純文学 / ミステリー / SF / 恋愛 / 歴史小説 / ホラー / アクション / エッセイ系
• 可視化要素:
  • 各軸はジャンル固有の色で着色
  • データポイント: ジャンル色の丸（白ストローク付き）
  • 塗りつぶし: ジャンル色のセグメント（opacity 0.12）
  • グリッドリング: 25%, 50%, 75%, 100%の4段階
• データソース: ユーザーの読了記録から自動算出

1.2 段階的提案システム

• チャートの下に3段階のレベルで本を提案
• 各レベル1冊ずつ表示

レベル	名称	提案ロジック
1	安心の一冊	ユーザーの既存の好みにかなり近い作品
2	少し拓く	興味の延長線上にある新鮮な作品
3	チャレンジ	新ジャンルだが橋渡しのある作品

1.3 提案カードUI

• 表示要素:
  • ジャンルタグ（ジャンル色）
  • Kindle版有無（ジャンル色テキスト）
  • 書籍タイトル（17px, weight 500）
  • 著者名（12px, グレー）
  • 提案理由（13px, セカンダリテキスト）
  • 左ボーダー: ジャンル色（3px）
• アクションボタン（3つ横並び）:
  • スキップ: カードがスライドアウトし、次の本が提案される
  • 読みたい: 読みたい本リストに保存、保存後はAmazon購入ボタンを表示
  • 購入: Amazon商品ページへ遷移（新しいタブ）
• スキップアニメーション: translateX(120%) + opacity: 0（300ms）

1.4 提案プール

• 各レベルに6冊以上のプールを用意
• スキップ時はプール内の次の本を順番に表示
• プール末尾に達した場合はループ

2 読了タイムライン

2.1 概要

• フォロー中のユーザーが読了した本をタイムライン形式で表示
• 説明文: 「フォロー中の読書家たちが最近読み終えた本。誰かの読了が、あなたの次の一冊になるかもしれません。」

2.2 タイムラインアイテム

• 左側: アバター（イニシャルサークル36px）＋ユーザー名（姓のみ）
• 右側:
  • ジャンルラベル（ジャンル色、10px）
  • 書籍タイトル（15px, weight 500）
  • 著者名（12px）
  • 星評価（5段階、塗りつぶしスター）
  • 提案理由（12px）
  • タイムスタンプ（右寄せ、11px）
• 左ボーダー: ジャンル色（3px）
• 区切り: 0.5px divider

3 記録タブ

3.1 基本情報

フィールド	種類	必須
書籍名	テキスト入力	✅
著者名	テキスト入力	✅
ジャンル	セレクトボックス	—
読了日	日付入力	—

ジャンル選択肢: 純文学 / ミステリー / SF / 恋愛 / 歴史小説 / ホラー / アクション / エッセイ系 / その他

3.2 評価

• 星5段階（タップで選択）
• 選択済みスターはアクセントライト背景＋アクセントボーダー

3.3 感想

フィールド	種類	必須
あらすじ	テキストエリア	—
感想	テキストエリア	✅
印象に残った一節	テキストエリア（イタリック）	—

3.4 おすすめ対象（チップ選択・複数可）

• 気分: 落ち込んでいる時 / やる気が出ない時 / 癒されたい時 / 考えさせられたい時 / 笑いたい時 / ロマンを感じたい時
• 性格: 内向的な人 / 外向的な人 / 論理的な人 / 感情的な人 / 野心的な人 / 穏やかな人

3.5 Kindle版自動判定

• 書籍名＋著者名が入力されると自動でKindle版の有無を調査
• 状態表示:
  • 未入力: 「書籍名と著者名を入力すると自動で調査」
  • 調査中: 「調査中...」（スピンアニメーション）
  • あり: 「Kindle版が見つかりました」（アクセント色）
  • なし: 「Kindle版は見つかりませんでした」

3.6 保存

• 「記録を保存」ボタン
• 保存成功時: トースト表示（アクセント色背景）→ 2秒後にフォームリセット

4 マイページ

4.1 プロフィールヘッダー

• アバター（イニシャルサークル56px、アクセント色背景）
• ユーザー名、メールアドレス、自己紹介

4.2 統計情報（4カラムグリッド）

項目	説明
読了	読んだ本の総数
読みたい	読みたい本の総数
フォロワー	フォロワー数
フォロー中	フォロー中の人数

4.3 プロフィール情報

フィールド	選択肢
年代	10代 / 20代 / 30代 / 40代 / 50代 / 60代以上
職業	エンジニア / デザイナー / マーケター / 営業 / 経営者 / 教師 / 学生 / 医療従事者 / 公務員 / フリーランス / その他
性別	男性 / 女性 / その他 / 回答しない
MBTI（任意）	16タイプ + 未診断・わからない

4.4 アカウント設定

• 公開/非公開トグル
  • 公開時: 類似ユーザーからのレコメンドが有効
  • 非公開時: 情報は非公開

4.5 蔵書リスト

• 読んだ本の一覧: クリックで本のリストを表示（ジャンル色付き）
• 読みたい本の一覧: クリックで本のリストを表示（ジャンル色付き）
• 各リスト:
  • 左ボーダー: ジャンル色（4px）
  • タイトル（14px, weight 500）
  • 著者名（12px）
  • ジャンルタグ（ジャンル色）
  • 「戻る」ボタンでプロフィールに戻る

最後に

今回は、モバイルアプリのモックを記事にしましたが、プレゼン資料作成や案件のステークホルダーの整理の図示、LP作りも簡単に出来ました。Claudeの他の機能でも出来ないこともないけど、ビジュアル化するものに対して細かいチューニングが大分楽になったというのが私がClaudeDesignを少し使ってみた所感です。皆さんも活用してみてください。