デザイン

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

Mizushima
2024.07.17

スマホ特化デザインとは

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

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

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

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

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

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

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

KUAN/クラシエ

mi006_1

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

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

東野産婦人科

mi006_3

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

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

宮古島チャペル

mi006_5

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

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

Beams

mi006_7

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

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