作品リストがインターフェース

装飾ゼロの一行リスト（年・題・種別）。ホバーやフォーカスで右にサムネイル（グラデーション）が浮かび、行の位置に追従します。狭幅では右下に小さく出ます。

ENGLISH

Work Index List

約82行画面のかたち / 実用サンプル: LP・マーケページの一覧 →

プレビュー

ホバー

操作カーソルを乗せると動きます（スマホはタップ）。

仕様書

向く場面: デザインスタジオ・作家のポートフォリオ
内容そのものを構造にしたいトップ
作品数が 10〜50 件の一覧
避ける場面: 紹介文や導線が要る営業目的のサイト
作品に年・題・種別以外の比較軸が要るとき
構成要素: ヘッダー（名前／年代）
作品リスト
行（年／題／種別）
浮かぶサムネイル
キャプション
持っている状態: 通常
ホバー
フォーカス
キーボード: Tab で行（リンク）を順に移動し、フォーカスでもホバーと同じサムネイルが出る。Enter で遷移
支援技術: サムネイルは aria-hidden で題を重複させない。年→題→種別の順に読まれる。focus-visible で墨の枠線。reduced-motion で追従アニメを無効化
動き: サムネが 200ms でフェード＋6px 上昇し、行の位置へ 250ms で追従。行は 8px 右へずれる

デザインの要点

リストがそのまま作品への入口。ヒーローも紹介文も置かず、内容そのものを構造にする
行は年・題・種別の3列だけ。列を増やすほど「一覧」でなく「表」になり、読む速度が落ちる
サムネイルはホバーで浮かべ、地の白を保つ。色は作品側に任せ、UI は墨の細線だけ
フォーカスでも同じサムネイルを出す。キーボードで辿る人にも同じ体験を渡す

プロのサイトでの実例

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

実装メモ

サムネイルは実画像に差し替え、行ごとの data 属性で画像 URL を持たせる。狭幅の fixed 配置は実ページではリスト直下のインライン表示に変えてもよい。

コード（コピーして使えます）

<div class="wli">
  <header class="wli-head"><span class="wli-name">ミナト工房</span><span class="wli-range">Works 2018 – 2026</span></header>
  <ul class="wli-list">
    <li><a class="wli-row" href="#" data-hue="18"><span class="wli-year">2026</span><span class="wli-title">港区立図書館 サイン計画</span><span class="wli-type">Signage</span></a></li>
    <li><a class="wli-row" href="#" data-hue="205"><span class="wli-year">2026</span><span class="wli-title">Aoi Analytics ブランドアイデンティティ</span><span class="wli-type">Identity</span></a></li>
    <li><a class="wli-row" href="#" data-hue="140"><span class="wli-year">2025</span><span class="wli-title">つむぎ茶園 パッケージ</span><span class="wli-type">Package</span></a></li>
    <li><a class="wli-row" href="#" data-hue="300"><span class="wli-year">2025</span><span class="wli-title">音の展示「余白」 会場構成</span><span class="wli-type">Exhibition</span></a></li>
    <li><a class="wli-row" href="#" data-hue="45"><span class="wli-year">2024</span><span class="wli-title">Kestrel ウェブサイト</span><span class="wli-type">Web</span></a></li>
    <li><a class="wli-row" href="#" data-hue="260"><span class="wli-year">2023</span><span class="wli-title">湊町の地図 2023</span><span class="wli-type">Editorial</span></a></li>
    <li><a class="wli-row" href="#" data-hue="0"><span class="wli-year">2022</span><span class="wli-title">SORA 家具カタログ</span><span class="wli-type">Editorial</span></a></li>
    <li><a class="wli-row" href="#" data-hue="180"><span class="wli-year">2021</span><span class="wli-title">みなと銀行 アプリ UI</span><span class="wli-type">App</span></a></li>
    <li><a class="wli-row" href="#" data-hue="90"><span class="wli-year">2019</span><span class="wli-title">north&amp;co. 店舗サイン</span><span class="wli-type">Signage</span></a></li>
    <li><a class="wli-row" href="#" data-hue="330"><span class="wli-year">2018</span><span class="wli-title">工房ロゴ・名刺</span><span class="wli-type">Identity</span></a></li>
  </ul>
  <div class="wli-thumb" aria-hidden="true"><div class="wli-thumb-art"></div><span class="wli-thumb-cap"></span></div>
</div>