- 更新日: 2020年11月01日
- 公開日: 2018年12月13日
【スマホやレスポンシブにも対応】高品質なHTMLテンプレート30選
WordPressを使ったブログサイトや Ruby on Rails など使ったアプリケーション開発を考えた時、土台となる「テンプレート」迷いますよね。
今回は、目的別にテンプレートをご紹介し、お気に入りのテンプレートが見つかるようお手伝いをさせて頂きますね。
【スマホやレスポンシブにも対応】高品質なHTMLテンプレート33選（無料版あり）
テンプレートとはそもそも何か
はじめて Webサイトを立ち上げる方用に テンプレートについて少しご紹介します。
私達が普段見ている Webページは、見えない線によって区切られています。上図に示すように header、body 、sidebar、 footer といった具合。この境界線をベースに、各スペースの幅や高さ、掲載する画像の大きさ、文字の大きさなどを決めて Webページが出来上がっていきます。こうした一連の作業、自分でやってもいいのですが、ゼロベースからはじめるより参考となるデザインを元に組み上げていく方が効率的です。そんな訳で「テンプレート」が存在するのですね。
今回ご紹介するテンプレートは、
- 汎用
- WordPress用
の 2種類になります。汎用は そのままサーバーにアップしても大丈夫ですし、 HTMLコードを編集して WordPress用や Ruby on Rails用、 Django用などにカスタマイズすることができます。
WordPress用は WordPressのみの利用で、実際に使ってみると分かるのですが、DEMO画面と自分のテンプレート画面はかけ離れたモノになります。これはテンプレート・インストール後にウィジェットやテーマ編集、もしくは投稿画面のテーマ選択から設定を合わせる必要があるんですね。一気に DEMO画面のようなデザインにならないことを事前に知っておきましょう。
テンプレートのメリット・デメリット
メリット
- 開発時間の短縮
- 自分のスキル以上のデザイン性
何も考えずに HTML と CSS、 JavaScript をセットするだけで Web ページができる点が一番のメリットでしょう。本稿で紹介させて頂くテンプレートも、ファイルをダウンロードし、 index.html をブラウザで開けばテンプレートの様子を確認することができます。 細かいパーツの配置や全体のレイアウト調整がいらないので本当に助かりますよね。
また スライド画像やハンバーガーメニューなども多くのテンプレートに含まれていますので、いちいちコードを書かなくてもOK。例え 3,000円ぐらいのテンプレートでも自分が作成する時間で換算すると 「買い」 ですね。
デメリット
- 変更する場合はコードを解読する必要がある
- 最先端のデザインにはなりにくい
- SEO
- メンテナンスが必要になった時
- ライセンス
概ねテンプレートのデザインは気に入ったけど、チョットここを変えたい、と思ってもスマホでレイアウトが崩れたりして思うようにいかないのが大抵。手間を惜しむことなく HTML、 CSS、 JavaScript を読解する必要がありますね。
またお洒落と思っても Google 製品の WebページやApple に比べると....。HTMLや CSS、JavaScript ができれば最先端の Webデザイン要素を使うこともできますが、まずは基礎スキルが必須ですよね。 後はテンプレートを使っても Google の構造化については対応不可。自分で各ページに構造化データをセットする必要があるでしょう。
それではこれから実際にダウンロードして試してみたテンプレートをご紹介していきます。
ブログ用のテンプレート
Clean Blog
画像出典：Start Boostrap
<< 概要 >>
Boostrapを採用したテンプレートとして人気の Clean Bog。GitHub上でもテンプレートとしてはトップクラスのスター数で、実は私も現在開発中の Django用テンプレートに採用しています。シンプルな HTMLコードに加えて Boostrap を主徴した スタイルコードは、HTML & CSS 初心者でも使いやすいです。WordPress や Ruby on Railsなど様々なプラットフォームに適応しやすいと思いますね。
<< 仕様 >>
- Boostrapのバージョン／ 4
- ライセンス／ MIT license
Scribbler
画像出典：Codrops
<< 概要 >>
こちらはプログラムの紹介を考えている方にとって参考となるデザインのテンプレートです。トップページのコードアニメーションもおもしろいですが、記事詳細（doc.html）のレイアウトもシンプルで読みやすいです。技術資料を紹介するページのテンプレートは”堅め”なイメージのものが多いですが、こちらは優しいデザインで個人的には気に入りました。
<< 仕様 >>
- Boostrapのバージョン／ Boostrapなし
- ライセンス／ 不明
Hugo Nuo
画像出典：GitHub／Hugo Nuo
<< 概要 >>
世界最速で Webページを作れるという Hugoフレームワーク用のテンプレート。「Hugo」はじめて聞かれた方も多いかもしれませんが、VPSサーバー上では簡単にブログサイトが作れちゃいます。
<< 仕様 >>
- Boostrapのバージョン／ 4
- ライセンス／ MIT License
Blanca
画像出典：Colorlib／ Blanca
<< 概要 >>
大きいサムネイルが印象的なブログ用テンプレート。コメント欄やページネーション、コンタクトページも用意されていますのでコーポレートサイトにも使えそうです。コードをカスタマイズして WordPress のテンプレートとしても良さそうですね。ページ下部のインスタグラム画像を並べているレイアウトもユニークでいいと思いました。
<< 仕様 >>
- Boostrapのバージョン／ 4
- ライセンス／ CC BY 3.0
Suppablog
画像出典：Colorlib／ Suppablog
<< 概要 >>
シンプルなデザインの中にも特徴的で効率的なメニューバーやタイトルマウスホバー時のぼかしアクションなどおもしろい機能が搭載されています。SNSやYouTubeとの連携もデザイン的に目立ちますので、ブログ以外に多チャンネルで運営されている方にピッタリなテンプレートと思いました。ただし、フッターのデザインがシンプルすぎるかもしれません。
<< 仕様 >>
- Boostrapのバージョン／ Boostrap なし、carouFredSel使用
- ライセンス／ CC BY 3.0
Road Trip
画像出典：TEMPLATED／ Road Trip
<< 概要 >>
シンプルなパララックスページのテンプレートです。イベントや新商品などの単発的なランディングページとして使えそう。HTMLコードの画像と文字を変えるだけでも自分用のページとして雰囲気出ると思います。
<< 仕様 >>
- Boostrapのバージョン／ Boostrapなし、skel.jsでレスポンシブ
- ライセンス／ CC BY 3.0
Tranquilpeak
<< 概要 >>
こちらは Hexo という Node.js（JavaScript）上で動くブログフレームワーク用のテンプレート。プロフィールページや検索画面など同一ページ内で処理していくあたりが参考になると思います。記事詳細画面にいくとすごくシンプルなデザインなので、パーソナル系やテクニカル系のブログにむいてそうです。
<< 仕様 >>
- Boostrapのバージョン／ Boostrapなし
- ライセンス／ GNU General Public License v3.0
Hexo Theme Huxblog
<< 概要 >>
こちらも Hexo用のテンプレートでファーストビューが印象的。記事詳細画面等ではサイドバーなしのデザインで、すっきりした感じ。タイトルと日付、ディスクリプションなどの文字間隔が美しく、参考になるテンプレートと思います。
<< 仕様 >>
- Boostrapのバージョン／ 3
- ライセンス／ 不明
コーポレートスタイルのテンプレート
Sydney
画像出典：ATHEMES／ Sydney
<< 概要 >>
シングルページ・スタイルで企業サイトに必要なコンテンツを備えたテンプレート。他にも似たテンプレートありますが、こちらはゴーストボタンにカラム要素、jQueryによるスライドアクションなど視覚的に楽しめるデザインが特徴的。トップページに対してブログページはシンプルでモダンなデザインでいいですね。
<< 仕様 >>
- Boostrapのバージョン／ 3
- ライセンス／ フリー
Urban
画像出典：TEMPLATED／ Urban
<< 概要 >>
こちらはパーソナルイメージの強いWebデザインのテンプレート。人の画像を製品に変えたりすると商品紹介ページとして使えそうですね。レスポンシブには Boostrapでなく skel.js を使ってデザイン。
<< 仕様 >>
- Boostrapのバージョン／ Boostrapなし、skel.jsでレスポンシブ
- ライセンス／ CC BY 3.0
Business Casual
画像出典：Business Casual
<< 概要 >>
こちらはショップ紹介向きのテンプレートで、背景と画像と文字がラップしている点がオシャレ。トップページと商品ページ、Aboutページと 3種類のページデザインを参考にすることができます。
<< 仕様 >>
- Boostrapのバージョン／ 4
- ライセンス／ MIT License
BizPage
<< 概要 >>
ビジネスページの王道的なデザインのテンプレート。PORTFOLIOページのタブデザインやTEAMページのマウスオーバーなどオシャレです。 シングルページ構成で企業や商品ページのトップ・デザインに使えそうですね。文字や画像を変えるだけで使えそうなので、HTML初心者にはピッタリな感じ。
<< 仕様 >>
- Boostrapのバージョン／ 4
- ライセンス／ 商用可、ただしライセンス購入無き場合はバックリンク必要（[詳細](https://bootstrapmade.com/license/）
Multi
画像出典：BOOSTRAPMADE
<< 概要 >>
こちらは企業ページのテンプレートに加えて、ブログページや商品ページなど複数の HTMLファイルから構成。WordPress などの CMS にセットするとブログと企業ページを連携して使えますね。文字や画像のアニメーションが特徴的なテンプレです。
<< 仕様 >>
- Boostrapのバージョン／ 3
- ライセンス／ 商用可、ただしライセンス購入無き場合はバックリンク必要（[詳細](https://bootstrapmade.com/license/）
Business Frontpage
<< 概要 >>
こちらはレスポンシブ・デザインだけを装備したシンプルな企業向けサイトのテンプレート。これをベースに商品紹介やスタッフ紹介、地図などお好みのコンテンツを追加すると思い通りのデザインに仕上がるのではないでしょうか？他のテンプレートとミックスして使いたいですね。
<< 仕様 >>
- Boostrapのバージョン／ 4
- ライセンス／ MIT
ランディングページむきのテンプレート
Land.io
画像出典：Codrops
<< 概要 >>
こちらのテンプレートは、本番でもすぐに使えそうなぐらいトップデザインからフッターデザインまで揃っていいと思いました。パララックス効果に加えて、各コンテンツ毎に上品なアニメーションが加えられて、ランディングページを考えている方にとっては大変参考になるテンプレートと思います。
<< 仕様 >>
- Boostrapのバージョン／ 4
- ライセンス／ フリー、ただしテンプレートの作者表記必要
Agency
<< 概要 >>
一見すると普通のランディングページに思えますが、PORTFOLIO 画像のポップアップ表示や Aboutのタイムラインデザインなど参考になる点が多々あります。ポートフォリオサイトやコーポレートサイトにも使えそうですね。個人的には タイムライン・レイアウトと WordPressもしく Djangoを融合させると、時系列のブログテンプレートになっておもしろそうと思いました。
<< 仕様 >>
- Boostrapのバージョン／ 4
- ライセンス／ MIT
Burger
<< 概要 >>
飲食店やコレクション系など画像主体のランディングページにもってこいの WordPress用ランディングページのテンプレート。このテンプレートのおもしろいところは、 WordPress用といいながら Burger サイトの HTMLコードを新規ファイルにコピペしてブラウザで開くと、 DEMO画面とほぼ同じページができちゃいます。WordPress用のテンプレートがうまく作れない、という方のヒントになるのではないでしょうか。
<< 仕様 >>
- Boostrapのバージョン／ 3
- ライセンス／ GNU GPL-2.0+
One Page Wonder
<< 概要 >>
シンプルなデザインかつ機能最小限のランディングページ用テンプレート。コンテンツの間隔や文字の間隔が見やすくていいですね。テンプレートではリンク貼られていませんので、目的にあったリンクやSNSボタンを追加してみるのもいいかもしれません。HTMLのシングルページとしても使えそうですし、WordPress や Ruby on Rails等フレームワーク用テンプレートとしても使いやすいコードです。
<< 仕様 >>
- Boostrapのバージョン／ 4
- ライセンス／ MIT
Simply Me
画像出典：W3School／ Boostrap
<< 概要 >>
こちらはBoostrapのチュートリアルサイトで紹介されているシンプルなランディングページのコードです。Boostrap初心者の方や HTML初心者の方でも比較的馴染みやすい HTMLコードと思います。画像部分の URL を変えるとデザイン・アレンジできますよ。
<< 仕様 >>
- Boostrapのバージョン／ 3
- ライセンス／ w3schools.comに帰属
free-bootstrap-theme
画像出典：Mobirise
<< 概要 >>
こちらはドラッグ＆ドロップで Webページを制作する Mobirise用のテンプレート集。どのテンプレートもいまいち、と感じている方に試して欲しいテンプレート＆ツールです。利用には Mobiriseへのアカウント登録（無料）およびソフトのインストールが必要。Mobirise上で作った Webページは、Export機能で HTMLファイルとして出力可能ですね。
<< 仕様 >>
- Boostrapのバージョン／ 4
- ライセンス／ mobirise.com
ポータルサイト向けのテンプレート
NEWS PORTAL
画像出典：Mysterythemes.com
<< 概要 >>
こちらはテンプレート販売サイトの Mysterythemes.comから無料公開されている WordPress用のテンプレート。実際に使ってみるとウィジェット編集画面で各コンテンツの表示を制御。ちゃんとヘッダー用広告枠も用意されていますので、WordPress初心者でポータルサイトを考えている方には参考になると思います。
<< 仕様 >>
- Boostrapのバージョン／ Boostrapなし
- ライセンス／ GPLv3
Libre
画像出典：Codrops
<< 概要 >>
こちらは Facebook調のポータルサイト・テンプレート。結構機能的でオシャレなデザインですが、実装には Node.js という JavaScript環境で実装する必要があります。コードのテクニカル的な問題に加えて、VPSサーバーなどの環境設定も必要に。HTMLや WordPress 経験済みでワンランク上の Webデザインを考えている方に参考となりそうです。
<< 仕様 >>
- Boostrapのバージョン／ Boostrapなし
- ライセンス／ フリー、ただし再販不可
Newsbit
画像出典：Colorlib／ Newsbit
<< 概要 >>
メディアサイトに使えそうな良質なテンプレート。トップページをはじめ、投稿画面や FAQ画面なども用意されています。汎用のテンプレートとなっているため、WordPressで使おうと思うとコード編集が必要ですし、コメント数やページビューのカウンターにもコーディングが必要ですね。やや上級者向けのテンプレートといえるでしょう。
<< 仕様 >>
- Boostrapのバージョン／ 4
- ライセンス／ CC BY 3.0
動画紹介むけのテンプレート
FULL MOTION
<< 概要 >>
同一ページにとどまったまま動画をピックアプ表示させるテンプレートデザイン。jQueryを使ったテクニックで、レスポンシブには skel.js が使用。他のテンプレートと組み合わせて使うと、オシャレな動画演出に仕上がると思います。
<< 仕様 >>
- Boostrapのバージョン／ Boostrapなし、skel.jsでレスポンシブ
- ライセンス／ CC BY 3.0
Fast Video
<< 概要 >>
こちらは動画のキャプチャリストをカテゴリ別に配列表示するテンプレートです。ウィジェット設定画面で表示を制御します。
- 表示件数
- サムネイル画像の有無
- 日付
- カテゴリーの指定
動画の詳細ページもシンプルなので、商品紹介の Webサイトやテクニカルネタなどのブログサイトにも応用できそうですね。尚、こちらは WordPress用のテンプレートとなっています。
<< 仕様 >>
- Boostrapのバージョン／ Boostrapなし
- ライセンス／ GNU GPL-2.0+
ショッピングサイト用のテンプレート
shop-isle
画像出典：themeisle
<< 概要 >>
こちらは WordPressプラグインの WooCommerce と合わせて使うショッピングサイトのテンプレート。比較的シンプルなレイアウトですが、商品検索画面ではスライドバー式の価格調整やカテゴリ式による商品セットアップなどユーザーも使いやすい仕様となっています。ただし、DEMO 画面のようにレイアウトを仕上げようと思うとそれなりに時間がかかりそうですね。
<< 仕様 >>
- Boostrapのバージョン／ 3
- ライセンス／ MIT
The Official WooCommerce Theme
<< 概要 >>
こちらは WordPressのショッピング・プラグインで有名な WooCommerce からリリースされている公式のテンプレート。買い物カゴのレイアウトやログイン画面もしっかり作りこまれていていい感じ。クレジットカード決済ができるプラグインと合わせて使うと自分専用のショッピングサイトも夢じゃありませんね。
<< 仕様 >>
- Boostrapのバージョン／ -
- ライセンス／ フリー
SALEOR
画像出典：SALEOR
<< 概要 >>
こちらは Django ベースで使用するショッピングサイト用のテンプレート。WordPressベースのショッピングサイトもいいですが、テンプレートやカート機能、決済機能などセットになっている SALEOR も魅力的ですね。デモサイトも充実していて管理画面の充実ぶりも確認できました。自分で開発するもよし、他人に委託するもよしなサイト事例でしょう。
<< 仕様 >>
- Boostrapのバージョン／ -
- ライセンス／ BSD 3-Clause License
AMP対応のテンプレート
Neve
<< 概要 >>
WordPress 運営者の方で SEO強化、AMP 対応、テンプレートと考えている方にとって Neve は手伝ってくれるかもしれません。無料で簡単に利用でき、必要最低限のレイアウトとしているため他のプラグインとの相性も Good。利用にあたってはプラグインの 「AMP」 と合わせて使う必要があります。
<< 仕様 >>
- Boostrapのバージョン／ -
- ライセンス／ GNU(無料版)
Lune
<< 概要 >>
AMP公式ページで紹介されている AMP 対応の e-コマース向けテンプレート。先ほどの WordPress のテンプレートに比べ、画面遷移がすごく軽やかで、全くストレスを感じません。またトップページのスクロールダウンで色が変わる機能は、 iPhone SE(2020) にも採用されているエフェクト。
e-コマースとありますが、画面のデザイン的に理美容にも使えると思いましたね。尚、決済に関するファンクションはありませんので、そこはご自身でセットする必要があります。
<< 仕様 >>
- Boostrapのバージョン／ -
- ライセンス／ MIT
AMP interior template（有料）
こちらは実際には使っていません
<< 概要 >>
一見すると普通のWebデザインのようにも感じますが、AMP対応のコーポレート系テンプレートになります。無料のWebサイトビルダー Mobirise に対応したテンプレートで、この他にもたくさんAMP対応のテンプレートが用意されています。
<< 仕様 >>
- Boostrapのバージョン／ -
- ライセンス／ 要確認
その他WordPress用のテンプレート
WP BOOTSTRAP
画像出典：GitHub／ WP BOOTSTRAP
<< 概要 >>
Boostrapのみを採用した非常にシンプルなテンプレート。テンプレートを自作したい方などにおすすめですね。
<< 仕様 >>
- Boostrapのバージョン／ 3
- ライセンス／ 不明
Brizy
画像出典： Brizy
<< 概要 >>
こちらはテンプレートではなくプラグインですが、無料のページビルダーになりますのでご紹介。有料のページビルダー・ツールが多い中、こちらは無料枠でも比較的充実した機能。投稿画面で自分の好きなようにコンテンツをカスタマイズしていき、スピーディーに理想的なデザインにたどり着くことが可能でしょう。ただし、既存のテンプレートと CSS が重複する可能性もありますので、読み込みスピードや SEO的にはマイナスとなるかもしれません。
<< 仕様 >>
- Boostrapのバージョン／ -
- ライセンス／ GNU
＼一流デザイナーのスキルが身に付く／
まとめ
目的別にテンプレートをピックアップしてご紹介させていただきましたが、いかがでしょうか？実際に自分のパソコンでもテンプレート開けましたでしょうか？ 4年ほど前、私も Webサイト用のテンプレートを探してダウンロードを繰り返していましたが、思うように表示されなかったことを覚えています。それは HTML や CSS を知らなかったからです。もし自分用の Web開発で急がないのであれば、一度 HTML と CSS の基礎を学習しておくことを勧めます。HTMLの基礎ができれば、今回ご紹介したテンプレートに限らず Yahoo!Japan や Lexusのようなサイト制作も夢じゃないと思いますよ。
HTML学習、独学では不安だったり、時間がない方、オンライン＆マンツーマンのプログラミングスクール CodeCampはいかがでしょうか？学生からビジネスユースまで幅広い世代で利用いただいていますよ。
![[Webデザイン初心者必見]Webデザイン技能検定とは？](https://s3-ap-northeast-1.amazonaws.com/mash-jp/production/posts/34701/d71b54973bf4063458d8304e394d274c88c8981a.34789.phone.png?1570366528)
- この記事を書いた人
- オシママサラ
