2018.09.25

レスポンシブ化(スマホ、タブレット対応)の重要性

ホームページのレスポンシブ化はもう済んでいますか?「レスポンシブ化」とは、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の追加のみで対応できる場合がほとんどですから。

レスポンシブ化のタイプ

一言にレスポンシブ化と言っても実は、料金によってタイプが分かれます。料金によってなのかは依頼される会社によりますが、どの位まで対応させるのかによって工数が全く違ってきたりするのは必然なので、「料金」と表現させていただきます。
さて、レスポンシブ化のタイプは大体2通り。

1.PCとスマホ(幅450px)位に対応

いわゆるiphoneを基準として対応させる方法。幅450px以下のデバイスで見るとスマホ用にデザインされたホームページが表示される。では、PCで閲覧する場合の幅を980pxとして、スマホの画面幅を450pxとするとその中間は…??対応してません。
作業をする方としては、450px以外を気にしなくていいので楽。つまり安くなるわけです。

2.PC画面以下の画面幅に全対応させる

PCの画面幅を2000px位として、それ以下の最低350px位まで対応させるレスポンシブ化の方法。これは結構大変なので工数が上がります。フレキシブルでflexboxを使ったとしても、flex-wrapさせる(改行っぽい感じのイメージを)画面幅を見つける必要が全要素に発生します。「全て」といっても大体部分的なブロックの表示を画面幅を変えながら変な表示や見辛い表示になる部分を見つけだし、その部分全てを再デザインしなおす方法がこのレスポンシブ化のタイプになります。