Pinterest風ギャラリー

:LiTarget: 用途

画像のメタデータ管理＋カスタム columns ギャラリー。タグ・カテゴリ検索付き。
:LiSparkle: 特徴

複数列レイアウト
タグ検索
カテゴリ分類
メタデータ管理
:LiCode: 実コード（SCALE Base より自動抽出）

:LiInfo: lib/pinterest-gallery.ts の中身そのもの。コピペ即可。
// Pinterest デザインギャラリー
// ジャンル別にまとめたPinterestボードの参考コレクション

export interface PinBoard {
  id: string;
  genre: string;         // ジャンル名
  group: string;         // カテゴリグループ
  url: string;           // Pinterest ボードURL
  pinCount: number;      // ピン数
  description: string;   // 説明
}

export type PinGroup = 'スタイル' | '業界' | 'ターゲット' | '季節・イベント' | 'フォーマット' | 'テーマ・世界観';

const GROUP_COLORS: Record<PinGroup, string> = {
  'スタイル': '#a855f7',
  '業界': '#0ea5e9',
  'ターゲット': '#f43f5e',
  '季節・イベント': '#f97316',
  'フォーマット': '#6aa57a',
  'テーマ・世界観': '#9078ad',
};

export { GROUP_COLORS };

export const PIN_BOARDS: PinBoard[] = [
  // ===== スタイル =====
  { id: 'ai', genre: 'AI', group: 'スタイル', url: 'https://pin.it/3yRz8hgfN', pinCount: 42, description: 'AIデザインまとめ。AI関連のデザイン作る時に見返すと参考になります。' },
  { id: 'neon', genre: 'ネオン', group: 'スタイル', url: 'https://pin.it/6kjadUZxa', pinCount: 52, description: 'おしゃれな表現をするならぜひ参考にしてみてください。' },
  { id: 'handdrawn', genre: '手書き風', group: 'スタイル', url: 'https://pin.it/5pxvfb9xs', pinCount: 42, description: '手書きのような親しみやすさを出したいときに参考になるデザイン。フォントや線の使い方だけで雰囲気がガラッと変わります。' },
  { id: 'gradient', genre: 'グラデーション', group: 'スタイル', url: 'https://pin.it/RGESwvtS4', pinCount: 41, description: '今っぽく見えるグラデの実例。色の選び方と使い方で作れます。' },
  { id: 'pixel', genre: 'ピクセルアート', group: 'スタイル', url: 'https://pin.it/ttMA6XOVh', pinCount: 35, description: 'ドット絵・レトロゲーム風のデザイン。個性的な世界観で他と差をつけたい人におすすめ。' },
  { id: 'glitch', genre: 'グリッチ', group: 'スタイル', url: 'https://pin.it/vf6hCV31T', pinCount: 45, description: 'ノイズやズレをあえてデザインに取り入れたグリッチ表現。インパクトが欲しいときの選択肢。' },
  { id: 'glass', genre: 'グラスモーフィズム', group: 'スタイル', url: 'https://pin.it/6U3Y99kUF', pinCount: 35, description: 'ガラスのような透明感のあるUI。背景を透かす表現がスタイリッシュです。' },
  { id: 'clay', genre: 'クレイモーフィズム', group: 'スタイル', url: 'https://pin.it/2GILqRQn0', pinCount: 41, description: '粘土のような質感のUI。3D表現との相性が良く、やわらかい印象を出せます。' },
  { id: 'neu', genre: 'ニューモーフィズム', group: 'スタイル', url: 'https://pin.it/7zqJA3qoL', pinCount: 44, description: '立体感と柔らかさが特徴のUIスタイル。使いどころが難しいスタイルだからこそ、良い実例を持っておくと安心。' },
  { id: 'brutal', genre: 'ブルータリズム', group: 'スタイル', url: 'https://pin.it/cM45PVrlj', pinCount: 55, description: '荒々しさやインパクトを大胆に表現するスタイル。' },
  { id: 'cyber', genre: 'サイバーパンク', group: 'スタイル', url: 'https://pin.it/3kmwbHpER', pinCount: 46, description: 'ネオンとダークを融合したサイバーパンクの世界観。' },
  { id: 'steam', genre: 'スチームパンク', group: 'スタイル', url: 'https://pin.it/5R1PXKJTe', pinCount: 51, description: '歯車と蒸気のレトロフューチャーな世界。' },
  { id: 'vintage', genre: 'ヴィンテージ', group: 'スタイル', url: 'https://pin.it/38WsqysaA', pinCount: 47, description: '古さを「味」として表現。テクスチャや書体の使い方を眺めるだけで雰囲気の出し方が掴めます。' },
  { id: 'retro', genre: 'レトロ', group: 'スタイル', url: 'https://pin.it/6IQBaltPU', pinCount: 43, description: 'レトロなデザイン表現まとめ。' },
  { id: 'pop', genre: 'ポップ', group: 'スタイル', url: 'https://pin.it/2amBFyE11', pinCount: 43, description: '明るく弾けるポップなデザイン。' },
  { id: 'cool', genre: 'クール', group: 'スタイル', url: 'https://pin.it/2shmIehKU', pinCount: 44, description: 'クールで洗練されたデザイン表現。' },
  { id: 'luxury', genre: '高級感', group: 'スタイル', url: 'https://pin.it/2Et1J6HS2', pinCount: 35, description: '高級感を演出するデザインの参考。' },
  { id: 'impact', genre: 'インパクト', group: 'スタイル', url: 'https://pin.it/4cYykn9kK', pinCount: 40, description: '一瞬で目を引くデザインには理由があります。構造を理解しておくと自分の制作にも活かせます。' },
  { id: 'passion', genre: '情熱的', group: 'スタイル', url: 'https://pin.it/20ykfRKCg', pinCount: 32, description: '情熱・エネルギーを表現するデザイン。' },
  { id: 'wafuu', genre: '和風', group: 'スタイル', url: 'https://pin.it/3TxBEUTqW', pinCount: 53, description: '和のテイストを活かしたデザイン表現。' },

  // ===== 業界 =====
  { id: 'saas', genre: 'IT・SaaS', group: '業界', url: 'https://pin.it/1BYFPmGlF', pinCount: 49, description: '信頼感とスタイリッシュさを両立。テック系・ビジネス系の案件に。' },
  { id: 'food', genre: '飲食', group: '業界', url: 'https://pin.it/1m8em0yxU', pinCount: 45, description: 'おいしさを伝えるデザイン。写真・フォント・余白の組み方に注目。' },
  { id: 'beauty', genre: '美容', group: '業界', url: 'https://pin.it/2ZER1i0ge', pinCount: 34, description: '高級感と親しみやすさのバランスが大事。雰囲気の作り方を学べます。' },
  { id: 'edu', genre: '教育', group: '業界', url: 'https://pin.it/7MSPjhIlC', pinCount: 47, description: 'わかりやすさと信頼感を両立するのがポイント。情報整理やレイアウトの参考に。' },
  { id: 'sports', genre: 'スポーツ', group: '業界', url: 'https://pin.it/4DZw5DM6l', pinCount: 38, description: '勢い・躍動感・熱量を表現したデザイン。' },
  { id: 'finance', genre: '金融', group: '業界', url: 'https://pin.it/5ROaFrtAc', pinCount: 42, description: '金融業界のデザイン参考。' },
  { id: 'medical', genre: '医療', group: '業界', url: 'https://pin.it/5UzcPMcro', pinCount: 46, description: '医療系デザインの参考事例。' },
  { id: 'realestate', genre: '不動産', group: '業界', url: 'https://pin.it/7nnCNwtIt', pinCount: 47, description: '不動産業界のデザイン参考。' },
  { id: 'game', genre: 'ゲーム', group: '業界', url: 'https://pin.it/3HABWDLbr', pinCount: 40, description: 'ゲーム業界のデザイン参考。' },
  { id: 'apparel', genre: 'アパレル', group: '業界', url: 'https://pin.it/6Ay63g1HE', pinCount: 37, description: 'アパレル・ファッションのデザイン。' },
  { id: 'travel', genre: '旅行', group: '業界', url: 'https://pin.it/5lI3fhlQo', pinCount: 50, description: '旅行系デザインの参考。' },
  { id: 'inbound', genre: 'インバウンド', group: '業界', url: 'https://pin.it/3eWDZxNJh', pinCount: 44, description: 'インバウンド向けデザイン。' },
  { id: 'pet', genre: 'ペット', group: '業界', url: 'https://pin.it/5X7HrczE3', pinCount: 50, description: 'ペット関連のデザイン参考。' },
  { id: 'night', genre: '夜職', group: '業界', url: 'https://pin.it/7np5pjyqz', pinCount: 45, description: 'ナイト業界のデザイン参考。' },
  { id: 'interior', genre: 'インテリア', group: '業界', url: 'https://pin.it/5M7n2WrIl', pinCount: 60, description: 'インテリア系デザインの参考。' },
  { id: 'wedding', genre: 'ウェディング', group: '業界', url: 'https://pin.it/2doIg62cn', pinCount: 50, description: 'ウェディングのデザイン参考。' },

  // ===== ターゲット =====
  { id: 'kids', genre: '子供向け', group: 'ターゲット', url: 'https://pin.it/4tLUX0VCi', pinCount: 30, description: '子供向けデザインの表現。' },
  { id: 'family', genre: 'ファミリー', group: 'ターゲット', url: 'https://pin.it/4E6VLwyy2', pinCount: 43, description: '家族向けデザインの参考。' },
  { id: 'student', genre: '学生', group: 'ターゲット', url: 'https://pin.it/3ucpcDwPs', pinCount: 51, description: '学生向けデザインの参考。' },
  { id: 'genz', genre: 'Z世代', group: 'ターゲット', url: 'https://pin.it/7qSzlqCEJ', pinCount: 40, description: 'Z世代に刺さるデザイン表現。' },
  { id: 'male', genre: '男性向け', group: 'ターゲット', url: 'https://pin.it/1MsEHMbKP', pinCount: 41, description: '男性向けデザインの参考。' },
  { id: 'female', genre: '女性', group: 'ターゲット', url: 'https://pin.it/62IVmDcE6', pinCount: 32, description: '女性向けデザインの参考。' },
  { id: 'mama', genre: 'ママ向け', group: 'ターゲット', url: 'https://pin.it/2VJY9tFTl', pinCount: 46, description: 'ママ向けデザインの参考。' },
  { id: 'senior', genre: 'シニア', group: 'ターゲット', url: 'https://pin.it/2TEnHSNa7', pinCount: 45, description: 'シニア向けデザインの参考。' },
  { id: 'senior-f', genre: 'シニア女性', group: 'ターゲット', url: 'https://pin.it/7r2l2XfCD', pinCount: 39, description: 'シニア女性向けデザインの参考。' },
  { id: 'biz', genre: 'ビジネスマン', group: 'ターゲット', url: 'https://pin.it/7JLH6Zh1E', pinCount: 53, description: 'ビジネスマン向けデザインの参考。' },

  // ===== 季節・イベント =====
  { id: 'spring', genre: '春の新生活', group: '季節・イベント', url: 'https://pin.it/6ydPJZJsG', pinCount: 50, description: '3〜4月の案件に使いやすいデザイン。「新しいスタート」の空気感。' },
  { id: 'summer', genre: '夏・爽やか', group: '季節・イベント', url: 'https://pin.it/1slat8zIp', pinCount: 47, description: '涼しさや開放感を表現したデザイン。季節感をうまく出せると仕事の幅も広がります。' },
  { id: 'matsuri', genre: '夏祭り', group: '季節・イベント', url: 'https://pin.it/eBdNGcvnM', pinCount: 45, description: '夏祭り系デザインの参考。' },
  { id: 'tsukimi', genre: 'お月見', group: '季節・イベント', url: 'https://pin.it/3fAc8NpLD', pinCount: 42, description: 'お月見系デザインの参考。' },
  { id: 'halloween', genre: 'ハロウィン', group: '季節・イベント', url: 'https://pin.it/1XcxoPgQn', pinCount: 50, description: 'ハロウィンデザインの参考。' },
  { id: 'xmas', genre: 'クリスマス', group: '季節・イベント', url: 'https://pin.it/4Y8c4gVqh', pinCount: 55, description: 'クリスマスデザインの参考。' },
  { id: 'vday', genre: 'バレンタイン', group: '季節・イベント', url: 'https://pin.it/BAztuEWOY', pinCount: 47, description: 'バレンタインデザインの参考。' },

  // ===== フォーマット =====
  { id: 'banner', genre: 'バナー', group: 'フォーマット', url: 'https://pin.it/7vuYWPlEB', pinCount: 40, description: 'クリックされるバナーには構造があります。レイアウト・配色・訴求パターンを見ておくと制作スピードと完成度が上がります。' },
  { id: 'lp', genre: 'LP', group: 'フォーマット', url: 'https://pin.it/6MChLiCSU', pinCount: 41, description: '読み進めたくなるLPにはちゃんとした構造があります。セクションの作り方やボタン配置が参考に。' },
  { id: 'richmenu', genre: 'リッチメニュー', group: 'フォーマット', url: 'https://pin.it/4oYk5RrgK', pinCount: 53, description: 'LINEリッチメニュー。ボタン配置やユーザー動線まで考えた事例。' },
  { id: 'titlelogo', genre: 'タイトルロゴ', group: 'フォーマット', url: 'https://pin.it/tYva3mWkS', pinCount: 50, description: '文字だけで世界観を作るタイトルロゴの実例。フォント選びやレイアウトの参考に。' },
  { id: 'thumbnail', genre: 'サムネイル・バナー', group: 'フォーマット', url: 'https://pin.it/2BPfWNlqW', pinCount: 55, description: 'サムネイルとバナーのデザイン参考。' },

  // ===== テーマ・世界観 =====
  { id: 'kawaii', genre: 'かわいい', group: 'テーマ・世界観', url: 'https://pin.it/5gC891m3B', pinCount: 40, description: 'デザインの表現を増やすために、見るだけでも有益です。' },
  { id: 'sweets', genre: 'スイーツ', group: 'テーマ・世界観', url: 'https://pin.it/58xAEBC3E', pinCount: 39, description: 'スイーツ表現にはコツがあります。他のジャンルにも使える表現多め。' },
  { id: 'poka', genre: 'ぽかぽか', group: 'テーマ・世界観', url: 'https://pin.it/706qMZ5kH', pinCount: 50, description: 'やさしい・あたたかい・ほっこりする雰囲気のデザイン。この空気感を出したいときに。' },
  { id: 'gamestyle', genre: 'ゲーム風', group: 'テーマ・世界観', url: 'https://pin.it/2szHzZN4Q', pinCount: 50, description: 'ゲーム風のデザイン表現。' },
  { id: 'forest', genre: '森', group: 'テーマ・世界観', url: 'https://pin.it/1kDBTEdwq', pinCount: 44, description: '森・自然をテーマにしたデザイン。' },
  { id: 'sea', genre: '海', group: 'テーマ・世界観', url: 'https://pin.it/30Nog8Ta2', pinCount: 44, description: '海をテーマにしたデザイン。' },
  { id: 'space', genre: '宇宙', group: 'テーマ・世界観', url: 'https://pin.it/2GhpEIyn1', pinCount: 46, description: '宇宙・コスモをテーマにしたデザイン。' },
];

export function getBoardsByGroup(group: string): PinBoard[] {
  return PIN_BOARDS.filter(b => b.group === group);
}

export function getAllGroups(): PinGroup[] {
  return ['スタイル', '業界', 'ターゲット', '季節・イベント', 'フォーマット', 'テーマ・世界観'];
}

export function getTotalPins(): number {
  return PIN_BOARDS.reduce((s, b) => s + b.pinCount, 0);
}
:LiFolder: ソースファイルのパス

/Users/oogushiyuuki/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/scale-base/lib/pinterest-gallery.ts
:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。
:LiAlertCircle: 注意事項

依存パッケージを忘れず追加