テンプレートについて
「テンプレどん」のプロ版、スマホ対応のHTML・LPテンプレートです。カスタマイズのしやすさを重視しているためシンプルなデザインが多いですが、どの業種にも合うように色変更やレイアウトの追加ができます。
既成のテンプレートによくある、この項目はいらない、ここにもう少し追加できたらいいのにという時になるべくコードを読まなくて済むよう、自在にカスタマイズがしやすいテンプレートを目指しました。
主に1ページから10ページ以下の小規模WEBサイト制作を想定しています。ご使用は無料ですのでお気軽にダウンロードしてお使いください。
2024.10.23 テンプレートのバグ修正をしました。
2024.03.01 ポートフォリオテンプレートを公開しました。
2023.09.20 インボイス制度導入に伴い、コピーライト削除費を2,000円→2,200円に見直しました。
テンプレート
シンプルテンプレート
アニメーションの動きをつけたシンプルなテンプレートです。コーポレート・ランディングページなどの制作にお使いください。
コピーライト削除をご希望のかたは以下からご注文ください。カラーマニュアルとデータ特典有。
￥2,200円（税込）
コピーライト削除ご注文
カフェテンプレート
スライドショーやフルスクリーン画像のテンプレートです。カフェ以外にもお店や企業のサイトなどにも使えます。
コピーライト削除をご希望のかたは以下からご注文ください。カラーマニュアルとデータ特典有。
￥2,200円（税込）
コピーライト削除ご注文
マルチテンプレート
ページ数を多めに作るシンプルなテンプレートです。コーポレート・ランディングページなどの制作にお使いください。
コピーライト削除をご希望のかたは以下からご注文ください。カラーマニュアルとデータ特典有。
￥2,200円（税込）
コピーライト削除ご注文
ナノテンプレート
最小構成で作ったテンプレートです。写真を掲載するギャラリーサイト・コーポレートなどの制作にお使いください。
コピーライト削除をご希望のかたは以下からご注文ください。カラーマニュアルとデータ特典有。
￥2,200円（税込）
コピーライト削除ご注文
ポートフォリオテンプレート
イラストや写真を掲載するポートフォリオサイト・コーポレートなどの制作にお使いください。
コピーライト削除をご希望のかたは以下からご注文ください。カラーマニュアルとデータ特典有。
￥2,200円（税込）
コピーライト削除ご注文
コピーライトの削除について
プロ版の著作権表示のコピーライトは無断削除・改変禁止です。必要なかたは削除ご注文ボタンからご購入ください。ライセンスは１サイトごとにご使用いただけます。複数サイトをご希望の場合は都度ご注文ください。
お支払い方法はクレジットカード決済です。大手企業でも使用されているStripeを導入しています。手数料はかかりません。決済後にコピーライト削除のご案内をいたします。
決済はカード会社に委託し、カード情報は当方では受け取りませんのでご安心ください。
銀行振込をご希望のかたはお問い合わせください。
メールフォームについて
メールフォームは別となりますので、必要な場合は他サイトで配布されているPHPなどのフォームを導入いただく形になります。簡単なものはGoogleフォームやフォームズなどで作成してリンクを貼る、またはページ内に埋め込むと導入が楽です。
以下のCMSもご用意していますが、簡易的なメールフォームのみで使用するには大がかりなので、上記の方法をお勧めしています。
使い方
装飾について
テンプレート自体は最低限の装飾のみ行なっています。本体はCSSフォルダ内の「grid.css」ファイルに格納、各種デザインは「style.css」ファイルに上書きしています。なるべくコードが肥大化して読むのがウンザリしないよう、少なくしています。その他は外部ファイルです。
メニューボタンは、コーディングが楽に済むように画像で作成しています。もしデザインを変えたい場合は、imgフォルダをご覧ください。
カラーや画像の変更
色変更は「style.css」上部のroot一覧にまとめているのでカラーコードを変更してください。カラーコードとimgフォルダ内の画像を変えるだけで、別業種のサイトにイメチェンできます。テキストはサイトの内容に合わせてindex.htmlの文言を変更してください。テキストを変更するだけで差し替えられます。
合うカラーリングがよく分からない！という時は、たとえば青系なら青一色でまとめて、薄い水色を背景色やリンクカラーにするだけで印象がまとまります。
■カラーリング変更前
■カラーリング変更後
レイアウトをカスタマイズするには
項目を追加したい場合は、下記のようにcontainer内のコードをまるごとコピペしてください。
横幅が全部で１２の数字になるようにレイアウトしていきます。このテンプレートはCSSフレームワークを元に作成しています。
<div class="container">
<div class="row">
<div class="col span-12">
<p>１２分割。ここに画像やテキストを入れていきます。</p>
</div>
</div>
</div>
例えばブロックを２分割したい場合
<div class="container">
<div class="row">
<div class="col span-6">
<p>６分割</p>
</div>
<div class="col span-6">
<p>６分割</p>
</div>
</div>
</div>
ブロックを４対８で表示する場合
<div class="container">
<div class="row">
<div class="col span-4">
<p>４分割</p>
</div>
<div class="col span-8">
<p>８分割</p>
</div>
</div>
</div>
という具合に、１つのコンテンツが全部で１２の数字になるようにレイアウトを組んでいけばOKです。Bootstrapなどを使い慣れているかたは取っ付きやすいと思います。数字を変えるだけでレイアウトを増やしたり減らしたりができます。
１つのコンテンツ内ですぐ下に別のブロックを入れたい場合
<div class="container">
<div class="row">
<div class="col span-7">
<p>７分割</p>
</div>
<div class="col span-5">
<p>５分割</p>
</div>
</div>
<div class="row">
<div class="col span-2">
<p>２分割</p>
</div>
<div class="col span-10">
<p>１０分割</p>
</div>
</div>
</div>
このように「row」を並べて表示させることもできます。テンプレートによって細かい装飾タグが入っていることもありますが、レイアウトを囲んでいるのはほとんど上記のタグなので、とりあえずこれだけ覚えておけばカスタマイズは可能です。
幅ごとにカラムの数を変えたい
<div class="container">
<div class="row">
<div class="col span-4 span-12-md">
<p>4分割 12分割-md</p>
</div>
<div class="col span-4 span-6-md">
<p>4分割 6分割-md</p>
</div>
<div class="col span-4 span-6-md">
<p>4分割 6分割-md</p>
</div>
</div>
</div>
横幅が980px以上表示のときの-mdオプションを付けています。通常のspanは768px以上の表示です。幅を指定するカラムの数を変えたい用途があればお使いください。使わなければ無視してください。
HTML・CSSおすすめ参考書
HTML・CSSについて詳しく学びたいという方向けのオススメ参考書です。なるべく初めてでも分かりやすい内容を選んでみました。
 |
ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座 新品価格 |
タイトルの通り１冊でHTML・CSSの作り方の全体が学べます。Flexboxのレイアウトもわかりやすく載っています。
 |
(サンプルコードDL特典付き)できるポケット Web制作必携 HTML&CSS全事典 改訂3版 新品価格 |
HTML・CSSの逆引き辞典です。分からないところだけをすぐに開いて読むことができるので便利です。
 |
新品価格 |
今どきのおしゃれな動きをつけたい時にも使えるシンプルで使い勝手の良い参考書です。
利用規約
ご利用について
テンプレート対象者はHTML・CSSが少しわかる人、デザインやコーディングの手間を減らしたい人です。
商用・個人のサイト、制作会社の二次使用も無料でお使いいただけます。再配布は不可です。プロ版テンプレートの著作権表示のコピーライトは無断削除・改変禁止です。著作権表記リンク削除をご希望のかたはライセンスをご購入ください。
ご利用の際、制作者へのご連絡は不要です。カスタマイズ等は自由ですが、自己責任でお願いします。
公序良俗に反するサイト・違法サイトの制作でのご利用はご遠慮願います。
同封している画像も再配布可能なフリー素材のみ使用しておりますので、そのままお使い頂いてもかまいません。
外部のjQueryやCSSファイルはそれぞれのライセンスに準拠します。
動作保証ブラウザは、Windows、Mac共にGoogle Chrome、Firefox、Microsoft Edge最新版。IEは非対応です。
推奨エディタは「Visual Studio Code」です。一部のエディタで文字化けが発生する場合は、文字コードをUTF-8に指定してください。
テンプレートによって何らかの不利益、損害が生じても一切の責任を負いません。自己責任の下でご使用ください。
制作代行
カスタマイズパック
当テンプレートを使用した制作代行も承っております。標準のカスタマイズをお得なパックにしました。データでのお渡しとなります。標準パッケージの範囲を超えるカスタマイズについては、お見積りいたします。
| ￥22,000円（税込） 含まれる内容は右記の通りです |
|
その他料金一覧表
原型が分からないくらいのデザイン装飾も可能です。コンテンツ数や作業量によって変わりますので、詳しくはお見積もりさせていただきます。制作物の知的財産権及び著作権の譲渡は行なっておりませんのでご了承くださいませ。
| 企画構成・進行管理・設計 | ￥55,000円（税込）〜 |
| ドメイン・サーバー設置代行・独自SSL導入 | ￥16,500円（税込） |
| トップページデザイン（スマホ対応） | ￥55,000円（税込）〜（コーディング含む） |
| 下層ページデザイン（1P/スマホ対応） | ￥8,800円（税込）〜（原稿貼り付けのみ/1枚） ￥22,000円（税込）〜（A4サイズ2枚程度） |
| 追加デザイン制作 | ￥22,000円（税込）〜 |
| お問い合わせフォーム設置 | ￥12,000円（税込）〜 |
| LPページ作成 | ￥110,000円（税込）〜（コーディング含む） |
| LPデザインオプション費 | ￥55,000円（税込）〜 |
| バナーデザイン | ￥5,500円（税込）〜 |
| ホームページ相談通話サポート（60分） | ￥6,600円（税込） |
できること
内容を分かりやすく伝えるWEBデザイン、SEOに強いコーディング、グラフィック、チラシや名刺などの印刷物やイラストの制作、写真撮影。制作時や納品以降も初めての方でも分かりやすい丁寧なアフターサポートなどのWEBトータルサポート。
１人１人に合わせて意図やご要望を汲み取りながら、コンテンツ作成や集客までのご提案・総合的なサポートを得意としています。
できないこと
難易度の高い複雑なプログラミングはお請けできかねます。
HTMLサイトをWordpressへテーマ化、カスタマイズは行なっていますが、プログラミングを得意とされている方々にはとてもかなわないので、基本的には「できない」とお伝えしています。必要な場合は外注対応させていただきます。現在プログラマーの方は求人募集しておりません。
サポートについて
日々制作業務を行なっておりますので、使い方、設置、カスタマイズ方法などの無料サポートは設けておりません。誠に申し訳ございませんが、ご了承くださいますようお願い致します。
ご使用方法、HTML、CSS、ドメイン・サーバーの設置、カスタマイズ等に関するサポートは有料にてお見積もりいたします。