SaaSサイトのCTA・料金表・メインビジュアル・フッターなど、パーツやセクションごとのデザインを集めて一覧にしたサイト「Parts.」を制作・公開しました。

SaaSサイトの、と便宜上言っていますが、コンバージョンさせるための営業用WebサイトやBtoBマーケティングに則ったLPの構成になっているWebサイトを集めています。

Parts.の制作目的

普段私はWebサイトを設計するときやデザインするとき、
「料金プランの見せ方どんなのあるかな？」
「CTAでボタン4つも表示してるサイトあるかな？」
「キャッチコピーたくさん調べたいな」
という感じでいろんなサイトを見て回ることがよくありました。

導入事例ページひとつとっても、業種別や会社規模で絞り込めるサイト、記事タイトルで改善数値を見せているサイトなど、構成を比較してみるとたくさんの発見があります。

優れたデザインのWebサイトを一覧にしたサイトはたくさんあるのですが、会社概要・よくある質問・CTAなどのセクションやパーツごとのデザインが一覧で見れるサイトがほしいなと思っていたので、今回自分で作ることにしました。

あとはアート寄りな情報量少なめのブランドサイトなどより、情報量が多めのサイトを参考にしたいと思うことがあったというのもあります。

Parts.の紹介

パーツの種類

現時点では21種類のパーツ・セクションごとのページを用意しています。
SaaSのサイトでよくある構成になっているかと思います。

ヘッダー・フッターはどのサイトも見た目的にはそんなに変わらないこともありますが、何のCVボタンを置いているかやどんなサイト構造にしているかなどは参考になると思ったので入れました。

「見出し」や「ボタン」などの細かいパーツデザインを一覧にしたサイトは既にいくつかあるので含めていません。

掲載数

掲載数は現在136サイト、1,391画像です。
どんどん追加していきたいのですが、まだまだ数が足りない気がするのでぜひ良いサイトがあったら教えてほしいです。

サイトの作りについて

画像がメインのサイトなので、画像フォーマットはWebPを使い軽量化しました。（WebP対応ブラウザのみ）

またPC・タブレットでは画像の1列/2列の表示切り替えスイッチを設置し、ユーザーが自由に変更できるようにしています。

おわりに

自分がほしくて作ったサイトですが、誰かのお役にも立てたら嬉しいです。

ご意見等あればご連絡ください〜。
Parts.をよろしくどうぞ！