個人サイトのページ構成とUI設計｜TOP・記事・ツール・スマホ対応
個人サイトのTOPページ、記事一覧、記事詳細、ツールページをどう設計するか、2列レイアウトやカードUI、スマホ対応も含めて解説します。
個人サイトのページ構成とUI設計｜TOP・記事・ツール・スマホ対応
個人サイト制作シリーズ この記事は「Next.jsで個人ブログ兼Webツールサイトを1から作る」連載の一部です。
初めての人でも順番に進められるよう、前提知識をできるだけ省き、つまずきやすいポイントもあわせて整理しています。
サイトは、ページが表示されれば完成ではありません。「見やすいか」「迷わないか」「スマホで崩れないか」が大事です。
UIは料理でいう盛り付けです。味がよくても、皿から全部こぼれていたら少し困ります。
TOPページの役割
おすすめの構成です。
1. コンパクトなヒーローカード
2. おすすめツール
3. 新着記事
4. サイドバー
ヒーローは大きくしすぎないのがポイントです。最上部カードが大きすぎると、肝心の記事やツールが下に押し出されます。
おすすめツールを上に置く
ブログ兼Webツールサイトなら、TOPではおすすめツールを記事より上に置くのも有効です。
ヒーロー
おすすめツール
新着記事
ツールはサイト独自の価値になりやすいため、早めに見せると印象に残ります。
記事カードの設計
記事カードは、以下の構成が見やすいです。
カテゴリ / 日付
記事タイトル
アイキャッチ | 説明文・タグ
<Link className="group block rounded-[1.75rem] border border-white/10 bg-white/[0.04] p-5 md:p-6">
<div className="flex flex-wrap items-center gap-3 text-xs text-slate-400">
<span>{post.category}</span>
<span>{post.date}</span>
</div>
<h3 className="mt-4 text-2xl font-black text-white md:text-3xl">
{post.title}
</h3>
<div className="mt-5 grid gap-5 md:grid-cols-[240px_minmax(0,1fr)]">
<div className="aspect-[16/10] overflow-hidden rounded-[1.5rem]">
<img className="h-full w-full object-cover" />
</div>
<p className="line-clamp-4 text-sm leading-7 text-slate-400">
{post.excerpt}
</p>
</div>
</Link>
object-cover と object-contain
object-cover 枠にぴったり収まるが、端が見切れる
object-contain 全体は見えるが、余白が出る
一覧カードでは、object-cover がおすすめです。
<img className="h-full w-full object-cover" />
カードサイズにぴったり収まるので、一覧の見た目が整います。
2列レイアウトの基本
PCでは、メインとサイドバーの2列構成が便利です。
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_340px] lg:items-start">
<div className="min-w-0">メイン</div>
<aside className="grid gap-6 lg:sticky lg:top-28">サイドバー</aside>
</div>
min-w-0 は重要です。これがないと、長いタイトルや表がカラムを突き破ることがあります。
パンくずとサイドバーを揃える
パンくずをメインカラム内に入れると、サイドバーの上端がパンくずの上端に揃い、不自然になることがあります。
<Breadcrumbs />
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_340px]">
<article>本文</article>
<aside>サイドバー</aside>
</div>
これで、メインカードとサイドバーの上端が揃います。
数値入力フォーム
Webツールで数値入力を使う場合、スマホでは type="number" の操作性が端末によって違います。そこで、− / + ボタン付きUIが便利です。
デッキ枚数 [ − ][ 60 ][ + ]
対象カード枚数 [ − ][ 4 ][ + ]
初手枚数 [ − ][ 7 ][ + ]
<div className="grid grid-cols-[38px_minmax(76px,1fr)_38px]">
<button>−</button>
<input className="min-w-[76px] text-center tabular-nums" />
<button>+</button>
</div>
まとめ
・ヒーローは大きくしすぎない
・おすすめツールを目立たせる
・記事カードはタイトルを上に出す
・画像は用途に応じて object-cover / contain を選ぶ
・PCは2列、スマホは1列にする
・min-w-0を忘れない
・数値入力はスマホ操作を考える
次の記事では、お問い合わせ、プライバシーポリシー、免責事項など、サイトの信頼性を高めるページを整えます。