企業ホームページ運営の心得

レスポンシブWebデザインと脱原発に立ちはだかる壁

現場の肌感覚からすると、レスポンシブWebデザインには課題もあり簡単ではありません
Web 2.0時代のド素人Web担当者におくる 企業ホームページ運営の心得

コンテンツは現場にあふれている。会議室で話し合うより職人を呼べ。営業マンと話をさせろ。Web 2.0だ、CGMだ、Ajaxだと騒いでいるのは「インターネット業界」だけ。中小企業の「商売用」ホームページにはそれ以前にもっともっと大切なものがある。企業ホームページの最初の一歩がわからずにボタンを掛け違えているWeb担当者に心得を授ける実践現場主義コラム。

宮脇 睦(有限会社アズモード)

心得其の294

キンドルファイアの衝撃

平成も四半世紀へと突入しました。あけましておめでとうございます。

ところで今年は「電子書籍2年」と呼ばれるのでしょうか。それとも3年でしょうか。ちなみにPDFの登場から数えればすでに「20年」です。日本で、というより電子書籍は米国以外では、喧伝されるほど普及してはいません。価格と規格を含めた出版文化に、物流網の違いが大きく影響しています。しかし、「端末」は次世代ネットデバイスの主役に躍り出ました。「タブレット端末」です。

特に「キンドル・ファイアHD」の価格は魅力的です。ちょっとWebをブラウジングするぐらいなら、十分な機能を安価に得ることができます。なにより秀逸だったのはそのマーケティングです。昨年末からヘビーローテーションで流された、「箱にスマイル」と語りかけるスポット広告の仕上がりがまるで「アップル社」のようで、知人の主婦は新しい「iPad」のCMと勘違いしていました。

さて、本稿は新年早々IT業界にありがちな、新デバイスの礼賛ではありません。こうしたデバイスの普及に対応が迫られるかもしれない「レスポンシブWebデザイン」の話です。

簡単な教材なら簡単

レスポンシブWebデザインは、2010年に米国のデザイナー、イーサン・マルコッテ氏がブログで紹介したのをきっかけに広がったもので、一言で言えば、すべての端末にあわせたレイアウトを1つのソース(HTML/XHTML)で対応するアプローチです。

ユーザーエージェントによる振り分けや、PHPなどを使い、端末ごとにコンテンツを再合成するやりかたもありますが、そのためには端末ごとにコンテンツを作らなければならず、追加や更新ごとの作業量は増大します。レスポンシブWebデザインは、同じソースを使うので、メンテナンス費用を抑えることができるというものです。

ある「レスポンシブWebデザイン」を教えるセミナーでは「簡単」にできると教えています。ワークショップに参加したWebの素人は「簡単そうに見えた」といいます。確かに理屈は簡単です。ワークショップでは簡単にできるように練られた教材が提供されています。しかし、現場から見て「難しい」というのが率直な感想です。

現場の肌感覚

ディスプレイの横幅をもとに、メニューの位置をずらし、不要な情報を非表示に……とここまで書いて、すでに1年前に安田編集長がブログで課題を警告していることを思い出したので、詳しくはそちらに譲りますが、私が「難しい」とするのは実務においてで、そのための「エスケープ(言い訳)」を最後に提示しておきます。

Web担当者がレスポンシブWebデザインに直面する可能性が最も高い場面は、「リニューアル」でしょう。運営側のスマホやタブレットに対応させたいという潜在的需要は高く、上司や顧客がiPadでも使い始めた日には、タブレット対応を打診される確率が高まります。タブレットで縮小されたPCサイトは老眼には辛すぎるからです。

ガラケーからの命題

長年運営しているサイトは膨大なコンテンツを抱えていますが、レスポンシブWebデザインを導入する際には、コンテンツの取捨選択が求められます。画面が小さくなればなるほど、掲載できる情報量が少なくなるのは物理的な問題です。某ショッピングモールのような、ひたすらスクロールを要求する縦長のデザインを良しとするならば、レスポンシブWebデザインにそれほど悩む必要はないでしょう。

しかし、かつてPC用ホームページで推奨されていた「1ページ3スクロール以内(WebmasterWorldの投稿を紹介した、Web担でもお馴染みの鈴木謙一さんの記事によると、最近は5スクロール以内といわれています)」を守ろうとすれば、メニューを削除し、コンテンツそのものを見直さなければならないのです。

PC版と同じ情報量を掲載すると、レイアウトが犠牲になります。反対にスマホにアジャストされたサイトでも、十分な情報量がなければ訪問者は不満を感じます。レイアウトかコンテンツか。これはケータイサイトのときからの課題です。

捨てるコスト

皮肉な話になりますが、積極的に活用されていないサイトはあまりコンテンツが充実していません。するとレスポンシブWebデザインに取り組みやすいのですが、そもそも訪問者の少なさを改善するリニューアルが先でしょう。

昨年末に3回に分けてお届けした「リニューアル編」では、コンテンツを捨てることを1つの結論としました。当社のリニューアルでは、サイトに対しての決定権を持つ、私自身が「捨てる」決断をしました。これは、現場に立つ私自身が経営者であるからできる判断ですが、多くのWeb担当者はクライアントの案件はもちろん、自社サイトに対して「不要コンテンツ」の選択を迫らなければなりません。つまり、お客や上司に、

どれ、捨てます?

と訪ねるということです。関係する各部の調整に、コンテンツ発案者の同意を取り付けるなど、新しいサイトを作るのと同等の負担がそこには横たわります。

脱原発と重なる動き

それではエスケープを。レスポンシブWebデザインを求められれば「脱原発」と答えます。

急進的に脱原発を実現したとき、上がるのは電気料金だけではなく、製造に電気を使う工業製品や各種サービスも連動し、「核」という視点に立てば「日米同盟」にも話が及びます。レスポンシブWebデザインによって、1つのソースで対応できますが、大きく分けてもPC用、タブレット用、スマホ用と3つの画面デザインが必要で、労力は単純に3倍とまではいかなくても、相応の作業コストがかかります。

つまり方向性には同意できても、実現するには幾重にもそびえ立つ高い壁がある「脱原発」に重なると。ちなみにデフレの昨今、この費用増加を受け入れてくれるクライアントは、あまり多くありません。

多様化する端末の結論(デファクトスタンダード)はまだでてはおらず、1つのコンテンツのまま複数の端末に対応できればそれに越したことはありません。期間限定のキャンペーンサイトなど、あらかじめコンテンツが絞り込まれ、拡張する可能性の低い案件があれば、そこからレスポンシブWebデザインに取り組むというのが現実的な落としどころとみています。

今回のポイント

方向性は正しいが……費用対効果でみるとデメリットも大きい

用語集
HTML / PHP / ガラケー / キャンペーン / クロール / スマートフォン / デザイン / ユーザーエージェント / レスポンシブWebデザイン / 訪問者
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]