スマートフォンサイト制作

SMART PHONEスマートフォンサイト制作

mobile firstMobile firstとは?

Xperia & iPhone6

従来のパソコンを前提としたウェブサイトやプロダクトからスタートする場合、後からモバイル端末を加えて考えた時、広大なパソコン画面と比較して狭小なモバイルの表示領域ではパソコン版の詰め込まれた内容がとても見にくかったり、操作しづらいだけでなく、データ容量も巨大になりがちです。

例えば告知キャンペーンで使用したチラシをそのまま名刺にすることにしたら、単純にチラシの内容を縮小して名刺に印刷すれば文字や写真の詳細は潰れ、とても読めなくなります。これを「視認性を損なう」といいます。

視認性を確保し適切なサイズに情報を収めようとすれば、必要になる情報を吟味して、かつ何を載せないかの取捨選択が必要になります。

スマートフォンのようなモバイルデバイスでは、このような情報のスケールダウンが行われるために後回しになることが通常でした。

対して「Mobile First」は、2009年にルーク・ウロブルスキ氏が提唱したのが、プロジェクトをモバイル端末からスタートしていくコンセプトです。
単純に制作順序をスマートフォンサイトから作るというものではなく、スマートフォン、タブレット端末での表示・操作を優先させることを重視します。

USAGEスマホの利用率

● PC● SmartPhone
    

携帯キャリアの新機種発表で、従来型の携帯電話(フィーチャーフォン)はほとんど見なくなり、世界的にもスマートフォン全盛の時代です。

日本でのスマートフォン契約数は2013年1月末に4,000万件を超え、国民の約3分の1がスマートフォンを保有する時代になりました。
総務省発表の平成25年末の世帯及び企業における情報通信サービスの利用動向調査によれば、ここ5年間でスマートフォンが急激な伸びを示してパソコンに匹敵する保有率になっており、今後もさらなる増加が予想されています。

そして利用率では、家庭内外でのインターネット利用は、パソコンをスマートフォン・タブレットの合計が上回る結果が出ており、今後も極めて重要なターゲットであることがわかります。


MULTI DEVICES多様なデバイスに対応する必要があります

iPhone(iOS)

60.2%

Android

38.3%

日本国内のスマートフォンのシェアは、iPhoneとAndroidでほぼ全てを占めるので「スマートフォン対応サイト」とは現在のところ、この2大OSに対応することになります。

もし機種ごとに対応させるとなると、最もシェアの多いiPhoneの場合は機種のバリエーションこそないものの、世代によって960×480(4s)〜1,920×1080(6plus)と多様な画面サイズを持ち、これに加えて国内外各社のAndroidをOSとする機種があり、新機種のリリース間隔からも現実的な話ではありません。

一昔前は、携帯専用サイト、スマホ専用サイトを用意して転送させるのが主流でしたが、情報を更新する時に2サイト分の更新コストが
かかることや、URLが分散してしまうのでGoogleなどの検索エンジンがPC用サイトと携帯サイトのどちらを表示したらいいのかわからないなどの
問題もありました。そこで登場したのが一つのサイトでPC用とスマホ用に表示することが出来るレスポンシブデザインです。

主要スマホ・タブレットの画面サイズとビクセル数
メーカー デバイス名 画面サイズ 横ピクセル数 縦ビクセル数
Apple iPhone3GS以前 3.5 inch 480px 320px
Apple iPhone4,4S 3.5 inch Retina 960px 640px
Apple iPhone5,5c,5s 4 inch 1136px 640px
Apple iPhone6 4.7 inch 1134px 750px
Apple iPhone6plus 5.5 inch 1920px 1080px
Apple iPad2以前 9.7 inch 1024px 768px
Apple iPad3以降 9.7 inch Retina 2048px 1536px
LGエレクトロニクス Nexus5 4.95 inch 1920px 1080px
Google,Asus Nexus7(2013) 7.02 inch 1920px 1200px
Sony Xperia A2 4.3 inch 1280px 720px

RESPONSIVEレスポンシブWeb Designとは?

レスポンシブwebデザインの歴史はアメリカ人デザイナーのイーサン・マルコッテ氏のブログ「A List Apart」で投稿された記事からスタートしました。

レスポンシブウェブデザインは、あらゆるデバイスで単一のwebページを使い、画面幅を基準にCSSだけを切り替えてレイアウトを変更する ことを提唱しています。この手法により、機種毎にHTMLファイルを用意することがなくなり、画面サイズを基準にレイアウトした一つのHTMLファイルで完結し、メンテナンスもシンプルになります。
このレイアウト手法を用いることで、既存の様々な機種はもちろん、今後も増加する様々なデバイスのスクリーンサイズ、OSにも対応が可能なのです。

具体的には、パソコンでのアクセスは広く画面を使ったレイアウト、スマホからのアクセスの際には小さな画面でも閲覧・操作しやすいレイアウトに変更するなどして、アクセスしてきた端末の画面幅に合わせて表示を切り替えることで、それぞれの専用サイトを用意することなく1つのHTMLファイルで全てのデバイスに対応させます。

  

レスポンシブwebデザインのメリット

レスポンシブwebデザインにすることで、ユーザーに快適な閲覧環境を提供するだけでなく、以下のメリットがあります。

  • PCサイトと同時制作の場合、1サイトとして作れるため大枠の共通化による制作費用の削減
  • パソコン用サイト、スマホ用サイトの更新費用が1サイト分で済む
  • 検索エンジンも1つのURLをユーザーに提示できれば良いので、評価が上がりSEO対策の面でも優位に立てる
  • サーバーサイドのスクリプトやJavascript/jQueryで切替え制御する場合と比較して、スタイルシートで対応した方が安価に対応可能

何より検索順位を決定しているGoogleがレスポンシブウェブデザインを使用することをサイト構築方法として公式ブログで推奨しています。

  • ・PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
  • ・ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。

Googleウェブマスター向け公式ブログ

モバイルフレンドリーに対応

モバイルフレンドリーは、現在Googleがスマートフォンでの検索結果のランキングに用いる評価基準のことで、WEBサイト・WEBページをスマートフォンや従来型携帯電話(ケータイ)などのモバイル端末での表示に最適化することです。

2015年4月21日より開始されており、Googleのスマートフォンでの検索結果には文字の可読性やスマートフォンでの操作性などから判断して「スマホ対応」と表示されるようになりました。

Googleの提唱するモバイルフレンドリーを満たす、レスポンシブ対応はスマホのSEO対策の面ではもはや必須事項と言えます。

御社のホームページがモバイルフレンドリーでどのような評価になるかは以下のURLで確認できます。

QUESTIONSよく頂くご質問

Q1他の制作会社で制作したサイトの対応は可能ですか?
はい、承ります。サイトによっては、他社でしか利用できないシステムを導入しているケースもありますので、現状を確認させていただき、内容によって最適なプランをご案内いたします。
Q2予算はどのくらいかかりますか?
既存サイトのスマホ最適化の場合、おおよそPCサイトの半額程度になります。スマホ専用サイトのみの新規制作をご希望の場合には、お見積させていただきます。
Q3制作期間はどのくらいかかりますか?
一般的なサイトで約3週間〜1ヶ月、ECサイトなどプログラムが要点となる案件はテスト含め3ヶ月程度が、平均的な製作期間です。
Q4対応OS、対応ブラウザについて教えてください。
スマートフォンのシェアは、iPhone(iOS)と Androidで96.3%のシェアを占めているため、これを標準対応としています。。対応ブラウザも、mobileSafari(iPhone), Android標準ブラウザへの対応をいたします。


コメントを残す

メールアドレスが公開されることはありません。

11 − 6 =