レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと

Advertisement

昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン(RWD)で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。

プロジェクトの概要

大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました:

今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとしてあります。
学生が切磋琢磨して自分を磨く場所、また、新しい知識を学び、試す場所である大学。そんな場所である大学のウェブサイトとして、常に新しいことにチャレンジしていくべきだと考えました。使い慣れたいつもの手法で、いつものようにやればだいぶ楽だった。。。なんて思うところも多々ありま す。新しいことゆえに問題が発生して困ることも沢山ありました。しかし、そこを知恵と工夫でどうにか解決して前に進んでいく。「大学」とはそういう場所だと考えています。

ウェブサイトが新しくなりました!(2011年10月4日) – テンプルこぼれ話ブログ

採用した技術・手法

このリニューアルプロジェクトでは、これまでに慣れ親しんだ制作手法を見直し(ある意味ゼロから考えなおし)、以下のような技術を採用しました。

半年間運営してみての雑感

レスポンシブWebデザインで作ったサイトを、半年間運営してみて思ったことを書き並べてみます。

ナビゲーションが難しい

複数階層を持つウェブサイトをスマホのような小さい画面に最適化してナビゲーションを実装するの難しい。サイト全体の構造をそのままに、ページの構成を調整してナビゲーションを快適に使えるようにするのはこれからの課題です。たとえば、最近ではFacebookのiPhoneアプリやSparrowなどのアプリでも採用されている、メニューボタンをタップすると画面が横にスライドしてナビゲーションが表示される手法がスタンダードになってくる気がしています。レスポンシブWebデザインでも、複数階層ナビゲーションの標準になるようなものが出てくると思います。それをいち早く、自分で作りたいですが。。。

ブラウザチェックの量が5倍くらい増えた

クロスブラウザでのチェックは、IE6も含め絶えず行っていたのですが、レスポンシブWebデザインにしたことで複数のブラウザ・タイプに加え、複数サイズ、複数デバイスでのチェックが必要になりました。ここをいかに効率化するかは、これからの課題になっていくと思います。便利なツールを使って、ある程度自動化する必要が出てくるでしょう。

レイアウト・デザインに対するかなりの考え方の割り切り、柔軟性が必要

レスポンシブWebデザインは、クロスブラウザでレイアウト表示がほとんど崩れないようにウェブサイトを制作するといった、今までの制作の考え方では到底無理な制作方法だと思います。また、制作のワークフローも、ウォーターフォール型、スパイラル型、アジャイル型を組み合わせたハイブリッドのようなやり方でないと、難しいのでは?と思います。

昔は1pxでもずれたら嫌だったたちでした。でも、最近は「そんなこだわり、逆にかっこわるい」と思うようになっています。それは制作者のエゴであって、ユーザを中心に据えた考え方ではないからです。

ページ構造、構成の重要性を再認識

レスポンシブWebデザインだと、同じコンテンツが複数の異なるレイアウトに落とし込まれるため、コンテンツをモジュール化して組み込んでいく必要があります。ページ・レイアウトの構造と文章構造を理解したうで、伝えたいコンテンツをモジュール化して、分かりやすく構成する能力が必要になります。これに関しても、今までのような固定された環境でのコンテンツ作りとはちょっと違った柔軟な考え方が必要になってくると思います。

画像の扱いはやっぱり難しい

1つの画像でサイズの違う複数デバイスに対応するのは、はっきり言って無理です(いまは無理矢理やってますが。。。Retina対応なんてのもありますし)。自動的に各デバイスに最適化された画像を提供できる仕組みが欲しい、そして、必要になってくると思います。JavaScriptを使ってデバイスごとに違う画像を読み込ませることもできますが、これはかなり非効率的です。画像や写真で伝えたいことが多く、画像の枚数が多いサイトだと、効率的な最適化の手法を見つけないと運営がきつそうです。

まだ詳しく見られていないですが、「Adaptive Images」あたりが、今のことろの現実的な路線でしょうか?なかなか良さそうです。ただ、Apache2とPHPが必須で、すべての画像処理に一度PHPを通すのでパフォーマンス面が気になるところです。あとは、先の話になってしまうとは思いますが、こういった仕組みをCSSやHTML自体に組み込む提案されつつあるようです。このAppleウェブサイトのiPad Retinaディスプレイ対応のような方法は、一時的な回避策でしかないように思えますし。。。

ウェブフォントを使いたい。けど…

上に書いたとおり、レスポンシブWebデザインでの画像の扱いには課題が残っています。そのため、テキストを奇麗に見せるための「テキスト画像」のようなものは出来るだけ避けたい。代替手法として、ウェブフォントは最適だと思うのですが、フォントの種類が豊富で、安定してクロスブラウザで使えるものがあるのかどうか?

Google Web Fontsも日本語がないですし、安定性やクロスブラウザの部分でも、まだまだ検証が必要な気がします。あと英語ならtypekitとかしょうか?日本語ならFONT+とかTypeSquareあたりは、有料ですが検証する価値がありそうです。テキスト画像の制作の手間を考えたら、有料でも安くつく、そんな気がしています。日本でのウェブフォントサービスについては、こんなまとめもありました。

テーブルの表示が難しい

カラムが少ないテーブルならまだしも、カラムも行も多いテーブルの場合、うまい見せ方がありません。データの多いテーブルは画像で見せるのもありかもしれませんが、運営面では非効率的ですし、ユーザにとってもあまり利便性が高くないように思います。悩ましいところです。

[追記: 2012/5/27]
使えそうな実装例があったので、こちらの投稿で紹介しています。また、その他のアイディアとして、「印刷用ページ」のようにナビゲーションやその他のページ要素を取り除いた、テーブルのみのレスポンシブではないページを用意するというのもありだと思っています。モバイル表示ではいくつかのカラムを非表示にしたテーブルを表示するとともに、「全てのデータを見る」のようなリンクを設置して別タブで開くようにします。そうすれば、ユーザが好きなようにスクロール、ズームイン・アウトしてデータが見られます。インクルードにすれば運用面でもそれほどの手間にはならなそうです。

CSS3をフル活用すべき

サイト最適化の意味でもCSS3はフル活用すべきだと思います。ただ、IE向けにはCSS3 PIEなどのJavaScriptでの対応が必要になるため、ページの読み込み時間への影響もあるのではないか?と思っています。IEでのデザイン表示はある程度シンプルかして、CSS3の使用も最低限にとどめるのが得策かと思われます。たとえば他のブラウザでは角丸やグラデーションで表示していても、IEでは四角、フラットな色にしてしまうとか。

IE対応の線引

上のCSS3のところでも書きましたが、IEには最低限の対応をしつつも、ユーザビリティを確保できる程度のところで線引きをして、他のブラウザ向けには実装するその他の対応を控えるのもやむを得ないと思います。ただ、IE6以上でナビゲーションやページの閲覧に問題ないレベルにするのは必須だと考えます。※もちろん、アクセス解析データでユーザの使用するブラウザの確認は必須ですが。

[追記]
はてブのコメント欄で「なぜRespond.jsを使ってしまったんだろう…」というご意見をいただいていますが、IEに関しては、レスポンシブ対応なしで固定してしまっても良いのかもしれません。

よりフォーカスしたコンテンツ

これはレスポンシブWebデザインだからというわけではないですが、レスポンシブWebデザインでモバイル対応することで、コンテンツをユーザの求めるものに特化した、よりフォーカスしたものにする必要があると思います。

iframeの高さの調整が難しい

ウェブサービスを利用する際に、iframeを埋め込んでいるのですが、レスポンシブWebデザインだとiframeの高さをコントロールするのが難しい。現在はmedia queriesを使って、複数の画面サイズで表示させて一つ一つ高さを設定をしていますが、これがかなり非効率的です。JavaScriptなどで対応ができればいいのですが、まだできていません。まだまだ勉強不足なので、これからの課題です。

公式Shareボタンの設置が困難

できれば公式のShareボタンを使いたいのですが、JavaScriptが重かったり、各ボタンの表示レイアウトのコントロールが難しかったりと、なかなか課題が多いです。

やはりスマホ(モバイル)からのアクセスは急増している

日本でスマホが急速に普及しているというのもあると思いますが、レスポンシブWebデザインでリニューアルしたセクションで、モバイルからのアクセスが前年同時期比較で2倍に増加しました。

[追記: 2012/5/2 16:00]
はてブでコメントいただいたんですが、上記の比較はレスポンシブWebデザインの導入前、導入後で比較しないと意味ないですね。

スマホからのコンバージョンも普通に

当然といえば当然なんですが、スマホからのコンバージョンも普通にあります。ウェブサイトにアクセスするのはデスクトップPCがほとんどという時代は終わろうとしているのではないでしょうか?スマホでのネット環境が少しずつ充実してきている昨今、これからはネットはスマホでしか見ないという人も増えてくるはずです。デスクトップで使うのと同じように、スマホでもウェブサイトを使うようになるのでは?「コンテキスト」を見極めるのが重要になりそうです。

モバイル・ユーザは結構長いフォームでも入力して送信してくれる

モバイル端末では入力項目の多い、長いオンラインフォームはあまり入力してくれないだろうと想定していました。しかし、そんなことはなく、結構な長さのフォームでも入力して送信してくれます。ユーザは普通にスマホ(モバイル端末)でメールを打ったりしているわけですし、長い文章の入力にも慣れている。そう考えると「スマホだからあまり入力してくれない」という勝手な解釈は結構危険かもしれません。

モバイル vs. デスクトップ

先日Jacob Nielsen氏が「Mobile Site vs. Full Site」という記事で、個別のモバイル・サイトを持つのがベストだといった内容の記事を書いて、欧米では話題になっているようですが、レスポンシブWebデザインでモバイルに最適化する手法が確率してくれば、必ずしも個別モバイル・サイトでなくてはならないとは思いません。

レスポンシブWebデザインもまだまだ進化していくと思いますし、ノウハウがたまっていけば、個別モバイル・サイトに負けないレスポンシブWebデザインのモバイル・サイトが出来上がってくると思います。その可能性を考えたら、費用対効果や運営面でのリスクも考慮して、個別モバイル・サイトを作るのではなく、レスポンシブWebデザインを採用するほうが将来性がある気もしています。

サイトの寿命、リソース、運営体制、納期など、プロジェクトのさまざまな要件を考慮してのケース・バイ・ケースの判断になるとは思いますが…Nielsen氏の記事に関しては、近々、自分なりの考察をまとめてみたいと思います。[追記: こちらに書きました。]

まとめ

レスポンシブWebデザインという手法も、すべての要件を完璧に満たすものではないと思います。ただ、半年間実際に運営してみて、運営状況やその他の条件、要因を考えると、この選択は間違っていなかったと思っています。制作のハードルは高くなりますし、課題もたくさん残っていますが、そこに投資するだけの見返りはあるように感じています。

ネットのモバイル化はまだまだ始まったばかりです。レスポンシブWebデザインは、これから新しく出てくる未知の端末にも対応の可能性を持った手法だと思います。RWDをより良くする新しい技術も生まれてくると思います。ノウハウを蓄積して、ユーザ、サイトオーナー、制作者が、それぞれハッピーになれるインターネット環境を築ければ、もっとネットの可能性が広がっていくと感じています。

さて、これから一つ一つ課題を解決していきますか。

ウェブはだから辞められない。。。 → 腕まくり。。。

【宣伝】レスポンシブWebデザインについての本を書きました

[追記: 2013/1/4]

レスポンシブWebデザインに関する本「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック」を書きました。上記のような内容をふまえ、1年以上レスポンシブWebデザインで作ったウェブサイトを運営した経験から試行錯誤したことを1冊の本にまとめました。良かったら立ち読みしてみてください。こちらで第1章の一部を公開しています。あと、本書の見どころ・読みどころをまとめたスライドを作ったので、良かったらあわせてご覧ください。

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。

“レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと” への6件のフィードバック

  1. […] Rriver » レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと Posted 2012年5月2日 Check Rriver » レスポンシブWebデザインのウェブサイトを半年運営してみて思った… […]

  2. […] 引用元: Rriver » レスポンシブWebデザインのウェブサイトを半年運営してみて思った…. […]

  3. […] 投稿日:2012年5月2日 作成者: admin レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと […]

  4. […] 僕がウェブマスターとして働いている大学のサイトを2011年10月頃にリニューアルしたのですが、その際にRWDを採用しました。その時の経験を、もう1人のウェブマスターが個人ブログに記事として投稿し、その後もいくつかRWDに関連する記事を投稿しています。そんなことがきっかけとなり、今回「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック」として刊行されることになりました。 […]

  5. Akira Yamada より:

    私は山田と言います。ウェブデザイナーでもプログラマー、エンジニアでは無く、単純にネット通販の運営者です。サイトは恥ずかしいですがホームページビルダーで一応全て自分で作っています。ただ今、ネット検索の独学でレスポンシブのウェブショップを構築中です。今月中には何とかショップオープンを考えています。元来PCサイト制作をtableタグ乱発で構築していたので「さっぱり、レスポンシブはわからん?素人の俺では駄目か!」です。今現在も構築中のサイトで知らない間にtableを使ってしまっているのでIEとFirefoxではどうも完璧にはレスポンシブ化出来てないようです。まだ肝心の商品ページ制作には至っていませんが一応の骨格は完成しました。
    今回の制作の前に練習を兼ねて試験的に息子のHPを昨年作っています。
    http://www.kaisanshunsai.com/
    現在作成中のショップも全く同じソースです。
    当然プロでは無いので至らない事ばかりでしょうが私のウェブショップはプロから見ればどんなもんでしょう。完成度の基準が判らないので雲を掴むような作業の連続です。本日「レスポンシブ 送信フォーム」の検索からこちらにお邪魔致しました。何か前に進めるヒント等頂けると有難いです。長文を失礼いたしました。では失礼いたします。

  6. […] レイアウト・デザインに対するかなりの考え方の割り切り、柔軟性が必要 レスポンシブWebデザインは、クロスブラウザでレイアウト表示がほとんど崩れないようにウェブサイトを制作するといった、今までの制作の考え方では到底無理な制作方法だと思います。また、制作のワークフローも、ウォーターフォール型、スパイラル型、アジャイル型を組み合わせたハイブリッドのようなやり方でないと、難しいのでは?と思います。 レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと […]