ネオブルータリズムデザインガイド

このドキュメントは、サイト全体のトーン&マナー（トンマナ）を統一するためのデザインガイドラインです。wejoy-creative-agencyのスタイルを参考に、index.vueに実装した内容をまとめています。

カラーパレット

ネオブルータリズムスタイルの4色のパステルカラーを使用します。

:root {
  --neo-pink: #FFD4C4;
  --neo-purple: #D4C4FF;
  --neo-green: #D4FFC4;
  --neo-yellow: #FFF4C4;
  --neo-black: #121212;
}

カラーの使用例

ピンク (#FFD4C4): ブログ、記事コンテンツ
パープル (#D4C4FF): 財務データ、分析関連
グリーン (#D4FFC4): コーディング規約、技術ドキュメント
イエロー (#FFF4C4): 検索、ハイライト要素

境界線（Border）

太い境界線の使用

ネオブルータリズムの特徴である太い境界線を使用します。

border: 3px solid #000;

適用箇所

カード要素の周囲
セクションの区切り（上部のみ）
ボタンコンポーネント
アイコンコンテナ

重要ルール

セクションの罫線は上部のみ: 下部の罫線は不要。次のセクションの上部罫線が区切りの役割を果たす
重複を避ける: ヘッダー要素の下に罫線がある場合、次の要素の上に罫線を追加しない

シャドウ（Shadow）

ネオシャドウの定義

box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);      /* 標準 */
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);      /* 小 */
box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);      /* 大 */

適用例

.nav-card {
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
}

.nav-card-icon {
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);
}

ホバーエフェクト

カード要素

.nav-card {
  transition: all 0.2s;
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
}

.nav-card:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
}

ポイント:

上方向に4px移動
シャドウが4px → 8pxに拡大
transition: all 0.2s でスムーズなアニメーション

ボタン・リンク要素

.about-link {
  transition: all 0.2s;
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
}

.about-link:hover {
  background: var(--neo-purple);
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1);
}

アクティブ（クリック）エフェクト

クリック時にシャドウが消えて要素が沈み込む効果を実装します。

.nav-card:active,
.about-link:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);
}

または完全にシャドウを消す場合:

.element:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

タイポグラフィ

フォントウェイト

h1, h2 {
  font-weight: 800;  /* 太字 */
}

h3 {
  font-weight: 700;
}

.nav-card-content p {
  font-weight: 500;  /* 中程度 */
}

コード要素

code {
  background: var(--neo-yellow);
  padding: 0.25rem 0.5rem;
  border: 2px solid #000;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  font-weight: 700;
}

レイアウト原則

1. クリック可能な要素の明確化

カードデザイン: クリック可能な要素のみに適用
罫線区切り: クリック不可の情報セクションには罫線のみ使用

2. セクション区切り

.section {
  padding: 2rem 0;
  border-top: 3px solid #000;  /* 上部のみ */
}

3. カード要素の配色

各カードに異なる背景色を割り当てて視覚的な多様性を持たせます。

.nav-card:nth-child(1) { background: var(--neo-pink); }
.nav-card:nth-child(2) { background: var(--neo-purple); }
.nav-card:nth-child(3) { background: var(--neo-green); }
.nav-card:nth-child(4) { background: var(--neo-yellow); }

アイコンコンテナ

.nav-card-icon {
  font-size: 2rem;
  padding: 0.5rem;
  background: white;
  border: 2px solid #000;
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);
}

実装例: index.vue

index.vueでの実装を参照してください:

パステルカラーの4色カード
太い境界線（3px）
ネオシャドウ
ホバー時の浮き上がり効果（-4px + シャドウ拡大）
クリック時の沈み込み効果
セクション区切りの罫線（上部のみ）

適用時のチェックリスト

カラーパレットの4色を使用している
境界線は3pxの太さ
ネオシャドウ（4px 4px 0px 0px）を適用
ホバー時に要素が浮き上がる（translateY）
クリック時に要素が沈み込む（translate）
セクションの罫線は上部のみで重複していない
クリック可能な要素のみカードデザイン
フォントウェイトは700-800で統一

参考

元デザイン: wejoy-creative-agency (content/2025-11-28/wejoy-creative-agency/)
実装ファイル: apps/web/app/pages/index.vue