Web関連

レスポンシブデザインのHTMLコーディングにある落とし穴(Viewport編)

0

こんにちは。音楽はCD派、コンサルティングの糸井です。
最近は、何もかもデータ化してしまう傾向にありますね。特に書籍やCDは、ニュースにもなるほどです。
私は今でも、音楽はCDで買う・借りる人です。(時代遅れかもしれない…笑)
インターネットのダウンロード形式で買うことにまだ抵抗があるのが理由ですが、やっぱり現物があると嬉しいですよね!
本も同じように、今でも書籍をお店に行って買っています。これも同じ理由で、現物があった方が嬉しいからです。

とはいえ、インターネットで買っておいたことによる恩恵を受けた事がないわけではありません。例えばスマートフォンのアプリは、一度買っておくと機種変更をしても再度支払いをせずにダウンロード出来たりするので、物をよく失くしてしまう私からするととても嬉しいことでした。
今後は色んなものがダウンロード形式になっていくのかな?もし、そうなっていくなら、普段持っている物全てがダウンロード出来たらいいのに(笑)

そんな妄想をしながら、今失くしたイヤホンを必死で探しています。。。

 

さてさて、記事の本題はここからです。
前回ご紹介した記事「レスポンシブデザインのHTMLコーディングにある落とし穴(Media Query編)」に続きまして、今回はViewportの落とし穴についてご紹介したいと思います。

Viewport(ビューポート)には落とし穴がある!?

レスポンシブデザインのWeb制作、経験を積んでも意外と時間が掛かってしまいます(汗)
そんなレスポンシブデザイン制作に必要不可欠なもの、それはViewport(ビューポート)です。レスポンシブデザインは、スマートフォンでサイトを閲覧しに訪れてきたユーザーをサポートしなければならないため、HTMLの<head>タグ内に必ず含めなければなりません。今となっては常識ですね。

名作マンガ「スラムダンク」の主人公・桜木花道に超天才のイケメンバスケットボーラー流川楓という最大最強のライバルが必要なように、スマートフォンサイトにもViewport(ビューポート)は必要なのです。

そういえば、スラムダンクの最終回のその後の話、皆さんご存知だったりしますか?
スラムダンクの最終回から10日後の話として、2004年に作者である井上雄彦が、廃校になった旧神奈川県立三崎高校の黒板に最終回のその後の話を書いたとか。これは単行本1億部突破を記念したイベントで書いたようです。スラムダンク好きの人は既に知っている人が多いと思いますが…。
ちなみに、この話はYouTubeに動画としてアップされているらしく、自分も見たことがあります。
どんな話か気になった方は、是非検索してみてください。

おおっと!話が大分逸れましたね、本題に戻ります。Viewport(ビューポート)の落とし穴でしたよね。すみません。
Viewport(ビューポート)の落とし穴ですが、それが何かと言うと、設定を少し間違えるだけで、ピンチズーム・ピンチアウトの操作がスマートフォンで出来なくなってしまうのです。

ピンチズーム・ピンチアウトが出来なくなる!?

はい。そうです。出来なくなります。
サイトの仕様によっては出来ても・出来なくてもどちらでも問題がない場合がありますが、これは設定一つで決める事が出来ます。
おさらいも兼ねて、Viewport(ビューポート)プロパティーの一覧を見てみましょう。

■Viewportプロパティーの一覧
・width ・・・ コンテンツの幅
・height ・・・ コンテンツの高さ
・initial-scale ・・・ 初期倍率
・minimum-scale ・・・ 最小倍率
・maximum-scale ・・・ 最大倍率
・user-scalable ・・・ ユーザーに拡大・縮小の操作を可能にするかどうか

よく使うプロパティーを赤文字で強調してみました。

ここで、今回の記事タイトルにもある落とし穴の説明をしますが、皆様はどの設定を操作すれば良いのか、わかりますか?

・・・ごめんなさい。「見ればわかるじゃん」という回答が大半だとわかりながら、変な質問をしてしまいました。

そう。プロパティーの一覧を見ればわかりますよね。
「user-scalable」というプロパティーの設定を変更すれば良いのです。

と思った方は、既に落とし穴に引っ掛かっています!

実は「minimum-scale」「maximum-scale」「user-scalable」この3つのプロパティに全てに設定しなければ、問題は解決しません

そうです。見出しに大きく書いてしまいましたが、「minimum-scale」「maximum-scale」「user-scalable」この3つのプロパティー全てに対して設定をしなければ、問題は解決しないのです。「minimum-scale」には「1.0」、「maximum-scale」には「1.5」、「user-scalable」には「yes」といったように、それぞれに値を指定しなければなりません。サンプルは以下の通りです。

<meta name=”viewport” content=”width=device-width,minimum-scale=1.0,maximum-scale=1.5,user-scalable=yes,initial-scale=1.0″ />

こんなところにも落とし穴があったのか!!!

と思ったのは、私も同じです。
コンサルティングスタッフとして、毎日企画立案やプロジェクトマネージメントをしながら、とある案件の制作を手伝っていたときに、今回のテーマに取り上げた問題に直面し、試行錯誤の末、この落とし穴に気付きました・・・。

HTMLには見向きもせず、JavaScriptのコードばかり見ていて、視野が狭くなっていました。。。

私と同じような問題に直面している人がいるかも?と思って、今回のコラムを書いてみました!

参考になりましたでしょうか?

え?何でコンサルティングなのに制作をしているかって?

元々はデザイナー志望でWeb業界に入ったので、ちょっとした制作であれば自分でも出来るんです。

また役立つ情報があったら、ドンドン紹介していきますね!

関連するサービス

ホームページ制作

Webデザイン制作

レスポンシブWebデザイン制作

0

web上でのコミュニケーション!前のページ

W3C日本会員会議に参加してみた!次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新しい販売形態であるDtoCについて考えてみる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    WEB制作時のFTPトラフィックについて

    こんにちはサーバーエンジニアの橋本です。先日自宅で使っているノ…

  2. Web関連

    【Web制作会社に聞いた】Webサイト売上げアップに使える”行動心理学” そ…

    さて、今回は「行動心理学」についてのコラムです。Webサイトを…

  3. Web関連

    ABテストでより良いサイトに!

    皆さんはABテストをご存知でしょうか?名前を聞いて、大体の予想がつ…

  4. Web関連

    競合よりも顧客満足度を上げるには「顧客の期待値を変える」こと

    顧客満足度向上について全三回でお送りしていますが、今回が最終回です。…

  5. Web関連

    基本中の基本!webで行う品質を上げるための対策3か条!

    Webサイトのデザインを制作しているとよくあるのですが、いかにカッコイ…

  6. Web関連

    Amazonプライムラジオ登場!

    4月22日、Amazonプライム会員用サービスに、新しくサービスが追加…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    One to Oneマーケティングへの道(1)~DMPとは?~
  2. サービス・新技術

    【3分で解説】これから始まる自動車教習所のオンライン学科教習。知っておくべき3つ…
  3. Web関連

    ロボット産業拡大中!気になるロボット集めてみました。
  4. Web関連

    知らなかったはもったいない!得をするにはネットも視野に
  5. Web関連

    なぜ失敗する?プロジェクトマネジメントで抑えておきたい3つの対策
PAGE TOP