ホームページ制作・Webデザイン フロッグ・クリエイト

スマホサイト制作・スマートフォン最適化

スマートフォン専用サイトも“良い感じ”に。

スマホサイト制作・スマートフォン最適化

スマートフォン利用者の増加に伴い、Webサイトのスマホ最適化の必要性が高まっています。

近い将来、PCを持たずにスマートフォン端末だけでインターネットを利用する割合が大半を占め、PCサイトという存在は、一部のターゲットのためだけにあるニッチなものになるでしょう。

フロッグ・クリエイトは、いち早くスマートフォンサイト制作を開始していました。当時はまだまだガラケーの利用者の方が多く、スマホ専用サイトの存在は数少ないものでした。弊社が手がけたスマホサイトは、サービスのリリースが早かったこともあり、どのサイトでも一定の効果が出ています。

スマートフォンサイトをいくつも制作して積み重ねた経験から言えることは、成功するスマホサイトは、技術ではなく、設計・戦略がきちんと練られているかどうかが重要です。

デザインが美しいのはデザイン会社なら当然のことで、誰が、どのようなシーンでスマホサイトを見るのか、という利用者のシナリオをしっかりと想定し、それに見合ったコンテンツや設計を行うことが成功の秘訣だと考えています。

では、「ある男」の事例をもとに、「本当のスマートフォン最適化とは何か」を考えてみましょう。

ある男の「スマホ・ストーリー」

スマホサイト制作・スマートフォン最適化

ある男が、自宅のPCで何やら調べている。
来週末に結婚記念日を控え、気の効いたお店を探しているようだ。

「ここは夜景、ここは料理、ここはサプライズか…」
ブツブツと独り言を口にしながら、ある店に決め、予約を済ませた。

当日の夜、銀座で妻と待ち合わせをし、レストランへ向かう。
洗練された街とミスマッチにならないように、精一杯のオシャレをして。

「あれ、この辺のはずなんだけどな…」
慣れない街で、目的のレストランが分からない。これでは格好がつかない。
男はとっさにスマホを取り出し、ブラウザにお店の名前を打ち込んだ。

トップページに真っ先に表示されたのは『アクセスのご案内』。
それをタップするとマップアプリが起動し、自分の位置とお店の位置を表示している。

「次の小道を右に入るとすぐにコンビニがあって、その少し先だよ。」
男は、行ったこともないくせに、マップアプリで得た情報を得意気に妻に言った。

いかがでしたか? こんな経験、ありませんか?

道に迷って冷や汗をかきながらスマホサイトを開いて、
トップにでかでかとイメージムービーみたいなものが流れ出したら、
「はいはい、それは分かってる。分かってるから予約し、行こうとして迷っているんだ!」
と憤慨するでしょう。僕ならします。

この例では「アクセス案内」が重要なコンテンツになっています。「誰が」「どこで」「どのように」閲覧するのかを考えると、PCサイトとスマホサイトの情報のバランスは変わってくると思います。

このコンテンツ構成こそが、「本当の意味でのスマートフォン最適化」だと考えています。

スマホサイトを“良い感じ”にするサービス内容

スマートフォン最適化:構成

PCサイトの構成と、スマホサイトの構成は大きく異なります。それは、画面サイズが全く違うからで、1画面に収まる情報量に大きな差があります。そのため、スマホ端末に合うように構成することが重要です。

また、PCモニターでは長文が読めても、スマホ端末では読みづらいという傾向もあるため、情報の圧縮・簡略化も必要です。

スマートフォン最適化:デザイン

スマートフォンサイトを作成する時の注意点はいくつかあります。

一つは、容量が軽いこと。PCサイトのようにリッチなデザイン(作り込んだデザイン)はスマホ端末には向きません。無駄な画像の多用を避け、CSSを効果的に使ったデザインが大切です。

また、指先でのタップ操作がしやすいように、ボタンを適切なサイズに設計することも重要です。

HTML5・CSS3コーディング

スマートフォン端末の標準ブラウザは、HTML5とCSS3に対応しています。HTML5では旧HTMLよりも文書構造が明確になり、CSS3では前バージョンよりもグラフィカルな表現が可能となりました。

これにより、画像を多用しなくても美しいデザインを軽い容量で表現することができ、快適に閲覧できるWebページを作ることができます。

javascript・jQuery

iOS(iPhone、iPod、iPad)や一部のandroid端末ではFlashは対応していません。そこで、javascriptを用いてFlashのような動きのある表現を作ります。

画像をスライドさせたり、コンテンツごとスライドさせる等、アニメーション的な要素を実装できるようになります。

PC・スマートフォン端末振り分け

スマートフォン端末でPC用のWebサイトを訪問した際、スマホ専用サイトへ誘導します。

また、スマホ端末でもPCサイトを閲覧できることが重要ですので、PCサイトとスマートフォン専用サイトを行き来できるように端末振り分けの設定を行います。

GoogleMAP連動

スマートフォンサイトでは、アクセス案内が重要になるケースが多くあります。PCサイトではGoogleMAPを埋め込むことは当たり前になっていますが、スマホサイトでは、それをさらに発展させ、より便利なGoogleMAP連動を行うことが重要です。

特に、GPS機能を活用したAPI連動はPCサイトでは享受できなかった利便性を実感することができるでしょう。

お問い合わせはこちらからどうぞ!