ギャラリー · ギャラリー
ポラロイド写真ボード風のギャラリー
コルクボードに押しピンとマスキングテープで留めたポラロイド写真コレクションを再構築したギャラリー。手書き風キャプション・微妙な傾き・付箋メモで「私的な記憶」を訴求する尖った設計。
プレビュー
概要
ポラロイド写真には、デジタル画像にはない性質があります。撮った瞬間に一枚しか存在せず、複製できず、手で触れられる。コルクボードに押しピンで留められたポラロイドの集まりは、「誰かが大切に選んで貼った私的な記憶」という強い物語を帯びます。このギャラリーは、その温度を画像コレクションに移植する試みです。
整然としたグリッドが奪う「人の気配」
通常のギャラリーは、画像を寸分の狂いもなく整列させます。美しく、効率的ですが、そこには「機械が並べた」印象が残る。ポラロイドボードは正反対です。一枚ごとに数度ずつ傾き、ピンの位置が微妙にずれ、マスキングテープの貼り方が揃っていない。この不揃いさこそが「人の手が触れた」証拠になります。完璧な整列が伝えられない親密さを、わざと崩すことで取り戻すのです。
崩れる形寸分の狂いもなく整列させる
美しく効率的ですが、機械が並べた印象が残ります。思い出が主役のコンテンツでは、その正確さが他人事のよそよそしさに変わります。
効く形一枚ごとに数度ずつ傾ける
ピンの位置がずれ、テープの貼り方が揃っていない。この不揃いさが人の手が触れた証拠になり、完璧な整列が伝えられない親密さを取り戻します。
不揃いがスクロールを退屈にさせない
均一なグリッドを延々とスクロールするのは、単調な作業です。ポラロイドボードは、写真のサイズや傾きが一枚ごとに違い、ときに付箋メモが混じる。この視覚的なリズムの揺らぎが、スクロールに次に何が出てくるかという小さな期待を与えます。旅の記録、結婚式や卒業式のメモリアル、子どもの成長記録——「思い出」が主役のコンテンツと、この様式は深く一致します。
仕上げの判断軸
傾きは±5度以内に抑えること——大きく傾けすぎると「散らかり」に転びます。CSS columns によるマソンリー風の自動配置は、画像点数が変わっても破綻しにくく実装も軽量です。手書き風キャプションのフォントは1種類に統一し、読みやすさを犠牲にしないこと。モバイルでは1カラムに素直に積み、傾きを浅くして操作性を守ります。
ギャラリーの構成要素
使いどころ
- 写真家・カメラマンのフォトログ
- 旅行・観光メディアの思い出記事
- 結婚式・誕生日・卒業式のメモリアルページ
- 個人ブロガーの日記サイト
- 子どもの成長記録・家族アルバム
このデザインの分類
- カテゴリ
- ギャラリー
- スタイル
- ハンドクラフト / プレイフル / レトロ / ウォーム
背景と狙いどころ
AIへの指示文
旅行・写真ブログの作品ギャラリーを、コルクボードのポラロイド写真コレクションとして作ってください。 要件: - 配色: コルク色 #b5895a / #d3a872 / #8e6a40 + 紙白 #f6f1e0 + 押しピン3色（赤 #d33b2c / 青 #3457b5 / 黄 #f5b938）+ マステ4色（mint / pink / yellow / blue）。 - 全画面コルクテクスチャ: radial-gradient のドットを 3 段重ね（暗 / 明 / 中サイズ）+ linear-gradient のベース色。中央周辺だけ暗い vignette。 - 木枠: border 14px の暗茶 + inset shadow + 上中央に小さな掛け穴。 - ヘッダー: 手書き風（Caveat / Klee One）大型タイトル「夏のMemories 2025」(rotate -1.5deg) + サブ文（rotate 0.5deg）。 - 写真ボード: CSS columns（4 240px、column-gap 28px）で Masonry 風。 - 各ポラロイド: - 紙白背景 + padding 14px / 38px（下フチ厚め）+ box-shadow 厚め - rotate -4 〜 +4deg のランダム傾き（クラスで .t1 〜 .t8） - 上中央に押しピン（::before、radial-gradient で立体感、影付き）OR - 上中央にマスキングテープ（半透明、stripe pattern、rotate -4deg） - 写真は SVG（aspect 4/4.5、4/5.5、4/3.2 の3バリエ）で抽象的シーンを描画 - キャプション（Caveat 22px、rotate -1deg）+ 撮影日メタ（Special Elite モノスペース、letter-spacing 0.1em、rotate 0.5deg） - hover で rotate(0deg) + translateY(-6px) + scale(1.03) + shadow 強化 + z-index 5。 - 1枚は付箋（黄色のスティッキーメモ + マステ留め）に置換し、手書きノート風メッセージ。 - 最下部CTA: 紙片風ボタン「あなたの一枚を貼ってみる →」（押しピン留め）。 - フォント: Caveat / Klee One（手書き）+ Special Elite（タイプライター）+ Yu Gothic フォールバック。 - JS不要、フルレスポンシブ（columns で自動的に 4→3→2→1）。
バリエーション
モノクロ写真版
SVG 写真を全部グレースケールに、コルクを暗く #6a4f30 に。 フォントを EB Garamond italic に変更してアートギャラリー風に。
海外旅行版（パスポートスタンプ追加）
各ポラロイドに国旗の小さなアイコン + 経度・緯度のモノスペース表記を追加。 ピンを赤の長押しピン（map pin）形状に。
よくある質問
ピンとマステの押し方の違いは？
SVG 写真は実画像に置換できる？
モバイルで傾けて重ねると操作しにくくない？
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
