スマホ、タブレット、PC どんなツールでも最適に表示できるシステム

レスポンシブデザイン

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

これまでホームページは、PCで見せる場合はPC用に、スマホで見せる場合はスマホ用に、HTMLやCSSと言ったプログラムを記述していました。


これはこれで、見る側としては別に困ることではないのですが、運営や制作をする側からすると、1ヶ所だけ修正したいのに、現実はPC用、スマホ用と2つ修正しなければならず、新しいページをつくる場合には、当然2つのページを作成する必要があり、煩わしさがあり、またミスのもとでもあり、グーグルからは、一つのコンテンツなのに2つのソースがあるという、怪しげな目で見られるという状態でした。


レスポンシブデザインはHTMLやCSSと言った、デザインやレイアウトを決めるプログラムは1種類です。

1種類でスマホにも、タブレットにも、PCにも適応させてしまえるプログラムですので、上記の煩わしさ、ミスの問題もなく、SEO上もメリットがあるという優れたモノなのです。



PCでホームページを見たイメージ

右にはバナーエリアが有り、左はコンテンツエリアの標準的な構成。

タブレットでホームページを見たイメージ

少し古いタブレットですと、画素数がすくなく、表示領域が狭い場合があります。

その場合でも適切に表示できます。

左のテキストを表示する幅が狭くなっているのがお分かりになりますか?

このようにモニターの画素数により自動的に表示の仕方を変えることができます。

スマートフォンで見たイメージはこのような感じです。

スマートフォンサイトでよく見られる縦長のレイアウトになっており、小さい画面でも適切に見れるようにしています。

様々な表示ツールで適切に表示

上記に示しましたように、レスポンシブデザインは、PC、タブレット、スマホと今主流のホームページを表示させるツールで最適に表示させるようにプログラムを組むことができます。

しかしPCと言っても、様々なサイズのモノは存在します。

プログラムの組み方を工夫すれば、その様々なサイズのPCにも、当然様々なサイズのタブレットにも最適に状態で表示させることが可能なのです!

レスポンシブデザイン 住宅産業塾会員企業の事例紹介

・株式会社イムラ様 http://www.imura-k.com/


・株式会社ナレッジライフ様 http://www.knowledge-pure.com/


・株式会社田中建設様 http://www.fp-tanaken.jp/

それぞれのホームページですが、ブラウザの幅を変えてみてください。

任意の幅で最適化されているのがわかると思います。

すごく細くして見ると、スマートフォンでどのように見えるのかもわかります。

ぜひ試して下さい。



住宅産業塾ではレスポンシブデザインによるホームページ制作の依頼を受けております

ホームページのリニューアルのタイミングだ、スマートフォン対応をしていないのですぐに対処したい。

ホームページに関するコンサルティングとともに、実際のホームページ制作も住宅産業塾では相談に乗っております。


それぞれの会社の規模や、運営体制、予算により、ホームページ制作は自ずと異なるものとなります。

住宅産業塾では、みなさんの会社にマッチしたホームページとはどのようなモノかを考え提案させていただきます。


まずはお気軽にお問い合わせください。