スマホ(スマートフォン)用ホームページは、パソコン用ホームページに比べて制約事項が多く、注意しなければならない点がいくつかあります。
ここでは、操作方法以外の点で注意しておきたい点について、お話しします。
せっかく作ったコンテンツが表示されない……ということのないように、あらかじめしっかりと確認しておきましょう。
落とし穴(1)縦画面と横画面のどちらで閲覧するかわからない
スマートフォンの特徴として、端末を縦にしたり横にしたりして使える、ということがあります(縦の画面を「ポートレイト」、横の画面を「ランドスケープ」と呼びます)。
そのためホームページも、縦横どちらの画面にも対応させる必要があるのです。
この対応には「リキッドレイアウト」という方法が用いられます。
リキッドレイアウトとは、ページの横幅をパーセンテージ(%)で指定することで、画面の横幅に合わせて自動的にページの横幅が調整されるようにする方法です。
たとえば、縦画面(ポートレイト)での閲覧だけを前提にページの横幅を固定した場合、横画面にしたとき、左右に余白ができてしまいますが、リキッドレイアウトであれば、自動的に幅いっぱいに調整して表示されます。
ただ、場合によっては横画面にした際に1行が長くなってしまい読みにくい、ということも考えられますので、個別に検討する必要があります。
いずれにせよ、アクセス者がどちらの画面で閲覧するかはわかりませんので、実際にどのように表示されているのか、事前に確認することが大切です。
落とし穴(2)Flash(フラッシュ)が使えない
パソコン用ホームページでは、動画を表示する技術の「Flash(フラッシュ)」をよく使います。
トップページなどで、アクセス者の興味を引くために利用するケースも多いのですが、実は、iPhoneではこのFlashが表示できません(Android端末でも一部OSのバージョンによっては表示不可)。
そのため、iPhoneでもAndroidでも表示できるコンテンツを作成するには、以下のような方法を取る必要があります。
- iPhone用に静止画像やアニメーションGIFなどを用意しておく
- Flash以外の動画を利用する
- Flashの利用をやめる
iPhoneでFlashが使えないのはApple社のCEOだった故スティーブ・ジョブズ氏のポリシーによるもの。今後も、おそらくその方針は変わらないだろうと言われています。
パソコン用ホームページでは当然のように利用できるFlashですが、iPhone(やiPad)では利用できない、ということは覚えておきましょう。
なお、弊社の「簡単スライド動画作成サービス」のスライド動画は、iPhone用の表示に対応しています。
落とし穴(3)文字が太字にならない
一方こちらは、少々細かいのですが、Androidでの注意点です。
Androidに搭載されている日本語の標準フォント「Droid Sans Japanese」は、太字を使えません。
ごく一部の端末を除き、デザインで太字が指定されていても、Android標準ブラウザでは日本語が太字で表示できないのです。
パソコン用ホームページでは、重要な箇所や目立たせたい文字を太字にすることがよくありますが、スマホ用ホームページでは、この表現方法を使えないと思ったほうがよいでしょう。
なお、iPhoneは標準フォントが違いますので、Androidとは見た目が多少異なる、という点も念頭においておきましょう。
以上、スマホ用ホームページを作成する際に見落としがちな点をお話ししました。
皆さんがスマホ用ホームページのデザインをするわけではないかもしれませんが、こうした点を知識として覚えておくと、コンテンツ作成時に役立ちます。
【無料BOOKプレゼント】HPを賢くスマホ対応したい方に
簡単!スマホサイト3つの作成法
初めてでも分かる、スマホサイトの作り方をご紹介。
スマホサイト作成にかかる費用も合わせて徹底公開。
スマホ対応は、今からでも遅くありません。
まだの方は今すぐ対策を!