閉じる
Web Design
  • 2012.03.07 (Wed)

独特な見せ方や演出がユニークな縦型シングルページのwebサイト23

よく、クリエイターさんのポートフォリオサイトなんかによく見られるシングルページですが、最近ではwebの進化・発展に伴い、よりクリエイティブにより美しく、そして表現豊かに設計・構成されたシングルページのwebサイトは企業から個人まで幅広く活用されているのをよく見ます。

今回は、その中で独特のギミックや情報の魅せ方が参考になるシングルページを紹介いたします。

1.Pioneer STEEZ

ストリートダンサーのためのオーディオブランドSTEEZのスペシャルサイト。下にスクロールすると背景が切り替わり、コンテンツもダイナミックに移動します。 内容も大会情報をYouthubeを使い上手く魅せていたり、商品紹介もありと内容が豊富です。 ちょっと変わったランディングページを創る際に参考になります。

2.Shoppub

まるでFlashで作成されているかのようなナビゲーションの動作やメインビジュアルが目を惹きますが、下にスクロールするとスライダーや人がニョキット飛び出てきたりと手を抜くことなく創り込まれています。

3.Life in My Shoes-About Us

ヘッダー、グローバルナビゲーションが固定されたまま下へスクロールするシングルページです。スクロールと共にコンテンツの内容も動くので躍動感がありますね。

4.ICORA

上記紹介サイト同様のヘッダー部分が固定されたシングルページです。多くのプラグインを使用していますが特に目を惹くのが、チームスタッフを紹介しているスライダー中の一人一人へアイコンを乗せると吹き出しのコメントが表示されます。 よくあるプラグインなのでしょうが、上手く使ってるなぁって思ったので、個人的にこの仕様はどこかで使わせてもらいたいなぁ〜なんて思ったりしました。

5.Campaign Monitor is hiring

一見シンプルなシングルページに見えますが、ボタンのアクションにしろコンテンツにしろ精巧に創られています。 余計なものがないスッキリしたサイトなので、CSSの勉強に参考になります

6.KINO site – web & graphic design

クリエイターさんのポートフォリオ、自身の紹介サイトです。 数ページ使ったポートフォリオサイトよりシングルページのサイトの方が伝えたいことや作品が魅せ方によりますが凝縮されていいですね。 また、上部にある4色のカラーパネルをクリックすると背景やイラストが切り替わる仕様になっています。

7.Grayden Poper – Interactive Designer

Grayden Poper ディベロッパーやデザイナー等のwebクリエイターさんによるポートフォリオサイトです。 グラフィックが効いてカッコいいサイトですが、コンテンツ自体は単調なのでちょっと長いなと感じてしまうのは否めないです。 ですが、サイド飛び出してるアイコンをクリックすると、一覧紹介のユニットが表示されとこが面白いと思いました。

8.Web design, WordPress, Joomla!, Drupal – PETEX STUDIO

こちらもwebデザイナーさんによるポートフォリオサイトです。 斬新かつスッキリした創りで、個人的に結構好きかもしれないです。

9.Dangers of Fracking

fracking=水圧破砕。水圧破砕させることで化石燃料を抽出させることで物議を醸しだした記憶がありますが、その危険性を説明するための専用サイト

10.Slavery Footprint – Made In A Free World

人々の奴隷制に対する意識を高めるために制作されたプロモーション的なサイトです。 下へスクロールするとニュキニョキ手が出るのは気味が悪いですが、絶妙なカラー設定とタイポグラフィ、イラストが優れています。 また、iOSやAndroid用アプリも展開しています。

11.LeoZakour

クリエイターさんのポートフォリオサイトで、コンテンツ開閉タイプのシングルページです。 全てにおいて、バランスがいいサイトです。

12.Creatief interactiebureau | Rodesk

オリジナルティのあるアイコンも目を惹きますが、トレンドであるインフォグラフィックを取り入れた上に、矢印にマウスを乗せるとツールチップが表示されるという、演出!!すばらしいアイデアですね。 紙とは違い、Webサイト上でのインフォグラフィックの使い方はこれ!!というお手本を見せてもらいました。

13.The Cupcake Factory BA

一見散らかったサイトのように見えますが、配置や使用しているカラーも絶妙にバランスがとれていますね。 このシングルページはスクロースではなく、ナビゲーションをクリックする事で、上下にコンテンツへ移動します。

14.Docteur Chantale Bourdon

顔専門の外科医、若返りの手術を専門に取り扱うお医者さんのプレゼンテーションサイトです。 サイドの女性のアイコンがスクロールと共に老化していくのは中々おもしろいアイデアですね。 内容もダラダラと紹介しているわけではなく、ボタンをクリックすると開閉式の医療ルームの紹介やプリローダー型の切り替えなど、参考になる箇所がたくさんあります。

15.Web is beautiful

サークル型が印象的な日常のデザインを発信し続けるプロジェクトサイトです。 サークルに関連づけられたつぶやきや、写真、ビデオなどランダムに表示し続けます。 眺めているだけで新しいデザインの発見があるかもしれませんね。

16.The portfolio of Bryan Katzel

ただスクロールするだけでも面白いサイトで、何回もスクロールしてしまいました。 サイト構造は特色もなくシンプルですが、キャラクターにしかり、グラフィックで魅せるセンスがないと創れないサイトですね。

17.Smokey Bones

アメリカにあるスポーツバー的なバーベキューレストランのwebサイト。 キーボードの矢印キーにも対応しており、スクロールするとコンテンツが動的にアニメーションするので楽しいwebサイトになっています。

18.Dataveyes is a start-up company designing interactive data visualization

コンテンツごとにカラーが分けられていて、サイドのナビゲーションも心地よい動きです。

19.Will Viles – Personal Site & Graphic Design Portfolio

おそらくデザイナーさんのポートフォリオサイトでしょう。 色んなアイデアをとにかく詰め込んだようなサイトです。そのままスクロールして閲覧すると今何処に何を見てるんだと思ってしまうのが否めないですが、ナビゲーションメニューから一つ一つ見ていくには素晴らしく参考になるサイトです。

20.Unfold

斜めのグリッドデザインを上手く使ってるとこが素晴らしいです。コンテンツ内容も一つ一つ上手く設計されています。 メニューの『SHARING』から移動してくるページはtwitterのつぶやきを表示してるのですが、創りがおもしろいです。参考になります。

21.Sony Tablet S – An Android Tablet Like No Other | Sony Electronics

見たままSony Tabletの製品ページだと思うのですが、スクロールすることで、まるでプレゼンテーションを見てるかのようなサイトです。 また、下への誘導ボタンも一定の幅内でマウスに連動して追尾してくるのがすごいです。

22.INTERACTIVE SHOWREEL | why interactive

"これマジヤバい"の一言です。NonFlashでここまでクオリティの高いサイトが創れるのかと関心してしまいました。 コンテンツにはマウスクリックで遊べるミニゲームがついているなど遊び心があります。…いやサイト全体がもはや遊び心満載です。

23.Hyundai Veloster | Official Site, Hyundai Motor Europe

車のプロモーションページ。まるでFlashが使われているかのようなアニメーションの演出です。 また、スライドの使い方もすごく上手く設計されています。