はじめに
個人サイトを作るとき、最近少し難しいなと思うことがあります。
綺麗に整えれば整えるほど、逆にその人らしさが薄く見えてしまうことがあります。
特に、アーティストやクリエイターの個人サイトでは、完成度が高いことだけが正解ではないと思っています。
もちろん、見づらいよりは見やすい方がいいです。
ただ、
- どこかで見たようなヒーローセクション
- 抽象的すぎるキャッチコピー
- 均等すぎるカードレイアウト
- 過剰に整った余白
- それっぽいグラデーション
- 汎用的なアイコン
- 内容より見た目が先に来る構成
になってしまうと、個人サイトなのにテンプレートのように見えてしまいます。
今回は、個人サイトを作るときに、AIテンプレートっぽく見えないように意識したことを書きます。
先に言っておきたいこと
この記事は、AIで作ったサイトが悪いという話ではありません。
また、テンプレートを使うこと自体が悪いという話でもありません。
むしろ、最初に形を作るためにはテンプレートもAIもかなり便利です。
ただ、個人サイトの場合、最終的に大事なのは「綺麗に見えること」だけではなく、「その人の活動や空気が伝わること」だと思っています。
そのために、見た目を整えるだけではなく、少し個人の文脈を残すことを意識しました。
1. キャッチコピーを抽象的にしすぎない
個人サイトの最初に置く言葉はかなり大事です。
よくあるのは、こういうタイプのコピーです。
Creating new experiences through sound and technology.
悪くはありません。
でも、少し広すぎます。
誰にでも当てはまりそうな言葉になってしまうと、綺麗ではあるけれど、その人のサイトである理由が弱くなります。
個人サイトでは、少し具体的なくらいの方がよいと思っています。
たとえば、音楽活動用のサイトなら、
高BPM、電子音、余白、壊れたまま残る音。
のように、自分が実際に作っているものに寄せた方が、その人らしさが出ます。
2. 汎用的な言葉を減らす
サイトの文章で、以下のような言葉を使いすぎると、テンプレートっぽく見えやすいです。
革新的
次世代
クリエイティブ
唯一無二
世界観
体験を届ける
可能性を広げる
もちろん、使ってはいけないわけではありません。
ただ、これらの言葉は便利すぎるぶん、誰にでも使えてしまいます。
個人サイトでは、少し不器用でも、自分の活動に近い言葉を使った方が印象に残ります。
作品、記録、リンク。
外部サービスに散らばった音を、ここから辿れるようにする。
このくらい具体的な方が、サイトの役割も伝わりやすいです。
3. 全部を綺麗に揃えすぎない
UIとしては、揃っている方が見やすいです。
ただ、個人サイトでは、揃いすぎていることでテンプレート感が出ることもあります。
たとえば、
- すべてのカードが同じ高さ
- すべてのセクションが同じ余白
- すべてのテキストが同じトーン
- すべてのボタンが同じ強さ
になると、綺麗ではありますが、少し均質に見えます。
そこで、以下のような差を少し残しました。
- 重要な作品だけ少し文章量を増やす
- セクションごとに余白の密度を変える
- 強調するリンクと控えめなリンクを分ける
- すべてをカード化しない
全部を均等にするよりも、情報の重みが見えるようにした方が、個人サイトらしくなります。
4. アニメーションを入れすぎない
Webサイトを作っていると、アニメーションを入れたくなります。
- fade in
- hover animation
- parallax
- smooth scroll
- cursor effect
- background animation
こういう要素は、うまく使うと気持ちいいです。
ただ、入れすぎると「それっぽいWebサイト」になりやすいです。
特に、個人サイトでアニメーションが目立ちすぎると、肝心の作品や文章よりも演出の方が前に出てしまいます。
なので、アニメーションはかなり控えめにしました。
.card {
transition:
transform 160ms ease,
border-color 160ms ease;
}
.card:hover {
transform: translateY(-2px);
}
このくらいの小さな動きでも、触れる感覚は出ます。
派手に動かすより、読む邪魔をしないことを優先しました。
5. 色を使いすぎない
色が多いと、見た目は賑やかになります。
ただ、個人サイトでは、色を増やしすぎると情報の優先順位が分かりづらくなることがあります。
今回は、基本の色数を絞り、アクセントとして少しだけ色を使うようにしました。
:root {
--color-bg: #f7f5ef;
--color-text: #151515;
--color-muted: #6f6a61;
--color-border: rgba(0, 0, 0, 0.12);
--color-accent: #d04a3a;
}
ベースは落ち着いた色にして、リンクや小さな強調だけにアクセントを使います。
色をたくさん使わないことで、作品名や文章が読みやすくなります。
6. 余白を「整える」より「呼吸」にする
余白は大事です。
ただ、余白をすべて同じルールで整えすぎると、少し機械的に見えることがあります。
個人サイトでは、セクションごとに情報の密度が違います。
たとえば、
- Aboutは短く読ませたい
- Worksは少し滞在してほしい
- Timelineは流れとして見せたい
- Footerは静かに終わりたい
それぞれ役割が違うので、余白も完全に均一にしなくてよいと思っています。
.section {
padding: 72px 0;
}
.section--quiet {
padding: 56px 0;
}
.section--works {
padding: 88px 0;
}
細かい差ですが、こういう差でページの呼吸が変わります。
7. 実在する情報を中心に置く
テンプレートっぽく見える原因のひとつは、実在する情報が少ないことです。
たとえば、
About
Works
Contact
だけだと、構成としては分かりやすいですが、少し汎用的です。
そこに、
- 実際の作品名
- 実際の活動履歴
- 実際のリンク
- 今置いておきたい曲
- 今の活動に近い言葉
を入れると、サイトがその人のものになります。
個人サイトでは、デザインそのものよりも、実在する情報の方が強いです。
8. 完璧な英語に寄せすぎない
個人サイトを作ると、英語を使いたくなることがあります。
もちろん、英語が合う場合もあります。
ただ、全部を綺麗な英語に寄せると、少しテンプレートっぽくなることがあります。
特に日本語で活動している場合は、日本語のまま置いた方が自然な部分もあります。
曲、記録、リンク。
7g3の置き場所。
短い日本語の方が、自分の温度に近いことがあります。
英語を使うかどうかよりも、自分の活動に対して自然かどうかを優先しました。
9. 装飾よりも編集を大事にする
個人サイトでは、装飾を足すよりも、情報を編集することの方が大事だと感じました。
たとえば、
- どの作品を載せるか
- どのリンクを目立たせるか
- どの活動履歴を残すか
- どの説明文を削るか
- 何をあえて書かないか
こういう判断です。
全部を載せると、サイトは情報置き場としては便利ですが、読みにくくなります。
逆に、少し削ることで、その人が今何を大事にしているのかが見えやすくなります。
10. 技術を前に出しすぎない
ReactやTypeScriptで作っていても、個人サイトの主役は技術ではありません。
特にアーティストサイトでは、技術的にすごいことよりも、作品や活動がちゃんと見えることの方が大事です。
そのため、実装側ではコンポーネント化やデータ管理をしていても、見た目としてはできるだけ静かにしました。
内部: React + TypeScriptで管理しやすくする
外側: 作品と文章が自然に見えるようにする
この分け方を意識しました。
実装で意識したこと
CSSでは、派手な装飾よりも、読みやすさと余白を優先しました。
body {
background: var(--color-bg);
color: var(--color-text);
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
sans-serif;
line-height: 1.75;
}
a {
color: inherit;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
リンクも、ボタン化しすぎず、テキストとして読めるようにしました。
作品カードも、装飾を増やしすぎないようにします。
.work-card {
border: 1px solid var(--color-border);
border-radius: 18px;
padding: 20px;
background: rgba(255, 255, 255, 0.48);
}
半透明や角丸は使っていますが、強すぎないようにしています。
AIっぽく見えないために一番大事だったこと
一番大事なのは、見た目のテクニックよりも、言葉と情報だと思いました。
いくらデザインを調整しても、文章が汎用的だとテンプレートっぽく見えます。
逆に、デザインがシンプルでも、言葉がその人の活動に近ければ、ちゃんと個人サイトに見えます。
何を作っているのか
何を残したいのか
どこにリンクしたいのか
今どの活動を見せたいのか
このあたりが具体的であるほど、その人のサイトになります。
まとめ
個人サイトをAIテンプレートっぽく見せないために、以下を意識しました。
- 抽象的なキャッチコピーにしすぎない
- 汎用的な言葉を減らす
- 全部を綺麗に揃えすぎない
- アニメーションを入れすぎない
- 色を使いすぎない
- 余白に少し差をつける
- 実在する情報を中心に置く
- 完璧な英語に寄せすぎない
- 装飾より編集を大事にする
- 技術を前に出しすぎない
綺麗なサイトを作ることは大事です。
ただ、個人サイトでは、綺麗さだけではなく、その人の活動や温度が見えることも大事だと思います。
整えすぎて誰のものでもないサイトになるより、少し余白や偏りが残っていても、その人のものだと分かるサイトの方が好きです。