PCサイトとどこが違う?スマホサイトのデザイン

公開日: : 最終更新日:2015/04/03 ホームページデザイン

スマホサイトのデザインとは

スマートフォンが年々普及しているのは、ニュースにもなっていますよね。
様々なホームページのアクセスを調べていると、3割以上がスマートフォンだったりします。
PCを持たないけど、携帯はスマホ、という人や、PCは家族で1台だけど、スマホはそれぞれが持っています、という人が、めずらしくなくなってきているのでしょう。smartphone

そこで考えるべきは「スマホサイト」ではないでしょうか?
年々増えつつあるスマホユーザーにも、便利に快適にホームページを見てもらえるためのスマホサイトは、ただ作れば良いわけではなく、色々なポイントがあります。
何をスマホサイトと言うか、については定義が難しく、技術的にはPCサイトもスマホサイトも同じと言えますが、今日はスマホサイトのデザインについて、PCサイトとどこが違うのか、どんなデザインにすればスマホで閲覧しやすいかを考えていきましょう。

画面サイズをスマホ用にする

PCサイトをスマホで閲覧すると、画面が小さく、拡大しなければ文字が読めない…といった経験はありませんか?
スマホサイトでは様々な種類のスマホに対応できるよう、画面サイズを設定します。
iPhoneで見ても、Xperiaで見ても、同じように見えるのがベストですね。

横方向に広がるレイアウトを避ける

PCサイトでは、例えば料金表など、縦にも横にも長いコンテンツがありますよね。
画像の横に文章が入るレイアウトもよく見かけます。
スマホは画面が小さく、縦に持って見ることが多いため、横に長いレイアウトは不向きと言えます。
横にスクロールしたり、拡大縮小したりする手間を避けるため、なるべく縦にのみ延びるレイアウトをおすすめします。

指での操作を考えたボタン

PCサイトはマウスで操作するため、ラジオボタンやチェックボックス、テキストリンクなど、多少小さくてもクリックできます。
スマートフォンでは指での操作がメインですので、指で隠れてしまって押しているかどうか分からないようなサイズのボタンはNGです。
複数行にわたるテキスト内に、テキストリンクがたくさんあるのも押しにくいですよね。
フォームを作るときは入力欄やドロップダウンメニューも、スマホ用に大きく作ると良いでしょう。hand

見たい情報を上に集める

例えばあなたがPCもスマホも持っているとして、あえてスマホでホームページを見るのはどんな時でしょうか?
「外出していてPCを見られない」「PCを見ている時間はないけどスマホなら」
こんなパターンが考えられます。
もちろんスマホしか持っていない人もいますが、スマホサイトを利用するシーンを考えてみると、屋外にいる、通勤途中、休憩中など、あまり時間のない時なのかもしれません。
PCサイトでは画面サイズが比較的大きいため、いろんな情報を一度に見せることができますが、スマホサイトではそれが難しくなります。
あなたの会社のホームページを閲覧するとき、あまり時間のないユーザーは何を求めているか、何を見たいと思っているのかを考え、そのコンテンツを上に集めると良いでしょう。

ボタンなのか、ただの画像なのかを分かりやすくする

スマホには、オンマウスしてクリック、というPCでは当たり前の操作がありません。
マウスを持っていくとポインタが指マークになったり、ボタンの色が変化したり、という仕様はスマホサイトではできません。
そのためスマホサイトでは、タッチすればリンクがあるボタンなのか、それともただの画像なのかを判断できるよう、デザインには注意が必要です。
例えばボタンには矢印を付けることを徹底したり、「詳しくはこちら」のような文言を付与してもいいかもしれません。

地図や、電話番号など、他のアプリを使うことも意識する

スマホにはPCにはない機能がたくさんありますよね。
例えば電話発信の機能や、GPSでの位置検索などがあります。
スマホサイトではホームページの閲覧と並行して、それらの機能を使うことも意識した作りにすると良いですね。
電話番号を表示するときは、タッチすると電話発信されるようにしておきましょう。お店に来てもらいたい、予約してもらいたい、といった業種なら特にこの機能を使いたいですね。
地図を表示するときは、地図アプリを起動するためのリンクを貼っておきましょう。実際に来店するとき、地図アプリを見ながら来てもらえるとスムーズです。
スマホ独自の機能を活かせるスマホサイトにしましょう。

日に日に進化していく、スマートフォン。
ぜひユーザーに寄り添ったスマホサイトを作りましょう。

スマホサイト制作についてはこちら

関連記事

blog

ウェブデザインにもトレンドがある?最近の流行を見てみよう

ウェブデザインのトレンドとは ファッションやスイーツと同じように、実はウェブデザインにもトレンドが

記事を読む

color

決め手は配色?魅せるホームページを作ろう!

ホームページを作りたい! 原稿も用意できたし、写真も撮れた! …さて、次はデザインについて考えて

記事を読む

aaaUAL

スマホ用ホームページに載せるべき情報とは

スマートフォン用ホームページの重要性はこのブログでも何度も強調してきましたが、これからはホームページ

記事を読む

150123

「コーポレートカラー」って何?色に込めたい企業戦略

あなたの会社の「コーポレートカラー」は何色ですか?決まっていますか? 「コーポレートカラー」という

記事を読む

2012110505

PC、スマホ、タブレット…最近のデバイス事情とは

ホームページを作成、運用するのに、パソコンのことだけ考えておけばよい、というのは、残念ながら間違いで

記事を読む

viewport

SEO対策に効くスマートフォンサイトのデザインとは?

2015年2月27日、Googleが公式に発表した「ウェブサイトがモバイルフレンドリーかどうかをラン

記事を読む

150731

お客様を上手に導く!ランディングページの考え方

ホームページの目的は ・企業のPRのため ・ショップサイトで商品を購入してもらうため ・商談に

記事を読む

shingou

購買意欲アップも可能!?色が与える心理効果

色というのは無意識のうちに「心理」に影響を与えているものなのだそうです。 例えば「信号」だと、

記事を読む

font

知っておきたい!TPOに応じたフォントの選び方

ご存知の通り、フォントにはたくさんの種類があります。 かっこいいフォント、おしゃれなフォント、スマ

記事を読む

Image (5)
まだ遅くない!SEOへの第一歩

せっかくホームページを作ったのに、検索エンジンからのアクセスが伸びない

グッとくる画像でアクセスアップにつなげよう!後編

先月の記事、「グッとくる画像でアクセスアップにつなげよう!前編」でショ

1702
リスティング広告だけじゃない!オンライン広告を使ってみよう

オンライン広告、と聞くと、どのようなものを思い浮かべるでしょう? 日

170113_0
グッとくる画像でアクセスアップにつなげよう!前編

あなたがネットショッピングを利用する際、無意識に一番最初に目に入れるコ

170123
アクセス解析で全解剖!自社のホームページをもっと知ろう

あなたの会社・お店のホームページには、月に何人の人が訪問しているか、把

→もっと見る

PAGE TOP ↑