【スマホやレスポンシブにも対応】高品質なHTMLテンプレート30選



【スマホやレスポンシブにも対応】高品質なHTMLテンプレート30選

WordPressを使ったブログサイトや Ruby on Rails など使ったアプリケーション開発を考えた時、土台となる「テンプレート」迷いますよね。
今回は、目的別にテンプレートをご紹介し、お気に入りのテンプレートが見つかるようお手伝いをさせて頂きますね。

目次
  1. 【スマホやレスポンシブにも対応】高品質なHTMLテンプレート30選
  2. テンプレートとはそもそも何か
  3. ブログ用のテンプレート
  4. コーポレートスタイルのテンプレート
  5. ランディングページむきのテンプレート
  6. ポータルサイト向けのテンプレート
  7. 動画紹介むけのテンプレート
  8. ショッピングサイト用のテンプレート
  9. その他WordPress用のテンプレート
  10. まとめ

【スマホやレスポンシブにも対応】高品質なHTMLテンプレート30選

テンプレートとはそもそも何か

image

はじめて Webサイトを立ち上げる方用に テンプレートについて少しご紹介します。

私達が普段見ている Webページは、見えない線によって区切られています。上図に示すように header、body 、sidebar、 footer といった具合。この境界線をベースに、各スペースの幅や高さ、掲載する画像の大きさ、文字の大きさなどを決めて Webページが出来上がっていきます。こうした一連の作業、自分でやってもいいのですが、ゼロベースからはじめるより参考となるデザインを元に組み上げていく方が効率的です。そんな訳で「テンプレート」が存在するのですね。

今回ご紹介するテンプレートは、

  • 汎用
  • WordPress用

の 2種類になります。汎用は そのままサーバーにアップしても大丈夫ですし、 HTMLコードを編集して WordPress用や Ruby on Rails用、 Django用などにカスタマイズすることができます。

WordPress用は WordPressのみの利用で、実際に使ってみると分かるのですが、DEMO画面と自分のテンプレート画面はかけ離れたモノになります。これはテンプレート・インストール後にウィジェットやテーマ編集、もしくは投稿画面のテーマ選択から設定を合わせる必要があるんですね。一気に DEMO画面のようなデザインにならないことを事前に知っておきましょう。

それではこれから実際にダウンロードして試してみたテンプレートをご紹介していきます。

ブログ用のテンプレート

Clean Blog

image

画像出典:Start Boostrap

<< 概要 >>

Boostrapを採用したテンプレートとして人気の Clean Bog。GitHub上でもテンプレートとしてはトップクラスのスター数で、実は私も現在開発中の Django用テンプレートに採用しています。シンプルな HTMLコードに加えて Boostrap を主徴した スタイルコードは、HTML & CSS 初心者でも使いやすいです。WordPress や Ruby on Railsなど様々なプラットフォームに適応しやすいと思いますね。

<< 仕様 >>

  • Boostrapのバージョン/ 4
  • ライセンス/ MIT license


Scribbler

image

画像出典:Codrops

<< 概要 >>

こちらはプログラムの紹介を考えている方にとって参考となるデザインのテンプレートです。トップページのコードアニメーションもおもしろいですが、記事詳細(doc.html)のレイアウトもシンプルで読みやすいです。技術資料を紹介するページのテンプレートは”堅め”なイメージのものが多いですが、こちらは優しいデザインで個人的には気に入りました。

<< 仕様 >>

  • Boostrapのバージョン/ Boostrapなし
  • ライセンス/ 不明


Hugo Nuo

image

画像出典:GitHub/Hugo Nuo

<< 概要 >>

世界最速で Webページを作れるという Hugoフレームワーク用のテンプレート。「Hugo」はじめて聞かれた方も多いかもしれませんが、VPSサーバー上では簡単にブログサイトが作れちゃいます。

<< 仕様 >>

  • Boostrapのバージョン/ 4
  • ライセンス/ MIT License


Blanca

image

画像出典:Colorlib/ Blanca

<< 概要 >>

大きいサムネイルが印象的なブログ用テンプレート。コメント欄やページネーション、コンタクトページも用意されていますのでコーポレートサイトにも使えそうです。コードをカスタマイズして WordPress のテンプレートとしても良さそうですね。ページ下部のインスタグラム画像を並べているレイアウトもユニークでいいと思いました。

<< 仕様 >>

  • Boostrapのバージョン/ 4
  • ライセンス/ CC BY 3.0


Suppablog

image

画像出典:Colorlib/ Suppablog

<< 概要 >>

シンプルなデザインの中にも特徴的で効率的なメニューバーやタイトルマウスホバー時のぼかしアクションなどおもしろい機能が搭載されています。SNSやYouTubeとの連携もデザイン的に目立ちますので、ブログ以外に多チャンネルで運営されている方にピッタリなテンプレートと思いました。ただし、フッターのデザインがシンプルすぎるかもしれません。

<< 仕様 >>

  • Boostrapのバージョン/ Boostrap なし、carouFredSel使用
  • ライセンス/ CC BY 3.0


Road Trip

image

画像出典:TEMPLATED/ Road Trip

<< 概要 >>

シンプルなパララックスページのテンプレートです。イベントや新商品などの単発的なランディングページとして使えそう。HTMLコードの画像と文字を変えるだけでも自分用のページとして雰囲気出ると思います。

<< 仕様 >>

  • Boostrapのバージョン/ Boostrapなし、skel.jsでレスポンシブ
  • ライセンス/ CC BY 3.0


Tranquilpeak

image

画像出典:Hexo Theme Tranquilpeak

<< 概要 >>

こちらは Hexo という Node.js(JavaScript)上で動くブログフレームワーク用のテンプレート。プロフィールページや検索画面など同一ページ内で処理していくあたりが参考になると思います。記事詳細画面にいくとすごくシンプルなデザインなので、パーソナル系やテクニカル系のブログにむいてそうです。

<< 仕様 >>

  • Boostrapのバージョン/ Boostrapなし
  • ライセンス/ GNU General Public License v3.0


Hexo Theme Huxblog

image

画像出典:GitHub/Hexo-Theme-Huxblog

<< 概要 >>

こちらも Hexo用のテンプレートでファーストビューが印象的。記事詳細画面等ではサイドバーなしのデザインで、すっきりした感じ。タイトルと日付、ディスクリプションなどの文字間隔が美しく、参考になるテンプレートと思います。

<< 仕様 >>

  • Boostrapのバージョン/ 3
  • ライセンス/ 不明


コーポレートスタイルのテンプレート

Sydney

image

画像出典:ATHEMES/ Sydney

<< 概要 >>

シングルページ・スタイルで企業サイトに必要なコンテンツを備えたテンプレート。他にも似たテンプレートありますが、こちらはゴーストボタンにカラム要素、jQueryによるスライドアクションなど視覚的に楽しめるデザインが特徴的。トップページに対してブログページはシンプルでモダンなデザインでいいですね。

<< 仕様 >>

  • Boostrapのバージョン/ 3
  • ライセンス/ フリー


Urban

image

画像出典:TEMPLATED/ Urban

<< 概要 >>

こちらはパーソナルイメージの強いWebデザインのテンプレート。人の画像を製品に変えたりすると商品紹介ページとして使えそうですね。レスポンシブには Boostrapでなく skel.js を使ってデザイン。

<< 仕様 >>

  • Boostrapのバージョン/ Boostrapなし、skel.jsでレスポンシブ
  • ライセンス/ CC BY 3.0


Business Casual

image

画像出典:Business Casual

<< 概要 >>

こちらはショップ紹介向きのテンプレートで、背景と画像と文字がラップしている点がオシャレ。トップページと商品ページ、Aboutページと 3種類のページデザインを参考にすることができます。

<< 仕様 >>

  • Boostrapのバージョン/ 4
  • ライセンス/ MIT License


BizPage

image

画像出典:BOOSTRAPMADE/ BizPage

<< 概要 >>

ビジネスページの王道的なデザインのテンプレート。PORTFOLIOページのタブデザインやTEAMページのマウスオーバーなどオシャレです。 シングルページ構成で企業や商品ページのトップ・デザインに使えそうですね。文字や画像を変えるだけで使えそうなので、HTML初心者にはピッタリな感じ。

<< 仕様 >>

  • Boostrapのバージョン/ 4
  • ライセンス/ 商用可、ただしライセンス購入無き場合はバックリンク必要([詳細](https://bootstrapmade.com/license/)


Multi

image

画像出典:BOOSTRAPMADE

<< 概要 >>

こちらは企業ページのテンプレートに加えて、ブログページや商品ページなど複数の HTMLファイルから構成。WordPress などの CMS にセットするとブログと企業ページを連携して使えますね。文字や画像のアニメーションが特徴的なテンプレです。

<< 仕様 >>

  • Boostrapのバージョン/ 3
  • ライセンス/ 商用可、ただしライセンス購入無き場合はバックリンク必要([詳細](https://bootstrapmade.com/license/)


Business Frontpage

image

画像出典:Start Boostrap/ Business Frontpage

<< 概要 >>

こちらはレスポンシブ・デザインだけを装備したシンプルな企業向けサイトのテンプレート。これをベースに商品紹介やスタッフ紹介、地図などお好みのコンテンツを追加すると思い通りのデザインに仕上がるのではないでしょうか?他のテンプレートとミックスして使いたいですね。

<< 仕様 >>

  • Boostrapのバージョン/ 4
  • ライセンス/ MIT


ランディングページむきのテンプレート

Land.io

image

画像出典:Codrops

<< 概要 >>

こちらのテンプレートは、本番でもすぐに使えそうなぐらいトップデザインからフッターデザインまで揃っていいと思いました。パララックス効果に加えて、各コンテンツ毎に上品なアニメーションが加えられて、ランディングページを考えている方にとっては大変参考になるテンプレートと思います。

<< 仕様 >>

  • Boostrapのバージョン/ 4
  • ライセンス/ フリー、ただしテンプレートの作者表記必要


Agency

image

画像出典:Start Boostrap/ Agency

<< 概要 >>

一見すると普通のランディングページに思えますが、PORTFOLIO 画像のポップアップ表示や Aboutのタイムラインデザインなど参考になる点が多々あります。ポートフォリオサイトやコーポレートサイトにも使えそうですね。個人的には タイムライン・レイアウトと WordPressもしく Djangoを融合させると、時系列のブログテンプレートになっておもしろそうと思いました。

<< 仕様 >>

  • Boostrapのバージョン/ 4
  • ライセンス/ MIT


Burger

image

画像出典:Just Free Themes/ Burger

<< 概要 >>

飲食店やコレクション系など画像主体のランディングページにもってこいの WordPress用ランディングページのテンプレート。このテンプレートのおもしろいところは、 WordPress用といいながら Burger サイトの HTMLコードを新規ファイルにコピペしてブラウザで開くと、 DEMO画面とほぼ同じページができちゃいます。WordPress用のテンプレートがうまく作れない、という方のヒントになるのではないでしょうか。

<< 仕様 >>

  • Boostrapのバージョン/ 3
  • ライセンス/ GNU GPL-2.0+


One Page Wonder

image

画像出典:Start Bootstrap/ One Page Wonder

<< 概要 >>

シンプルなデザインかつ機能最小限のランディングページ用テンプレート。コンテンツの間隔や文字の間隔が見やすくていいですね。テンプレートではリンク貼られていませんので、目的にあったリンクやSNSボタンを追加してみるのもいいかもしれません。HTMLのシングルページとしても使えそうですし、WordPress や Ruby on Rails等フレームワーク用テンプレートとしても使いやすいコードです。

<< 仕様 >>

  • Boostrapのバージョン/ 4
  • ライセンス/ MIT


Simply Me

image

画像出典:W3School/ Boostrap

<< 概要 >>

こちらはBoostrapのチュートリアルサイトで紹介されているシンプルなランディングページのコードです。Boostrap初心者の方や HTML初心者の方でも比較的馴染みやすい HTMLコードと思います。画像部分の URL を変えるとデザイン・アレンジできますよ。

<< 仕様 >>

  • Boostrapのバージョン/ 3
  • ライセンス/ w3schools.comに帰属


free-bootstrap-theme

image

画像出典:Mobirise

<< 概要 >>

こちらはドラッグ&ドロップで Webページを制作する Mobirise用のテンプレート集。どのテンプレートもいまいち、と感じている方に試して欲しいテンプレート&ツールです。利用には Mobiriseへのアカウント登録(無料)およびソフトのインストールが必要。Mobirise上で作った Webページは、Export機能で HTMLファイルとして出力可能ですね。

<< 仕様 >>

  • Boostrapのバージョン/ 4
  • ライセンス/ mobirise.com


ポータルサイト向けのテンプレート

NEWS PORTAL

image

画像出典:Mysterythemes.com

<< 概要 >>

こちらはテンプレート販売サイトの Mysterythemes.comから無料公開されている WordPress用のテンプレート。実際に使ってみるとウィジェット編集画面で各コンテンツの表示を制御。ちゃんとヘッダー用広告枠も用意されていますので、WordPress初心者でポータルサイトを考えている方には参考になると思います。

<< 仕様 >>

  • Boostrapのバージョン/ Boostrapなし
  • ライセンス/ GPLv3


Libre

image

画像出典:Codrops

<< 概要 >>

こちらは Facebook調のポータルサイト・テンプレート。結構機能的でオシャレなデザインですが、実装には Node.js という JavaScript環境で実装する必要があります。コードのテクニカル的な問題に加えて、VPSサーバーなどの環境設定も必要に。HTMLや WordPress 経験済みでワンランク上の Webデザインを考えている方に参考となりそうです。

<< 仕様 >>

  • Boostrapのバージョン/ Boostrapなし
  • ライセンス/ フリー、ただし再販不可


Newsbit

image

画像出典:Colorlib/ Newsbit

<< 概要 >>

メディアサイトに使えそうな良質なテンプレート。トップページをはじめ、投稿画面や FAQ画面なども用意されています。汎用のテンプレートとなっているため、WordPressで使おうと思うとコード編集が必要ですし、コメント数やページビューのカウンターにもコーディングが必要ですね。やや上級者向けのテンプレートといえるでしょう。

<< 仕様 >>

  • Boostrapのバージョン/ 4
  • ライセンス/ CC BY 3.0


動画紹介むけのテンプレート

FULL MOTION

image

画像出典:TEMPLATED/ FULL MOTION

<< 概要 >>

同一ページにとどまったまま動画をピックアプ表示させるテンプレートデザイン。jQueryを使ったテクニックで、レスポンシブには skel.js が使用。他のテンプレートと組み合わせて使うと、オシャレな動画演出に仕上がると思います。

<< 仕様 >>

  • Boostrapのバージョン/ Boostrapなし、skel.jsでレスポンシブ
  • ライセンス/ CC BY 3.0


Fast Video

image

画像出典:Just Free Themes/ Fast Video

<< 概要 >>

こちらは動画のキャプチャリストをカテゴリ別に配列表示するテンプレートです。ウィジェット設定画面で表示を制御します。

  • 表示件数
  • サムネイル画像の有無
  • 日付
  • カテゴリーの指定

動画の詳細ページもシンプルなので、商品紹介の Webサイトやテクニカルネタなどのブログサイトにも応用できそうですね。尚、こちらは WordPress用のテンプレートとなっています。

<< 仕様 >>

  • Boostrapのバージョン/ Boostrapなし
  • ライセンス/ GNU GPL-2.0+


ショッピングサイト用のテンプレート

shop-isle

image

画像出典:themeisle

<< 概要 >>

こちらは WordPressプラグインの WooCommerce と合わせて使うショッピングサイトのテンプレート。比較的シンプルなレイアウトですが、商品検索画面ではスライドバー式の価格調整やカテゴリ式による商品セットアップなどユーザーも使いやすい仕様となっています。ただし、DEMO 画面のようにレイアウトを仕上げようと思うとそれなりに時間がかかりそうですね。

<< 仕様 >>

  • Boostrapのバージョン/ 3
  • ライセンス/ MIT


The Official WooCommerce Theme

image

画像出典:The Official WooCommerce Theme

<< 概要 >>

こちらは WordPressのショッピング・プラグインで有名な WooCommerce からリリースされている公式のテンプレート。買い物カゴのレイアウトやログイン画面もしっかり作りこまれていていい感じ。クレジットカード決済ができるプラグインと合わせて使うと自分専用のショッピングサイトも夢じゃありませんね。

<< 仕様 >>

  • Boostrapのバージョン/ -
  • ライセンス/ フリー


SALEOR

image

画像出典:SALEOR

<< 概要 >>

こちらは Django ベースで使用するショッピングサイト用のテンプレート。WordPressベースのショッピングサイトもいいですが、テンプレートやカート機能、決済機能などセットになっている SALEOR も魅力的ですね。デモサイトも充実していて管理画面の充実ぶりも確認できました。自分で開発するもよし、他人に委託するもよしなサイト事例でしょう。

<< 仕様 >>

  • Boostrapのバージョン/ -
  • ライセンス/ BSD 3-Clause License


その他WordPress用のテンプレート

WP BOOTSTRAP

image

画像出典:GitHub/ WP BOOTSTRAP

<< 概要 >>

Boostrapのみを採用した非常にシンプルなテンプレート。テンプレートを自作したい方などにおすすめですね。

<< 仕様 >>

  • Boostrapのバージョン/ 3
  • ライセンス/ 不明


Brizy

image

画像出典: Brizy

<< 概要 >>

こちらはテンプレートではなくプラグインですが、無料のページビルダーになりますのでご紹介。有料のページビルダー・ツールが多い中、こちらは無料枠でも比較的充実した機能。投稿画面で自分の好きなようにコンテンツをカスタマイズしていき、スピーディーに理想的なデザインにたどり着くことが可能でしょう。ただし、既存のテンプレートと CSS が重複する可能性もありますので、読み込みスピードや SEO的にはマイナスとなるかもしれません。

<< 仕様 >>

  • Boostrapのバージョン/ -
  • ライセンス/ GNU

まとめ

目的別にテンプレートをピックアップしてご紹介させていただきましたが、いかがでしょうか?実際に自分のパソコンでもテンプレート開けましたでしょうか? 4年ほど前、私も Webサイト用のテンプレートを探してダウンロードを繰り返していましたが、思うように表示されなかったことを覚えています。それは HTML や CSS を知らなかったからです。もし自分用の Web開発で急がないのであれば、一度 HTML と CSS の基礎を学習しておくことを勧めます。HTMLの基礎ができれば、今回ご紹介したテンプレートに限らず Yahoo!Japan や Lexusのようなサイト制作も夢じゃないと思いますよ。

HTML学習、独学では不安だったり、時間がない方、オンライン&マンツーマンのプログラミングスクール CodeCampはいかがでしょうか?学生からビジネスユースまで幅広い世代で利用いただいていますよ。

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp