2019.10.13
レスポンシブ化(スマホ、タブレット対応)の重要性
ホームページのレスポンシブ化はもう済んでいますか？「レスポンシブ化」とは、PCを始めスマートフォン、タブレット、更には様々な画面サイズのデバイスからアクセスされた場合に、適切な表示デザインに変更させること。
レスポンシブ化とは？
ホームページのレスポンシブ化とは、PCを始めスマートフォン、タブレット、更には様々な画面サイズのデバイスからアクセスされた場合に、適切な表示デザインに変更させることです。
少し前まではスマホなんて…などと私自信思っていたのですが、結局2018年の現在の時点でいうと、PC以外のスマートフォン、タブレットを含む移動端末からのアクセスは、大体8割～9割ほどになりました。
もう「ほど」という表現も少しおかしいですかね。「大体スマホ」で見ているといったほうがしっくりくる。そんな時代です。
少し前にリニューアルしたのに…
インターネットの世界はもの凄いスピードで進んでいるのは体感されていますよね。アップルのiphoneが発売されたのが2007年らしいですよ。もう11年も前。。。その頃は確かフルフラッシュサイトが日本で流行していたのを思い出します。Action scriptを頑張っていましたから(笑)
翌年2008年にiphone3Gが日本でも手に入るようになったそうです。
もう10年という月日が経ってしまっているにもかかわらず、大人というものは「ついこの間」などというイメージを持ってしまうもの。ネットの世界は1年経てば相当な変化や革新が起きたりするものです。
ホームページをリニューアルした頃、それをチェックしていたデバイスはパソコン？それともスマホでしょうか？もし、綺麗に作り直した時期にスマホでホームページのチェックをしているのが普通だったなら相応の注文を制作の段階でしていたはず。
もし、スマートフォン対応をしていなかったのなら、今がいい時期なのではないかと思っていたりします。
今こそレスポンシブ化
さて、前述したとおり、すでにスマートフォンが日本に登場して10年。なぜ今こそレスポンシブ化なのか。
簡単に言えば、大体の端末が同じような動作をする仕様に統一されてきたからです。基本的に日本で普及している移動端末は、iphoneとandroidですよね？細かい仕様こそ違えど、同じwebkit。
相当こだわったものにしない限りほぼ同じような動作をする作成側からすれば非常に嬉しい仕様です。
更に、flexboxも当たり前のように使える。すでにPCよりもスマートフォンの方が作りやすく優れている感じさえします。PCの場合、どうしてもwindowsが絡んでくるのが辛い。EdgeになってもなおCSS3の不具合が連発する悲しさ虚しさ。
そんなこんなで、パソコン用に適正化するより、ユーザーの多いスマホ対応をしましょう。
元のソースが纏まっていれば、CSSの追加のみで対応できる場合がほとんどですから。
レスポンシブ化のタイプ
一言にレスポンシブ化と言っても実は、料金によってタイプが分かれます。料金によってなのかは依頼される会社によりますが、どの位まで対応させるのかによって工数が全く違ってきたりするのは必然なので、「料金」と表現させていただきます。
さて、レスポンシブ化のタイプは大体３通り。
1.PCとスマホ(幅450px)位に対応
いわゆるiphoneを基準として対応させる方法。幅450px以下のデバイスで見るとスマホ用にデザインされたホームページが表示される。では、PCで閲覧する場合の幅を980pxとして、スマホの画面幅を450pxとするとその中間は…？？対応してません。
作業をする方としては、450px以外を気にしなくていいので楽。つまり安くなるわけです。
作業をする方としては、450px以外を気にしなくていいので楽。つまり安くなるわけです。
2.PC画面以下の画面幅に全対応させる
PCの画面幅を2000px位として、それ以下の最低350px位まで対応させるレスポンシブ化の方法。これは結構大変なので工数が上がります。フレキシブルでflexboxを使ったとしても、flex-wrapさせる(改行っぽい感じのイメージを)画面幅を見つける必要が全要素に発生します。「全て」といっても大体部分的なブロックの表示を画面幅を変えながら変な表示や見辛い表示になる部分を見つけだし、その部分全てを再デザインしなおす方法がこのレスポンシブ化のタイプになります。
3.スマホ専用ページを作る
PC以外に端末のユーザーエージェントによってサーバー側から表示させる情報を変更する方法。こちらはCSSだけで対応するのではなく、イメージ的には全スマホページを一から作成するという荒ワザです。
とは言うものの大手はこの方法を使っている場合が多い印象があります。
とは言うものの大手はこの方法を使っている場合が多い印象があります。
ホームページにお金を掛けるのが普通だという方針であれば、これに越したことはないでしょう。しかし、実際はそうも行かない場合がほとんどではないでしょうか。情報の修正が必要であれば、PC版にもれなくスマホも対応が必須となります。完全に別の情報を表示しているわけですから当たり前ですよね。
PCの場合はAというファイル。スマホの場合はBというファイルを表示させているわけですから。
ランニングコストは最低レベルですが、コンテンツの質を重要視する場合は、こちらが最適といえます。
レスポンシブ化の難しさ
ほとんど愚痴になりますが、レスポンシブ化は簡単か？と聞かれれば「難しい」と言えます。特に画像でコンテンツを作成されている場合、スマホ端末で見える大きさにする為には、画像を切断・細分化（※HTML再構築）した後に幅によって見え方を再度デザインする必要があるからです。
・980px幅でサービス説明画像があったらどうか？
・どこで改行できる？
・そもそも切っていいのか？
ここがレスポンシブ化の難しさであり手間がかかる部分です。３種類の比較を横に並べてたりすると構成自体を変更することになりますので、再度コンテンツの打ち合わせや確認などの作業が入りコストが上がります。
いやいや、Wordpressの記事を共通してスマホで普通に見れるようにしてくれればいいんですよ。なんてのは画像の比ではなく無茶な話なのです。スマホで表示した場合のことを考えて記事を書いていますか？していないですよね？あらゆる端末でいい感じに見えるサイト。これは、規則に沿って記事がかかれているのに気づきましょう。そして、安く、簡単にを求めるのであれば、自身が知識を求める必要があります。
何度も言いますが、コストを抑えるなら自分の知識を高めてください。コストが掛かるのは当たり前と考えるならそれは正しいです。