ギャラリー · ギャラリー
ポラロイド写真ボード風のギャラリー
コルクボードに押しピンとマスキングテープで留めたポラロイド写真コレクションを再構築したギャラリー。手書き風キャプション・微妙な傾き・付箋メモで「私的な記憶」を訴求する尖った設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/polaroid-board-gallery/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
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）形状に。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。CSSで描く架空の作品集です。写真の撮影実績や画像ファイルは含みません。作品リンクは構成の説明へ移動し、投稿・アップロード・保存は行いません。
コードを表示
<!doctype html>
<!-- Vibehaus · CC0 · 架空の表示・操作見本。外部素材・送信・永続保存なし。 -->
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<title>polaroid-board-gallery preview</title>
<style>
:root {
--cork: #b5895a;
--cork-dark: #8e6a40;
--cork-light: #d3a872;
--paper: #f6f1e0;
--ink: #2a221a;
--pin-red: #d33b2c;
--pin-blue: #3457b5;
--pin-yellow: #f5b938;
--tape-mint: #b5e6c5;
--tape-pink: #f7c0d0;
--tape-yellow: #fce58a;
--tape-blue: #b3d4f5;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--cork);
color: var(--ink);
font-family: "Caveat", "Klee One", "Hannari", "Hiragino Maru Gothic Pro", "Yu Gothic", sans-serif;
line-height: 1.6;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
background-image:
radial-gradient(rgba(0,0,0,0.16) 1px, transparent 1.5px),
radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.5px),
radial-gradient(rgba(142,106,64,0.4) 2px, transparent 2.5px),
linear-gradient(135deg, var(--cork-light), var(--cork) 50%, var(--cork-dark));
background-size: 6px 6px, 8px 8px, 14px 14px, 100% 100%;
background-position: 0 0, 3px 3px, 0 0, 0 0;
}
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(0,0,0,0.25) 100%);
z-index: 0;
}
.stage {
position: relative;
max-width: 1320px;
margin: 0 auto;
padding: clamp(24px, 4vw, 56px);
z-index: 1;
}
/* Frame around board */
.frame {
position: relative;
border: 14px solid #5a3a1f;
border-radius: 4px;
box-shadow:
inset 0 0 0 2px #3d2613,
inset 0 0 24px rgba(0,0,0,0.35),
0 12px 32px rgba(0,0,0,0.25);
background: transparent;
padding: 32px 28px 56px;
min-height: 760px;
}
.frame::before {
content: "";
position: absolute;
top: -22px; left: 50%;
width: 8px; height: 32px;
background: #2a1f15;
transform: translateX(-50%);
border-radius: 2px;
}
/* Header */
.head {
text-align: center;
margin-bottom: 32px;
color: var(--paper);
}
.head h1 {
font-family: "Caveat", "Klee One", "Hiragino Maru Gothic Pro", cursive;
font-weight: 700;
font-size: clamp(40px, 6vw, 72px);
margin: 0 0 8px;
line-height: 1.35;
text-shadow: 0 2px 4px rgba(0,0,0,0.45);
letter-spacing: 0.02em;
transform: rotate(-1.5deg);
}
.head h1 b { color: var(--tape-yellow); }
.head p {
font-family: "Caveat", "Klee One", sans-serif;
font-size: 22px;
margin: 0;
color: var(--paper);
opacity: 0.92;
transform: rotate(0.5deg);
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* Polaroid grid */
.board {
position: relative;
columns: 4 240px;
column-gap: 28px;
}
.polaroid {
--tilt: 0deg;
background: var(--paper);
padding: 14px 14px 38px;
margin: 0 0 32px;
box-shadow:
0 8px 18px rgba(0,0,0,0.35),
0 1px 0 rgba(255,255,255,0.6) inset;
transform: rotate(var(--tilt));
position: relative;
break-inside: avoid;
transition: transform 0.25s ease, box-shadow 0.25s ease;
display: block;
text-decoration: none;
color: inherit;
}
.polaroid:hover {
transform: rotate(0deg) translateY(-6px) scale(1.03);
box-shadow:
0 16px 32px rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.7) inset;
z-index: 5;
}
/* Pin */
.polaroid::before {
content: "";
position: absolute;
top: -6px; left: 50%;
transform: translateX(-50%);
width: 14px; height: 14px;
background: radial-gradient(circle at 35% 35%, #ff6b5b, var(--pin-red) 60%, #8a1d12);
border-radius: 50%;
box-shadow:
0 2px 4px rgba(0,0,0,0.5),
inset 1px 1px 1px rgba(255,255,255,0.6);
z-index: 3;
}
/* Tilt variants */
.polaroid.t1 { --tilt: -3deg; }
.polaroid.t2 { --tilt: 2.5deg; }
.polaroid.t3 { --tilt: -1.5deg; }
.polaroid.t4 { --tilt: 4deg; }
.polaroid.t5 { --tilt: -2.4deg; }
.polaroid.t6 { --tilt: 1.8deg; }
.polaroid.t7 { --tilt: -4.2deg; }
.polaroid.t8 { --tilt: 3.2deg; }
/* Pin colors */
.polaroid.pin-blue::before {
background: radial-gradient(circle at 35% 35%, #6184d8, var(--pin-blue) 60%, #1c2f6f);
}
.polaroid.pin-yellow::before {
background: radial-gradient(circle at 35% 35%, #ffd766, var(--pin-yellow) 60%, #b07f1d);
}
/* Tape (some polaroids have tape instead of pin) */
.polaroid.tape::before { display: none; }
.polaroid .washi {
position: absolute;
width: 70px; height: 22px;
top: -10px; left: 50%;
transform: translateX(-50%) rotate(-4deg);
background: var(--tape-mint);
opacity: 0.85;
border-left: 2px dashed rgba(0,0,0,0.06);
border-right: 2px dashed rgba(0,0,0,0.06);
background-image: repeating-linear-gradient(
90deg, transparent 0 8px, rgba(255,255,255,0.4) 8px 9px
);
z-index: 3;
}
.polaroid.tape-pink .washi { background-color: var(--tape-pink); }
.polaroid.tape-yellow .washi { background-color: var(--tape-yellow); }
.polaroid.tape-blue .washi { background-color: var(--tape-blue); }
/* Photo */
.polaroid .photo {
width: 100%;
aspect-ratio: 4 / 4.5;
background: #ddd;
overflow: hidden;
margin-bottom: 12px;
position: relative;
}
.polaroid .photo svg { width: 100%; height: 100%; display: block; }
/* Caption */
.polaroid .cap {
font-family: "Caveat", "Klee One", "Hiragino Maru Gothic Pro", cursive;
font-size: 22px;
color: var(--ink);
line-height: 1.2;
padding: 0 4px;
transform: rotate(-1deg);
}
.polaroid .meta {
font-family: "Special Elite", "Courier New", monospace;
font-size: 11px;
color: rgba(42,34,26,0.7);
margin-top: 4px;
letter-spacing: 0.1em;
transform: rotate(0.5deg);
}
/* Variable photo widths to add visual rhythm */
.polaroid.tall .photo { aspect-ratio: 4 / 5.5; }
.polaroid.short .photo { aspect-ratio: 4 / 3.2; }
/* Sticky note style for one entry */
.sticky {
background: var(--tape-yellow);
padding: 18px 16px;
box-shadow: 0 6px 12px rgba(0,0,0,0.3);
margin: 0 0 32px;
transform: rotate(2deg);
break-inside: avoid;
position: relative;
font-family: "Caveat", "Klee One", cursive;
font-size: 22px;
color: var(--ink);
line-height: 1.4;
text-decoration: none;
display: block;
}
.sticky::before {
content: "";
position: absolute;
top: -6px; left: 18px;
width: 70px; height: 14px;
background: var(--tape-pink);
opacity: 0.85;
transform: rotate(-6deg);
}
.sticky b { display: block; font-size: 28px; margin-bottom: 6px; }
.sticky small {
display: block;
font-family: "Special Elite", "Courier New", monospace;
font-size: 11px;
margin-top: 8px;
letter-spacing: 0.1em;
opacity: 0.7;
}
/* CTA pin button bottom */
.pin-cta {
margin: 32px auto 0;
text-align: center;
}
.pin-cta a {
display: inline-block;
background: var(--paper);
color: var(--ink);
font-family: "Caveat", "Klee One", cursive;
font-size: 26px;
font-weight: 700;
padding: 14px 36px;
text-decoration: none;
transform: rotate(-1deg);
box-shadow: 0 8px 18px rgba(0,0,0,0.35);
position: relative;
}
.pin-cta a::before {
content: "";
position: absolute;
top: -6px; left: 50%;
width: 14px; height: 14px;
transform: translateX(-50%);
background: radial-gradient(circle at 35% 35%, #6184d8, var(--pin-blue) 60%, #1c2f6f);
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.pin-cta a:hover { transform: rotate(0deg) translateY(-3px); }
[hidden]{display:none!important}
a,button,input,summary{min-width:44px;min-height:44px}
a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid currentColor;outline-offset:4px}
nav a{display:inline-flex;align-items:center;justify-content:center}
nav{flex-wrap:wrap}
header.bar{flex-wrap:wrap;gap:1rem}
input{max-width:100%}
.demo-notes{position:relative;z-index:10;box-sizing:border-box;max-width:1080px;width:calc(100% - 2rem);margin:2rem auto;padding:clamp(1rem,3vw,2rem);background:#f6f1e0;color:#2a221a;border:1px solid currentColor;text-align:left;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}
.demo-notes h2{font-size:18px;line-height:1.5;margin:0 0 .75rem}
.demo-notes h3{font-size:15px;line-height:1.5;margin:0 0 .4rem}
.demo-notes p{font:inherit;color:inherit;opacity:1;margin:0 0 1rem;max-width:none;letter-spacing:0}
.demo-notes section{margin-top:1.25rem;scroll-margin-top:1rem}
.demo-notes button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;padding:.4rem .75rem}
.demo-notes a{color:inherit}
.demo-notes .demo-motion{margin-bottom:1rem}
.demo-notes section:focus{outline:3px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}
.head h1{font-size:clamp(30px,6vw,72px);overflow-wrap:anywhere}
.board{min-width:0}
</style>
</head>
<body>
<div class="stage">
<div class="frame">
<header class="head">
<h1>夏の <b>Memories</b> 2025</h1>
<p>— 押しピンとマスキングテープで留めた、9枚の記憶 —</p>
</header>
<section class="board">
<a href="#demo-link-0" class="polaroid t1">
<div class="photo">
<svg viewBox="0 0 100 110" preserveAspectRatio="xMidYMid slice">
<defs><linearGradient id="p1" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#88c4f0"/><stop offset="0.6" stop-color="#f5d9a8"/><stop offset="1" stop-color="#3d8a5f"/></linearGradient></defs>
<rect width="100" height="110" fill="url(#p1)"/>
<circle cx="78" cy="22" r="10" fill="#fef0a8"/>
</svg>
</div>
<p class="cap">夏の入口、海へ</p>
<p class="meta">07.14 · KAMAKURA</p>
</a>
<a href="#demo-link-1" class="polaroid t2 tape tape-pink tall">
<span class="washi"></span>
<div class="photo">
<svg viewBox="0 0 100 138" preserveAspectRatio="xMidYMid slice">
<rect width="100" height="138" fill="#1a2238"/>
<circle cx="50" cy="55" r="20" fill="#fce58a"/>
<rect x="20" y="80" width="60" height="58" fill="#3a2a47"/>
<rect x="28" y="92" width="6" height="8" fill="#ffd54a"/>
<rect x="44" y="92" width="6" height="8" fill="#ffd54a"/>
<rect x="62" y="92" width="6" height="8" fill="#ffd54a"/>
</svg>
</div>
<p class="cap">夜風と提灯と。</p>
<p class="meta">07.27 · KYOTO</p>
</a>
<a href="#demo-link-2" class="polaroid t3 pin-blue short">
<div class="photo">
<svg viewBox="0 0 100 80" preserveAspectRatio="xMidYMid slice">
<rect width="100" height="80" fill="#f5e8c8"/>
<rect x="10" y="34" width="80" height="40" fill="#d8a875"/>
<polygon points="50,18 70,38 30,38" fill="#a04a2a"/>
<rect x="44" y="46" width="10" height="20" fill="#3a2516"/>
</svg>
</div>
<p class="cap">小屋を見つけた</p>
<p class="meta">08.03 · KARUIZAWA</p>
</a>
<a href="#demo-link-3" class="polaroid t4 pin-yellow">
<div class="photo">
<svg viewBox="0 0 100 110" preserveAspectRatio="xMidYMid slice">
<rect width="100" height="110" fill="#5e8a3d"/>
<circle cx="30" cy="35" r="22" fill="#f4f0d4"/>
<circle cx="68" cy="68" r="18" fill="#f4f0d4"/>
<circle cx="22" cy="78" r="12" fill="#f4f0d4"/>
</svg>
</div>
<p class="cap">ひまわり畑、満開</p>
<p class="meta">08.10 · ZAO</p>
</a>
<div class="sticky">
<b>NOTE</b>
休暇日記、書きかけ。<br>
続きは戻ったら。
<small>— 旅日記より</small>
</div>
<a href="#demo-link-4" class="polaroid t5 tape tape-blue">
<span class="washi"></span>
<div class="photo">
<svg viewBox="0 0 100 110" preserveAspectRatio="xMidYMid slice">
<rect width="100" height="110" fill="#3a4a8a"/>
<circle cx="50" cy="55" r="35" fill="#1a2a5a"/>
<circle cx="40" cy="50" r="3" fill="#fff"/>
<circle cx="65" cy="62" r="2" fill="#fff"/>
<circle cx="55" cy="80" r="2.5" fill="#fff"/>
<circle cx="30" cy="35" r="2" fill="#fff"/>
</svg>
</div>
<p class="cap">天の川、はじめて</p>
<p class="meta">08.15 · NAGANO</p>
</a>
<a href="#demo-link-5" class="polaroid t6 pin-blue">
<div class="photo">
<svg viewBox="0 0 100 110" preserveAspectRatio="xMidYMid slice">
<rect width="100" height="110" fill="#f5b9a8"/>
<circle cx="50" cy="55" r="32" fill="#fff"/>
<circle cx="42" cy="50" r="3" fill="#1a1612"/>
<circle cx="58" cy="50" r="3" fill="#1a1612"/>
<path d="M 40 65 Q 50 72 60 65" fill="none" stroke="#1a1612" stroke-width="2"/>
</svg>
</div>
<p class="cap">招き猫みたいな顔</p>
<p class="meta">08.20 · ENOSHIMA</p>
</a>
<a href="#demo-link-6" class="polaroid t7 tape tape-mint short">
<span class="washi"></span>
<div class="photo">
<svg viewBox="0 0 100 80" preserveAspectRatio="xMidYMid slice">
<rect width="100" height="80" fill="#fce58a"/>
<circle cx="80" cy="20" r="16" fill="#ff8763"/>
<path d="M 0 60 Q 25 40 50 55 T 100 50 V80 H0 Z" fill="#3d8a5f"/>
</svg>
</div>
<p class="cap">夕焼けの公園</p>
<p class="meta">08.27 · TOKYO</p>
</a>
<a href="#demo-link-7" class="polaroid t8 pin-yellow tall">
<div class="photo">
<svg viewBox="0 0 100 138" preserveAspectRatio="xMidYMid slice">
<rect width="100" height="138" fill="#d3e6f0"/>
<rect x="20" y="20" width="60" height="100" fill="#fff" stroke="#a0a8b0" stroke-width="1"/>
<line x1="28" y1="40" x2="72" y2="40" stroke="#a0a8b0"/>
<line x1="28" y1="50" x2="60" y2="50" stroke="#a0a8b0"/>
<line x1="28" y1="60" x2="68" y2="60" stroke="#a0a8b0"/>
<line x1="28" y1="70" x2="50" y2="70" stroke="#a0a8b0"/>
<line x1="28" y1="84" x2="72" y2="84" stroke="#a0a8b0"/>
<line x1="28" y1="94" x2="62" y2="94" stroke="#a0a8b0"/>
<line x1="28" y1="104" x2="68" y2="104" stroke="#a0a8b0"/>
</svg>
</div>
<p class="cap">日記をつけた日</p>
<p class="meta">09.01 · HOME</p>
</a>
<a href="#demo-link-8" class="polaroid t1 tape tape-yellow">
<span class="washi"></span>
<div class="photo">
<svg viewBox="0 0 100 110" preserveAspectRatio="xMidYMid slice">
<rect width="100" height="110" fill="#88c4f0"/>
<path d="M 0 65 Q 30 45 60 60 T 100 55 V110 H0 Z" fill="#3a6a9a"/>
<circle cx="22" cy="22" r="6" fill="#fef0a8"/>
</svg>
</div>
<p class="cap">海と空、最後の日</p>
<p class="meta">09.04 · IZU</p>
</a>
</section>
<div class="pin-cta">
<a href="#demo-link-9">あなたの一枚を貼ってみる →</a>
</div>
</div>
</div>
<aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>CSSで描く架空の作品集です。写真の撮影実績や画像ファイルは含みません。作品リンクは構成の説明へ移動し、投稿・アップロード・保存は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>夏の入口、海へ 07.14 · KAMAKURAの見本</h3>
<p>色面と余白で作品を見せる構成例です。タイトル・地名・撮影時刻は架空の設定で、写真・別ページ・投稿機能は含みません。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>夜風と提灯と。 07.27 · KYOTOの見本</h3>
<p>色面と余白で作品を見せる構成例です。タイトル・地名・撮影時刻は架空の設定で、写真・別ページ・投稿機能は含みません。</p>
</section>
<section id="demo-link-2" tabindex="-1">
<h3>小屋を見つけた 08.03 · KARUIZAWAの見本</h3>
<p>色面と余白で作品を見せる構成例です。タイトル・地名・撮影時刻は架空の設定で、写真・別ページ・投稿機能は含みません。</p>
</section>
<section id="demo-link-3" tabindex="-1">
<h3>ひまわり畑、満開 08.10 · ZAOの見本</h3>
<p>色面と余白で作品を見せる構成例です。タイトル・地名・撮影時刻は架空の設定で、写真・別ページ・投稿機能は含みません。</p>
</section>
<section id="demo-link-4" tabindex="-1">
<h3>天の川、はじめて 08.15 · NAGANOの見本</h3>
<p>色面と余白で作品を見せる構成例です。タイトル・地名・撮影時刻は架空の設定で、写真・別ページ・投稿機能は含みません。</p>
</section>
<section id="demo-link-5" tabindex="-1">
<h3>招き猫みたいな顔 08.20 · ENOSHIMAの見本</h3>
<p>色面と余白で作品を見せる構成例です。タイトル・地名・撮影時刻は架空の設定で、写真・別ページ・投稿機能は含みません。</p>
</section>
<section id="demo-link-6" tabindex="-1">
<h3>夕焼けの公園 08.27 · TOKYOの見本</h3>
<p>色面と余白で作品を見せる構成例です。タイトル・地名・撮影時刻は架空の設定で、写真・別ページ・投稿機能は含みません。</p>
</section>
<section id="demo-link-7" tabindex="-1">
<h3>日記をつけた日 09.01 · HOMEの見本</h3>
<p>色面と余白で作品を見せる構成例です。タイトル・地名・撮影時刻は架空の設定で、写真・別ページ・投稿機能は含みません。</p>
</section>
<section id="demo-link-8" tabindex="-1">
<h3>海と空、最後の日 09.04 · IZUの見本</h3>
<p>色面と余白で作品を見せる構成例です。タイトル・地名・撮影時刻は架空の設定で、写真・別ページ・投稿機能は含みません。</p>
</section>
<section id="demo-link-9" tabindex="-1">
<h3>あなたの一枚を貼ってみる →の見本</h3>
<p>色面と余白で作品を見せる構成例です。タイトル・地名・撮影時刻は架空の設定で、写真・別ページ・投稿機能は含みません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
ポラロイド写真には、デジタル画像にはない性質があります。撮った瞬間に一枚しか存在せず、複製できず、手で触れられる。コルクボードに押しピンで留められたポラロイドの集まりは、「誰かが大切に選んで貼った私的な記憶」という強い物語を帯びます。このギャラリーは、その温度を画像コレクションに移植する試みです。
整然としたグリッドが奪う「人の気配」
通常のギャラリーは、画像を寸分の狂いもなく整列させます。美しく、効率的ですが、そこには「機械が並べた」印象が残る。ポラロイドボードは正反対です。一枚ごとに数度ずつ傾き、ピンの位置が微妙にずれ、マスキングテープの貼り方が揃っていない。この不揃いさこそが「人の手が触れた」証拠になります。完璧な整列が伝えられない親密さを、わざと崩すことで取り戻すのです。
崩れる形寸分の狂いもなく整列させる
美しく効率的ですが、機械が並べた印象が残ります。思い出が主役のコンテンツでは、その正確さが他人事のよそよそしさに変わります。
効く形一枚ごとに数度ずつ傾ける
ピンの位置がずれ、テープの貼り方が揃っていない。この不揃いさが人の手が触れた証拠になり、完璧な整列が伝えられない親密さを取り戻します。
不揃いがスクロールを退屈にさせない
均一なグリッドを延々とスクロールするのは、単調な作業です。ポラロイドボードは、写真のサイズや傾きが一枚ごとに違い、ときに付箋メモが混じる。この視覚的なリズムの揺らぎが、スクロールに次に何が出てくるかという小さな期待を与えます。旅の記録、結婚式や卒業式のメモリアル、子どもの成長記録——「思い出」が主役のコンテンツと、この様式は深く一致します。
仕上げの判断軸
傾きは±5度以内に抑えること——大きく傾けすぎると「散らかり」に転びます。CSS columns によるマソンリー風の自動配置は、画像点数が変わっても破綻しにくく実装も軽量です。手書き風キャプションのフォントは1種類に統一し、読みやすさを犠牲にしないこと。モバイルでは1カラムに素直に積み、傾きを浅くして操作性を守ります。
±5度傾きの上限。超えると親密さが散らかりに転ぶ
1種類手書き風キャプションのフォント。増やすと読みにくい
1カラムモバイルの積み方。傾きも浅くして操作性を守る
見本で試せる範囲
CSSで描く架空の作品集です。写真の撮影実績や画像ファイルは含みません。作品リンクは構成の説明へ移動し、投稿・アップロード・保存は行いません。 作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。
ギャラリーの構成要素
使いどころ
- 写真家・カメラマンのフォトログ
- 旅行・観光メディアの思い出記事
- 結婚式・誕生日・卒業式のメモリアルページ
- 個人ブロガーの日記サイト
- 子どもの成長記録・家族アルバム
このデザインの分類
背景と狙いどころ
よくある質問
ピンとマステの押し方の違いは？
ピンは1点留め（中央上）で硬質感、マステは2点固定（左右）で柔らかい雰囲気。混ぜると視覚的リズムが生まれて単調にならない。
SVG 写真は実画像に置換できる？
はい。<svg> を <img loading="lazy" decoding="async" alt="..." width=100 height=110> に置換するだけ。aspect-ratio CSS で枠は維持される。
モバイルで傾けて重ねると操作しにくくない？
1カラム時は rotate を勝手に減らすか0にすると操作性が改善。@media (max-width 520px) で transform を none に上書きするのが定石。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
ネオン看板の夜景写真ギャラリー
黒に近い紺の地に、ネオン管のように光る見出しと、縦に詰めて並ぶ夜景写真のギャラリー。撮影地で絞り込めるボタンを付け、写真ごとに看板の色で縁を光らせる。光らせる場所を見出しと選択中の要素に絞り、写真を主役に保つ。
ベントーグリッドの写真ギャラリー
大小のタイルが噛み合うベントーグリッドで、作品の格を差でつける写真ギャラリー。主役を大きく、脇役を小さく——並べた瞬間に見る順番が決まるレイアウトです。
御朱印帳・スタンプラリー風のCTA
御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。