スマホサイトをコーディングする前に確認しておく7つのこと

最近スマホサイトのコーディング案件をたくさん頂けるようになりました。ディレクターからコーディング案件の依頼が来たら足りない情報を確認するのですが、不明点が多いと確認漏れが発生してしまいます。

そこでスマホサイトをコーディングする前のチェック項目を忘れっぽい自分のためにまとめておきます。

目次

• 01.DOCTYPEはどれか
• 02.検証環境・検証ブラウザはどれか
• 03.ピンチイン・アウトを許可するか。
• 04.横画面にしたときのレイアウトはどうするか。
• 05.文字は画像で書き出すかデバイスフォントか。
• 06.装飾は画像で書き出すかCSS3で作るか。
• 07.ページ内リンクはスムーズスクロールにするか。

01.DOCTYPEはどれか

スマートフォンサイトを制作するときは基本的にHTML5でコーディングしますが、以前HTML4.0.1に修正を行ったことがあったので、念のために確認しておきます。

02.検証環境・検証ブラウザはどれか

検証環境の確認も重要です。以下は検証端末・環境のサンプルです。

iOS

■検証端末（スマートフォン）

• iPhone4s
• iPhone5
• iPhone5s
• iPhone5c

■検証端末（タブレット）

• iPad（第3世代）
• iPad（第4世代）
• iPad Air
• iPad mini（第1世代）
• iPad mini（第2世代）

■バージョン

• iOS5
• iOS6
• iOS7

Android

■検証端末（スマートフォン）

• GALAXY
• XPERIA
• AQUOS Phone
• ARROWS
• REGZA Phone
• Optimus
• MEDIAS
• ELUGA
• Nexus5

■検証端末（タブレット）

• Nexus
• AQUOS Pad
• XPERIA tablet
• MEDIAS tab
• dtab
• MOOX
• Optimus Pad

■バージョン

• Android 2.2
• Android 2.3
• Android 4.0
• Android 4.1
• Android 4.2
• Android 4.3
• Android 4.4

このように現在は数多くのスマートフォンやタブレットが販売されており、全ての端末で動作確認をすることは困難です。なので会社でバージョン別にスマホやタブレットを複数用意してチェックするだけで問題ないかと思います。

Androidは端末の性能やバージョンや解像度などがみんなバラバラなので、よく売れているような機種に絞って検証を行います。

また、ブラウザによっても表示が異なります。基本iOSはデフォルトで入っている「Safari」で行い、Androidは「標準ブラウザ」で行います。まれにFirefoxやGoogle Chromeなどの表示検証も一緒に行ってほしいと言われるときがあります。。

03.ピンチイン・アウトを許可するか。

スマホサイトを制作するときに必須である「viewport」で一緒に指定するピンチイン・アウトの許可の設定も忘れがちですが、確認しておく必要があります。

画像スライダーなどを実装していると、ピンチイン・アウトを許可すると崩れてしまう可能性が高くなるので、許可しない設定にすることが多いです。

それ以外は小さい文字などを読みやすくするためにも、ユーザビリティを意識して許可する設定にした方がいいと思います。

04.横画面にしたときのレイアウトはどうするか。

スマホサイトのデザインはpsdデータで幅640pxで縦画面のレイアウトが来ますが、横画面にしたときのレイアウトを確認しなければなりません。

考えられるパターンとしては

• 01.コンテンツを画面幅いっぱいに引き伸ばす
• 02.画像を縦画面と同じ幅で表示し、背景を引き伸ばす
• 03.コンテンツを縦画面と同じ幅に固定する

の3つがあります。

01.は画像が大きく表示されますが、640pxの画像を引き伸ばして表示しているので画像が荒く見えます。また、1度に表示される内容が少なくなるため注意が必要です。

02.は画像を縦画面と同じ幅に固定することで、画像が綺麗なまま表示されます。しかし画像が小さく表示され、テキストは画面幅いっぱいに広がっているため、レイアウトがpsdのデザインと異なってしまいます。

03.はコンテンツ全てを縦画面と同じ幅に固定することで、縦画面と同じレイアウトを維持することができます。しかし、横画面で画像を大きく見たい場合でも固定されてしまいユーザーがストレスを感じるかもしれません。

どのパターンもメリット・デメリットがあるので、どちらを採用するのかを確認しておく必要があります。

05.文字は画像で書き出すかデバイスフォントか。

スマートフォンはPCと比較すると回線速度が遅いので出来るだけ画像を減らす必要があります。

PCサイトのコーディングの時は、デバイスフォントを使用する箇所はMS Pゴシックなどでデザインされることが多いのですぐに分かるのですが、スマホサイトの場合はヒラギノ角ゴなどでデザインされており、画像で書き出すのかデバイスフォントを使用するのか見分けがつきません…。

再度スライスし直したり、デバイスフォントに差し替えしたりする修正が後で発生する前に確認しておいた方がいいです。

06.装飾は画像で書き出すかCSS3で作るか。

先ほど言ったことと同じ話にはなりますが、画像を少なくするためにCSS3で表現出来るところは画像を使わずにCSS3で再現するとページ容量が軽くなります。

• 角丸
• ボックスシャドウ
• テキストシャドウ
• グラデーション背景
• 透明度

これらの表現はCSS3で表現出来る例です。複雑なものでない限りCSS3を積極的に使用したいものです。ページ容量なんか気にせず全て画像で書き出して！と言われる場合もあります。

07.ページ内リンクはスムーズスクロールにするか。

ページトップへ戻るボタンやLPサイトによくあるページナビゲーションリンクなど、ページ内リンクにスムーズスクロールを実装するかどうかの確認が必要です。

画面の小さいスマートフォンではどこへ移動したのかパッと見て分からないので、移動時間をあえて遅らせることで移動したところがどこなのか分かるようにする工夫をします。

最後に

スマホサイト限定のことを書いていますが、PCサイトでも共通のことももちろん確認しておかなければ後々確認するはめになるのでコーディングに入るまえにまとめて確認しておきましょう。