ネオブルータリズム デザインインスピレーション
「洗練」の対極にあるのが、ネオブルータリズムだ。太い黒ボーダー、ハードシャドウ、パステルカラーの背景ブロック -- すべてが「意図的な粗さ」を主張する。Figma、Gumroad、そして新世代のインディーSaaSが採用するこのスタイルは、企業的なフォーマリズムへの反動として生まれた。完璧を捨てることで得られる「個性」と「親しみやすさ」。このページでは、ネオブルータリズムのデザインシステムを豊富なビジュアル例とともに解説する。
このページの使い方
各セクションにインラインHTMLのビジュアル例を配置しています。太いボーダーとハードシャドウの「手触り」を画面上で体感してください。
デザイン哲学 -- 意図的な粗さ
完璧を捨てろ。個性を獲得しろ。
ネオブルータリズムは「粗い(brutal)」が語源だ。ただし、雑なのではない。意図的に粗く、計算して遊ぶ。太いボーダーは「ここに要素がある」と明示し、ハードシャドウは「この要素は浮いている」と宣言する。曖昧さがない。そしてパステルカラーの背景ブロックが、この粗さに「遊び心」を加える。
以下が、この哲学を体現したネオブルータリズムUIのプレビューである:
カラーパレット -- パステルの色面分割
ネオブルータリズムの色使いはシンプルだ。テキストは常に黒(#000000)。背景はパステルカラーのブロックで分割する。
Color Blocks
ボタンフィルカラー
Yellow #facc15
Pink #f472b6
Blue #60a5fa
Green #4ade80
| Token | 値 | 役割 |
|---|---|---|
| bg-base | #ffffff | メイン背景 |
| bg-yellow | #fef9c3 | 注目セクション |
| bg-pink | #fce7f3 | CTAセクション |
| bg-blue | #dbeafe | 情報セクション |
| bg-green | #dcfce7 | 成功セクション |
| bg-purple | #f3e8ff | プレミアムセクション |
| text-primary | #000000 | すべてのテキスト |
| border-brutal | 2px solid #000000 | 全要素のボーダー |
| shadow-brutal | 4px 4px 0px #000000 | ハードシャドウ |
ハードシャドウの物理法則
ネオブルータリズムのシャドウにはルールがある: ブラーなし、常に右下、常に黒。
Shadow Levels
2px 2px
Small
Small
4px 4px
Standard
Standard
6px 6px
Elevated
Elevated
8px 8px
Maximum
Maximum
インタラクションの物理法則:
- ホバー: シャドウが拡大(4px→6px) + 要素がtranslate(-2px, -2px)で「浮く」
- クリック: シャドウが縮小(4px→2px) + 要素がtranslate(2px, 2px)で「沈む」
- 遷移時間: 100ms（素早くスナッピーに。エレガントな300msは不要）
コンポーネント -- 太く、明確に
ボタンバリエーション
Primary
Secondary
Danger
Ghost
カードバリエーション
Standard Card
白背景 + 12px角丸のスタンダードカード
Rotated Card
カラー背景 + 0px角丸 + 微回転(-1deg)
バッジコレクション
DefaultSuccessErrorInfoPremium
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/NEOBRUTALISM.mdをプロジェクトのDESIGN.mdにコピー- パステルカラーをブランドに合わせて調整
- Stitch に「この DESIGN.md に従ってLPを作成してください」と指示
適したプロジェクト
- インディーSaaSのLP
- クリエイターツールの紹介サイト
- ハッカソンのイベントページ
- 個人プロダクトのランディングページ
- ニュースレター登録ページ
不向きなプロジェクト
- 金融・医療等のフォーマルなサービス
- 高級ブランドのECサイト
- 企業の公式コーポレートサイト
- ダークモードが必須のアプリ
回転エフェクトの注意
transform: rotate() はモバイルでレイアウト崩れを起こす可能性があります。640px以下では rotate(0deg) にリセットしてください。