ギャラリー

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ギャラリー

ギャラリーは、施工事例・作品・商品写真など「量のある画像」を魅力的に陳列するためのUIです。このデモは、一覧表示だけでなく、カテゴリで並び替える絞り込み、複数条件の複合検索、サムネイルクリックでメイン画像が切り替わる連動型まで、実案件で要望の多い機能を一通りカバーしています。

ギャラリーの良し悪しは、実は演出よりも「目的の1枚にどれだけ速くたどり着けるか」で決まります。絞り込みとサムネ連動は、そのための道具立てです。

今回は画像やコンテンツの一覧を俯瞰して見せるギャラリーを作りました。

カメラマンや写真を撮るのが好きな人に実装してあげるとよろこばれるかもしれません。

おさえておきたいところ

ギャラリーを使う目的と使いどころはこんな感じです。

       目的：画像やコンテンツの一覧を俯瞰して見せる
使いどころ：画面の読み込み中 / スクロール / クリック

複数の画像を一覧で見せる

カテゴリ別に画像を並び替える

複合検索でカテゴリ別に画像を並び替える

サムネイルをクリックすると、メイン画像が切り替わる1

サムネイルをクリックすると、メイン画像が切り替わる2

サムネイルをクリックするとグループ化された画像一覧を表示する

実務メモ（2026年追記）

ギャラリーは画像点数が多いぶん、最適化の効果が最も出るページです。現在の基本セットは、loading="lazy"による遅延読み込み、srcset/sizesでの出し分け、そしてwidth/height属性の明示でレイアウトのガタつき（CLS）を防ぐこと。フォーマットはWebP/AVIFで容量が半分以下になることも珍しくありません。絞り込みの仕組み自体は、当時のライブラリを使わずともCSS Gridと少量のJSで書ける時代になりました。

• サムネイルと拡大画像は別ファイルに（一覧に原寸を並べない）
• 拡大表示（ライトボックス）は<dialog>要素で作るとキーボード対応が楽
• 代替テキストは「何の写真か」を書く（SEOと読み上げの両方に効く）
• 時間軸で見せたい場合はスライドショーが適任です

次回の予定

掲載内容の説明を簡易化させ、印象づける動画を作ってみようと思います＼＼\٩( ‘ω’ )و //／／