Advertisement

 

 

最近よく見かけるウェブデザインのひとつに、情報、コンテンツを1ページにまとめたシングルページがあります。

特に自己紹介や経歴、実績などをまとめたデザイナー用ポートフォリオサイトやiphone、Androidアプリの紹介ページなどによく利用されているようです。

少ないコンテンツを多機能なエフェクトを利用し、表示することでユーザーにわかりやすく、効果的に情報を伝えることができます。

 

海外デザインブログTheme Flashで、美しく、クリエイティブなデザインのシングルページWebサイトを63個まとめたエントリー「63 Fresh and Creative Single Page Website For Design Inspiration」が公開されていたので、今回はご紹介します。

 

最後にシングルページで利用すると便利なプラグインもまとめていますので、参考にしてみてはいかがでしょう。

 

 

詳細は以下から。

 

 

クリエイティブでオシャレなシングルページWebサイトまとめ

 

Studio Nudge

現在リニューアル中ということですが、ヘッダー部分に巨大なロゴを配置したインパクトのあるデザイン。

 

 

YEBO Creative

右側に配置されているメニューボタンをクリックすると背景とテキストが変則的にスライドするユニークな仕掛けが魅力的なウェブサイト。

 

 

Campaign Monitor is Hiring

上記のユニークなスライダーを実装したもうひとつのウェブサイト、ボタンをクリックすることで次のコンテンツに移動します。

 

 

Unfold

グリッドレイアウトをそのまま斜めにしたようなデザインが面白いウェブサイトのひとつ。

上部に配置されたメニューバーをクリックすると、ダイナミックなアニメーションでスライドする仕組み。

 

 

This is Tim

カリフォルニア在住のデザイナーさんのポートフォリオサイトで、これまでに作成した実績を水平方向にスライドさせることで閲覧可能。

 

 

Martin Alvarado

ビビッドな赤色をアクセントカラーに利用したシングルページWebサイト、メニューバーをクリックするとコンテンツまで自動的にスクロールします。

 

 

Spot APP

現在作成中のiphone用アプリの販売、プロモーションサイトのひとつ。

フルスクリーンで表示されたイメージをスライドさせたり、わかりやすいメニューバーなど個人的に参考になりそうなのでメモとして。

 

 

I Plan Websites

デザイナーさんの性格、好みなどが最大限に表現されたポートフォリオサイト。

グリッドレイアウトを利用し、イメージ、テキストを配置することで興味を惹くユニークデザインに仕上げています。

 

 

Get Fresh Kit

男性用コスメ販売サイトで、茶色を基調にグランジデザインを追加したエレガント&豪華な印象を与えてくれます。

 

 

Vector Avenger

背景デザインにユニークなベクターパターンを利用したモノクロトーンのウェブサイト。ロゴ、マスコットなどを配置することでオリジナル性を表現。

 

 

Moka

背景にフルスクリーンイメージ画像を利用したシングルページWebサイトで、インパクトのあるグラフィックデザインは一度見ると忘れることができなそう。

ページの読み込み速度を改善することで利用してみたいテクニックのひとつ。

 

 

Anton Westbroek

グリッドレイアウトを利用しすっきりと配置されたオーソドックスなポートフォリオサイトデザイン。

スライダーやギャラリー、コンタクトなどを1ページにまとめています。

 

 

Icora

シングルページの中にツールチップやスライダー、lightboxなどさまざまな機能を実装したユニークな仕掛けがナイス。

 

 

Auxilium Lab

ザラザラとしたノイズテクスチャを背景に利用し、やさしい色使いが魅力的なシングルページ。

自分のスキルや考え方をイラスト化することでわかりやすく表現することができそうですね。

 

 

 

シングルページWebサイトに利用したいプラグイン、ツールまとめ

 

参考ウェブサイトをみているとメニューボタンを配置し、クリックすることでコンテンツに移動、スクロールする仕組みが使われています。

 

スムーズにページをスクロールするプラグイン デモページ

 

 

過去の作品や実績などをサムネイルで表示し、クリックすることで拡大表示するLightboxを利用しているシングルページウェブサイトもよく見かけますね。

 

Shadowbox デモページ

 

 

FancyBox デモページ

 

 

ヘッダー部分に自動スクロールするスライダーを実装しているサイトもトレンドのひとつではないでしょうか。

魅力的なスライドショーをレイアウトすることができるプラグインをまとめています。

 

Create a Slick and Accessible Slideshow Using jQuery デモページ

jQueryを利用して、典型的なスライダーを実装することが可能、ソースファイルは無料ダウンロード可能となっています。

 

 

jQuery Image Effects – Hover Effects w/ jQuery & CSS デモページ

サムネイル画像にホバーすると拡大されて表示されるユニークなエフェクトを実装してみませんか。

 

Easy Slider 1.5 デモページ

ソースファイルをダウンロードしたら簡単に実装可能なスライダー用プラグイン。

 

参考にした利用したいツールやプラグインのまとめに関してはやや情報が古いようなので、今後よいプラグインなどを見つけ次第追記していこうと考えています。

 

[参照元 : 63 Fresh and Creative Single Page Website for Design Inspiration – ThemeFlash]

[参照元 : jQuery Resources for One-Page Portfolios – Vandelay Design Blog]