hello,idea | カフェでアイデア帳を広げるような、温かみのあるデジタル空間

このブログを開いたとき、「なんかノートっぽいな」と思った方もいるかもしれません。

記事カードは付箋風、背景にはノートの罫線、そしてマスキングテープの装飾。実はこれ、すべて意図的にデザインしたものです。

今回は、なぜこのブログがノート・付箋モチーフなのか、そしてどんなこだわりを込めたのかをお話しします。

なぜノート・付箋モチーフにしたのか

カフェでノートを広げて、アイデアを整理する。

あの体験が好きなんです。付箋を貼ったり、マーカーで線を引いたり、思いついたことを書き留めたり。周りの静かな雑音が心地よくて、集中できる。

でも、最近はほとんどの作業がデジタルで完結してしまいます。便利だけど、どこか味気ない。

そんなとき思ったんです。「カフェでアイデア帳を広げるような、あの没入感をデジタルで再現できないだろうか？」

デジタルは検索できるし、バックアップも取れる。でも、どこか無機質で冷たい印象があります。一方、カフェでノートを広げると、温かみがあって、アイデアが自然に湧いてくる。

このブログは、その2つの良いとこ取りを目指しました。

デザインコンセプト

このサイトのデザインコンセプトは、**「アイデアを練る、私の机」**です。

まるでカフェでノートを広げて、アイデアを整理しているような、そんな没入感のある空間を目指しました。

カフェでアイデア帳を広げる体験

カフェの机にノートを広げて、アイデアを整理する。そんな瞬間が好きです。

色違いの付箋で情報を分類する
マスキングテープでページに目印をつける
マーカーで大事なところに線を引く

そんな「アイデアを育てる場所」としての体験を、デジタルで再現したかったんです。

ノート・付箋要素の紹介

それでは、実際にどんなノート・付箋要素を取り入れたのか紹介します。

🎨 4色の付箋風カード

ブログ一覧を見ると、記事カードが黄色、青、ピンク、緑の4色でランダムに表示されるのが分かると思います。

これは、実際の付箋を使うときの感覚を再現したものです。色でなんとなく記事を区別できる、あの感じ。

POINT: ランダムだけど決定的

実は、この色の割り当ては完全にランダムではありません。記事のスラッグ（URL）から計算して決定的に色を決めているので、ページを更新しても同じ記事は同じ色のままです。

これにより、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）で色が変わってしまう問題を回避しています。

📌 マスキングテープ装飾

よく見ると、記事カードの上部にマスキングテープのような装飾があります。

これも付箋の色に合わせて変わるようになっていて、色のかぶりを避けてコントラストを保つように調整しています。

例えば：

黄色の付箋には青のマステ
青の付箋にはオレンジのマステ

こういう細かいところにもこだわりました。

📓 ノート罫線の背景

記事本文の背景には、ノートの罫線が引かれています。

これは32px間隔の薄いグレーの線と、左側の赤いマージン線で構成されていて、まるで大学ノートに書いているような雰囲気を演出しています。

1
/* イメージ（実際のコードは違います） */
2
background: repeating-linear-gradient(
3
  transparent,
4
  transparent 31px,
5
  var(--line-color) 31px,
6
  var(--line-color) 32px
7
);

技術的には repeating-linear-gradient を使って実装しています。

📍 その他のノート要素

他にも、細かいところにノート・手帳の要素を散りばめています：

画鋲・クリップ: 見出しや引用の装飾に
鉛筆・ペン: ページの隅に配置
手書き風アンダーライン: タイトルの下に3パターン

これらの要素が、デジタルながらも「カフェでノートを広げている」ような温かみを演出しています。

こだわりポイント

デザインを実装する上で、特にこだわったポイントをいくつか紹介します。

ランダム性の演出

マスキングテープの角度や、装飾の配置には「ランダム性」を持たせています。

でも、先ほども触れたように、これは見た目だけのランダムです。実際には記事のスラッグから計算しているので、同じ記事は常に同じ見た目になります。

この「決定的なランダム性」が、SSR/CSRの両方で一貫した表示を保証しています。

手書き風のアンダーライン

記事カードのタイトルの下には、ペンで引いたようなアンダーラインがあります。

これも3パターンあって、記事ごとに変わります。完全に真っ直ぐではなく、少し揺らぎがあるのがポイントです。

重なりと奥行きの表現

付箋やマスキングテープは、ただ貼られているだけではなく、微妙に影や重なりを持たせることで、立体感を出しています。

実際の机の上のように、「紙が重なっている」感じを大切にしました。

おわりに

このブログは、デジタルの利便性を保ちながら、カフェでアイデア帳を広げるような没入感のある体験を提供する試みです。

コードを書くのも楽しいですが、こうやってデザインにこだわるのもまた楽しいものです。

次回は、「ダークモードでもアイデア帳の温かみを保つ工夫」について書こうと思います。ライトモードとダークモードの両方で、どうやってノート・付箋の雰囲気を維持したのか、技術的な工夫をお話しします。

それでは、また次の記事で 📝