タイトル・URLをコピー
記事タイトルレスポンシブデザインを作るときに便利なテンプレート集
記事URLhttps://digitor.jp/textbook/responsive-template/
記事タイトルレスポンシブデザインを作るときに便利なテンプレート集
記事URLhttps://digitor.jp/textbook/responsive-template/
POINTこの記事をざっくり言うと
レスポンシブテンプレートを使うメリット
レスポンシブ対応済HTMLテンプレート配布サイトを紹介
レスポンシブ対応済Bootstrapテンプレート配布サイトを紹介
Web制作を受注するとなると、デザインデータを基に自分でコーディングするという手順を踏む方がほとんどですが、コーディングする際にかかる時間はできるだけ減らしたいものです。
今回はWeb制作の工数を減らすことができるHTMLテンプレートを使うメリット、おすすめのHTMLテンプレート配布サイトをご紹介します。
テンプレートを使ったWeb制作のメリット3選
レスポンシブの調整が不要
HTMLテンプレートを使う際にもっとも効率化できるのは「レスポンシブ対応が不要」ということです。Web制作を受注する上で欠かせないレスポンシブ対応ですが、各デバイスそれぞれでの表示対応をするのにも時間はかかります。
テンプレートを使う場合は既にレスポンシブ対応が行われているため、レスポンシブ対応に必要なのはブレイクポイントなどの細かい微調整のみです。また、どうしても自力での確認では抜けが発生することもありますが、テンプレートの配布元は適宜修正したものをアップデートしているため、レスポンシブ対応の抜けが少ないというのも大きなメリットです。
クロスブラウザ対応もほぼ不要
レスポンシブ対応と同様に欠かせないクロスブラウザ対応も、自力で0からコーディングするよりも効率的に実装できます。
配布されているテンプレートは、さまざまなブラウザでの閲覧を想定したものであることがほとんどです。クロスブラウザ対応で必須とも言えるHTML構文のミスも少ないものが多く、reset.cssなどのブラウザごとのスタイルを初期化しているものもあります。
必要に応じて実装を想定しているブラウザに合わせたベンダープレフィックスを補足する
だけで済むため、テンプレートを使うメリットの1つとして挙がります。
制作スピードの高速化
テンプレートをzip形式でダウンロードすると、多くのテンプレートは画像のような構成になっています。テンプレートのデモサイトに使用されているスタイルやJavascript(JQuery)が既に入った状態であるため、場合によってはHTMLファイルの文言や配色を変更するだけで済む場合もあり得ます。
また、これらのファイルをスニペットとして利用することでも、普段のWeb制作にかける時間の短縮を図ることができます。
レスポンシブなHTMLテンプレート
今回ご紹介するテンプレートは、HTML/CSS/Javascript(JQuery)を含む一式セットとなっているテンプレートがほとんどです。無料で利用できるものも紹介していますので、実際に使ってみましょう!
①HTML5 UP
海外風の洗練されたデザインのテンプレートを無料配布しているサイトです。ポートフォリオサイト向けのデザインが多めですが、ショップサイトのテンプレートとしても利用できるものも揃っています。
利用可能テンプレート例
✓特徴
- 無料・有料両方あり
- スタイリッシュな印象を与えるテンプレート多め
- 無料は45種類のテンプレートを利用可能
- レスポンシブ対応はスマートフォン、タブレットで共通
- 有料プランは80種類のテンプレートを利用可能(3ヶ月19ドル)
- 商用利用可能(クレジット表記必須)
使用言語
- HTML5
- CSS3
- SASS
- Javascript
②Template Party
日本製のさまざまな業種のWeb制作で活用できる、約1100件のテンプレートを無料配布しているサイトです。同じテンプレートの中でも複数のレイアウトや配色のシリーズを同時配布しているため、CSSを修正する手間も少なくて済みます。
利用可能テンプレート例
✓特徴
- テンプレート利用のみは完全無料
- 18業種それぞれに合った合計1100件のテンプレートを無料配布
- 同じテンプレート内で複数のデザインあり
- オーソドックスなデザインだけではなく華やかでオシャレなデザインのものもあり
- 商用利用可能(無料の場合クレジット表記必須)
- レスポンシブ対応はスマートフォン、タブレットそれぞれ別に用意
③TempNate
個人ページやコーポレートサイト、教育、ECサイト、芸術、スポーツ、医療、美容、政治など幅広い業種で無料テンプレートを使われている実績があるサイトです。カスタマイズしやすいため、全てテンプレートではなく自身でもカスタムしたい時に利用できます。
利用可能テンプレート例
✓特徴
- テンプレート利用のみは完全無料
- 大きく10シリーズに分けてテンプレートを無料配布
- 商用利用(無料はクレジット表記必須)
- 各シリーズごとに異なる配色やカラム幅のレイアウトがテンプレートで用意されている
- レスポンシブ対応はスマートフォン、タブレットそれぞれ別に用意
④無料ホームページテンプレート.com
企業サイトテンプレートや美容系、アパレル系、カフェ、医療機関などさまざまな業種で利用可能なテンプレートを配布しているサイトです。
各テンプレートでデモサイトがあるため、内容を確認してからダウンロードできます。有料無料で使用できるテンプレート数は変わりません。
利用可能テンプレート例
✓特徴
- テンプレート利用のみは完全無料
- 約100個のテンプレートを無料で利用可能
- 洗練されたシンプルなデザインが多め
- 商用利用可能(無料の場合クレジット表記必須)
- WordPressのテーマも無料配布している
- レスポンシブ対応はスマートフォン、タブレットで共通
レスポンシブなBootstrapテンプレート
Bootstrapとは
Bootstrapとは、Twitter社が開発したCSSを効率的に指定することができるフレームワークです。通常のWeb制作ではそれぞれの要素に自身でCSSを指定する必要がありますが、Bootstrapは既にCSSのスタイルが定義されているため、HTML内でclassを指定するだけでCSSを指定できます。
Bootstrapを使うメリット
- レスポンシブWebデザインを簡単に構築できる
- 安定したデザインを確保できる
- CSSの知識がなくてもWeb制作ができる
- カテゴリー、ページレイアウト、パーツ(ヘッダーなど)を自由に組み合わせられる
- カルーセル、マップ、デイトピッカー、アラートボックスなどWeb制作に使うことが多い要素がショートコードとして使える
- 1サイト1ライセンスのため毎回購入が必要
①Canva
幅広いカテゴリーとパーツのHTML/CSS/Javascript/Bootstrapの含まれるテンプレートデータを16ドルで購入できるテンプレートサイトです。1サイトにつき1ライセンスのため、新規でWebサイトを作る際には毎回購入する必要があります。
利用可能テンプレート例
✓特徴
- 有料(16ドル)
- 400個以上のテンプレートから選択して使用
- 商用利用可能
- カテゴリー、ページレイアウト、パーツ(ヘッダーなど)を自由に組み合わせられる
- カルーセル、マップ、デイトピッカー、アラートボックスなどWeb制作に使うことが多い要素がショートコードとして使える
- 1サイト1ライセンスのため毎回購入が必要
使用言語
- HTML5
- CSS3
- Bootstrap4
- Javascript
②porto
Bootstrapを利用した有料テンプレートの配布サイトです。写真を多く利用するサイトにおすすめのテンプレートが多く用意されています。マルチページのテンプレートとして使うのはもちろん、ランディングページとしても利用できるテンプレートもあるため複数のテンプレートをまとめて揃えたい時におすすめです。
利用可能テンプレート例
✓特徴
- 有料(16ドル)
- コーポレートサイトだけでも19種類のテンプレートが利用可能
- 1サイト1ライセンスのため毎回購入が必要
- 問い合わせフォーム、ログインフォームなどの40種類を超えるパーツが利用可能
- レスポンシブ対応はスマートフォン、タブレットで共通
使用言語
- HTML5
- CSS3
- Bootstrap4
- Javascript
③FreeHTML5.co
コーポレートサイトや医療系、個人サイト、美容系などの王道からウェディングやComing soonページまでWeb制作をする上で持っておきたいページのテンプレートを配布しているサイトです。
配布しているテンプレートのほとんどは無料で利用でき、一部のみ有料となっています。
利用可能テンプレート例
✓特徴
- ほぼ無料利用可能(一部有料あり)
- 25の豊富なカテゴリーに分類されるテンプレートを無料利用可能
- エフェクトなどが搭載されているためお洒落なサイトを作りたい時におすすめ
- ログインフォームなどのパーツもテンプレートとして搭載
- 商用利用可能(無料の場合クレジット表記必須)
使用言語
- HTML5
- CSS3
- Bootstrap4
- JQuery
④THEMEWAGON
600を超える無料テンプレートと、洗練されたデザインの有料テンプレートのそれぞれを配布しているサイトです。有料無料を問わずにさまざまな業種で利用できるテンプレートが多く、品質チェック済テンプレートや人気テンプレートなどがカテゴリーとして分けられているため、実用性のあるテンプレートを探しやすいのが特徴的です。
利用可能テンプレート例
✓特徴
- 無料・有料共にあり
- 600を超えるテンプレートを無料配布
- 企業、飲食業、医療、宿泊施設、ランディングページと幅広いテンプレートを配布
- より洗練された有料テンプレートも29ドル~で購入可能
- テンプレートによってレスポンシブデザインはスマートフォン、タブレットで共通か否か異なる
- Bootstrap4・5の両方に対応
使用言語
- HTML5
- CSS3
- Bootstrap4/5
- Javascript
⑤DESIGNSTUB
コーポレートサイト、ECサイト、ポートフォリオサイトなどを主に揃えている、
Bootstrap4を利用したテンプレートサイトです。個人利用はもちろん、商用利用も可能であり、ポートフォリオサイトに向いているテンプレートを多めに配布しています。
利用可能テンプレート例
✓特徴
- ほぼ無料で利用可能(一部有料あり)
- 約30種類のテンプレートを無料利用可能
- Bootstrapを利用したレスポンシブテンプレート
- animate.cssを使った豊富なアニメーションやカルーセルなどを搭載
- 実務で使いやすいテンプレートが多い
- 商用利用可能(クレジット表記は可能な限り掲載)
使用言語
- HTML5
- CSS3
- Bootstrap4
- SASS
まとめ
HTMLテンプレートを使うメリットと、おすすめのHTMLテンプレート配布サイトをご紹介しました。HTML/CSSで組まれたものだけではなく、レスポンシブ対応に特化したBootstrapで組まれたものも多数テンプレートとして配布されています。
また、それぞれの業種別に使えるテンプレートも豊富に配布されているため、必要に応じてテンプレートを使用することで、Web制作の効率化を図ることが可能です。自分でやると時間がかかるレスポンシブ対応やクロスブラウザ対応も時間を短縮できるため、案件に合わせて使ってみてはいかがでしょう。