メインコンテンツまでスキップ

スクリーンショット要件 - PDF Connect v3 ドキュメント

優先度1: コアワークフロー（必須） 📸​

アプリのメイン画面​

  1. PDF Connect v3 ダッシュボード - モダンなデザインが分かるメイン画面
  2. PDFライブラリ管理 - 検索、タグ、一括操作が見えるグリッド表示
  3. PDF詳細ページ - 個別PDFの画面（リンクボタンが分かるように強調）

ユニバーサルリンク​

  1. ページタイプのドロップダウン - 対応する全ページタイプ（Products / Collections / Articles / Pages / Homepage / Search）
  2. リソース選択モーダル - 検索バー、リソース一覧、ページネーション、一括選択
  3. リンク処理中の表示 - ローディング状態と完了/確認メッセージ
  4. リンク済みリソース一覧 - 接続済みページと解除（unlink）オプション

公開（Publishing）システム​

  1. 公開オプションのモーダル - 3つの表示スタイルを並べて比較できる画面
  2. テーマエディタ連携 - テンプレートにPDFブロックを追加する操作
  3. ブロック設定 - 各表示タイプの設定パネル

表示スタイルの実例​

  1. 埋め込みPDFの例 - 商品ページ上にPDFが埋め込まれている状態
  2. PDFボタンの例 - ポップアップオーバーレイを開いた状態のボタン
  3. PDFリストの例 - 複数PDFを整理して表示したリスト

優先度2: 高度な機能（重要） 📸​

複数ブロックの運用​

  1. 複数ブロックの商品ページ - 同一ページに「埋め込み + ボタン + リスト」を配置した例
  2. テンプレートのステータス概要 - ブロック設定済みのテンプレートが分かる画面
  3. 一括選択UI - 複数項目の選択状態（カウンター表示を含む）

モバイル体験​

  1. モバイルでのPDF表示 - 3つの表示スタイルそれぞれのモバイル表示
  2. モバイルの管理画面 - モバイル環境でのリンク設定と公開操作
  3. レスポンシブ挙動 - 画面サイズに合わせてPDFが適応する様子

ワークフロー例​

  1. Before/After 比較 - 旧UIと新UIの比較
  2. ページ横断リンク - 同一PDFを複数のページタイプにリンクした例
  3. 検索機能 - リアルタイム検索の結果表示

優先度3: 補足コンテンツ（あると良い） 📸​

ユースケース例​

  1. 商品ドキュメント - 技術マニュアルの組み込み例
  2. コレクションカタログ - コレクションページ上のPDFカタログ
  3. ブログの資料 - ダウンロード可能なPDF付きの記事
  4. ホームページの機能 - ホームページ上の会社パンフレット

エラー/例外ケース​

  1. ローディング状態 - 処理中にユーザーが目にする表示
  2. エラーメッセージ - 分かりやすいエラー通知
  3. 空の状態（Empty State） - 新規ユーザーがコンテンツ追加前に見る画面

分析とパフォーマンス​

  1. 利用状況分析 - PDFの閲覧/利用メトリクス（利用可能な場合）
  2. パフォーマンス指標 - 速度と最適化に関するデータ
  3. テンプレート分析 - よく使われているテンプレートが分かる情報

スクリーンショット仕様​

技術要件​

  • 解像度: ドキュメントで鮮明に見える高DPI
  • ブラウザ: 表示の一貫性のため Chrome または Safari
  • ウィンドウサイズ: 標準デスクトップ（1920x1080）とモバイル（375x812）
  • テーマ: デモ用にクリーンでプロフェッショナルな Shopify テーマ

コンテンツ要件​

  • サンプルPDF: 実在しそうな業務ドキュメント（マニュアル/カタログ/ガイド）
  • テストストア: 商品、コレクション、記事、ページに適切なコンテンツを用意
  • データの整頓: プロフェッショナルな命名、説明、整理されたコンテンツ

ブランディング要件​

  • UIの一貫性: すべてのスクリーンショットで同一のアプリバージョンを表示
  • 見た目の品質: すっきり整理されたプロ仕様の画面
  • 焦点の明確化: 何の機能を示しているかが一目で分かること

スクリーンショットの作業フロー​

準備フェーズ​

  1. 現実的なコンテンツでテストストアを用意
  2. プロらしい命名のサンプルPDFを作成
  3. 3つの表示スタイルをすべて設定
  4. すべての機能が正しく動くことを確認

撮影フェーズ​

  1. デスクトップはフル解像度で撮影
  2. 主要画面のモバイル版も撮影
  3. ローディング/エラー状態も記録
  4. 必要に応じて Before/After 比較を用意

加工フェーズ​

  1. 重要なUI要素が伝わるようにトリミング
  2. 必要に応じて注釈（コールアウト）を追加
  3. すべての画像でビジュアルスタイルを統一
  4. Web配信向けにファイルサイズを最適化

ドキュメントでの使用方針​

配置戦略​

  • ヒーロー画像: ドキュメント冒頭に、主要なUI変更を示す画像を配置
  • ステップ解説: チュートリアルでは手順ごとにスクリーンショットを用意
  • 比較: 大きな改善点は Before/After を用意
  • 参照用: 位置/見た目を素早く確認できる画像を要所に配置

代替テキスト（Alt Text）要件​

アクセシビリティのため、すべてのスクリーンショットに説明的な alt テキストを付けます:

  • 画面に何が表示されているかを説明する
  • 画像内に見える重要なテキストを含める
  • 重要なUI要素や操作を明記する
  • 可能であれば 125 文字以内に収める

ファイル命名規則​

管理しやすいように、命名を統一します:

  • pdf-guru-v3-[feature]-[context].png
  • 例: pdf-guru-v3-linking-page-types.png
  • 例: pdf-guru-v3-display-embedded-product.png

この体系的な進め方により、強化された PDF Connect v3 の品質に見合う、網羅的なビジュアルドキュメントを整備できます。