トップ >> 2007/01

黒基調なのに暗くないイラスト

■■Bookmark■graphical■■ヤンプー

snagt

大志君デリシャスから抜粋。
黒くてビビットポップな、独特な色合いでイラストレーターさんのサイトです。

縦幅をあわせて自動改行でイメージを流すと
こんな風にきれいにまとまったサムネイルページができるんですね。

ウェブからの人材募集コンテンツに力を入れる制作会社

■■Bookmark■flash■■ヤンプー

CBCNETWORK 株式会社エイド・ディーシーシー

制作会社エイド・ディーシーシーがCBCNETの求人コンテンツに掲載している人材募集ムービー。みてるとかなり力はいってます。モデルを使ってのクロマキー撮影。しかも回転台もつかってます。
企画のアイデアも奇抜。「美人」を募集しているというキャッチコピーですが…とみていくと、「美」を追求しているデザイナーを募集しているというところにつなげています。
それを説明するためのメインビジュアルがムービーになっているのです。


最初のムービーが間延びしますが、台に立っている和服のモデルさんをクリックすると、くろこが現れて帯をほどいてしまいます。(時代劇でよくあるやつ)その帯のなかに解説文が表示されて流れていきます。

手書き筆タッチをパスにして活かすデザイン

■■Bookmark■graphical■■ヤンプー

Telmolindo

大志君デリシャス抜粋
筆で手書きで描いた形をストリームラインかなにかでパスにして
風景画にマスクをかけたりしてデザインをしているひとみたいです。


タイポグラフィーとしてのバランスがよいですね。
飛び散ったインクも生きています。

変なものマップ

■■Bookmark■javascript■■ヤンプー


MSNのマップコンテンツです。
GoogleMap・Yahoo!Map・Mapionなんかからかなりで遅れてマップコンテンツの登場ですが、処理速度もかなり不安定…。
MSNの場合Mapは重要性の低い扱いなのかもしれませんね。


他社と差別化を図るためにか、「変なもの」限定のマップサービスです。
投稿型ですが、広島近辺はまだ2つだけです。
個人的にはこういうのを実際みに旅行・ドライブにいくのは好きなので、アリなコンテンツです。

商品とイラストをうまくコラージュ実績紹介

■■Bookmark■flash■■ヤンプー

The Hejz - Freelance Graphic Designer

大志君のデリシャスでみました。
NIKEなどの大手クライアントの仕事でおもにコラージュをもちいた手法で広告制作している会社のようです。コンテンツ量が少ないサイトですが、下のほうにある、PEOPLEにデザイナー一人ひとり(たぶん)のサイトへのリンク集があります。めちゃコラージュ上手な人が沢山関わっているところですね…。

タバコの灰がアルファベットになっているのがなんか好きです。

NHKスペシャルでGoogleの特集

■■Bookmark■■ヤンプー

NHKスペシャル「グーグル革命の衝撃」

昨日再放送をみたんですが、NHKスペシャルという番組でGoogleを特集していました。
SEOの基本的なルールの紹介もあって、これを今後のクライアントも見てたとしたら、ウェブへの意識の高い人ももっと増えてくるんだろうなと思いました。

番組の大まかな構成はというと
・グーグルアースで北朝鮮衛星写真もみれちゃう
・自分で運営するサイトにGoogleの広告置いて専業で月90万の人がいる
・Googleで上位に来るメリット・やり方の概要・SEO対策行業界の紹介
・募集広告を意味不明にして解読できると、URLがわかって→人材募集サイトへ
・田舎の小さなお店がSEMで売り上げアップする例
・国や政府の依頼に応じて検索結果を変更している疑惑
・開発中の技術
 サンフランシスコ街のどこからでも無線LANに接続できるようにして
 ユーザがどういうルートでその日移動したかなども把握して
 位置と、ユーザーが気になる内容を予想した関連する広告を
 表示する技術など
・上級副社長オミッド来日して携帯電話と連携していこうとしている流れ
・「グーグル政府」「グーグル通貨」「株式市場を支配する」など
・本社の玄関にある巨大ホワイトボードの紹介

どんどんGoogleが大きくなって今ではみんなが依存してきてますね。

番組内でGoogleで上位に引っかかると良い…
という内容はかなり紹介されてましたが、
そこから先の、サイトにたどり着いてからどうひきつけるかや
導線の作り方についてはなにもなかったので、
NHKスペシャルでGoogleの特集みたよーって人にも
加えて説明すると納得してもらいやすいかもしれませんね。

タキグラフィー

■■Bookmark■■ヤンプー


滝を流れ落ちる水を文字や記号の形にしてメッセージを流す技術があるみたいです。
すごいですね。
スクロールするスピードはさすがに変えれませんよねー。
でもウェーブしながら流れる表現とかできててきれいです。

ウェブでそのまんまフォトショップ

■■Bookmark■application■■ヤンプー

Fauxto... like photo.

フラッシュでできたとフォショップ。
たぶんFLEXで作ってあります。
フォトショップよりは機能は劣りますが、インターフェイスもそのまんまフォトショップで見慣れたかんじです。フォトショップないPCで重宝するかも。

IPを隠してサイトを見たい

■■Bookmark■application■■ヤンプー

Anonymous proxy,free anonymous proxies, proxy server, anon proxy, anonymous proxy server, Iphide.com.

自分のIPを隠してサイトを見ることができるウェブアプリみたいです。
いつか必要なときがあるかも。

カッコイイサイトアーカイブ

■■Bookmark■flash■design archive■■ヤンプー

High Floater

大志君から教えてもらったサイトです。
デザインのネタに困ったら眼の保養に。

最初のサムネイルの表示の仕方がかっこいいですね。
ビットマップかしないとあんなにサクサクできなさそう…。

価値観○×コミュニティー

■■Bookmark■flash■■ヤンプー

コトノハ - ○×ソーシャル

3連続postは迷惑?
980円の支払いに1080円をだす。
Lサイズのピザを一人で全部平らげる自信がある
セブンイレブンに行くことを「セブる」と言う
身長を切り売りできたら(○)売る(×)買う
など。
自分が正しいとおもっていてもほかの人とは違っていることってありますよね。
だれかが有益になる目的ではなく、匿名で投稿できるコミュニティーなので、結構本音や正しい割合が出てそうで、見る価値がありそうなサイトです。価値観の違いで言い合いになったとき、投稿して意見を見てみるのもいいかもしれませんね。

描いた絵が踊りだす

■■Bookmark■flash■■ヤンプー

ROXIK PICTAPS

描いた絵が台の上で踊りだします。
絵は平面なのですが、3D状にペラペラ動きます。
同じキャラクターがバラバラに動じに沢山動いてます。
かなり処理の高速化されてそうです。ActionSctipt3.0かも。



こんなふうにしてキャラクターを描いて、キャラクターの形に手足を合わせていくと完成。


ブログにもはれます。

ウイニングイレブン

■■Bookmark■■ヤンプー

KONAMIウイニングイレブン 人生はサッカーだ。日常生活サッカー化宣言

人生はサッカーだ。
たとえば…

コンパでもてない人に絶妙な話題を振って人気者にするというしシーン。
1ゴールを決めるためにコートの端からゴール前の人に早くて正確なパスを出す「センターリング」似ています。こういう日常の生活の中のことをサッカーにたとえたものをCMをサイトで公開しているようです。
ネタの種類も多く、おもしろいしテンポもよいし、納得できます。

サイトのトップページには沢山の動くサムネイルが敷き詰めてあります。
動くサムネイルひとつずつ選択できるので沢山映像があることもわかってじっくり見たくなります。
たぶんMTのようなブログを基に作ってあるみたいで、ひとつの映像ごとにコメントとトラックバックができるようになっています。


評価機能があってランキングがうまく使われてます。
面白いのから見たいと思ったときに便利ですね。

微生物育成ゲーム

■■Bookmark■flash■game■■ヤンプー

KCET Online - Explore Ca - California Stories - Games - Flow

微生物をマウスで操作して、餌微生物を食べて自分の細胞を増やして大きく強くしていくゲームです。


微生物を食べると自分のこんなふうに細胞画増えたり脚が増えたりします。


赤いマークの微生物を食べると、一層分海底に潜ります。潜れば潜るほど、強い微生物がいてプレイヤーも強くないと勝てません。潜るほど海の色も暗くなっていきます。


"口"をもった生物は襲ってきます。自分の細胞に相手の口が接触すると細胞が食べられて減ってしまいます。相手の細胞ポイントを全て食べると倒せます。
潜れば潜るほどいろんな動きをする微生物が登場して楽しいです。ひとつしたの層がぼやけてうっすら見えるのも好奇心をくすぐるいい効果だなとおもいました。

テキスト処理にこだわったサイト

■■ヤンプー

久石譲オフィシャルサイト

シンプルですけど、けっこう難しいことをしているサイトです。
・テキストが画面右端で折り返している。
・折り返しているにマウスオーバーしたら色が変わる。
・テキストにアンチエリアスがかかっているのは動的処理でしているとしたらすごい。
 (1文字ずつ埋め込みフォントに登録しているとするのかもしれません)

制作したのは広工大卒の+39さん

円の淵ををドラッグして実績紹介

■■Bookmark■flash■■ヤンプー

Self Titled

実績の紹介をして使うのがいいかどうかは別として、面白いインターフェイスです。

システムとデザインを総合的にバランスよく制作するエンジニア

■■Bookmark■flash■■ヤンプー

Ty Lettau Sound of Design

ウェブサイト、アプリケーション、モバイル端末、印刷物、VIをしている制作会社。
システム会社がデザインに強くなったという印象です。

有名サイトの実績としてはyahoo mapを作っているところのようです。


フォトビューアーですね。カテゴリ別や色別のインターフェイスすごいですね。プログラミングにに強くてしかも、みやすくわかりやすくなるようなデザイン性も高いつくりです。


モバイル端末システム構築の実績にこんなのがありました(↑)
たぶんカーナビのシステムです。車用のメッセンジャーみたいですね。GPSで現在地を把握して、自分のと登録しているほかのユーザーの位置をマッピングしたり、ほかのユーザの移動中・駐車中・メッセ中
などの情報もわかるようになっています。システムが高機能なだけじゃなくて、機能を使いやすくするデザインのクオリティーも高いなーと思います。


印刷物もやってます。


ロゴ・VIもやってるみたいですね。


エフェクトも作ってるみたいです。


このサイト全面フラッシュですが、ウインドウを小さくしてっても中心はずれない処理が入っています。しかも、コンテンツが入らなくなるほど小さくなると画面が暗くなって注意文がでるようになっていました。
細かいですね。

ジャバスクリプトで使いやすくする

■■Bookmark■javascript■■ヤンプー

8 1-2 eight & half:エイトアンドハーフ

オシャレなヘアメイクショップのサイトです。ふんわりけ写真がポップアップしたり、ふんわり上下スクロールしたり、ふんわり詳細ページが隙間から出てきたり、けっこうインタラクティブに見えますが全部JavaScriptでうごいています。たぶん全フリースクリプトシェアスクリプトだと思います。
まずうまく使ってるなと思ったのは…


メインビジュアルをクリックするとジャンプするヘアスタイル一覧ページ。
カットしたお客さん(?)の写真が並んでいます。

クリックすると、うちでもたまに使っているスクリプトLightBoxで画面が暗くなって、詳細がポップアップします。LightBoxはHTMLを増やさずに画像をポップアップしたり、関連画像をNEXT PREVでポップアップを閉じずに何枚か画像が見れるというものです。レイアウトやクローズボタンの画像などもカスタムできるので、こういった案件でもかなり使えるスクリプトだと思います。

うちでは大志君のスタントンチェイスから使い始めてます。テキストのカスタムは位置(上か下)、色、大きさなどCSSで扱えるんですが、タイトルと説明などを盛り込みたいときは使えないなーと思っていました。
8 1/2の場合、画像と日時と担当と店舗と解説をひとつの画像にしちゃって、実現してます。こういうやり方もありだなと思いました。


次にうまく使ってるなと思ったのは、アンカーにふんわりスクロールするスクリプト。
トップページは左画像のようにとても長いです。1ページに全てのコンテンツを盛り込んでしまってます。
うちでもページ下にスクロールアップボタンはいつもつけていて、ふんわり上にスクロールしますが(IE以外)下がる機能がありません。
このサイトのスクリプトだと上下ふんわり移動することと、IEでも機能することと、アンカー指定でも移動するので、うちの案件でも使いたいなーとおもいます。どうでしょうか?


このページ、長いのでメニューから操作しにくいかなと思ったのですが、ところどころにあるTOPボタン(スクロールアップ)をマウスオーバーすると、ブルダウンメニューが出てきました。
これ使うとすきなとこから好きなとこへスクロールできるので、不便ではないなーと思います。


Salon info店舗紹介に、店舗写真が3枚あるのですが、クリックすると…


ふんわり隙間ができて、大きい店舗写真や電話番号、住所、営業日時、アクセスマップボタンなどが出てきました。
フラッシュで作ってるのかなと思うくらいの動きですね。

全体的にJavaScriptで動きのあるサイトになっています。
細部の表現で、個別にフリースクリプト(たぶん)を使っているので、部分的にこの表現したいなと思ったときに、打ちで使えるか高味さんに聴いてみようと思います。

インタラクティブなシルエットパペット・3Dフェイス

■■Bookmark■flash■■ヤンプー

ROXIK

テクスチャー付き3D表現になっている作者(?)の顔をつねったり、ひっぱったりできます。


ROXIK toy

うちがBB FACEでやったみたいにキャラクターがマウスで動きます。強風とパペットキャラクターの間接の動きなどがインタラクティブで物理計算されてます。