バナー画像

HTMLテンプレートとは?

HTMLテンプレートとは、HTMLやCSS、画像などのWebサイトの制作に必要なファイルがセットになったものです。

テキストや画像などを自分が使いたいものに入れ替えるだけで、ホームページが完成する便利な雛形データになります。

時代の流れでテンプレートもおしゃれで使いやすいものが増えてきました。

ここでは、HTMLテンプレートを使うメリット・デメリット、タイプ別のおすすめテンプレートを紹介します。

HTMLテンプレートのメリット

HTMLテンプレートを使うメリットには、次の3つがあげられます。

  1. レイアウト作成の手間が省ける
  2. レスポンシブ対応も簡単にできる
  3. デザインを考えずにおしゃれなページが作れる

ひとつずつ解説します。

1.レイアウト作成の手間が省ける

HTMLテンプレートを使う最大のメリットともいえるのが、レイアウト作成の手間が省けることです。

Webサイトやページを一から作るのには多大な労力がかかります。

ましてや初心者が作るとなると、思ったようなデザインにならなかったり、見栄えが良いものにならないなどのリスクがあります。

HTMLテンプレートを使うことで、Webサイト制作の時間を大幅に短縮できる上に質の良いページが完成します。

2.レスポンシブ対応も簡単にできる

最近のHTMLテンプレートは、レスポンシブに対応したものも増えています。

自力でレスポンシブ対応させるにはそれなりの時間や手間がかかるため、サクッとレスポンシブ対応のページを作成したい人にもおすすめです。

3.デザインを考えずにおしゃれなページが作れる

Webサイト制作をできるスキルはあるものの「なかなかおしゃれなデザインにならない…」と悩む人も多いでしょう。

HTMLテンプレートはおしゃれで質の高いものが多いため、デザインに自信のない人にもおすすめできます。

HTMLテンプレートのデメリット

HTMLテンプレートは便利な反面、デメリットも存在します。

主なデメリットは、次の2つです。

  1. デザインの差別化ができない
  2. 下手にいじると直すのが面倒

ひとつずつ見ていきましょう。

1.デザインの差別化ができない

HTMLテンプレートは、事前に用意されているレイアウトなため同じものを使っているサイトとデザインやレイアウトが被る可能性もあります。

「オリジナルのWebサイトを作りたい」という人にとっては、デメリットになるでしょう。

2.下手にいじると直すのが面倒

「他の人と被ってしまうのは嫌だから」とレイアウトやデザインの調整をして、表示が崩れてしまう可能性もあります。

HTML、CSSの知識があれば直せますが、余計なところで時間をとられてしまいます。

初めてテンプレートを使う人であれば、いじらないくらいの気持ちで使う必要があるといえます。

HTMLテンプレートで基本的な書き方(雛形コード)

HTMLテンプレートの基本的なテンプレートは自分で書くことも可能です。

ここでは、基本的なテンプレートの書き方、雛形コードを紹介します。

<!DOCTYPE html>
<html lang="ja">
 <head>
 <meta charset="utf-8">
 <title>サイトタイトル</title>
 <meta name="description" content="ディスクリプションを入力">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="style.css">
 <!-- [if lt IE 9] -->
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
 <!-- [endif] -->
 <script src="main.js"></script>
 </head>
 <body>
 <!----- header----->
 <header>ヘッダー</header>
 <nav>ナビ</nav>
 <!----- /header ----->
 
 <!----- main ----->
 <article>
 <h1>タイトル</h1>
 <section>
 <h2>見出し2</h2>
 <p>コンテンツの内容</p>
 </section>
 </article>
 <!----- /main ----->
 
 <!----- footer ----->
 <footer>フッター</footer>
 <!----- /footer ----->
 </body>
</html>

上記のコードが基本的なHTMLのテンプレートです。

あくまでテンプレートですので、ここに追加で必要なものを足したり、不要なものを削除します。

使われているタグや設定について、ひとつずつ解説します。

<!DOCTYPE html>

HTMLのバージョンなどのドキュメント情報をブラウザに伝えるために記述します。

おまじないのようなものなので、必須で記述しましょう。

<html lang="ja">

HTML文書で必ず必要なhtml要素です。

「lang=”ja”」で日本語であることを示しています。

<meta charset="utf-8">

「charset」は文字のエンコードを指定します。

簡単に説明すると、文字を表示されるルールという意味合いになります。

基本的に「utf-8」が使用されるため、おまじないとして覚えておきましょう。

<title>サイトタイトル</title>

サイトのタイトルを<title>タグで記述します。

ここで指定したテキストは、ブラウザのタブに表示されます。

<meta name="description" content="ディスクリプションを入力">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

ディスクリプションとレスポンシブ対応させるために、「description」と「viewport」を指定します。

ディスクリプションを簡単に説明すると、サイトの概要を説明する記述です。

ブラウザで検索した際に、サイト名・記事名の下に表示されます。

metaタグについては、次の記事で詳しく解説しているのでぜひ参考にしてみてください。

【関連記事】

▶︎【HTML】metaタグについて徹底解説!一覧で必要・不必要がわかる

<link rel="stylesheet" href="style.css">

外部ファイルであるCSSを読み込むための記述です。

hrefに読み込みたいファイル名を、記述しているhtmlファイルからの相対パスで記述しましょう。

<!-- [if lt IE 9] -->
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!-- [endif] -->

1行目はIE8以下の場合でも、HTML5のページを表示させるために記述しています。

2行目もIE8以下の場合で、CSSのメディアクエリを対応させるために記述します。

ブラウザ互換のための記述なので、「IEは考慮しない」という場合は不必要になります。

 <script src="main.js"></script>

JavaScriptファイルを読み込む際に記述します。

CSSと同じく、記述しているhtmlファイルからの相対パスで記述しましょう。

bodyの中身は作成するWebサイトによって異なります。

しかし、基本的には「header」「mainコンテンツ(article や section など)」「footer」で構成されます。

テンプレートを選ぶ際のポイント

「自分で一からWebサイトを制作するのは大変」という人は、他の人が作成したテンプレートを使うのがおすすめです。

しかし、「どのテンプレートを選べばいいのかわからない…」と悩む人もいるかもしれません。

そんなときは、次のポイントを考慮してテンプレートを選んでみましょう。

ひとつずつ解説します。

使用用途に適したテンプレートであるか

コーポレートサイトを制作するのに、ブログ風のテンプレートで作ろうとすれば思ったようなサイトはできないでしょう。

デザインや見栄えよりも、まず大切なのが使用用途に適していることです。

どのような目的でサイトを作ろうとしているのか、目的を達成するために必要な機能や要素を洗い出してテンプレートを選んでみましょう。

サイトのイメージカラーにあっているか

サイトのイメージカラーは、ブランドイメージを左右する重要なポイントです。

明るく爽やかなイメージを与えたいのに、黒を基調としたデザインのテンプレートでは想定したイメージにならないはずです。

サイトを訪れたユーザーにどのようなイメージを持たせたいのか考慮した上で、イメージにあったテンプレートを選ぶことをおすすめします。

利便性が高いテンプレートであるか

せっかくテンプレートを使うなら、スマホ表示にも対応したものがよいですよね。

利便性の高いテンプレートであるかも選ぶ際のポイントになります。

自力でレスポンシブ対応に修正するのは大変なので、修正に慣れていないうちは利便性が高いテンプレートを選んでおくとよいでしょう。

HTMLテンプレートのおすすめをタイプ別に紹介

HTMLテンプレート選びに迷っている人に向けて、タイプ別におすすめのものを紹介します。

ここでは、次の3つのタイプで見ていきます。

シンプルなテンプレート

Cardio

Cardio

Cardio

シンプルかつベーシックなデザイン・レイアウトのテンプレートです。

画面が見やすいことはもちろん、ロールオーバーのアニメーションやCSSだけで多様な動きを設定できることも魅力のひとつになります。

どんなタイプのサイトにも適用できますが、お店のホームページにピッタリのテンプレートです。

HALCYONDAYS

HALCYONDAYS

HALCYONDAYS

シンプルでありながら美しいデザインのテンプレートです。

1ページのボリュームが「Cardio」よりも多いため、LP(ランディングページ)にも使えます。

シンプルでアニメーションもついたWebサイトを作成したい人に、おすすめできるテンプレートです。

Landing Zero

Landing Zero

Landing Zero

「Landing Zero」シンプルなデザインと、背景に動画を設定できるおしゃれなテンプレートです。

動画の埋め込みも考えている人におすすめできます。

レイアウトもシンプルな作りになっているので、Webサイトやホームページとしての利用に向いています。

おしゃれなテンプレート

SIERRA

SIERRA

SIERRA

全体的にグラデーションで作成されているおしゃれなテンプレートです。

ボタンや要素にマウスカーソルを当てたときの動きも凝っているのがポイントです。

Bootstrapをベースに作成され、さまざまな業種のサイトに利用できるテンプレートといえます。

Drimo

Drimo

Drimo

ヘッダーをマウスで操作すると、まるで水面をなぞうようなエフェクトが特徴のテンプレートです。

テキストもタイピングしているように表示され、おしゃれな要素を兼ね備えています。

このテンプレートをベースに、11種類の異なるページデザインも使える利便性もおすすめポイントです。

Forty

Forty

Forty

コンテンツの配置に特徴のあるテンプレートです。

デザイン自体はシンプルですが、スタイリッシュなおしゃれさを追求したい人におすすめできます。

レスポンシブ対応もしているので、スマホ向けの表示にも意識したサイトを作る場合にぜひ活用してみてください。

無料テンプレート

TEMPLATE PARTY

TEMPLATE PARTY

TEMPLATE PARTY

800以上ものテンプレートが無料で使えるサイトです。

不動産用、居酒屋向け、ビジネスサイト向けなど、用途別に選べるのも便利なポイントです。

商用利用も可能なため、ホームページ製作としても使えます。

Flatty

Flatty

Flatty

フラットなデザインが可愛いテンプレートが無料で利用可能です。

レイアウトも有料のものとほとんど変わらず、機能的にも問題ありません。

無料ながらもおしゃれなデザインにこだわりたい人におすすめできます。

無料ホームページテンプレート.com

無料ホームページテンプレート.com

無料ホームページテンプレート.com

HTMLテンプレートからWordPressテンプレートまで幅広く扱うテンプレートサイトです。

シンプルで使いやすいものから、おしゃれで凝ったデザインのものまでお気に入りが見つかるはず。

商用利用も可能なのが、嬉しいポイントです。

まとめ

HTMLテンプレートについて解説しました。

テンプレートは自作も可能ですし、既存のものを利用することもできます。

簡単におしゃれなサイトを作成したい場合は、既存のものを利用するとよいでしょう。

ぜひこの記事を参考に、テンプレートを活用してみてください。

 

また当メディアを運営しているポテパンではHTMLにおける解説動画も公開しております。わかりやすく解説しておりますので是非ご覧ください!

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。