Category : ウェブサイト

タイポグラフィとポートフォリオ



インパクトあるなあー、と思って。
操作は基本ドラッグで。

 

ボールプール的な動き



マウスを避ける動きもHTML5とJavascriptでのこういう動きも別に今更珍しくもないんだけど、弾むように大げさに動くし、なんかカラフルなので、ボールプールを思わせる賑やかさや無邪気さが演出されてて、マウスを動かしてて楽しかった。

 

ナイキのランニングアクション



クリス・ポールがステージを疾走するランニングアクション。「エアジョーダンを履けばこんなにすげえんだぜ?」みたいな感じのプロモーション、だと思う。なんかデザインテイストとかMirror’s EdgeのDLCを思い出させる。
↓こんな感じの。

もしくはTronぽいとも言えるかも。
ゲーム性はMirror’s Edge 2Dとかに近いイメージだけど、加速ボードの上でタイミングよくマウスかスペースキーを押して加速したり、ジャンプ台を使って別ルートへ行くことでタイムを縮める事ができます。もちろん早くクリアした方がエライ。

加速したら押しっぱなしにした方が速度が長持ちするので次の加速ボードやジャンプ台の直前まで押しっぱなしにしておいた方が速い。
ゴーストぽいのが並走してるので、そいつより早くクリアすれば次のステージへ行けるみたいです。

この記事書くために何回かやってみたけど、シンプルだけど結構はまる。
こういうシンプルなゲーム性で結構楽しめて、その上で商品イメージもストレートに伝えるコンテンツはいいなあ。

(さらに…)

 

気分検索?



イメージや気持ち、気分的なニュアンスから画像や動画を検索するGetty Imagesのプロモーションサイト。
ハッピーな感じとか、イキイキした感じ等を、ツマミをドラッグして選びます。左側の円形の所ではプリセットからも選択もできます。また気に入った写真のと ころで左下の「+」ボタンを押せば右側にストックされ、さらにサムネをクリックするといつものGettyのページが開きます。

「レンポジを選ぶ」という点では一覧性の無さも手伝って実用性が無いに等しくて、単純にプロモーションサイトになってしまっているけど、なんかレンポジとは別の、例えばレシピサイトで「今日のメニューを気分から選ぶ」とかだったらおもしろいんじゃないかな。

 

Relax, don’t do it



2分間マウスも動かさずキーボードも操作せず波の音を聞いてリラックスしなよ、というコンテンツ。ただそれだけ。
何もしない2分はすごく長い。「5分だけついったー見よう」って思ったときは5分どころか10分20分すらすぐ過ぎるのに。

 

toString(16)



時間をHEX値に置き換えて表示します。その値に合わせて背景色も変わる。
MAC用のスクリーンセーバーもDLできるみたい。

 

東芝タブレット



かねてより噂のあった東芝のAndroid3.0タブレットのサイトがオープンしたみたいです。インターフェースがくるんくるんって感じでかわいい。
3Dぽい動きを取り入れたサイトだと、角が直角になってる事が多い(作り易いからね)けど、このサイトでは角に丸みを持たせることでやわらかい質感が出てると思う。
トランジションにもその動きを活かしていて小気味いいな。

360°/SPECSのページは左右にドラッグすると見る角度を変えられるのですが、斜めに回転させることで1パターンの動きで全ての角度を満遍なく見せられるので、制作側も作り易く、閲覧者側は気楽に全ての角度を見られる、いい手段ですね。今度パクろう。

(さらに…)

 

JR大阪三越伊勢丹



2011年5月4日のJR大阪駅リニューアルに伴いオープンする三越伊勢丹のスペシャルサイトです。
デザインも百貨店らしいカラフルだけど実直なイメージとファッション系サイトのようなアバンギャルドなテイストが共存してる感じがします。

そして何より煙状のトランジションが凄く印象的。
不透明マスクをかけてるのかと思ったけど、よく見ると煙の透明度が100%のアウトラインにそってマスクをかけて、ムービーに合わせて動かしてるだけのようにもみえる。
だけって言ったけど、実際作るのは地道な作業ですごく大変そうだ。

あ、ちなみにFlashで不透明マスク(グラデーションマスク?)のかけ方が紹介されていた。
自分ではあまり使う事がなかったけど、やり方分かったので機会があったら使おう。
ActionScript3でグラデーションマスク – belog (ActionScript3.0)
Flashのマスクでグラデーションを利用する方法(役に立つかもしれないBlog)(ActionScript2.0)

Flashのマスクでグラデーションを利用する方法
Flashのマスクでグラデーションを利用する方法

 

PUMA Africa



プーマのアフリカ版のサイト?だろうか。
このサイトの位置づけがよく分からなかった、たぶん僕が理解できてないだけだと思うけど。
いやデザイン自体はすげえかっこいいし温かみのあるいいデザインだと思うんだけど、アフリカ人に向けたサイトにしてはなんかアフリカのステレオタイプみたいなイメージで、どうもアフリカ人向けって感じがしないよね。てかアフリカ全体って対象広すぎだよね。

いや、でもそんなことはどうでもいいんだよ。そんなことより、このトップにいる動物達はドラッグで位置を変えられるんだけど、他の動物のいる所に重ねるようドロップすると交尾するんだよ。地味に凝ってるよ。こういの大好きだよ。

 

シンプルな壁紙サイト



写真とかグラフィックとかアニメの作りこまれた壁紙もいいんだけど、こんなシンプルなのもたまにはいいんじゃないでしょうか。

自由に投稿できるけど、ちゃんとデザインのガイドラインがあるみたい。
Submit a Desktop ? Simple Desktops
限られたルールの中で作られたものは創意工夫が見られて面白いし参考になります。
デザインやカラーパレットのアイディアノートとしても役立ちそうなのでRSSに登録しておいてちょくちょくチェックしたい所存ですよ。

Submit a Desktop —  Simple Desktops