モバイルファーストなレイアウトの実装テクニック
鈴木 智華
2024.11.26
Updated:2024.12.24
飲食店やBtoC向け製品など、スマホでのアクセスが多いWebサイトでモバイルファーストなレイアウトを採用するケースが増えています。 本記事では、Studioを活用してモバイルファーストなレイアウトを実装するテクニックを解説します。
Profile
田中 なおと
トトノウ合同会社 代表
外部プロフィール
Web制作における「モバイルファーストレイアウト」とは、スマートフォンなどのモバイル端末での表示を最優先に考慮したレイアウトのこと。
近年は飲食店やBtoC向け製品など、スマホでのアクセスが多いWebサイトでモバイルファーストなレイアウトを採用するケースが増えています。
本記事では、Studioを活用してモバイルファーストなレイアウトを実装するテクニックを、Studio Expertsのトトノウ合同会社代表 田中なおとさんに解説していただきました。
モバイルファーストなレイアウトの特徴
モバイルファーストに特化したレイアウトは、制作面・デザイン面で以下の特徴があります。
制作面：デザイン工数の削減が期待できる
通常のレスポンシブデザインでは、デスクトップ、タブレット、モバイル、場合によってはさらに細やかな画面サイズごとにレイアウトを最適化するための、複雑な調整が必要です。
一方でモバイルファーストなレイアウトでは、あらゆる画面幅に対してモバイル版のレイアウトを基準にデザインを構築するため、デザイン作業の工数を大幅に削減できます。
デザイン面：余ったエリアを活用して魅力的なデザインが作れる
モバイルファーストなレイアウトでは、デバイスにかかわらずメインコンテンツの横幅はモバイルデザインに合わせた幅になるため、デスクトップやタブレットで閲覧したときに余白ができます。
その余白をうまく活用することで、Webサイトの世界観を伝えたり、ユーザー体験を高めたりなど、様々なデザインが展開できます。
差別化のコツはデスクトップ版で生まれる「余白」のデザイン
前述の通り、モバイルファーストのレイアウトでWebサイトをデザインする際、デスクトップ版で生まれる余白をどう活用するかが大きなポイントになります。
例えば、保護猫の推し活サービス「ネコノート」の場合は、デスクトップ版ではメインコンテンツの右側エリアにはメッセージを、左側エリアにはナビゲーションやCTAを配置し、サービスの世界観を表現しながらユーザビリティやコンバージョンへの導線を確保しています。
また下記のStudioのテンプレート「モバイルファースト｜BtoC」のように、左右の余白となる背景部分にインパクトのある写真やイラストを掲載することで、サイト全体のブランドらしさを強調できます。
このように、モバイルファーストなレイアウトを採用することで必然的に生まれる余白をどう活かすかが、デザイナーとしての腕の見せどころになります。
実際のサイト事例をもとに実装を解説
「ネコノート」のサービスLPでは、サイト訪問者の約9割がスマホでアクセスしていることを踏まえ、モバイルファーストなレイアウトを採用しています。
ここでは「ネコノート」のサイト事例をもとに、Studioを活用したモバイルファーストレイアウトの実装方法を紹介します。
レイヤー構造
実装方法を紹介する前に、サイト全体のレイヤー構造について説明します。「ネコノート」は大きく分けて5つのボックスで構成されており、そのレイヤー構造は以下のようになっています。
（重ね順：上）
メインコンテンツからはみ出す装飾
メインコンテンツ（中央）
サイドコンテンツ（左右）
背景画像
ベース（緑色）
（重ね順：下）
このように、サイドコンテンツの上にメインコンテンツを重ねるようにすると、どのデバイスで見たときもメインコンテンツの上に大きな要素が被らず、読みやすさを維持できます。
実装手順
1.背景とサイドのコンテンツを固定で配置
Webサイトの背景となる猫の尻尾モチーフの画像をBoxモード（※）で配置します。このとき横幅は100%、縦幅は100vh、重ね順は-3で配置します。
※Boxモードで配置することで、背景画像としての利用が可能になるほか、明るさやコントラストなどの調整ができるようになります。
サイドのコンテンツについても、メインコンテンツの位置を確認しながら配置、同じく重ね順を-3に設定します。このとき、背景・サイドのコンテンツともに、エディタ左上にある配置の設定を「固定」にします。
2.メインコンテンツを相対で配置
次にメインコンテンツを配置し、配置の設定を「相対」、重ね順を0にします。これにより、先ほど固定した要素の上にメインコンテンツが重なり、スクロール時にも固定要素が追従します。
メインコンテンツの横幅は600pxで設定していますが、デスクトップで見たときの見やすさや、サイドエリアとメインコンテンツのバランスを見ながら適宜設定してください。
メインコンテンツの上に装飾を施す場合
このサイトではメインコンテンツの上に猫の装飾をはみ出すように配置しており、ダイナミックな印象を演出しています。メインコンテンツの上に装飾を重ねる場合は、重ね順を1、配置は「固定」で設定します。
3.レスポンシブ対応を行う
ある程度デスクトップ版のデザインを作り込んだらレスポンシブ対応を行います。「ネコノート」の場合、固定配置で設定している背景画像とサイドのコンテンツはモバイルの画面幅では非表示にしています。
もしサイドのコンテンツをスマホビューでも表示したい場合は、ボックスにカーソルを合わせ、上に表示される方向メニューから並べたい向きの矢印を選択します。
例えばStudioのテンプレートとして販売している「サービスLPモバイルファースト」では、デスクトップ版では横並び、モバイル画面では縦並びと、ブレイクポイントによって並べる方向を変更しています。
レスポンシブ対応を行う際、ブレイクポイントでの表示だけを見て調整すると、切り替わる直前の画面幅でのレイアウトが大きく崩れてしまう場合があります。
例えばStudioの場合、タブレットからモバイルへ切り替わるブレイクポイントは540pxで設定していますが、切り替わる直前の画面幅550px〜600px付近でレイアウトを調整すると、レイアウト崩れを防ぐことができます。
最後に
モバイルファーストなレイアウトの最大の特徴は、レスポンシブデザインに比べて大幅に工数を削減できる点です。生まれる余白をどう活用するかで、サイトの魅力も大きく変わる点も面白いポイントと言えます。
ぜひこの記事を参考に、Studioを活用したモバイルファーストデザインの楽しさを体感してみてください。
