コンセプト
ギャラリーサイトは写真を鑑賞してもらうことも重要ですが、訪れた人に楽しんでもらいたいという思いがありました。リロードやフィルター機能で写真の並び順が変わったり、最初は表示されていないものがクリックすることで表示されたりと、ユーザーエクスペリエンスを重視して設計・デザインしました。
jQueryプラグイン
メインで使用しているjQueryプラグイン「Isotope」はMasonry風などモバイルにも対応したレスポンシブデザインが可能です。また本家Masonryには無いフィルター機能を実装しています。
フィルター機能
メニューがフィルターの役割をしています。例えば「Portrait」のメニューをクリックすると人物写真だけが表示され、レイアウトも写真の縦横比に合わせて変更されます。
ブレイクポイント
スマートフォン、タブレット、PCの各デバイスに対応すべく、600px未満・600px以上900px未満・900px以上の３っつのメジャーブレイクポイントを設定。デバイスの幅ごとに最適なレイアウトに可変します。
クリックすると表示される要素
読み込みの時もしくは「Show all」メニューをクリックした時には表示されていない写真説明の要素や「Profile」の要素が、「Landscape」などそれぞれのメニューをクリックすると出現してきます。また写真をクリックするとモーダルウィンドウで拡大表示され、詳しい写真説明が表示されます。
