キャンペーン ツイートでAmazonギフト券10,000円もらえる!締め切り間近!

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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

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

 

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

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

 

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

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

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

restemp_mcom

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

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

 

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

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

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

 

Brushed

restemp_brushed

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

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

Brushed

 

[PR] 現役Webデザイナーに質問しながらHTML/CSSを習得する学習方法とは

Orion

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-09-10-51-45

事前登録サイトにしてはもったいないくらいおしゃれなテンプレートです。

パララックスで奥行きがあり、トップに大きく画像をスライドショーで表示できるので印象に残るサイトになるはずです。

残り時間も自由に表示できるので、キャンペーンサイトとしても役立てられるはずです。

Orion

 

ASTRAL

restemp_ast

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

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

ASTRAL

 

Personal

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-09-11-54-34

個人のポートフォリオサイトとして利用できるテンプレートです。

自分のプロフィール、経歴、スキルなど情報量は少なく1ページで発信することができるので、一つ作っておくと良いでしょう。

Personal

 

Valet

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-09-11-47-28

ランディングページ用のテンプレートとして使えるでしょう。

ファーストビューの水色が爽やかな印象を与えて、自社製品の紹介もポジティブに映るはずです。

自社製品の紹介、製品の特徴、顧客の声などを掲載することができるので、ランディングページとしては十分利用できるかと思います。

Valet

 

Small

restemp_small

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

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

Small

 

Ranger

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-09-10-56-20

アプリの紹介や自社サービスのランディングページとして活用することができるでしょう。

スクロールに合わせて浮かび上がったり、横からふわっと表示されたり動きの多いサイトです。こういったモダンなサイトを作りたいという人にはおすすめです。

Ranger

 

Enzyme

restemp_enz

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

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

Enzyme

 

Landing Page

restemp_lp

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

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

Landing Page

 

Nantes

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-09-11-01-36

こちらは、企業のコーポレートサイトを作る上で相性の良いテンプレートになるでしょう。

ワンスクロールで、会社概要や運営しているサービス、会社の中の人を掲載できるようになっています。海外のコーポレートサイトではよく見るレイアウトになっているので、ぜひ参考にしてみてください。

Nantes

 

Bow

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-09-11-11-22

トップのグラデーションが非常に印象的なテンプレートです。

自社製品をより強くPRしたい時に使えそうなイメージです。

Bow

 

Fornax

restemp_forn

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

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

Fornax

 

Elate

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-09-11-06-41

マウスオーバーした時のホバーや、スクロール時のアニメーションなど多彩の動きを表現したテンプレートになっています。

海外では多くの人がダウンロードしているようで非常に人気なのでしょう。

自分でコーディングをしたら時間のかかるアニメーションが多いですが、テンプレートを使うことですぐに形にできるはずです。

Elate

 

Stanley

restemp_stan

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

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

Stanley

 

Dsign

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-09-11-57-59

個人のポートフォリオとして、企業のブログサイトとして使えるテンプレートです。

各記事や作品をグリッドで掲載できるので、自分で作ったものが多ければ多いほど見栄えが良く映るでしょう。

ブログ記事を掲載するだけでもまた見に来ようと思ってもらえるはずです。

Dsign

 

Obscura

restemp_obs

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

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

Obscura

 

Hold

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-09-11-26-30

黒の背景に白の文字と非常にシンプルな印象を与えるテンプレートです。

このテンプレートの大きな特徴として、黒の背景・白の文字を切り替えることができるのです。切り替えると白の背景に黒の文字となります。

サイト内でこういった遊び心があると、よりユーザーも楽しんでサイトを回遊できそうですね。

Hold

 

Type & Grids

restemp_tg

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

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

Type & Grids

 

Magazine

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-09-11-22-02

Magazineというタイトルのテンプレートだけあって、雑誌をイメージさせるようなサイトを作ることができそうです。

白を基調として情報は少なく、写真を大きく表示しているのでスタイリッシュな作りになるでしょう。

個人や会社のブログなどブランディング重視なサイトを作る上で役立つはずです。

Magazine

 

いかがでしたか?

無料とは思えないほどクオリティの高いテンプレートが多く出てきています。自分でゼロから作るのは大変だという人は、ぜひ参考にしましょう。

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

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