Original

こんなのあるの? ユニークで面白いホームページ10選

インターネットが一般に広まって20年が経ち、今や数えきれないほどのホームページがWeb上に存在しています。

それらの中にはユニークな工夫を凝らしたものが少なくありません。

意表をついたキャッチコピーやインパクトのある画像で訪れた人を釘付けにしたり、思わず共感してしまうような文章で心をくすぐったりするのは、ユーザーに魅力を伝えるため、他と差別化をするためです。

最近では、アニメーションを活用して作られた「動くホームページ」が増えているようです。

訪れた人がページをスクロールしたり、画像にカーソルを合わせたりすると、何らかの“変化”が現れる仕組みになっているホームページです。

次々に現れる“変化”に思わずページの隅から隅まで眺めたくなってしまいます。

今回は「動くホームページ」の中でも、特にオリジナリティあふれるものをピックアップしました。これからユニークなホームページを作ろうと考えている方は、ぜひ参考にしてみてください。

目次

  1. コンテンツを重視して、ほどよいアニメーションで遊び心を追加したホームページ
  2. ホームページは2Dから3Dへ。奥行きを感じさせるホームページ
  3. コンテンツだけではない!ホームページを物語のように楽しめる
  4. 不思議な仕掛けのホームページ


1. コンテンツを重視して、ほどよいアニメーションで遊び心を追加したホームページ

LIVESENCEの採用サイト

https://recruit.livesense.co.jp/

株式会社リブセンスの採用ページは、一見すると普通の採用ページのようです。しかし、スクロールの際に、常にページの真ん中にあるアメーバのような物体が形を変えゆっくりと動く様に存在があり、普通のページなのに一気にデザインクオリティが上がります。

西谷デザイン

https://ryutanishitani.jp/

西谷デザインはWeb制作の会社です。簡素なページに見えますが、コンテンツをクリック、もしくはスクロールをすると、ページの真ん中にいる男の人の頭に帽子がかぶさる、遊び心満載の仕様になっています。

Visit Japan

https://visitjapan-europe.jnto.go.jp/en/

このホームページは特筆すべき動きをするわけではありません。

しかし、背景の写真が更新をする度にシャッフルされていろいろな組み合わせの背景になるのです。

独創的な動きをするわけではないのですが、このホームページを訪れるユーザーを飽きさせない工夫がされている点でピックアップしました。

博報堂×TBWAワールドワイド

http://www.tbwahakuhodo.co.jp/

博報堂とTBWAワールドワイドのジョイントベンチャーとして設立された総合広告会社の紹介ページです。

なんと全てのコンテンツが「斜め」に表示されているのです。これは会社の哲学「既成概念に縛られず、常識を壊し、新しいヴィジョンを見いだす」に基づき「文面は水平であるべき」という既成概念を覆し、斜めに配置したのでしょうか。

若干の読みづらさもありますがフィロソフィーを貫いたホームページになっており、他のものと一線を画します。

ぷるぷるSPARKLINGゼリー


http://www.hakutsuru.co.jp/purupuru/

白鶴酒造株式会社の「ぷるぷるSPARKLINGゼリー」のキャンペーンページです。「ぷるぷる」の名前のとおり、いろんなコンテンツがぷるんと動くので、商品のイメージが湧きやすいページです。

2. ホームページは2Dから3Dへ。奥行きを感じさせるホームページ

義足を作っているプロジェクトキャンペーンサイト

http://www.sip-miami.iis.u-tokyo.ac.jp/

東京大学も参加している義足の技術開発プロジェクトMIAMIのキャンペーンサイトは、シンプルながらも十分な奥行きを感じるページに仕上がっています。その奥行きは、メインビジュアルにある無数の点の動きによって感じられます。

マウスをメインビジュアルに合わせ、あちこちに動かすと、点が動き様々な形を形成してくれるので、見た目にも楽しいホームページです。

DIANE MARTELのポートフォリオサイト

https://diane-martel.com/

ニューヨーク在住の、数々のアーティストのミュージックビデオを手がけるDiane Martelのポートフォリオサイトは、まるで映画『スターウォーズ』のオープニングのようです。メニューをスクロールすると、奥に行ったり手前に戻ったりし、存分に奥行きを楽しめるレイアウトになっています。また、メニューをクリックすると詳細に遷移ができます。

3. コンテンツだけではない!ホームページを物語のように楽しめる

Peugeot

http://graphicnovel-hybrid4.peugeot.com/start.html
(こちらのホームページは音声つきです)

peugeotと言えば、フランスの代表的な車のメーカーの1つです。

しかしホームページは車の要素がなく漫画のような仕様で、スクロールするとハラハラするようなスパイストーリーが展開されています。スクロールしきると、hybrid4 の紹介ページに遷移するように工夫がされており、嫌味のないキャンペーンページに仕上がっています。

Exmotionの採用サイト

https://recruit.exmotion.co.jp/

採用サイトらしからぬデザインのホームページです。

Peugeotのホームページと同じように、ヒーローをコンセプトにしたストーリー性のあるレイアウトになっています。

Peugeotとは違い、ヒーローが動くので躍動感がある、何度訪れても楽しいページです。

4. 不思議な仕掛けのホームページ

COLORAMA

http://colorama.space/

ベルリンにある印刷会社、Colorama Risoprintのホームページは、その配色と独特なレイアウトに一瞬で関心を奪われます。3カラムのレイアウトで、それぞれに同じ内容が書かれているのですがレイアウトがほんの少しずつずれているのです。

そのため、縦にスクロールしても、左から右に読んでも同じ内容なのです。これぞ計算されつくしたホームページです。
​​​​​​​

まとめ

いかがでしたか?コンテンツよりも、ユニーク過ぎる動きに目が行ってしまい、ページにとどまってしまうものもありましたね。

ご紹介したホームページに共通する点としては、商品・サービスに関する情報をきちんと伝えているということです。動きをつけるだけで、何も伝えないページになってしまっては意味がありません。「誰に、何を、どのように伝えるか」の“どのように”の部分でこうした「動くホームページ」を利用する方法もあるのではないでしょうか。

ただし、ホームページに動きをつけると、ユニークさは増しますが、表示速度に影響を与えてしまうことがありますので気をつけましょう。やりすぎてしまうと、かえってユーザーがホームページから離れる可能性も高くなります。

あくまでも訪れる人の目線に立ったホームページを作るべきだということを忘れないでください。


福田ひとみ(フクダ ヒトミ)

福田ひとみ(フクダ ヒトミ)

Webディレクター Web業界未経験で飛び込んで早2年。プロダクトに携わり、迷いながらも日々奮闘中の新米ディレクター。Webも好きですが、サメが一番好きです。

無料ホームページ作成ツール「One Page」

One Page(ワンページ)は400種類以上のデザインとドラッグ&ドロップの簡単操作により、たった3ステップでホームページを作成することができるツールです。

◆One Pageの特徴
・自由に使える豊富なフォントや画像素材
・コンテンツを考える時間を削減する例文テンプレート
・海外向けのページも作成できる多言語対応機能
・お問い合わせ管理ができるフォーム機能
・初めての方でも安心のチュートリアル

無料から始めることができるので、集客用のページが必要だという方はぜひ一度ご利用ください!

人気記事ランキング

タグ

アーカイブ

ユーザー向け記事一覧

登録番号 IA180169  適用規格 ISO/IEC 27001:2013 / JIS Q 27001:2014