menu
阿波銘木 公式ブログ

有限会社 阿波銘木 公式ブログ

desktopファーストであるという難しさ

シャレにならない暑さですね。

 

今日は電気屋さんに来てもらって水漏れしてたクーラーを直してもらいました。

こういう時は東京じゃなく北海道に帰りたいのですが北海道も暑いようで・・・。

今日も都内の一室で作業してます。

 

お久しぶりのwebシステム担当です。

 

さて、2017年07月10日に阿波銘木 公式サイトはレスポンシブWebデザイン版を正式にリリース致しました。

ここに至るまで、進捗がはっきり見えなかった時間が多かったので、どうかなーと思っていましたが、

まぁ1次フェーズとしては悪くないスピード感で対応出来たと思っています。

 

とりあえずですが。

 

この『とりあえず』というのが、なかなかにタチが悪いです。

 

阿波銘木のサイトは今までPCのみのサイトとして運営してきました。

要はPC用のページしかなかったということです(当たり前ですが^^;)。

 

主にPCからスマートフォンやタブレット用にサイトを構築するには2通りのやり方があります。

 

1つはスマートフォン、タブレット用のページを別途に作ってしまい、サーバーサイド側でUserAgentを取得し振り分ける。

 

もう一つはレスポンシブWebデザイン。

 

今回、レスポンシブWebデザインを選択したのにはいくつか理由があります。

 

・UserAgentは新しい端末が出る度に設定が必要になる可能性がありイタチごっごになる。

・1ページ当たりの管理数が多くなり1人で見切れる状態ではなくなる。

・UserAgentの異なるGooglebotごとにページをクロールする必要がないため、Googleが効率的にコンテンツを発見できるようになる。

・時代のトレンドの作りである。

 

まぁ、『Googleが推奨しているから。』と言えばそれまでなのですがww

 

ただ、レスポンシブWebデザインを採用するに当たって大きな問題がありました。

それは阿波銘木のサイトが、PCで閲覧してもらうことを基準にして作られていたというコトです。

 

レスポンシブWebデザインを採用する場合、まずは小さいディスプレイ用のレイアウトから作成する『モバイルファースト』というやり方が一般的です。

ところが阿波銘木の場合、PCからスマートフォンへという『desktopファースト』というやり方になってしまいます。

 

この場合、PCで見えるままにスマートフォンへコンバートすると必然的に文字が小さくなります。

PCで当然のようにやっていた横並びを横幅のほとんどないスマートフォン用に無理やり適応させるからです。

これは実際にサイトを見てもらったほうが早いかもしれませんね。

 

 

ですので、次のフェーズでは文字を大きくする。横並びの部分を文字サイズを出すために一部縦並びにするといった作業が中心になります。

 

上記の作業 + その他の作業も含めて2次フェーズのロンチは9月〜10月を予定しています。

 

とりあえず、頑張ります^^

 

そういえば都選はモバイルファーストでもdesktopファーストでもなく

『都民ファーストの会』が圧勝しましたね。

 

色々な意味で2017年07月10日は面白い1日でした^^

レスポンシブWebデザインって何??

今週末に東京から北海道に帰省しますwebシステム担当です。

 

今回はレスポンシブWebデザインについて。

 

今年の7月〜8月に当サイトはスマートフォンに完全対応する予定でいます。

 

このサイトはスマートフォンには優しくないよと天下のGoogle様に怒られたので実際にWi-Fiを使わずに見てみたら、マジでクソ重い(っていうか知ってたけど)www

 

とは言え、限られた時間の中での改修になるのでなかなかスムーズには進みません。

 

 

阿波銘木のサイトのPC版がリニューアルされた当時、cssのサイズはpxで指定をしていました(古い^^;)。

今はrem(root em)という考え方があります。

これはrootという文字通り、一番上の親タグのサイズを元に足し引きするというものです。

 

例えば、

html{ font-size: 15px; }

p{ font-size: 1.2rem; }

だとしたら、pタグは15px x 1.2rem = 18pxになります。
この例では親クラスの文字サイズ(font-size)を変更するだけで全ての文字サイズが変更します。

これは文字サイズ以外にも親タグで指定した要素に対して適応することが可能です。
メジャーなところでいうとwidth・height・margin・paddingとかでしょうか。

これをうまく使ってブラウザの横サイズが480pxを切ったとき上の要素をコントロールして
スマートフォン専用のページの全体バランスを整えようと思っています。

 

レスポンシブWebデザインとは上記のようなことを指します。

PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを動的に調整することを

レスポンシブWebデザインと言います。

 

今、流行りの作り方ですね。Googleも推奨してますし^^

もうPC用、スマートフォン用でuaを見てレイアウトを切り替える時代は終わったと言えますね(物にもよりますが)。

ただ、それ以外のレイアウトはしっかりと考えないといけません。
スマートフォンには横の概念がないので画像とかは新しく作ってもらわないといけません。

この辺はデザイナーに他のスマートフォンのサイトを見ながら勉強してもらいます。

僕自身、スマートフォンのサイトを作ること自体は簡単にできますが、内容が伴わないと意味がありませんからね。
それに暫定的に作ったとしても結局は改修に追われるワケです。


阿波銘木の話は終わり!
昨日は前々から注文していたKensington社のSlimBladeというマウスが届きました!!


マウスに10,000円は高いと思いますが、商売道具ならいくら使ってもいいと思っています。

今日、帰省するためのスーツケースを出しました。
今週の金曜日に登別に帰省します^^

カテゴリー
最新記事
アーカイブ
カテゴリー
最新記事
アーカイブ
facebook
Twitter
TOPへ戻る