ヨネシス株式会社 » スマートフォン

レスポンシブデザイン

yoneda — Fri, 11 Sep 2015 10:38:23 +0000

スマホでもパソコンでも見ることができる万能のホームページを作ることができるレスポンシブデザインですが、享受できるメリットがある一方で、デメリットもあります。

まずパソコンでもスマホでも同じデータが読み込まれますので、例えばスマホでは必要のない画像も読み込まれてしまいます。たとえば、ホームページのバックグラウンドに大きな画像を壁紙として表示した場合、パソコンできれいに見せるためには、かなり大きめのサイズを用意する必要があります。場合によっては数メガバイトもある画像を使います。ですが、スマホではそんなに大きな画像を必要としません。

また、レスポンシブデザインを用いると、デザインに少なからず制約が出てきます。レスポンシブデザインで作る場合、色々な端末を想定して作らなければならないので、初めからスマホ用に作られたホームページのようにはいかないのが実情です。

そして古いブラウザへの対応が困難だという事も言えます。レスポンシブデザインではHTML5やCSS3の機能を多く使っていますので、それらに対応したブラウザでなければ正しく表示させることができません。もっとも、この部分についてはレスポンシブデザイン自体の問題ではありませんけれど。

つまりレスポンシブデザインは導入のメリットばかりでは無いという事です。それでもレスポンシブデザインが注目されてるのは、そのようなデメリットを考慮しても導入するメリットが補って余りあるということなのです。

ちなみにヤフージャパンや楽天のようなサイトはレスポンシブデザインではありません。これは使い勝手などを考えると、パソコンはパソコン用に、スマホはスマホ用に作った方が閲覧者にとっては使いやすいということです。
使う場所を間違わないようにしなければ、せっかくの機能も生かせないというのは何においても同じことですね。

ヨネシスでは基本的にはレスポンシブデザインを推奨していますが、その運用形態などから判断してサイトの構築を提案するようにしています。ホームページやシステムでお悩みがありましたら、ぜひお問い合わせください。

スマホ対応への方法

yoneda — Tue, 08 Sep 2015 07:18:43 +0000

ホームページをスマートフォン対応させるための方法は、大きく分けて２通りの方法があります。

一つ目はスマホ版のサイトを別に作成する方法です。
パソコン版とは別にスマートフォン版のホームページを作成して、アクセスしてきた端末がスマホならスマートフォン版を、パソコンならパソコン版の情報を返します。ホームページのデータが置いてあるサーバーで、どんな端末からアクセスしてきたかを判別して、端末に適した情報を返します。
これにはスマートフォン版用のサイトへ転送するタイプのものと、その都度毎に判別して適した情報を返すタイプのものがあります。後者は管理が複雑になるため、レンタルサーバーのホームページサービス等、パッケージ化されたサービス以外ではあまり見なくなりました。転送するタイプのものは比較的容易に対応できることもあって、よく用いられる手法です。
この方法でスマホ版のホームページを作成した場合、パソコンとは別に更新を行う必要が出てきます。コンテンツ自体もパソコン版にはあるがスマホ版には無かったり、スマホ版は更新したけれどパソコン版は古いままというようなことが起こります

もう一つのスマホ対応は、レスポンシブデザインという方法でホームページを作る方法です。
これはパソコン版とスマホ版を「同じデータで作成する」というものです。サーバー側でどの端末からのアクセスなのか判別することはありません。すべての端末に対して同じデータを返します。
そして受け取った端末がパソコンでもスマートフォンでも、その画面サイズに「最適化」させて表示することができるというものです。

分かりやすい例として、今ご覧になっているこのホームページをパソコンで見ている方はブラウザの横幅を狭めてみてください。スマートフォンくらいの幅にすると、全体のレイアウトが変わってスマホ版になります。
これがレスポンシブデザインです。

↓画面サイズに合わせて画像の配列とサイズが変わります。

次回はレスポンシブデザインについて書きます

モバイルフレンドリーって？

yoneda — Mon, 07 Sep 2015 06:32:46 +0000

前のトピックで「スマホ対応のウェブサイト」について書きましたが、どうすればモバイルフレンドリーなホームページが作成できるのでしょうか。そもそも「スマホ対応」の定義って何なのでしょう。

Googleのモバイルフレンドリーテストで「日本最古のホームページ」と言われているサイトをチェックしてみました。

予想通り「モバイルフレンドリーではありません」と判定結果が出ます。その理由も記載されています。
・テキストが小さすぎて読めません
・リンク同士が近すぎます
・モバイル用 viewport が設定されていません

上の二つは拡大すれば解決するじゃないか・・・と思われるかもしれませんが、それではもう不親切であるということなのかもしれません。スマートフォンで閲覧する時は、拡大縮小などを行わず、操作もパソコンと異なり指でタップするためボタン類を押しやすく配置する必要があるのです。
viewport というのは、どんな画面の大きさでサイトを構築しているかという設定になります。

どのくらい文字が大きければ良いのか、リンクが離れていれば良いのかという基準は、はっきりと公開されていませんが、スマートフォン用にホームページを作成するとこれらは満たされていきます。あとはスマートフォン用に作ったサイトの想定サイズを適切に記述すればモバイルフレンドリーテストはパスできるでしょう。

次回はスマホ対応のための２つの方法を解説いたします。

スマホ対応（スマートフォン対応）のウェブサイト

yoneda — Sun, 06 Sep 2015 05:50:37 +0000

ホームページにおいて、最近のもっともホットな話題がGoogleのスマホ対応表記ではないでしょうか。
すでに若年層のパソコン離れとスマホ普及率は著しいものがあり、スマートフォン向けのサイトを作ることは、ホームページの要件の一つとなりました。それに拍車をかけたのが、前述のGoogleの対応です。
スマートフォンを使ってGoogle検索をしたときに、検索結果で「スマホ対応」と表示されます。これはGoogleのロボットが一定の基準を満たしているサイトに「スマートフォンで快適に閲覧できますよ」というタグ付けを行ったものでした。
ところが、このタグ付けを検索順位に反映させることをGoogleが発表したのです。

どういう事かといいますと、
Googleから「スマホ対応」とタグ付けされていないサイトは、スマートフォンで検索した時の検索結果が上がりにくいということになります。検索結果の順位はホームページの運営において非常に重要な要素であることは疑いようがありません。そんな大切な検索順位が左右されてしまうというのです。

Googleはスマホ対応かどうかチェックできる、モバイルフレンドリーテストというチェックツールを提供していますので、気になる方はチェックしてみてください。

https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja

これからホームページを作られる方、ホームページをリニューアルしようと考えられている方は、モバイルフレンドリーという考え方を持ることがとても重要になります。