《魔改造子テーマ》マニアックなカスタマイズを色々と実装しています 《非公認》子テーマ ~Clownfish~ ブログ記事と動画紹介とLP機能を兼ね備える子テーマです この子テーマの配布予定はございません

HTMLテンプレートのまとめ

HTMLテンプレートとはサイト(ページ)を短時間で作るための《雛形》のことです。

デザインされたテンプレートを使えば、文章や画像を差し替えるだけで簡単にサイト(ページ)が作れます。

また、テンプレートは主に3つの種類に分類されます。

HTML/CSSのテンプレート

公開・販売されているテンプレートを基に、自身でコードを変更してサイトを作る方法です。
初心者には最も難しい方法だと思われます。
HTML/CSSの知識をマスターできればデザインは自由自在ですが、コーディングの勉強に時間を費やすことになるので、時間がない方にはおすすめしません。

WordPressのテーマ(テンプレート)

代表的なCMSツールの1つがWordPress(ワードプレス)です。

ワードプレスではサイトの機能はクオリティが高く、テーマやプラグインを組み合わせることでオリジナル性の高いサイトを作ることができます。

レンタルサーバーの契約や独自ドメインの取得から始めなければいけないので、サイトを公開するまでに多少の時間と費用ががかかります。インストールなどはレンタルサーバーで用意されているため、さほど難しいこともありません。ただ、WordPressに関連する用語や操作など覚えることが多くなります。

ホームページ作成サービス(ツール)のテンプレート

初心者に最もおすすめなテンプレートです。(特定のサービスに結びついる内容は割愛します!)

日本製のも多く存在し、かなり使いやすくなっています。

他のテンプレートと比べて機能面の自由度が低いものの、デザイン面ではおしゃれなものからシンプルなものまで幅広いデザインが存在するので、写真や文章を差し込むだけで納得のいくサイト(ページ)に仕上がります。目的に応じたテンプレートがいくつも用意されています。

■メリット

テンプレートを使う上でのメリットとデメリットについて紹介します。

メリット① 時間をかけずに作ることができる

あらかじめ大まかなデザインが決められています。
そのため自分が作りたいデザインに近いものを選ぶだけで、おおよその枠組みが完成します。
プロがデザインしていますのでクオリティが高いテンプレートが多いのも利用するメリットです。

メリット② 費用を抑えることができる

テンプレートは無料のものが多く、製作代行に依頼するよりも安い費用で抑えることができます。

クオリティよりも価格やサイトを公開するまでのスピードを優先する方にとっては無料でページを作れることは大きな強みです。

メリット③ 専門知識がいらない

テンプレートを使うことで必要なコーディング知識を最小限に抑えられます。

本来このクオリティのページを作るのに必要な知識やスキルを考えると圧倒的に簡単であり、初心者の方にはオススメです。
初心者でもプロと変わらないクオリティを作る事ができるのもテンプレートを使う大きなメリットだと思います。

■デメリット

テンプレートを使うことで簡単に高いクオリティのホームページを作ることができますが、当然、メリットばかりではありません。

デメリット① デザインが似てしまう

テンプレートは多くの人が使用するので他のサイトとデザインが被りやすくなってしまいます。
写真やコンテンツの内容を工夫する事である程度の差別化は可能ですが、大枠が似てしまうのはある程度仕方がない事です。

デメリット② 自由度が低い

テンプレートは型が決まっているため自在にデザインを変えづらいです。
デザインの細部にこだわることは難しく、初心者ではアレンジがききづらいです。
とはいえ、どのテンプレートを使ってもある程度のデザインのカスタマイズが可能です。

HTMLテンプレートを選ぶポイント

テンプレートは無数に存在するのでテンプレートを選ぶコツをいくつか紹介します

ポイント① テンプレートのターゲットを見極める(決める)

「制作するサイトが狙うターゲット」と「テンプレートで想定されているターゲット」がマッチングしているかを確認しましょう。

ターゲット層の年齢層がどのくらいなのか?
どんな要素(職業や趣味嗜好など)を持ったユーザーを狙いたいのか?

それらをちゃんとピックアップしてから、テンプレートを選ぶと良いでしょう。

ポイント② レスポンシブ対応

レスポンシブ対応とはスマートフォンを始めパソコン以外の端末にも対応していることをいいます。
現代ではスマートフォンでホームページを見る機会が多いので、レスポンシブ対応していると各種デバイスに漏れなく公開することができます。

しかし、レスポンシブウェブデザインはデータが重くなるという側面もあるので、ホームページを使用する意図やターゲットユーザーを基に、対応させるべきか考えましょう。

自分の場合はブレイクポイント(メディアクエリ)を以下の感じで考えています。

パソコン、タブレット、スマホ横、スマホ縦

ポイント③ 無料で使用できる範囲

無料で使用できる範囲はテンプレートによって異なる場合があります。

著作権表示や再配布などの制限がある場合や、オプションがテンプレートによって付属されていないことがあるので事前に確認しましょう。

おすすめHTMLテンプレート集

それではおすすめのHTMLテンプレート集を紹介していきますので参考にしてください。
ジャンルに分けて見やすくしていますので、自分の用途にあったテンプレートを見つけてください。

HTML/CSSの無料HTMLテンプレート集

Template party https://template-party.com/
無料ホームページテンプレート.com https://f-tpl.com/
コクーン https://wp-cocoon.com/downloads/
BizVector https://bizvektor.com/

WordPressのテンプレート(テーマ)
割愛

ホームページ作成サービス(ツール)のテンプレート
ペライチ https://peraichi.com/
Wix https://ja.wix.com/website/templates/
Jimdo https://jp.jimdo.com/designs/

個人まとめサイト
https://blog.universe-web.jp/443/