• オススメ

参考にしたいシングルページのデザイン集<2017年版>

縦型に積み上げられたページ構成でスマホでも閲覧しやすく、コンバージョンも見込めるデザインとして定着した人気のシングルページ。企業サイトの最新事例を見ながら、シングルページを作るうえでのヒントとコツを紹介します。

先日7月14日に行われたWebComposer Meetupのデザイン講座では、「シングルページ」をテーマにその作り方とコツをレクチャーしました。
今回はそのレポートを兼ねて、実在する企業のシングルページの中からお手本になりそうなポイントをご紹介していきたいと思います。

※こちらで紹介するのは講義内容の一部です。また2017年7月時点の情報に基づいて掲載しています。

シングルページとは?

まず概念的な事ですが、一般的にシングルページは、
・積み上げられた縦長ページ
・インパクトのあるビジュアル
・洗練された情報量
を含んだ1ページで完結したサイトのように見せるデザインであると云われています。

ページの優先度と階層をより明確化したサイト構成を持ったページとして私なりに解釈しています。

シングルページ

トップページに重要な情報を集約させ、他のページに遷移しなくても必要最低限を伝える事が出来ると云ったイメージです。
ページ遷移を抑えられるのでスマホで閲覧する際にも有利ですね。

シングルページが有用な理由

以下の様な理由が考えられます。

・一連の流れで情報を展開させられる
・1ページに絞り込む事で洗練された情報になる
・スクロールだけで閲覧できるのでスマホに適している
・離脱が減ることでコンバージョン率の向上が期待できる
・スピード感のある制作に対応できる

個人的にですが、ページ構成やページ数の把握出来ないサイトを閲覧するのは非常にストレスを感じます。
どのページを読めば必要な情報を得られるのかが判り難いからなのですが、シングルページは読んで字の如く1ページ内に必要情報を完結する作りなので、素早く情報を把握できます。

シングルページの事例

実際に世の中にどんなシングルページのサイトがあるのか集めてみました。
用途毎にご紹介します。

コーポレート

企業理念から所在地までの基本情報を短時間で伝える事が出来ます。

代官山綜合法律事務所

代官山綜合法律事務所


株式会社知多善

株式会社知多善

キャンペーン

シングルページはキャンペーンサイトと相性が良いと云われています。
商品単位、ブランド単位などで展開し易いことで多用されている訳ですね。

青の洞窟 SHIBUYA

青の洞窟 SHIBUYA


BiND9 夏のCampセール

BiND9 夏のCampセール

商品紹介

商品の魅力を伝え購入まで一連の流れで導いていますね。

プレミアム・プレゼンテーション

プレミアム・プレゼンテーション


堺菊守 重陽

堺菊守 重陽

イベント

イベントの魅力や詳細を伝え、チケット購入や参加へ導いています。

音楽と暮らし

音楽と暮らし


法悦 -HOUETSU 2016-

法悦 -HOUETSU 2016-

飲食店

お店のコンセプトやメニューを伝え来店を促しています。

イタリアンダイニング|carborocco.

イタリアンダイニング|carborocco.


鵬

求人

ブランディングも行い、企業にマッチした人材の採用を行う事を目的としています。

宮崎太陽銀行 新卒採用サイト

宮崎太陽銀行 新卒採用サイト


株式会社クラーチ | 新卒採用

株式会社クラーチ | 新卒採用

ポートフォリオ

プロフィールと作品群をシンプルに伝えられるのでシングルページに向いてますね。

山﨑健太郎デザインワークショップ

山﨑健太郎デザインワークショップ


小林大輔写真事務所

小林大輔写真事務所

まとめ

シングルページはページ構成、情報量を徹底的に精査し、ストーリーを感じさせる作りにする事が重要です。
閲覧者に取って本当に必要な情報かを考えて、情報のダイエットを行いましょう。

その他にもビジュアルを大きく打ち出してインパクトを与える為の素材選びやスマホでの閲覧チェックもお忘れなく。

  • シングルページとは、ページの優先度と階層をより明確化したサイト
  • 1ページ内に必要情報を完結する作りなので、素早く情報を把握でき、スマホにも最適
  • ページ構成、情報量を徹底的に精査し、ストーリーを感じさせる作りにする事が重要

関連記事