ウェブデザインの動向は?PCサイトだけでは乗り遅れている!

ウェブデザインの最近の動向をご紹介したいと思います。少し前までPCサイトがメインで作られていましたが最近はスマホユーザーが多くなったのでスマホ対応をしていないと時代に乗り遅れている事になります。ここではスマホサイトの重要性や最適化などをご紹介します。

更新日:2016年10月15日 09時00分

View:640

00 top m

出典: gigazine.net

スマホユーザーが劇的に増えている!

出典: cajon.co.jp


インターネット調査のニールセンは、スマートフォン視聴率情報「Nielsen Mobile NetView」の2016年4月データを基にスマートフォンアプリの利用状況を分析し、5月31日、結果を発表した。2016年4月時点で、スマートフォンの利用者数は5496万人となり、1人あたりの1日の平均利用時間は2時間11分とだった。スマートフォン利用時間全体のうち、アプリからの利用とWebブラウザからの利用の内訳をみると、アプリからの利用時間が全体の8割を占めていることが分かった。アプリ別の利用者数は、1位が「LINE」で4305万人と、前年比で20%(704万人)増加していた。Nielsen Mobile NetViewは日本全国の8000人(iOS、Android各4000人)の調査協力モニターから取得するアクセスログ情報を基に作成している。

出典: web-tan.forum.impressrd.jp

スマートフォンが世の中に出てから年々そのユーザー数が増え、最近ではPCよりスマホでサイトにアクセスするユーザーが多くなったとニュースで見ました。それに伴い、Googleがモバイルフレンドリーに適しているサイトでないと検索結果を下げると言う様に発表しています。

モバイルフレンドリーかどうかは以下のサイトから調べることが出来ます。

モバイルフレンドリーとは?

出典: ferret-plus.com


Googleが無料で公開しているモバイルフレンドリーテストツールを用いると、Webサイトがスマートフォンでの閲覧に適しているかどうかをチェック出来ます。

モバイルフレンドリーのチェック項目は全部で4つあります。

1.フォントサイズが小さすぎないか
2.ビューポートが設定されているか
3.タップ要素同士が近すぎないか
4.コンテンツサイズがビューポートに対応しているかどうか

上記4つに1つでも違反しているページは順位が下がると考えたほうが良いでしょう。

出典: ferret-plus.com

先のモバイルフレンドリーテストの結果スマホに対応していないと上記の様な画像が表示されます。スマホは画像解像度がPCに比べて大きくなっていますのでPCサイトをスマホで表示した時に全てが小さくなってしまいます。そのためリンクが上下に並んでいると指でタップする事が出来ません。PCサイトをスマホで見ると、とても不便ですし画像もジャミーが出て美しくないと言う事になります。

最近はウェブデザイン業界ではスマホサイトを先に作ってから、PCサイトを作ると言う順番に変わって来ています。

レスポンシブとの違いは?

出典: coliss.com


スマホ対応を実現する方法の中でも、いま最も採用されているのがレスポンシブWebデザインです。CSS3のメディアクエリを利用することで、デバイス(ディスプレイサイズ)ごとに異なるCSSを適用させます。
メリット
• HTMLが同じなので、1度でPC向けサイトとモバイル向けサイトの両方が更新される
• SEOやSNSによるシェアに強い
• Googleが推奨している
デメリット
• ページの表示に時間がかかる場合がある
• 制作予算(工数)がふくらむ可能性がある
• PC向けサイトとモバイル向けサイトのデザインを大幅に変えることが難しい

出典: imaginote.co.jp

この様にレスポンシブはサイトのコードにメディアクエリを置く事で閲覧するデバイスの解像度毎に1つのデザインを表示を変えています。元々のサイトの構造であるhtmlは同じで装飾であるcssをデバイスによって変えていると言う事になります。


スマホ対応とは?

出典: unicus.biz


スマホ対応とは要するにデバイスごとに専用のサイトをつくる方法です。パソコンサイトとは別に、スマホ用サイトやタブレット用サイトをつくります。この場合、各デバイスごとに異なるHTMLファイルを持つことになるので、下記のようにデバイスごとにサイトURLが異なります。
PCサイト http://◯◯◯.com/
スマホサイト http://◯◯◯.com/sp/
メリット
• HTML/CSSファイルがPCとスマホ向けで別なので、独立した運用管理ができる
• PC向けのデザインとスマホ向けのデザインをそれぞれの環境に合ったものにできる
デメリット
• HTML/CSSが完全に独立した別物なので更新するときは両方とも更新しなければならない
• URLが異なるため流入が分散するのでSEOやSNSによるシェアに弱い
一つ目の方法とほぼ同じですが、こちらはURLが同じになります。UA(ユーザーエージェント)を判別して表示するHTMLを振り分けます。URLが同一なので、SNSシェアに強く、ユーザビリティ面でもメリットがあります。PHP、JavaScript、.htaccessのいずれかを用いて対応します。
メリット
• PC向けのデザインとモバイル向けのデザインをそれぞれに適応したものにできる
• SEOやSNSによるシェアに強い
デメリット
• URLが同じでも呼び出しているソースは別々なので、両方のHTMLを更新しなければならない
• コーデイングとは別にプログラミングをする必要がある

出典: imaginote.co.jp

この様にスマホ対応とは、サイトにアクセスするデバイス毎にhtmlとcssを作ります。コードが分かっていないと作る事が出来ません。SEOには強いサイトに出来上がりますが、デザインを変更する時に手間がかかりますので、レスポンシブにするかスマホ対応にするかで悩むところとなります。

後々、デザインを変更する予定がある場合はレスポンシブにした方が良いかもしれませんね。ちなみにWordPressで作ったサイトでもプラグインを入れてスマホ対応にする事が出来ます。WPtouch Mobile Pluginと言う物がそのプラグインの1つです。

WPtouch Mobile Pluginとは?

WPtouchは、スマートフォン端末向けのサイトを自動生成するプラグインです。WPtouch Proの無料版です。言語設定でJapaneseを選択すれば、管理画面が日本語表記になります。専用テンプレートのカスタマイズもできます。

非常に有名なプラグインですが、無料版なので機能は限定されています。本格的にスマートフォン向けのWebサイトを運営するのには向いていません。シンプルでもいいからスマートフォン向けページ表示を最適化したいと割り切って利用すると便利です。

Webサイトの内容が「文章と画像中心」の場合、これを利用するとスマートフォンに最適化されて見やすくなります。ただ、CSSで装飾したページや表組みが多いページなどは、逆に見づらくなる場合もあるので注意して下さい。

出典: netaone.com

この様にスマホサイトを自動で作ってくれますので、自力でカスタマイズ出来ない方には良いプラグインだと思います。この他にもいくつか無料・有料どちらもありますのでご自身で使える物を選ぶと良いのではないでしょうか?

まとめ

企業のサイトも学校のサイトもまだスマホ対応されていないサイトを見かけます。スマホに適していないと検索順位に影響が出ますのでご存知なかった方は今からでも対応をされると良いと思います。

特にサイトアフィリエイトやトレンドアフィリエイトのサイトを運営されている方は、モバイルを意識していないと悲しい思いをする事になるので気をつけて欲しいなと思います。

更新日:2016年10月15日 09時00分

SNSシェアはこちら

このエントリーをはてなブックマークに追加

関連記事

【 凄ゲー 】 マイクラ 最新マイク? 何でやねん(=゚ω゚)ノ

今回は、誰もが知っているマインクラフトを、今更ながら弄ります。 軽~い気持ちで、見て下さい(*^▽^*)

  • ペガタン
  • 581view

【 個性は素晴らしい 】 病気? そんなの知らん!! 貴方は素敵です

今回は、オッドアイについてわたくしの勝手な想いを説明 したいと思います。

  • ペガタン
  • 785view

ハマっちゃう!レトロアメリカ雑貨の魅力☆

レトロ雑貨は魅力がありますね。 昭和のものでも、ブリキの看板などはコレクターが多いです。 今回はとくに、アメリカのレトロ…

  • さくっちょ
  • 939view

【盆栽インテリア】小さな和のテラリウム盆栽をインテリアに

和の空間を醸し出してくれる「盆栽」 最近では海外からの人気も高まり盆栽人気に 火を付けています。 そんな…

  • chakolon
  • 557view

【ステンドグラス雑貨】ステンドグラスの雑貨でお部屋をセンスアップ

ステンドグラス雑貨って高価なんだけどとってもステキですよね♪ そんなお部屋に置きたくなるようなステンドグラス雑貨をご紹介…

  • chakolon
  • 532view

【苔玉インテリア】部屋を選ばずに置ける優秀インテリア

苔玉ってご存知ですか? 名前の通り苔をまん丸の球にしたインテリア植物です。 そんな苔玉は和室空間にピッタリ。 おスス…

  • chakolon
  • 570view

【洋間を和室へリメイク】夏はやっぱり和室仕様で日本の夏を感じよう!!

い草の香りが気持ちいい畳や窓から聞こえる風鈴の音・・・。 やっぱり日本の夏は和室に限ります!! 和室を洋間へリメイクす…

  • chakolon
  • 573view

期間限定開催中!スヌーピーミュージアムin東京

世界で初めてのスヌーピーのサテライト美術館が東京にあるというのをご存知でしたか? 2018年までの期間限定ではありますが…

  • pontan
  • 1032view

【神秘】恐れと感動の宇宙写真

宇宙の写真を見る度に、その美しさに息をのむほど感動します。 そして、そのとてつもない大きさに恐ろしささえ感じます。 そ…

  • さくっちょ
  • 883view

サンドアートの世界

広大な砂場(笑)のある鳥取県鳥取市には、世界で唯一のサンドアートの美術館があります。 そこには、プロの砂像の彫刻家た…

  • リク母
  • 1716view

カテゴリーピックアップ

感動
ワクワク・ドキドキ♥編集室 401view

アクセスランキング

人気のあったまとめランキング

1

【ひまし油の驚きの効果】髪の育毛、顔のシミ、ほくろの除去、ダイエット...

ワクワク・ドキドキ♥編集室

2

【ファン必見】コナンキャラの愛車たちがカッコいい!

意識高い系オタク★こぷろ

3

手作りを楽しもう 赤ちゃんの『 パンツ ・ ズボン 』

リク母

4

【驚き!】ひまし油がすごい効果!

さくっちょ

5

【両性具有】どれくらいいるの?

さくっちょ

6

【この差ってなんですか】下半身が『太い人』と『細い人』の差は子供の頃...

みせす☻まなちる

7

白Tシャツ男子を悩ませる夏の『あの問題』が切なすぎるw

みせす☻まなちる

8

手作りを楽しもう 汗をかく時期にたくさん欲しい『 ハンカチ 』

リク母

9

今がチャンス!ビットコインを超える市場の暗号通貨(仮想通貨)ノアコイ...

あっくん丸

10

ワイルドスピード全作~まとめ~ これを読んだら映画を見たくなるに違い...

ちゃな

ランキングをもっとみる

新着のまとめ

最新のトレンドを知るなら、ここをチェック

渡辺直美の美肌はこれで作れる!!最強ファンデ!

さくっちょ

それはかなり危ないんじゃないかい - 脚立編

mare blu

菊芋が糖尿病に凄い効果!血糖値を下がる魔法のパウダーとは?

ワクワク・ドキドキ♥編集室

クジラは人間の声を模倣できる!?

mare blu

【奇跡の瞬間】いやいや、絶妙なバランスだね!

mare blu

【奇跡の瞬間】心にはいつも羽を持ってるんだ!

mare blu

間違えないで! 私の足はこんなに毛深くないからね!

mare blu

大笑いせずにはいられないGIFアニメ -- 動物編

mare blu

話題のキーワード

いま利用されているキーワード

関連記事

この記事に関連する投稿はこちら

【 凄ゲー 】 マイクラ 最新マイク? 何でやねん(=゚ω゚)ノ

ペガタン

【 個性は素晴らしい 】 病気? そんなの知らん!! 貴方は素敵です

ペガタン

ハマっちゃう!レトロアメリカ雑貨の魅力☆

さくっちょ