1. TOP
  2. WEBサイト制作
  3. スマホ・PCのデザインはどう違うか

スマホ・PCのデザインはどう違うか

前提:モバイルデザインファーストについて

 

以前もお伝えしたとおり、WEBサイトの役割は「待っている人のところに情報を届ける」ことです。

だからこそ、

WEBのデザインを行うときに真っ先に想定しなければいけないのは、以下の「5W1H」です。

  • When「いつ」:時間帯・タイミング・所要時間
  • Where「どこで」:家・通勤中・移動中・出先
  • Who「誰が」:一人で・家族と・友達と
  • What「何を」:情報
  • Why「なぜ」:知りたい・話題・困っている
  • How「どうやって」:PCで・スマホで

5W1Hはブランディングにおいても非常に重要です。

待っている「ユーザー」のところに情報を届けるためには「ユーザーの行動」を想像しなければならないのです。

参考:「ユーザーの行動」をもとにプランニングする「カスタマージャーニーマップ」の重要性

 

時代が代わり、サイトもパソコンで見るものから、スマホで見るものに移り変わりつつあります。

なんと、今の時代はスマホでサイトを見る人が全体の70%を締めているのです。

(参考:2016 Nielsen Mobile Netview)

 

そもそも、スマホでサイトを見る人が増えた理由は何でしょうか。

  • 欲しい情報をスマホでほとんど得られるようになったから?
  • サイトが高速で表示されるようになったから?
  • 手軽に情報にアクセスできるから?

これはいずれも正解だと思いますが、一番大きな要因は「人々の行動の起点がSNSになった」から。

つまり「SNSの普及」こそがスマホでサイトを見る人の割合を押し上げているのです。

人々の行動の変化については以下の記事がオススメです。

 

Instagram時代の消費行動モデル「CREEP」

 

facebook・LINE・twitter・Instagramを代表とするSNS経由で、他人がアップした情報・リンクをもとにその場でサイトを開いて情報収拾を行う。

これが現代を生きる人々の行動の基本となりつつあります。

だからこそ、スマホで見たときにどう見えるかを考えないサイト制作は今の時代にあっていないといえるでしょう。

 

デザインレイアウトの基本

PCとスマホの違いについて一番考えなければならないのは「横幅が大きく異なる」ことです。

 

こちらの画像を見てください。

これは、公民ビジネス活性化協会様のサイト制作をさせていただいた際に、PCとスマホの横幅が異なることを把握していただくために作成したモックアップになります。

実際の設置サイトはこちら

ここまで横幅が違うのです。

結果として、スマホでのレイアウトは「縦長」が基本となります。

縦長のサイトが増え、ユーザーも指でどんどんスクロールすることに慣れてきました。

逆にスマホで見られにくいのは「別ページ」です。

PCでは上にメニューがあって複数ページがあるのが普通なので、別ページでも問題なかったのですが、スマホでサイトを表示するとなると、わざわざメニューを開いて別ページを見るという作業をさせる場合、別ページは表示されにくくなってしまうのです。

ですから最近はLP(ランディングページ)と呼ばれる1枚物のサイトが増えているのです。

そしてサイトを見るユーザーを飽きさせずにサイトを読ませるためには

「差別化」と「ストーリー性」が重要なのです。

(※ここについては別記事でまた解説します。)

 

ここで話を横幅に戻します。

横幅の違いを考えなければならないのは、PCとスマホの違いだけではありません。

現在発売されている、スマホの画面解像度はあまりにも多種多様です。

狭いものでiPhoneSEを中心とする320pxのものから、iPhone Plus系を中心とする414pxまであります。

今後の流れも、より高解像度化が進むことがAppleやGoogleから発信されています。

(iPhone X系など一部実装)

 

そして、スマホだけではなく、PCでは画面解像度がより大きく異なります。

参考:Webサイトデザインの横幅サイズ!もう何pxか迷わない! 2017年1月版

 

こんなにたくさんある画面解像度。

ユーザーがサイトをみる環境はこんなに千差万別となっているのです。

 

画面幅が変わったときにも極力デザインを崩さないためのサイトデザイン

それが「レスポンシブデザイン」です。

レスポンシブデザインについてはこちらに記事をご覧ください。

レスポンシブデザインについて

 

まとめ

  • ユーザーの70%はスマホでサイトを見る
  • スマホを中心にデザインを考える
  • 多様な横幅への対応をしっかりと考える

 

それではまた次回お会いしましょう。

Make the world better place

 

 

\ SNSでシェアしよう! /

Stakeholder Successの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

Stakeholder Successの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

    この記事をSNSでシェア

ライター紹介 ライター一覧

Fumio Sakurai

Fumio Sakurai

株式会社NEXT Innovation 代表取締役
小3からプログラミング(Basic)を学び、法学部 → 財務系コンサル → 外資系生保営業 → ITスタートアップ起業という異色の経歴を持つ。
職種は「ビジネスデザイナー」
事業の戦略・戦術立案から実際の運営支援、マーケティング、ブランディング、社員育成、業務改善、システム制作を行う。

おそらくアスペルガー症候群であり、常にやりたいこと・アイデアが止まらなくなってしまうため、一社専属での会社員を勤められず、起業に至った。
現在5社の顧問を行いながら、コンサルティング・ブランディング指導を行なっている。

この人が書いた記事  記事一覧

  • リスクを恐れ、縛られて生きますか? ー 「自分の人生を自分でコントロールする生き方」

  • 「投資」していますか?継続的に売上を上げ続ける会社の特徴について

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • AdobeMUSEの開発終了にみるWEB制作の潮流

この記事もあわせて読みたい!

  • 「ブランディング」のためのリファーラルマーケティング

  • レスポンシブデザインについて

  • クライアントとのイメージのズレをなくす「ディレクション」と「プロトタイピング」