【商用可】Webサイトのデザインカンプ用テンプレート35選！サイトデザインを瞬殺【Photoshop・Illustrator】

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Webサイトのデザインカンプ用テンプレートを35点厳選して紹介します。

PhotoshopやIllustrator形式で作られたテンプレートばかりなので編集がすごく簡単！
文字と画像を変えるだけであっという間に高品質なサイトデザインが完成します。

ゼロからカンプを制作するのは手間がかかりますが、当記事のテンプレートを活用すればデザイナーでなくても簡単にプロ並みのデザイン制作が可能です。

時間と手間を省きたい方は必見です！

この記事の目次

Photoshop用のテンプレート（15種）

ますはPhotoshop（フォトショップ）形式のテンプレートを紹介します。
豊富なページデザインとレイアウトを収録したテンプレートを活用すると誰でもサイトデザインが可能！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,078円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

#01 Business Website Layout with Blue Accents

コーポレートサイトに向いているデザインカンプテンプレートです。
ブルーの差し色は簡単に別の色に変更できます。

ダウンロード

#02 4 Web Pages on a Smartphone Mockup

スマホ用のWebデザインカンプ4パターンセットです。
モバイル主体のサイトを考えられている方にオススメ！

ダウンロード

#03 Website Layout with Orange Accents for Desktop and Mobile

デスクトップとモバイルのウェブサイト用レイアウトテンプレートです。
オレンジのアクセントカラーがカッコいいです。

ダウンロード

#04 Website Layout with Pink Accents

ピンクのアクセントカラーがキレイなWebサイトのデザインテンプレートです。
色替えやフォントの変更も超簡単！

ダウンロード

#05 Web Site Questionnaire Layout for Health Coach

フィットネス系のサイトデザインに適したテンプレートです。
もちろん画像とテキスト内容を変更するとフィットネス以外の分野でも活用が可能です。

ダウンロード

#06 Business Website Layout with Yellow Accents

ビジネス系のサイトデザインに適したテンプレートです。
コーポレートサイトをはじめ、Webサービスのサイトデザインにも活用できます。

ダウンロード

#07 Desktop and Mobile Website Layout for a Gym and Salon

ジムやサロンに適したサイトレイアウト用のテンプレートです。
PCとモバイル端末の両パターンが収録されているのでレスポンシブサイトのデザインにピッタリ！

ダウンロード

#08 User Interface E-Commerce Website Page Layout Set

通販サイトのデザインカンプです。
汎用的なレイアウトなのでどんなECサイトにも合うでしょう。

ダウンロード

#09 Website Layout Set

画像を全面的に押し出したレイアウトのカンプテンプレートです。
フォトグラファーやイラストレーターのポートフォリオサイトのデザインに向いてそうですね。

ダウンロード

#10 Isometric Website Mockup

コーポレートサイトやサービス紹介ページ、個人サイトなど、様々な分野で汎用的に使えるWebサイト用のテンプレートです。

ダウンロード

#11 Spa and Beauty Website and User Interface Layout

スパや美容系のサイトに適したデザインのカンプパターンです。
色味をピンク系、オレンジ系、ホワイト系に変えるだけで雰囲気をガラリと変えられます。

ダウンロード

#12 Digital UI E-commerce Layout Set

ECサイトのデザインに適したテンプレートです。
組み込みとデザインを並行で行う方法もありますが、私は最初にデザインカンプを作っておく方が圧倒的に好みです。

ダウンロード

#13 Personal Website Layout with Yellow Accents

様々なサイトで使える汎用的なWebサイトテンプレートです。
個人・企業、何でも使えます。

ダウンロード

#14 Fitness Website Layout

黒を基調としたフィットネス系のウェブサイトデザインテンプレートです。
高級感があるデザインなので、商品紹介サイトでも活用できますね。

ダウンロード

#15 4 Web Pages on a Tablet Mockup

タブレット端末向けのサイトデザインテンプレート4種セットです。

ダウンロード

Illustrator用のテンプレート（20種）

次はIllustrator形式のテンプレートを紹介します。
ベクター画像なので拡縮しても劣化しないのがイラレの良い所ですよね。

Illustratorを導入しましょう

当記事の内容を実践するにはIllustratorが必須です。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。（7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

#16 One page landing website design template for medical & dentist.

ワイヤーフレームに適したテンプレートです。
Xdやfigmaではなく、イラレでワイヤーを作られる方は超オススメ！

ダウンロード

#17 Website Layout with Illustrated Icons

シンプルなWebサイトデザインのテンプレートです。
イラストも全てIllustratorで作成されているので編集が楽です。

ダウンロード

#18 Website page template. Web design

フラットデザインのWebサイト用テンプレートです。
パーツの種類が豊富なので別ページの作成が超楽ですよ。

ダウンロード

#19 Universal UI Kit for designing websites & mobile apps

サイトやアプリ、管理画面等、幅広く使えるUIキットのテンプレートです。
UIデザイナーなら持っておきたいテンプレートの一つです。

ダウンロード

#20 Homepage Website Design Layout Black and White with Yellow Accents

黒と白を基調としたデザインのテンプレートです。
サンプルではドリンクが使われていますが、他の画像でもマッチする汎用的なデザインです。

ダウンロード

#21 Flat Website Prototype Layout Kit

プロトタイプをデザインする際に便利なテンプレートです。
プロトタイプだけでなく、フラットでシンプルなサイトをデザインする際にも使えますよ。

ダウンロード

#22 Flat Website Template (Homepage, Portfolio, About, Contact)

フラットデザインに特化したWebサイト用のテンプレートです。
個人のポートフォリオサイト、企業サイト、商品サイト…何にもで使える万能テンプレート！

ダウンロード

#23 Website interface template- one page

ウェブサイトのUIでよく使う汎用的なパーツが大量に収録されたテンプレートです。
基本レイアウト＋大量の素材でデザイン作業が加速します。

ダウンロード

#24 Dark Company Website Layout with Orange Accents

ダークグレーとオレンジの差し色がかっこいいウェブサイトデザインのテンプレートです。
SF系のイラストでこういう色味のポートフォリオサイトってイカしてますよね。

ダウンロード

#25 Simple Company Website Layout

シンプルなコーポレートサイト用のデザインテンプレートです。
ワードプレスのテンプレートを使ってシンプルなサイトを作っても、後からデザインを作る事はよくあるので事前のカンプ作成は重要です。

ダウンロード

#26 Website Layout with Icons

アイコンベースのWebデザイン用テンプレートです。
文字が主体のサイトデザインにピッタリですね。

ダウンロード

#27 Agency Web Layout

クセが無く使いやすい汎用的なサイトテンプレートです。
要素のサイズや文字の位置など、デザインに慣れていないとイマイチになりがち。お手本にピッタリですよ。

ダウンロード

#28 Modern Minimalist Branding and Design Website Layout

ミニマルデザインで構成されたWebサイトデザインのパターンです。
差し色の置き方が絶妙、色替えするだけで別物となります。

ダウンロード

#29 Dating Web UI Layout

色味にパンチのあるWebサイトパターンです。
汎用的なレイアウトが収録されているので、サイトデザイン初心者にもオススメです。

ダウンロード

#30 Company Portfolio Website Layout with Graphic Icons

高品質でグラフィカルなアイコンが素敵なサイトデザインテンプレートです。
コーポレートサイト、個人サイト、何にでも合います。

ダウンロード

#31 Website Layout with Illustrated Icons

イラスト風のアイコンが可愛いシンプルなサイトデザインテンプレートです。
収録ページ数も十分！スターターキットとしては申し分ありません。

ダウンロード

#32 Web UI Layout with Smart Devices

PCとスマートデバイスのレイアウトを収録したテンプレートです。
茶色を別の色に変えると全く違ったデザインに様変わりしますよ。

ダウンロード

#33 Website Layout with Icons

様々なアイコンがあしらわれたサイトデザインのパターンです。

ダウンロード

#34 UI Website Wireframe Layout Kit

ワイヤーフレームに特化したテンプレートですが、こういうデザインのサイトデザインもアリですよね。
豊富なレイアウトパターンが収録されているのでUIデザイナーなら持っておきたいテンプレートの一つです。

ダウンロード

#35 Aesthetic Email Newsletter Layout

サイト本体ではなく、ニュースレターのデザインに特化したデザインテンプレートです。
ニュースレターのデザインを改善してコンバージョン率を高めたい方にオススメ！

ダウンロード

おわりに

以上、Webサイトのデザインに特化したテンプレート35選でした。
PhotoshopのPSD形式、IllustratorのAI形式、お好きな形式のテンプレートをご活用ください。

Webサイトのカンプ制作をプロに依頼すると数万～数十万円の費用がかかります。

AdobeStockなら数百円でプロ並みのデザインを手に入れられます。
しかもレイヤー分けされた編集しやすいテンプレートばかり！
PhotoshopとIllustratorがあれば編集可能なPSDとAI形式のテンプレートなので汎用性抜群ですよ。
デザイナーでなくても超簡単にデザイン編集ができるので属人的になりません。

テンプレートを上手く活用して制作を加速させましょう！

ではまた！

ワンランク上のテンプレート集