モバイルウェブページの作成には、携帯電話には限界があり躊躇してしまうこともありますが、その機能はますます強力になっています。近い将来、携帯電話でPCのあらゆる機能が利用できるようになると予想されます。ネットワーク環境も改善され、読み込み速度も向上すれば、デザイナーの作業範囲はより広がるでしょう。

私たちの周囲にあるモバイルデバイスの増加に伴い、Web サイトのデザインは新たな段階に入り、デザイナーはユーザーのアクセス環境、入力デバイス、画面解像度など、より多くの要素を考慮する必要が出てきました。

レスポンシブウェブデザインは、どんなパンツにも合わせやすいメンズカジュアルシューズのように、人気のソリューションです。しかし、レスポンシブデザインはテーマデザインには適していません。

特定のトピックを扱うウェブサイトは、通常、限られた期間内に特定の運用ニーズを満たすために、迅速かつ効率的に設計されます。一方、レスポンシブデザインでは、異なる解像度におけるレスポンス効果を考慮する必要があり、設計と開発の時間が倍増する可能性があります。さらに、特定のトピックを扱うデザインはフォルムの印象が強いのに対し、レスポンシブデザインの流動的なレイアウトは、必然的に視覚的な制約を課します。そのため、特定のトピックを扱うレスポンシブウェブサイトの作成には、慎重な検討が必要です。

最も効率的な方法は、モバイル バージョン用に別のデザインを作成し、モバイル Web ページが一般的なモバイル デバイスの解像度要件を満たすようにする従来の方法です。

1. ページの PC バージョンとモバイル バージョン間の一貫性を維持します。

ユーザーのアクセスデータによって異なります。一般的には、PC版のページが最初に開発され、その後モバイル版が開発されます。PC版のウェブページはより豊富なコンテンツを提供でき、ユーザーはウェブ閲覧に集中できるため、最高のエクスペリエンスが得られます。

しかし、多くの場合、ページへのアクセスはモバイルデバイスからの方が多くなります。例えば、モバイルゲーム関連のトピックの場合、ユーザーはWeChatやQQからアクセスします。もし、先にPC版トピックを作成した場合、モバイル版はPC版の移植版になる可能性が高く、モバイルエクスペリエンスが大幅に低下します。

たとえば、Twitter や Instagram の PC ページはモバイル版の拡張機能であり、モバイル インターフェイスを継承し、一貫したユーザー エクスペリエンスを維持しています。

II. モバイル向け特別ページのフォーマット

まず、モバイル専用ページのフォーマットを決定する必要があります。基本的に、モバイルウェブサイトには3つの選択肢があります。

1. レスポンシブウェブサイトとは、ドメイン名とURLはそのままに、閲覧デバイスに応じてページのサイズとコンテンツを自動的に調整するウェブサイトです。これは主にHTML5とCSSコードによって実現されます（詳細は、Ma Haixiangのブログ「レスポンシブデザイン時代のウェブサイトデザイン方法」をご覧ください）。

2. ウェブサイトのドメイン名とURLは同じですが、ユーザーに表示されるページはユーザーのデバイスに基づいて決定されます。つまり、URLは同じですが、HTMLページが変更されます。

3. http://m.mahaixiang.cn などの新しいサブドメインを有効にし、ユーザーをリダイレクトする前にユーザーのデバイスを特定します。

ここで強調したいのは、最初の方法が最善である一方で、多くの課題も抱えているということです。3番目の方法は中国でよく使われています。この方法はウェブサイトの最適化とコストの面ではそれほど優れているとは言えませんが、客観的な効果は非常に高いです。

もう 1 つの問題は、中国のモバイル ネットワークの実際のネットワーク速度がまだ比較的遅いため、モバイル Web サイトを合理化する必要があり、デスクトップ Web サイトに適合させることは絶対に不可能であるということです。

1. 最初のアプローチの問題は、スマートフォン以外のブラウザや IE6 などのデスクトップ ブラウザでは HTML5 と CSS のサポートに問題があることです。

2. 2つ目のアプローチについては、ウェブサイトがBaiduのウェブクローラーをどのように処理するかが懸念されるため、慎重です。Baiduのウェブクローラーはモバイルクローラーとデスクトップクローラーを区別しないため、リダイレクトの判断に問題が生じ、ウェブサイトのランキングとオーソリティに悪影響を与える可能性があります。

3. 3 番目の方法は実際には最後の手段ですが、技術的な観点から見ると必ずしも最善の選択肢ではありません。

3 番目の方法の最大の課題は、検索エンジンのスパイダーに Web サイトをモバイル Web サイトとして正しく認識させることです。

III. ジャンプ方法

ユーザーのアクセス デバイスに基づいてリダイレクトする場合は、HTTP リダイレクトと Javascript リダイレクトの 2 つの方法を使用できます。

HTTP リダイレクトは、通常 301 リダイレクトと 302 リダイレクトと呼ばれますが、検索エンジン スパイダーがページの判断に問題があり、モバイル Web サイトであることを正確に判断できない場合、301 リダイレクトを使用すると比較的高いリスクを伴うため、302 リダイレクトを使用することをお勧めします。

ただし、JavaScriptによるリダイレクトは検索エンジンにとってあまり好ましくありません。検索エンジンのクローラーが正確に識別されない場合、つまりモバイルクローラーかどうかを判断できない場合は、デスクトップ版にリダイレクトし直さずに、ウェブサイトのHTMLバージョンにリダイレクトするだけで十分です。

IV. URLの計画

モバイルデバイスのURL構造は、ドメイン名を除き、デスクトップ版と理想的には一貫性を保つ必要があります。例えば、http://www.mahaixiang.cn/abc.html と m.mahaixiang.cn/abc.html です。また、モバイルURLに多くのトラッキングパラメータを追加しないことも重要です。標準化されたシンプルなURLを使用し、ページコンテンツに関係のないパラメータ（例えば、端末機種の識別、ユーザーの区別、統計情報の取得などに使用されるパラメータ）は削除してください（パラメータを追加する必要がある場合は、別の方法を使用できます）。

検索エンジンが当社のウェブサイトがモバイルデバイス向けであると判断できるようにするには、主に 2 つの方法があり、両方を同時に使用することをお勧めします。

1. DOCTYPE宣言

DOCTYPE ステートメントを使用すると、検索エンジンはページがモバイル閲覧に適しているかどうかを判断できます。

宣言は文書の冒頭にあります。ラベルの前。

例えば：

XHTML プロトコルに準拠するモバイル Web ページでは、次の DOCTYPE を使用できます。

WML プロトコルを使用するモバイル ページでは、次の DOCTYPE を使用できます。

HTML5 プロトコルの DOCTYPE は次のとおりです。

HTML5ウェブサイトは、検索エンジンによってレスポンシブウェブサイトとして分類されやすいため、様々な閲覧デバイスに適応できるという点に留意することが重要です。そのため、HTML5機能を追加するのが最善策です。ラベル。

2.ラベル

モバイルとデスクトップの両方でページに注釈を付けるには、タグを使用する必要があります。ただし、ウェブサイトのURL構造をモバイルとデスクトップのプラットフォーム間で一貫性を保つ必要があることに注意してください。

たとえば、ページのデスクトップ バージョンは次のように記述できます。

モバイルページは次のように記述できます。

V. 安全な幅と拡張領域により、ページを主流の解像度に適応させることができます。

PC の Web ページで使用されるアプローチと同様に、安全な幅を決定し、重要な情報を 640 ピクセルの幅内に収めます (安全な幅として iPhone の解像度を使用します。初期画面の高さは、ページが配信される特定のチャネルに基づいて調整できます)。

VI. 画面サイズ

携帯電話の画面サイズはそれぞれ異なり、縦向きモードと横向きモードを切り替えることができる携帯電話もあります。

そのため、ウェブサイトの幅を固定ピクセルにすることはできません。パーセンテージとEMSを使用すると、ウェブサイトを様々な画面サイズに適応させることができます（詳細については、Ma Haixiangのブログ「モバイルデバイスのページサイズパラメータとビューポートを理解する」をご覧ください）。

VII. レイアウト

携帯電話で Web を閲覧する場合、Web ページ自体と外部要因の両方により時間がかかることがあります。そのため、モバイル Web サイトはユーザーフレンドリーになるように設計するようにしてください。

たとえば、モバイル ユーザーに表示したい最も重要な情報はすべてページの上部に配置します。閲覧を容易にするために、ページ コンテンツを 1 列形式で設計する必要があるため、インターフェイスの左側と右側にナビゲーションを配置することはできるだけ避けます。

表の使用も減らすべきです。どうしても表を使用する場合は、列数が2列を超えないようにし、行と列の結合は避けてください。

画面サイズの制限により、長すぎるメニューは多くの場合許可されません。メニューは縦向きに表示する必要があるかもしれませんが、すべてのページのコンテンツを見るためにスクロールダウンしなければならないとしたら、非常に不便です。そのため、ウェブサイトにリンクが3つ以下しかない場合は、ビューポートにフローティングするメニューを使用できます。この場合は、横向きでも構いません。

たとえば、最初のページではナビゲーションを使用し、他のページの上部にあるリンクまたはパンくずリストを使用してホームページに接続します。

8. ページのタイトルと説明を設定する

タイトルと説明はデスクトップ ウェブサイトと一致しているのが理想的ですが、次のようにウェブサイト名にモバイル サイトの説明を含めることもできます。

デスクトップウェブサイト:;

モバイルウェブサイトは次のように記述できます。

IX. パンくずナビゲーション

パンくずナビゲーションは、デスクトップでもモバイルでも非常に重要です。しかし、モバイルデバイスでは多くの人が見落としがちです（詳細については、Ma Haixiangのブログ記事「モバイルWebインターフェースでよく使われる6つのナビゲーションモード」をご覧ください）。

10. ブロックレベルのタグ

各データは必ず `<a>` タグ内に配置してください。なぜそうするのでしょうか？タッチスクリーン搭載のスマートフォンでは、ユーザーエクスペリエンスを向上させるために、クリック可能な領域を最大化することが不可欠だからです。

11. 画像サイズの制御

通常の状況では、ほとんどの携帯電話は非常に重い画像を読み込むため、関連する場所で使用する画像はできる限り小さくし、画像は軽量な JPEG、GIF、または PNG 形式にする必要があります。

特集のヘッダー画像は、通常、視覚的に強いインパクトを与えます。モバイルユーザーの場合、画像の読み込み時間はPCよりもはるかに長くなります。ページの読み込みに5秒以上かかると、70%のユーザーはページを閉じてしまいます。そうなると、どんなに優れた特集であっても、ユーザーにアピールすることができません。そのため、デザイン案では妥協が必要になります。

ヘッダーの拡張領域（640px以上）を作成する場合は、単色、グラデーション、タイル化可能なマテリアルを使用することで、ヘッダー画像のサイズを縮小し、読み込み速度を向上させ、拡張領域のシームレスな接続を確保することをお勧めします。背景をぼかすことで、画質の圧縮率を最大限に高めることもできます。

さらに、画像がページ上で大きくなりすぎないように、必ず圧縮してください。また、ユーザーは現在開いていない画像を閲覧することが多いため、altテキストを常に使用することをお勧めします。

XII. コンテンツ

ユーザーは Web ページを閲覧しながら歩いている可能性があるため、Web サイトの情報が読みやすく、閲覧しやすく、ユーザーが必要な情報をすぐに識別して簡単に見つけられるようにする必要があります。

モバイル インターフェースに表示される最終的なコンテンツが明確になるように、メニューとテキストを論理的に計画し、不当なスケーリングの変更を避ける必要があります。

表示されるテキストのレイアウトに関しては、見出しを使用してフォント サイズを制御することを検討できます。

13、フォント

モバイル端末のフォントサイズは、一般的にパソコンの2倍です。パソコンで12ピクセルのフォントサイズは、モバイルウェブページでは24ピクセルにする必要があります。デザインプロセスでは、現実世界の環境をよりリアルに表現するために、iOSとAndroidのデフォルトフォントも使用する必要があります。

モバイルゲームのモバイル版の標準化では、フォントサイズの恣意的な使用を避けるために、主なフォントサイズを大、中、小の範囲で 3 つに制限し、フォントサイズは整数でなければなりません。

14. コントロールのインタラクティブ領域はタッチに適しています。

モバイルウェブサイトのメインボタンは、イベントの要件に合わせて高さ80px以上で最初の画面に配置する必要があります。テキストリンクの上下の間隔は80px以上である必要があります。画面上の指のタッチ感度は最低44pxである必要があります（詳細は、Ma Haixiangのブログ「モバイルウェブサイト作成の一般的な方法と最適化テクニック」をご覧ください）。

15. Android プラットフォームで電子メール アドレスの認識を削除するにはどうすればよいですか?

iOS ウェブアプリ API に精通している人は、iOS がウェブページ上の電話番号の自動認識を無効にするメタタグを提供していることを知っています。

iOSはメールアドレスを自動認識しませんが、Androidは自動認識します。ユーザーがメールアドレスをタップすると、Androidはメールを送信するよう促すポップアップを表示します。Androidにページ上のメールアドレスを自動認識させたくない場合は、headセクションに以下のメタタグを追加してください。

16. モバイルウェブページでのリダイレクトを最小限に抑える

モバイルユーザーのネットワーク環境はPCユーザーほど良好ではなく、ページのリダイレクトはユーザーへの心理的影響が大きいため、モバイルデバイスでは情報を1ページにまとめ、無駄なく表示することが理想的です。

どうしてもリダイレクトが必要な場合は、拡大表示やフローティング表示など、リダイレクトではないように見せる方法を使うことで、ユーザーの不安感を軽減することができます（詳細については、Ma Haixiang のブログ記事「ウェブサイトのモバイル開発に関する考察」を参照してください）。

17. iOSでユーザーが新しいウィンドウでページを開くことを完全に防ぐ方法

ユーザーが新しいウィンドウでページを開かないようにしたい場合があります。`<a>` タグの `target="_self"` 属性を使用して、ユーザーが新しいウィンドウでページを開くように指定するか、`target` 属性を空のままにすることができます。

しかし、iOSユーザーがリンクを3秒間長押しすると、iOSはボタンのリストをポップアップ表示します。ユーザーはこれらのボタンを使って新しいウィンドウでページを開くことができます。この場合、開発者が指定したtarget属性は無効になります。ただし、現在の要素の-webkit-touch-calloutスタイル属性をnoneに設定することで、iOSによるこれらのボタンのポップアップ表示を防ぐことができます。この手法はiOSでのみ有効で、Androidでは無効です。

18. ページサイズ

モバイルウェブサイトのスタイルをデザインする際には、すべてをシンプルに保ち、ページサイズを最小限に抑えることが重要です。モバイルページの最大サイズは20KBなので、すべての要素がこのサイズを遵守するようにしてください。可能であれば、ページサイズは10KB未満に抑えましょう。

モバイル ネットワーク上のデータ使用量は KB 単位で課金されることを知っておくことは重要です。

要約

モバイル端末はパフォーマンスやネットワークの制限により、PCベースのウェブページと同等の優れた効果を実現することはできませんが、モバイル端末ならではの独自のメリットも備えています。モバイル端末のウェブページはアニメーション化も可能で、さらにスマートフォン独自の重力センサー機能を活用した視差スクロール効果も実現でき、非常に洗練された印象を与えます。PCページをスマートフォンで操作するのも新しい体験です。ぜひ、モバイル端末の可能性を広げてみませんか？

-終わり-