creatersnest102

スマホ用サイトも簡単に作れる!レスポンシブの無料テンプレート30選


スマートフォンやタブレット端末の普及により、
Webサイトも様々なデバイスで閲覧することが可能になってきました。

そのため、サイトを構築するときには各デバイスに気を配りながら
デザインしていく必要があります。
しかし1からデザインを構築すると手間と時間が掛かってしまい、
サイトの公開までにとても時間がかかります。

そこで、今回は無料のレスポンシブテンプレートを紹介していきます。
無料で使えて最低限必要なページが揃っているので、導入後にすぐサイトを公開できます。

ケーキショップ向け tp_cake3
temp_cakeshop

http://www.template-party.com/temp_responsive.html#container

ケーキショップ向けのテンプレートです。
1カラム、2カラムの切り替えが可能になっています。

ケーキ屋さん向けにふさわしい可愛らしい画像をあしらったデザインになっています。

シンプル系 tp_simple8
temp_simple


http://www.template-party.com/temp_responsive.html#container

余計な機能を省いた洗練されたデザインのテンプレートです。
シンプルなデザインなので個人向けに最適です。

またビジネス利用でも強調したい事を目立たせることができるので、利便性に優れています。

ビジネス向け tp_biz29
temp_biginess

http://www.template-party.com/temp_responsive.html#container

ビジネス向けのテンプレートです。
会社概要や採用情報、取引先情報などを見やすくカスタマイズできるデザインになっています。

また自社製品などを紹介する製品情報も載せることができるので、拡張性が高くなっています。

飲食店・カフェ向け tp_cafe11
temp_cafe

http://www.template-party.com/temp_responsive.html#container

飲食店やカフェ向けのテンプレートです。
ランチやディナー、ドリンクメニューへのページへジャンプするのに
わかりやすいアイコンが利用されており、オシャレなデザインになっています。

ビジネスホテル向け tp_hotel4temp_hotel

http://www.template-party.com/temp_responsive.html#container

ビジネスホテルに特化したデザインテンプレートです。
ホテルの概要や宿泊プランなどがすでに設定されていますので、導入後すぐに利用できます。

また予約状況も確認できるようになっていますので、サイト利用者にも見やすいデザインになっています。

 カフィネット テンプレート56

temp_56

テンプレート56

http://japanism.info/free-template11.html

コンテンツ部分を1カラムから3カラムまで変更できます。
また、提供サイトからヘッダー画像を変更することもできますし、自分で用意した画像を設定することもできます。

メイン画像のサイズは、幅 2000px 高さ 800px にする必要があります。

カフィネット テンプレート58

temp_51

テンプレート58

http://japanism.info/free-template13.html

白黒のシンプルなデザインで、メイン画像がスライドショーするテンプレートです。
1カラムから3カラムまで変更することができます。

カフィネット テンプレート73
temp_73

http://japanism.info/free-template19.html

トップページがスライドショーするテンプレートです。
ページ画像は自分で作成したものや撮った写真に変更もできます。

デフォルトでは4ブロックになっていますが、増やすことも減らすこともできます。

レスポンシブテンプレート No.42
thumb_m042

http://f-tpl.com/tpl_042/

ブライダル系やジュエリー、美容系向けのテンプレートです。
スタイリッシュなイメージで見やすいサイトを構築できます。

レスポンシブテンプレート No.59
thumb_m059

http://f-tpl.com/tpl_059/

不動産や医療系サイト向けのテンプレートです。
会社の取り組みやサービス概要などが見やすく設定されていますので、
サイト利用者にも見やすいデザインになっています。

レスポンシブテンプレート No.74
thumb_m074

http://f-tpl.com/tpl_074/

汎用性の高いシンプルなテンプレートです。
企業向けサイト、コーポレートサイトに最適なデザインになっています。

企業向けのサイトに必要なページが一通り揃っているので、すぐに導入することができます。

 レスポンシブ(3段階)デザインA
temp_A

http://saetl.net/responsive_a.html

トップページにYoutubeの動画を挿入できるテンプレートです。
3カラムのデザインでページ下部には写真などの画像を多く挿入することができます。

Exemplary
temp_Exemplary

http://html5layouts.com/

トップ画面一面に画像を設定できるテンプレートです。
1カラムの縦スクロールでシンプルにデザインされているので使い勝手がよく、
見やすいサイトを構築できます。

Big Picture
temp_bigpict

http://html5up.net/

主に背景写真を掲載したいときに便利なテンプレートです。
TwitterやFacebookへのリンクも設定されているので、
SNSと連携させて利用するのに便利です。

Brushed
temp_brushed

http://www.alessioatzeni.com/blog/brushed-template/

ページトップに大きな画像を挿入できる企業向けのテンプレートです。
トップ画像は左右にスライドさせることができ、写真や動画も掲載することができます。

グーグルマップユーザ投稿型テンプレート
temp_google

http://majiten.com/?p=999

グーグルマップを利用してユーザーにコンテンツを作ってもらうタイプのテンプレートです。
ユーザーが登録することで自動でコンテンツが増えていきますので
自然と充実したサイトになっていきます。

ZURB
temp_html

http://zurb.com/playground/responsive-email-templates

HTMLメール向けのテンプレートです。
HTMLメールもスマホやタブレット端末で使用する機会が増えてきたので便利です。

The Goldilocks Approach
temp_goldilocks

http://goldilocksapproach.com/

非常にシンプルなテンプレートです。
自分好みにカスタマイズできるので、使い勝手がよくなっています。

Spectral
temp_spectral

http://html5up.net/

右上にメニューバーを配置して、背景には大きな画像を設置できるテンプレートです。
縦スクロールタイプでTwitterやインスタグラムにも連携できます。

Overflow
temp_overflow

http://html5up.net/

ポートフォリオ向けのテンプレートです。
旅の記録やいろいろな写真を載せていけるオシャレなデザインになっています。

 DOCTOR
temp_doctor

http://shapebootstrap.net/item/doctor-responsive-html-template/

医療向けのテンプレートです。
見やすいデザインで、内科、外科といった医療アイコンも見やすいので
病院に合わせたサイトを構築できます。

BARRIER
temp_barrier

http://shapebootstrap.net/item/barrier-a-business-template/

企業向けのテンプレートです。
ホームページにスライダーを採用しており、スタイリッシュなデザインになっています。

BOSS
temp_boss

http://shapebootstrap.net/item/boss-responsive-coming-soon-template/

トップに日付と時間が設定できるテンプレートです。
シンプルな構造ですが、デザインが数種類あるので
自分に合ったデザインを選んでカスタマイズできます。

Walk & Ride
temp_walk

http://tympanus.net/codrops/2014/09/26/freebie-walk-ride-one-page-website-template/

モバイル端末に特化しているテンプレートです。
必要な昨日だけを備えたシンプルなデザインです。

Forkio
temp_forkio

http://tympanus.net/codrops/2015/03/12/freebie-forkio-one-page-website-template/

Bootstrapテンプレートを採用しているテンプレートです。
縦スクロール型のシンプルなデザインになっており、Twitter、Facebookに連携できるようになっています。

Boxify
temp_boxify

http://tympanus.net/codrops/2015/01/27/freebie-boxify-one-page-website-template/

右上にメニューを配置したシングルページのテンプレートです。
動画も挿入でき、ページ下部には画像も挿入できます。

Halcyon Days
temp_halcyon

http://tympanus.net/codrops/2014/07/14/freebie-halcyon-days-one-page-website-template/

シングルページのシンプルなテンプレートです。
メニューにエフェクト効果のあるポートフォリオスペースがあるので、旅の記録などに向いています。

Onesie
temp_onesie

https://graphpaperpress.com/themes/onesie/

ポートフォリオ用のテンプレートです。
ジャンルごとに画像を掲載できるので、大量の画像もわかりやすく整理できます。

Retouch
temp_retouch

https://graphpaperpress.com/themes/retouch/

旅の記録を整理できるテンプレートです。
写真をタグやカテゴリごとに掲載したり、旅行先ごとにまとめたりと使い勝手がよくなっています。

Snaps
temp_snaps

https://graphpaperpress.com/themes/snaps/

スナップ写真をジャンル別に掲載できるテンプレートです。
アーカイブページもあり過去の写真も振り返ることができます。

 まとめ

今回は無料で使用できるレスポンシブテンプレートを紹介しました。

レスポンシブテンプレートは主にHTML5+CSS3で作られています。
テンプレートを1から作るとなると、HTMLやCSSの知識が必要となりますが、
今回紹介したようなテンプレートを利用すればHTML等が苦手という方でも簡単にWebサイトを作ることができます。

無料のテンプレートは海外のものが多いですが、最近では日本のサイトでも提供されています。
作りたいWebサイトに合ったデザインを探してオシャレなサイトを是非構築してください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Articlephotoshopで3D素材を作る!簡単な作成方法とチュートリアル30選