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

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

ENGLISH

Work Index List

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

プレビュー

ホバー

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

デザインの要点

リストがそのまま作品への入口。ヒーローも紹介文も置かず、内容そのものを構造にする
行は年・題・種別の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>