Style · ソフト
ソフトWebデザインの参考例とAIプロンプト
パステル配色・丸み・柔らかい陰影で構成するソフト系AIプロンプト集。ヘルスケア・ウェルネスに。
ソフトについて
パステル配色・大きな角丸・柔らかい陰影で構成する優しいデザイン。ヘルスケア、ウェルネス、育児、教育、ビューティーなど、心理的安心感が必要な領域で効果を発揮します。Neumorphism の系譜もここに含まれる。角が丸い図形は鋭角より脅威度が低く知覚されるため、身構えさせずに読ませられます。数字とロゴで圧をかける代わりに、余白とトーンで呼吸を整える。淡い配色はコントラストを落とします。本文と入力欄のラベルは必ず実測し、優しさと読めなさを取り違えないでください。
ソフトの視覚パラメータ
- #FDF8F5 地
- #4A4440 文字
- #F6C7C0 主色
- #A8D5BA 副色
- 書体
- 丸みのあるサンセリフ。行間は広めに取る
- 形
- 角丸16〜24px。ぼかした薄い影で浮かせる
- 動き
- 300〜400msのゆるい動き
よく使われる場面
- ヘルスケア・ウェルネスアプリ
- 育児・子育て支援サービス
- 女性向け美容・ライフスタイル
- 瞑想・メンタルヘルス
- 教育・学習コンテンツ
成功のポイント
- 配色はパステル3色程度に絞る
- 角丸は16-32pxなど大きめ
- 影は柔らかく、距離を短めに
- 書体は丸ゴシック系を選ぶ
- アニメもゆっくり柔らかく
このスタイルのデザイン
余白と墨線で読ませるお客様の声
顔写真も星評価も置かず、明朝体と非対称の配置だけで証言を読ませるお客様の声。欠点に触れた一言をあえて残すことで、他の二つの声の信憑性を上げます。
マスコットが見守る新規登録画面
丸みとパステル、CSSだけで組んだマスコットで登録の緊張をほどくサインアップ画面。パスワード強度は点数ではなく励ましの言葉で返し、3ステップの進捗を先に見せます。
スマホフレーム重ねの3画面アプリショーケース
モバイルアプリのプロダクトサイト向けに、傾けた3枚のスマホフレームに UI スクリーンを並べるショーケース。フィットネス・健康・SaaS モバイルアプリの定番表現を CSS だけで構築する尖った設計。
パステル×マスコットの「かわいい」CTAセクション
日本発の「kawaii」美学を再構築した、パステル配色とマスコットキャラのCTAセクション。Z世代の女性向け・コスメ・サンリオ系プロダクトに刺さる、ふわふわで愛され系の遊び心ある設計。
Y2Kクロームベベルとオーブの料金プラン
2000年代初頭の Frutiger Aero / Mac OS X Aqua / 透明クロームを再構築した Y2K 風料金プラン。鏡面ベベル・色付き光沢オーブ・虹色グラデで「ソフトウェアパッケージ」感を演出する。
親しみのあるイラスト付き空状態(受信箱が空)
受信箱や通知センターが空のときの画面UI。シンプルなイラスト・1 行のコピー・1 つの明確なCTAで、「何もない」状態を「次のアクションへ」変える設計。
手描きスケッチを散りばめた温度のあるフッター
紙質感のオフホワイトに手描き線のイラスト・ラフな書き込みを散りばめた、温度のあるフッター。クラフトブランド・カフェ・絵本系メディアなど人の手の温もりが武器になる業態に。
パステル配色の柔らかいお客様の声セクション
ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。
すりガラス調の追従ナビゲーション
半透明のすりガラス越しに背景のパステルが透けて見える、カプセル型の追従ナビゲーション。スクロール時もコンテンツの世界観を壊さず、モダンなSaaSやプロダクトサイトの上部に向きます。
シンプルで洗練されたヒーローセクション
余白を大きくとり、見出しとCTAだけで価値を伝えるミニマルなヒーローセクション。SaaSや個人開発のランディングページ最上部に向いた、装飾を削って要点を立てる構成。