Bible Network Crypto DeFi Onchain RWA AI Agent Stablecoin Chain SAFU CryptoTax DeFAI AGI Claude Me Claude Skill Claude Design Claude Cowork
独立メディア
いかなるプロジェクトとも無提携
Claude Designで、アイデアをインタラクティブなビジュアルに変える
claudedesign-me.com
最新
AI生成インターフェースが見落としがちなアクセシビリティ問題:配色だけでなく、意味構造こそが本当の問題領域  ·  ケーススタディ:雑然としたダッシュボードの再設計——何が問題だったか、AIでどう分解したか  ·  Figma、Canva、Claude Design:3つのツールの位置づけの違いを分解する  ·  生成ボタンを押す前のチェックリスト:5つの問い、良い例と悪い例の対比  ·  生成例:一頁式ポートフォリオサイト、プロンプトから完成品まで分解  ·  よくあるデザインタスク向け5つのプロンプトテンプレート——コピーして数語変えるだけで使える
output-library

生成例:一頁式ポートフォリオサイト、プロンプトから完成品まで分解

30秒バージョン · 忙しい方へ
配色とレイアウトはAIが通常うまく処理してくれるが、「あなたの個性とは何か」はAIが代わりに決めてはくれない。

詳しく読む +
01 · なぜ起きたのか?

このケースで、AIは構造は完全に生成しながら「一言のポジショニング」には汎用的な文言を入れた。これはどんな法則を反映しているのか。

これは、AIが明確なフォーマットルール(いくつのセクションがあり、各セクションにどんなタイプの内容を入れるか)がある場合は比較的安定した動作をするが、「これはあなたについてのもので、あなた自身しか答えを知らない」内容が必要な場合は、統計的に最も一般的な言い回しに頼って空白を埋めるしかないという法則を反映している——AIには使用者の実際の個性が何であるかを知る手段がなく、使用者が明確に伝えない限り分からないからだ。

これはプロンプトに情報が与えられていたかどうかと直接関係している——プロンプトには「3枚のプロジェクトカード、各カードにサムネイルと一文の説明」という明確な要求があり、これはフォーマットルールなのでAIはそれに従える。しかしプロンプトには「あなたの一言のポジショニングに何を書くべきか」という具体的な答えは提供されておらず、AIはもっともらしく聞こえるバージョンを自分で推測するしかなかった。

02 · 仕組みは?

第2ラウンドの調整は2つの要素だけを変え、構造は全く動かなかった。この結果は偶然なのか、予測できるものなのか。

予測できるものだ。第2ラウンドの指示自体がこの2つの具体的な要素のみを対象としており、AIに全体構造をやり直すよう求めていなかったからだ。これはまさに「セクションごとに調整し、範囲が小さいほど制御しやすい」という原則に対応している——もし第2ラウンドの指示が「サイト全体の雰囲気を刷新して」といった曖昧なものだったら、AIはおそらく既に確定していたレイアウトも一緒に再生成し、かえって不必要な変更を増やしていただろう。

調整範囲を明確に「一言のポジショニング」と「アクセントカラー」の2点に限定することは、AIに「他の部分は動かさないでください」と伝えているのと同じだ。この結果は運が良かったのではなく、プロンプト自体の精度がもたらした予測可能な結果だ。

03 · 自分にどう影響する?

もし使用者が最初から自分で一言のポジショニングを書き、それを最初のプロンプトに直接入れていたら、第2ラウンドの調整は省略できたのか。

省略できた。理論的には、最初のプロンプトに「一言のポジショニング:[使用者自身が書いたバージョン]」を直接含めていれば、AIに自分で生成させるのではなく、この欄は最初の草案で最終版になり、第2ラウンドの修正は不要だっただろう。このケースが2ラウンドに分かれたのは、ある意味プロンプト計画時の順序選択を反映している——まずAIが自分で何を埋めるかを見て、埋めが不十分な部分を後で補強するやり方と、最初から分かっている具体的な答えをすべて揃えるやり方は、2つの異なる作業スタイルであり、それぞれ適した状況がある。

もし自分が何を求めているか既に明確に分かっているなら(具体的なポジショニング文、正確な色の値など)、最初からすべて揃える方が通常より効率的だ。もしまだ模索中で、AIがどんなバージョンを出すか参考として先に見てみたいなら、段階的な調整の方がかえって比較基準を提供してくれる。どちらのやり方にも絶対的な優劣はなく、タスクに取りかかる前にどれだけ考え抜けているかによる。

04 · どうすればいい?

このケースはフリーランスデザイナーの一頁式ポートフォリオだが、別の業種や用途(例えば社内ツールのプロトタイプ)に置き換えても、ここでの観察は当てはまるのか。

核心的な観察——「フォーマットルールはAIが安定して処理するが、個人化されたコンテンツや状況特有の内容は人の確認が必要」——は、ポートフォリオサイトに限らずかなり広く適用できる。社内ツールのプロトタイプに置き換えても、AIは「いくつの画面があり、各画面にどんなコンポーネントを置くか」といったフォーマットルールを同様に安定して処理できるが、「このツールが具体的に自社のどの業務フローのどの痛点を解決すべきか」という使用者自身しか知らない状況情報に関しては、同じようにAIは推測するしかなく、使用者が明確に伝える必要がある。

この法則を一般的な判断基準として使える——タスクの中で「どのクライアントや状況に置き換えても答えが変わらない」部分はAIに処理させるのに適しており、「この状況でのみ成り立つ」部分は、通常自ら確認すべきであり、AIの推測に完全に委ねられない部分だ。

全文 +

この記事では実際の生成例を分解する——フリーランスのデザイナーが素早く公開できる一頁式ポートフォリオサイトを必要としているケースだ。完成品がどう見えるかを示すだけでなく、「プロンプトで何を指定したか、AIが何を生成したか、どこに手動調整が必要だったか」というプロセス全体を明らかにし、類似のタスクをどう組み立てられるかを示す。

要件の背景

使用者はフリーランスの仕事を始めたばかりのインターフェースデザイナーで、3〜5点の代表作を掲載でき、簡単な自己紹介と連絡先が付いたサイトを必要としている。時間は限られており、複雑な複数ページの構造は不要で、目標は履歴書や提案書に載せられるリンクをまず持つことだ。

最初のプロンプト

「一頁式ポートフォリオサイトを作ってください。私はモバイルアプリのインターフェースデザインを主に手がけるインターフェースデザイナーです。サイトには以下が必要です——上部に簡単な自己紹介セクション(名前、一言のポジショニング、プロフィール写真の位置)、注目作品セクション、3枚のプロジェクトカード(各カードにサムネイル、プロジェクト名、そのプロジェクトが解決した問題を説明する一文)、自己紹介セクション(背景と得意分野の簡単な説明)、下部に連絡先(email、LinkedIn、履歴書ダウンロードリンク)。スタイル:シンプルで余白を活かし、白黒に1つのアクセントカラー、フォントはモダンだが冷たすぎず、少し温かみを感じさせたい。」

最初の草案と観察

最初の草案の全体的なレイアウト構造は要件に合致しており、4つのセクションすべてが揃い、作品カードのレイアウトも合理的だった。しかしいくつか調整が必要な点があった——自己紹介の「一言のポジショニング」欄に、AIは汎用的なテンプレート文言(「直感的で美しいユーザー体験を作る」のような)を入れていた。この種の言い回しはほぼどんなインターフェースデザイナーにも当てはまり、個人の識別性を欠いていた。アクセントカラーはAIが冷たい印象の青を選んでおり、プロンプトの「少し温かみを感じさせたい」という記述と完全には一致していなかった。

第2ラウンドの調整

この2つの問題に対してそれぞれ具体的な指示を出した——「一言のポジショニング」は使用者自身が書いたバージョンを直接提供し、AIに再生成させなかった。アクセントカラーについては「暖かいオレンジだが明るすぎず、テラコッタ寄りの色調」に変更するよう明確に求め、テック感ではなく手作り感を出したいという理由も説明した。このラウンドの修正は2つの具体的な要素のみを対象とし、それ以外の構造やレイアウトは再度変更されなかった。これは前述の「セクションごとに生成し、範囲が小さいほど制御しやすい」という原則が実際のケースで表れたものだ。

最終版の違い

調整後のバージョンは最初の草案と比べてレイアウト構造は全く変わっておらず、変わったのはアクセントカラーと自己紹介文言という2つのコンテンツレベルの詳細だけだった。これは実務上の観察を裏付けている——AI生成の最初の草案は通常構造が使える状態であり、実際に人の介入が必要な部分は、多くの場合コンテンツの個人化の度合いとビジュアルトーンの微調整であり、レイアウト全体をやり直すことではない。

あなたのデザイン業務にとって何を意味するか

このケースで注目すべきは、「一言のポジショニング」のような小さく見える欄こそが、AIが汎用的なテンプレート文言を入れがちな場所であり、使用者自身が最も念入りに確認すべき場所だという点だ。AIは「あなたの個性とは何か」を決めることができない——これは本質的に自分自身で考え抜き、それをAIに明確に提供すべきことであり、AIが独自性を代わりに生成してくれることを期待すべきではない。ビジュアルの層(配色、レイアウト)はAIが通常うまく処理してくれるが、「あなた自身についての」内容に関しては、自ら確認するこのステップを省略できない。

図解
Portfolio Output: Draft to Final對照圖:第一版(通用定位語、冷色調)與最終版(使用者自寫定位語、暖色調),結構完全不變只調整兩個內容元素Portfolio Output: Draft to FinalFirst DraftBio + generic taglineAbout sectionContact (cool blue accent)2 targetededits onlyFinal VersionBio + user's own taglineAbout section (unchanged)Contact (terracotta accent)Claude Design Me · claudedesign-me.com
スクリーンショット歓迎。転載時は出典を明記してください。
質問する
10文字以上入力してください
関連記事
AI生成インターフェースが見落としがちなアクセシビリティ問題:配色だけでなく、意味構造こそが本当の問題領域
advanced · 08/15
ケーススタディ:雑然としたダッシュボードの再設計——何が問題だったか、AIでどう分解したか
cases · 08/15
Figma、Canva、Claude Design:3つのツールの位置づけの違いを分解する
comparisons · 08/15
生成ボタンを押す前のチェックリスト:5つの問い、良い例と悪い例の対比
prompt-examples · 08/14