head_img head_img

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

rwd01

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

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

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

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

喜ばれているポイントは?低コスト


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

jirei01

【鍼灸院様】

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

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

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

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

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


テンプレートの使用&編集に関する注意点

icon

現在、設置マニュアルを作成中です。現時点ではある程度の知識がある方向けになります。

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

セルフでのご利用になります。設置方法などメールサポートは行えません。ご了承願います(_ _)

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

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

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

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

smt02HTML5で作成しています。できればInternet Explorer9以上か、Firefox、Googleクローム、safariなどのブラウザをダウンロードして、表示を確認しながら編集してください。

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

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

 

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

kinshi
kinshi

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


 

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

fastシリーズ 2カラム版

rwd

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

2カラムは「左のサイドエリア」と「右のコンテンツエリア」に分かれている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 & センター配置

1カラムは「左のサイドエリア」がない「コンテンツエリア」だけの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

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


 

biz シリーズ

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


 

 

テンプレートの設置方法


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


 icon レスポンシブテンプレート設置マニュアル★総合(PDFファイル・ダウンロード)

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



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


 

よくあるご質問


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

kinshi
kinshi

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

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


 

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

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


 

 

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

レスポンシブ・テンプレートを使用して、ホームページ制作の代行ができます。 例えば、知人の会社や整骨院さまから、有償でホームページ制作のご依頼があった場合、当テンプレートを活用してサイトを作成。 その後、著作テキストを削除して、会社や整骨院さまにサイトをお渡しできます。

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


 

 

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

レスポンシブ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」などのテキストエディターを活用してご自身の手で実際にファイルを触ってみてください。

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

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


ページトップに戻る