スマートフォン用サイトのデザインの必要性【ホントは公表したくないホームページ制作】
公開：2017年12月23日 更新：2017年12月22日
今回は「Webデザイン」に関するお話です。
ホームページのデザインをする上で、PC用サイトのデザインと、スマートフォンなどモバイル端末用サイト（以下、まとめて「スマートフォン用サイト」とします）のデザインとがあります。
最近は「レスポンシブWebデザイン」という考え方も定着してきており、同じURLでも、アクセスする端末によってレイアウトを切り替える技術が使われるようになってきています。
同じURLのページなのに、PC用とスマートフォン用と、両方のデザインは必要なのでしょうか？？
この記事の目次
- PC用サイトをデザインしながら、スマートフォン用サイトのデザインも意識する！
- スマートフォン等モバイル端末での検索回数は、すでにPCを上回っている可能性あり！？
- ホームページにアクセスする端末には様々なものがあることを意識する！
PC用サイトをデザインしながら、スマートフォン用サイトのデザインも意識する！
PC用サイトとスマートフォン用サイトのデザインが両方とも必要なのか。
個人的な意見としては、必要か必要でないかで言えば「必要」だと思います。
ただし、状況によっては予算やスケジュールの制約があって、両方のデザインをきっちり行ってからコーディングへと進んでいくことができない場合もあるでしょう。
なので、厳密に言えば、「スマートフォン用サイトのデザインも【意識しておく】必要がある」と思います。
「ヘッダーロゴの下のメニューボタンは、PC用サイトではこの形式だけど、スマートフォン用サイトではどうした方が使いやすいかな？」
「PC用サイトではブロックが横に4個並んでいるけれど、スマートフォン用サイトで4つ並べると小さくなったり、細くなったりして見づらいかな？？」
など、PC用サイトのデザインをしながら、スマートフォン用サイトでの表示についても意識しておくことは最低限必要だと思います。
スマートフォン等モバイル端末での検索回数は、すでにPCを上回っている可能性あり！？
スマートフォン用サイトのデザインを意識しておいた方が良いと私が考える理由の一つに、
「スマートフォン用サイトが見られる機会が年々増加傾向にあるから」
というものもあります。
スマートフォンなどモバイル端末での検索回数は年々増加傾向にあると言われ、それはつまり、スマートフォン用サイトが閲覧される機会も年々増加していることを意味していると考えられます。
こちらの記事によると、スマートフォンなどモバイル端末でのGoogle検索回数は、2015年頃にPCでの検索回数を上回ったと考えられているようです。
また、Google検索に関する情報を提供している「Googleウェブマスター向け公式ブログ」では、
「スマートフォン用サイトのページの内容も、検索結果の表示順位を決めるために重要になってきますよ〜」
という趣旨の発表を、2016年に行っているようです。
これらの情報からも、Webデザインをする上で、PC用サイトのデザインだけでなく、スマートフォン用サイトのデザインも常に意識する必要性が年々増してきていると考えられるのです。
ホームページにアクセスする端末には様々なものがあることを意識する！
ホームページの利用は、2017年現在では、PCだけでなくスマートフォンやタブレットなど、様々な種類の端末による利用が「当たり前」のように考えられてきています。
一方で、決められたスケジュールや予算でサイトを仕上げなければならない場合があるのもまた事実。
余裕があって、依頼者様のご要望もあるならば、スマートフォン用サイトのデザインもしっかり作り込んで進めていくのがベストかなと思います。
ただ、上記で述べたようにスマートフォン用サイトの表示を意識するだけでも、
「あっ！この箇所、PC用サイトでは問題ないけれど、スマートフォン用サイトだとうまく表示されないかも！？」
と、制作工程が進んでから気づくようなリスクを抑えることができると思います。
現在では、ホームページにアクセスするユーザーの端末には、PCやスマートフォン、タブレットなど様々な種類があるということを念頭に置いて、制作を進めていくのが良いと考えています(^^)
メールマガジンで最新情報をゲット！
この記事の感想をお寄せください
［スマートフォン用サイトのデザインの必要性【ホントは公表したくないホームページ制作】］の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。
関連記事一覧：スマートフォン用サイトのデザインの必要性【ホントは公表したくないホームページ制作】
途中で色が変わる見出し罫線を作る方法【CSS3】
公開：2018年8月27日 更新：2018年8月27日
ホームページの本文の見出しには、様々なものを見かけます。 見出しの文字の背景に背景色とは異なる色を使って目立たせたり、文字の左側に線を引いてみたり。 …… 続きを読む
こんにちは、いつも「妙高Web屋」のサイトをご覧いただき、ありがとうございます。 こちらのページをご覧になった方の中には、 「情報を広く公開したいけ …… 続きを読む
wp_footer()の出力内容からjQueryやSVGタグ等を削除する方法【WordPressをカスタマイズ】
公開：2018年7月4日 更新：2018年7月4日
過去に当サイトで、［wp_head()］関数の出力内容のうち使用しないコードを削除するという記事をご紹介しました。 [blogcard url="http …… 続きを読む
「ホームページを作りたい！作らなきゃ！」 と言っても、どうすれば良いか分からないと思っていませんか？ この記事をご覧の方の中には、職場の上司やサーク …… 続きを読む
![要素の中身次第で幅が変動する場合＆[margin:0px auto;]が使えない場合でも左右中央寄せする方法【CSS3】](https://www.web-myoko.net/wp-content/uploads/2018/03/mykweb180307.jpg)
要素の中身次第で幅が変動する場合＆[margin:0px auto;]が使えない場合でも左右中央寄せする方法【CSS3】
公開：2018年3月8日 更新：2018年3月8日
先日、「要素の幅が変動しても左右中央寄せする方法」を、こちらの記事でご紹介しました。 [blogcard url="https://www.web-myo …… 続きを読む
ホームページをデザインするとき、ページ内のちょっとした要素に「角度」をつけたくなることがありませんか？ 「新着情報の一覧ページが、長方形の写真や四角いボタ …… 続きを読む
ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか？ 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む
【jQuery】特定のチェックボックスがチェックされているか・いないかで処理を分ける方法
公開：2018年2月21日 更新：2018年2月21日
Web制作jQuery[jquery]changeイベント[jquery]propメソッド[jquery]チェックボックス
ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む
コーディング着手後のデザイン修正が難しい理由【ホントは公表したくないホームページ制作】
公開：2018年2月16日 更新：2018年2月15日
ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む
CSSで画像に乗算モードで色を乗せる方法は、実在する！【CSS3】
公開：2018年2月13日 更新：2018年2月12日
Photoshop（フォトショップ）では、様々なブレンドモード（描画モード）が実現できます。 その表現を応用すればデザイン性の高い作品も作れますが、ホーム …… 続きを読む