Webサイトのデザインカンプ用テンプレートを35点厳選して紹介します。
PhotoshopやIllustrator形式で作られたテンプレートばかりなので編集がすごく簡単!
文字と画像を変えるだけであっという間に高品質なサイトデザインが完成します。
ゼロからカンプを制作するのは手間がかかりますが、当記事のテンプレートを活用すればデザイナーでなくても簡単にプロ並みのデザイン制作が可能です。
時間と手間を省きたい方は必見です!
この記事の目次
ますはPhotoshop(フォトショップ)形式のテンプレートを紹介します。
豊富なページデザインとレイアウトを収録したテンプレートを活用すると誰でもサイトデザインが可能!
Photoshopを導入しましょう
当記事の内容を実践するにはPhotoshop(フォトショップ)が必須です。
未導入の方はフォトプラン公式サイトから入手可能。(月額は最安の1,180円、7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
未導入の方はフォトプラン公式サイトから入手可能。(月額は最安の1,180円、7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
#01 Business Website Layout with Blue Accents
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_10.jpg)
#02 4 Web Pages on a Smartphone Mockup
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_08.jpg)
#03 Website Layout with Orange Accents for Desktop and Mobile
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_03.jpg)
#04 Website Layout with Pink Accents
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_09.jpg)
#05 Web Site Questionnaire Layout for Health Coach
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_32.jpg)
#06 Business Website Layout with Yellow Accents
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_11.jpg)
#07 Desktop and Mobile Website Layout for a Gym and Salon
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_16.jpg)
#08 User Interface E-Commerce Website Page Layout Set
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_17.jpg)
#09 Website Layout Set
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_21.jpg)
#10 Isometric Website Mockup
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_22.jpg)
#11 Spa and Beauty Website and User Interface Layout
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_23.jpg)
#12 Digital UI E-commerce Layout Set
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_29.jpg)
#13 Personal Website Layout with Yellow Accents
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_30.jpg)
#14 Fitness Website Layout
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_31.jpg)
#15 4 Web Pages on a Tablet Mockup
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_33.jpg)
次はIllustrator形式のテンプレートを紹介します。
ベクター画像なので拡縮しても劣化しないのがイラレの良い所ですよね。
Illustratorを導入しましょう
当記事の内容を実践するにはIllustratorが必須です。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。(7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。(7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
#16 One page landing website design template for medical & dentist.
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_36.jpg)
#17 Website Layout with Illustrated Icons
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_19.jpg)
#18 Website page template. Web design
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_02.jpg)
#19 Universal UI Kit for designing websites & mobile apps
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_01.jpg)
#20 Homepage Website Design Layout Black and White with Yellow Accents
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_35.jpg)
#21 Flat Website Prototype Layout Kit
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_04.jpg)
#22 Flat Website Template (Homepage, Portfolio, About, Contact)
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_06.jpg)
#23 Website interface template- one page
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_07.jpg)
#24 Dark Company Website Layout with Orange Accents
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_12.jpg)
#25 Simple Company Website Layout
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_13.jpg)
#26 Website Layout with Icons
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_14.jpg)
#27 Agency Web Layout
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_15.jpg)
#28 Modern Minimalist Branding and Design Website Layout
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_18.jpg)
#29 Dating Web UI Layout
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_20.jpg)
#30 Company Portfolio Website Layout with Graphic Icons
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_24.jpg)
#31 Website Layout with Illustrated Icons
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_25.jpg)
#32 Web UI Layout with Smart Devices
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_26.jpg)
#33 Website Layout with Icons
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_27.jpg)
#34 UI Website Wireframe Layout Kit
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_28.jpg)
ワイヤーフレームに特化したテンプレートですが、こういうデザインのサイトデザインもアリですよね。
豊富なレイアウトパターンが収録されているのでUIデザイナーなら持っておきたいテンプレートの一つです。
ダウンロード
豊富なレイアウトパターンが収録されているのでUIデザイナーなら持っておきたいテンプレートの一つです。
ダウンロード
#35 Aesthetic Email Newsletter Layout
![](https://sdesignlabo.com/blog/wp-content/uploads/2021/06/website-template_34.jpg)
以上、Webサイトのデザインに特化したテンプレート35選でした。
PhotoshopのPSD形式、IllustratorのAI形式、お好きな形式のテンプレートをご活用ください。
Webサイトのカンプ制作をプロに依頼すると数万~数十万円の費用がかかります。
しかもレイヤー分けされた編集しやすいテンプレートばかり!
PhotoshopとIllustratorがあれば編集可能なPSDとAI形式のテンプレートなので汎用性抜群ですよ。
デザイナーでなくても超簡単にデザイン編集ができるので属人的になりません。
テンプレートを上手く活用して制作を加速させましょう!
ではまた!
ワンランク上のテンプレート集