レスポンシブデザインのホームページを作成しよう

自分でホームページを作成するからと言ってクオリティーの低いものではありません。
スマホ対応のレスポンシブデザインサイトを簡単に作成できます

レスポンシブデザインとは

一昔前では、ホームページを閲覧できるのはパソコンしかありませんでしたが、その後に携帯電話、スマートホン、タブレットと、ホームページを閲覧できる端末の種類が増えてきました。
パソコンのみの時代でも、画面サイズが「４：３」から『16：９』のワイド画面に変わりました。
４：３の時代はホームページの横幅が「720ピクセル」程度だったものが、16：９では『960ピクセル』程度と、ホームページのデザインも幅広に設定する必要がありました。

しかし、今ではパソコンでホームページを閲覧する人よりも、スマートホンで閲覧する人の方が多くなってきました。
スマートホンを通常(縦)に持ってホームページを見た場合、画面横幅は『320ピクセル』と、16：９のパソコンデザインの３分の１の画面幅になります。
パソコンで閲覧した場合と、スマートホンで閲覧した場合の最適な画面幅というのは全く違うため、ホームページ作製はとても複雑になりました。

対策としては、同じ内容のページを２つ作製し、パソコンで訪問した場合は通常のホームページを表示し、スマートホンで訪問した場合は自動でスマートホン用の別のページに振り分けたり、「スマホの方はコチラ」などのリンクを作り、スマートホン用のページに移動させるなどの対策がされました。

しかし、自動で振り分ける設定などはかなり煩雑で、初めてホームページを作る人にはかなり大変です。

様々な画面幅の端末でホームページが閲覧されるようになった現在、スマートホンで快適に閲覧できるホームページが必要不可欠になっています。
世界のgoogle様も、スマートホンでホームページを検索した場合、スマートホンで快適に閲覧できるホームページしか検索結果に表示しない!!なんて言い出しています。

そこで開発されたのが、レスポンシブデザインです。
※私が開発したわけじゃありませんよ(笑)

レスポンシブデザインの特徴

レスポンシブデザインは、パソコンで閲覧しても、スマートホンで閲覧しても、iPADなどのタブレットで閲覧しても、その端末の画面幅に合わせて自動でデザインを変更してくれる優れものです。
レスポンシブデザインを設定しておくと、同じ生地のページをパソコン用とスマートホン用の２種類用意する必要もありません。

レスポンシブデザインの設定方法

ホームページ作成業者などは、難しいことをいろいろとしているところもありますが、このサイトで紹介している方法はとても簡単です。

ワードプレスでは、ホームページ(ブログ)のデザインを簡単に変更することができるのですが、デザインのテンプレートの中から『レスポンシブデザイン』と書かれているものを選び、設定するだけです。

このサイトのデザインもレスポンシブデザインですし、サンプルで作成した治療院ブログもレスポンシブデザインです。

【参考サイト】サンプルで作成した治療院ブログ

全く違うホームページのデザインですが、レスポンシブデザインで気に入ったものを選択して設定するだけで様々なデザインに変更することができます。

ワードプレスのテンプレートは無数にありますが、最初の第一歩はこのサイトと同じデザインから始め、ワードプレスに慣れてきたり、ホームページが完成したり、デザインに飽きてきた時にはいろいろと検索してお気に入りのレスポンシブデザインのテンプレートに変更するといいのではないかと思います。