スマートフォンサイトを表示する

  1. TOP
  2. 世界とつながる!みんなが使えるウェブサイト超活用TIPS : 第5回 スマートフォンで見やすいサイトを作るコツ

エキスパートコラム

世界とつながる!みんなが使えるウェブサイト超活用TIPS(全6回)

第5回:スマートフォンで見やすいサイトを作るコツ

執筆:服部 雄樹(株式会社服部制作室)

2019年1月21日更新

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

閲覧数3,849views

このコラムをPDF形式でダウンロードする

ウェブサイトは作って終わりではなく、お問い合わせや集客アップなど具体的な成果に繋がってはじめて価値のあるものになります。皆さまにとって本当に必要なのは「ウェブサイト」ではなく、その先にある「成果」のはずです。そこで本コラムでは、ウェブサイトを作ってからどう活用するか、その中でも特に外部サービスとの連携に焦点を当て、成果の出るサイトにステップアップするためのさまざまな活用方法を紹介します。

第5回目の今回は、スマートフォン(以下、スマホ)からのアクセスに対して、ウェブサイトを最適化する手法について解説します。

端末別インターネットの利用率は「スマートフォン」が最多に

総務省が毎年発表している情報通信白書の中にある、「インターネットの利用状況」というデータによると、2017年の端末別でみる個人のインターネット利用率は「スマートフォン」(59.7%)が最も多く、それまで最多であった「パソコン」(52.5%)を上回りました。これは、ウェブサイトを制作・運営する上で非常に重要なデータといえます。さらに、このデータは2017年のものなので、2019年現在では、スマホでの利用率はより増加していると考えて良いでしょう。

一日の中でパソコンに触らない日はあっても、スマホを触らない日はほとんどないのではないでしょうか。それほど私たちの生活にスマホは欠かせないものとなっており、今やインターネットの主役はパソコンではなくスマホです。

パソコンとスマホではユーザーの体験が違う

ここ数年、ウェブ業界では「UX」という単語を耳にすることが増えました。これは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品やサービスを通じて得られる「体験」を意味します。
例えば、皆さんのお客様がウェブサイトを訪れたときに、どんなことを感じ何を思ったか、あるいはどんな行動(お問い合わせや購買、離脱)をしたくなったか、それらがウェブサイトにおける「体験」であり、これをどのようにデザインするかが、ウェブの制作現場では常に意識されています。

そして、「体験」という視点で考えるときに、パソコンとスマホではまったく別の考え方をする必要があります。
あくまで一般論ですが、パソコンユーザーは、机の前に座ってじっくり調べ物をしたりウェブサイトとしっかり向き合うケースが多いのに対して、スマホのユーザーは、移動中やちょっとしたスキマ時間に情報をチェックするなど、出先での閲覧や短時間の利用が想定されます。そうした状況を想像し、スマホで使いやすい、見やすいウェブサイトを制作することが、優れた「体験」を提供するための第一歩と言えるでしょう。

スマホで使いやすいウェブサイトのポイント

では、スマホで使いやすいウェブサイトを作るためには、具体的に何をすれば良いのでしょうか。Jimdoで作られたウェブサイトは、特に何もしなくてもスマホでも綺麗に表示されるようになっています。しかし、これから紹介するポイントをおさえておくことで、より使いやすいサイトにすることができます。

Point.1 指で操作することを意識する

ほとんどのスマホはタッチパネルを搭載しており、パソコンのようなマウスでのクリックではなく、タップやスワイプでウェブサイトを操作します。一見同じような操作に思えますが、指先はマウスのような繊細な操作には向いていないため、ボタンや要素の大きさ、分かりやすい色など、各部のデザインへの配慮が必要です。

Point.2 カラムの配置順を理解する

Jimdoの便利な機能のひとつに「カラム」があります。これはコンテンツエリアを横に分割できる機能で、メニューや画像を横並びにしたいときに使用します。
しかし、これをスマホ表示にすると、カラムは縦に積み上がっていきます。例えば、下記のCase.1とCase.2のようなケースで、パソコンでは同じように表示されますが、スマホではCase.1の表示順が意図と違うものになっています。カラムは縦に積み上がる、という特性を理解し、コンテンツの配置順に注意しましょう。

Point.3 画像の縦横比に注意する

画像の縦横比にも注意が必要です。例えば、ウェブサイトのデザイン手法として古くから見かける「バナー」には横長の画像がよく使われますが、横長の画像はスマホで見ると非常に小さく表示されてしまいます。これを避けるため、最近では正方形に近い形状のバナーが使用されるケースが増えてきました。

みんなが使えるウェブサイトにするには、スマホへの配慮は必須

今回紹介した手法は、どれもすぐに適用できるものばかりなので、ぜひ皆さんのウェブサイトでも活用してみてください。もちろん、これだけで完璧!というわけではありませんが、パソコンとスマホでの体験上の違いに目を向けることはウェブサイトの見やすさ、使いやすさの向上に大きく貢献します。
そして、それにより本コラムのテーマである「みんなが使える」ウェブサイトに一歩近づき、より多くの人に見てもらう事ができるでしょう。

最終回となる次回は、ウェブサイトの集客・リピーターの増加に欠かせない、メルマガ配信について解説します。お楽しみに!

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

株式会社服部制作室 代表取締役/Jimdo Expert
https://www.hattori-studio.jp/
https://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

HTML&CSSとWebデザインが 1冊できちんと身につく本

  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2019/2/10~2019/2/16]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ