近年、スマートフォンの縦レイアウトをPCデザインのレイアウトにも展開したようなWebページが増加しています。
スマートフォンのレイアウトを主体として、PCレイアウトで生じる余白にはロゴやナビゲーション項目、プロダクトイメージを喚起させる要素が配置されたデザインが特徴です。今やLPはスマートフォンデバイスからの閲覧が大半を占めるため、このデザインは時流に沿ったものといえるのではないでしょうか？
このようなスマホレイアウㇳ主体LPの特徴について、メリットやデメリットをWeb制作会社の視点で解析していきたいと思います。
Contents
なぜスマホレイアウト主体LPが増えているのか？
このようなレイアウトのLPが増えている理由として、前述した通り近年ではWebサイトの閲覧がほとんどスマホからとなっている点が考えられます。制作側もこれらのメインユーザー層に合わせてスマホのデザイン制作に注力する、という方針となっているのでしょう。
参考：〈調査報告〉インターネットの利用環境 定点調査（2022年下期）｜LINE for Business
また、スマホレイアウト箇所に必要な機能を集約できるため、背景箇所に自由なデザインを施しやすい、というのもポイントと考えられます。
この点に関しては次の項目でも掘り下げていきます。
スマホレイアウト主体LPの制作メリットは？
普通のデザインと比較した場合に優位性は存在するのでしょうか？
いくつか考えられるメリットを並べてみたいと思います。
- ワイヤーフレームなど、レイアウト配置の検討対応がスマホのみで完結する
- PCやスマホで画像の出し分けをせず、共通画像を利用するため、画像管理がしやすい
- デザイン制作視点では従来のPCデザイン分の工数をクオリティアップの時間に回すことができる
- GoogleのWebサイトの評価基準がモバイルサイトを対象とするため、スマホレイアウトを主とすることで自然と対策が行いやすい
- スマホ以外の画面での表示方法が共通なので、複数デバイスで展開した時に表示崩れなどが起こりにくい
- PageSpeed InsightsでPC / スマホともに評価が高くなる可能性が高い
制作側の観点から考えるとワイヤーフレームの制作などは簡略化できそうで、その分コンセプトや設計点の工夫などを考える対応に余力を回すことができるでしょう。
また、この形式ではPCデザインにもスマホレイアウトを流用する都合上、その分背景や余白となる箇所には自由なデザインを施すことができます。このスマホデザイン＋PC背景箇所という構造では、Webレイアウトの典型的な型に囚われずに自由にデザインを施すことが可能になります。
余白箇所にはレイアウトや要素の制限に囚われずに凝った意匠を施せるため、プロダクトイメージやブランドイメージの訴求にデザイナーは注力しやすくなるでしょう。
続いて、PageSpeed Insightsでの評価に影響があるのか、実際のページを計測してみました。
PageSpeed Insights計測：グローバルワーク EARLY SUMMER TREASURE ぼくらを誘う、初夏の服。
ファッションLPであるため画像枚数がかなり多いのが懸念点だったのですが、メインコンテンツの読み込み時間（Largest Contentful Paint （LCP））は合格という結果が出ました。他の指標も概ね合格、平均以上の結果が出ているためかなりの好成績といえるでしょう。
PageSpeed Insights計測：神戸港クルーズ船ポータルサイト
こちらはLPではなく、ポータルサイトのトップページです。ページの形態が異なりますが、先程のLPより画像枚数が少ない分より良い成績となっています。
どちらのサイトもスマホレイアウト主体であることだけがPageSpeed Insightsの好成績の要因とは言えませんが、工夫次第で問題なく高水準の成績を出せることが確認できました。
スマホレイアウト主体LPの制作上のデメリットは？
ではデメリットについても考察してみましょう。
スマホレイアウト主体LPでは、普通のLPに比べてただ要素を並べるタイプのデザインではなく、凝ったあしらいなどが施されないと味気ないものになってしまいがちです。そのためデザイナーの技量が求められると同時に、その個性が発揮されやすいとも言えます。
良くも悪くもデザイナー次第で出来上がりに差が生まれてしまうことを押さえておきましょう。
また、Webデザインの周りでも生成AIを利用したツールなどが生まれてきていますが、このようなセオリーに則っていないデザインの生成は、現段階でのAIでは生み出すことが難しいでしょう。
さらに、プロではない一般の方向けのデザインツールなども数多いですが、レイアウトの踏襲が出来たとしても、工夫や凝った意匠という点でプロのデザイナーが作る作品とはクオリティに差が生まれてしまうと考えられます。
どのような案件に向いているのか？
最後に、実際にどのような案件に向いているのかを考えてみましょう。
性質上、スマホレイアウト主体LPは凝ったデザインとなりやすいので、プロダクトイメージを打ち出したい案件との相性が良いです。インパクトを強く押し出したいアパレルブランドやキャンペーンなどのコンテンツでもっとも効果が発揮されるでしょう。
前述した通り、デザインの知識や経験がダイレクトに影響するようなページであるため、専門的なノウハウを持ったプロへと依頼することで理想的なLPを生み出せるはずです。
まとめ
ここまでスマホレイアウト主体LPの実情について考察してきました。
シンプルなレイアウトのページはAIやテンプレートで容易に制作が出来る今だからこそ、このような凝った形式のデザインは他社のコンテンツとの差別化に役立ちます。
トライムにはアパレルなどの豊富なWeb制作の実績とLP制作のノウハウがあり、スマホレイアウト主体LPのようなクオリティの高いWebコンテンツの制作を行いたい場合はぜひお気軽にご相談ください！