book-serif-index

ブック・セリフ・インデックススキル

使用する場面

• セリフ体を主役にしたページ、モノスペースのインデックスナビゲーション、古びた紙の質感、余白の注釈、プレミアムなカタログのフレームを備えた、アーカイブ風のブックリーダーのデザインシステムを作成する場合。

ワークフロー

適用範囲

• インターフェースを、厳選されたアーカイブリーダー、写本ビューアー、またはプレミアムな文学カタログのような雰囲気にしたい場合は、デザインシステム全体の指針として適用してください。
• 書籍らしい構造とインデックスナビゲーションが必要な、エディトリアル体験、ストーリー性のある製品ページ、アーカイブ、リサーチ用インターフェース、ロアシステム、読書中心のレイアウトに使用してください。
• 汎用的なブログのスタイリングではありません。没入感のある書籍のような画面と、テクニカルまたはカタログ風の外枠を組み合わせてください。

ビジュアルの目標

• 暗めの周辺インターフェースシェルの内側に配置された、開いた本、二つ折りのフォリオ、またはアーカイブ文書のような中央の閲覧面を作成してください。
• タイポグラフィを体験の主役にしてください。ディスプレイ用のセリフ体またはゴシック風の見出し、読みやすいセリフ体の本文、ナビゲーション、メタデータ、インデックス用のモノスペースのユーティリティラベルを使います。
• 古びた紙の色調、控えめなテクスチャ、折り目の影、縁の陰影、軽い摩耗表現を使い、メインのコンテンツ面に手触りと収集品らしさを持たせてください。
• 閲覧エリアの周囲には、サイドバーのセクション、章のマーカー、セクションリスト、アーカブラベル、モノスペースのナビゲーションレールなど、控えめなインデックスまたはカタログUIを配置してください。
• 配色は控えめで雰囲気のあるものにします。暗い外側のシェル、温かみのある紙の内側、落ち着いたインク色、そしてデザインに合わせて選んだアクセントカラーを1色使います。ブランドカラーがない場合は、落ち着いたオックスブラッド、ブロンズ、またはアンティークゴールドを使用できます。

実装ガイダンス

• 暗めの外側インターフェースフレームと、その中央に配置した明るい書籍風コンテンツ面の、2つのゾーンで構成するのがおすすめです。
• 読みやすさのために、行の高さに余裕を持たせたセリフ体の本文を使い、コントラストとしてモノスペースのラベル、字間を広く取ったセクション名、控えめなメタデータを組み合わせてください。
• グラデーション、内側のシャドウ、控えめな中央の折り目、縁のシャドウ、軽い紙のテクスチャで書籍のような面を作り、平坦なベージュのカードではなく、重なりのある素材として見えるようにしてください。
• 章のリスト、セクションツリー、アーカイブのグループ、アクティブ状態や小さなマーカーを備えたサイドバーの項目など、インデックス風のナビゲーションパターンを取り入れてください。
• ドロップキャップ、余白の注釈ボックス、ブロックラベル、注釈、引用、フォリオマーカー、フッターメタデータなど、学術的なディテールを加え、エディトリアルシステムを強化してください。
• 動きは落ち着きがあり、文学的なものにします。マスクを使ったテキストの表示、穏やかな登場アニメーション、ゆっくりした背景のドリフト、控えめなホバー効果を取り入れてください。

おすすめのパターン

• 外側のシェル：細いフレーム線、控えめな縦のレール、落ち着いたコーナーマーカーを備えた、暗い全画面コンテナ。
• 見開き：中央の折り目、紙のグラデーション、柔らかな縁のシャドウ、ページごとのわずかな色調差を備えた、2ページまたは2パネルの閲覧領域。
• インデックスナビゲーション：グループ化された見出し、アクティブな箇条書き、アーカイブのセクション、またはカタログのように並べられた章の項目を備えた、モノスペースのサイドバー。
• 読書のディテール：ドロップキャップ、プルクオート、注釈カード、余白のメモ、細い枠線で囲んだ図版、下部のフォリオラベル。
• タイポグラフィシステム：装飾的なディスプレイ用セリフ体、高い可読性を備えた本文用セリフ体、構造を示すために控えめに使うモノスペースのメタデータ。

調整項目

• 古さ：インターフェースをどの程度歴史的または現代的に感じさせるかに応じて、紙のテクスチャ、温かみのある色合い、摩耗表現の度合いを調整します。
• テクニカルオーバーレイ：カタログレール、インデックスラベル、メタデータを追加または削除し、アーカイブ風にもシステム風にも調整できます。
• 書籍のリアリティ：折り目の深さ、ページのシャドウ、紙のコントラストを調整し、スキューモーフィズムが過剰にならない範囲で、手触りのある面にします。
• アクセントの使用：アクセントカラーは、見開き全体に広げず、見出し、アクティブなインデックス状態、コールアウト、注釈に集中させます。
• 密度：コンテンツに応じて、余白の多い美術館のような構成にするか、より情報量の多い学術的なインデックスにするかを選びます。

避けること

• 納得感のある書籍やアーカイブの構造がない、セリフ体のテキストを使った平坦なクリーム色のカード。
• 索引レール、メタデータ、素材感を省いた、ありきたりな出版物風レイアウト。
• アーカイブ調の雰囲気を損なう、明るくモダンな SaaS の配色。
• インターフェースを汚く見せたり、読みにくくしたりする、過剰なダメージ加工。
• 規律あるカタログと編集の枠組みを欠いた、過度に装飾的なファンタジー風のスタイリング。