目次
HTMLテンプレートとは？
HTMLテンプレートとは、HTMLやCSS、画像などのWebサイトの制作に必要なファイルがセットになったものです。
テキストや画像などを自分が使いたいものに入れ替えるだけで、ホームページが完成する便利な雛形データになります。
時代の流れでテンプレートもおしゃれで使いやすいものが増えてきました。
ここでは、HTMLテンプレートを使うメリット・デメリット、タイプ別のおすすめテンプレートを紹介します。
HTMLテンプレートのメリット
HTMLテンプレートを使うメリットには、次の3つがあげられます。
- レイアウト作成の手間が省ける
- レスポンシブ対応も簡単にできる
- デザインを考えずにおしゃれなページが作れる
ひとつずつ解説します。
1.レイアウト作成の手間が省ける
HTMLテンプレートを使う最大のメリットともいえるのが、レイアウト作成の手間が省けることです。
Webサイトやページを一から作るのには多大な労力がかかります。
ましてや初心者が作るとなると、思ったようなデザインにならなかったり、見栄えが良いものにならないなどのリスクがあります。
HTMLテンプレートを使うことで、Webサイト制作の時間を大幅に短縮できる上に質の良いページが完成します。
2.レスポンシブ対応も簡単にできる
最近のHTMLテンプレートは、レスポンシブに対応したものも増えています。
自力でレスポンシブ対応させるにはそれなりの時間や手間がかかるため、サクッとレスポンシブ対応のページを作成したい人にもおすすめです。
3.デザインを考えずにおしゃれなページが作れる
Webサイト制作をできるスキルはあるものの「なかなかおしゃれなデザインにならない…」と悩む人も多いでしょう。
HTMLテンプレートはおしゃれで質の高いものが多いため、デザインに自信のない人にもおすすめできます。
HTMLテンプレートのデメリット
HTMLテンプレートは便利な反面、デメリットも存在します。
主なデメリットは、次の2つです。
- デザインの差別化ができない
- 下手にいじると直すのが面倒
ひとつずつ見ていきましょう。
1.デザインの差別化ができない
HTMLテンプレートは、事前に用意されているレイアウトなため同じものを使っているサイトとデザインやレイアウトが被る可能性もあります。
「オリジナルのWebサイトを作りたい」という人にとっては、デメリットになるでしょう。
2.下手にいじると直すのが面倒
「他の人と被ってしまうのは嫌だから」とレイアウトやデザインの調整をして、表示が崩れてしまう可能性もあります。
HTML、CSSの知識があれば直せますが、余計なところで時間をとられてしまいます。
初めてテンプレートを使う人であれば、いじらないくらいの気持ちで使う必要があるといえます。
短期集中でWebエンジニアになるならこちら
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>見出し２</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タグについては、次の記事で詳しく解説しているのでぜひ参考にしてみてください。
外部ファイルである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
シンプルかつベーシックなデザイン・レイアウトのテンプレートです。
画面が見やすいことはもちろん、ロールオーバーのアニメーションやCSSだけで多様な動きを設定できることも魅力のひとつになります。
どんなタイプのサイトにも適用できますが、お店のホームページにピッタリのテンプレートです。
HALCYONDAYS
シンプルでありながら美しいデザインのテンプレートです。
1ページのボリュームが「Cardio」よりも多いため、LP（ランディングページ）にも使えます。
シンプルでアニメーションもついたWebサイトを作成したい人に、おすすめできるテンプレートです。
Landing Zero
シンプルなデザインと、背景に動画を設定できるおしゃれなテンプレートです。
動画の埋め込みも考えている人におすすめできます。
レイアウトもシンプルな作りになっているので、Webサイトやホームページとしての利用に向いています。
おしゃれなテンプレート
SIERRA
全体的にグラデーションで作成されているおしゃれなテンプレートです。
ボタンや要素にマウスカーソルを当てたときの動きも凝っているのがポイントです。
Bootstrapをベースに作成され、さまざまな業種のサイトに利用できるテンプレートといえます。
Drimo
ヘッダーをマウスで操作すると、まるで水面をなぞうようなエフェクトが特徴のテンプレートです。
テキストもタイピングしているように表示され、おしゃれな要素を兼ね備えています。
このテンプレートをベースに、11種類の異なるページデザインも使える利便性もおすすめポイントです。
Forty
コンテンツの配置に特徴のあるテンプレートです。
デザイン自体はシンプルですが、スタイリッシュなおしゃれさを追求したい人におすすめできます。
レスポンシブ対応もしているので、スマホ向けの表示にも意識したサイトを作る場合にぜひ活用してみてください。
無料テンプレート
TEMPLATE PARTY
800以上ものテンプレートが無料で使えるサイトです。
不動産用、居酒屋向け、ビジネスサイト向けなど、用途別に選べるのも便利なポイントです。
商用利用も可能なため、ホームページ製作としても使えます。
Flatty
フラットなデザインが可愛いテンプレートが無料で利用可能です。
レイアウトも有料のものとほとんど変わらず、機能的にも問題ありません。
無料ながらもおしゃれなデザインにこだわりたい人におすすめできます。
無料ホームページテンプレート.com
HTMLテンプレートからWordPressテンプレートまで幅広く扱うテンプレートサイトです。
シンプルで使いやすいものから、おしゃれで凝ったデザインのものまでお気に入りが見つかるはず。
商用利用も可能なのが、嬉しいポイントです。
HTMLを学んでWebエンジニアを目指そう
Webエンジニアは、Webブラウザで利用できるサービスを作るエンジニアです。
Webブラウザとは、スマホやパソコンなどのwebブラウザから利用できるwebサービスやアプリなどのことをいいます。
HTMLとCSSを取得することで、Webエンジニアやフロントエンジニアへの就職や転職が可能です。
このブログを運営するプログラミングスクールのポテパンキャンプでは、実践的なカリキュラムと現役エンジニアからのレビュー、そしてポートフォリオ添削や模擬面談などの面談転職サポートにより、最短距離でWebエンジニアを目指すことができます。
Webエンジニアへの転職を考えている方は、是非一度無料カウンセリングへお申込みください。
まとめ
HTMLテンプレートについて解説しました。
テンプレートは自作も可能ですし、既存のものを利用することもできます。
簡単におしゃれなサイトを作成したい場合は、既存のものを利用するとよいでしょう。
ぜひこの記事を参考に、テンプレートを活用してみてください。
また当メディアを運営しているポテパンではHTMLにおける解説動画も公開しております。
わかりやすく解説しておりますので是非ご覧ください！
