creatersnest131

スマートフォンサイトを見やすいデザインにするために気を付けたいことまとめ


スマートフォンでインターネットを見る機会が多くなりました。何かを調べたい
ときにはすぐGoogleを見ますよね。
調べる側からすると、そのサイトをしっかり見よう、再び訪れようと思うのか、
「見にくいな・・他のサイトで調べよう」となるのか、それは一瞬のイメージで
決まります。
サイトを介して情報を提供する側としては、その一瞬のイメージでスマートフォン
ユーザーを惹きつけることが重要になってくるので、そのデザインのポイントに
ついて紹介します。

軽量化

軽量化

スマートフォンでWebサイトを閲覧する場合、パソコンに比べると通信環境が良いとは言えません。
スマートフォンサイトをデザインするにあたっては、まず「軽いサイト」を念頭に置いてみてください。

文字の装飾

例えば、ロゴがアルファベットだったら・・
パソコンサイトを優先してデザインを考えた場合、Photoshopなどのデザインツールで
文字をデザインしていたと思います。

しかしスマートフォンサイトを優先してデザインを考える場合、その画像は必要でしょうか?

Webフォントを利用して、文字をインパクトの強いものに見せることができます。
少しサンプルを見てください。

Webフォント

これは、Google Fontsです。英文字のフォントのみですが、無料のサービスで
さまざまなフォントが用意されていますので、必要に応じて利用してみてください。

CSS3を使おう~角丸長方形~

これまでは、画像を使って角丸を表示していましたが、CSS3を使えば角丸を
画像なしで表現できることはご存知でしたか?

ボックスの角をまるくすることで、柔らかな印象のデザインができます。
使用するCSSは、border-radiusです。CSSへの記述で、角丸を表現できます。

CSS3を使おう~シャドウ~

CSS3では、影を付けることもできます。これまでは、ボックスに影をつけたり
影のついた文字を表現するのに画像を使っていましたね。

スマートフォンサイトの軽量化のためにも、影の表現は画像でなく、
スタイルシートで行いましょう。

ボックスに影を付けるのはbox-shadow、テキストに影を付けるのはtext-shadow
となります。
これは、古いブラウザには対応していない場合がありますので、併せて
-webkit-border-shadowも記述しましょう。

リンクの見直し

スマートフォンサイト

重複したリンクを見直そう

スマートフォンでは画面の大きさに限りがあるため、パソコン版のサイトのように
何度も同じリンクを貼るのは避けましょう。
例えば、ヘッダー内のメニューリンクです。「これだけは外せない」というリンクを
4個~10個までに絞り込み、その他のリンクはポップアップメニューに格納するのです。

電話やメールをタップで立ち上げよう

スマートフォンといえば、電話の機能が基本ですから、電話番号を掲載する際には
タップすると電話がかかる設定にしましょう。
メールに関しても同じです。タップするとメール機能が立ち上がるように設定し、
スマートフォンユーザーにとって便利の良いようにするのが基本です。

ページのボリューム

文章をうまく見せよう

ページ内の文字数が多い場合、スマートフォンユーザーにとって不便なことがあります。
あまりにも文章が長いと、スマホユーザーは最後まで読める気がしなくて
途中で閉じてしまうかもしれません。
長文の場合は、3行か多くても5行までを表面に出し、それより先の文章については
アコーディオンパネルの利用をお勧めします。「続きを読む」などのボタンを押すと
隠れている部分を表示するものにするか、もしくはタブを利用して限られたスペースを
有効に使うようにしてください。

アコーディオンのすゝめ

アコーディオンパネル

出典画像:Amazon

スマートフォンサイトをデザインするのにとても便利なアコーディオンパネルやタブ。
これらを利用するにはjQueryを使います。jQuery初心者のデザイナーの方にも
比較的わかりやすい書籍を紹介します。
スマートフォンサイトを設計するにあたってjQueryは必須の技術と言えるかもしれません。
スキルアップに燃えている方は、この機会に習得しましょう。

画像の扱い方

スマホ

 

画像の数はそのままで

画像の数については、減らさないのが鉄則です。減らさずに、メインの画像だけを1番に表示させ
その他はスライダーかサムネイルで見せるようにしましょう。
デジタルマーケティング事業を行うIMJ社の調査によると、20代の女性にはフリック操作による画像の切り替えが
好まれています。
年代や性別によっても画像の表示切替操作の好みが分かれていますので、必要によってレポートを
読んでみるのもお勧めです。
IMJレポートを見る

複雑な画像は作り替えよう

ヘッダーの画像など、大画面用に作られた大きな画像はスマートフォン用に作り替える
のが良いでしょう。
パソコンでは大きな画像を表示し、スマートフォンサイトではスマホ用に作った画像を表示させます。

スマートフォンはパソコンに比べて画面の幅が狭いので、1つの画像には文字を
たくさん入れないようにしましょう。特にバナーです。並べた画像に文字があると
文字が読みづらく、情報が伝わりにくくなります。

スマホサイトのユーザー目線は、縦に動きます。

このことを考慮し、導線に沿った画像にします。

画像の大きさを可変に

デバイスによって画面の横幅が変わり、それによってレイアウトが崩れることを
防ぎましょう。
主要となる画像の横幅は、デバイスごとに指定するのです。例えば、横幅が960px以上の
解像度を持つデバイス、横幅が480px以下のデバイス、その中間、この3つを主に
考えると良いでしょう。
デバイスごとのレイアウトのコントロールはMedia Queriesを利用するのが一般的です。

フォームの改善

サイトの最後の目的である、お問い合わせなどのフォーム入力は、スマートフォンユーザーならではの
工夫が必要です。
スマートフォンでフォーム入力することを想像してみてください。
片手で打ち、スペースも少なく、「もし打ち込む内容がたくさんあったら」・・?
スマートフォンユーザーの利便性を考え、入力の手間を減らす工夫が要るのです。

例えば、
・必須項目を明確にする
・記入項目数を必要最低限までへらす
などです。

郵便番号を入力するだけで番地以外の住所が表示される、入力中のエラーは
すぐに表示されるようにする、なども良いでしょう。

アプリと提携

006

http://think.withgoogle.com/mobileplanet/ja/

スマートフォンサイトには、アプリというパソコンにはない機能があります。
アプリとの連携をうまく活用しましょう。

たとえば、地図。
地図を表示させるページでは、Googleマップも見れるようにしましょう。
サイト上にGoogleマップを埋め込むのは簡単です。Googleが地図の
埋め込み方法について解説してくれていますので、参考にしてみてください。

地図を埋め込む―Googleマップ―

地図の埋め込みを利用すると、例えばお店のサイトなどは
ナビ機能も使えてお店への道順もわかるので、スマホユーザーにとって
とても便利だと言えます。

アフィリエイトサイトの場合

広告バナーの場所

スマートフォンは、画面の幅が狭いので、複数の広告バナーは設置方法について
見直す必要があります。
できれば並列ではなく、縦列で並べましょう。しかし、ページがむやみに長くなってしまうと
スクロールするのが大変なので、スマートフォンユーザーは途中で見るのを止めて
しまうかもしれません。

ヘッダー部分の広告は2件ほどに留めておいて、それ以上のものはフッターに
設置しましょう。

画面の面積が限られているので、ご自身のコンテンツの邪魔にならないように
控え目を心がけるのも良いですね。

ソーシャルメディアの設置

003

 

http://think.withgoogle.com/mobileplanet/ja/

GoolgleのOur Mobile Planetによると、スマートフォンユーザーのうち66%が
ソーシャルメディアにアクセスすると回答しています。
ご自身のサイトにも、ソーシャルメディアへのリンクを貼りましょう。

しかし、スマートフォンサイトの場合は、やはり画面の幅が狭いので、
ソーシャルメディアにつながるボタンは3つぐらいにしておきましょう。

また、タイムラインを載せる場合は複数のソーシャルメディアにせず、
1つにしましょう。いくつものタイムラインを載せてしまうと、スクロールするのが
大変なので・・。

プログラムの最適化

演算子などのプログラムをサイトに組み込む場合は、シンプルなレイアウトに
しましょう。これもやはり、スマートフォンの面積幅の都合です。

また、通信環境もパソコンより悪い場合がほとんどなので、プログラムの実行が
素早くできるように軽量化しましょう。
あまり遅いと、「もういいや!」となってサイトを離れてしまってはいけませんから。

ユーザーが望むコンテンツ

スマートフォンは、多様な機能があり、電話やメールのコミュニケーション
ツール以外にも、最新情報を入手したり、エンターテイメントとして
使うことができます。
その特性を活かして、スマートフォンユーザーが望むコンテンツを作りましょう。

スマホユーザーは動画に夢中

004

http://think.withgoogle.com/mobileplanet/ja/

Our Mobile Planetによると、スマートフォンユーザーの71%は動画を視聴し、
18%は毎日動画を見ているというのです。
これはスマートフォンが気軽なエンターテイメントの要素としても
使われているということです。
ご自身のサイトにも、積極的に動画を貼りつけましょう。

例えばYoutubeから動画のリンクを貼る場合にも、横幅に気を付け、
デザインを崩さないようにしてくださいね。

 最後に

いかがでしたか?スマートフォンサイトのデザインで気を付けたいことは
何と言っても「スマホユーザーの利便性」です。
スマートフォンユーザーの利便性を一番に考えばこそ、さまざまなアイディアが
浮かんでくるはずです。
あなたがスマートフォンサイトをデザインするにあたって、お役に立てれば
光栄です。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article何かと便利!モザイクのエフェクトチュートリアル20選