レスポンシブデザインを作るときに便利なテンプレート集

Pocket

Tweet

タイトル・URLをコピー

タイトル・URLをコピー

記事タイトルレスポンシブデザインを作るときに便利なテンプレート集

記事URLhttps://digitor.jp/textbook/responsive-template/

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

海外風の洗練されたデザインのテンプレートを無料配布しているサイトです。ポートフォリオサイト向けのデザインが多めですが、ショップサイトのテンプレートとしても利用できるものも揃っています。

利用可能テンプレート例

②Template Party

日本製のさまざまな業種のWeb制作で活用できる、約1100件のテンプレートを無料配布しているサイトです。同じテンプレートの中でも複数のレイアウトや配色のシリーズを同時配布しているため、CSSを修正する手間も少なくて済みます。

利用可能テンプレート例

③TempNate

個人ページやコーポレートサイト、教育、ECサイト、芸術、スポーツ、医療、美容、政治など幅広い業種で無料テンプレートを使われている実績があるサイトです。カスタマイズしやすいため、全てテンプレートではなく自身でもカスタムしたい時に利用できます。

利用可能テンプレート例

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

企業サイトテンプレートや美容系、アパレル系、カフェ、医療機関などさまざまな業種で利用可能なテンプレートを配布しているサイトです。

各テンプレートでデモサイトがあるため、内容を確認してからダウンロードできます。有料無料で使用できるテンプレート数は変わりません。

利用可能テンプレート例

レスポンシブなBootstrapテンプレート

Bootstrapとは

Bootstrapとは、Twitter社が開発したCSSを効率的に指定することができるフレームワークです。通常のWeb制作ではそれぞれの要素に自身でCSSを指定する必要がありますが、Bootstrapは既にCSSのスタイルが定義されているため、HTML内でclassを指定するだけでCSSを指定できます。

①Canva

幅広いカテゴリーとパーツのHTML/CSS/Javascript/Bootstrapの含まれるテンプレートデータを16ドルで購入できるテンプレートサイトです。1サイトにつき1ライセンスのため、新規でWebサイトを作る際には毎回購入する必要があります。

利用可能テンプレート例

②porto

Bootstrapを利用した有料テンプレートの配布サイトです。写真を多く利用するサイトにおすすめのテンプレートが多く用意されています。マルチページのテンプレートとして使うのはもちろん、ランディングページとしても利用できるテンプレートもあるため複数のテンプレートをまとめて揃えたい時におすすめです。

利用可能テンプレート例

③FreeHTML5.co

コーポレートサイトや医療系、個人サイト、美容系などの王道からウェディングやComing soonページまでWeb制作をする上で持っておきたいページのテンプレートを配布しているサイトです。

配布しているテンプレートのほとんどは無料で利用でき、一部のみ有料となっています。

利用可能テンプレート例

④THEMEWAGON

600を超える無料テンプレートと、洗練されたデザインの有料テンプレートのそれぞれを配布しているサイトです。有料無料を問わずにさまざまな業種で利用できるテンプレートが多く、品質チェック済テンプレートや人気テンプレートなどがカテゴリーとして分けられているため、実用性のあるテンプレートを探しやすいのが特徴的です。

利用可能テンプレート例

⑤DESIGNSTUB

コーポレートサイト、ECサイト、ポートフォリオサイトなどを主に揃えている、 Bootstrap4を利用したテンプレートサイトです。個人利用はもちろん、商用利用も可能であり、ポートフォリオサイトに向いているテンプレートを多めに配布しています。

利用可能テンプレート例

まとめ

HTMLテンプレートを使うメリットと、おすすめのHTMLテンプレート配布サイトをご紹介しました。HTML/CSSで組まれたものだけではなく、レスポンシブ対応に特化したBootstrapで組まれたものも多数テンプレートとして配布されています。

また、それぞれの業種別に使えるテンプレートも豊富に配布されているため、必要に応じてテンプレートを使用することで、Web制作の効率化を図ることが可能です。自分でやると時間がかかるレスポンシブ対応やクロスブラウザ対応も時間を短縮できるため、案件に合わせて使ってみてはいかがでしょう。