ギャラリー · ギャラリー
ポラロイド写真ボード風のギャラリー
コルクボードに押しピンとマスキングテープで留めたポラロイド写真コレクションを再構築したギャラリー。手書き風キャプション・微妙な傾き・付箋メモで「私的な記憶」を訴求する尖った設計。
プレビュー
概要
ポラロイド写真には、デジタル画像にはない性質があります。撮った瞬間に一枚しか存在せず、複製できず、手で触れられる。コルクボードに押しピンで留められたポラロイドの集まりは、「誰かが大切に選んで貼った私的な記憶」という強い物語を帯びます。このギャラリーは、その温度を画像コレクションに移植する試みです。
整然としたグリッドが奪う「人の気配」
通常のギャラリーは、画像を寸分の狂いもなく整列させます。美しく、効率的ですが、そこには「機械が並べた」印象が残る。ポラロイドボードは正反対です。一枚ごとに数度ずつ傾き、ピンの位置が微妙にずれ、マスキングテープの貼り方が揃っていない。この不揃いさこそが「人の手が触れた」証拠になります。完璧な整列が伝えられない親密さを、わざと崩すことで取り戻すのです。
不揃いがスクロールを退屈にさせない
均一なグリッドを延々とスクロールするのは、単調な作業です。ポラロイドボードは、写真のサイズや傾きが一枚ごとに違い、ときに付箋メモが混じる。この視覚的なリズムの揺らぎが、スクロールという行為に「次に何が出てくるか」という小さな期待を与えます。旅の記録、結婚式や卒業式のメモリアル、子どもの成長記録——「思い出」が主役のコンテンツと、この様式は深く一致します。
仕上げの判断軸
傾きは±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 写真は実画像に置換できる？
モバイルで傾けて重ねると操作しにくくない？
関連するデザイン
御朱印帳・スタンプラリー風のCTA
御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。
タイプライター手紙風のCTA
タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。
弾むアニメーションのCTAブロック
少し傾いたカードと厚い境界線、浮遊する絵文字、手書き風の矢印書き込みで構成した遊び心のあるCTAブロック。個人開発プロダクト・クリエイター系サービス・コミュニティ募集など、親しみの温度を優先したい局面向け。