個人的備忘録：UIにやさしさを添える！bijyoモードのカラーコード一覧を整理してみた

はじめに

本記事では、bijyoモード（スクールで作成中のアプリ）の実装における使用カラーコードとその役割について、実際のコードとともに整理します。

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

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環で忘れないように記事にまとめています。特にUI調整を行う際に、カラーコードの管理や統一が重要と感じたためです。

こんな感じです

内容

現在のbijyoモードでは、やさしく上品な印象を与えるピンク系を基調にした配色を採用しています。

以下は、bijyoモードの主要なUI構成とその該当部分の実装コードです。

入力欄・ボタン部分

<div className="bg-[#fff0f5] border-[4px] border-[#d48fb1] rounded-xl shadow-md p-6 w-full max-w-xl">
  <h2 className="text-2xl font-bold mb-4">今日のつぶやき</h2>
  <textarea
    className="w-full h-32 border border-gray-300 rounded-md p-3 bg-[#fff7fa]"
    value={diaryMessage}
    onChange={(e) => setDiaryMessage(e.target.value)}
  ></textarea>
  <div className="flex justify-end mt-4">
    <button
      className="bg-pink-200 border-2 border-pink-500 shadow-md px-6 py-2 rounded-md font-bold"
      onClick={handleEnergy}
    >
      応援してもらう
    </button>
  </div>
</div>

応援表示欄

<div className="bg-[#fff0f5] border-[4px] border-[#d48fb1] rounded-xl shadow-md p-6 w-full max-w-xl">
  <h2 className="text-2xl font-bold mb-4">美女からのやさしいエール</h2>
  <div className="w-full h-32 border border-gray-300 rounded-md p-3 bg-[#fff7fa] whitespace-pre-wrap overflow-y-auto">
    {cheerMessage || "ここに美女からの応援が表示されます"}
  </div>
</div>

使用カラーコード一覧

用途	Tailwindクラス名	カラーコード	色の説明
全体背景（フォーム枠など）	bg-[#fff0f5]	#FFF0F5	ラベンダーブラッシュ（淡いピンク）
枠線色（フォームの外枠など）	border-[#d48fb1]	#D48FB1	明るいピンク系
入力欄の背景	bg-[#fff7fa]	#FFF7FA	ごく薄いピンク
ボタン背景色	bg-pink-200（Tailwind定義）	#FBCFE8	優しいピンク
ボタン枠線色	border-pink-500	#EC4899	鮮やかなピンク
通常のグレー枠線	border-gray-300	#D1D5DB	標準的なグレーボーダー

まとめ

ピンク系の配色は感情的に穏やかで優しい印象を与えるため、応援メッセージを表示するbijyoモードとの相性が良いです。

今後もコンポーネント単位で背景色・枠線色などを分けて管理していくことで、スタイルの拡張や切り替えにも柔軟に対応していきます...！