個人的備忘録：CSSだけで和室の雰囲気を再現できたので、Next.js × 和風デザインの設計をメモとして整理

はじめに

この記事では、Next.js のユーザー登録ページで共通CSSファイル（common.css）をどのように読み込み、どのような形で活用しているかを簡単に解説します。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環で和風デザインを取り入れた際、そのスタイル適用箇所を明確に把握し、後から再利用や修正がしやすいように備忘録としてまとめています。

内容

対象のコードでは、以下のように common.css を読み込んでいます：

import "../../styles/common.css"; // 共通CSSを読み込み

実際のコード

このCSSファイルには和室風のデザインを構成するスタイルが定義されており、以下のような形で使われています：

1. washitsu（bodyに適用）

useEffect(() => {
  document.body.classList.add("washitsu");
  return () => {
    document.body.classList.remove("washitsu");
  };
}, []);

• 畳風の背景や全体の和室スタイルを適用。

1. kakejiku（タイトル）

<h1 className="kakejiku">一般ユーザー登録</h1>

• 掛け軸風デザインを適用。

1. fusuma-form（フォーム）

<form className="fusuma-form">
  ...
</form>

• 襖風の背景・枠デザインを適用。

1. form-button-group / button-back / button-submit（ボタン関連）

<div className="form-button-group">
  <Link href="/" className="button-back">戻る</Link>
  <button type="submit" className="button-submit">登録</button>
</div>

• ボタンの配置、和紙風や畳風のスタイル、ホバー効果などを細かく制御。

これにより、全体として和の雰囲気がある柔らかなデザインの登録画面が完成します。

まとめ

• common.css を読み込むことで、複数のコンポーネントに統一された和風スタイルを適用可能。
• 特定のクラス（例：washitsu, kakejiku, fusuma-form など）が意図通りに動作しているかを把握しておくことで、保守や拡張が容易になります。
• チーム開発においても、どのCSSがどこに使われているかを可視化することは重要です。