毎日更新のWebデザイン参考サイト集 — 2026.11.14の1選

今日のピック

Trend / VTuber

VTuber・配信者のWebサイト

事務所公式、周年特設、ライブ・イベントLP。キャラクターIPを扱うWeb制作の需要が伸びている領域です。

すべて見る（37）→

Trend / Overseas

海外のWebデザイン

Awwwards などで評価された海外のコーポレート・SaaS・スタジオサイトを日本語で解説。

すべて見る（62）→

New / Slides

資料・スライドのデザイン

会社紹介資料・決算説明資料・登壇資料を、公開PDFから実測。同じ型で自分の資料を作れるデザイン分析MDつき。

すべて見る（98）→
株式会社10X「株式会社10X - Company Deck」の表紙会社紹介資料

株式会社10X - Company Deck

日本株式会社10Xリテールテック

Addy Osmani (Google)「The Cost Of JavaScript in 2023」の表紙登壇資料

The Cost Of JavaScript in 2023

アメリカ合衆国Addy Osmani (Google)開発

味の素「味の素グループ ASVレポート（統合報告書）2025」の表紙統合報告書

味の素グループ ASVレポート（統合報告書）2025

日本味の素食品

株式会社Algomatic「Algomatic | 会社紹介資料」の表紙会社紹介資料

Algomatic | 会社紹介資料

日本株式会社AlgomaticAI

Alice Bartlett (Financial Times)「The Journey of a Byline」の表紙登壇資料

The Journey of a Byline

イギリスAlice Bartlett (Financial Times)プロダクト

Andy Bell（Set Studio）「Be the browser’s mentor, not its micromanager」の表紙登壇資料

Be the browser’s mentor, not its micromanager

イギリスAndy Bell（Set Studio）開発

Andy Polaine「Navigating the Design Leadership Dip」の表紙登壇資料

Navigating the Design Leadership Dip

ドイツAndy Polaineデザイン

ANYCOLOR「2026年4月期 通期決算説明資料」の表紙決算説明資料

2026年4月期 通期決算説明資料

日本ANYCOLORVTuber・エンタメ

AstroX株式会社「AstroX 採用資料」の表紙採用資料

AstroX 採用資料

日本AstroX株式会社宇宙

Atlassian「Investor Forum '26」の表紙投資家向け資料

Investor Forum '26

オーストラリアAtlassianSaaS / コラボレーション

Atomico「State of European Tech 2025 — Slush keynote」の表紙会社紹介資料

State of European Tech 2025 — Slush keynote

イギリスAtomicoVC / リサーチ

株式会社アトラエ「株式会社アトラエ 会社紹介資料 / Join us」の表紙採用資料

株式会社アトラエ 会社紹介資料 / Join us

日本株式会社アトラエ人材 / HRテック

これまでのピック

すべて見る（184）→

Reproduction Markdown

参考を、
“作れる”に変える。

すべての掲載サイトに、デザイントークン・セクション構成・モーションの実装方法・AI実装プロンプトをまとめたデザイン分析MDを用意しています。 Claude Code / Cursor / v0 にそのまま渡せます。

  • デザイン分析MDが無制限

    無料は3件まで。Pro なら毎日増える全サイト分を、好きなだけ。

  • まとめてダウンロード

    カテゴリやトレンド単位で、デザイン分析MDを1ファイルにまとめて取得。

  • フルページで見られる

    ファーストビューだけでなく、フッターまでページ全体を確認できる。

  • ホログラムのカード

    メンバーカードが、傾けると色が流れる Pro 仕様に。

Pro を見る — ¥500/月デザイン分析MDは何がすごい？（無料で3件まで）
gokokumai.katapick.md
1---
2title: "石川商店 デザイン分析書"
3source: https://www.gokokumai.co.jp/
4katapick: https://katapick.com/sites/gokokumai
5category: EC
6region: 国内 (JP)
7tags: [ライト, 写真主体, イラスト, カルーセル, 角丸, ロングページ]
8launched: 2026-02
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# 石川商店 — デザイン分析書
16 
17> お米屋さんの通販なのに、読みものみたいに眺められる。米と雑穀の専門店・石川商店のオンラインストアは、生成りの紙の地と手描きの農家の線画で、商品一覧とレシピ・読みものを同じ温度でつないでいる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22 
23## 1. 見どころ
24- FV右に季節特集のサムネ付きリストを常設。写真を眺めるついでに、今月の売り場へ入れる
25- 生成りの地に、手描きの線画をぽつぽつ。食品ECの硬さを、田んぼの気配でやわらげる
26- ロゴの面とカートボタンだけを金色に。買う場所の目印が、稲穂の色でまとまっている
27 
28## 2. カラー
29 
30| 変数 | HEX | 名前 | 役割 |
31| --- | --- | --- | --- |
32| `--text` | `#3b312b` | Roasted Brown | テキスト / 告知バー |
33| `--surface` | `#d3a83c` | Golden Grain | ロゴ面 / カート / アクセント |
34| `--bg` | `#f0eee9` | Rice Paper | セクション背景 |
35| `--bg-4` | `#ffffff` | White | 背景 / カード |
36| `--text-5` | `#696159` | Husk Gray | サブテキスト |
37 
38```css
39:root {
40  --text: #3b312b; /* テキスト / 告知バー */
41  --surface: #d3a83c; /* ロゴ面 / カート / アクセント */
42  --bg: #f0eee9; /* セクション背景 */
43  --bg-4: #ffffff; /* 背景 / カード */
44  --text-5: #696159; /* サブテキスト */
45}
46```
47 
48### 実際の文字色 × 背景色のコントラスト（WCAG 2.2）
49 
50| 文字色 | 背景色 | 比 | 判定 |
51| --- | --- | --- | --- |
52| `#3b312b` | `#ffffff` | 12.65:1 | AAA |
53| `#696159` | `#ffffff` | 6.08:1 | AA |
54| `#3d76b4` | `#ffffff` | 4.72:1 | AA |
55| `#39322c` | `#ffffff` | 12.6:1 | AAA |
56| `#ffffff` | `#3b312b` | 12.65:1 | AAA |
57 
58> 主要な組み合わせはすべて本文サイズの基準（4.5:1）を満たしています。
59 
60## 3. タイポグラフィ

デイリーアーカイブ

  1. No.0552026.11.14石川商店
  2. No.0542026.11.13ワンス・アポン・ア・塊魂 / Palazzo Sogni / 太秦映画村 UZUMASA KYOTO VILLAGE
  3. No.0532026.11.12Elva / TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』 / 株式会社トヨックス 採用サイト
  4. No.0522026.11.11『ぽこ あ ポケモン』公式サイト / 白骨温泉 / The Pop-Up Hotel
  5. No.0512026.11.102xA Studio / 株式会社ADDICT / TVアニメ『キルアオ』
  6. No.0502026.11.09KAMITSUBAKI WARS 2026 神椿横浜決戦 / ある日、森のなか。［長野県信濃町］ / Wild AG
  7. No.0492026.11.08GUNDAM Official Website / mont 野沢温泉 / Vander Urbani Resort
アーカイブをすべて見る →

よくある質問

Katapickとはどんなサイトですか？

Katapick（カタピック）は、Webデザインの参考サイトを毎日3件ずつ厳選して紹介するギャラリーです。コーポレートサイト（HP）、LP、採用サイト、VTuber公式サイト、海外サイトなどを対象に、配色・フォント・レイアウト構成・アニメーション手法を解説しています。

古いサイトは掲載されていますか？

いいえ。公開またはリニューアルから18か月以内のサイトだけを掲載し、期間を過ぎたサイトやリンク切れのサイトは自動的に非掲載になります。常に“いま”のデザインだけを参考にできます。

デザイン分析MDとは何ですか？

各サイトのデザイントークン（カラー・フォント）、セクション構成、モーションの実装方法、Claude Code や Cursor などのAIコーディングツールにそのまま渡せる実装プロンプトをまとめたMarkdownファイルです。無料で3件までダウンロードでき、Proプランでは無制限にダウンロードできます。

VTuberのWebサイト制作の参考になるサイトはありますか？

あります。Katapickでは VTuber事務所の公式サイト、周年特設サイト、ライブ・イベントLPを「VTuber・配信者」トレンドとして継続的に掲載しています。/trends/vtuber から一覧できます。

海外のWebデザイン参考サイトも見られますか？

はい。Awwwards などで評価された海外のコーポレートサイト、SaaSのLP、スタジオのポートフォリオを、日本語の解説付きで掲載しています。/trends/overseas から一覧できます。