[2018年]ホームページ制作におすすめ!無料HTMLテンプレート10選

公開日:2018年04月06日 更新日:2018年09月01日 無料でホームーページを作成

template

皆さんはHTMLテンプレートを、お使いになったことはありますか?

HTMLテンプレートとは、ホームページ制作に必要なHTMLとCSS、JavaScript、画像などがセットになったものです。セットの中に予め入っている画像やコピーと、自分が使用したい画像やコピーを入れ替えればホームページ制作が完了するといった便利な代物です。

無料のHTMLテンプレートの数もどんどん増えております。
今年のトレンドなデザインとしても使えそうな、おしゃれなHTMLテンプレートを紹介します!

目次

  1. HTMLテンプレートのメリット
  2. HTMLテンプレートのデメリット
  3. CSSフレームワークとHTMLテンプレートの違い
  4. タイプ別!おすすめレイアウトのHTMLテンプレート
  5. HTMLテンプレートを編集するために必要なもの

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

HTMLテンプレートを使う一番のメリットは、何よりも時間がかからないこと!
これ!と思うテンプレートを選べれば…

  • レイアウトを考える手間が省ける
  • デザインに自信がなくてもトレンド感満
  • 最近はレスポンシブが当たり前になっているので、スマホ対応のホームページ制作もラクラク!

すでに用意されているデザインと機能を利用することで、デザイン・使いやすさ共に、質の高いホームページ制作ができます。

 

こちらもおすすめ!

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

デメリットもあります。

「すでに用意された」レイアウトなので、そのものの自由度は減ってしまいます。「テンプレート」ですので、他にも使っている人がいるかもしれなません。デザインの差別化ができないといった点が気になる場合も、それはデメリットでしょう。

また、画像とテキスト以外の部分を変更したいと思うと、思いの外、時間がかかったりします。下手すると、表示が崩れてしまって途方にくれるということになります。色一つ変えるだけでも、「ここだけ変えたかったのに、他のところも変わっちゃった!」なんてことが起きると、ちょっと…面倒です…

特に初心者さんは「テンプレート=レイアウトはいじらない」くらいの気持ちが必要になります。

 

CSSフレームワークとHTMLテンプレートの違い

HTMLテンプレートという言葉をご存知でしたら、CSSフレームワークという言葉も耳にしたことがあるかもしれません。

どちらもホームページ制作のサポートをしてくれます。
2つの違いを簡単に説明します。

 

HTMLテンプレート

先にご説明してしまいましたが、改めて。ホームページ制作に必要なHTMLとCSS、JavaScript、画像などがセットになったものです。とにかく全てが揃っています。

インテリアで例えると、すでにオブジェが並んだ棚が用意されていて、あとは自分の好きな物を飾ってください。という感じです。

 

CSSフレームワーク

Bootstrapに代表される、プログラミングに必要な特定の機能を持たせようとする、ホームページ制作のための枠組み。全体のデザインが用意されているというよりは、パーツや機能など細々したものがセットになったものです。
すでにコーディングルールが決められているので、複数人が携わっていても、一貫性のあるコーディングができます。

同じくインテリアで例えると、ネジや裁断された木材が用意されていて、これがあれば棚を作れますよ!という感じでしょうか。

パーツがたくさん用意されていても、ある程度作り方を知っていないと思い描いているものはできない。というところがちょっと高めのハードルになります。

さて、これからご紹介する内容は、HTMLテンプレート、すでにオブジェが並んだ棚の方です。

 

タイプ別!おすすめレイアウトのHTMLテンプレート

個人向けHTMLテンプレート

シングルページのHTMLテンプレートです。

 

簡単な商品案内や、ポートフォリオ、情報量がそこまで多くない個人事務所のホームページなどに適しています。小さな単位のホームページ制作ですと特に費用がかけられないことが多いと思うので、レスポンシブが簡単に実現できるのは嬉しいですね。

 

kreative

ポートフォリオもブログ記事を載せられます。紹介要素が強いレイアウトのイメージなので、少ない人数での事務所のホームページにも良さそうです。

kreative

 

Shield

タイトルの背景に画像を配置できるテンプレートは少なめなので、こんなレイアウト欲しかった。と思う人もいるかもしれません。
シングルページとしては、かなりの情報量が詰め込めます。
全体的なフォントのバランスが美しいです。

Shield

 

Link

画像が網掛けになったメインビジュアルが特徴的。どんな画像を載せても、白文字がはっきり見えるのでいいですね。
レイアウト的には、シングルページでも画像はたくさん見せたい人におすすめです。

Link

 

Ceevee

文字が見やすく、グローバルナビもあって綺麗にまとまっています。
動画もOKで画像は拡大でき、コンタクトフォームがついているのでポートフォリオにはもってこいですね。
スキルをグラフで表現できるところなど、一目置かれるポイントになるかもしれません。

Ceevee

 

Resume Template

タイトルがレジュメ。画像は1枚だけのレイアウト。情報重視の小さな事務所などにも向いていそうです。
意外とニーズが多そうなテンプレートです。

Resume Template

 

お店向けHTMLテンプレート

飲食店やアパレルショップなど、発信の多いホームページ制作に向いているスタイリッシュなテンプレートです。

OAK

シンプルでおしゃれです。
マウスホバーした時のアニメーションのこだわりがすごい。アニメーション的には、デモのようにアパレル系の商品画像が映えそうですね。

OAK

 

Snow

どんなサービスでも載せられそうな、凡用性の高さを感じます。トップページからブログをスライドで7記事表示できるレイアウトになっていて(スマホの場合は5記事)若い子が見るお店のホームページに、向いていそうだなと感じました。

Snow

 

コーポレートサイト向けHTMLテンプレート

ビジネス色の強い、お堅めなホームページ制作にも適したおしゃれなテンプレートです。

 

BERYLLIUM

落ち着いたデザインで、トップページの情報が多すぎないところがレイアウトの特徴です。
下層ページを使って、様々な表現ができるので情報量の多いホームページに向いています。

BERYLLIUM

 

AIR

ボタンなどに使われているアクセントカラーの部分を、デモ画面で色を選ぶと希望の色に差し替えてくれます。(楽しいですね!)
比較的、どれも色使いがポップでキュートですが、文字のバランスなどが落ち着いていて、そんなふざけた印象にならない感じがします。

AIR

 

Abstract

グリッドレイアウトを駆使した、かっこいいテンプレートです。
動きもすごい。あまりにかっこよすぎて用途は限られてきそうですが、トップにスライド機能があったり、動画も設置できたりと、コンテンツが豊富なホームページに向いていそうです。

Abstract

 

おまけ

COMING SOON TEMPLATE

カウントダウンを表示するホームページです。
イベント告知や、オープン前で、ホームページがリリースできていない時なんかに使うのかな。使えるチャンスがったら使ってみたい、ユニークなテンプレート。

COMING SOON TEMPLATE

 

HTMLテンプレートを編集するために必要なもの

作ってみたいテンプレートをダウンロードしたけど、この後はどうしたらいいの?となりそうな初心者の方に、テンプレートを手に入れたあとの編集で必要なアイテムをご説明します。

 

  • ご自身のホームページで使いたい、画像とテキスト
  • エディタソフト(HTMLを編集する)
  • 画像編集ソフト(用意した画像時に必要。切り取ったり、色などを調節する)
  • レンタルサーバー(ホームページを公開し続けるために必要)
  • FTPソフト(レンタルサーバーに、ホームページをアップロードするために必要)

 

以上です。

こんなにあるの?と思うかもしれませんが、ひとつひとつでやらなければいけないことは、わりとシンプルな作業です。手順を整頓して挑めばきっと大丈夫!

 

ホームページ制作に役立つ記事はこちら



まとめ

インスピレーションが湧くような、テンプレートに出会えたら、ぜひダウンロードして触ってみてください。
HTMLテンプレートは、近年のトレンドを押さえたデザインで、さらにオールマイティーに使えるものが多く、とても便利で優れたものです。HTMLやCSSが苦手であれば、本当に時間を短縮できます!

凡用性が高い反面、オリジナルが出しにくいことが特徴にもなります。
つまり「ここも変えたいな…こうした方が使いやすいん気がするんだけどな…」などの気持ちが出てきたら、それは新しい学びどきの到来です!

1から自分で作りたい人のための参考記事はこちら


 

きたみ

Btiesのフロントエンド担当です。

3歳の娘を子育て中…夢のあるノマド母になりたい。


PAGE TOP