サイト・デザイン　デザインギャラリー

デザインギャラリーの使い方｜Webデザインの見本をコードごと持ち帰る

カツプロ編集部　2026年10月7日

IN SHORTこの記事のまとめ

Web デザインの見本集です。見本はすべて ALcuesto が作ったもので、持ち帰ったコードは自分のサイトやお客さんの案件に使えます。ページ丸ごとの見本のほかに、区切りごとの部品（パーツ）もあります。
一覧は誰でも見られます。新しい方から3分の1は「有料会員限定」で、ほかの3分の2は誰でも動く実物まで見られます。
持ち帰り（ダウンロード・コピー）は無料会員から。無料会員は3分の2を何件でも、有料会員（Tier 1）は全部を何件でも持ち帰れます。

この記事のサービス

デザインギャラリー

自作の Web デザインの見本集。コードごと持ち帰って使えます。

見るのは誰でも
無料会員：3分の2を何件でも
有料：全部

デザインギャラリーを開く

これで何ができるか

業種・系統・ページの形・色で Web デザインの見本を探し、気に入ったものをコードごと持ち帰れます。見本はすべて ALcuesto が作ったものなので、持ち帰ったコードを自分のサイトやお客さんの案件にそのまま使えます。2026年10月7日の時点で、ページ丸ごとの見本が200件、区切りごとの部品（パーツ）が210件あります。

使える人：見るのは誰でも（登録なし）。持ち帰りは無料会員から（見本とパーツの3分の2を何件でも）。有料会員（Tier 1）は、有料会員限定のものも含めて全部を持ち帰れます。

はじめ方

まず動画で流れを見てください（音は出ません。前半はログインしていない画面、後半はログインした有料会員の画面です）。

音は出ません。繰り返し流れます。

一覧で探す：上の欄で、言葉・業種・系統（カッコイイ系・可愛い系・綺麗系）・ページの形・色を選ぶと、すぐに絞り込まれます。
無料で使えるものだけにする：新しい見本の3分の1には「有料会員限定」の札が付いています。「無料で使えるものだけ」にチェックを入れると、札の無い見本だけになります。
有料会員限定の見本：札の付いた見本は、有料会員でないと、上の画像と案内だけが出ます。
動く実物を見る：札の無い見本は、誰でも動く実物と設計メモ（色・文字・構成・動きの決まり）を見られます。「PC」「タブレット」「スマホ」で幅を変えて確かめられます。
ログインして持ち帰る：右上の「ログイン」を押すと、カツプロのログインでそのまま入れます。右の「ダウンロード」で zip（設計メモと利用条件つき）、「コピー」で HTML・CSS・JavaScript を持ち帰れます。
有料会員なら全部：有料会員（Tier 1）でログインすると、有料会員限定の見本も動く実物を見て持ち帰れます。
パーツも同じ決まり：上の「パーツ」では、メインビジュアル・料金・よくある質問など、区切りごとの部品を選べます。持ち帰りの決まりは見本と同じです。