whimsical-design

風変わりなデザインスキル

条件付きの専門知識

求められる体験に、個性や楽しさ、表現力豊かなブランドの方向性が必要な場合に使用します。マーケティングページ、ポートフォリオ、バリエーションの練習だけでは不十分です。ユーザーの目的と要件が、その選択を裏付けている必要があります。定型的なユーティリティ UI、状態の修正、すでに確立された美的スタイルには適用しません。タスクとレビューは ADS が担当します。別のループを開始しないでください。

美的スタイルを考案する前に、求められる個性と、受け入れられた例を確認します。落ち着いていて、静的で、親しみやすいものが適切な場合もあります。装飾的なドットや、すべて大文字にするビジュアル表現は使わず、現在のユーザー設定とプロジェクトのトークンを維持します。以下のテクニックは選択肢であり、必須要素ではありません。

判断基準

選んだ個性は、タスクを妨げることなく、このユーザー層が体験を理解し、記憶し、楽しむ助けになっていますか？目新しさやエージェントの「笑顔テスト」は、ユーザーによる受け入れの代わりにはなりません。

基本原則

1. 無機質さよりも遊び心を

企業向け SaaS の定型から離れ、温かみ、個性、意外性を大切にします。Playdate の箱を開けたときや、Teenage Engineering の製品ページを初めて見たときの感覚を思い浮かべてください。

• ピクセルアート、手描きのテクスチャ、遊び心のあるイラスト
• 冷たいニュートラルグレーよりも温かみのあるカラーパレット
• 空の状態、読み込み画面、エラーメッセージにも個性を持たせる
• じっくり見る人へのご褒美となる細部

2. 反応する個性

意味のあるフィードバックは、触感や個性を際立たせます。タイミング、中断、動きを減らす設定、対象ブラウザーでの検証については、web-animation-design を使用してください。高頻度で操作するコントロールでは、動きを発生させない状態を維持します。画面に活気を与えるだけの目的で、待機中の上下動、絶え間ない脈動、テーブル行の移動、データのアニメーションを追加しないでください。

任意の例として、適切なコントロールを押したときの控えめなフィードバック、新しいコンテンツを説明する範囲の限られた表示、要件が許す場合のジェスチャー主導のスプリングアニメーションがあります。既存のトークンに合わせ、キーボード操作とフォーカスを維持し、実際のコンテンツの表示を遅らせないでください。サウンドは任意とし、結果を理解するために必要なものにしてはいけません。

3. 大胆で一貫した美的スタイル

新しい表現の方向性を定める場合は、既存の要件の中で具体的な美的スタイルを明示します。すでに確立された方向性があるなら、別の決定を無理に求めず、その方向性を再利用します。たとえば、次のようなスタイルがあります。

• 極限までミニマル（存在する価値のないものは一切置かない）
• マキシマリストな混沌（密度が高く、レイヤーが重なり、最高の意味で圧倒的）
• レトロフューチャー（古いテクノロジーの美学と現代の機能）
• オーガニック／ナチュラル（テクスチャ、温かみ、不完全さ）
• ラグジュアリー／洗練（細いウェイト、ゆとりある空間、上質な素材）
• 遊び心のあるおもちゃ風（丸みがあり、弾むようで、色鮮やか、触感がある）
• エディトリアル／雑誌風（タイポグラフィを主役にし、ドラマチックなスケールと読書のリズムを持たせる）
• ブルータリスト／生々しさ（構造をむき出しにし、装飾を排し、対峙するような表現）
• インダストリアル／実用本位（機能的で、密度が高く、無駄がない）

大切なのは、強さよりも意図です。抑制された表現が最も具体的な選択になることもあります。無関係なスタイルを無作為に混ぜるのは避けてください。

方向性の確認は、欠けている選択が重要な場合に限って行います。範囲の定まった仕上げの修正を、美的スタイルの聞き取りに変えないでください。

4. 背景の雰囲気

背景はムードを作り出します。明瞭さに役立つ場合は単色のままにし、テクスチャは、意図した素材感や雰囲気に貢献する場合にのみ追加します。

テクニック：

• ノイズ／粒状感のテクスチャ；background-image: url("data:image/svg+xml,...") を使い、不透明度 3～5％の控えめなノイズパターンを加えます。単色に触感を与えます。
• グラデーションメッシュ；不透明度を低くした放射状グラデーションを 2～3 層重ねます。けばけばしさを抑えながら奥行きを生み出します。
• 控えめなパターン；不透明度 2～4％の線や幾何学模様を使います。気を散らさずにテクスチャを加えます。
• 透明度の重なり；半透明の図形を背景で重ねます。奥行きと雰囲気を生み出します。

/* noise texture overlay */
.textured {
  position: relative;
}
.textured::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* gradient mesh */
.atmospheric {
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(232, 114, 58, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(45, 106, 79, 0.06) 0%, transparent 50%),
    #FAFAF8;
}

避けること：これらをすべての画面に使わないでください。ページの背景やヒーローセクションで使用します。内部のコンポーネントはすっきりさせてください。

5. クラフト感を伝える要素

プロダクトと参考例に合うクラフトの要素だけを選びます。以下は手法の例であり、由来や品質を判断する基準ではありません。

• 粒子感のあるテクスチャ、ノイズのオーバーレイ、ほのかな紙の風合い
• 意図的な不完全さ：少し不揃いで、手作業で配置したような自然さ
• クリーンなサンセリフ体にセリフ体のアクセントを組み合わせる（どちらか一方だけにしない）
• 無作為ではなく、考え抜かれた印象の非対称なレイアウト
• 可能であれば、ストックアイコンよりカスタムイラストを使う
• カーソルやスクロールに反応する SVG 要素

6. 感情を生む色

色は要素を区別するだけでなく、ムードを生み出す必要があります。

• 均等に配色するのではなく、ベースカラー＋アクセントカラー：ページを支配する色を一色決めます。注目させたいものには、鮮やかなアクセントカラーを使います。色を控えめに均等に散らしたパレットは、エージェントのありきたりな選択です。思い切って決めましょう。誰かの記憶に残る色は何ですか？
• スタジオジブリ風のパレット：温かみのあるアースカラー、鮮やかな空色、森の緑
• パントーンチップのような印象：具体的で、意図的で、名前を付けられる色
• 避けるもの：白地に灰色の企業的な空虚さ、暗色にネオンを組み合わせた「開発者向けツール」
• ダークモードは冷たい印象ではなく、心地よく感じられるようにします（深い藍色、温かみのある黒）

具体的な配色例：

• 温かみのあるライトモード：背景 #FAFAF8（純白ではない）、テキスト #1A1A1A（純黒ではない）、アクセント #E8723A（温かみのあるオレンジ）または #2D6A4F（フォレストグリーン）
• 心地よいダークモード：背景 #1C1917（zinc-900 ではなく温かみのある黒）、テキスト #E7E5E4、アクセント #F59E0B（アンバー）または #818CF8（柔らかなインディゴ）
• イラスト向けデータパレット（暖色系。シリーズの識別性と、実際の使用環境でのコントラストを確認してください）：#E8723A、#2D6A4F、#D4A373、#588157、#BC6C25。アースカラーです。16 進数の値だけでアクセシビリティが確保されるわけではありません
• データ可視化用パレット（寒色系）：#3B82F6、#8B5CF6、#06B6D4、#6366F1、#14B8A6。テクノロジーらしく、それでいて冷たくありません
• ステータスカラー：成功 #16A34A（ネオングリーンではない）、警告 #D97706（黄色ではない）、エラー #DC2626（ピンクではない）、情報 #2563EB
• グラデーション（派手にせず、控えめに）：暖色系のセクションには from-amber-50 to-orange-50、寒色系のセクションには from-slate-50 to-blue-50。背景のみに使用し、テキストには使用しません

7. 個性を生むタイポグラフィ

文字は、言葉が読まれる前から個性を伝えます。

• ウェイトに大きな差をつけます（細い見出し＋太く力強い本文、またはその逆）
• 見出しにはディスプレイ書体も検討します。システムフォントだけにしないでください
• 字間と行の高さは、デフォルトではなくデザイン上の選択です
• データやコードには等幅フォントを使いますが、意図を感じさせましょう（「スタイル設定を忘れただけ」に見せない）

参考例（研究してください）

プロダクト／物理的な製品

• Teenage Engineering：製品を憧れの対象として捉え、あらゆる面をデザインする
• Panic / Playdate：あらゆるインタラクションに楽しさを込め、驚きと喜びを中核的な価値とする
• Nothing Phone：グリフや透明性によって、テクノロジーを人間味のあるものにする

デジタル

• Perplexity のマーケティングページ：自信に満ちた余白、エディトリアルな雰囲気、イラスト
• Linear の変更履歴：緻密さとクラフト感を両立し、細部まで考え抜く
• Vercel の Ship ページ：動き、ドラマ性、タイポグラフィの力強さ
• Raycast：コマンドパレットを一つの芸術表現にする
• Arc Browser：サイドバーを表現の一部にする

ビジュアル表現

• 昔の Apple 広告（「Think Different」の時代）：魂のあるシンプルさ
• スタジオジブリのカラーグレーディング：温かく、暮らしの気配があり、自然光を感じさせる
• インディーゲームの UI（Celeste、Hollow Knight、Slay the Spire）：一つひとつのピクセルに個性を宿す
• Poolsuite / Poolsuite FM：レトロフューチャー、ノスタルジーをデザイン言語にする

文脈に照らして再検討したいパターン

• 目的のないグラスモーフィズム（ぼかしはデザインではありません）
• 個性の代わりに使うネオングラデーション
• ドロップシャドウを付けたありきたりなカードグリッド
• 意図するプロダクトと衝突する、検討されていないフレームワークのスタイル
• デザイン brief 全体が「クリーンでモダン」で終わっていること
• プロダクトを説明していない、ありきたりな画像
• あらゆる場所にある Gray-200 の背景と Gray-300 のボーダー
• カスタマイズしていない Tailwind のデフォルト
• 型にはまったヒーローセクション（見出し＋小見出し＋CTA＋モックアップ）
• 意味を持たないアニメーション（回転するロゴ、浮遊する図形）

ADS 内でのレビュー

選択したキャラクターを元のブリーフと照らし合わせ、すでにうまくできている部分は維持します。読みやすさ、主要なアクション、実態に即したエラー／空状態の文言、レスポンシブな構成、実際の動きがあるかを確認します。コンテンツの妨げになる装飾は取り除きます。テクスチャ、複数のフォント、アニメーション、イースターエッグは受け入れ条件ではありません。

採用された例について、うまく機能している具体的な理由と実際の承認状況を記録します。フィードバックを、明示的な好み、プロジェクトの決定、繰り返し発生する不具合、単発の修正に分類します。正当な理由がある場合にのみ既存の担当者を更新し、ビルドのたびに恒久的なルールを追加しないでください。