始めてのレスポンシブデザインの感想

Posted by : Izumikawa Fukumi 2014年3月11日火曜日

スマートフォンやタブレット端末などでインターネットを見る事が多くなりました。

そこでWeb業界では端末専用のページ等を作成し、それらをJavaScriptで振り分ける様な事わする手間などがあるのですが、最近一番注目されているのが、

レスポンシブWebデザイン

私さ一応この「レスポンシブデザイン」と言う技術がある事は知っていたのですが、

実際に作成に関わった事も無いですし、まずスマートフォン端末向けWebサイトの作成もした事はありません。

そして...とある日....

　イラスト向けWebサイト制作の依頼があり、ついでにCMS形式でシステムまで作成する事になりました。依頼者は基本的にスマートフォンやPC等での更新なので当然両方の端末で対応させなくてはなりません。そこで頭をよぎったのが...レスポンシブデザイン

レスポンシブデザインの利点としてCMS等での使い回しが出来ると言う事です。

1つのソースでスマートフォン・タブレット・PCに対応出来るのです。

ただ利点だけではありません。

当然通常のPCページを作成するより時間はかかりますし、それなりに作戦力が必要です。そして画像とかの設定が一番の悩みどころとなります。

ただ時間は納期とかないので大丈夫

作戦力って言っても既に出来ているテンプレートをレスポンシブにしたので関係ない。

一番の問題は.......

各端末に最適な画像にする事

イラストサイトだと当然1000pxを超える画像があるわけです。

その1000px超のイラストはPCから見ると綺麗で素敵なイラストに見えますが、

スマートフォン等の3G回線で1000px以上の画像を読み込もうとすると時間が掛かってしまいます。

時間がかかると言う事はユーザーにストレスを与えてしまう事で、

私がiPhone等でピクシブ等見ないのと同じ事なのです。

そこで私は考えました。

とにかく最適な画像を表示すると言う事を。

考えた結果の結論を言うとただ画像をリサイズさせればいいのです。

せっかくPHPの知識を持っているのだからそれを利用しないなんてもったいないと思います。

仕組みは単純で画像読み込み先をGETでPHPに値を送りそれを元に画像を読み込んでリサイズすればいい。ただそれだと端末を判別出来るのか??っと疑問に思うかもしれませんが、PHPのユーザーエージェントでならある程度どの端末からアクセスされているか分かりますし、JavaScriptで画面幅を測ってそれをGETで値を送れば画面幅だって把握出来ます。

これで1000pxの画像をスマートフォン等では500pxまたは300px等で見れると言うわけなんです。

素人なりに考えた結果がこれなんですよね(￣▽￣;)

そして何故最近記事がカラフルなのかと言うと.....

私実は...最近.....