初めてスマホサイトをデザイン制作する時の注意点12項目

[カテゴリ]デザイン

ここ数年、メディアで取り上げられるweb・IT系の話題はスマートフォンに関係するものが多く、パソコンは影の薄い存在になりました。

私は普段仕事で主にPCサイトのデザインをしていますが、スマホ時代への変化の影響から最近では徐々にスマートフォンサイトのお仕事も増えています。

そんなスマートフォンサイトを制作する場合、PCサイト制作の時とは異なる注意しなければならないポイントがいくつかあります。

そこで、スマホサイトをデザイン制作する際の注意点を私なりにまとめてみました。

初めてスマートフォンサイトをデザインすることになった人にとっても役立つ基本的なチェックポイントです。

初めてスマートフォンのデザイン制作をする際のチェックポイント12項目

横幅は640pxで作成する

iPhone4から採用されているRetinaディスプレイの横幅の解像度が640pxとなるので、基本的に横幅は640pxのサイズでデザインしましょう。

画像やフォントのサイズを2で割り切れる数値にする

横幅を640pxでデザインした場合、横幅の解像度が320pxの端末でも綺麗に表示できるよう、画像や余白、フォントのサイズなどをすべて2で割り切れる数値で作成しましょう。

横幅が変化することを想定したリキッドデザインにする

スマートフォンを横向きにした場合、サイトの横幅が変わるので、横幅の変化にも対応できるリキッドデザインにしましょう。

シンプルなレイアウトにする

PCサイトでは2カラムや3カラムなどのレイアウトは普通ですが、スマートフォンは画面が小さいので基本的には1カラムのシンプルなレイアウトにしましょう。

PC用サイトでサイトバーにあるカテゴリ一覧などは、スマホ用サイトではタップで開閉できるアコーディオンメニューにするのが基本です。

タッチ操作に適したインターフェイスにする

パソコンではマウスを使って操作しますが、スマートフォンでは画面を指でタッチして操作します。

なので、PCサイト制作の感覚でスマホサイトをデザインしてしまうと、操作しずらいインターフェイスになってしまいます。

例えば、パソコンであればクリックだけでなくマウスオン(ポインタを上にのせる)によって表示が変化する表現も使えますが、スマホサイトの場合は基本的にできません。

指によるタッチ操作を想定した使いやすいインターフェイスにデザインしましょう。

できるだけ画面遷移を少なくする

スマートフォンの場合、画面サイズや通信速度の関係から、PCサイトの閲覧に比べて画面遷移(ページの移動)をすることに対してストレスを感じます。

なので、できるだけ画面遷移をしなくても済むようなサイト構成にしましょう。

できるだけ画像を使わずCSS3で表現する

通信速度の関係から、画像を多く使用したスマホサイトは画面表示に時間がかかり、ユーザーにストレスを与えます。

なので、できるだけ画像を使わずCSS3で表現可能なデザインにしましょう。

リンク部分は44px以上のサイズで作成する

PCと違いスマートフォンでは指でタッチして操作するので、小さなリンクボタンなどは間違ってタッチしまったりと操作しにくくなります。

iOSやAndroidのガイドラインではリンク領域を44px以上とされていますので、リンク部分は44px以上のサイズで作成しましょう。

デバイスフォントはヒラギノ角ゴを使用する

iPhoneで使える日本語のデバイスフォントはヒラギノ角ゴW3とW6だけ。

またAndolidは機種によって使えるデバイスフォントが異なります。

なので、デザインする際にはiPhoneでの表示を想定してヒラギノ角ゴW3とW6を使用して制作しておきましょう。

フォントサイズは12px以上で作成する

スマートフォンで読みやすい文字サイズは、ユーザーの年齢や画面サイズなどによっても違うので一概には言えませんが、一般的には16pxと言われています。

ただ、コンテンツの内容やサイトのジャンルなどによっては16pxでは大きすぎてバランスが悪くなる場合もあります。

あまり小さすぎると読みづらくなるので、少なくとも12px以上のフォントサイズで作成するようにしましょう。

PC版のサイトデザインに切り替えられるようにする

ユーザーによってはスマホでPC版のサイトを見たいという場合もあるので、「PC版への切り替えボタン」を設置してPC版のサイトデザインに切り替えられるようにしておきましょう。

スマートフォンでデザイン確認する

デザイン制作はパソコンでするわけですが、実際にはスマートフォンで使われるサイトです。

なので、パソコン上だけでなく、実際のスマートフォンでもデザインの確認をしましょう。

 

まとめ

私の実感としては、現在PC版しかないサイトもまだまだ多く、そのようなサイトのスマホ版を制作する仕事がしばらくは続きそうです。

初めてスマホサイトをデザインする方や経験が少ない方は、とりあえず今回まとめたチェックポイントは最低限おさえておきましょう。

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

関連コンテンツ

掲載される媒体によって違う、バナーをデザインする時に意識すべきこと

バナーをデザインする時に意識すべきこと

webデザインの仕事をしている方なら、常日頃から多くのバナーを作っていますよね。 私自身も普段さまざまなジャンルのバナー制作を依頼されてデザインしています。…

パソコンをする女性

なぜWebデザイン制作を依頼する人は、やたらと高級感を求めるのか

仕事でwebデザインを制作する際、依頼いただいたクライアントから希望のデザインイメージについて着手前にヒアリングをするのですが、この時なぜか「高級感を出して」…

おっさんのイラスト

“カワイイ”webデザインの多くはおっさんが作っている3つの理由

キャラクターやアイドル、レディースアパレルといったジャンルを中心に、世の中にあふれる“カワイイ”webデザイン。 実はその多くがおっさん(中年男性)によって…

ハロウィンのwebデザイン制作で参考になるキャンペーンイベントサイト10選

ハロウィンのwebデザイン制作で参考になるキャンペーンイベントサイト

10月31日のHalloweenに向けて、様々なキャンペーンやイベントの特設サイトがリリースされてきています。そこで、ハロウィーン関係のキャンペーンページや特…

スマートフォンを眺める女性

スマホサイト制作の参考になるデザイン集サイトまとめ

ここ数年の間にスマートフォンが急速に普及したことで、webデザイナーにとってもスマホサイト制作のスキルが必須となってきました。 私自身もスマホサイト制作のご…

webサイトリンク集の決定版!Webデザイン制作の参考サイトを探すならMUUUUU.ORG(ムーオルグ)

おすすめのwebデザインリンク集サイト『MUUUUU.ORG(ムーオルグ)』

webサイトをデザインする際やクライアントとデザインイメージを共有する際に活用することが多い「webデザインリンク集サイト」。 「webデザイン リンク集」…

バナーデザインのギャラリーサイト

バナー広告のデザイン制作で参考になるデザインリンク集まとめ厳選3サイト

バナー広告のデザインってほんとに奥が深いですよね。 あの小さなサイズの中にデザインのノウハウやマーケティング戦略、ブランド戦略などがギッシリと詰まっているわ…

Stinger3のロゴ

Stinger3 スマホページ読み込み中にカテゴリメニューのアコーディオンが開かないようにする方法

当サイトではStinger3というWordPressのテーマを使用しています。多くのサイトで使用されている非常に人気の高いテーマなんですが、以前から微妙に気に…