今回はレスポンシブのテンプレートを大きく以下の2つのジャンルに分けて紹介します。HTML+CSSテンプレートは、さらに業種別に分けてます。CSSフレームワークHTML+CSSテンプレートCSSフレームワークは、例えると「カレーのルー」です。ウェブサイトを作っていくときのベースになる部分を最低限まとめたもの、という意味でカレールーなのですが、言ってることがよくわからないという方は過去記事をご覧になってください。ラクするWeb制作「フレームワークなにソレ?」な初心者へおすすめの7選CSSフレームワークは、そのままの使用でも、それなりに感じの良いウェブサイトを作れますが、デザイン的に少し物足りなさを感じるのも事実。同じCSSフレームワークを利用しているサイト同士で、デザインが似通ってしまうところも難点です。オリジナリティを出す味付けのカスタマイズを加えたくなることは避けられません。一方の「HTML+CSSテンプレート」は、ほぼそのままで使うことを前提としています。CSSによるデザイン側の設定だけでなく、テキストや画像などページ上へ表示させるものも一緒にまとめられています。そのまま使っても大丈夫なほど、ページ上の配置と見せ方は完成されているので、テキストと画像を自分のものへ入れ替えるだけで、一般へ公開できるクオリティへとなります。逆にいじくりまわそうとすると苦労します。レイアウトを大きく変えたい場合の、根本に組まれたCSSを改めていく作業はけっこうな負担になります。htmlの記述も足さなくちゃいけません。そもそも工数を減らすことに、HTMLテンプレートを使うメリットがあるわけですから、四苦八苦と時間をかけるのは、その利点に逆らっていることになります。「求めているデザインに近いテンプレートを見つける」というのが、テンプレートを使ったウェブサイトを作るときの一番の山場となり、大きく時間がかかるところになります。テンプレートのまとめ」のような記事が重宝されるのでしょうね。4つでは、先にCSSフレームワークから紹介していきましょう。最近気になっていた4つをピックアップしました。honoka先に挙げた、「日本語への差し替え」を優しく解消してくれたフレームワークです。フレームワークといえば定番の「Bootstrap」をベースにしているので、多くのウェブデザイナーさんが普通に使えるでしょう。日本語も美しく表示できるBootstrapテーマちなみにBootstrapのグリッドシステムについて、以下に書いてます。honokaと共通して使えるところが多いので、読んでみても時間の損にはなりません。bulma名前がかわいいですね。ブルマ!flexboxによる柔軟なレイアウトが可能です。軽量なところも魅力で、カスタマイズを豊富に加えても、軽快なレスポンスを維持できます。MaterializeGoogleが張り切って推し進めるマテリアルデザイン用のフレームワークです。皆が共有できる使いやすさを求めるマテリアルデザインの概念やルールは、なかなか理解することが難しいのですが、このフレームワークを利用すれば、その全般を実践的に学習できます。w3.cssjqueryやjavascriptは使わず、cssだけで構成されています。シンプルな中身は、使い方を覚えやすく実用的でもあります。日本語のマニュアルがあるのも嬉しいところ。入門用として、最初のフレームワークとしてもおすすめです。4つここからは、デザインのベースだけがルールとしてまとめられているCSSフレームワークとは違って、ガッツリ作り込まれたHTMLテンプレートを紹介していきます。ビジネス用、ポートフォリオ用など、サイトのタイプに合わせて色々なデザインが見つかるので、分けてまとめてみました。「テンプレートまとめサイト」です。探すときは、数が多いだけにしらみつぶしにググるよりも、先に以下のようなまとめサイトを当たるのが時短です。疑うほどにハイクオリティのテンプレートが見つかります。その一言に尽きるテンプレートの宝庫です。「Bootstrap」をベースに作られたテンプレートを用途別に探せます。Layoutsこちらもたくさんの、数にして有料のものも含め100以上のレスポンシブテンプレートを見つけられます。themeforest無料のテンプレートで物足りなければ、有料のプレミアムテンプレートを探してみましょう。WordPressやPhotoshopのテンプレートも見つかります。デザインの参考のために見ることも多いサイトです。themeforestでプレミアムなテンプレートを探すこれらのまとめサイトから選出した「無料のテンプレート」が以下に続きます。2つ会社のホームページにバッチリなコーポレートサイト向けのテンプレートです。WHITE最初に開くドカンと大きなメイン画像が印象的です。最近よく見るレイアウトですね。同じレイアウトで動画バージョンも配布されています。スタッフ紹介、お客様の声といったセクションが用意されています。LOVEペットをモチーフにしたテンプレートです。画像を挿し替えるだけで、色々と応用が効きそうで、色々な会社の事業案内用にハマりそうです。4つデザイナー、フォトグラファーなど実績をネットで見せたいときのポートフォリオサイト向けのテンプレートです。BOX写真をギャラリー風に並べられるテンプレートです。シンプルに実績だけを並べたい場合に重宝しそうですが、サブページとしてちゃんと他のページレイアウトも用意されているので、自己紹介も詳しくも掲載し、わりとしっかりめのサイトも作成できます。写真・デザイン系のフリーランスだけでなく、ハンドメイド作家用のポートフォリオにも良さそうです。Etherealめちゃくちゃオシャレなテンプレートです。横スクロールで、自己紹介から実績の一覧までスムーズに見せられます。レスポンシブへの対応方法も素敵です。横に流れていたコンテンツがスマホで見ると、美しく縦にレイアウトされます。コーディングの勉強にもなりますね。UP」からのピックアップです。見ての通り、まさしく写真ギャラリー向けのテンプレートです。テンプレート右下に「about」の文字。クリックすると自己紹介とお問い合わせフォームが現れます。気づいてもらえないと思いますが。verum実績はもちろん、スキルや経歴も表現できるテンプレートです。デモダウンロード配布されている「templatewire」では、他にも利用価値の高いテンプレートが見つかります。おすすめのサイトです。3つレストラン向けのテンプレートです。居酒屋やカフェにも合います。Restaurantお店への集客は食べログやぐるなびに任せている飲食店は多いですね。ホームページは簡単にお店の紹介とアクセスの方法だけを案内できる程度でいいという場合に、こういうHTMLテンプレートは便利です。MEAT大胆に使われた赤が特徴的。生々しい料理の写真も印象的です。Touche先の2つのテンプレートとは対象的。オーガニックな色合いで落ち着いた印象が伝わってきます。3つ美容室やエステサロンなどビューティー系の店舗向きのテンプレートです。Fitness大きなジムも人でいっぱいですが、パーソナルジムやパーソナルトレーナーも流行ってきてますよね。小さなスタジオを借りたヨガスクールのようなビジネスにも使えそうです。SPAネイルサロン、エステサロン、マッサージなどリラクゼーション系のお店に向いた色合いです。レイアウトが複雑なところが少し気になります。写真の上に載ったテキストは背景との兼ね合いによっては読みづらくなりそうです。使いまわすという面では難しいテンプレートかもしれませんね。2つサクッとランディングページを作りたいときに便利なテンプレートです。snow新しい商材やアプリなどを紹介するのに最低限必要な情報がキレイにまとめられています。ElevateSNOWとは変わって、アニメーションやレイアウトなど派手に凝られたテンプレートです。個人的にはテキストが動くのってあまり好きじゃないのですが、料金表や画面を二分割したところのデザインがわりと見やすくて良いなあと思ったので選出しました。デモダウンロード以上、CSSフレームワークとHTML+CSSテンプレートの特集でした。探してみるとデザインの流行や新技術の気付きも得られて楽しかったです。再開!ウェブさえのHP作成サービスはこちら@websae2012さんをフォローシェアしてくれると嬉しいです!(コメントも喜ぶよ)Tweetあなたにはこんな記事もおすすめ!無料のホームページ作成ツールを14個も!もう制作会社を頼らない。【実録】格安ホームページでそんな簡単に儲かるの?それなら僕も欲しい!トップページに戻るん?最新情報を見逃さない方法!?わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。株式会社ウェブさえの代表者です。フリーランスまで様々な職種業界の方が居て、挙げだすと切りがありません。皆様に本当に感謝しております。詳しい自己紹介はこちらへ。お問い合わせやご質問・ご相談はこちらへ。最近更新した記事ホームページ作成ツールを無料もありで19個も!もう制作会社を頼らない。WordPressのスキルアップに最適。