Webデザイナー厳選！スマホ特化デザインのおすすめサイト5選

スマホ特化デザインとは

近年、スマートフォンやタブレットの普及に伴い、多くのWebサイトにおいてモバイルデバイスからのアクセス数がPCを上回っています。そうした背景から、スマートフォンを中心としたモバイルデバイスでの表示を優先的に考慮してデザインを行う、「モバイルファースト」という考え方が生まれました。
その中でも最近は、PCでもスマホ幅のレイアウトをそのまま表示する、スマホに特化した新しいデザインが度々見られるようになっています。現時点では決まった名称がなく、モバイルファースト・スマホ特化サイト・モバイル特化デザインなど複数の呼称が見られますが、本記事では「スマホ特化デザイン」と呼びます。

スマホ特化デザインのメリット

スマホのレイアウトをPCにも使用することで、作業工数が減りコストを抑えることができます。また、その分作業スピードも上がるため作成〜公開までの期間短縮にも繋がります。

スマホ特化デザインのデメリット

見慣れていないユーザーにとっては、スマホ特化デザインのUIが分かりにくいと感じることがあります。そのためスマホ特化の表現が適切かどうかは、コンテンツのターゲットやコンセプトに沿って慎重に考える必要があります。

スマホ特化デザインのサイト5選

PC/スマホどちらでもデザイン的に違和感なくサイトを閲覧できるか、メインコンテンツ外のエリアの挙動といったポイントに注目して、最新のスマホ特化デザインサイト5点を選定しました。

KUAN/クラシエ

サイト：https://www.kracie.co.jp/nuan/

メインコンテンツ外のエリアを余すことなく有効活用するため、大きくビジュアルを配置したデザインになっています。これにより商品の雰囲気が伝わり、単調に感じることなくユーザーがスクロールしたくなる工夫が施されています。

東野産婦人科

サイト：https://www.toono.or.jp/

メインコンテンツとその他のエリアに明確な境界線がないため、デザイン的な違和感がなく一体化しています。右側のエリアはスクロール可能で、コンテンツ内容に合わせて左側のビジュアルが変化する仕様が印象的です。

宮古島チャペル

サイト：https://www.arluis.com/fair/miyakojima/

メインコンテンツエリアを一部透過のデザインにすることで、PCでもスマホでも大きく印象が変わらないようになっています。また左側にメニューを配置することで、目的の箇所に簡単にアクセスできるようになっています。

Beams

サイト：https://www.beams.co.jp/special/bjirushi_market/special/10057/

一部はレスポンシブデザインで、一部はモバイルファースト/スマホ特化デザインになっている珍しいサイトです。レイアウトを組み合わせることによって、スマホ特化デザインに見慣れていないユーザーも違和感なく閲覧できます。カラフルな配色とポップなアニメーションにより、スクロールしたくなるわくわく感も体験できますね。

baco to deco

サイト：https://www.teinei.co.jp/lp/bd/sp/005/aa/33200.html

他のサイトに比べてメインコンテンツ外はシンプルな作りになっていますが、さみしい印象にならないよう、ロゴタイプが横に流れていくアニメーションが適用されています。また、スクロール時には横のスクロールバーが対応して動くことで、コンテンツ量を把握しやすい工夫もされています。

まとめ

いかがでしたか？
現状でスマホ特化デザインは、その特性を生かして期間限定のLPや広告ページに使用されていることが多いようです。
適切な場面に応じて効果的に取り入れ、より良いユーザー体験を提供しましょう。