レスポンシブデザインモックアップ

スマートフォン・タブレット対応の手法あれこれ

一昔前はWEBサイトへのアクセスはパソコン(PC)から、ってのが普通でしたが、あれよあれよという間にスマートフォン、タブレットとたくさんの端末で閲覧する時代となりました。

制作側は時代に合わせて対応するようにしてきた訳ですが、ひとくちにスマートフォン対応といっても手法がそれぞれありました。大きく分けて3つ。

1、SPサイトを別に作る

スマートフォン端末でアクセスしてきた人のみ端末を検知して、別に作ったスマートフォン専用サイトに飛ばす。
スマートフォンが普及してきた頃は大手サイトでもよく採用されていた手法。今はほとんどないです。

2、PCデザイン、スマートフォンデザイン、二つ用意

HTML構成サイトでは出来ませんが、WordpressやXOOPSだと「テーマ」と呼ばれるデザインを司るファイルを複数用意する事が出来るんです。
PC用とスマートフォン用と制作して、それぞれアクセスしてきた端末毎に見せるテーマを振り分ける仕組み。サイトは一つでデザイン二つ。

3、レスポンシブデザイン

スタイルシートと呼ばれるデザイン装飾ファイルに記述して一つの「テーマ」でどの端末からの閲覧にも対応する手法。端末検知ではなくブラウザ幅によって変化するデザイン。
HTML構成サイトでもOK。

弊工房のこれまでの対応

これまでは2を採用してきました。

メリットとして、何たって別ファイルだからデザインの幅を広げられて各々自由な展開が出来る。
それにPCで使うWEBパーツや画像だとサイズが大きいから、3で制作した場合スペックの小さい端末で表示するとページが読み込めなかったりフリーズしてしまう。
2だと専用デザインなので軽いWEBパーツにして表示速度に配慮出来る。

デメリットもあります。
2はデザイン箇所に修正があった時、二か所手を入れないといけない。WEBパーツや画像の変更があったら二つ作らないといけない。

そして今

時代は流れ(といってもネットの世界は日進月歩なのでたった数年の事ですが 笑)、スマートフォン端末は進化し、タブレットも普及、サクサク動くようになりました。PCサイトを閲覧したってそうストレスないかも。

つい先日Googleもモバイルフレンドリーにと発表し、レスポンシブデザインを推奨。

という事で今後新規構築サイトは3を採用しようと思います。

レスポンシブデザイン対応作業はなかなか手間もかかるし慣れるまで苦労が多くイヤだった(笑)のですが、今ではスキルも上がりもうイケます。

ただ次の条件のリニューアルは3だと手間がとってもかかるし予算も上がるので2かも。

  1. 構築時期がスマートフォン端末のない時代 ← HTMLソースがPC向けでしか考えられてないのでレスポンシブにするには結構手を入れる必要がある
  2. 尚且つWordpress、XOOPSで構築されている ← スマートフォンテーマで作った方が早い!

という事で「Googleも推奨してるしそろそろうちのサイトも対応するか・・・」という皆様、お声掛けくださいね!(^^)!オシゴトオマチシテマス

オバマさん広島訪問決まりました。
「謝罪」を巡っていろいろ論争がありますが、私はその前にとにもかくにも原爆資料館を見てほしい。
「胸をえぐられるよう」と語ったケリーさんがオバマさんに訪広を進言したように、あの日広島で何があったのかキノコ雲の下でどれだけの人たちが亡くなり今も尚苦しんでいる人たちがいるか。
資料館が全てを教えてくれます。あれ見て心に何も思わない人はいないです。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>