「これ、なんかダサくない？」デザインの「引き算」で、サイトをシンプルにした話

横線が野暮ったく感じた

サイトを見回してたら、あちこちにある横線（Divider コンポーネント）が目についてしまった。「これ、なんか野暮ったくない？」って思っちゃったんですよね。

セクションを区切るために横線を入れるのは一般的なデザインパターンなんだけど、最近のモダンなデザインを見てると、横線って古臭く見えちゃうんだよね。なんかダサく感じてきてしまったんだ！

というわけで、全部の横線を消すことにしました。

どこから消した？

横線は以下の場所にあった：

• トップページの各リンクカードの間
• プロフィールページの各セクションの間
• プロジェクトページの各プロジェクトの間
• ページのフッターの前

これらを全部削除した。Divider コンポーネントを使ってる箇所を探して、全部で 17箇所 から横線を一つずつ消していきました。

フォントサイズとスタイルを統一

横線を消しただけじゃ物足りないなと思って、ついでにフォントサイズやスタイルも統一することにしました。

なお、以下で紹介するスタイル指定は、すべて Tailwind CSS を使っています。

タイトルのスタイルを統一

以前は、コンポーネントごとにタイトルのスタイルがバラバラだった：

• ContentCard のタイトル: text-xl font-medium
• ブログ記事の h1: アイコン付きの特別なスタイル
• ブログ記事の h2: text-lg font-medium

これらを統一して、text-2xl font-light tracking-tight にした。font-light を使うことで、より洗練された印象になった。

ブログ記事の見出しも整理

ブログ記事の見出しも整理した：

• h1: text-2xl font-light tracking-tight （アイコンは削除）
• h2: text-xl font-light tracking-tight
• h3: text-lg font-light tracking-tight

これで、ブログ記事全体の見出しが統一されて、読みやすくなりました。

要素間のスペーシングを調整

横線を消したことで、要素間のスペーシングが重要になりました。各セクションの間隔を調整して、統一感を持たせました。

PageSection に統一のスペーシング

PageSection コンポーネントに my-6 クラスを追加して、各セクションの上下に統一されたスペースを確保しました。

コンポーネントごとの微調整

• ContentCard のタイトル下のマージンを mb-2 から mb-4 に変更
• LinkCard に mt-2 を追加
• ProjectList の各プロジェクトを my-6 で囲む
• SupportBox の上マージンを mt-10 から mt-6 に変更

これで、横線がなくても、各要素が適切な間隔で配置されるようになった。

デザインの「引き算」って大事

デザインって、時には「引き算」が大事なんだよね。何かを追加するのではなく、不要なものを削ることで、逆に良くなることって結構ある。

今回の横線もそう。「セクションを区切るために横線を入れる」ってのも一つのデザインパターンなんだけど、それが逆に古臭い原因になってた。my-6 のような余白で区切ったり、背景色で区切ったりするほうがモダンに見える。

フォントサイズやスタイルを統一したのも、同じ考え方。バラバラだったスタイルを統一することで、全体の統一感が生まれて、結果的にシンプルで見やすくなった。

「もっと何か追加しよう」って考える前に、「これ、本当に必要？」って自分に問いかけることが大事なのかもしれない。

ブログ記事のカバー画像も改善

サイト全体のデザインを管理する PageLayout コンポーネントというのを作っていまして、そこで意図的に mx-4 を設定して画面全体の左右に隙間を入れています。このため必然的に画像の左右にも余白ができてしまっていたんですよね。

画像を <div class="-mx-4 overflow-hidden"> で囲むことで、PageLayout の mx-4 を打ち消して、画像を横幅いっぱいまで表示するようにしました。これで、画像がより目立つようになって、記事の見た目も良くなりました。これはちょっと意味合いが違うけど「引き算」してるね！

正解がわからない…

ただ、CSS にしろ Tailwind にしろ、どう書くのが正解なのかが自分でもよくわかっていない部分がある気がするんです。

だから、「そんな書き方じゃだめだよー素人丸出しですやんｗ」ってのがあったらぜひ教えてほしい！本当に知りたい！

みなさんはどうしてる？

デザインをシンプルにするために、何かを削った経験ってありますか？例えば、ボーダーを削除した、アイコンを減らした、装飾的な要素を取り除いた、など。それとも、逆に「これがないと分かりにくい」って感じる要素ってありますか？

もし同じような悩みを持ってる人がいたら、どうしてるか教えてほしいな。一緒に考えましょう！