レスポンシブ対応のWebサイトを作ろう
レスポンシブデザインを導入する方法はいろいろありますが、まずはレスポンシブル対応のサイトの作り方を紹介します。
CMSを利用する
CMSとは、『コンテンツ管理システム』の事で、この機構を使えば複雑な言語を知らなくても、簡単にレスポンシブデザインを導入できるようになります。
CMSには下記のように様々なメリットがあります。
- サイトの更新が簡単になる
- SEO対策も出来る
- コストの削減
- サイトの更新頻度を増やせる
このようにメリットの多いCMS導入ですが、レスポンシブデザイン導入の際にも一役買います。
- 端末ごとの動作検証の手間が省ける
- RESS技術を利用しているモバイルサイトでも動作が重くならない
ちなみにCMSには、無料のものと有料のものがあります。無料と有料の違いは、サポートの有無です。無料のCMSにはサポートが付かないので、サーバーなどの準備は自分でする必要があります。
しかし有料のCMSの場合には、サポート体制が組まれているので、サーバーもあらかじめ準備され、その後のデータベース管理などの体制も整ってるのです。
クラウドCMSで簡単作成
本来CMSを利用するには、専用のサーバーを用意し、そこにCMSのデータをインストールしなければなりませんでしたが、『クラウドCMS』の登場によって、サーバーを準備することなく、ブラウザ環境だけで導入が可能となりました。
サーバーを用意する必要が無いということは、当然ながら初期投資費用を抑えることが出来る、ということと、インストールの手間が無いので、導入も早くできるのが魅力となっています。
またクラウド化することで最低限のセキュリティ対策も容易であり、アップデートなども自動で行うため、常に最新の機能や性能を導入できるのです。
サーバーなどを用意しなくても、これだけの機能を導入できる環境があることは、フリーランスにとって大きなメリットと言えるでしょう。
テンプレート豊富なWix
クラウドCMSを使えるサイトはいろいろありますが、特におすすめするのは、『Wix』です。
最大の魅力はテンプレートの多さで、ドラッグ＆ドロップで簡単に思い通りのサイトを作れます。
WordPressでのブログ作りに最適なテーマ
レスポンシブデザインのサイトを作る方法にはCMS以外にもあります。そこでここからは、WordPressを使ってレスポンシブデザインを導入する際に最適なテーマを紹介します。
有料テーマ Stork
WordPressはもともと幅広い分野で活用されてきましたが、こちらのテーマ『Stork』は、ブログマーケッターJUNICHIさんが監修したものです。
特にスマホでの使用感にこだわったテーマで、サイトの閲覧はスマホなどの端末で行う時代にフィットした作りになっているのです。
デザインの変更も簡単で、広告の設定などもすべて管理画面で出来てしまうシンプルな設計です。
- WordPressテーマ『Stork』
- 価格：1万800円
- HP：WordPressテーマ「ストーク」
無料テーマ Cocoon
WordPressで使えるテーマの中には、無料で使えるものもあります。それが『 Cocoon』です。
Cocoonは、Storkと違ってデザインが自由自在というわけではなく、カラムレイアウトなどのカスタマイズができるぐらいですが、特にデザインにこだわりが無い場合には最適なテーマと言えるでしょう。
全体的にシンプルな作りになっており、記事本文に集中して作り込めるようになっています。またレスポンシブルにも対応しているので、PCで見てもスマホでみても快適な操作性を維持します。
もともとSEOに強いWordPressですが、広告の設置も簡単で、誰でも使いやすいテーマです。
- 無料のテーマCocoon
- 価格：無料
- HP：Cocoon | 無料WordPressテーマ
HTMLとCSSのテンプレートを使ってみよう
ホームページを作るための言語として代表的なものと言えばHTMLやCSSですが、この言語が解らない人でも手軽に使えるテンプレートがあります。ここからはそんなテンプレートを使ったサイトの作り方を紹介します。
zipファイルをダウンロードする
HTMLやCSSのテンプレートファイルは、テンプレートのダウンロードサイトにたくさんあるので、そこから好きなデザインを選んでダウンロードします。
ダウンロードしたファイルは圧縮ファイルです。このファイルを解凍すると、トップページ用の素材として使うファイルや、記事ページ用に使う素材のファイルなど、複数のファイルが出てくるので、これをカスタマイズして使うのです。
ダウンロードサイトはいろいろありますが、特におすすめなのが、『Start Bootstrap』です。こちらは英語サイトですが、比較的わかりやすい作りになっています。
テキストや画像、CSSをカスタマイズ
ダウンロードサイトのテンプレートは、もともと出来上がっているものですので、完全オリジナルの作品というわけにはいかず、多少デザインの制約も生じます。
しかし画像やテキストCSSをカスタマイズすれば、制約がある中でも自分好みのデザインを作れるでしょう。
無料で使える、日本語テンプレート集
やはり日本人ですと、英語サイトよりも日本語サイトの方が、安心して使えるという人も多くいます。
そこでここからは、日本語サイトで、レスポンシブル対応のテンプレートサイトを紹介します。
TEMPLATE PARTY
『TEMPLATE PARTY』は、ビジネス用から個人サイト用に使えるテンプレートがダウンロードできるサイトです。
テンプレートにCSSがプラスされたタイプやWordPressテーマに使えるものもあるので、自分のサイトに合ったテンプレートを見つけてください。
なお使う際は、テンプレート下部に入っている『Web Design:Template-Party』という文章は変えられない仕様になっています。しかしどうしても外したい場合はライセンス契約を結ぶ必要があります。
またライセンス契約をしても、プログラム開発会社の著作は外せないので注意しましょう。なおこのテンプレートは、アダルトサイトや法的に問題があるサイトでは使用できません。
シンプルな商用テンプレートなど
このサイトで扱っている商用テンプレートは、企業用から飲食店用、ショップ用など多岐に渡っているので、お店や会社のイメージにぴったりのテンプレートが見つかるでしょう。
無料ホームページテンプレート.com
このサイトは、HTMLテンプレートからWordPressテーマに対応したテンプレートをダウンロードできます。
ダウンロードしたら、自分の好きなようにアレンジして使えます。また商用、アフィリエイトなど、どんな形態でも利用可能となっています。
ただサイトの下部にクレジット表記が入り、そこだけは変更出来ません。しかしどうしても変更したい場合には、シリアルキーを購入すれば変更が可能です。
シリアルキーは2,980円で、申し込んだらすぐに発行されるので、すぐにクレジットを外せるようになります。
《無料》ホームページテンプレート.com | 商用可能なホームページテンプレート・レスポンシブWordPressテーマが完全無料
まとめ
一昔前までは、ホームページ作成と言えば、それなりに知識も費用も必要な大仕事でもありましたが、今回紹介したテンプレートの登場で、ホームページ運営も随分簡単になりました。
現在のスマホ時代には、レスポンシブデザインも必須となっているので、サイトを作る際は是非レスポンシブル対応のサイトを作るようにしましょう。