WixStudioで「モバイルファーストデザイン」の作り方

WixStudioでモバイルファーストデザインを再現してみました。

JWPPの大窪です。

最近WixStudioに触れる機会が増えてきました。

クラシックエディタより自由なレイアウトで作れるのでコーディングが楽しいです。

今回は、たまに見かける「モバイルファーストデザイン」または「モバイル特化型デザイン」と言われている？デスクトップでもモバイルレイアウトでWEBページを見せる手法なのですが、WixStudioでどうにか再現できないかと思い試行錯誤して再現できたので作り方を共有したいと思います。

モバイルファーストデザインの利点

使用するからには利点は学んでおきたいところです。

Geminiに聞いてみました。

集中力の維持: コンテンツが中央に固定幅で配置されるため、ユーザーの視線が集中し、情報が把握しやすくなります。画面全体に情報が散らばるのを防ぎ、ユーザーは読むべき部分に集中できます。
行長の最適化: 適切な固定幅（一般的に40〜80文字程度）にすることで、人間の目が最も疲れにくい最適な行の長さが保たれます。広すぎる画面幅で文字が横に長くなりすぎるのを防ぎ、文章が読みやすくなります。

操作の一貫性: デスクトップとモバイルで、コンテンツの順序やナビゲーション要素の配置が統一されるため、どのデバイスでアクセスしても「いつものサイト」という感覚で利用でき、混乱が少なくなります。
デバイス切り替えの容易さ: ユーザーがスマートフォンとPCを切り替えてサイトを利用する際に、レイアウトの違いによる戸惑いがなくなります。

モバイルのデザインは、限られた画面スペースのため、最も重要な情報やタスクに焦点を当てています。このシンプルさがデスクトップでも継承されることで、ユーザーはサイトの目的を素早く達成しやすくなります。

個人的には、集中力の維持と操作の一貫性はその通りだなと思います。

それとコーディングに関しては、一貫してレイアウトが共通なので工数は減らせると思います。

今回ご紹介する方法はWixStudioの高度な設定を使用するので、編集する時は「高度な設定」をオンにしておいてください。

ロゴのマージン
画面左端辺りなら好きな位置で大丈夫です。マージン設定ではpxを設定してください。
「px*」のままだとスケーリングされてブラウザの表示サイズによって位置が変わってしまうので。

その1の設定が完了したら、次に「コンテナパーツ」をセクションに配置します。

配置が完了したら、コンテナパーツの設定を以下のように変更してください。

コンテナパーツのサイズ設定
コンテナのWidthを「1265px」Heightを「100vh」に設定します。
これは、各ディスプレイで見た時にディスプレイの高さに合わせるための設定です。

「高度なCSSグリッド」を有効にすると、グリットレイアウトに変更されるので、レイアウトの項目の「3×1」を選択してください。

次に、配置したコンテナパーツの列と行の設定を行います。

上記画像を参考に

列の設定を

1.「1fr」

2.「500px」

3.「1fr」

行の設定を

1.「自動」

に変更してください。

2.の列の真ん中にコンテンツを配置する形になるので、数値はお好みの値でも大丈夫です。

次に、コンテンツを配置するコンテナパーツを配置します。

真ん中の列にコンテナパーツを配置し、以下のようにサイズを調整してください。

コンテナパーツの設定 (コンテンツ用)
Widthを「500px (グリットの横幅に合わせる)」Heightを「任意のpxもしくは自動」に設定します。
パーツのドッキングはトップのみ行ってください。
Heightの値は、コンテンツの量によって変動するので、コンテンツを配置していく中で任意の値に設定してください。(自動推奨)