このページの本文へ

「シングルページ」流行の7つの理由と最新事例まとめ

2014年08月18日 11時00分更新

イシジマミキ/ザ・マーズナレッジ代表

  • この記事をはてなブックマークに追加
本文印刷

「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。(編集部)

 シングルページとは、1ページで完結しているWebページのことです。最近よく見かけるようになりましたね。シングルページのみを集めたギャラリーサイトなどもあり、Web制作に携わっている方であれば一度は目にしたことがあると思います。

01.png
シングルページで作られたサイト。左から、モバイルセキュリティソフトウェアのLookout, Inc,(https://www.lookout.com/)、「重陽」ブランドの包丁を製造販売している堺菊守 河村刃物株式会社(http://chouyou.kikumori.co.jp/)、シンガーソングライターの森山直太朗オフィシャルサイト(http://naotaro.com/)
02.png
シングルページのギャラリーサイトの1つ“MUUUUU.ORG”

ざっくり分かる!シングルページ

 シングルページを知るには、実際のシングルページを見ていただくのが一番よいでしょう。百聞は一見にしかず。シングルページの優れた事例をタイプ別に分類して紹介します。

シングルページの基本型=
「縦長」「大きなビジュアル」「シンプルな情報」

 シングルページの基本要素は、

  縦に長い
  大きなビジュアル
  シンプルな情報

の3つです。この基本をおさえたサイトを2つ挙げてみます。

03.png
Sketch 3

 ドローイングソフト「Sketch」のサイト。アプリケーションのメインビジュアルに続いて、下へスクロールすると、ソフトの特徴などがシンプルに綴られているサイトです。

04.png
テン展

 「プロジェクトファーム」という新しい仕事の進め方を提案している、明星大学デザイン学部デザイン学科教授萩原修氏のサイト「テン展」。フレーバーとしてのエフェクト、下にスクロールしても一貫したカラー、タイポグラフィによるデザインで、情報が心地よくまとめられています。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング