バタンキュー

Web制作の現場から・・ただいま少し一休み中

※当ページを閲覧される場合は、Windows7以上、Internet Explorer11などの安全でできるだけ最新の閲覧環境でアクセスされることを推奨いたします。
※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は、レイアウトが崩れて正しく表示されない可能性がありますのでご了承ください。


レスポンシブデザインの可能性と限界

カテゴリー:デザイン的なところ
やはり、というか・・これも必然?Google先生が先月おこなった「モバイル フレンドリー アップデート」の波及効果もあって、デザインの改変・改修を実施してるWebサイトが増えつつあるよな気配です。本体のページごとすべてレスポンシブデザインで設計し直してリニューアルしてしまうサイトもあれば、旧来の方法で、PC用はそのままで、モバイル用に別に設計したページを用意して、UA(User Agent)を判別して振り分けるようにして表示させてるサイトもあったりします。

このレスポンシブデザインって、HTML5が勧告される以前から既に導入されてたりしてました。タブレット端末やスマートフォンの普及で、ウェブページを閲覧するデバイスの多様化に応じたユーザビリティーの向上を考えると、PC用のページや、従来のガラケー用に作られてた携帯ページを表示させてて良いのん?ってなるのは自然な流れやったんでしょなー。

HTML5 + CSS3 ロゴマークタイミングよく、HTML5+CSS3っていう新たなWebスタンダードの旗手となり得る彼らの登場、台頭によって、〜HTML5で最適なレスポンシブデザインを〜ってな関連性がどこからともなく謳われだして、浸透しつつあるんやと思います。

もちろん、UA判別でうまいこと振り分けて、モバイル用にGoogle先生が仰るところの“フレンドリー”なページを表示させてれば、PC用のページは特に改修せんでも良いっちゃあ良い気はします・・このブログ(JUGEM)は携帯用(ガラケー用)ページと、スマートフォン用ページは別のテンプレートが適用されるよになってて、うまく振り分けて表示されてるみたいで、どうやら“モバイル フレンドリー”っぽいですが・・・。

そうそう、先日の記事[モバイルフレンドリーアップデート、様子見が必要ですよ!]でご紹介した Kenichi Suzuki さんの海外SEO情報ブログ、確か4月22日の記事ページにリンクさせてましたが、モバイル対応してない自らのブログを実験台にした報告のその後の情報(4月27日)でございます。

参照:モバイルフレンドリーアップデートで海外SEO情報ブログはどのくらい順位が下がったのか? | 海外SEO情報ブログ

参考:Google、「モバイルフレンドリー」ラベルをAdWords広告でも導入か? | 海外SEO情報ブログ

**********

そして先日、いつもお世話になってるこはるさんのブログ(memo352)もガラリとテンプレートデザインの書き換えを実施されてました!

参照:テンプレートを書き変えてみた|めも352

私好みのフラットデザインで、奇抜で雑多な色味感もなくてすごく見やすくて良い感じです!!

マルチデバイス対応デザイン(レスポンシブ)イメージただ、「レスポンシブデザインは、レイアウト自体が画面幅(解像度)に合わせて変化して、ユニバーサルWebデザインの担い手のような気がします。」なんてこはるさんに伝えたものの、自分自身HTML5+CSS3との関連性はまだまだ理解し切れてないんちゃうの??って思い、いろいろ調べてみることに。

すると驚き!!今やHTML5のテンプレートどころか、HTML5+CSS3+JSでレスポンシブデザインのページを好みのレイアウトで作ってくれるジェネレーターなるサイトまである(海外製)ではないれすかー!

試しにそのサイトでページを作って(って、いくつか選択肢があってクリックするだけ)、ポチっとダウンロード保存・・ローカルで開いてブラウザーで確認すると!!・・お見事、拍手喝采(パチパチ!!!)。暫くはジーっと眺めたり、ブラウザーの表示幅を変えてみたりしてレスポンシブ効果を確認しておりました。


しかしながら・・数日間、何かモヤモヤとしたものが頭から離れましぇん。一体何なのか。そこで、も少し自分なりにレスポンシブデザインについて考えてみました。

レスポンシブ・・・、

①可能性はまだまだあって、間違いなくこれからのデザイン技術。小型の携帯端末だけではなく、スマートPCなど、大型のフルハイビジョンTVや4KTVをモニターとして使用する可能性も考慮できる。


②画像を多用した場合、スマートフォンなどの小型携帯端末には別の画像を表示させたり、非表示にしたりする細工が必要 → すべての閲覧環境でまったく同じ情報提供はできなくなるので、個人的には避けたい手法。


③画像を減らしてテキストデータ主体にした方が、モバイル端末での読み込みは早くなるので、そちらに傾倒していく可能性があり、ボタンの表示方法などはCSSで修飾するやり方が基本。


④テキストデータ主体のページになると、今一つデザイン性に欠けた仕上がりになりかねないので、少ない貴重な画像データを有効に活用しつつ、いかに個性を出したサイト制作ができて、活きたWebを生み出せるか。



“いかに個性を出したサイト制作ができるかどうか”は、まさにデサイナーの力量を発揮する部分でもありつつ、クライアントとの密な意見交換や相互認識、なんていう充分なコンセンサスが必要なところでもあったりしますな〜。
例えば色の使い方。背景画像の選択。文字の大きさ・・などなど。

ただ、スマートフォンみたいな小さい画面になってくると、どうしても画一的なお決まりのレイアウトになってしまうのはどうしようもない・・レスポンシブなので・・・。そこはレスポンシブの限界を感じるところでもあったりします。

そうなってくると、結局はガラケー用に作ってた携帯用ページもそうやったけど、中身の重要性!

まぁ、基本に還るという気がしないでもなく・・・。今更ではありますがレスポンシブ以前の話で、レイアウト云々うんぬんの前に、要はコンテンツの内容次第ということですな!
少しはGoogle先生の仰る“Googleはモバイルフレンドリーでなくてもコンテンツが高品質であればランクが下がるとは限らないとしている。”の理解につながるでしょか?んー、どでしょ??


ちなみに、このブログは開設当初にリキッドレイアウト(リキッドデザイン)で設計しようと考えて、HTMLとCSSの両方が無料プランで触れるところをいくつか探して実験的にやり始めた結果がこうなってる感じです。
今やレスポンシブデザインの元祖とも言うべき手法やけど、当時は逆に、必死でカラム落ちさせへんことを考えて作ってたので、PC用の画面表示やとヘッダーんとこに「※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は・・・」なんて但し書きしてますが当然レスポンシブ非対応でございますよ!
かれこれ6年以上前のことですが・・こんな記事を書いたりしてますな〜。

[リキッドレイアウトな時代?]
0
     | デザイン的なところ | | | pookmark

    スポンサーサイト

    カテゴリー:-
    0
       | - | | | pookmark
      コメント欄
      コメントする


      ※メールアドレスは公開されません

      ※Name:欄に入力したお名前にリンクが設定されます




      この記事のトラックバックURL
      http://stressful.jugem.jp/trackback/253
      トラックバック

      Button of Go to Home

      Button of Back to Top