head_img head_img

 

無料の
レスポンシブWebデザイン・
テンプレート

TempNateでは日本語のレスポンシブWebデザイン・テンプレートを無料で配布しております。

rwd01

レスポンシブWebデザインとは、スマートフォンに対応しているホームページのこと。

PC、タブレット、スマートフォンなどの様々なデバイスで見やすいサイトを「1つのHTMLファイル」で実現する方法です。

商用利用も可能です。「個人・会社、お店、通販サイト、商店、士業、整骨院・整体院、サロン、教室、病院、学校、大学、研究室、NPO、塾、公共団体」様などにご利用いただけます。テンプレートはZIPファイルで無料でダウンロードしてご利用いただけます。

TempNateは14年以上の実績&歴史があります。多くの商用ホームページ制作の実務経験からテンプレート素材を配布&改良をして参りました。おかげさまでこれまでに数千サイト様以上にご利用いただいております。

TeraPadなどのテキストエディターや、ホームページビルダー、Crescent Eveなどのホームページ作成ソフトで編集可能です。(HTML5に対応しているバージョンはホームページビルダー18以上です)


テンプレートの活用例・サンプル

テンプレートの活用例・サンプル
Flexシリーズの使用例です。このように写真素材を差し替えていただくことで印象が変わります。

 

 

テンプレートの活用例・サンプル
Fastシリーズの使用例です。

 

 

テンプレートの活用例・サンプル
Startupシリーズの使用例です。

 

 

「.com」などのドメインのHPを
最安値級で運営いただけます

 

icon_hand こんな方に喜ばれています。

info11

「.com」などの独自ドメインのホームページを作成したい方へ。

ホームページをHTMLファイル形式で作成して、無料レンタルサーバーや格安レンタルサーバーを活用すれば、月々の費用やコストを極力抑えることが可能です。

月額換算で約100円~300円ほどの運営費(ランニングコスト)で、長期的に最安値級で広告が表示されないホームページを運営できます。

1ページずつファイルを作成して固定して置いておくタイプのホームページ構築方法のため、バージョンアップやデータベースの定期メンテナンスなどの月額管理料金が発生いたしません。

HTMLファイル形式のホームページでは、サーバーはライトプラン、エコノミープランなどの最安値帯のプランを利用できるので、月々のサーバーにかかる費用やコストを削減できます。

あまり費用をかけずに、実用的でSEO対策を考慮したホームページを安定して運営したい方に大変ご好評です。まずはお気軽にテンプレートをダウンロードしてお試しでご利用くださいませ。

 

icon_hand 低価格なドメイン管理サービスと、レンタルサーバーの組み合わせの例

icon

iconムームードメイン + ロリポップ
iconエックスドメイン + エックスフリー
iconお名前.com + さくらのレンタルサーバー
iconお名前.com + エックスフリー

たとえば、「独自ドメイン + 格安サーバー + ホームページビルダー」の組み合わせなら、長期的に格安でスマホ対応ホームページが作成できます。複数サイトの作成も可能です。

また「独自ドメイン + 格安サーバー + Crescent Eve」の組み合わせなら低コストでご利用いただけます。

 

icon_hand ドメインまでは必要ない場合

ドメインまでは必要ない、という方は月々の費用やコストを極力抑えることができます。例えばロリポップや、さくらレンタルサーバーの安値帯プラン(月100円ほど)でサイトを運営できます。

予め用意されている専用ドメインが使用できますので、そちらをホームページのアドレスとしてご利用いただけます。

 

icon_hand HTML型ページ&レスポンシブテンプレートの利点

info03

一般的に、管理画面にログインしてブラウザから更新するタイプの「システム形式」のホームページは、最新バージョンを維持するメンテナンスコストが必要になります。

一方で、ここで配布している「HTMLファイル形式」のレスポンシブテンプレートは、各ページをファイルで作成してサーバーに置いておくHP制作方法です。「静的」と呼ばれます。

各ページに管理画面がないので第三者の外部からはログインができません。高セキュリティ&リスクを低減できます。

「ページを見たまま編集」「月額無料」「SEO対策を考慮した構成」「セキュリティ上のリスクを低減」「バックアップはパソコンに常にある状態」「ブラウザの表示スピードが速い」などの利点があります。

これらの理由から、多くのWeb制作会社さまなどのプロにもご利用いただいております。

現在でも、会社などのコーポレートサイトや、学校、公共施設、そしてWeb制作会社やWebマーケティング会社などの多くは、トップページはHTMLファイル形式で作成されています。

 

icon_hand 無料HPサービスやシステムタイプとの違い

icon

管理画面からログインして編集が行えるHPサービスは、広告をはずしたい場合や、「.com」などのドメインでホームページを運営したい場合は、有料プランで月額1000円~2000円ほどのランニングコストが必要になります。

SEO対策などの検索エンジン対策を考慮した実用的なホームページを作成したい場合は、オプション料金が必要になるケースも。

気になる点はサービスが終了するとホームページ自体が終了になってしまうところ。バックアップや移転ができないため、そのままホームページが終了に。

HTMLファイル形式なら「.com」などのドメインはそのままで、ファイルを移し変えるだけでサーバーの移転が行なえます。(将来の移転コストも軽減)

会社向けホームページで担当者がよく変わるという場合は、何年も放置となってしまいますので心配が残ります。

HTMLファイル形式のホームページなら、データはいつもパソコンにバックアップがある状態です。

 

icon_hand レンタルサーバーを活用したホームページに

icon

現在、レンタルサーバーでホームページを運営されていて、リニューアルをしたい方へ。

HTMLホームページテンプレート形式を活用すれば、今のレンタルサーバーを有効活用できます。

新規ホームページの作成でレンタルサーバーを利用される方は、各レンタルサーバーの最安値プランを利用できます。

 

icon_hand 複数サイトの作成が可能です

ホームページは1つ持っているけれど新しいコンセプトやテーマでサイトを別で作成したいという方は、HTMLファイル形式のテンプレートを活用すれば複数のサイトを作成することもできます。

すでにレンタルサーバーを利用されている場合は、1つのドメインの中に、2つ以上のサイトを作成することが可能です。

例えばサーバー内をフォルダで区切って、その中にテンプレート一式を設置(アップロード)することで2つ目のサイトを作成できます。

このように、すでにホームページを作成されている方で、学校、病院、研究室、公共団体様など、既存のWebサイト内のサーバーに専用ページを設置したい方にも大変ご好評いただいております。


レスポンシブ・テンプレートの一覧へ

 

テンプレートご利用者様にうれしい声をいただきました

jirei01

【鍼灸院様】

このたびテンプレートを活用させていただき、自院の新サイトとしてアップロード致しました。自院の旧サイトはホームページビルダーでゼロから作成したものでスマホ対応もできていませんでした

「もっと患者さん達にとって見やすいサイトにしたい!」という気持ちはありましたし、何より患者さんに発信する情報は自分自身で手掛けたいという気持ちが強かったです。

文字情報や画像はもちろん、レイアウト、文字の行間の幅、余白の取り方によって、一見したときの心地よさが全然違います。それを出来る限り、自分らしいものに仕上げたかったのです。

その後テンプレートを検索し、なかなかシックリくるものがありませんでしたが、tempnate様のテンプレートをみつけ「これしかない!」と感じたのです。

おかげ様で、以前からの望みであったスマホ対応が果たせました。デザインと機能的なレイアウトにも、しみじみ満足しております。素人の自作サイトでは、こんなサイトは絶対にできません。tempnate様に心から感謝申し上げます。本当に有難うございました。

 


当テンプレートを書籍で紹介していただきました

media

『はじめてのSEO』
瀬内賢さま

SEO対策(検索エンジン上位表示対策)についての解説書です。本の中で「無料テンプレート」としてTempNateのレスポンシブテンプレートを紹介していただきました。本当に有難うございます。

 


テンプレートの免責事項

icon

【免責事項】 素材の著作権はTempNateにあります。
また、テンプレートをご利用いただいた際に発生した不都合に関しては、責任を負えませんのでご了承下さいませ。

・現在、追加の設置マニュアルを作成中です。

・レスポンシブテンプレートでは、文字コードは「UTF-8」です。

・既存のホームページから移し変えるなどの場合、必ず以前のホームページファイルなどのバックアップをとってから作業を行なってください。

・セルフでのご利用になります。設置方法などメールサポートは行えません。何卒ご了承くださいませ。

 


テンプレートのご利用規約

icon_checker 個人や非商用でのご利用はもちろん、商用無料のシンプルなホームページテンプレートです。(HTML・CSSなど)

icon_checker スマホ対応(レスポンシブ)のHTMLテンプレート素材でSEO対策にも対応。

icon_checker 公式ホームページ用、学校、研究室、イベント、求人用サイト、ランディングページ(LP)、オンラインレッスンなど様々なテーマのホームページにご利用いただけます。

kinshi
kinshi

※大変申し訳ありませんが、上記の業種サイト様にはご利用いただけません。何卒ご了承くださいませ。

例えば、他サイトの内容をコピーした複数サイトの作成などはご遠慮いただいております。
店舗さまなどの支店用の複数サイトのご利用は可能でございます。

 


レスポンシブ・テンプレート素材

 

Startupシリーズ 【NEW】


startup

 

 

1カラムテンプレート 1ページ版 (1ページのみのサイト向け)


icon_next1カラムは「左のサイドエリア」がない「コンテンツエリア」だけの1列レイアウトです。

icon_nextこちらは1ページだけのサイトさま向けのホームページテンプレートです。


photo
btn
photo
btn
photo
btn

 

photo
btn
photo
btn
photo
btn

 

 

1カラムテンプレート 1ページ版 (縦長の1ページ)


icon_nextこちらは必要な情報を詰め込んだ、1ページでお申込みまで完結する、縦長の1ページ用のホームページテンプレートです。


photo
btn

※縦長版です

photo
btn

※縦長版です

photo
btn

※縦長版です

 

photo
btn

※縦長版です

photo
btn

※縦長版です

photo
btn

※縦長版です

 

 

1カラムテンプレート (複数ページ版) HTML5テンプレート


icon_nextこちらは1ページだけではなく、複数ページ用のホームページテンプレートです。


photo
btn
photo
btn
photo
btn

 

photo
btn
photo
btn
photo
btn

 

 

template_page_btn

 

 

 

Flexシリーズ 【NEW】


rwd

 

 

2カラムテンプレート & 横幅900px & センター配置 HTML5テンプレート


icon_next2カラムは「左のサイドエリア」と「右のコンテンツエリア」に分かれている2列レイアウトです。


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

1カラムテンプレート & 横幅1080px & センター配置 HTML5テンプレート


icon_next1カラムは「左のサイドエリア」がない「コンテンツエリア」だけの1列レイアウトです。


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

template_page_btn

 

「テキスト版」と「タイトル画像版」の違い

 

 


 

biz シリーズ

 

rwd

 

 

横幅ワイド版 & ヘッダーメニューがワイド


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

横幅900px & センター配置


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

template_page_btn

 

「テキスト版」と「タイトル画像版」の違い

 

 


 

fastシリーズ 2カラム版(シンプルテンプレート)


rwd

 

 

2カラムテンプレート & 横幅900px & センター配置


icon_next2カラムは「左のサイドエリア」と「右のコンテンツエリア」に分かれている2列レイアウトです。


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

2カラムテンプレート & 横幅ワイド版 & ヘッダーメニューがワイド


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

template_page_btn

 

「テキスト版」と「タイトル画像版」の違い

 

 

 

 

fastシリーズ 1カラム版(シンプルテンプレート)


1カラムテンプレート & 横幅900px & センター配置


icon_next1カラムは「左のサイドエリア」がない「コンテンツエリア」だけの1列レイアウトです。


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

1カラムテンプレート & 横幅ワイド版 & ヘッダーメニューがワイド


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

template_page_btn

 

「テキスト版」と「タイトル画像版」の違い

 

 


 

Value Fineシリーズ

 

rwd

 

 

横幅900px & センター配置(ベーシックなテンプレートです)


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

template_page_btn

 

「テキスト版」と「タイトル画像版」の違い

 

 


 

Value シリーズ

 

rwd

 

 

横幅900px & センター配置


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

横幅ワイド版 & ヘッダーメニューがワイド


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

template_page_btn

 

「テキスト版」と「タイトル画像版」の違い

 

 


 

Floralシリーズ

 

rwd

 

 

横幅ワイド(エステ、サロン向けテンプレートです)


photo
btn
btn
photo
btn
btn
photo
btn
btn

 

 

template_page_btn

 

「テキスト版」と「タイトル画像版」の違い

 

 


 

SIMPLE 横幅900px

 

rwd

 

 

photo
btn
photo
btn
photo
btn

 

 

template_page_btn

 

 


 

BASIC 横幅900px

 

rwd

 

 

photo
btn
photo
btn
photo
btn

 

 

template_page_btn

 

 


 

写真素材を着せ替えることで高品質HPに


無料写真素材サイトで着せ替えすればより高品質HPに!

ホームページの印象は写真素材で大きく変わります。

当テンプレートの写真素材は配布用の写真となっております。

無料写真素材サイトなどで差し替えることで高品質な印象のホームページに変わります。

 

 

テンプレートの設置方法

 

 

テンプレートの設置マニュアル(PDF)

icon_next ホームページテンプレートの設置マニュアル

まずはこちらのマニュアルを参考にしながらホームページを作成してみて下さい。

Crescent Eve、ホームページビルダーの使い方マニュアル・操作方法についてのPDFも掲載しています。

詳細なホームページ制作をご希望の方は、ホームページビルダー・マニュアル一式をご利用ください。

 

 

テンプレートの編集方法&サーバーなど

 

 

よくあるご質問

 

 

テンプレートの利用規約&注意事項


kinshi
kinshi

icon_next 大変申し訳ありませんが、上記の業種サイト様にはご利用いただけません。どうぞご了承願います。

こちらのテンプレートは無料でご利用していただけます。商用利用も可能でカスタマイズは自由に行っていただけます。ただし、フッター部分にある著作テキスト表示は削除しないでください。どうかよろしくお願いいたします。


smt02

icon_next HTML5で作成しています。Googleクローム、Firefox、safari、Microsoft Edgeなどのブラウザをダウンロードして、表示を確認しながら編集してください。(Internet Explorer9以上)


icon_next Internet Explorer8以下での表示対策として「html5」「css3-mediaqueries」などのライブラリを読み込んでいます。head要素内に「if lt IE 9」という記述をしています。テンプレートが入っているフォルダに「js」というフォルダがあるのですが、こちらにjsファイルが入っています。

 

 

ホームページ制作代行サービスのご案内

icon_next 格安ホームページ制作サービス

自分で作成するのは難しいという方向けの格安ホームページ制作代行サービスです。お気軽にご相談ください。

 

 

著作テキスト削除のライセンスサービス

レスポンシブ・テンプレートの「design by ~」という「著作テキスト」の削除をご希望の方は
著作テキスト削除サービスをご利用くださいませ。何卒よろしくお願いいたします。

 

 

ホームページ制作の代行にもご利用いただけます。

当テンプレートを使用して、ホームページ制作の代行ができます。(制作のお仕事、副業、スクールでのご利用など)

例えば、知人の会社や整骨院さまから、有償でのホームページ制作のご依頼があった場合、当テンプレートを活用してサイトを作成していただけます。

その後に、著作テキストを削除して、会社や整骨院さまにサイトをお渡しできます。

クラウドソーシングなどのお仕事代行サービスでのご利用も可能でございます。

代行制作でご利用の際は「ライセンス登録」をお願いしております。ライセンス登録ページにある、 メールフォームからお申し込みくださいませ。よろしくお願いいたします。

 

レスポンシブ・テンプレートの一覧へ

 

 

レスポンシブWebデザインの主な特徴について

icon_nextレスポンシブWebデザインとは、PC、タブレット、スマートフォンなどの様々なデバイスに対応したサイトを「1つのHTMLファイル」で実現する方法です。特徴をご紹介いたします。

 

1つのHTML

info

レスポンシブWebデザインのHTMLは1ページにつき1つです。スマホ用にHTMLを個別で作成する形ではありません。

デザイン性を高めるなどの理由で、スマホ専用サイトを個別で作成されている方も多いと思いますが、その場合はトップページで2つのバージョンのファイルを用意する必要があります。

レスポンシブテンプレートでは、HTMLは1つなので、トップページで1つのHTMLファイルになります。

 

HTML5

info

レスポンシブテンプレートはHTML5で作成しています。

 

ホームページ作成ソフトについて(ホームページビルダーなど)

info

ページの編集には視覚的にわかりやすいホームページビルダーをおすすめさせていただいておりまして、HTML5に対応しているバージョンはホームページビルダー18以上です。(*17も一部対応とのこと)

*「TeraPad」などのテキストエディターでも直接編集していただけます。

 

メディアクエリ

info

デバイスの画面サイズごとに、HTMLに適用するデザインのスタイルを切り替えます。

 

viewport設定

info

デバイスで表示するサイズの設定です。こちらを指定する事で、例えばiPhoneなどのスマホで見た時に、画面の横幅に合わせたサイズでページが表示されます。

 

フルードイメージ

info

画面のサイズに合わせて、画像のサイズを拡大・縮小します。

例えば、横長の画像は、ホームページの横幅からはみ出ないように、自由に拡大・縮小させる「100%」で指定をしています。

*画像ファイルはスマホでの表示を考慮して、ファイルサイズの軽量化ツールでできる限り軽くしています。

 

文字コード

info

レスポンシブテンプレートでは、文字コードは「UTF-8」です。

これまで配布をしてきました、当テンプレートのPC専用テンプレートの文字コードは「SHIFT-JIS」になっています。

 

ブラウザ対策

info

Internet Explorer8以下での表示対策として「html5」「css3-mediaqueries」などのライブラリを読み込んでいます。head要素内に「if lt IE 9」という記述をしています。

テンプレートが入っているフォルダに「js」というフォルダがあるのですが、こちらにjsファイルが入っています。

 

ブラウザでの表示確認

info

PCのブラウザ(Internet Explorer、Google Chrome、Firefox、Safari)には、さまざまなデバイスでの表示を確認できます。

例えば、Google Chromeのデベロッパーツールに搭載されている「デバイスモード」を使用すればiPhoneなどの端末での表示を確認する事ができます。

ちなみに、PCでご覧の場合、ブラウザの横幅をせばめていただくと、横幅に合わせてデザインが変わります。

タブレットサイズ、スマホサイズになった時に自動で表示が変換されます。

 

レスポンシブWebデザインの注意点など

info

1つのHTMLファイルでPC、タブレット、スマートフォンなどのデバイスに変換されるので、便利ですが制作が手軽というわけではありません。

例えば、メイン画像についてはスマートフォン用に作成する方が見やすいですし、スマホでは電話ボタンを表示させて、PCでは非表示にする、というように個々の設定が必要になります。

当テンプレートでは、メイン画像はPCサイト用と、スマホ用で分けるようにしています。ですので、スマホサイト用にもメイン画像の作成をお願いいたします。

 

まとめ

info

この様に、マルチデバイスに対応した日本語の無料テンプレートになっております。

PC、タブレット、スマートフォンなどの様々なデバイスに対応したサイトを「1つのHTMLファイル」で実現する事がポイントです。

2015年4月から開始されたGoogle(検索エンジン)の「モバイルフレンドリーアップデート」の影響で、スマホ対応サイトが増えていると思いますが、商用ホームページではまだまだ高額になるケースが多いようです。

また、実用的なホームページを作成するには、デザインソフトなどで見た目を考慮しながら作成する必要があるのですが、プロに制作を代行してもらった場合、自分で修正をする事自体が難しいというケースも多いと思います。

こちらで配布しているレスポンシブテンプレートを活用して、ホームページ編集ソフトを活用したり「TeraPad」などのテキストエディターを活用してご自身の手で実際にファイルを触ってみてください。

皆様の情報発信のお手伝いができればうれしく思います。

たくさんの改良を続けていきますので、今後ともどうぞよろしくお願いいたします。

 


ページトップに戻る