blue-cloudy-clean-modern

ブルー・クラウディ・クリーン・モダン・スキル

使用する場面

• 明るい青空の雰囲気、柔らかく漂う雲の光、ミニマルな白いフレーミング、落ち着いた上質なタイポグラフィを備えた、クリーンでモダンなデザインシステムを作成するときに使用します。

ワークフロー

適用範囲

• 背景、フレーミング、ナビゲーション、タイポグラフィ、CTA、ロゴ列、補助的なモーションを含む、デザインシステム全体の方向性として適用します。
• 単色の背景ではなく、空のような青い雰囲気が広がり、モダンで穏やか、向上心を感じさせる、開放的なインターフェースにしたいときに使用します。
• 汎用的な SaaS の青でも、漫画風の雲のテーマでもありません。上質で落ち着きがあり、細部まで丁寧に制御された印象にします。

ビジュアルの目標

• 豊かな青から淡い青へ移り変わる空の雰囲気と、背景を柔らかく漂う雲のような光をページの基調にします。
• 青い背景の上で構成がクリーンに明るく感じられるよう、白いタイポグラフィと、白または半透明の白い UI ディテールを使用します。
• 構造はミニマルに保ちます。細いコンテナの縁取り、控えめな角のスクエア、主張を抑えたナビゲーション、そして丁寧にフレーミングした少数のピルやボタンを使用します。
• 重さを感じさせないモダンな雰囲気を目指し、柔らかなグラデーション、ゆとりのあるスペーシング、洗練されたヒーローコピーを用います。情報量の多いダッシュボードや重厚なカードシステムは避けます。
• 白と青以外のアクセントカラーが必要な場合は、控えめな濃いニュートラルカラーか、柔らかな補色を最小限に使用します。

実装ガイダンス

• キャンバス、WebGL、または滑らかなレイヤーグラデーションに、漂う雲のような光のかたまりを組み合わせた、ビューポート全体を覆う雰囲気のある背景を優先します。
• 垂直方向または放射状のグラデーション遷移で背景を形作り、上部は豊かな青、下部はより明るく、霧がかった、あるいは雲に洗われたような印象にします。
• インターフェースのフレーミングは控えめにします。中央揃えの最大幅シェル、細い縦方向のコンテナ線、小さな角のマーカー、そして構成を支えつつ過度に枠で囲まない最小限のクロームを使用します。
• タイポグラフィは洗練されたモダンな印象に保ちます。大きくクリーンなサンセリフの見出し、細めの本文、強調する語句をひとつだけ際立たせるイタリックやエディトリアルなアクセントを、ときおり取り入れます。
• ボタンやピルは上質で軽やかな印象にします。半透明のシェル、柔らかなグラデーションボーダー、または確かな CTA が必要な場合には、強いシャドウを付けたコントラストのある濃色のピルを使用します。
• モーションは穏やかで上質にします。マスクを使った単語の表示、柔らかなフェード、ゆっくりとした雲の漂い、静かなロゴの表示、控えめな CTA のホバー時の拡大を取り入れます。

おすすめのパターン

• 雲が広がるキャンバス風の背景上に、中央揃え、または軽く構造化されたコンテンツを浮かべた、空色のフルスクリーンヒーロー。
• 重厚なボックス状のセクションを作らずにメインコンテンツを囲む、細い白いコンテナの縁取りと小さな角のスクエア。
• 小さなアバター、信頼性を示すラベル、または対象ユーザーの実績を添えたグラデーションボーダーのピルを、ヒーロー見出しの上に配置します。
• 白く大きなヒーロータイポグラフィに、ひとつの語句をイタリック、セリフ体、または別のスタイルにしてエレガントさを加えます。
• 構成の中に軽やかに配置したミニマルなロゴ列と柔らかな信頼性表示。はっきり区切られたカードグリッドにはしません。

調整項目

• 青の雰囲気：ブランドに合わせて、より深みのあるコバルトブルーの空、鮮やかなプロダクトブルー、柔らかなパステルアズールの間で調整します。
• 雲の柔らかさ：雲の形が嵐のようになったり、文字どおりの描写になったりしないよう、ぼかし、不透明度、動きを調整します。
• フレーミングの視認性：構造がわかる程度に、コンテナの線や角のマーカーを調整します。
• CTA のコントラスト：強調の必要性に応じて、メインアクションを落ち着いた濃色のボタンにするか、明るい半透明のシェルにするかを選びます。
• コンテンツの密度：穏やかな雰囲気が最も強く感じられるよう、レイアウトは開放的でゆとりを保ちます。

避けること

• 雰囲気の深みや雲の構造がない、単色の青いページ。
• 開放的なトーンを損なう、重厚なダッシュボードカード、情報が密集した技術的なグリッド、暗いサーフェス。
• 雲をあまりに文字どおりに描いたイラストや、子どもっぽい天気のモチーフ。
• 青と白の穏やかな印象を崩す、多すぎるアクセントカラー。
• 明瞭さを損なう、きついグラデーション、ノイズの多いアニメーション、過度に強いグラス効果。