スマホンシブってなに！？スマホ特化･スマホ幅のサイトを紹介します
スマホを起点に、画面サイズに合わせて使いやすく設計する考え方は、英語で「Mobile-first responsive design」（モバイルファースト・レスポンシブデザイン）と表現できます。ただし、これは「パソコンでもスマホ幅で表示するデザイン」だけの正式名称ではありません。今回は、その考え方とも関わる、スマホ幅を活かした見せ方に注目していきます！
「パソコンなのに、本文がスマホくらいの幅しかない！」
そんなサイト、見かけたことはありませんか？左右には大きな写真やイラスト、中央には細長いコンテンツ。ちょっと不思議ですが、見ていると意外としっくりきます。
今回は、そんな「スマホンシブ」なサイトを4つご紹介します。スマホ幅を活かしつつ、パソコンの余白も楽しむ。各サイトの工夫を見ていきましょう！
スマホンシブって、どんなデザイン？
パソコンで開いたのに、真ん中にスマホみたいな細長いページ。「あれ、スマホ版が表示されている？」と思ったことはありませんか？
今回紹介するのは、そんなスマートフォンで読みやすい縦長の構成を、パソコンでも主役にしたデザインです。この記事では、この見せ方を「スマホンシブ」と呼んで紹介します。
厳密な規格名というより、デザインの特徴を表す呼び方です。「横幅は何px」「必ず中央配置」といった一つの決まりがあるわけではありません。
本文を細いエリアにまとめ、左右には写真やイラスト、メニュー、申し込みボタンなどを配置する。パソコンの広さも使いつつ、読む流れはスマホのように縦へ。そんなバランスがおもしろいところです。
レスポンシブとは違うの？
レスポンシブは、画面の幅に合わせてレイアウトなどを調整する仕組みのこと。スマホンシブは、主に「どんな見せ方にするか」の話です。
つまり、二者択一ではありません。パソコンでは本文の左右に補助情報を出し、スマホでは本文を画面幅に合わせるなど、スマホンシブなデザインをレスポンシブでつくることもできます。
「パソコン向けのデザインを省略した」というより、スマホでの読みやすさを軸に、パソコンでどう見せるかも考えたデザイン、と捉えるとわかりやすいですね。
1．GLOBAL WORK｜旅のストーリーを、縦長の誌面で楽しむ
最初は、GLOBAL WORKのファッション特設ページ。キャプチャを見ると、左に大きなモデル写真、中央に旅のシーンと商品紹介、右にイラストの地図。横に広い画面を、役割の違うエリアに分けています。
中央の細いエリアを読んでいく感覚は、縦長の雑誌をめくっているよう。カフェや海辺などの場面にコーディネートが組み合わされていて、「この服を着て出かけたら楽しそう」と想像が広がります。
商品情報だけを並べるのではなく、旅の流れの中で服を紹介しているのがポイント。写真を楽しんだあとに商品をチェックできる構成です。
ここ、参考にしたい！
本文の左右まで、同じ世界観でまとめていること。余ったスペースを埋めるだけでなく、写真で雰囲気を伝え、地図で旅の全体像を見せています。アパレルや観光、季節のキャンペーンなど、ストーリーで魅力を届けたいページの参考になります。
2．みんなの銀行｜スマホ中心のサービスを、見た目から伝える
みんなの銀行のキャプチャでは、中央に角の丸い縦長の白いエリアが配置されています。中にはスマホの画面やアプリのダウンロードボタン。ページ全体から、スマホを中心に利用するサービスであることが伝わってきます。
白と黒をベースに、黄色をアクセントとして使っているのも印象的。イラストに親しみやすさがあり、情報の中で目立たせたい部分も見つけやすい構成です。
左側にはSNSや関連コンテンツ、右側にはアプリのダウンロード案内とQRコード。パソコンでサイトを見た人が、手元のスマホへ移るきっかけを用意しています。
ここ、参考にしたい！
サイトを見たあと、何をしてほしいのかが明確なこと。本文の見た目をスマホ風にするだけでなく、実際のスマホ利用へつなげています。アプリや会員サービスなど、別の端末で行動してもらいたいときに参考になる考え方です。
3．みずほ｜大きな写真と細い情報エリアを組み合わせる
「スマホンシブって、真ん中に細いページがあるデザインでしょ？」と思った方に見てほしいのが、こちら。
掲載キャプチャでは、社員の写真を大きく使い、その上に細い情報エリアを配置しています。本文を中央に置くタイプとは違う、広いビジュアルと縦長コンテンツの組み合わせです。
青を軸に、淡いグリーンや黄色で内容を区切り、文化や採用情報への入り口を整理。右端にはエントリーなどの案内も見えます。写真で職場の雰囲気を届けながら、知りたい情報へ進める構成です。
ここ、参考にしたい！
写真の迫力と、情報の探しやすさを両方大切にしていること。スマホ幅を意識するからといって、すべてを小さくする必要はありません。会社の空気感を大きく見せ、読む・選ぶ部分をコンパクトにまとめる。採用サイトで取り入れたいアイデアです。
4．FAVTOWN｜中央で読み、左右から次の行動へ進める
FAVTOWNの和歌山市向けページは、中央に細い本文、左にメニュー、右に登録などのボタンを置いた構成。スマホ幅のコンテンツと、パソコンの余白の使い方がわかりやすい例です。
淡いブルーの背景に、黄色のボタンや丸い写真、軽やかな図形を組み合わせています。就職支援というテーマを、親しみやすい見た目で伝えているのもいいですね。
中央ではサービスの内容を読み進め、左側から気になる項目を探し、右側から会員登録やレジュメの確認へ。画面内のそれぞれの場所に、役割があります。
ここ、参考にしたい！
「読む場所」「探す場所」「行動する場所」を整理していること。説明を読む人も、すぐに登録したい人も、目的に合わせて進みやすい構成です。複数の案内があるサービス紹介ページや、申し込みにつなげたいページの参考になります。
スマホンシブのいいところは？
読む順番をつくりやすい
写真、見出し、説明、ボタン。情報を縦に並べると、次にどこを見ればよいか整理しやすくなります。商品の魅力やサービスの流れを、順番に伝えたいときに向いています。
文章が横に長くなりすぎない
パソコンの画面いっぱいに文章を広げると、一行が長くなりがちです。本文の幅を絞ることで、視線を大きく左右に動かさずに読み進められます。ただし、幅を狭くしすぎると改行だらけになるので、文字サイズとのバランスが大切です。
余白もデザインに使える
左右のスペースは、ただの「余り」ではありません。ブランドの雰囲気を伝えたり、メニューや問い合わせボタンを置いたり。本文を邪魔しない範囲で、パソコンだからこそできる見せ方を楽しめます。
取り入れる前に、ここだけは考えておきたい
細くすれば、何でも見やすくなるわけではない
比較表やたくさんの商品を一覧で見たいページでは、横幅があるほうが便利なこともあります。文章が多いページをそのまま細くすると、スクロールが長くなりすぎる場合も。
「このデザインが好き！」に加えて、訪れた人に何をしてほしいページなのかを考えて選びましょう。
スマホでは、左右の情報をどこへ移す？
パソコンでは置けるメニューやボタンも、スマホでは同じ位置に収まりません。画面の上下やメニュー内など、使いやすい場所へ配置し直す必要があります。左右の装飾を消すだけで、必要な案内までなくならないようにしたいですね。
制作が必ずラク・安くなるとは限らない
本文の構成を共通化できる部分はありますが、左右のビジュアルや端末ごとの切り替え、動きの調整など、別に考えることもあります。「スマホのデザイン一つで全部終わり！」とは限らないので、制作範囲を確認しておきましょう。
読みやすさと操作しやすさを、実際の画面で確認する
文字が小さすぎないか、ボタンを押しやすいか、横向きや小さなノートパソコンでも内容が隠れないか。見た目に加えて、使い心地まで確認することが大切です。写真を多く使う場合は、画像の容量や読み込み方にも気を配りましょう。
どんなサイトに向いている？目的から考えてみよう
商品の魅力を順番に伝える、特設ページやLP
「まずは雰囲気を感じてもらって、使い方を知って、最後に商品をチェックしてほしい」。そんな流れがあるページは、縦長の構成と相性がよさそうです。写真、短いコピー、詳しい説明を順番に並べれば、一つの商品の魅力を少しずつ伝えられます。
たとえば新しいバッグなら、最初にコーディネート写真、次に収納力、続いて素材や色、最後に購入ボタン。いきなり情報を全部見せるより、使う場面を想像しながら読んでもらう設計ができます。
会社の雰囲気を届けたい採用サイト
社員の写真や仕事のエピソードを、一つずつ見せたいときにも取り入れやすいデザインです。スマホではインタビューを縦に読み、パソコンでは周りに職場の写真を大きく見せる。読む部分と、空気感を伝える部分の役割を分けられます。
ただし、募集要項まで延々スクロールしないとたどり着けないのは困りますよね。ストーリーを楽しむ入口とは別に、「募集職種」「応募する」へすぐ進める入口も用意したいところです。
アプリや予約、会員登録につなげたいサービス
サービスを理解してから、スマホで登録や予約へ進む。そんな流れにも使えます。パソコンではQRコード、スマホでは直接開けるボタンなど、見ている端末に合わせて次の一歩を用意すると親切です。
反対に、大量の商品を横に並べて比較したいECの一覧や、複雑な表を確認する業務画面は、幅を絞ると使いづらくなることもあります。サイト全体を同じ形にせず、特設ページだけ取り入れる方法もありです。
つくるときは、ここまで考えると使いやすい！
まず決めたいのは、幅より「何を伝えるか」
参考サイトを見ていると、つい「この細さがいい！」から始めたくなります。でも、先に決めたいのは情報の順番。訪れた人が最初に知りたいこと、迷いそうなこと、最後にしてほしいことを整理しましょう。
説明が長いなら、見出しで区切る、途中に要点を置く、詳しい話は別ページへ分けるなどの工夫もできます。文章を小さくして押し込むより、内容の整理から始めるほうが読みやすくなります。
左右の余白には、役割を一つずつ
大きな写真、メニュー、SNS、バナー、動くイラスト。置けるものはたくさんありますが、全部盛りにすると本文に集中しにくくなります。左はブランドの雰囲気、右は申し込みへの案内、といった具合に役割を決めてみましょう。
余白をあえて残すのも、もちろん選択肢です。本文の写真や言葉を主役にしたいなら、背景を控えめにするだけでも印象は変わります。
スマホでは、固定ボタンと本文の重なりに注意
画面の下に申し込みボタンがあると便利ですが、本文や入力欄に重なってしまうと逆効果。ページの最後まで読めるか、フォーム入力中も使いやすいかを確認します。スマホのキーボードが開いた状態も見ておきたいですね。
メニューを閉じるボタンやリンク同士の間隔も大切です。見た目が整っていても、押そうとするたびに隣のリンクを開いてしまっては、ちょっと残念。実際に指で触ってチェックしましょう。
スクロールは、迷わず操作できることを優先
中央の本文と左右のエリアが別々に動く構成では、「今どこをスクロールしているんだろう？」と迷う場合があります。マウスを置く位置で動きが変わるなら、その操作が自然に伝わるかまで確認したいところです。
動きを加える場合も、文章を読むたびに待たされないように調整します。アニメーションを控えたい人への配慮や、キーボードでリンクへ移動できることも含めて、見せ方と使いやすさをセットで考えます。
写真をきれいに見せつつ、重くしすぎない
中央の画像が小さく表示されていても、読み込むファイルが巨大なら通信量は増えます。表示サイズに合う画像を用意し、画質と容量のバランスを確認しましょう。ファーストビューと、ずっと下にある画像では、読み込みの優先度も変えられます。
とくにパソコン用の大きな背景写真や動画を加えるときは、スマホで不要なデータまで読み込ませていないかも確認。「幅が細いから軽いはず」とは限らないんです。
制作はどんな流れ？相談から公開までのイメージ
1．見てほしい人と、ゴールを整理する
誰に向けたページなのか、問い合わせ・応募・購入のどれにつなげたいのかを決めます。既存サイトがあるなら、スマホとパソコンの利用状況や、よく見られているページも判断材料に。スマホの訪問が多くても、最後の申し込みはパソコンという可能性もあります。
2．スマホの構成と、パソコンの見せ方を考える
本文の順番を組み立てたら、パソコンで左右に何を置くかを検討します。スマホではどこに移すのかも、この段階でセットにして考えます。大きなデスクトップだけでなく、小さなノートパソコンやタブレットで無理なく収まるかも確認します。
3．実装して、実際の操作を確かめる
画面幅に合わせたレイアウト調整、画像の表示、メニューやボタンなどを実装します。その後、読む・戻る・メニューを開く・フォームに入力する、といった一連の操作を確認。デザイン画像だけでは気づきにくい使いづらさを、ここで直していきます。
4．公開後は、反応を見ながら育てる
公開して完成！で終わらず、どの案内が押されているか、申し込みまで進んでもらえているかを見直します。反応が弱い場合は、ボタンの色だけでなく、説明の順番や必要な情報が足りているかも確認。見た目を楽しんでもらいながら、目的にもつながるページに育てていきたいですね。
スマホンシブについて、よくある疑問
スマホンシブにすると、検索順位は上がる？
幅を細くしただけで、検索順位が上がるとはいえません。Googleはモバイル版のコンテンツをインデックス登録やランキングに使用すると説明しています。スマホでも必要な本文や情報を読めるようにすることが大切です。
「スマホではすっきりさせたいから」と、重要な説明まで削ってしまわないようにしましょう。見た目を変えることと、情報を減らすことは分けて考えたいですね。
参考：Google 検索セントラル「モバイルファースト インデックス」
スマホ用とPC用、二つのサイトを管理するの？
同じHTMLの内容を画面幅に応じて表示し分ける構成なら、本文を共通に管理できます。ただし、これは一般的なレスポンシブサイトでもできること。スマホンシブだけの特別な仕組みではありません。更新する写真やバナーが端末ごとに別なら、その管理方法も決めておきましょう。
本文の横幅は、何pxが正解？
どのサイトにも当てはまる正解はありません。文字の大きさ、写真の見せ方、左右の情報量によって調整します。参考サイトと同じ幅にするより、自社の見出しや文章を入れた状態で、読みやすいかを確かめるのがおすすめです。
今のサイトの一部だけでも取り入れられる？
キャンペーンや採用の特設ページなど、一部で取り入れる方法もあります。ただし、既存のメニューや更新システムとの兼ね合いは確認が必要です。まずは、どのページでどんな体験をつくりたいかを整理して、実現方法を考えましょう。
スマホンシブなサイト、バケルーンでも制作できます！
スマホンシブの魅力は、スマホでの読みやすさを軸にしながら、パソコンでもそのサイトらしい見せ方ができること。
中央に本文をまとめてもいいですし、大きな写真と細いコンテンツを組み合わせるのもおもしろい。左右にどんな役割を持たせるかで、印象はぐっと変わります。
バケルーンでも、こうしたスマホ幅を活かしたサイトのデザイン・実装に対応できます。
- スマホから見やすいサービス紹介ページをつくりたい
- パソコンでもブランドの雰囲気をしっかり見せたい
- 採用サイトやキャンペーンページを、少し違う見せ方にしたい
そんなときは、気になった参考サイトと一緒にご相談ください。掲載したい内容や、見てほしい人に合わせて、自社に合うレイアウトを一緒に考えていきましょう！