【Studio】モバイルファーストのサイト制作方法！メリット2選も解説！

• サイト制作コストをなるべく下げたい
• お客様のほとんどはスマホでサイトを閲覧する
• BtoC向けの商品やサービスを展開している

上記に当てはまる場合は、モバイルファーストのサイトが向いているかもしれません。

モバイルファーストのサイトは制作費用が安く、かつまだまだ少数派なので訪れたお客様に「何このサイト？」とインパクトを残すことができます。

そこで今回は、Studioを使ったモバイルファーストのサイト制作方法について解説していきます。

モバイルファーストなサイトとは

モバイルファーストなサイトとは、スマホでの見やすさや操作性を最優先に設計されたWebサイトのことを指します。

「百聞は一見にしかず」なので、モバイルファーストなサイトを載せておきます。

◼︎サントリーのチューハイ「ほろよい」のLP

◼︎ノムラクリーニングのハウスクリーニングサイト

◼︎丘の向こうに森の映画祭2025のイベントサイト

◼︎LIA PILATES公式サイト

すべて共通しているのは、コンテンツ幅が常にモバイル幅で実装されていることです。

スマホでのアクセスが多い業種・ジャンルでは、モバイルファーストレイアウトが採用されているケースも増えてきています。

では次に、モバイルファーストなサイトを制作するメリットについて説明していきます。

モバイルファーストなサイトを制作するメリット

モバイルファーストなサイトは今人気ですが、それには理由があります。

今回は、サイト制作を依頼する側（クライアント側）から見たメリットについて紹介します。

それぞれ具体的に説明します。

制作コストを抑えられる

モバイルファーストなサイトは、従来のサイト制作と比べて制作コストを抑えられます。

従来のサイト制作では、デスクトップ・タブレット・モバイルの3種類でレイアウトが変わるようになっており、制作するには各レイアウトでコーディングする必要があったからです。

例えば、弊社のサイト制作代行のサービスサイトを見てみます。「デスクトップ→タブレット→モバイル」の順番でデザインが変わっていきます。

簡単にいえば、従来のサイト制作は手間がかかり、制作コストも上がりやすいということです。

一方でモバイルファーストなサイトは、モバイル版のレイアウトを基準にするため、デスクトップやタブレット時のデザインは手間がかかりません。

デザインの手間が減る、すなわちStudio実装の手間も減るため、必然的に制作コストが下がりやすくなります。

ブランディングを強化できる

モバイルファーストなサイトはまだ少数派であるため、サイトに訪問したお客様にインパクトを残すことができます。

下記のサントリーのほろよいのLPを見た時に、サイトの世界観に魅了された人は少なくないはずです。

「他社とまったく違ったサイトを作りたい！」や「ブランディングを強化したい！」という方は、ぜひモバイルファーストなサイトを検討してみましょう。

デザイン初心者には難しい可能性があるので、サイト制作代行を検討するのもおすすめです。

Studioでモバイルファーストなサイトを制作する手順

Studioでモバイルファーストなサイトを制作する手順は、下記のとおりです。

それぞれ具体的に説明します。

①：背景画像を固定配置する

まず、常に1番下に敷かれている背景画像を設定していきます。

左メニューの「追加」→「ボックス」→「Image」をクリックして、好きな画像を選択します。

背景画像が画面いっぱいになるように、下記を設定します。

②：サブコンテンツを固定配置する

左右に設置するサブコンテンツを固定配置していきます。

今回は、左側にお問い合わせフォーム、右側にYouTube動画を設置していきます。

お問い合わせフォームを選択した状態で、下記のように設定します。

同様に、YouTube動画を選択した状態で、下記のように設定します。

サブコンテンツの固定配置は完了です。ライブプレビューでしっかり固定できているか確認するようにしましょう。

③：メインコンテンツを相対配置する

次に、メインコンテンツを中央に配置していきます。

メインコンテンツの横幅は600px前後で設定するのがおすすめです。

「配置：相対」と「重ね順：0」で設定するようにしましょう。

ライブプレビューで確認すると、メインコンテンツの部分だけが上下にスクロールできるようになっているはずです。

ぜひ一度ご確認してみてください！

④：レスポンシブ対応をおこなう

モバイルファーストなサイトのPC版を作る手順について、これまで解説してきました。

ただし、これだけでは不十分です。なぜならタブレット・スマホ時の表示設定ができていないからです。

例えば、今回作ったサイトのタブレット版は初期設定だと、背景が中途半端にはみ出してしまっています。

この場合は、メインコンテンツの横幅を「600px→100％」に変更することで、画面いっぱいにコンテンツが表示されるようになり、デザインの違和感がありません。

レスポンシブ対応は、サイトによって適切なやり方が異なってきます。

レスポンシブ対応がイマイチわからないという方は、「どんなデバイスでも美しく表示。崩れにくいレスポンシブを設定するコツ」というStudio公式の記事をご参考ください。

「レスポンシブ対応の自信がない、、、」という方は、Studioの制作代行サービスを利用するのもおすすめです。従来のホームページ制作よりもモバイルファーストなサイトは、費用を抑えられる傾向があります。

モバイルファーストなサイトに向いている業種

モバイルファーストに向いてるサイトもあれば、全く向いてないサイトもあります。

例えば、BtoB商材・サービスを取り扱っている場合だと、パソコンで閲覧されることが多いので、モバイルファーストのサイトだと不便に思われる可能性が高くなります。

なので、モバイルファーストのサイトを採用するかに関しては、しっかり検討してから決めるべきだといえます。

逆に、向いている業種・ジャンルについても紹介します。

業界・業種	向いてる理由
飲食店・カフェ	ユーザーが移動中や外出先で「近くの店」「営業時間」「メニュー」をスマホで調べるため
美容室・サロン	予約・空き状況確認・場所確認など、スマホでのアクセスが主流だから
観光・レジャー施設	現地や移動中にアクセスされることが多く、スマホ対応が利便性に直結
イベント・ライブ	チケット購入はスマホ中心、ブランディングやインパクト重視であるため
求人・採用	応募者がスマホで求人を探すケースが増加しており、ブランディングが求められるため
BtoC向け製品・サービス	対一般消費者向けのサービスはスマホで閲覧される可能性が高いから

モバイルファーストが向いているかをざっくり判断するなら、「あなたの事業はBtoBなのか、BtoCなのか」で判断するのがおすすめです。

BtoB（企業向け）なのであればパソコンで閲覧される可能性が高く、BtoC（一般消費者向け）であればスマホで閲覧される可能性が高いためです。

またすでにサイトを持っていて、Googleアナリティクスを導入しているなら、閲覧者のデバイス割合を分析してみるのもおすすめです。全体の80%以上がスマホ閲覧なのであれば、モバイルファーストでサイトを作っても基本的に問題はないといえます。

Studioでのサイト制作は「Terace」にお任せ！