2017/11/11

Viewportのwidth=device-widthは嫌だと言われた話

HTML 


metaタグ書いてますか?


Webサイト作るならこのmetaは書いておけ! みたいな記事はたくさんありますね。

その1つが <meta name="viewport" content="width=device-width">です。


でもね、この前お客さまに 「それいらないよ」と言われたんです。




レスポンシブなら必須のviewport "width=device-width"

ここ数年で流行っている レスポンシブなWebページ。

PCページとスマホページをわざわざ2つ作らなくて良いので、作り手の個人的な感情としてはすごく好きです。

1つのソースで済みますからね。


そのレスポンシブ手法の1つに、このmetaタグがあります。

<meta name="viewport" content="width=device-width">

このmetaタグは デバイス(≒ウィンドウ)に合わせて横幅を最適化してくれるものです。

特に何も考えずに書いても恩恵はありますので、おまじないのように書いてる人も多いんじゃないかと思います。


viewport いらないよと言われたシーン

家計簿システムで言われました

プライベートな話なんですけど、うちの家では自作の家計簿を使ってまして。

私がWebシステムとして作った家計簿を、嫁が使ってるのです。


あ、冒頭で言った「お客さま」とは嫁のことです、はい(笑)


旧システムから新システムに移行したときそれは起きた

この家計簿システムは数年運用してまして。

私が新しい技術を得たときにそのアウトプットとして都度アップデートしてるんです。

ちょうど前に新しいデザインを勉強したので、じゃあ変えようかと。


旧デザインはスマホでもPCビューで、昔ながらの縮小された見た目でした。

新デザインはレスポンシブにしてスマホビューを最適化しよう! これが狙いです。


アップデート後にお客さま(嫁)から呼び出しが 

嫁
 

ちょっと! 家計簿バグってるよ

(えっ?! リリースで何か失敗したのかな?)

嫁
 

ズームできなくなったんだけど

それはできる。2つの指をこうやって広げれば...

嫁
 

違う。縮小のことよ

一覧が見切れてるんだけど、どうやったら見れる?

あぁ、それは横にスクロールすれば良いよ

嫁
 

それはダメ。全体が見れないと比較がしづらいから困る


指してた画面は、表形式で月別サマリーを表示していた画面です。いわゆるtableタグを使っていまして。

PCビューだと全体が見れるけど、スマホビューだと見切れる部分は横スクロールしないと見れないというものでした。


Web製作者なら苦労話の1つとして共感してもらえるかな?

表形式をレスポンシブ対応してもイマイチな感じですね。


キャプチャーを2枚貼ってみます。

左がレスポンシブ対応していないPCビュー。右がレスポンシブ対応したスマホビューです。


レスポンシブ対応していないPCビュー
レスポンシブ対応したスマホビュー

※一応、家計簿なので金額は隠しました(笑)


文字サイズ大きくて見やすいと思うんだけどなぁ

嫁
 

5か月先まで見てるんだから、全部見れないと困るよ(キリッ)


その後、迅速な対応

お客さま(嫁)の要望なので、良かれと思って対応したレスポンシブをやめて、PCビューに戻しました。

viewport "width=device-width"をはずすという作り手としては何ともテンションが上がらない修正です。


幸い、gitでソース管理してるのでただ元に戻しただけという。


キーボードカタカタ...(git revert)

嫁
 

おっ!? もう直ったの、すごいね!

ありがと~!


まとめ

ここから学んだことは3つありました。

  • 良かれと思ったことでも、ユーザーはそうでもないことがある。
    特に新しい技術や難しい技術は必ずしもユーザーが必要としているわけではない。
  • 失敗してもリカバリーの早さが評価につながる。
  • 嫁は大切にしよう。

viewport "width=device-width"がいらない。つまり スマホでもPCビューがいい

という感情は、私には盲点でしたので良い教訓になりました。

何にせよ、ユーザーの望むものを作りたいものですね。


最後に、大事なことなのでもう一度。嫁は大切にしよう。



このエントリーをはてなブックマークに追加