参考になる！スマホ特化のWEBサイトデザイン5選

こんにちは！デザイナーのHandaです。

今回は、スマートフォンで閲覧するユーザーをメインターゲットとし、スマートフォンでの見やすさが優先された「スマホ特化（モバイルファースト）」のWEBサイトを集めてみました。

ぜひスマートフォンでも確認しつつ参考にしてみてください！

使い勝手の良いアイディアで余白を無駄にしないスマホ特化のWEBサイト

ライトウォームアウターシリーズ（GLOBAL WORK）

ファッションブランド「グローバルワーク (GLOBAL WORK)」のライトウォームアウターシリーズを紹介する公式サイトです。

画面中央にメインのコンテンツがあり、左右にスライダーとナビゲーションを表示しています。
PCで表示させたときに生まれてしまう余白を無駄にせず、商品のビジュアルを入れたりナビゲーションを入れたりすることで、どんな端末で見たときでも商品の良さをしっかりと伝えることができます。

商品のビジュアルを良く見せる工夫と、ユーザーが見たい情報を見つけやすくするナビゲーションを取り入れた、使い勝手の良いWEBサイトでした！

niko and … PRESENTS ASIAN MARKET

ファッションブランド「ニコアンド (niko and … )」が開催するアジアンマーケットの公式サイトです。

PCで表示したとき、画面の右側に主要コンテンツのインデックス（目次）を表示しています。
雑誌のインデックスページのようなデザインで、様々なコンテンツを行ったり来たり、何度も見返したくなる工夫がされています。
メインのコンテンツは雑誌のような自由なレイアウトを取り入れた見応えのあるデザインで、縦長でレイアウトに限りある中でもコンテンツを魅力的に表現しています。

主要コンテンツのインデックスを表示させることで何度でも読み返せる工夫が施された、ユーザーに優しく使いやすいWEBサイトでした！

BBB!

韓国・プサン（釜山）のトレンドや老舗情報などのスポットを紹介するメディアサイトです。

メインのコンテンツではプサンのおすすめスポットなどの情報が掲載されていますが、PCのときは画面の左側にQUEEN BEETLE（船）を使った運賃・空席の検索ボックスが固定で表示されています。
コンバージョンとなるコンテンツを常に固定して表示させておくことで、メインコンテンツの情報を見たユーザーがすぐに行動を起こせる仕組みになっています。

コンバージョンへの誘導がスムーズになる仕組みで、ユーザーの負担を少しでも減らすことのできるWEBサイトでした！

作り込まれた世界観が魅力的なスマホ特化のWEBサイト

バレない魔法の二重術（ネクサスクリニック）

有楽町・銀座にある美容クリニック「ネクサスクリニック」の二重整形モニター募集のLPです。

PCで表示した際は、背景でクリニックのプロモーションビデオを流しています。
メインのコンテンツとは直接関係がなくとも、クリニックの雰囲気のわかる映像でユーザーへ安心感を与えるような工夫がされています。

また、メインのコンテンツでは大胆な文字組や、全体的に華奢でさりげないあしらいから、ファッション誌のようなおしゃれな印象を受けます。
統一されたシックな配色やクオリティの高い写真で、クリニックの世界観を表現しているWEBサイトでした！

「ネクサスクリニック」の制作実績ページはこちら

アオタビ

JR西日本公式が旅の魅力を発信するために、様々な切り口のコンテンツを紹介しているポータルサイト「アオタビ」です。

スマートフォンがメイン端末となっている10代の若年層をターゲットとしているサイトで、ポップなイラストが特徴的なデザインとなっています。
PCで表示した際は、左右の余白をイラストであしらうことで世界観を作り込んでいます。

また、メインのコンテンツでも縦長のスマホ表示でレイアウトが限られている中で、細かなイラストや派手な見出しなどデザインを工夫することで差別化を図っています。

若年層がターゲットだからこそ可能な表現で魅力的な世界観を作っているWEBサイトでした！

まとめ

スマホ特化のサイトでは縦長でレイアウトが限られてしまいますが、PCで表示したときにできてしまう余白にもコンテンツを配置するなど、アイディア次第でより使いやすいサイトにすることができます。

優れたデザイン性で世界観を出しつつ、ユーザーにとって使いやすい構成を、ぜひ参考にしてみてください！

※紹介しているサイトの中で「スピカデザイン制作」と記載があるサイトは弊社の制作実績ですが、その他のサイトはデザイン性が高いためピックアップして紹介させていただきました。掲載の取消をご希望の場合はご連絡いただき次第速やかに対応させていただきます。