前回は技術スタックの話をしましたが、今回はデザインについてです。

このサイト「hello,idea」の見た目は、**「アイデアを書き留めるノート」**をイメージしています。 画像素材をペタペタ貼るのではなく、可能な限り CSS (コード) だけでアナログ感を表現することにこだわりました。

ノートの罫線と「色の正体」

記事の背景にある「罫線」は、画像ではなくCSSの linear-gradient で描いています。

1
.paper-pattern {
2
  background-color: #fffef8; /* 紙の地色 */
3
  background-image:
4
    linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
5
  background-size: 100% 32px;
6
}

ポイントは、線の色に**「透明度のある黒」**を使っていることです。 もしここで「薄いグレー (#e0e0e0)」などの不透明な色を指定してしまうと、背景色を変えた時に線だけが浮いてしまいます。

透明度を活用することで、紙の色がクリーム色でも、ダークモードの紺色でも、自然と馴染む罫線になります。

あえての「不完全さ」

デジタルデザインは「整列」が得意ですが、アナログ感を出したいなら**「ズレ」**が必要です。 このサイトでは、マステやタグ,紙の配置にあえて角度をつけています。

Vol.1で書いた「100点を目指さない」というマインドセットとも通じる部分ですが、完璧な直線や左右対称をあえて崩すことで、温かみのあるデザインを目指しました。

紙の重なり（奥行き）の表現

記事エリアの「紙が数枚重なっているような表現」も、CSSだけで実装しています。 box-shadow だけでなく、擬似要素 (::before, ::after) を使って実際に要素を重ねることで、リアルな奥行きを出しています。

1
/* 紙の重なりの実装イメージ */
2
.paper-stack {
3
  position: relative;
4
  /* 本体の紙 */
5
  background: #fff;
6
  z-index: 2;
7
}
8

9
/* 下に敷く紙（1枚目） */
10
.paper-stack::before {
11
  content: "";
12
  position: absolute;
13
  top: 2px;
14
  left: 2px;
15
  width: 100%;
16
  height: 100%;
17
  background: #fdfdfd;
18
  transform: rotate(-1deg); /* 少し傾ける */
19
  z-index: 0;
20
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
21
}
22

23
/* 下に敷く紙（2枚目） */
24
.paper-stack::after {
25
  content: "";
26
  position: absolute;
27
  /* ...位置調整... */
28
  transform: rotate(1.5deg); /* 逆方向に傾ける */
29
  z-index: 1;
30
}

このように、少しずつ角度と位置をずらした矩形を背面に配置することで、乱雑に積まれた紙の束を表現しています。

ダークモードとの格闘

アナログ（紙）の質感を追求すると、一番困るのがダークモードです。 「白い紙」をそのまま反転して「黒い紙」にすると、ただの無機質な黒い箱になってしまいがちだからです。

そこで、以下のルールを設けました。

1. 完全な黒 (#000) は使わない: 濃い紺色 (#09172a) をベースにして、インクのような深みを出す。
2. 影をあきらめない: 暗い背景でも、さらに暗い影 (box-shadow) を落として「浮いている感」を維持する。
3. マステやハイライトは透過: 白や蛍光色をそのまま置くのではなく、透過度 (opacity) を下げて背景色とブレンドさせる。

次回は最終回。AstroのContent Collectionsや、Draft機能の実装など、システム面のTipsを紹介します。