モバイル デバイス用の Web ページの作成方法

目次拡大

• 一般的なガイドライン
• スマートフォン用レイアウト
• リンクとナビゲーション
• 画像のヒント
• 避けるべきこと

iPhone がどのように Web ページをめくったり広げたりできるかを見たことがあるかもしれません。 Web ページ全体を一目で表示したり、ズームインして関心のあるテキストを読みやすくしたりできます。ある意味では、 iPhone は Safari を使用しています Web デザイナーは、iPhone で動作する Web ページを作成するために特別なことをする必要はありません。しかし、あなたのページが機能するだけでなく、目立って輝きたいですか?

あなたが ウェブページを構築する 、誰がどのように見るかを考える必要があります。最適なサイトの中には、解像度、色のオプション、利用可能な機能など、ページが表示されているデバイスの種類を考慮に入れているものがあります。彼らはそれを理解するためにデバイスに頼るだけではありません。

モバイル デバイス用のサイトを構築するための一般的なガイドライン

できるだけ多くのデバイスでテストします。最初に行うべきことは、iPhone でサイトを表示することです。 モバイルデバイス またはできる限りエミュレータ。すべてのテストにエミュレーターを使用できますが、実際には、小さな小さな画面で Web サイトをナビゲートしようとするのと同じ感覚は得られません。可能な限り実際のデバイスでテストする必要があります。 ページを適切に劣化させます。あなたのページを書くことができます フラッシュ対応 、ワイドスクリーン ブラウザーに対応していますが、特別な機能 (Cookie、Ajax、Flash、JavaScript など) を処理できない小さなモニターでも、重要な情報が表示されるようにしてください。 XHTML Basic を超えるものは、一部の携帯電話を超えます。ほとんどのスマートフォンはこれらすべてを処理できますが、他のモバイル デバイスは処理できません。 ワイヤレス専用のページを作成し、見つけやすくします。携帯電話やワイヤレスの顧客向けに特定のページを作成する場合は、それを利用できるようにします。ドキュメントの最上部にワイヤレス ページへのリンクを配置し、ハンドヘルド メディア タイプを使用して、ハンドヘルド以外のデバイスからそのリンクを非表示にする方法が優れています。結局のところ、ほとんどの人は携帯電話からでもあなたのホームページにアクセスします。ワイヤレス ページへのリンクがなければ、ページが使いづらすぎると離れてしまいます。

スマートフォン向けWebページレイアウト

スマートフォン市場向けのページを作成する際に最初に覚えておくべきことは、変更したくない場合は変更する必要がないということです。利用可能なほとんどのスマートフォンの優れた点は、Webkit ブラウザー (iOS では Safari、Android では Chrome) を使用して Web ページを表示することです。そのため、Safari または Chrome で問題なく表示されるページは、ほとんどのスマートフォンでも問題なく表示されます (はるかに小さいだけです)。 ）。しかし、ブラウジング体験をより快適にするためにできることがいくつかあります。

画面が小さいことを忘れないでください。スマートフォンでは、これらすべての列が小さなウィンドウに凝縮されるため、ズームしないと非常に読みにくくなる可能性があります。ほとんどのユーザーはズームに慣れていますが、面倒になることがあります。 1 列の長いテキストの方が読みやすい。ページを小さなチャンクに分割します。携帯電話で長いテキストを読むのは難しい場合があるため、複数のページに分けて配置すると読みやすくなります。

iPhone のリンクとナビゲーション

URL は短いほど良いです。携帯電話で URL を入力しようとしたことがあるなら、それが面倒だとわかるでしょう (大量のテキスト メッセージを送信することに慣れている 10 代の若者を除いて)。 iPhone でも、長い URL を入力するのは面倒です。それらを短くしてください。 しかし、長いリンク テキストはタップしやすいです。いくつかの個別の単語が異なる記事にリンクされているページでは、すべて隣り合っており、ズームしないと正しい単語をタップするのが非常に難しい場合があります。多くの人はあきらめて別の場所に行くでしょう。電話では、1 語のリンクよりも 3 ～ 5 語のリンクの方がクリックしやすいです。 ナビゲーションを画面の最上部に配置しないでください。必要な情報を見つけるために、画面やリンクの画面をページをめくらなければならないことほど煩わしいことはありません。携帯電話向けに設計された Web ページを見たことがある場合、最初に表示されるのはコンテンツと見出しであることがわかります。そして、その下にナビゲーションがあります。 ナビゲーションを非表示にすることを恐れないでください。 ナビゲーション リンクの非表示 CSS や JavaScript を使用して、ユーザーが要求した場合にのみ表示されるようにすることで、スマートフォン ユーザーにとってページが使いやすくなります。

スマートフォンの画像に関するヒント

画像は小さくする必要があります。はい、Android と iPhone は画像をズームインおよびズームアウトできますが、サイズとダウンロード時間の両方でサイズが小さければ小さいほど、ワイヤレスの顧客はより満足します。 画像の最適化 常に良いアイデアですが、携帯電話のページでは重要です。 画像はすばやくダウンロードする必要があります。モバイル デバイスから画像を表示している場合、画像は Web ページで多くのスペースを占有します。多くの場合、それらは非常に優れており、全画面の Web ブラウザーで表示するとページの見栄えが良くなりますが、モバイル デバイスでは邪魔になることがよくあります。さらに、スマートフォン ユーザーがセルラー ネットワークに接続している場合、膨大な画像やナビゲーション アイコンを大量にダウンロードすることは、彼らが最も支払いたくないことです。 ページの上部に大きな画像を配置しないでください。ナビゲーションと同じように、ページの一番上に 3 ～ 4 画面分の画像が読み込まれるのを待つのは非常に面倒です。そして、これはウェブページでは非常に一般的です。唯一の例外は、読者がクリックしたときに画像が表示されることを知っている場合です。たとえば、フォト ギャラリーなどです。

モバイル向けのデザインで避けるべきこと

モバイル フレンドリーなページを作成する際に避けるべきことがいくつかあります。前述のように、本当にこれらをページに配置したい場合は可能ですが、それらがなくてもサイトが機能することを確認してください。

閃光: ほとんどの携帯電話は Flash をサポートしていないため、ワイヤレス ページに Flash を含めることはお勧めできません。 クッキー: 多くの携帯電話は Cookie をサポートしていません。 iPhoneにはあります クッキーのサポート . フレーム:ブラウザがそれらをサポートしている場合でも、画面のサイズについて考えてください。フレームはモバイル デバイスでは機能しません。非常に読みにくいか、または不可能です。 テーブル: モバイル ページのレイアウトに表を使用しないでください。また、一般的にテーブルを避けるようにしてください。それらはすべての携帯電話でサポートされているわけではなく (iPhone やその他のスマートフォンはサポートしていますが)、奇妙な結果になる可能性があります。 入れ子になったテーブル: テーブルを使用する必要がある場合は、別のテーブルにネストしないようにしてください。これらはデスクトップ ブラウザーでサポートするのが難しく、せいぜいページの読み込みが遅くなります。 絶対対策: つまり、オブジェクトの寸法を絶対サイズ (ピクセル、ミリメートル、インチなど) で定義しないでください。何かを 100px 幅と定義すると、あるモバイル デバイスでは画面の半分になり、別のモバイル デバイスでは幅の 2 倍になることがあります。相対サイズ (em やパーセンテージなど) が最適です。 フォント: 次のいずれかを想定しないでください。 フォント アクセスに慣れているものは、携帯電話で利用できるようになります。