レスポンシブウェブデザイン

ご無沙汰していました。技術部長です。
今回は、少し技術的なお話をしてみたいと思います。
私は、ウェブマーケットで主にデータベースのメンテナンスとウェブシステムの開発をしています。
業務用のウェブシステムには、顧客向けの部分と社内の業務に対応する部分があります。顧客向けの部分と社内業務用の部分のコード量(プログラムの長さ)を比べてみると社内業務用のほうがかなり多くなります。大体、社内向けが顧客向けの2~3倍くらいです。
一方、デザインについては顧客向けのほうがはるかに大変です。社内向けのほうは、「シンプル」でもよいのですが、顧客向けは「見やすく・使いやすく・すこしはかっこよく」ないといけません。私はデザイナーではないので、こういう分野は得意ではありません。そこは「餅は餅屋」ということで、デザイナーさんにお願いすることが多いです。

ところで、最近(といっても10年くらいにはなるのですが)は、いろいろなデバイスでウェブにアクセスするようになってきました。大きく分けてコンピュータ(PC)、タブレット、スマートフォン(スマホ)です。これらのデバイスにはいろいろと違いがありますが、ウェブアクセスの観点からいえば、画面サイズの違いが最も大きいものです。最近のスマホは、高性能化が進み、演算能力でいえば、10年くらい前のPCと遜色ないものが出ています。ただ、スマホでは画面サイズは小さくなります。解像度だけでいえば、やはり10年くらい前のPCについていたモニターと変わらないくらいのものを搭載することもできますが、表示されている内容を見るために虫眼鏡が必要になってしまいます。
現在のウェブマーケットのホームページはPC、タブレット、スマホのどれでみてもそれぞれのデバイスに合わせた表記が行われるようになっています。ところが、残念ながら、通販システムの方はPC用の画面表示しかありません。タブレットであれば、少し不便くらいの表示かも知れませんが、スマホではかなり小さく表示され、かなり不便なものです。それで、スマホでも見やすく使いやすい画面が表示されるようにウェブマーケットの通販ページを改善していくことにしました。すぐにはできないですが、なるべく早い時期にお見せできるように頑張ります。

今回のブログのテーマはウェブ表示のマルチデバイス対応についてです。ウェブシステムの開発状況に合わせて何回かこのテーマでブログを書くことになるかもしれません。このテーマの第1回としてマルチデバイス対応の原理について少しお話ししたいとおもいます。
マルチデバイス対応のウェブページをつくるにはいくつかの方法があります。マルチデバイス対応の初期には対応するデバイスごとに別々のページをつくり、デバイスごとに表示を変える方法がとられていました。デバイスを判定して自動的にきりかえる方法です。ところが、自動切り替えは、デバイスによっては正しく取得できないことがあり、切り替え処理が失敗してしまう問題がありました。特に今日ように数多くのデバイスが使われれるようになるとデバイス認識に失敗する可能性が高くなります。
もう一つは「スマートホンはこちら」などという表記をしてデバイスによってアドレス(URL)を変える方法です。これは、ユーザーが間違えてアクセスすると正しい表示がされないという問題がありました。
これらの問題を解決し、マルチデバイスに対応するための手法が「レスポンシブウェブデザイン」です。これは2010年5月にアメリカのウェブデザイナーのイーサン・マルコット氏によって提唱されたものです。
〇各デバイスに最適化されたページを1つのシステムで実現する。
〇デバイスの画面サイズを基準にして、サイトの切り替えをおこなう。
これを実現するために使用される技術は実はすでに以前から確立されているものでした。イーサン・マルコット氏の功績は技術の開発ではなく、技術の組み合わせによるサイト開発の提唱とそれに「レスポンシブウェブデザイン」と名付けたことにあるのかもしれません。
技術の詳細には立ち入りませんが、レスポンシブウェブデザインは、
〇メディアクエリ
〇フルードグリッド
〇フルードイメージ
の3つの技術の組み合わせで構成されています。
これらの技術要素はCSSとよばれる仕組みで実現することができます。(他の方法でも可能です。)つまり、適切なCSSとHTML(ウェブページを実現するための技術要素です。)を作成することでレスポンシブなウェブサイトを構築することができます。ただしCSSはバージョン3、HTMLはバージョン5が必要です。そのため、デメリットもでてきます。レスポンシブウェブデザインを成立させるための基礎技術要素(CSS3、HTML5)は、古いウェブブラウザでは対応していません。ただ、本当に古いブラウザなので現在ではほとんど考慮する必要はなくなっていると思います。特にスマホは技術革新が速いので対応していないスマホはないと思います。
もちろん、画面サイズに合わせたデザインの開発は別途必要です。PCとタブレットとスマホのそれぞれで最適な画面デザインをしなくてはいけません。これがなかなか難しいのですが、ウェブマーケットの本家のほうのサイトがマルチデバイス対応になっています。これを参考にしてデザインを考えていきたいとおもっています。可能な限り、早い時期に新しいウェブマーケットの通販ページを公開したいと思っています。
開発の経過をブログで報告することがあるかもしれません。
では、また。

参考文献:レスポンシブWebデザイン 山崎大助著 SB Creative

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

前の記事

46型のPCモニター

次の記事

Microsoft One Drive