レスポンシブWebデザインに挑戦してみて ~概要編~ HTML5 CSS3

今年はレスポンシブWebデザインでコーディングする案件を何件か頂き、挑戦しました!

もちろん、本業であるFrekulの開発以外の時間にです(笑)

専門書を読み、検索エンジンで情報サイトを調べまくって、眠い目をこすりながら勉強と制作に励んだので、そろそろ、当ブログにレスポンシブWebデザインに関してまとめていきたい思います。

記事がかなり長くなりそうなので、今回はまず「導入編」として概要を説明します。

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

みなさんよくご存知のとおり、PCやタブレット、スマートフォンなどは画面サイズが異なります。
画面サイズが異なるということは、ブラウザで描画できる画面の大きさも異なります。

表示しているブラウザのサイズを判定して、Webページを閲覧端末やブラウザに適したレイアウト、デザインに調整して表示するテクニックをレスポンシブWebデザインと呼びます。

「Webデザイン」とは言うものの、デザインそのものの作業だけではなく、HTMLとCSSだけで、なんとか端末に応じた表示分けをしようというHTMLコーディングのことも含んでいます。

ここが重要なのですが、

HTMLとCSSで実現できるかどうかを見定められないと、サイトをデザインすることができません!

もしくは、あとで部分的・・・それか大幅にデザインを作り直すことになります。
レイアウトを大幅に直したり、コーディングを組み直したりね。

レイアウトを考えたり、デザインにする時点で、色々なサイズの端末を意識したデザインを作ることが求められるので、是非Webデザイナーの方にも勉強して頂きたいのです・・・!

レスポンシブWebデザインサイトの例

株式会社クライマークスの加藤さんが運営されているサイト「Responsive Web Design JP」が参考になります。

僕が適当に書いているもう一つのブログ「Tomicci Guitar」も、実はレスポンシブWebデザインになっています。


これは、WordPressのテンプレートを使っています。
WordPressのテンプレートも、今はレスポンシブWebデザインで組まれたものがかなり多くなっていますよね。

レスポンシブWebデザインのメリットとデメリット

レスポンシブWebデザインでサイトを制作すると、下記のようなメリットやデメリットがあります。メリットと同じくらいデメリットも多い点は知っておくべきことだと思います。

〇メリット
1. 端末ごとのデザインに一貫性が生まれる
2. 文面の差し替えなどの更新作業やメンテナンスが楽な場合が多い
3. ブラウザの画面サイズはHTMLやCSSで簡単に判定できる
4. URLを1つにでき、SEO効果が高いとされる

〇デメリット
1. 複数の端末で表示するデザインを考えられる能力が必要
2. HTMLコーディングに手間がかかることが多い
3. 後からレイアウトの変更をおこなうのが難しい
4. 端末ごとに作成するよりも設計、構築にかえって時間がかかる場合がある

導入するべきかどうか

近年、スマートフォンやタブレットでサイトを閲覧している人が急増しています。
僕が管理しているとある通販サイトのアクセス数を参考までに下記で公開します。

実に全アクセス数の43%がスマホですね。年内にはスマホのアクセスとPCのアクセス比率が逆転するのではないかと思います。3年前はガラケーのアクセスがかなり多かったんですけどね。

ECサイトなどに限らず、これからWebサービスを作るなら、モバイル(スマホやタブレット)ファーストで構築することが重要であるということは容易に推測できますね。

そう考えた上で、サイトをレスポンシブ化したほうが今後運営に有利そうであればレスポンシブWebデザインを、そうでなければ従来のように端末ごとにHTMLを用意してあげるという方針でいいのではないでしょうか。

僕個人としては、制作に慣れてきたというのもあるので、今後サイトを立ち上げる時には是非レスポンシブでHTMLを構築したいと考えていますよ。

既存サイトのレスポンシブ化

既にリリースされており、運用中のサイトをレスポンシブに作り直すのはあまりにも難儀な作業になります。
各端末ごとにCSSが作りこまれており、ゼロから組み直すくらいの手間がかかる可能性もあります。

決してエンジニアに無理強いをさせないでくださいね。。

次回は「レスポンシブWebデザインに挑戦してみて ~技術編~」をお送りする予定です!

Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景