読者です 読者をやめる 読者になる 読者になる

Design Note

気になったWebサイトや広告などをまとめていきます。Web以外のものもあります。

PARCO

parco.jp スクロール時の動きが面白い。 サイトの背景色は、スクロールするごとに変わっていき 多く使われているが 全体的には大人しめな印象。

リプトン

brand.lipton.jp 「食べたくなっちゃう紅茶です。」のフォントが面白いと思った。 スイーツや花、フルーツなどを散らばせた背景が素敵。

ペプシコーラ

www.pepsi.co.jp 立体感のあるサイト。 トップでも使われている画像がかっこよい。 コーラのシュワっと弾ける感じが上手く表現されている。

monami ロボットをフレンドリーにするソフトウェア

www.dnp.co.jp 動きが非常に面白いサイト。トップはスクロールなしの全画面。 サイドにあるナビゲーションから各ページに飛んでいけるのだが そのページも背景の模様の動きや、画像とテキストの見せ方が うまいと感じた。

MASAHIROMARUYAMA

maruyamamasahiro.com メガネのデザイナーMASAHIROMARUYAMAのサイト。 このトップ以外に他のメガネをかけた数人の画像があり それぞれ360度回転させられるようになっている。 作品などを載せるときこーゆ見せ方は面白いなと思った。

ESPALMADOR MARISQUERIA(スパニッシュ)

www.tf-corp.co.jp トップページの動きがビーチを想像させる。 風になびいているような動きで、船の上のように画面全体が動く。 コンテンツの見せ方も上手くて、画像の使い方も非常に参考になった。 こんなサイトを作ってみたい。

JILLSTUART

www.jillstuart-beauty.com ブランドイメージがよく表現されていると思った。 トップで、二つの画像を並べているのがいいと思った。 画像が色鮮やかなので、サイト内の配色は抑え気味。 落ち着いて上品な仕上がりになっている。

株式会社 山陽

sanyotan.co.jp コンテンツの読ませ方がうまいと思う。

MONO AIR

www.tombow.com 修正テープのサイトだとは思えないほどかっこいいサイト。 エアータッチシステムという独自の使い心地の説明をアニメーションなどを使いながら説明しているのだが、それをみてるだけで欲しくなってくる。

ぷるぷるSPARKLINGゼリー

www.hakutsuru.co.jp サイトを開いて最初のアニメーションがいい。「ぷるぷる」感を上手く出している。

BIRD's EYE VIEW OF KAGOSHIMA

kagoshima-trip.jp 鳥の目線になって、鹿児島の魅力を感じさせるという面白いサイト。 動画や画像の美しさが印象的。

NHKスペシャル 70年目の戦争と平和

www.nhk.or.jp 時系列にそってコンテンツが作られている。 こういった内容のサイトを作るのは難しいが、テレビや本で見るのとはまた違った 伝え方があるのだと感じた。

株式会社キュー

www.q-co.jp スクロールすると色々な動きが加わりながら コンテンツが進んでいく。 色は主に赤と白で、テキストも赤。 シンプルすぎるデザインだけど、動画や画像、 そして何よりペンを握った手が動いていくアニメーションによって、とてもスタイリッシュな…

Jacksonville Art Walk

jacksonvilleartwalk.com アートイベントのサイトで、赤・青・紫・緑と4色の色を主に使用している。派手で個性的なイメージを受けるけれど、全体的にまとまっているのは、ページの上下に固定表示されている黒のナビゲーションが引き締めているからだと思っ…

cookpad

cookpad.com 主婦の味方、クックパッド。 この中の、企業広告のページ(随時更新される)が面白い。 その商品にあった色使いや装飾がされていて 見せ方が非常にうまい。 ビールにちなんだボタンなど↓↓ 見習いたい工夫が多くある。

法悦

jacksonvilleartwalk.com メインビジュアルが印象的。数種類の動画が使用されている。 またこのサイトで使用されている見出しの日本語のフォントが気に入っている。(SVGで作成されている)

First Film

www.first-film.com 結婚式用の動画制作サービスのホームページ。 ウエディングらしい華やかで可愛らしいイメージ。 メインビジュアルは、家族一人一人の顔の画像が使われている。だんだんと、アップにされていくという単純な動きなのだが「つたわる、を伝え…

hohabba.

hohabba.com 田舎の美容室らしい、ほのぼのとした雰囲気が伝わるサイト。やはり、動画を使うことで画像だけでは表現しきれない空気感やリアルさが伝わる。 サイト内の色は、背景白のテキストは黒のみ。 それ以外の色要素は画像のもののみ。 ただ、固定ナビゲ…

Hawaiian Jewelry Wailea

wailea.co.jp メインビジュアルの動画もハワイアンらしい、みてるだけで癒されるような動画でいいのだが このサイトの一番好きなのは、背景で使われているイラスト。ハイビスカスなどの花が水彩画のように描かれているのだがとても綺麗。あえて、写真ではな…

いとう養鶏場

ito-eggfarm.com 養鶏場のサイトなのにと言ったら失礼だが、とてもおしゃれで細かく作り込まれているサイト。 見出しの色やアクセントカラーが卵の殻の色。 画像の配置の仕方や、鳥の足型の装飾が施されていたりするちょっとした工夫が可愛い。 あとは下の画…

甑島stay

きっと本当に何もない島なのだろうが、とても魅力的な島に思えてくるサイト。 スクロールすると、画像が動きながら表示される。 画像の美しさもだが、ライティングが魅力的だと思う。 また、画像に被さっているテキストの処理など。↓

焼きたてカスタードアップルパイRINGO

ringo-applepie.com サイトの各所にちょっとした動きが仕掛けられている。下の画像の右部分はページの左側だけでスクロールして商品を見ることができる。 バーを表示させているが、どうやっているのか気になった。 色も赤をうまく使っていて、派手さを感じさ…

株式会社いいなダイニング

www.iina-dining.co.jp 1ページごとで切り替わっていく縦長ページ。 詳細コンテンツへの切り替わり方や見せ方がいいと思った。

DEPART

depart-inc.com このサイトは実はトップの画像から複数の縦のラインが引かれていて、それが最後までつながっています。 オフィスの壁のラインに沿って引かれているのか。。 また、背景がおしゃれ。 背景の中の四角形が重なっているよう。 また、各コンテンツ…

京都神社婚

depart-inc.com 自分の中でゴールドをメインで使っているサイトは他にあまり見なかったので気になった。 メインの画像も、円の中に収めていて印象的だ。

BE PROUD

https://depart-inc.com/ www.beproud.asia 一目見ただけでは、歯科専門ホームページ作成の会社のサイトだとわかる人はいないだろう。 キービジュアルが印象的だ。 社名の「BE PROUD」というテキストの少しかすれた具合が非常にマッチしている。 スクロール…

京都 宇治 伊藤久右衛門

www.itohkyuemon.co.jp サイト内で使われているのは、湯気や水など一部分のみ動いている動画。 ただ静止画を使うのではなく、一部分でも動きのある素材を使うと、より美味しそうに見えたり、リアリティが増すと思った。

ボノス リクルートサイト

http://www.itohkyuemon.co.jp/ www.ponos.jp 色々な動きが加えられていて面白い。

水曜日のカンパネラ

www.wed-camp.com 印象としてはユニーク、不思議。 トップ画像が印象的。 トップ以降のページでは、水の動きのようなjQueryと背景色が徐々に変わるアニメーション。

いこい旅館

www.ikoi-ryokan.com トップのイラストが素敵。 煙が出ているところだけ、もくもくと動いている。 古風なサイトかと思いきや、 各所で動きがつけられていたり、色々工夫がされているサイト。

PYRAMID FILM QUADRA INC.

www.pfq.co.jp 動きが面白いサイト。

東京 日本橋

nihombashi-tokyo.com トップページ下の白いイラスト部分は 人や車が動いていて非常に面白い。 画像は瓦のような形になっていて味がある。

ポチと!ヨッシーワールド

www.nintendo.co.jp 見ているだけでゲームをしているかのようなサイト。布のような背景やフェルトで作ったようなテキスト。ゲームの世界観がよく表現されている。