検索結果 · 検索結果ページ

図書館カード目録風の検索結果

図書館の目録カード（カードカタログ）を再構築した検索結果ページ。請求記号・ISBN・在庫スタンプ・蔵書印で「アーカイブの権威」と「網羅性」を演出する尖ったSERP設計。

PUBLISHED — 2026年4月28日 UPDATED — 2026年4月27日 CATEGORY — 検索結果 LICENSE — CC0 1.0

プレビュー

vibe.itlibra.com/preview/library-catalog-search/

概要

インターネット以前、調べものの起点は図書館のカード目録でした。木製の引き出しにびっしり詰まったインデックスカード——一枚ごとに請求記号、著者、出版年が几帳面に記されている。あの仕組みは、人類が情報を体系的に整理してきた知の蓄積そのものです。検索結果ページにこの様式を与えるのは、その「整理された知」の信頼感を借用する試みです。

冷たいSERPと、温度のある目録

現代の検索結果ページは効率的ですが、無機質です。タイトルとURLと抜粋が等間隔に並ぶだけで、そこに「集められたもの」という感覚はありません。図書館の目録カードは違う。請求記号、ISBN、在庫スタンプ、蔵書印——こうした細部のひとつひとつが、「これは誰かが選び、分類し、保管したコレクションだ」と語ります。検索が、機械的な照会から「アーカイブを探索する文化的な行為」へと格上げされるのです。

カードの厚みが網羅性を語る

物理的なカードの束には、デジタルの検索結果リストにはない説得力があります。それは「厚み」です。一枚一枚が独立した実体として積み重なっている様子は、「このコレクションには深さがある」という印象を視覚的に証明する。学術リポジトリ、出版社のバックカタログ、専門アーカイブのように、収蔵の網羅性そのものが価値になるサイトで、この様式は強く効きます。

仕上げの判断軸

検索クエリと一致した語は、結果スニペット内でハイライトすること——目録の実用性を演出として捨ててはいけません。在庫スタンプのような色付き要素はカード1枚に1つまでに抑え、紙面を騒がせないこと。結果0件のときの代替提案も、目録らしい落ち着いたトーンで用意します。様式は古典的でも、検索という機能の使いやすさは現代の水準を守るのが鉄則です。

使いどころ

大学・研究機関のリポジトリ
出版社のバックカタログ
図書館・博物館・公文書館のサイト内検索
古書店・専門書店の在庫検索
学術論文・古文書のアーカイブ

カテゴリ: 検索結果
スタイル: エディトリアル / モノクロ / レトロ / ハンドクラフト

背景と狙いどころ

Context

Category · 検索結果ページ

検索結果

検索クエリの結果一覧ページ。

カテゴリ一覧を見る →

Style · エディトリアル

エディトリアル

雑誌・新聞のような版面設計。

スタイル一覧を見る →

Style · モノクローム

モノクロ

単色または白黒で統一されたトーン。

スタイル一覧を見る →

AIへの指示文

アーカイブ・ナレッジベースの検索結果ページを、図書館の目録カードカタログとして作ってください。

要件:
- 配色: 古紙 #f3ead6 + 古色 #e8dcbe（カード）+ 墨 #1a1410 + 朱赤 #b8281c + 緑 #2c5a3a。
- 全画面に淡いドットノイズ（radial-gradient、4×4px）+ 朱・緑の薄いシミ（radial-gradient ぼかし）。
- 上部ヘッダー: 4px 二重線 + 1px 線で挟んだ帯。「図書館目録 · CATALOG」太明朝 + サブ「NIPPON CENTRAL LIBRARY · EST. 1948」モノスペース、letter-spacing 0.4em。
- 検索フォーム: 2px 黒ボーダー、左上にラベルを背景でくり抜き「FORM 04 — QUERY ENTRY」。中央に下線型大型入力欄（Special Elite フォント、22px）。右に「検索 →」スタンプ風ボタン（hover で白黒反転）。
- フィルタ行: チェックボックス（在庫あり/貸出中含む）+ select（分類・並び順）。letter-spacing は徹底的に広く。
- 結果メタ: 「34件ヒット — 0.42 秒」+「PAGE 1/4」、1.5px 黒線で下区切り。
- 検索結果カード5枚を縦積み:
  - 古色 #e8dcbe 背景 + 1.5px 黒ボーダー + 微妙な傾き（rotate -0.4 〜 +0.5deg、margin-left を交互に変えてバラけさせる）
  - 100px 幅の請求記号ボックス（赤ボーダー、CALL № 表記、太字）
  - メインタイトル（明朝22px、強調語は <em> + 黄色マーカー風 background-color）
  - 著者・ローマ字表記・出版年
  - 在庫スタンプ（緑「在庫 / AVAILABLE」or 赤「貸出中 / BORROWED」、rotate -4deg）
  - メタグリッド（出版社/ISBN/所在/蔵書年）4カラム
  - 朱赤の登録済スタンプ印（円形、rotate 8deg、明朝書体）
- hover で rotate(0deg) + translateX(4px) + shadow 強化。
- ページネーション: PREV / 1 2 3 4 ... / NEXT、現在ページは黒地白文字。
- フォント: Special Elite + Courier Prime（タイプライター系）+ Yu Mincho / Hiragino Mincho ProN（明朝、見出し）+ JetBrains Mono フォールバック。
- JS不要、フルレスポンシブ（メタグリッドは2カラムへ、card-headは1カラムへ）。

バリエーション

アーカイブ図書館版（黒地）

色を完全反転（黒地 #1a1410、紙白文字）。スタンプはネガポジ反転。
ノイズを少し強めて古い文書感を強化。

美術館収蔵品検索版

請求記号を「accession number」風に変更（M-2024-0421）。タイトルに作品メディウム・寸法を追加。
在庫を「展示中 / 収蔵中」に置換。

よくある質問

ハイライト処理（強調語の黄色マーカー）はどう実装する？

サーバーサイドで em タグでクエリ語を囲み、CSS で em の background を rgba(245,185,56,0.5)、padding 0 3px、font-style normal に設定すれば良い。font-style normal を忘れると斜体になる。

カードに微妙な傾きを付けると検索結果として読みにくい？

0.5度以下の微小傾きなら可読性は損なわれず、むしろ「物理的なカードの束」感が出る。読みやすさ優先なら hover 時のみ傾き解除する設計が定石。

モバイルで請求記号と在庫スタンプの並びが崩れる

card-head の grid-template-columns を 100px 1fr auto から 1fr へ切替（@media 内）。在庫スタンプは右上絶対配置で逃がすのも手。

植物標本図鑑風のポートフォリオ

19世紀の植物標本台紙（Herbarium sheet）を再構築したポートフォリオ。学名イタリック表記・採取地メタ・封蝋シール・古紙ノイズで「学術コレクション」の格を作る尖った設計。

エディトリアルハンドクラフト

タイプライター手紙風のCTA

タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。

エディトリアルレトロ

POSレシート風の料金プラン

コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。

モノクロレトロ