Claude Designのプレビューで出てから約1ヶ月、ちゃんと使い込みました。 今回は、実際に使って見えてきた Claude Design の強み・弱みをまとめます。 ※プライベートで試してます(会社の利用は現時点ではNGです) 結論からいうと、 「一番強いAIプロトツールが決まった」わけではなく、用途によって使い分けるほうが良いな 、というのが実感です。 今回は、Claude Designをプロトタイピング/仕様決め/アイデア出し/ブレストといった 0→1寄りの場面 で1ヶ月ほど使ってみた所感を、Lovable / v0 / Figma Make / Base44 あたりと比較しながら整理してみます。 前提・スコープ 今日話すのはここです。 スコープ: プロトタイピング / 仕様決め / アイデア出し / ブレスト スコープ外:スライド作成、動画作成、汎用性の話 「プロトタイピング」に絞った話で、 「Claude Designでスライド作るのどうなの？」 「Claude Designで動画が作れるらしいけど」 みたいな話は割愛します。 プロトタイピングツールはどのように移り変わっていったか？ 今回の使い分けとなる根底の話で、直近でAIのプロトタイピングツールは、進化し続けています。 ざっくり、AIでアプリ作る系ツールについても、振り返ってみましょう。 2023年末:v0登場 (Vercel)。「AIでアプリ作れるらしい」と話題に。最初の数週間で10万人待機リストに 2024年末:Lovable (元 GPT Engineer App)が "Lovable" にリブランド。フロントから裏側まで一気通貫で作れる方向で伸びてきた 2025年:Base44 台頭。認証・DB・ホスティングまでビルトインで、完成度の高さで評価されている  少しお値段高め...💸 2026年3月 :Figma Make kits(デザインシステム連携)が有料プラン向けに展開 2026年4月17日 :Claude Designが研究プレビューで登場 並べてみて思うのは、 「これが一番」ではなく、用途特化で枝分かれしている ということなんですよね。 なので今日の話も、「Claude Designが他より優れているか」ではなく、 「どこで使い分けるか」 の話になります。 Claude Design は、0→1や企画にめちゃくちゃ強い 長くなるので先に結論ですが、 Claude Design は「 0→1の探索と壁打ち 」に強い。「即・運用できるアプリ」を出したいときには、向かないという印象でした。 Claude側が想定しているのは、Claude Design で検討して、Claude Codeで作るといった感じなんだと思います。 もう少し深掘っていきます。 Claude Designとは まずは、そもそもClaude Designとは？というところからです。 Anthropic Labsが出した、 会話しながらプロト・モック・スライド・1枚資料を作る 機能 チャット + キャンバス の二画面構成で、いわば「 言葉でデザインする 」感じ 出せるもの:動くプロトタイプ / モック / スライド / 1枚資料 出ないもの :そのまま運用できる完動アプリ(実装に進むときはClaude Codeに引き継ぎ) ↓ Claude Designのチャット+キャンバス画面イメージ ポイントは、出力が ただの画像ではなく、編集可能な実体(artifact) として出てくるところ。HTMLやPPTX、PDF、Canvaにエクスポートしたり、Claude Codeに渡して実装に進めたりできます。 ここからは、1ヶ月使って感じた 強み3つ と 弱み を整理します。 強み① デザインシステムを組み込める これが一番大きいです。 Claude Design は、オンボーディングや会話の中で チームのコードベースやデザインファイルを読んで、ブランド固有のデザインシステムを内製してくれる 、というアプローチを取っています。 具体的には、 Figmaのスタイル / 既存コンポーネントのコードを投入できる それを以降のプロジェクトに ずっと適用してくれる 「うちのブランドはこういう思想」を、文章+実物で教え込める 何が嬉しいかというと、 ブランディングと思想を正確に反映できる こと。 「AIが作るそれっぽい綺麗UI」ではなく、 自社のテイストを保ったままプロトが出てくる ので、社内で見せるときの説得力が違うんですよね。 こんな感じでデザインシステムを入れることができる  ( OpenProps というデザインシステムを入れてみている) こんな感じで、TODOアプリを依頼すると、デザインシステムに則って作ってくれる (他のツールだとこれが意外と難しい) ↓デザインシステム内のラベル ↓のような感じでTODOリストのラベル部分に反映されていることがわかる ちなみに、UIキット対応は各ツールで進んでいる Figma Make も2026年3月から  Make kits  という形で、デザインシステム(npmパッケージ + Figma styles + ガイドライン)を組織単位で取り込めるようになっています。 Claude Designと似たようなことができますが、Figma Make だと npmパッケージまで作らないといけないってことが若干ハードル高いですね... Get started with Make kits 強み② 並行ブレスト体験(コンテキスト並行 × キャンバスで見渡す) これは Figma Make / Lovable と比較するとわかりやすいです。 「一本のコンテキストを最初から最後まで」の限界 Lovable や Figma Make を1本のプロジェクトでガッツリ使ってると、こうなりがちです。 最初に作ったコンテキストに、修正・修正・修正を重ねる 後半になるほど コンテキストが肥大化 して、修正が重くなる 「あの案、最初の方が良かったかも」と思っても 戻りにくい これは1本筋のフロー設計の宿命で、 修正が進むほどコストが上がる んですよね。 Claude Designは「コンテキストを並行に切れる」 Claude Designは、 コンテキスト(対話)を 1本ではなく何本も並行で持てる それぞれのアウトプットを キャンバス上に横並びで比較 できる 画面遷移ごと、フロー単位 で提案を出せる(個別の1画面だけじゃなく) これが「 ブレスト体験 」としてすごくテンポがいい。 「A案 / B案 / C案で出して、Aのこの部分とCのこの部分を組み合わせたい」みたいな、 実際の議論の流れ に近いことがツール側でできる。 データが蓄積していくのも地味に嬉しい 並行で切ったブレストの結果が 全部資産として残る ので、 「前にやったブレストのあの案、ちょっと似た要件のときに流用したい」 「過去のC案を出発点に、新案件を組み立てたい」 みたいな再利用ができます。Lovable や Figma Make の1本筋構造だと、 過去案を呼び出しにくい ので、ここは違いが出るところですね。 強み③ 双方向コメント / Editモード 地味ですが、この機能が修正のスピードに大きく貢献します。 軽微な文言修正(コピー / ラベル / 説明文など)は その場で直接編集できる 「ここのボタン文言だけ変えたい」を、わざわざプロンプトに投げ直さなくていい 「プロンプトに投げる → AIが再生成 → 確認」というループって、軽微な修正だとオーバースペックなんですよね。 直接自分の手で修正した方が早い場面はそれなりにあって、そこをちゃんと両立させているのが好印象でした。 「全部AIに任せる」じゃなくて、 人がやった方が速い部分は人がやれる 設計、というのが思想として一貫してる感じがします。 ↓こんな感じでプロパティーや文言をいじることができる 弱み ここはハッキリしてます。 即・運用できるアプリが欲しいときは苦手 です。 具体的には、 認証(ユーザー管理 / ログイン) 裏ロジック(API / DB / バッチ) 本番デプロイ環境 このあたりは Claude Design 単体では完結しません。 設計が終わったらClaude Codeに引き継いで実装 、という流れになります。 なので、 PMが企画を持ってきて、エンジニアが実装する :Claude Design → Claude Code この流れが強い 非エンジニアが1人で完結したい :Base44 / Lovable / v0 / Figma Make の方が向いている という棲み分けになります。 使い分けスペクトル ここまでの話を1枚にまとめると、こんな感じになります。 左 は「 捨てる案を作る 」フェーズ向け、 中央 は「 1案を作り込む 」フェーズ向け、 右 は「 運用まで持っていく 」フェーズ向け、みたいなかんじで自分は使い分けています。 じゃあ実務でどう使い分けるか 1ヶ月使った肌感だと、こんな順番が一番テンポが良かったです。 Claude Designで複数案を並行で出す (企画フェーズ) キャンバスで横並びにして、 チーム内で議論 方向性が決まったら、 Claude Designで深掘りした1案を整える Claude Codeに引き継いで実装 (ここで初めて運用を見据えた話になる) ポイントは、 「捨てる案」を作りやすい ことです。 「最初から1本筋で作り込む」だと、出した案がそのまま実装の出発点になってしまい、 捨てるコストが高い んですよね。Claude Designだと「3案出して、2案捨てる」がだいぶ気軽にできます。 これは0→1フェーズだとかなり嬉しいポイントです。 まとめ 伝えたかったこととしては、2点です。 ① AIプロトツールは「一番」ではなく「用途で使い分け」 ツールの選び方の軸が、 「 何でも一番速いやつ 」探し ↓ 「 やりたいフェーズに対して、設計思想が合うやつ 」探し に切り替わってきていると感じます。 それぞれ得意な場所が違うので、 自分の今のフェーズに合うものを選ぶ のが結果的には、効率よく良いものが作れるんじゃないかと思っています。 ② Claude Design は「0→1の探索と壁打ち」の入口として強い デザインシステムを正確に反映できる 複数案を並行で出して比較できる 軽微な修正は直接編集できる この3つが揃っているプロトツールは現状あまりないので、 企画フェーズの入口としての価値はかなり高い と思っています。 逆に、 運用フェーズに進むときは別ツール(Claude Codeなど)に渡す 、と割り切るのがコツです。1ツールで全部やろうとすると、結局上手くいきません... AIプロトツールがここまで増えてくると、もう「全部試して一番速いやつを使う」が成立しなくなってきていますね  この手のツールは、意外と差分あったりするので、何個か触ってみて、良い使い方・良いツールを探していくのがおすすめです！ 最後までお読みいただきありがとうございました！

現在、スマートフォンやPCのOS、多くのアプリで当たり前のように提供されている「ダークモード」。 本記事では、ダークモードの歴史から、ダークモードが有効なケース、そして色彩設計のガイドまでを解説します。 ダークモードは原点回帰？ コンピューターの歴史を振り返ると、画面は最初からダークモード（暗い背景）でした。 1970年代から80年代前半、主流だったCRT（ブラウン管）モニターでは、画面全体を明るく発光させることは負荷が高かったため、「暗い背景に緑や白色のテキスト」を表示するのが基本でした。 しかし1970年代にGUI（グラフィカルユーザーインターフェース）が研究所で生まれ、1980年代前半から実用化・普及し始めると、画面設計の考え方は大きく変わりました。GUIを採用したパーソナルコンピューターでは、文書作成やデスクトップパブリッシング（DTP）が重要な用途となり、画面上で印刷結果を忠実に再現するWYSIWYGという考え方が広まりました。白い紙に黒い文字が印刷されていることを、画面上で表すことが基本となったのです。こうして、一般向けパソコンのGUIではライトモードが事実上の標準となりました。 この間、一般向けの画面は白くなりましたが、システムを開発するエンジニアたちは、非GUIな開発環境などで「黒い画面」を使い続けていました。 そして2010年代、スマートフォンが普及し、暗い場所でディスプレイを見る時間も増えました。スマートフォンで使われることの多い有機ELディスプレイは「黒色＝発光をオフにする」仕組みのため、黒背景にすることで消費電力を抑えることができます。OSやアプリケーションではデザインシステムが成熟し、ライトモードとダークモードの双方を前提とした設計が一般的になります。 「ダークモード＝目に優しい」は本当？ 「ダークモードは目に優しい」とよく言われますが、科学的には「無条件に目の負担が減るわけではない」というのが真実です。人間の目の「瞳孔」の働きによって、ライトモードとダークモードには一長一短があります。 ライトモードのメリット：ピント調節のしやすさ 人間は明るいものを見ると瞳孔が小さくなります。カメラの絞りを絞った時のように「焦点深度」が深くなるため（ピンホール効果）、目の筋肉に負担をかけずに文字にピントを合わせることができます。十分な照明環境では、ライトモードの方が読解速度や文字認識精度が高いという研究が報告されています。 カメラの絞りと被写界深度 ダークモードのメリット：暗所でのまぶしさ軽減 一方、ダークモードが真価を発揮するのは「周囲が暗い環境」です。暗い部屋でライトモードを見ると、強いコントラストによる「まぶしさ（光の刺激）」が強いストレスを与えます。暗所においては、発光量が少ないダークモードの方が主観的な目の疲労感が減少することが、研究で報告されています。 ダークモードと「ネオンサイン」のジレンマ ダークモードでは、白い文字やアイコンなどが光を帯びたようににじんで見えることがあります。 暗い画面を見ていると、目はより多くの光を取り込もうとして瞳孔を広げます。瞳孔が大きく開くと、目の光学収差や眼球内での光の散乱の影響を受けやすくなるため、暗い背景に表示された明るい文字などの高コントラストな要素は、輪郭がぼやけたり、光がにじんで見えたりする場合があります。 この見え方は、夜の街でネオンサインや街灯の光が周囲ににじんで見える現象と似ています。（ネオンサインや街灯のにじみには、大気中の塵や水滴による光の散乱も影響しているため、まったく同じ現象ではありません。） また、このような見え方は誰にでも起こり得ますが、乱視がある場合は光が特定の方向へ伸びたり、文字が二重に見えたりするなど、にじみがより目立つことがあります。 ダークモードが必要なケースと不要なケース こうしたメリット・デメリットを踏まえると、ダークモードはすべてのサイトやアプリで必須というわけではありません。ユーザーの「利用時間」「利用環境」「コンテンツの性質」によって優先度は大きく変わります。 ダークモードが求められるケース 夜間や暗所で利用されるアプリ ：地図、カーナビ、アラーム、電子書籍など。周囲の暗順応を妨げず、眩しさを抑える配慮が必要なため。 コンテンツ没入型（エンタメ ）：動画配信やゲーム、写真ギャラリーなど。周囲のUIを沈ませることで、メインコンテンツを際立たせるため。 U-NEXT プロ用の映像、写真編集ツール ：上記のエンタメコンテンツと同様に視線の分散を防ぐ効果に加え、周囲のUIを暗くニュートラルにすることで「目の錯覚（明るい背景に引っ張られて写真が暗く見える現象）」を防ぎ、色や明るさのディテールを正確に認識・編集しやすくなります。 ダークモードを必要としないケース 一過性のWebサイト・ランディングページ ：メーカーやキャンペーンサイトなど、ブランドの世界観を固定して伝えることが優先されるもの。 Canva ウェブページテンプレート 印刷を前提としたドキュメント ：履歴書・職務経歴書などの作成サービス、ワードプロセッサーアプリなど。印刷をすることが前提の場合、仕上がりをイメージしやすくなります。前述のWYSIWYGエディターです。 Canva 単なる「色反転」ではない、色彩設計ガイド ダークモードの配色は、ライトモードのカラーを機械的に反転したものではありません。 視認性を担保し、にじみによる目の疲労を防ぐための設計が必要です。 完全な黒の背景、完全な白の文字にはしない 背景色には完全な黒ではなく黒に近いグレーを採用します。真っ黒を避けることでコントラストを適度に抑え、目への刺激を和らげます。背景と同じく、テキストも完全な白を避けます。 白い背景に暗い文字のライトモードでは、にじんで見えることは少ないですが、暗い背景に明るい文字のダークモードで真っ白な文字にすると、前述のように滲むため、ライトモードよりもダークモードのコントラストは小さくします。 次の表は、Google Financeの背景と文字の色です。 ライトモード ダークモード 背景色 #FFFFFF：白 #101218：青系の黒に近い暗いグレー 文字色 #0A0A0A：黒に近い暗いグレー #E6E8F0：青系の明るいグレー コントラスト比 19.79 : 1 15.3 : 1 表の「コントラスト比」は、アクセシビリティ基準（WCAG）で採用されている計算方法によって算出される、2つの色のコントラストの度合いを示す指標です。「1:1」がコントラストなし、「21:1」が最大のコントラストを表します。 有彩色も明度や彩度を調整 テーマカラーやグラフの色（有彩色）は、ライトモードの色のままダークモードで利用すると、色によって、目立ちすぎたり、背景と見分けにくくなる場合があります。Google Financeの例では、ライトモードの緑と赤のグラフの色を、色相を変えずに明るい色に調整してダークモードに適用しています。 Google Finance おわりに：利用環境によって最適なUIは変わる ライトモードとダークモードは優劣の関係ではなく、それぞれ異なる利用環境に最適化されたデザインです。重要なのは「どちらが優れているか」ではなく、「ユーザーがどのような環境で、どのような目的で利用するか」を理解し、それに合わせて設計することです。 ちなみに：アナログ時代から脈々と… コンピューターよりも以前から、夜間の視認性に配慮した表示設計は、自動車や航空機の計器で発達してきました。夜間に明るすぎる計器を見ると暗順応が妨げられ、暗い道路や空など周囲の状況を視認しにくくなることがあります。また、計器の光が窓ガラスに映り込み、視界を妨げることもあります。そのため、計器には暗い背景が採用されるほか、用途に応じて赤やアンバーなど、夜間の視認性に配慮した照明色が用いられてきました。 Photo by National Cancer Institute Windows Ladislav Stercell Rui Silvestre Tyler Rooney Ed Wingate Sandisk Dragoș Grigore Nursultan Bakyt Boitumelo on Unsplash ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？ 役に立った 役に立たなかった 0人がこの投稿は役に立ったと言っています。 The post 脱・なんとなくのダークモード。歴史と生理学から考えるUIデザイン first appeared on SIOS Tech Lab .

次世代基盤モデル「Gemini 3.5」とマルチモーダルモデル「Gemini Omni」 Googleの基盤モデルに、処理速度とマルチモーダル性能を強化した新しいラインナップが追加されました。