icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

 

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

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

自分でデザインするためには、まずCSSの書き方などを理解する必要があります。

 

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

 

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

 

目次

汎用系

ポートフォリオ系

LP(ランディングページ)用

 

汎用系

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

restemp_mcom

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

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

 

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

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

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

 

Brushed

restemp_brushed

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

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

Brushed

 

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

 

Enzyme

restemp_enz

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

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

Enzyme

 

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

 

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

 

Narrow

Bootstrap3フレームワークを使用した、メンテナンス性の良いテンプレートです。jQueryを使用したスケジュール、CSSアニメーションなどの機能があります。

Narrow

 

Beam

こちらもBootstrapフレームワークを使用したテンプレートです。フルスクリーンイメージが特徴です。

Beam

 

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

 

Fitness

こちらは、Fitnessという名前のとおり、フィットネス系のサイトに向いたテンプレートです。

フィットネスの各種コースのスケジュール表や、トレーナーを紹介するページ、お問い合わせページなど、フィットネス系サイトを立ち上げるのに必要なテンプレートがひととおり揃っています。

Fitness

 

[PR] Webデザインで副業する方法とは

ポートフォリオ系

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

 

Small

restemp_small

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

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

Small

 

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

 

Synthetica

気持ち良いアニメーションが特徴のテンプレートです。sketchファイルも入っているので、デザインの編集を行うことができます。個人的なポートフォリオの他、自社の商品紹介、動画紹介にも使えるでしょう。

Synthetica

 

BOX

ギャラリーのように並べた写真が特徴のテンプレートです。サブページでそれぞれの情報を記載できるテンプレートがあります。個人のポートフォリオ用として、デザインや作品の紹介に向いているでしょう。

BOX

 

verum

職務経歴や、自分のスキルをグラフィカルに紹介できるテンプレート。エンジニアのポートフォリオとして使うと面白いかもしれませんね。

verum

 

LP(ランディングページ)用

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

 

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

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

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

 

Landing Page

restemp_lp

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

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

Landing Page

 

Simple

パララックス効果を取り入れた、フルスクリーンでイメージを展開するテンプレート。

シンプルなランディングページ用のテンプレートです。

Simple

 

New Providence HTML+PSD Freebie

 

New Providenceは、バランスの取れたタイポグラフィ、高品質のiPhoneモックアップが特徴のランディングページ向けテンプレートです。

New Providence HTML+PSD Freebie

 

Stellar

固定ナビゲーションと、美しいグラデーションの背景が特徴の、ランディングページ向けテンプレート。

Stellar

 

Snow

アニメーションなどの視覚効果も必要最小限な、とってもシンプルなランディングページ向けテンプレート。

Snow

 

Elevate

テキストアニメーションや、画面を二分割したデザインが特徴の派手系ランディングページ向けテンプレート。

Elevate

 

いかがでしたか。

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

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

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