心にて塞ぐ / log.yamatologia

ポルトガル生まれの19歳、Eurico Sá Fernandes 氏のポートフォリオサイト。グリッド、というか CSS のラインを効果的に使っていい味出してるサイト。珍しいってほどでもないけど、勿論、氏自身のポートフォリオも素晴らしいのでエントリ。

Eurico Sá Fernandes
http://eurico.ws/

IBM の Smater Planet というキャンペーンサイト。仕掛けたのは、Ogilvy & Mather 。各コンテンツを象徴するかのような印象的なアイコン（イラストレーション）が非常に可愛い。

IBM というと意外にもというか当然というか、ワリとクリエイティブに対して積極的にそしてかなり大胆に活用している企業だと思ってます。個人向けPCの特にデスクトップとか、プロダクトデザインとしてどうよ、というツッコミはあるにせよ、Lenovo だとしても、未だにWindows機で最高のノートブックと言ったら、やっぱり旧IBMノートだと思ってるしね。

ポール・ランドがデザインしたIBM の "I" が目（ eye ）に "B" が蜂（ bee ）になっている例のロゴマークとかも結構好きだったんです。ロゴをいじらせるってのは相当懐が大きくないと出来ないですよね。

IBM Smater Planet
http://www.ibm.com/smarterplanet/us/en/

グラフィックデザインスタジオ、Salutpublic のポートフォリオ。メリとハリのバランスがすごい絶妙で、こりゃすごいね、と思ってたら、実はウェブサイトのつくり、というかちょっとしたギミックが、地味に素晴らしいと感動しました。フランス語かなぁ、まったく読めないんでアレだけど、これはちょっと参考にしたいね。

Salutpublic
http://sp.editionsfz.com/

ああ、格好いい・・・。ゾーニングがしっかりしてます。しかし、右端のコンテンツ、Windows の FF だとブラウザを小さくしてもスクロールバーが出ないで隠れちゃうんですけど・・・。もう見えなくてもOKだ、という認識なのか、それともこっちの個人的な環境のせいなのか。

まあ、でもそんなことは瑣末なことです。評価すべきは左側の2カラム。これでしょう。ただ左側だけだと実にありきたりなデザインになってしまうところがニクイところ。

AOL Corp
http://corp.aol.com/

ロス在住のアートディレクター、Mark Delamere 氏のポートフォリオ。ウェブデザインですね。
しかし、凄いクオリティです。そんなに数はないけど、ひとつひとつが半端ない。ウェブサイトのデザインでクオリティを左右するのは、マージンと色彩設計、基本的にはこの二つだと思っていて、それらも結局は色覚にどう訴えるか、の軸になってるわけだけど、極端な話、この二つさえ担保してしまえば、見栄えはよくなります。らんぼーだけど。

昔、ウェブサイトのデザインをするときに、マージンの最小設定を、8px にするか 5px にするかで議論したことがあって、5px ってのは、まあ 10px というようなキリのいい数字になるところから来ているわけですが、8px ってなんだよ、どっから出た数字だよ、と言ったら、あれです、8、16、32、64、128・・・、そうPCで使われる数字だったんですね。8ビットとかの8の倍数。

※このマージンの設定をどうするかで、ウェブデザイナーの出自がある程度分かるという話、いや、相当昔の話ですよ。

で、一旦最小のマージンを決めたら、それ以外の数字は使わない。画像のサイズもなんもかんも最小マージン数の倍数にする、という具合です。まあ、ブラウザによって違うという、レンダリング後の数値なんてあってないようなものなので、非常に微妙な話なんだけど、こんなふうに各エレメントごとに数値を決定するのではなく、CSSのクラスよろしくきっちり揃えると、マークアップも楽ですよね。逆に言うとマークアップしやすいデザインは、いいデザインと言えるのかもしれない。

ま、ウェブサイトデザインなんて、結局は変則的ではあってもグリッドデザインにならざるを得ない仕様のはずなので、闇雲に揃えよう、というのも破綻するきっかけにはなるんだけど、デザインの第一歩めは「揃えること」なので、ウェブデザインはいい教材になのかもしれないですね。マークアップできないデザインは全てのメディアにおいてグラフィックデザインじゃねー、みたいな。

Mark Delamere
http://www.workbyitself.com/

ニューヨークタイムズに掲載されている、ニューヨーク犯罪発生マップ。ニューヨークタイムズのサイトが実に美しいのは周知の通りだけど、それはつまりデザインにおけるルールがキチンと設計されているから。この地図が美しい、とは不謹慎過ぎて口が裂けても言えないけれど、読者に対する企業側からのアプローチがしっかりしていることの証でもある。

いい加減、日本のバナー文化はホントに止めて欲しい・・。

グッとキターーーー！

すみません、取り乱しました。アンブロのワールドカップに向けたキャンペーンの一環。美女がずらり。女の子が男物のシャツを着ると当社比5割増しくらいで愛おしく見えるのと同様の効果が、日本だけではなく、諸外国にもあったことを確認。

Umbro.com : World Champions Collection Shirts
http://www.umbro.com/

可愛いアルファベット本。
印刷できます。これは凄いね。子供にも大人にも楽しめそう。この色使いがまた・・。

HYPERACTIVITYPOGRAPHY FROM A TO Z
http://www.hyperactivitypography.com/

ちょっと話題的には古いけど、伊藤忠のリクルートサイトに関して。
この画面いっぱいに広がった「地球の目」のグラフィック。こんなふうにブランドに関わるようなきちんとしたVIをクローズアップして、サイトを構成する、というのは実に効果的なやり方だと思うんです。
余計なものは極力シンプルにして、この地球目のグラフィックに主眼を置く、ウェブサイトの閲覧時間なんてたかがしれていて、1分以上留まることなんかそうそうないんだけど、数秒でもこのサイトの強烈なインパクトをユーザーに与えることができたら、それはウェブというメディアの特性上、半分くらいは成功と言っていいんじゃないかな、と。
そう、ウェブサイトは意外に隅々まで見られない、んです。

勿論、ウェブサイトの役割をきちんと振っているもの、に関して言えばその限りじゃありません、でもね、大抵の人は必要な情報を抜き取ったら、すぐ出てっちゃう。で、そうした積極的なユーザーであれ、何となく来ちゃったユーザーであれ、そのサイトに対する印象というのは、基本的には自分が関わった箇所のみなんですよ。

例えば、駅で切符を買うときに、大体の人は目的地が決まってますね。路線図をみながら、目的の駅を発見し、値段を確認し、切符を買う。その路線図がどうで、どんな駅があって、どこまで行けて、もっと細かく言うと、何色で、何があったか、なんてほとんど気にしない。それと同じです。

じゃあ、目的地の決まってない、旅感覚で切符を買う人はどうだろう、と。そういう人が見た路線図ってどんな風景に見えるんだろうか、みたいなね。

ウェブサイトのデザインというのは、上記二つの（かなり大まかだけど）ユーザーを担保しなければならないわけですよ。そういう意味で言うと、先日の竜馬伝のサイトのように、ファーストビュー理論だとか、デザイン的なアプローチは物凄く大切になってくる。とにかくインパクトを与えろ、という単純なやり口ではなく、何を主眼において、何を最も伝えたいのか、それを明確にすべし、ということですね。

そうすれば、ある程度はユーザーの受ける心象をコントロールすることができるわけです。ああ、このサイト、この会社、このサービスはこういうもんなんだと簡単に理解出来る。短い時間の間にです。

うん、ちょっと強引だけど、言いたいことは分かってくれると信じて・・・。

※ちなみにこのサイト、地球目の位置って全部同じなんですよね。

ITOCHU GLOBAL RECRUITMENT
http://career.itochu.co.jp/

NHK の大河ドラマ「竜馬伝」の公式サイト。このファーストビューいっぱいにイメージを置く、というかなりビジュアルに重きをおいたサイトデザインにグッときたのでエントリ。エリアごとの配色や文字の強弱など、またスクロールに対する構成上の理念というか、信念というか、こういうのってアリだと思うんですよね、何のためのスクロールか、ということを改めて考えさせる問題提起デザイン（言い過ぎかw）重要なのは、スクロールさせるということが悪ではない、ということをキチンとユーザーに理解させるビジュアル表現、たとえばテキストの配置だとか、文字送りだとか、イメージのトリミング加減とか。

ファーストビュー、つまり読込・レンダリング後の最初の画面（※1）、に物凄い注力するアプローチがスゴイ多いんですよね、日本は特に顕著だと思う。結果、よくよく構成を考えていかないと、重心がやたら上部に偏って、レイアウトも何もなくなってしまう。ユーザーに何をさせたいのか、よく分からんデザインになってしまい、もうYahooでいいじゃん状態になってしまうわけです。

企業の公式サイト、ロゴがあってナビゲーションがあって、ちょっとしたビジュアルエリアがあって、リード文（もしくは見出し・タイトルまで）、ここまでが大体ファーストビューに収まるような、へんなテンプレートが出来上がって、ほとんどが同じ作り。これはそういう理論で出来上がってます。大体、ユーザーの解像度をXGA（1024×768）相当と仮定すると、コンテンツエリア最上部から、500ピクセル前後（※2）が多いですね、大体。（昔はもっと小さかった、800×600とか、もう今となっては有り得ん狭さ）

FLASH で Stage オブジェクトを使ってブラウザ領域いっぱいに表現したとしても、ファーストビュー想定でミニマムは必ず設定されます。ここで可変になった場合に問題なのが、どの大きさになっても常に美しい比率でレイアウト出来るかどうか、これ結構難しいんですよね。シンプルにしたいけど、入れなければならない要素が多すぎるとそれだけで破綻する諸刃の剣。

スクロールさせない、ではなく、スクロールさせたい、と思わせるような配慮も、ウェブデザインではかなり重要な要素。キチンと作り手の思いがユーザーに伝わるようなデザインをしなくてはならんわけで、そういう意味でいうと、この「竜馬伝」の公式サイトはいいヒントになる気がします。

3 / 24 訂正

※1 読込後、スクロールしないで見えている部分。スクロールしない、というのを明記しておかないと意味不明ですね、すんません・・。

※2 500ピクセルというのはちょっと狭すぎますね、なんで500にしたんだろ。。。大体600ピクセル前後が妥当。

竜馬伝 Ryomaden
http://www9.nhk.or.jp/ryomaden/

大胆なグリッドレイアウトを使った、Academy のウェブサイト。レイアウトに一定の法則性があるかと思いきや、単純に上からバランスを考慮して配置されている模様。とはいえ、ここまでグリッドだと、もう何でもいいよね。グリッドを使ったデザインは多いけど、ここまで明確に、しかもそれを強調するかのようなランダム性というのは逆にシンプルでいい。Reform and Revolution から。

Academy
http://www.weareacademy.com/

格好良すぎる・・・・。これは、Area17 を見たとき以来の衝撃。Flash なんかのインタラクティブ要素はまったくない、まったくないんだけど、それぞれのヴィジュアルが実に効果的に（そしてダイナミック）に配置されて、インタラクション以上の効果を感じる。主題が何か、それが明確になっていること、そして視覚的にシンプルであること、極めつけは大きいこと！　それぞれの横のラインで、XGA想定のビューイングは担保されているんだな。

wkem™
http://www.wkem.us/

ファッションブランド、Ropé Picnic の公式サイト。余白を生かして縦書きと横書きも文字の組み合わせによるバランスが非常に美しい、綺麗なサイト。ブランドの清潔感とか、うん、伝わってきますね。

ユーザビリティや、たとえばファーストビュー問題とかも何となく考慮されているようだけど、これはまあフルフラッシュサイトとして考えると酷な話かな。それよりもファッションブランドなんだから、きちんとブランド感を伝えるのは至極当然な話だと思います。

後、何気にウェブサイトできちんと文字を組んでいるサイト、ってなかなかないんだけど、これってHTMLテキストのレンダリングに倣いすぎていやしないかと。HTMLのプレーンテキストであれば改行位置はコントロールできないけど、画像にしたのなら、文章を理解して改行位置を揃えたり、句読点・助詞など文節を考慮しつつ文章の流れを切らずに改行すべきだと思うんだけど、じゃないと読みづらいし第一美しくない。テキストボックスに流し込んで終わり、とか有り得んよ、デザイナーの皆さん。

先日、池尻大橋にあるカフェ太陽に行ったときに、壁に何気なく掛かっていた何かのポスター、縦書きで文章がツラツラと組まれているんだけど、お尻が揃ってない。
なんでだろ、と思ったら、文章自体が「水（雨）」を表現していて、それで不揃いになってるんだ・・・と気付いた時は「なるほどね→（伸ばす）」と納得。

そもそも雑誌や小説などの文庫本でも改行位置はそれぞれのデザイナーによってまちまちだったりするんだけど、やっぱり、基本はそれを読むユーザーがどう感じるか、これに尽きる。誰だったか、元デザイナーで小説家になった方がいて、その方の小説は改行位置は勿論、ページ送りまですべて文章レベルから制御してる、という話を聞いたことがあって、そういうユーザーへの配慮というか、ユーザーへのアプローチをきちんとデザインに落とし込むべきだと思うんですよね。

ま、ウェブデザイナーの質を上げるためにも、先人たちが築いてきた「世のタメ人のタメ」のデザインに一度は執着してみるのもありかなぁ、と。

Ropé Picnic
http://www.ropepicnic.com/

アイコンやインターフェイスなどのデザインを手掛ける、midtone design のポートフォリオ。上の Airport Express はpsdファイルをダウンロードできます。アイコンそのものも勿論素晴らしいのだけど、このウェブサイトから始まる雰囲気作りがたまらない。主題とは何か？ これです、これ。

midtone design
http://www.midtonedesign.com/

ニューヨーク在住のグラフィックデザイナー、Nicholas Felton 氏の Personal Annual Report。
この図版は参考になる、ウェブではどう頑張っても最小ラインは1pxなんだけど、それをアンチやらを使って、1px以下に見えるようにする、というのが実は今自分の中でのムーブメント。

Nicholas Felton | Felton.com
http://feltron.com/

右上のアナログ時計が可愛い、The Touch Agency のポートフォリオサイト。ナビゲーション的にかなり難アリだけど、雰囲気はよう伝わってくる。

The Touch Agency
http://www.thetouchagency.co.uk/

オリジナルの書体をダウンロード、購入できる、Village のウェブサイト。作りが面白いのでエントリ。

Village Version 2.0
http://vllg.com/

アメリカ、サンフランシスコとシカゴに拠点を置くデザインスタジオ、Weightshiftのポートフォリオサイト。デザインスタジオの公式サイトだけあって、美しくレイアウトし、キチンと情報をまとめている好例。真摯な会社の姿勢が伝わってくる。

Weightshift
http://weightshift.com/

いやぁ、アリだよね、アリ。

Haik Avanian
http://haikavanian.com/

ロンドンにあるイラストレーター集団、Peepshow Collective 。イラストそのもののクオリティもさることながら、ウェブサイトの格好良さにかなり感動。シンプルなんだけどね、実にいいです。

Peepshow Collective
http://www.peepshow.org.uk/

その名の通り、made in germany なポートフォリオを集めた実にドイツらしい無駄のないポータルサイト。画像を一切使わずに html と css だけで構築されたサイトを仕事でやってみたい今日この頃。

Design made in Germany
http://www.designmadeingermany.de/

うーん、スゴイな、こりゃ。クオリティがやたら高い上に、デジタルデザインならではの様々な効果が肝を突いてる。イギリス、ロンドンは Claudio Guglieri Lillo 氏のポートフォリオ。

Claudio Guglieri Lillo
http://cargocollective.com/whydontwetry

まさにスクロール（巻物）と呼ぶに相応しい、ONETWENTYSIX のポートフォリオサイト。
閲覧には少々冷静さが必要（イライラする気持ちも分かる）だが、この手のサイトもひとつの雑誌を見ているようで面白い。もっといいナビゲーション方法があったら最高なんだけどなぁ、と。マウスの位置を取得して自動スクロールというのがよくあるパターンだけど、それも鬱陶しいんだよね、個人的には。

ONETWENTYSIX
http://onetwentysix.com/

タイリングされたバックグラウンドをまんまショーケース画像にしちゃってる、KILL ME DAVE のポートフォリオサイト。インパクト実に大。

KILL ME DAVE | Portfolio Online
http://www.killmedave.com/

ブラジルの南部・サンタカタリナ州に拠点を置くデザインスタジオ、Firmorama のポートフォリオ、とポートフォリオサイト。各プロジェクトのデザインもさることながら、ウェブサイトそのものの Flash の作りに地味に感心。
まずローディングから全体の演出がダイナミックに可視化されていて、サイト全体の雰囲気を統一させることに成功している、こじんまりとしたローディングは多いけど、こんなふうに逆のアプローチでユーザーに最初に飛び込んでくるローディング画面を利用する、というのはその実難しいことだと思うんだけど、グラフィック自体がシンプルなので、非常にとっつきやすくなってるわけですよ。
配色も絶妙だし、なんというか、ウェブサイト構築という点で真摯に取り組んでいることがよく分かる。ウェブサイトのポートフォリオはあんまりなさそうなのに。素晴らしい。

Firmorama Design Studio
http://www.firmorama.com/

スキー板のカスタマイズを行えるページ。Flash ではなく HTML によるインターフェイスで個人的にはポイントが高い。スクロールに追従するのは大抵ナビゲーションだけど、これはその逆。どっちがいいかというとそれは議論の余地があると思うけど。

Folsom Custom Skies | Shapes
http://www.folsomcustomskis.com/shapes

名古屋広告業協会のオフィシャルウェブサイト。このサイトを作ったのは多分あのサイト（！）を作ったところだと思うんだけど、非常に洗練されていて美しい。特に左上に配置された円のバランス！ 大きさ、トリミング具合、位置取りなど、もう思わずこっちも嬉しくなって、拍手を送りたいくらい。

最近、旅館とかいわゆる和をコンセプトにしたサイトが増えてきていて、個人的にはものすごくいい潮流だと思ってるんだけど、その実、きちんと、和の美というやつを落とし込んでいるサイトって意外に少ないと思うんだよね。かく言うウチのサイトもまだまだだと思っていて、というかもうすでに数年が経過していて早くアップデートしないといけないんだけど、こういう美しいサイトを見ると、がんばんなきゃな、と感じます。

Made in Japan. の復権を。デジタルの世界でも、別に和だから、ということでもなく、本来我々が持っている職人魂を世界に向けてもっともっとアピールしてもいいと思うんだよな。

via . Webデザインのリンク集
http://bm.s5-style.com/

名古屋広告業協会ウェブサイト
http://nagoya-ad.jp/

アメリカ・ミネソタ州、ミネアポリス、David J. Schwen 氏のポートフォリオ。
軽く嫉妬を覚えるくらいの作り込み感。なるほどねー、と。

Dschwen
http://www.dschwen.com/

このナイキの新しいウェブサイトがムヤミヤタラに格好いい！
サンフランシスコの Serious Situations のポートフォリオ。
なんというか、デジタルなデザインをようく分かってらっしゃる、という感じ（偉そうに言えないけど）。変に印刷物のデザイン手法を入れるんではなくてね、Apple のサイトもそうだけど、これがいわゆるウェブデザインという、なんというか、ちょっと説明しづらいけど、そういう意気込みを感じるんだよなぁ。

Serious Situations
http://www.serioussituations.com/

野球に関するグラフィック等が多数。なんかイチローの変な画像集があるんだけど。
おもろい。

Flip Flop Fly Ball
http://www.flipflopflyin.com/flipflopflyball/

あの Designchapel が知らぬ間にリニューアルしてた。構成としてはポートフォリオ関連とブログ。

The Designchapel
http://designchapel.com/

カテゴライズに迷うが、Helvetica アイコンシリーズ。なぜに Helvetica アイコンなのか、その辺の理由が定かではないが、サイトの作りとデザインがなんかこう素敵と思っちゃったんで。

Helveticons
http://www.helveticons.ch/

建築家、柳原照弘氏のオフィシャルサイト。amana とか、 wordpress のテンプレートっぽい流行のインターフェイスだけど、スクロールしていくと、高さの違うそれぞれのコンテンツエリアの辻褄が合う、というこの地味な配慮にとてつもなく感動。

ISOLATION UNIT | TERUHIRO YANAGIHARA
http://www.isolationunit.info/

via . straightline bookmark
http://bm.straightline.jp/

visvim のサイト。Flash で構築されているのだけど、この PDF っぽいインターフェイスが妙にツボにはまったので。そもそもベクターデータとしての Flash ということを考えると、こんなアイデアは実は相当イケテるんじゃないかと思ったんです。これはアリだな、と。

visvim
http://www.visvim.tv/

via . straightline bookmark
http://bm.straightline.jp/

隠れ家的レストラン、六本木農園のオフィシャルサイト。モノトーンの落ち着いたデザイン。
伝えたいことをとにかく文字で、というユーザーにとっても意図が分かりやすく、理解しやすい。ティザーとしての立ち位置を如実に表現しているいいサイト。

ただ残念なのが、その読ませるためのテキスト類である文字組み。縦書きの下側が揃ってない上に、改行位置もバラバラ。アートディレクターとしては（というかデザイナーとしても）、これでは OK は出せないよ。文章をキチンと読んで理解すれば、どこで改行するか、とか設計も出来ると思うんだけど・・・。ざんねーん。

Soul Village Station 六本木農園
http://roppongi-nouen.jp/

オリジナルのデザイン・アート関連書籍、ポスター、その他グッズ類などを販売している、Arkitip のEC サイト。個性的なプロダクトが並んでる。いいネ。

Arkitip, Inc.
http://arkitip.com/

広島県廿日市市のイチゴをブランドとして売り出すキャンペーン、その一環としてのウェブサイト。地方の名産（食材に限らず）をきちんとブランディングして売り出す、というのは何もここに限ったことではないけれども、なんというか、トップページの女の子の写真の素朴さにグッときてしまった。おっさんとしての敗北宣言。

このイチゴ、食べるだけではなく、葉や茎などからエキスを抽出して化粧品などにできないか、など、多方面でイチゴを活用した何かを考えているようなので、単なる売出しキャンペーンとは一線を画してます。下手な芸能人あたりを使って派手にやるよりも、こんなふうに情感とか郷愁とか、そういうエモーショナルさってのは長く続くもんだと思うんですよね。

東京に住んでるからなのか分からないけれども、もう都会的なスタイリッシュさ（よくデザインで指定されるけど）、というのには辟易する。都会的って何？ スタイリッシュって何よ？ みたいな。
つまり「憧れ」をターゲットに求めるとか、そういう言わば上から目線で物を語るのではなく、真正面から、「で、どうよ」と問いかけたほうがやっぱりユーザーも向き合ってくれると思うんだよね。

はつかいちご
http://www.hatsukaichigo.jp/

via . Webデザインのリンク集
http://bm.s5-style.com/

Scene 360 が復活。トランスレーションに「日本語」が入っててちょっとびっくり。

http://scene360.com/

26000 Vodka のサイトで盛り上がっている Resn のポートフォリオ。ニュージーランドなんですね。
このサイト、すごいギミックに凝っていて、面白いことこの上ない。こういう無駄なものにも頭と時間をかける、という精神ってのはかなり尊いものだと思ってます。

Resn | Interactive Agency
http://www.resn.co.nz/

アイルランド・ダブリンの Atelier David Smith のポートフォリオサイト。
各デザインの質もさることながら、このシンプルなウェブサイトデザインが素晴らしい。
Flash によるこの手のシンプル、ミニマル系サイトは最近よく見かけるんだけど、Smashing Design
が今年初めに言ってた、Big Typo というトレンドは見事に当たってる。

Atelier David Smith
http://www.atelier.ie/

ニューヨーク、パリに拠点を置く Interactive Agency 、 AREA 17 。
何より驚いたのはこのオフィシャルサイトの美しさ。コレだよ、コレ！
何に主眼を置くのか、見出しレベルから考え抜かれた物凄く頭の良いサイト。等倍で見ることが出来るポートフォリオも素晴らしい。
キチンと整理された美、という、で、そこに良く見ると全体に赤い斜線が入ってるんですね。いろんな解釈が出来そうだけど。視線の確保？　ブランディング（バックスラッシュ的な）？　キャプチャ禁止？

AREA 17
http://www.area17.com/

Processing.js を利用したウェブアプリケーション。
左側のスクリプトエディタで、適当に数値を変えるだけでも、上の Reflesh ボタンを押せば反映されます。おもろい。

http://www.chromeexperiments.com/detail/hascanvas/

イタリア、クリエイティブ・インタラクティブアートディレクター（！）の Gabriele Vinci 氏のポートフォリオサイト。miniml の Standard を使ったピクセルフォント万歳なミニマルサイト。ポートフォリオも結構 Standard を使っているので、個人的にはものすっごい共感 w

でもすごい肩書き。こんなん肩書き、名乗れって言われても気が引けるわ。

掲載されたポートフォリオの数が極端に少ないのだけど、こういうディテールにもこだわったウェブデザインは、海外のウェブサイトでは久しぶりに見た気がする。今後も超期待。

Gabriele Vinci | Interactive Art Director
http://www.gabrielevinci.com/

ノルウェーはオスロの HEYDAYS のポートフォリオサイト。
見せ方がシンプルで美しい。何度見てもストレスなくページ遷移できるのでいい感じ。Flash の別の意味でのいい使い方。勿論肝心のポートフォリオも素晴らしい。トータルで安心のハイ・クオリティ。
ヒストリーバック、というか、SWFAddress ってのはもうデフォルトなのか。

HEYDAYS
http://www.heydays.info/

Joshua Distler 氏のポートフォリオサイト。なんというグリッド。
というか、このウェブサイトの仕組みに軽い驚きを覚えつつも、そんなことより、掲載されているプロジェクトの素晴らしさを語るべきか。Photoshop の Vanishing Point を利用したテンプレートなど、ああ、なるほど、と思いつつ。

Joshua Distler
http://www.joshuadistler.com/

ちょっと前に話題になった AIR アプリケーションの skimmer 。このインターフェイス周りをデザインした、32Round 、Andy Gugel のポートフォリオサイト。無駄がない！ 実に美しい。
無論、ポートフォリオに掲載されている全てのプロジェクトにおいても同様。

ちょっと前にソーシャルブックマークの Delicious のデザインが妙に心地よくて、そういうシンプルさって重要だよね、みたいに思ってたところにコレだもの。空間美ですよ。その空間にデザイナーは何を込めたのか。まさに心にて塞ぐ。

thirtytwoRound Andu Gugel
http://www.32round.com/

ロシア・モスクワにあるデザインスタジオのポートフォリオサイト、ロシアといえば保守的なイメージだけど、なんというか随分はっちゃけた（死語）デザインでいい味出してます。

Unlike Studio
http://unlikers.ru/

ローディングの数字たちにヤラレたオレ・・・。
キャラクターたちが所狭しと動き回るんだけど、皆どこかで "対" をテーマにしています。
火山とかクリックすると笑えるもの。

このサイトを閲覧していると、時々、自分ではないマウスポインタが現れるんだけど、コレってもしかして、シェアしてんのかな？

Frito Lay Dips and Chips | Made for Each Other
http://www.madeforeachother.com/

東京は神楽坂にある赤城神社のウェブサイト。

このブログでやろうとしていたことを先にやられてしまった・・。

なんてことないインターフェイスで、さらに言えばなんてことないサイトなんだけど、この埋めないことへの執念みたいなものが感じられて、個人的には大好きなデザイン。

このデザインをヨシとする赤城神社も素晴らしいが、本来ならば、日本独自のデザインの妙というのは、こういうものを言うと思うんだよ・・・。余白になんだか神様がいそうだもの。

赤城神社　東京都新宿区神楽坂

ドイツ・ニュルンベルグを拠点に活動するバンド、Yucca のオフィシャルサイト。
すごい斜めぶり。

YUCCA - QUICK LET'S BEAT IT.
http://www.yucca-music.de/

思ったのだけど、この駐停車禁止な斜線グラフィックを考え付いたのはどこの誰なんだろう。
一時期、どのサイト見ても、メインのグラフィックから背景にいたるまで、とにかく斜め尽くしのデザインが一世を風靡した時期があったけど。確かに余白と作りこんだ感を演出するにはもってこいのエレメントであることには間違いなくて、自分も多用した方かなぁ。

ローディングのバーとか、未だによく見かけるものね。
個人的には食傷気味だけど。ただこの斜め線を、ウェブデザインとしてちゃんとピクセル（ビットマップ）で描いているかどうか、というのは肝だったりしてて、イラレやフォトショップのシェイプで描かれちゃうと、変なアンチエイリアスがかかって、余計に汚く見えるんですよ。ま、場合によりけりだけど、液晶画面だとアンチエイリアスのかかり具合ってのは物凄く目立つから。

その昔、chapter 3 というサイト名で、ある筋に鮮烈な印象を残した Jens Karlsson のポートフォリオサイト。名称の変更理由は不明なのだけど、Creative Agency と明記されているのでもしかしたら何らかの組織になったのかもしれない。改名自体は随分前だけど。

アメリカはロサンゼルスでフリーランスで活動している、Joseph Chan 氏のポートフォリオサイト。
秀逸な TVCF などを QT で見ることができます。

上の画像はその数あるポートフォリオの中の、HONDA Accord の TVCF。

車が輪切りにされた途端、その断面図に細かいルームがいくつもあって、それぞれにそれぞれのことをしている、という映像。フッと小さく笑える、実に幸せなコマーシャル。

reborn : design and animation
http://reborn.nu/2009/

Drawn ! はイラスト関連の情報系ブログ。新聞の挿絵のような風刺に富んだイラストから、アニメーションっぽいイラストまで幅広く紹介。ただアニメーションといっても日本のアニメのような萌え要素は皆無なので、それっぽいのが好きな人は、下の " 二次元キャラクターブックマーク " まで。straightline さんは美女系のブックマークもあるし、面白い着眼点のブックマークサイトを次々とリリースしてます。

pixiv というイラスト系の SNS でも到底素人とは思えないイラストを数多く見ることができるんだけど、ペンタブレットの扱いがうまいね。みんな。

Drawn !
http://drawn.ca/

二次元キャラクターブックマーク
http://nijigen.straightline.jp/

pixiv
http://www.pixiv.net/

GMUNK がリニューアルしてます。カッコイイ。
しかし、オレが言うのもなんだけど、この極小ピクセルフォントは本当に見づらい。
せめてマージンを確保してくれ、という感じ。
オレが言うのもなんだけど。

via . Reform & Revolution / R²
http://reformrevolution.com/gmunk-updates/

GMUNK20089
http://www.gmunk.tv/

映画やドラマなどのオープニング映像（タイトルシークエンス）やエンドクレジット映像などをアーカイブしたナイスなサイト。映像も動画で見ることができるので、参考資料としては申し分なし。

しかし、いいのかな、このサービス。いろいろと問題がありそうな気もするけど・・・・。
というわけでコッソリ見てやってくださいw

The Art of the Title Sequence
http://www.artofthetitle.com/

いわゆるウェブマガジン。
もうホントに雑誌然とした体裁。
東京です。

Tokyo Weekender Japan
http://www.weekenderjapan.com/

コレはすごい！
エフェクターのつなぎ具合とかで劇的に音が変わる。まさにオーディオツール！
マウスでドラッグすれば各モジュールの位置も変えられます。
確かにこの手のアプリって、FLASH でできるだろうな、と思っていたけど、ここまでクオリティが高いともう職人芸に近い。デザインもすべて一人でやってたとしたら大したもんだ。

Hobnox Audiotool
http://www.hobnox.com/index.1056.de.html

Chocolate Industries というナゾのアーティスト・デザイナー集団のサイト。うーん、こうやって人のシルエットを巧く使われると、やられた、と思う。なんというかオールドスクールな雰囲気。こういうの好きなんだよなぁ。グラフィティとかも何気に好きだし。

via . QBN
http://www.qbn.com/editors_choice/583026/
 
Chocolate Industries
http://www.chocolateindustries.com/blog/

いままで盲点だったんだけど、プロ・スポーツ系、チームのオフィシャルサイトの出来の良さ、というのは意外にも忘れ去られているんじゃないかと思って、ちょっと調べてみたら、これがまた、出来の良さ、というより、出来の悪さを競い合うみたいな図式になって、ガックリいってる次第です。

野球やサッカー、バスケやバレーボールとか、ま、あるんだろうけど、個人的に身近なサッカーの公式ページを調査。いや、しかしひどいね w  なんじゃこりゃ、というサイトばっかり。

ガンバとかレッズとかひどいよ。酷すぎる・・・。強豪チームじゃないのか？
このウェブサイトでファン（サポーター）は喜ぶのかな。
きちんとクリエイティブを考えるべきじゃないか、コンテンツも含めて。

しかも、面白いことに、どこのチームのサイトも基本的には同じ作り。色彩設計や CI 、 VI まわりで差異をつけている程度と認識。チームのコンセプトが一概に言えない分、通常の企業と違って、ウェブ・ブランディング的には難しいのか（いや、そんなことないだろ、と反語的表現）、ただ海外的にもほとんど同じなので、もしかしたら、そうなっちまうセオリーがあるんだろうな。

そんな中、名古屋グランパスのサイトだけは、なんとなく丁寧に作った感があってホッと一安心。
さすが、トヨタ。不況とはいえサッカーチームのサイトすら抜かりなし。

この間、J リーグの観客の平均年齢みたいなデータが出てたけど、作り手としては、ウェブに対するリテラシーのかなり低いユーザー層も考慮しなければならないので、難しいところだとは思うんだけど、それにしたって、もう少しどうにかならんか、と。

名古屋グランパス公式サイト
http://nagoya-grampus.jp/


ま、野球もひどいけどな。パ・リーグなんて、全部同じじゃないか・・・。

日本野球機構オフィシャルサイト、球団別リンクページ
http://www.npb.or.jp/teams/

素晴らしいデザインの数々。ハイ・クオリティ、ハイ・センスで高級感のあるデザイン。非常に参考になりました。色彩感覚とデザインエレメントとの整合性がとてつもないレベルでとられていて、グランジなデザインでも、ものすごく上品に見える。
素晴らしい。ベタ褒め。

Studio K
http://www.studiokxx.com/

アメリカ出身デザイナーのポートフォリオ＆ブログ。
知らない方だけど、結構有名なのかな？
いい感じ。

via . Abduzeedo
http://abduzeedo.com/sites-week-37

Jeffdoe : The work of Jeff Toll
http://www.jeffdoedesign.com/wordpress/

メディア・ブックマーキングという、いかにもなサイト。個人的には DesignYouTrust なみに期待しております。どーでもいいけど、posted by じゃなくて、dropped by なんですわ。ナイスw

Dropular : Media Bookmarking
http://dropular.net/

一日一膳。ではなく、一日一創。
ドイツ出身のデザイナーが一日にひとつのデザインを作る、を目標に2008年をどうやら乗り切った模様。その数366枚！ それぞれのクオリティはともかくひとつのデザインを30分から60分で制作しているようなので、いいトレーニングなんでしょう。しかし、そのサムネイルたるや、ものすごい数ですよ。

DONE | Daily Design Workout 2008
http://done.jbunti.com/

Web制作会社にとって、自社サイトってのは営業・広報ツールとして最も重要なもんだと思うんだけど、意外に、というか、必然的になのか、わりと後回しになることが多いと思うんです。

例えば、数人で運営されているような小さい（けど有名な）プロダクションというのは、人数が少ない分個性が立って、自然とエッジのたったものになっていくと思うんだけど、これが、例えば数十人規模になって、自分の食い扶持を誰かに持ってもらっているようなそういう普通の企業体になると、話は変わってくるわけですね。

前述の通り、強力な営業・広報ツールの一部だとすれば、部署によって担当によって、それぞれ思いはあるだろうし、でもそうは言っても直接は利益にならんので、やっぱり時間がかかってくるわけです。重要なのは会社とか組織とかがどういうコンセプトで立っていくのか、そのコンセンサスが社員全員に周知されているか、ということだと思うんだけど、こんなに人の入れ替えが激しい業界でそれを求めるのは実は結構難しかったりするんですよ。世の中の状況もあるしね。

※人様のクリエイティブやらブランディングやらを考えていると、いざ自分たちは、とならないんだろうな。もしくは。

有名だけど、酷いところとかあったりするもんね。個人的にはちゃんと自分たちのサイトを作っていて、それをブランドとして表現できているところは頼もしいと感じる。たとえ、それがお金的な部分を前面にだした営業サイド、何々やりました的な部分を前面にだした広報サイド、プログラム、インタラクティブばりばりの技術サイドに寄ってたとしてもです。

デザインとは単に【総意】に過ぎないので、何を伝えたいのか、自分たちが何者なのか、何をしたいのか、明確に伝える、という、まー当たり前な制作活動の粋を我々自身がちゃんと表現できないと、クライアントに何を言っても嘘になる気がしてならんという・・・。なんだ、結構切実な問題じゃないか。

上記の画像は、結構以前から着目していた制作会社の Fantasy Interactive 。ここの自社サイトは以前はFlashばりばり、動画ばりばりだったんだけど、何でこんなに落ち着いちゃったのか、そういう意味で非常に参考になるかもしらん。
個人的には、以前のカッティング・エッジ系サイトよりも、今のシンプル路線のほうが「真摯に仕事に向き合う」印象があって好感が持てちゃってる、実は。

Fi
http://www.f-i.com/

フランスはパリを拠点に活動しているおそらくウェブサイト制作系のデザインスタジオ（フランス語が読めないので何とも言えないケド・・）。BLOGと銘打たれているわりにはオフィシャル然とした作り。つーか、この辺も読めないのであやふや・・。

注目すべきはそのサイトデザイン。背景に巨大な社員関連図（多分）を配置し、ボディ部分にはすっきりシンプルに組み込まれたコンテンツ群。なんというか色彩設計といい、日本人には真似できない格好良さとクオリティの高さが見て取れる作り。

人の顔、は誰が作っているのか、どんな人が作っているのか、という点でやっぱり発注者側にとっては安心できるし、何よりシステマチックではないアナログ的な暖かさが感じ取れて印象としては良く映るんじゃないかなと思いますね。人の手がちゃんと介在しているっていう事実。

色の組み合わせの妙、という点ではピンクを文字色に持ってくる、なんて普通じゃ考えませんよ。そんでもって黄色と青だもの。これはないね・・。本当に。ただそういう組み合わせであったとしても、背景との余白バランスで、とてつもなくオシャレになるから不思議なんですよ。ちゃんと計算されたレイアウト、デザインとしてものすごく参考になること請け合い。

無論、こういうサイトって他にもあるんだけど、たまたま見て再認識したのでひとまずご紹介。

influence
http://agent-influence.com/