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

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

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

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

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

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

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

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

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

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

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

デザインコンセプト

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

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

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

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

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

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

ノート・付箋要素の紹介

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

🎨 4色の付箋風カード

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

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

📌 マスキングテープ装飾

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

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

例えば：

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

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

📓 ドット方眼の背景

記事本文の背景には、まるでグラフ用紙やデザインノートのようなドット方眼が引かれています。

これは24px間隔のドットで構成されていて、ちょうどいい目安になりつつも、主張しすぎない控えめなデザインです。まるで方眼ノートでアイデアをスケッチしているような雰囲気を演出しています。

1
/* イメージ（実際の実装はより複雑です） */
2
--grid-size: 24px;
3
--dot-color: rgba(0, 0, 0, 0.1);
4

5
background-image: radial-gradient(
6
  var(--dot-color) 1px,
7
  transparent 1px
8
);
9
background-size: var(--grid-size) var(--grid-size);

技術的には radial-gradient を使って、グリッドパターンを繰り返し表示しています。

📍 その他のノート要素

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

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

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

こだわりポイント

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

規則的な配色とバリエーション

付箋の色は表示順序で規則的に割り当てられますが、マスキングテープの角度や、手書き風アンダーラインには「バリエーション」を持たせています。

手書き風アンダーラインは、記事のスラッグ（URL）から計算して3パターンから選ばれるので、同じ記事は常に同じパターンになります。また、マスキングテープも微妙に角度が異なる3パターンがあり、記事カードごとに適用されています。

この「決定的なバリエーション」が、見た目に変化を持たせながら、SSR/CSRの両方で一貫した表示を保証しています。

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

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

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

重なりと奥行きの表現

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

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

おわりに

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

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

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

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