2015年4月 ホームページ制作の参考にしたい!気になったWebサイトまとめ

毎月恒例の気になったWebサイトまとめ、今回は2015年4月にチェックしたWebサイトから14サイトをピックアップしています。

CanvasやWebGLで3DCGを表現するサイトや、スクロールアニメーションの新たなアイデアを追求するサイトなど、見ていて楽しいWebサイトを選びました。

インタラクティブな表現を維持しつつ、モバイルデバイス対応もしっかりされた高い実装力が伺える作品ばかりです。

こうした作品に日々触れることで制作のモチベーションも上がります。

※「2015年4月に公開されたサイト」というわけではないのでご了承ください。

KOHEI NAWA

kohei-nawa
URL : http://kohei-nawa.net/

京都のアートスタジオを拠点に活動する日本人アーティストのポートフォリオサイト。

マウスオーバーしたときのテキストがちらつくような表現のみをアクセントに、全体的に必要最低限の構成が潔さを感じます。

The Afrix

afrix
URL : http://theafrix.com/

FWAなどの審査メンバーでもある、ロンドン在住のフリーランスアートディレクターのポートフォリオサイト。

マウスオーバー時の背景画像変化、カーソルの変化などを活かしてナビゲーションを最小限まで削ったストイックなつくりになっています。

Eurosport

euro-sport
URL : http://www.eurosport.fr/

ヨーロッパのスポーツポータルサイト。

幅広いスポーツ情報を見やすくまとめてあり、情報設計やコンテンツレイアウトの参考になります。

もちろんスマートフォンも対応しており、ポータルサイトのレスポンシブ化やナビゲーション設計の好例となりそうです。

KUROKAWA WONDERLAND

kurokawa-wonderland
URL : http://kurokawawonderland.jp/

東京在住のクリエイターによる、熊本県阿蘇郡にある黒川温泉郷を舞台とした自主制作作品。

凝ったつくりになっているのでそれなりの予算が割かれているものだと思いきや、各分野のクリエイターが集まってノンバジェットで作った作品というのだから驚き。

映像も写真もクオリティ高くてこの作品の世界観に惹きつけられます。

予算なし!東京在住クリエイターが意地をぶつけ合うKUROKAWA WONDERLAND

Cinderella

cinderella
URL : http://cinderellapastmidnight.tumblr.com/

現在上映中の映画「シンデレラ」のプロモーションサイト。

作品に込められたメッセージを写真や動画とともに閲覧できるようになっています。

tumblrテーマのカスタマイズの研究として参考にしたいサイト。

HYPRACTIF

hypractif
URL : http://hypractif.com/?lang=fr

カナダのモントリオールにあるクリエイティブエージェンシーのWebサイト。

Canvasを利用した背景スクロールのインタラクションが珍しくて面白いです。いつか真似したい仕掛け。

SA™

sa
URL : http://www.sa-studio.fr/

フランスのデジタルクリエイティブスタジオのWebサイト。

大胆なレイアウトの作品の見せ方、ホバー・クリック時の画面遷移のインタラクションが参考になります。

Alexander Engzell

alexander-engzell
URL : http://engzell.me/

スウェーデン出身のアートディレクターのポートフォリオサイト。

斜めに切り出したレイアウトやアニメーションが斬新なイメージを与えてカッコいいです。

スプライト画像を用いたページタイトルの表現やローディングアニメが、Flashライクな印象を与えますがアニメーションがうるさすぎないのでスッキリとまとまります。

Hello I’m V

hello-im-v
URL : http://vaalentin.github.io/2015/

フランスのフロントエンドエンジニアの実験的サイト。

圧倒的なWebGL表現に、ただただ時間を忘れてサイトを眺めてしまいます。

株式会社 闇

yami
URL : http://death.co.jp/

大阪のクリエイティブ企業STARRYWORKSによるエイプリールフールサイト。

エイプリールフールのネタで終わらせることなく、なんと本当に「株式会社 闇」という会社を設立したようです。

Webサイトの内容ですが、なにからなにまで怖すぎます…。

Italic Studio

italic
URL : http://italic-studio.com/

ロサンゼルスにあるクリエイティブスタジオ。

スクロールしていくと動作するCanvasアニメーションが印象的。

タイポグラフィとアニメーションのみで魅せるシンプルな構成です。

color magic

color-magic
URL : http://www.itokin.com/musee/colormagic/

イトキンが扱うファッションブランドを紹介するシーズンイベントのプロモーションサイト。

各ブランドのコーディネートが、スクロールしていくとパラパラ漫画のようにアニメーションしていきます。スマートフォンでもしっかりスクロールアニメーションを実装。

華やかなサイトデザインも素敵です。

Cartelle

cartelle
URL : http://www.cartelle.nl/

アムステルダムのデジタルクリエイティブスタジオ。

実験的な作品が並べられていて、テクノロジーアートが好きな人にはたまらない内容になっています。

20th FWA ultranoir

fwa-ultranoir
URL : http://www.new.qedgroup.cz/en/

FWAによる特設サイト。

一見するとただのロゴが配置されているだけと思いきや、画面をドラッグすると3Dでデザインされたロゴだったことが分かる、という仕掛けが面白い。

こういった画面の奥行きを利用したWebデザインも増えています。

Canvasで実装しているようですが楽しいアイデアですね。

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »