はじめに

本記事では、HTMLとCSSのみで実装された"和室風ユーザー登録フォーム"について解説します。

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

和室の象徴的な要素である畳、襖（ふすま）、掛け軸をモチーフにしたデザインを取り入れ、和の雰囲気を表現しています。

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発にて、Webアプリケーションに和風のデザインが求められたため、自作で和室をイメージしたUIコンポーネントを作成しました。

実際のコード

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>和室風フォーム</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: repeating-linear-gradient(
        45deg,
        #d6e3c4,
        #d6e3c4 4px,
        #b0c59a 4px,
        #b0c59a 8px
      );
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    /* 掛け軸風タイトル（横書き） */
    .kakejiku {
      background-color: #fefae0;
      border: 4px solid #6b4c3b;
      padding: 12px 24px;
      margin-bottom: 30px;
      font-size: 24px;
      color: #3c2f2f;
      text-align: center;
      box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
      border-radius: 6px;
    }

    /* 襖風フォーム */
    .fusuma-form {
      background-color: #f7f0dc;
      border: 4px solid #8b7355;
      width: 320px;
      padding: 24px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .fusuma-form label {
      font-weight: bold;
      color: #4b3f2f;
    }

    .fusuma-form input,
    .fusuma-form textarea {
      padding: 8px;
      border: 2px solid #aaa08c;
      border-radius: 4px;
      font-size: 14px;
    }

    /* 畳ボタン（模様なし＋ホバーあり） */
    .tatami-button {
      background-color: #c8d5b9;
      color: #2d2d2d;
      padding: 10px 20px;
      border: 2px solid #4b6043;
      border-radius: 4px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      font-weight: bold;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .tatami-button:hover {
      background-color: #a3b18a;
      color: #000;
    }
  </style>
</head>
<body>

  <div class="kakejiku">一般ユーザー登録</div>

  <form class="fusuma-form">
    <label for="name">お名前</label>
    <input type="text" id="name" name="name" placeholder="山田 太郎">

    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email" placeholder="example@example.com">

    <label for="message">ご用件</label>
    <textarea id="message" name="message" rows="4" placeholder="ご自由にご記入ください"></textarea>

    <button type="submit" class="tatami-button">送信</button>
  </form>

</body>
</html>

実際のデザイン

デザインの概要について

このHTMLファイルは、和室（畳・襖・掛け軸）をイメージしたユーザー登録フォームのデザインを1枚で実装しているものです。以下にパーツごとに「何をしているか」を解説します。

全体の目的

"和室"の雰囲気を演出したWebフォームを作る。畳の床・掛け軸風のタイトル・襖風のフォーム・和風の送信ボタンで構成。

`<head>` 内の設定

<!DOCTYPE html>：HTML5形式であることを宣言
<html lang="ja">：言語を日本語に指定
<meta charset="UTF-8">：文字コードをUTF-8に設定し、日本語が正しく表示されるようにする
<title>：ブラウザタブのタイトルに "和室風フォーム" を表示

`<style>` セクション（CSS）

`body`（畳の背景）

repeating-linear-gradient を使って畳の織り目を再現
flexレイアウトで画面中央にコンテンツを配置

`.kakejiku`（掛け軸風タイトル）

和紙のような背景色（#fefae0）
木枠を思わせる茶色のボーダー
影と角丸で立体感を演出
テキストは横書き中央揃え

`.fusuma-form`（襖風フォーム）

襖紙のような明るいベージュの背景
濃い茶色の縁取り
内部は縦方向に並ぶ入力欄
影付きで浮かせたような見た目

`.fusuma-form label, input, textarea`

ラベルは太字＆茶色系で和の雰囲気
入力欄とテキストエリアは読みやすいように余白と枠を整える

`.tatami-button`（畳風ボタン）

畳をイメージした緑色ベースの背景
濃い緑色の縁取り
内側に影を加えて押し感を演出
マウスオーバー時は背景が濃くなって反応が見える

`<body>` 内の表示内容

タイトル

<div class="kakejiku">一般ユーザー登録</div>

掛け軸のようなデザインの横書きタイトル

フォーム本体

<form class="fusuma-form">
  <label>...</label>
  <input>...
  <textarea>...</textarea>
  <button>送信</button>
</form>

名前・メールアドレス・自由記述欄の3つの入力項目
ボタンは和風カラーで視覚的に調和

まとめ

このコードは、日本の伝統的な和室（畳＋襖＋掛け軸）をイメージし、視覚的に落ち着いた・和風らしいUIをHTMLとCSSだけで再現したものですが、引き続き頑張っていきます...!