スマホファーストなWebデザイン 事例詳細|つなweB

今回は、最近よく見かける「スマホファーストなWebデザイン」についてお話したいと思います。ここで言う「スマホファースト」とは、スマートフォン閲覧時のデザインが、PCで閲覧したときにも流用されているWebデザインのことを指しています。初めて見たのは4年ほど前だったような気がしますが、最近では特にtoC向けの商材を扱う大企業でも採用しているのを見かけるなど、じわじわと拡がっています。

私もこの1年でスマホファーストなWebサイトをいくつか制作しました。ロゴ・パッケージデザイン・Webサイト制作で携わったカラーコンタクト「LOUER」の案件では、ターゲット属性が20代の女性ということもあって、当初からPC閲覧時のデザイン制作は不要と言われており、結果的には私からスマホファーストの形を提案しました。「日本のカラーコンタクトのパッケージであまり見ない形にしたい」という要望から業界初のパッケージ形状を取り入れるなど、最先端を意識したブランドイメージがあったので、Webデザインでもトレンドを追いかけることができたと思っています。 

また、手がけたスマホファースト案件の中には、スマートフォンからの流入率が98%ほどあるWebサイトもあります。ユーザーのほとんどがスマートフォンから訪れるとなると「スマートフォン上で見やすいか、商品を購入しようと思うか」という物差しが重要です。もちろん、画面サイズ(=キャンバス)の大きいPCだからこそ見せられる表現のリッチさもありますが、スマートフォンが普及した今、割と理にかなった表現なのかなと思います。制作期間も通常より短くなることも多く、キャンペーン用の特設サイトをはじめとした公開期間が限られるもの、ターゲットの閲覧デバイスがスマホに偏りそうなケースなど、「スマホファースト」が最適解になることもますます増えていくのではないでしょうか。 

とはいえ、一般的に広く受け入れられている表現かと言われると、まだまだそうでもないと思うことも多々あります。先日とあるメーカーのキャンペーン特設サイトを制作した際、おそらくスマートフォンから応募してくる人数の方が多いと見越していたので、スマホファーストのWebデザインを提案しました。ただ、お客さまから「慣れていないユーザーは不安になる」というご意見をいただき、通常のレスポンシブデザインの形で制作・納品しました。公開後、スマートフォンからの流入率は90%程度と予想通りではあったのですが、まだまだ新しい表現であることを考えると、少数派とはいえPCからのユーザーは不慣れなインターフェイスに戸惑ってしまうことも考えられます。今回の場合だと、キャンペーンへの応募率の低下につながるかもしれないという懸念も、ごもっともだなと思いました。

Webサイトのターゲットにあわせ、スマホファーストが最適であると判断した際には提案していきたいと思いつつ、従来のPC用のデザインが必要なシーンもやはり多いです。情報量の多いコーポレートサイトなどは、PCから閲覧するのが適しているとも感じます。表現の幅は技術面の進化に伴って増えていくと思いますが、将来的にすべてのWebサイトがスマホファーストに置き換わることはないと感じているので、制作者として、あくまでも表現方法のひとつとして適切な判断をしていきたいです。

 

実際にスマホファーストで制作したカラーコンタクト「LOUER」のWebサイト。横長のPCブラウザで表示した場合、スマホ用の縦長UIを画面の右側で操作する形になります https://www.louer.jp/

 

ナビゲーター:小島香澄
株式会社KOS デザイナー。ハウスメーカーに新卒入社、資料のデザインが褒められたのをきっかけに、デザイナーとしてWeb制作会社に転職。日々の学習記録をSNSで発信していると、“モテクリエイター”として活動するゆうこす(菅本裕子)の目に留まり、2019年より現職。ゆうこすの手がけるサービスやプロダクトのデザイン全般を担当。 Twitter:@_mi_su_ka_

 

小島香澄
※Web Designing 2023年2月号(2022年12月16日発売)掲載記事を転載

関連記事