他社とはちょっと違うデザインにしたい、でも流行は取り入れたいし、おしゃれなデザインにもしたい。
とはいえ費用も限られている……
そんな方にオススメなのが今流行の「スマホ特化・モバイルファースト型」のデザインです。
通常の制作よりコストを安く、さらに納期も削減できるいいとこ取りのトレンドデザインです。
まずはオススメのポイントを3つご紹介します。
- コラム
- 2024.10.8
トレンドのホームページはスマホもPCも同じデザイン
ホームページを作ることになったとき、「今流行のホームページ」や「2024年トレンドのWebデザインとは？」など検索していらっしゃる方も多いのではないでしょうか？
LINEの調査※によると、2023年4月時点でスマホの利用者は96％を超え、その内6割近くが「スマホのみの利用」というデータが発表されています。
この傾向は直近3年で増加傾向にあり、特に女性では7割弱が「スマホのみ利用」という結果も出ています。
※出典：https://www.lycbiz.com/jp/news/other/20230728/
この傾向を踏まえ、ホームページのデザインもここ数年変化しつつあります。
この記事では、今流行っているホームページの事例や、これまでのホームページとの違いなどをお伝えします。
「スマホ特化・モバイルファースト型」デザインのおすすめポイント3つ！
1．大手企業や様々な商材で取り入れられている
いくつか事例をみてみましょう。
イオントップバリュ株式会社
https://www.topvalu.net/tv-minnanookazu
ネットスーパーで販売している商品を紹介している特設ページです。
1ページ完結型で、リンク先は既存のネットスーパーのサイトへ遷移します。
PC版では真ん中にスマートフォンのデザインが配置されているのでコンテンツ領域が狭いですが、背景にはランダムに写真が配置されており、にぎやかな雰囲気もあって違和感を感じません。
KITTE大阪
https://osaka.jp-kitte.jp/autumn_gourmetcp/
KITTE内にある飲食店を紹介する特設ページです。
こちらもメニュー（画面右側のナビゲーション）以外のリンク先はPC専用のサイトへ遷移します。
PC版の場合、スクロールしていくと、当然真ん中のコンテンツ領域ではファーストビューは消えてしまいますが、左背景にずっとキャンペーン期間を固定表示できます。そのためユーザーに伝えたいメッセージなどを常時表示できるというPC版ならではのメリットもあります。
背景に秋のモチーフが緩やかに揺れ動いている感じもいいですね。
洗濯のアライさん（住友商事×白洋舍）
一般家庭向けクリーニングサービスを紹介する特設ページです。
予約はLINEがメイン（メール連絡もあり）のようですので、基本的にスマートフォンユーザーをターゲットとしているサイトになると思いますが、PCで見ても特に問題は感じません。
こちらもPC版では画面左に「洗濯のアライさん」のロゴがどーんと大きく常時表示されているため、無意識にサービス名が目に入ります。
ときどき瞬きするキャラクターも遊び心がありつつ、なんか動いた？と視線が左に動くので、そのたびロゴが目にどーんと入ってくるというしかけもあるかもしれません。
すがもりピアノ教室
ピアノ教室の紹介ページです。
特設ページだけでなく、このように常設サイトでも取り入れられています。
PC版ではスクロールしていくと、真ん中のコンテンツに合わせて右側背景の写真やメッセージが切り替わります。各コンテンツのアイキャッチのような役割を果たしていますね。
左側には「体験レッスン受付中」ボタンが常時表示されていて、余白を上手く使いこなしています。
ねこねこ薬局
https://nekoneko-pharmacy.com/
薬局のサイトです。こちらも常設サイトで、リンク先のページもスマホ特化型デザインで統一されています。
PC版ではスクロールすると背景も一緒にスクロールしていき、フッター部分でねこちゃんのお顔としっぽがつながる遊び心もかわいらしいです。
PC版の背景にはQRコードが表示されており、スマートフォンで読み取るとLINEスタンプ購入ページへ遷移します。PC版の背景にQRコードが実装されているサイトでは、スマートフォンサイトへ誘導するQRコードを表示しているパターンもよく見かけます。
TAKAMI GROUP（採用サイト）
https://recruit.takami-hd.com/
こちらは採用サイトで、PC版でみるとファーストビューは画面一杯に画像が広がっていますが、スクロールするとスマートフォンと同じデザインが右側に出現します。
募集対象のユーザーの多くはスマートフォンで閲覧していることが予想されますので、「スマホ特化・モバイルファースト型」のホームページはぴったりと言えますね。
2．手間が省ける分、コストも納期も削減できる
ホームページ制作において、一般的にはパソコン・スマートフォン両デバイス分のデザインを用意してコーディングを行う必要がありますが、「スマホ特化・モバイルファースト型」の場合、基本的にはスマートフォン分を用意すれば構築が可能なため、大幅に作業工数を削減できます。
パソコン用の背景を用意したり一部パソコン用にコンテンツを調整したりする作業は発生しますが、全ページ調整が必要な通常サイトと比較すれば納期は短くなり、その分コストも安くできるのが一般的です。
3．PCでみても新しい感じでおしゃれ
事例でご紹介したように、PC版の時にスマートフォンデザインをポンと置くだけではなく、背景をちょっと工夫したり遊び心を取り入れているホームページも多いので違和感はなく、むしろおしゃれなイメージや新しささえ感じます。
空いた背景に常時表示させるメッセージやCTAなどを置けるのも「スマホ特化・モバイルファースト型」のPC版ならではのメリットですね。
どんなホームページに向いている？
スマホユーザーが多いホームページに最適
例えば一般消費者向けの商材、店舗、サービスなど、スマートフォンからアクセスするユーザーが多いホームページに向いています。
事例にもありましたが、リクルートサイトにも向いていると思います。
ですが、最近はコーポレートサイトや企業向けのランディングページなどで見かけることもあります。納期やコストなどのメリットを考えると一般消費者向けのサイト以外でも選択肢に入れてみてもよいのではないでしょうか。
コンテンツの量によっては不向きな場合も
コンテンツ領域が狭いため、サイト全体や1ページあたりの情報量が多いサイトには不向きな場合もあると思います。
情報量の多い商材の場合、事例でご紹介したイオンのトップバリューやKITTEのように、入り口ページのみ「スマホ特化・モバイルファースト型」にして、遷移先はデバイスに適したページへ遷移させるという手段もありますね。
流行のおしゃれなホームページを作るなら「スマホ特化・モバイルファースト型」もあり！
今年はよく見かけるようになりましたが、まだまだ新しさもありそのうえコストも抑えられるとあって、今まさにオススメのデザインです。
新しいホームページや、ランディングページ制作を考えていらっしゃる方は、一度「スマホ特化・モバイルファースト型」ホームページもご検討されてみてはいかがでしょうか？
ホームページ制作をご検討中ですか？
私たち鶴岡製作所では、ホームページの新規制作または全面リニューアルを承っております。
既存のWebサイトをお持ちでアクセスログデータがある場合、現状の分析を行い、リニューアルサイトの構成を企画します。
- 制作の目的
- ターゲット（Webサイトは誰に向けたものか）
- ご予算
- 納期
などをおうかがいし、ご提案させていただきます。
ご予算に合わせたご提案も可能ですので、まずはこちらからお気軽にご相談ください。
- 【筆者】鶴岡製作所（足立区のホームページ制作会社）
- Webサイト制作、ランディングページ制作、各種調査、クリエイター育成代行まで、幅広く承ります。
ディレクション、デザイン、コーディングそれぞれ単発での対応も可能です。
このページを見た人は、こちらのページも見ています
2024.2.27
2023.10.20
2024.10.28
2023.11.16
2023.11.6
2023.10.18
2024.1.5
2024.3.19