モバイル端末でのWebサイト閲覧の体験が、デスクトップでのWebサイト閲覧の体験と大きく異なることは、もうほとんどの人が知っていることでしょう。画面の向きも違うし、マウスやトラックパッドの代わりに親指を使うし、作業によってはもっと複雑で面倒なこともあります。そのため、モバイルユーザーのニーズに対応したWebサイトの設計が重要です。ここでは、モバイル端末とデスクトップで異なるべき、ウェブサイトの3つの主要な構成要素を紹介します。

コンテンツ構成
モバイル端末向けのデザインで最も難しい要素のひとつが、コンテンツをどのように構成するかということです。モバイルユーザーのニーズは、デスクトップユーザーのニーズとは異なる場合があります。あるいは、ニーズは同じ（あるいは類似）でも、使用するデバイスによって閲覧行動が変化する場合もあります。

モバイル端末向けの開発では、モバイルユーザーのニーズを満たすウェブサイトのコンテンツを作成することを第一に考えなければなりません。モバイル端末の狭い幅に合わせるため、コンテンツを縦に重ねる必要があります。デスクトップは縦長であるため、コンテンツを画面全体に広げることができ、複数のメッセージや画像をこの広いスペースに快適に配置できることがよくあります。モバイル機器は通常、縦向きで使用されます（画面が小さいと横向きでも横のスペースが限られます）。

モバイルウェブデザインの黎明期、携帯電話の性能がまだ低く、より複雑なアクティビティに携帯電話を使うことに抵抗があった頃は、ウェブサイトのコンテンツの一部または大部分を取り除き、モバイルユーザーが知りたいと思われるものから必要最低限のものだけでモバイルサイトを運営することが一般的でした。2017年、このやり方はもう通用しない。今日、モバイルユーザーは、携帯電話でもデスクトップと同じようにブラウザにアクセスすることを望んでいます。また、携帯電話は多くの人にとって唯一または主要なデバイスであるため、完全なモバイルサイトが一部のユーザーにリーチする唯一の方法である可能性があります。

カルトサイクルのスタジオチェーン「ソウルサイクル」では、デスクトップやモバイルでクラスを予約することができます。モバイル版では、コンテンツのレイアウトが縦に並びます。

フォームに入力されます。
マーケターとして、私たちはコンバージョンを最大化するためにウェブフォームの最適化に多くのエネルギーを費やしています。貧弱なデザインのフォームはコンバージョンキラーとなることが確実であることを私たちは知っています。もちろん、モバイル端末でも同じことが言えます。また、フォームもモバイルユーザーが記入しやすいように特別にデザインする必要があります。

垂直アライメント
何と言っても、縦位置が重要ですよね？フォームにも適用されます。原理は同じで、モバイルユーザーがフォームに入力するために、水平方向に何度もスクロールするのは困難であり、面倒です。モバイルブラウザでできるだけ簡単にフォームに入力できるように、フォームのフィールドが縦に並ぶようにします。

プレディクティブテキスト
回答候補が多いフィールドには、予測式の選択肢を用意することで、ユーザーをサポートします。予測入力により、ユーザーはフォームを素早く進めることができ、小さな画面で親指で入力する際に起こりやすいタイプミスの可能性を減らすことができます。

折りたたみフィールド
モバイル端末でのフォーム入力は、通常かなり面倒なので、項目数を減らすなどして、できるだけ簡単に入力できるようにしたいものです。そのためには、取引を完了するために絶対に必要な情報のみをユーザーに提供してもらえばよい。ユーザーに関する情報が多いことは、企業にとって便利なことかもしれませんが、コンバージョンを犠牲にしてしまってはいけません。

可能であれば、入力フィールドは1つにするようにしてください。ここでも、モバイルユーザーにとって、多数のフィールドを飛び回るのは煩わしいという理由がある。複数のフィールドを1つに凝縮できるのであれば、それは良いアイデアです。

メニュー
メニューのフォーマットは、デスクトップとモバイルの違いの重要な部分であることは間違いありません。デスクトップは通常、多くのカテゴリーとサブカテゴリーを持つメガメニューがあります。このタイプの設定は、これらのメニューのテキストを読むことができ、テキストリンクを簡単にクリックできる十分な大きさのスクリーンを持つデスクトップユーザーにとって最適です。

もちろん、携帯電話では画面が小さく、親指が（比較的）大きいので、まったく話は別です。モバイルメニューは、これらを意識してデザインする必要があります。つまり、テキストやボタンが大きい1段メニューや、選択肢の多いメニューは縦に並べるということです。