サムネイル表示
一覧や詳細で画像を軽く表示し、クリックで拡大できます。
サムネイル表示は、商品画像、現場写真、証票画像、プロフィール写真などを、一覧や詳細画面で軽く確認できる大きさにして表示する機能です。Roundtableでは「どの画像を小さく見せるか」「クリック時にどこまで拡大するか」「公開側にも見せるか」を先にそろえると、発注者、実装者、AIに指示する人が同じ前提で画像確認の体験を設計できます。
この機能でできること
画像を一覧、詳細、カード、公開ページの中で小さく表示し、必要なときだけ拡大して確認できます。画像そのものを大きく並べるのではなく、サムネイルで全体を軽く見渡し、クリックやタップでプレビュー、拡大表示、別枠表示につなげられます。
画像が多い業務画面でも、一覧性と確認しやすさを両立します。
画像の有無、登録枚数、確認状態、公開可否を同じ画面で見られるようにすると、画像確認のためだけに詳細画面へ何度も移動しなくて済みます。
よくある利用場面
商品一覧で画像を確認する
商品名、価格、公開状態と一緒にメイン画像を小さく表示し、見た目の確認や差し替え対象を探しやすくします。
現場写真や作業報告を見る
施工前後の写真、点検写真、作業証跡を一覧で確認し、必要な写真だけ拡大して細部を確認します。
証票画像の確認を効率化する
領収書、本人確認書類、納品証票などを小さく並べ、未確認や差し戻しの画像をすばやく見つけます。
プロンプト例
表示する画像項目、一覧でのサイズ、クリック時の拡大方法、画像がない場合の表示、公開側で見せる範囲をまとめて伝えると、実装範囲を決めやすくなります。
プロンプト
商品管理にサムネイル表示を追加してください。商品一覧ではメイン画像を80px程度のサムネイルで表示し、クリックすると拡大プレビューを開けるようにします。画像が未登録の場合は「画像なし」と表示してください。商品詳細では補足画像も横並びのサムネイルで表示し、公開ページでは公開可の画像だけをサムネイル付きで見せて、選択した画像を大きく表示できるようにしてください。
この機能を使うときのポイント
表示場所一覧、詳細、カード、公開ページのどこにサムネイルを出すかを決めます。
拡大方法クリックでモーダル表示にするか、別枠のプレビューにするか、リンク先で開くかを用途に合わせます。
画像なしの見え方未登録、確認待ち、非公開、削除済みを同じ空表示にせず、運用上必要な違いを分けます。
公開範囲社内確認用の画像と公開ページに出す画像を分け、サムネイルから意図せず見えないようにします。
この機能を実装するときのコツ
サムネイル表示は、DB上の画像項目、一覧表示、詳細表示、拡大プレビュー、公開可否を分けて設計します。FBPでは画像型やファイル型の標準表示でサムネイルを指定し、一覧では軽い表示、詳細では複数画像の確認、公開側では公開可の画像だけを返す構成にします。画面側では内蔵JavaScriptや既存のクリック挙動を使って、拡大表示や選択中画像の切替を行います。画像サイズが大きい業務では、表示数や読み込み範囲を絞り、一覧の見やすさを保つことも重要です。