ウェブのデザインやアイデアによい刺激をうける日本のウェブサイトのまとめ
Post on:2014年5月20日
いつもは海外のウェブサイトをテーマごとにまとめて紹介していますが、たまには日本のもと思い、まとめてみました。
デザインやアイデアによい刺激をうける国産のウェブサイトを紹介します。
海外のも定期的にまとめています。

DJ/プロデューサー Midori Aoyama氏のサイト。フラット・スクロールの定番のトレンドに斜めのグリッド、ポリゴン、アニメーションなど最新のデザインが非常にかっこいいです。制作会社はLETTERS, INC.で、今日リニューアルしたばっか!

一見、タイポグラフィベースのミニマルなだけのサイトに見えますが、この美しいグラデーションの背景を使ってナビゲーションから各コンテンツを見せるのが斬新です!

Canvasを使ってうねうね動かしながら、コンテンツが次々に展開していきます。

このサイトのスクロールエフェクトは、繊細で非常に美しいです。

Helveticaのメガネ、Garamondのメガネ、あなたの好みはどちら?

清水寺公式のキャンペーンサイト。美しい写真を見ているだけでも楽しめます。

ペンで書くとさまざまなメッセージが表示されるのが楽しい!

水平スクロールをメインに、垂直の動きでコンテンツをみせるのが面白いです。

ページのすべての要素が矩形で構成されていて、インタラクションも気持ちいいです。

スクロールを使ったサイトですが、まずはスクロールするとどう動くのか想像してみてください。

こういう見せ方、面白いですね。

動画をダイナミックに使ったサイト。Youtubeをこんな風にも使えるんですね。

トップのスライドショーにさまざまな模型が表示されるので、見ていて飽きません。

美しい写真とレイアウト、面白いインタラクション、ここまでの仕掛けはFlashならではですね。

スクロールコンテンツもFlashを使うとさらにパワーアップします。

この独特なカーブは、靴のカーブと同じかな。とても印象に残るデザインです。

この世界観は強烈ですね、CA4LAはカシラで、帽子屋さんのサイトです。

和紙のメーカーサイトで、繊細な色使い、緻密な柄が織りなす世界観を堪能できます。

八百屋さんのサイトではないです、金沢の蜜菓子屋さんのサイトです。写真が本当においしそう。

sweets atelier Tokyo no Hatakekara
JR東日本エキュートのプロモーションサイトで、アニメーションで動くイラストがかわいくコンテンツを見せています。

スクロールページで、コンテンツごとに打ち出し画像を見せる手法が面白いです。

短冊状のナビゲーションが非常に印象にのこるデザインですね。

凹型カーブのスライダーがレイアウトに奥行きを与えていて面白いです。

グローバルナビゲーションをはじめ、縦書きをさまざまな箇所に取り入れたデザインが面白いです。

ジュンが運営するファッションサイトで、女の子をホバーするとちょこちょこアニメーションするのがかわいいです。

随所にウェブの最新テクニックを使いながら、それが過剰に目立つことなく、センスよくデザインされています。こういうのが実は一番難しい。

レトロモダンな雑貨屋さんのサイト、ナビゲーションをはじめ、さまざまなグラフィック要素の世界観が必見です。

セゾンカードのファッションコンテンツ。HTML5もここまできたかー

ロードごとに変わる背景がちろちろ動くちょっと面白いデザインです。たまにコントラストの強い背景があるので、それにあたると目が痛いです。

スクロールでズームイン・アウト、スライドなど、さまざまなエフェクトを使っています。

スクロールすると、襖を開くようにダイナミックに友禅の美しい柄が堪能できます。

最後は、僕も制作チームだった「虎屋」さん。
随分前のサイトですが日本のといえばはずせないです。今見ても、写真と明朝体のタイポグラフィが美しい。この美しい写真はサイト用に全て新規に撮影していました。
sponsors