ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  • WEBデザイン

今回のWEBデザイン10選定では、「背景に動画を大胆に使った日本のサイト」に続き、1カラムサイトを取り上げてみようと思います。マルチデバイス対応、モバイルファースト、ミニマルデザインなどの流れの中で、従来の主流であった情報量満載の2カラム、3カラムのサイトではなく、すっきりした1カラムのサイトを目にすることが多くなりました。

シンプルな作りで導線がわかりやすく、スマートフォンで見た場合でもPCとあまり見た目が変わらないなどメリットの多い1カラムサイト。自社サイトにもぜひ取り入れたい、と考えている方も多いのではないでしょうか。そこで今回は、そんな方々の参考になりそうな1カラムサイトを10サイト、厳選してご紹介します。

参考にしたい効果的1カラムサイト事例

Dyson

image01

http://www.dyson.co.jp/

業種:家電メーカー
サイトの目的:ダイソンの企業と商品の紹介
サイトの特徴:コーポレートサイトでありECサイトでもあるという構成

特徴にも書きましたが、このサイトはダイソンのコーポレートサイトとECサイトという2つの機能を備えています。そのため、グローバルナビゲーションからもわかるように、かなりのコンテンツ量を持った大きなサイトになっています。しかし、それにもかかわらず、スライドショーなどをうまく使用することによって、1カラムのデザインで多くの情報をすっきりと見せることに成功。コンテンツのまとめ方がうまい、参考になるサイトです。

VENUS BED

image02

http://venusbed.co.jp/

業種:ベッド・寝具メーカー
サイトの目的:ビーナスベッドのブランドコンセプトと商品の紹介
サイトの特徴:コーポレートサイト、ブランディングサイト、ECサイトを一体化

ベッドという商品そのものを見せるのではなく、ベッドをとりまくシーンやライフスタイルを美しい写真で訴求していることサイトです。さりげないパララックスを効果的に使うことで、まるでそこに暮らす人の感性が感じられるような物語性が生まれ、ブランディングにつながっています。レスポンシブWEBデザインも使用されています。

DAIWA 2015SS FISHING SHOW SPECIAL SITE

image03

http://daiwa-fishingshow.globeride.jp/2015ss/

業種:釣具メーカー
サイトの目的:DAIWA製品の魅力の訴求
サイトの特徴:釣り具をお洒落に1つのファッションとして紹介している

サイトのタイトルである「FISHING SHOW 」という言葉がにも象徴されていますが、釣り具を単に釣りの道具としてではなくファッションの1つとして訴求。それによってブランディングしているお洒落なサイトです。1カラムの作りであることに加えて、映像コンテンツが非常に多く、映像自体のクオリティも高いので、コンセプト通りのトータル的なブランディングに成功しているサイトだと言えるでしょう。

Dolce&Gabbana

image04

http://store.dolcegabbana.com/jp

業種:アパレル
サイトの目的:オンラインストア
サイトの特徴:ルックブックのように大きな写真で商品を訴求している

多くのオンラインストアやECサイトでは、クリックすれば商品が大きく表示されますが、サイトの印象としては整然と商品が並んでいるだけという場合が少なくありません。しかし、このサイトでは商品を着たモデルの写真が大きく扱われているため、まるでファシンショーを見ているようなわくわく感や、写真集やブランドのルックブックを見ているような感覚で楽しむことができます。

ボンカレー

image05

http://boncurry.jp/

業種:食品
サイトの目的:ボンカレーの魅力の訴求
サイトの特徴:ボンカレーという馴染みの深い商品の魅力をさまざまな角度から伝えている

情報をすっきりとまとめているだけでなく、写真をたくさん使って子どもが見ても楽しめる表現になっています。特にボンカレーを使った料理の美味しそうに大きな写真は、ついつい食べたくなってしまう人も多いのではないでしょうか。このサイトを見ていると、文章よりも写真メインで訴求した方がより魅力が伝わるコンテンツは、1カラムの構成ととても相性が良いことがわかります。

人生は、夢だらけ。(かんぽ生命)

image06

http://www.yumedarake.jp/caravan/

業種:保険
サイトの目的:企業広告サイト
サイトの特徴:動画と写真で「人生は、夢だらけと。」というコンセプトを魅了的に伝えている

画面全体に写真が敷き詰められた、ギャラリー風の作りのサイト。クオリティの高いビジュアルでストーリーを見せ、言葉以上のメッセージを伝えて行くという、1カラムデザインと相性の良い内容のサイトです。広告ギャラリーの動画コンテンツはブラウザの幅に合わせて可変するようになっており、別ウインドウで開かなくても自分の好きなサイズで見ることができるなど、細部まで親切に作られています。

あきた舞妓

image07

http://akitamaiko.com/

業種:観光
サイトの目的:秋田県の観光資源「あきた舞子」の魅力の訴求
サイトの特徴:和テイストの縦組の文字組とパララックス

扱うテーマが日本の伝統コンテンツ「舞子」だということで、全体的に縦の文字組にし、背景には和紙のテクスチャーを敷いています。このように和風のモチーフやテイストを使いながらも、1カラムでパララックスも使用するなど、WEBデザインとしては今のトレンドを採用。和風で趣がありながら、新しさも感じさせるサイトになっています。

株式会社知多善

image08

http://www.chitazen.co.jp/

業種:酒卸し
サイトの目的:知多善の会社紹介
サイトの特徴:最小限の情報でコンパクトにまとめ、アニメーションで動きをつけた会社紹介サイト

「1カラムで1ページもの」の例として取り上げてみました。この構成のコーポレートサイトの場合、どうしても作りが似てしまう傾向があり、テンプレートを使ったようなデザインになりがちです。しかしこのサイトは、アニメーションとパララックスをふんだんに使うことによってオリジナリティを出すとともに、お酒の「配送」という業務のイメージをイラストでうまくデザイン化しています。

社研の学び( 立命館大学社会学研究科)

image09

http://www.ritsumei.ac.jp/gsss/subsidized/

業種:大学
サイトの目的:社会学研究所の紹介
サイトの特徴:社会学分野での研究力を説得力のあるデータを使ってアピール

これまでに写真や動画を多く使ったサイトを紹介してきましたが、このサイトは、文章やグラフを見せるにも、1カラムでパララックスをうまく使うととても見やすいということがわかる好例です。スクロールする長さが長くなりすぎないように、スライドによる処理を取り入れているところなども、非常に参考になります。

JPHACKS

image10

https://jphacks.com/

業種:イベント
サイトの目的:ハッカソンの紹介サイト
サイトの特徴:東京大学が開催するハッカソンの告知をわかりやく行っている

1カラム1ページのサイトの利点として、ページ遷移しなくてもスクロールするだけでサイトの内容がわかるという点が挙げられます。この特徴は、コンバージョン率を上げたい時にも有効に活用できます。このサイトもそのような作りになっており、JPHACKSの内容や特徴をスクロールしながら理解し、応募につながりやすい構成になっています。

今回のまとめ

以上、さまざまな1カラムサイトをご紹介しましたが、どのサイトにも共通して言えることは、掲載する内容がとても吟味されているということです。従来のWEBサイトは、ついついあれもこれもと情報を盛りだくさんに載せてしまう傾向がありましたが、それとは対照的に、時には物足りないくらいすっきりとしています。ここまで、サイト数や情報が増えた今、このような傾向はさらに強まっていくと思います。

何を訴求したいのかをしっかりと考え、掲載する内容を絞り込んでユーザビリティの高いサイトを作りたい…。そんな時には、1カラムの構成を検討してみるのが良いではないでしょうか。ご紹介した事例を、サイトの制作やリニューアルの参考にしていただければと思います。

<関連記事>

【WEBデザイン10選】背景に動画を大胆に使った日本のサイト
プロのWEBデザイナーが厳選!WEBデザイン・ギャラリーサイト20

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」