すぐに使いたい!レスポンシブWebデザイン対応のHTMLテンプレート10選

レスポンシブWebデザイン対応の【無料】HTMLテンプレートを紹介する記事です。スマートフォンやタブレットなどの多デバイスに対応できる、フリーテンプレートを集めてみました。海外サイトも多いですが、日本語表示が可能か確認済みです。

スマートフォンやタブレットの普及に伴って、Webサイトを多デバイスに対応することが増えてきました。

 

その1つの解決策として、「」が多く使われています。

レスポンシブWebデザインとは、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる手法です。スマホからアクセスしても見やすく表示されます。

 

そこで今回は、レスポンシブWebデザインに対応した無料(フリー)のHTML/CSSテンプレートを配布しているサイトを集めてみました。海外サイトも多いですが、全てのテンプレートで日本語の表示が可能か(文字化けしないか)を確認済みです。

 

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

restemp_mcom

シンプルでわかりやすいのが特徴の日本語テンプレート配布サイトです。

スタイルシート内のコメント・説明は日本語のため編集しやすく、テンプレートを利用してのサイト作成の入門としても使えます。

 

なお、テンプレートは無料で使用できますが、一番下にクレジットが入ります。

あとでシリアルキーを購入することによって解除することも可能です。

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

 

 

Brushed

restemp_brushed

上のメニューを選択すると該当のコンテンツにスクロールする、1ページ完結タイプのデザインです。コンテンツのソート機能が素晴らしく、スムーズにかっこよく抽出してくれます。

かなりの高機能のため一見難しそうですが、設置までの手順などがとても丁寧に説明されているので安心です。

Brushed

 

 

PR

ASTRAL

restemp_ast

ポートフォリオサイトを作りたい!という方におすすめしたいテンプレートです。

作品を展示するページ、問い合わせを受け付けるページなどが必要最低限におさまっています。

ASTRAL

 

 

Small

restemp_small

こちらもASTRAL同様、ポートフォリオサイトに適したデザインです。

ASTRALが女性らしいデザインなのに対し、こちらはクールな雰囲気になっています。

Small

 

 

Enzyme

restemp_enz

フリーとは思えないほど充実した内容のテンプレートです。

コンテンツの多い本格的なビジネス系サイトを作りたい方などにおすすめです。

Enzyme

 

 

Landing Page

restemp_lp

こちらもビジネス感のある大人っぽいデザインです。

Enzymeと比べるとシンプルなサイトになります。

Landing Page

 

 

Fornax

restemp_forn

シンプルでフラットなデザインの、おしゃれなテンプレートです。

必要な機能も一通り揃っていて、可愛くて使いやすいアイコンやボタンも付いています。

Fornax

 

 

Stanley

restemp_stan

ファイルの構成もわかりやすいため、カスタマイズにも便利なテンプレートです。でき上がったサイトもシンプルなので動作も軽快になっています。

配布元のサイトで設置の方法が丁寧に説明してあります。

Stanley

 

 

Obscura

restemp_obs

Pinterest(写真や動画などのコンテンツをピンボードでとめたようなスタイルのSNS)風のテンプレート。半透明を使った幻想的なデザインが特徴です。

こちらは個人使用でのみのフリーテンプレートなので注意しましょう。

Obscura

 

 

Type & Grids

restemp_tg

記事をクリックして選択すると、ページ移動やポップアップではなく、その場でスムーズに展開して詳細が見られるテンプレートです。

どのように動くのかはデモサイトで試してみてください。

Type & Grids

 

 

いかがでしたか?

WordPressでサイトを制作したい場合は、レスポンシブWebデザイン対応のWordPress無料テーマの記事も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。レスポンシブWebデザインも学ぶことができます。