WWW.AKIRAFUKUOKA.COM BLOG

HITSPARK™

ぎりぎりの告知になってしまいましたが、1月20日から3日間、目黒CLASKAにて「HITSPARK」というクリエイティブイベントが開催されます。昼は子どもも大人も参加できるワークショップ、夜はクリエーターたちによるトークセッションが行われるんですが、このイベントで私がABM名義でお話をすることになりました…!!

20日（水）の20:30頃から1時間丸々頂いて私が話させていただくことになりまして、トークテーマは「歴代ABM BOOKMARK OF THE YEARから探る10年代のWebデザイン」。ABM、そして近年のWebクリエイティブの歴史とも言えるこれまでのBOOKMARK OF THE YEARを振り返ることで、ゼロ年代後半のWebデザインを検証、そしてこれからくる10年代のWebデザインを眺望します。

しかし私だけで話をするのはさすがに心許ないものです。あくまで私はABMを管理している人間に過ぎませんから。なので今回のトークセッションのために特別にゲストをお三方お呼びすることにいたしました。

まずはROXIKの城戸雅行さん。PICTAPS、THE ECO ZOO、そして全日本バーベイタム選手権と、この方なくしてブックマークオブザイヤーは語れない存在と言っても過言ではないでしょう。

そして602 inc.の岩城洋平さん。あのソニーハンディカムスペシャルサイト「Cam with me」のデザインをされた方です。多くの人が感動したあのサイトがいかにしてデザインされたか、その過程をお聞きしたいと思います。

最後に日本デザインセンターの有馬智之さん。ご存知の通り（？）私はtats君と呼ぶことが多い間柄です。今回はデザイナーの観点からの解説やコメントをお願いする予定です。馴れないトークセッションなので頼りにしてますw

今回のトークセッションはこれだけのゲストに恵まれて、本当に実りのあるものになりそうです（皆様突然メールしたりして申し訳ございませんでした。ご協力ありがとうございます!!）。まじめにやるのもいいですが、楽しくお話しさせていただければうれしいなと思います。また、クリエーターのファンの方はぜひこの機会をお見逃しなく。水曜日の8時半という時間ですから、仕事を早めに切り上げて、ぜひCLASKA（マップ）へお越し下さいませ。

前回HIGH5™から10ヶ月。遂に待望の第二弾、「HIGH5 2™」開催決定。

HIGH5 2™

ほぼ1年ぶりとなるHIGH5のテーマは「black box」。普段我々が見ているクリエーター達のアウトプットだけでなく、それまでの過程、そして発想のスタートポイントを紐解く、ということみたいですね。スピーカーはartless、丹下 紘希、qubibi、Stefan Sagmeiste、Wieden+Kennedy Tokyo / +CRUZ、Namの豪華6組。映像、グラフィック、アート、ディレクションと多岐にわたるお話が聞けそう。各クリエーターの見えていない、けれども最も重要な部分とも言える「black box」が垣間見えるのが楽しみです。

日時は11月24日（月・祝日）で、開催場所は横浜の大さん橋ホール…ってここですよここ!!

大きな地図で見る

ちょwwwしかも水上wwwって、いきなり規模でかくなってませんか!! 大桟橋は大好きな場所なのでなおのことテンション上がりますね。趣味写真家は一眼レフ持参をお薦めします。

AnotherBookmarkはHIGH5 2™の "メディアスポンサー" ということで、ABMも微力ながら皆さんにこの機会を知っていただくためのお手伝いをさせていただいております。ちなみにチケットはこちらからどうぞ。あとで買えばいいかな…と思っている人は結局売り切れになって涙目wwwになること必至ですのでお早めに。

突然ですがHITSPAPER™7月のカバーイメージの制作を担当させていただきました。

HITSPAPER™
HITSPAPER™: Hitspaper Artwork by Akira Fukuoka

数日前から既にHITSPAPER™のトップページに掲載されていたので、ご存知の方もいるかもしれませんね。お話をいただいたのが6月中だったのですが、7月に入ってANTEPRIMAサイトが完成してから一気に制作しました（ちょっと遅れてすみませんでした＞＜）。ほとんどグラフィック作ってない会社員に声をかけてくださったHITSPAPER™の佐々木さん、貴重なスペースをありがとうございました!!

こういうグラフィックの制作は久しぶりなのでちょっと恥ずかしいのですが、なんとかなったかなと。iPhone発売前夜ということでApple臭がするかもしれませんが、もうiPhoneへの気持ちを抑えられなかったので勘弁してください。自分の中ではちょっとシド・ミード的なものもイメージしていたんですがうまくいったかな…？

で、せっかく作ったので、このアートワークをPC用、及びiPhone/iPod touch用の壁紙にしました。ダウンロードページは下記の通り。

WWW.AKIRAFUKUOKA.COM | Star Lens（壁紙ダウンロードページ）

壁紙のサイズも320*480 (iPhone / iPod touch)、1280*800、1440*900、1680*1050、1980*1200、2560*1600pxとよりどりみどり用意しました。このサイズを選んだ理由は…もちろん言わなくてもわかりますよね。

iPhone購入当日、やはり携帯用アプリと言えば乗り換え案内系のものは外せないなと思い、よくCMやってるNAVITIMEがあったので試しにインストールして触ってみたがあまりのあおうぇyが：…な仕様に絶句。なのでAppStoreでも人気があった「駅探エクスプレス」をインストールしてみたらこれがとんでもなく素晴らしかった。

駅探エクスプレス (AppStoreへジャンプ)
駅探エクスプレス　iPhone / iPod touch

iPhone準拠のアップル的なデザインはもちろんのこと、設計がアップル的というよりは任天堂的ともいえる親切さ。AppStoreでいくつかソフトをダウンロードして試したけども、この「駅探エクスプレス」が見栄も、演出も、機能もiPhone的に洗練されていると感じた。ので、一体何が素晴らしいのか解説。いや、これはみんなちゃんと見ておくべきなんだってば。

まず今までの携帯用乗り換え案内サービスで個人的に不満だった点は2つ。
(1) 入力した駅名が合ってないときに正しい検索結果が返ってこないことがある。
　（あれ、たまプラーザ？たまプラ〜ザ？たまぷらーざ？的な状況）
(2) いちいち時間を指定しなければならないのが面倒
　（一本次の情報が知りたいだけなのに、また駅名も時間も打ち直し!?っていうことがある）
それではこの駅探エクスプレスの働きをとくとご覧あれ。

これが起動してすぐの画面。構成が非常にシンプルでわかりやすく、iPhone純正アプリのような見た目。アイコンもちゃんと作ってある。で、乗り換え案内を利用するにはまず出発駅の駅名を入力するところからスタートするわけですが、このソフトはキーボードを使って駅名を指定するのではなく

このようにしてよみがなを一文字ずつ順番に指定していく。この方法が素晴らしいのが文字の入力と検索候補の表示を同時にやっていること。この発想はすばらしい。先ほどの懸念点(1)を見事にクリア。ちなみに一度入力した駅名は「以前入力した駅名」に保存されるし、普通にキーボード入力で検索することも可能。こんな具合に出発駅と到着駅を決めたら「検索」ボタンを押して検索開始。

乗り換える際の駅や線なども簡潔に表示。いくらかかるか、どれくらい時間がかかるかも含めてシンプルに表示されている。もし複数の経路があれば左右ボタンをタップして表示を切り替える。いやま、ここまでは予想の範疇と言うか、普通の経路検索と変わらない。例えばここで、一本乗り過ごしてしまったために次にくる電車を調べたい、というときには出発駅の表示をタップすると…

なんと画面が引いてSafariのタブ選択画面のような表示に!! これで電車の前後を選択するとぐぐぐいっと画面がスライドして次の時間の検索結果表示。これはいいエフェクトの使い方の例だと思う。画面の縦と横の動きの意味の違い、エフェクトの大小による差の付け方。

本当にこのソフトはよくできてて、触れば触るほど作った人のApple、というかiPhoneへの愛情を感じる。運行情報の中に東京メトロが入ってないじゃないか!!…と思ったら普通に設定の中でON/OFF変更できたり（いやはや千葉都市モノレールがリストの中に入ってたのはびっくりした）。唯一の重箱の隅は時刻表検索の「快速」とかのアイコンがちょっとにじんで見えてあんまりきれいに見えないこと…って本当に重箱中の重箱だよ。このクオリティでどんどんiPhoneソフトウェアが出てきたらいいよね。

iPhone/MacOS Xはエフェクトの時代の始まり。今まで優秀なソフトウェアは適切なレスポンス・適切な表記・適切な配置で決まる部分が大きかった。最近ではそこにエフェクトというものが少しずつではあるけど大きな位置を占めつつある。駅探エクスプレスでは検索結果画面における縦横の動き、そしてエフェクトの違いが見事に効いている。経路の違いと時間の違いをエフェクトが教えてくれている。Flashサイトだってボタンにカーソルを載せたときに色が変わったりするのは別に楽しくするだけでやっているわけではない。ユーザーの操作をサポートするために画面の変化を付けているのだ。

iPhoneではタッチパネル方式の入力のため、ボタンを押したという感覚を指で感じることができない。そのために画面のエフェクトをオーバーにしてユーザーにフィードバックしている傾向が強い。例えばホームボタンを押すと画面がズームアウトするように画面が小さくなり、ホーム画面が現れる。場合によっては処理落ちすることもあるというのにAppleはわざわざあのエフェクトを入れている。そこまでしてあんな派手なエフェクトが必要なのか？もちろん必要なのだ。ホームに戻る＝アプリケーションの切り替わりであり、操作方法が大幅に切り替わる。このとても大きな変化をユーザーに伝えるためにあのエフェクトがある。

エフェクトが単なる自己満足のように見られる時代があったように思う。ただそれは「意味をなさないエフェクト」だったから。ユーザーを助け、適切に補助し、目的まで導く。ようやくエフェクトもデザインの範疇といえる時代になってきた。…って実はゲームの世界はとっくにそれをやってたかもね。私も口だけじゃなくてがんばんないと。

忙しいときこそブログ更新じゃい、ということでがんばってみるんだぜ。

POKéMON 151

POKéMON 151はポケモンセンター開設10周年を記念した、初代ポケットモンスター（赤・緑）に登場する151体のポケモンをデザインTシャツで再現するプロジェクト。「ポケモンは小学生のものでしょ？」という予想を覆す硬派なデザインが印象的。デザインは「ゲーム＋グラフィック」といえば、のPOLYGRAPH。今のところ発表されているデザインは4種類。

ナンバー097はさいみんポケモンスリーパー。ガチンコ対決で眠らせるなんて卑怯な!!と思うかもしれませんがポケモンでは状態変化も立派な戦略です。図鑑の通り子どもたちを「さいみんじゅつ」でさらっていく絵はかなりブラック。

ナンバー104カラカラ。トレードマークのほねヘルメットは悲しい逸話を秘めている…（ゲームで確認してね!!）。KODOKUの文字が表す通り、まさに「こどくポケモン」。

ナンバー144は「でんせつのポケモン」の一体フリーザー。シンプルなワシのエムブレム、と思わせながらちゃんとフリーザーの特徴がそこにもあそこにも。

ナンバー150、初代ポケモンのキング・オブ・キング、ミュウツー。「さいきょうさいあく」の王者の風格漂うエムブレム。塩基配列のイメージも入っているところはさすが「いでんしポケモン」。

個人的にはカラカラ（私もKODOKUですから）とミュウツーが良さげ。「さいきょう」に憧れるのは未だゲームキッズである証拠かも。

私のちょうど1歳下がポケモンブームを直撃した世代なので、私はそこまでポケモンに思い入れはないのだけど、やっぱり気になってしまうのはNindendo Power…？本当に151匹再現するかどうかは不明ですが（さすがに無理、よね？）、かなり今後もかなり楽しみなプロジェクトです。

via.Twitter@seabream

去る12月1日(土)、六本木AXISギャラリーで行われたデザインカンファレンス「HIGH5™」に行ってまいりました。

HIGH5™

ウェブ上の数々のデザインサイトを紹介、そして多くのクリエイターにインタビューを行ってきたHITSPAPERさん主催のイベント。記念すべき第一回（もうそういうことでいいんですよね？）のスピーカーはNON-FORMAT、NEASDEN CONTROL CENTER、WOW、 PROJECTOR 、NAMIKO KITAURAの五組。皆様の素晴らしいセッションで、あっという間の6時間でありました。簡単に興味深かった所を抜粋。

・WOW
映像は口ほどにモノを言う、というか実験的作品の映像やトレイラーだけでももうお腹いっぱいですよのクオリティ。トレイラーの中にANTEPRIMA WIRE BAGの映像も入ってました。高いクオリティを持った映像制作会社の中でも、クライアントワークの一方、実験的な試みを続けている所がWOWのとんでもなくすごい所。「実験作品のために仕事をしているようなところも」「忙しい中でもなんとか時間を捻出して自分たちの作品作りに充てている」といったお言葉からもわかるように、クリエイティビティを100%発揮する場所を作ることが、いい仕事をする原動力になっているような。その一方でクライアントワークに関しては「100％の力を出すのは当然、そこに20％自分たちの味、クリエイティビティを上乗せする」という考え方が、最前線を10年間走り続けてきた秘訣なのでは。

・NEASDEN CONTROL CENTER
まさしく「手から生まれる」作品たち。セッションでは周りの環境、近所気になったもの（拾ったもの）の紹介からスタート。体験や記憶が彼の手を通して作品になっていく。中盤以降作品を次々にスライドする形でセッションが進みましたが、後半の映像の上映に入ると同じ作風でもガラッと印象が変化。手書きの線が乱暴に動き出す様にもまた別のセンスを感じる映像。実写と合成して作られたTVのオープニング映像が逆に手書きの力強さを強調していたのが印象的。作品からも表れるかわいらしさ、子どもっぽさ、ユーモアを終止本人からも感じるセッションでした。

・NAMIKO KITAURA
以前ANTEPRIMAの撮影も担当してくださったNAMIKOさん。写真家を志すまでから、表現に至るまでの道のりを作品を交えて。普段から明るくて気さくな方ですが、今回のセッションでは特に作品に向かう動機、その際の自身のポリシーといった部分を主軸に。外からの目に対する反抗、という意味での表現はよく聞く話ですが（いわゆるロック的な。）、ただ反抗するでなく一度飲み込んで、自分の中で明確な答えを出して外へ出す、という行為はそうできることではないですよね。個人的に一番感心したセッションでありました。

・ PROJECTOR
あのお仕事のあんなことやこんなこと。プロジェクトのスタートから完成までをあえて整理せずに、という形のセッションに。おなじみUNIQLOCKやBIG SHADOWの発想から実現まではプロジェクトXの如し。一通りのプロジェクトの話を聞いて感じたのは、特にこの手のプロジェクトには「完全なる成功の方程式は存在しない」。どんなにちゃんと設計図を書いたとしても、不慮の事態はつきもの。必要な限り線を引き直すし、むしろ事故から得られることが大きい場合もある。制作だけじゃない、全ての要素がそろってこその大プロジェクト。

・NON-FORMAT
まず言えることは無性にフォントが作りたくなるワナ（笑）。エディトリアルやCDジャケット等のアートワークが次々に登場。改めて「ゴロッとしたフォントかわいいよなあー」ってずっと思ってた。それはさておきセッション中によく出てきた話が「ギャップ」についてだった。固いフォントに対して柔らかいエフェクト、といった。普通に考えたらべた塗りじゃない？ってところをわざと安っぽい感じのグラデにしてみたり。ベースになっている部分はもちろんちゃんとしっかり組まれているんだけど、あえて崩す、その崩し方が人の気を引くポイントに繋がってるのでは。でもフォントいいよねーパーティクルの絡め方とかFlashに持っていきたいと思いますた。

…っと恐れ多くも総括してみました。改めて思うのは、作品と作者にセットで会える、という機会は貴重だなと。聞いた話では来年もまたカンファレンスが行われるとのこと。期待大!!

でもいつか、ネットのどこかで。

全国のAkiraFukuokaの投稿をお待ちの皆さんこんにちは。今日は長らくお待たせいたしましたAkiraFukuokaデザインの新Tシャツ、そしてトートバックのご紹介です。商品は全てfactioさんで取り扱っていただいております。

[Artificial Skull]

人類がクリエイトしてきたオブジェ大集合。そして地味にスカル。
白Tシャツ、黒Tシャツ、トートバッグの3種類。
ちなみに私のtwitterの背景画像もこの柄。

写真はTシャツ[黒]（税込3,896円）。黒地にやや赤みがかったグレー。細部までしっかりプリントされている。写真のモデルは男性ですが、むしろ女の子が着たら悪かわいいんじゃないかしら。

こちらはトートバッグ（税込2,730円）。こちらはキャンパス地に黄みがかった濃いめグレーでプリント。スカルトートはなかなか少ないんじゃないかという所を突いたニッチな商品。キャンパス地にスカルはやはり悪かわいい。

トート自体は結構大きめ（約40×30×8cm）で、ポケット無しのシンプルな構成。マチが大きくとってあるので、ノートパソコンはもちろん本や書類、ペットボトルや水筒も楽々入る。学校や会社に持っていくのにちょうどいい大きさ。場合によってはお買い物にも。

[Technologicon Ink]

WWW.AKIRAFUKUOKA.COM BLOGのヘッダー領域で日々黒さを増していくTechnologicon。墨を重ねたようなグラフィックを、今回はFlashではなくプリントで再現。
こちらは白Tシャツとトートバッグ。

白Tシャツ（税込2,835円）。黒い。もはや元が何のアイコンであったか判らないほど。整然と喧噪が混在するグラフィック。ロックというかパンクというか結局テクノというか。中央には小さくWWW.AKIRAFUKUOKA.COMロゴ。

こちらもトートバッグ（税込2,730円）あり。是非チェックを。

トータルで見ると今回のデザインの狙い目は「ちょっと悪い感じを演出しようとするんだけど、なりきれなくて結局かわいい感じになっちゃった」。本日はそんな逆キュートを狙っている人にぴったりな商品をご紹介いたしました。

その他のAkiraFukuokaデザインの商品はこちらから購入できます。そろそろ夏の準備、Tシャツはいかがでしょう。

今回使用する写真にご登場いただいた方はWWW.AKIRAFUKUOKA.COM専属読者モデルのSHOTAさんとkeikoさん。読者の声（つまりコメント）次第では次回も登場の可能性が。ファンの方はコメントをどうぞ。

遂にFinal Cut Studio 2登場。

アップル - Final Cut Studio 2

Final Cut Pro 6、Motion 3、Soundtrack Pro 2、Color、Compressor 3、DVD Studio Pro 4のパッケージ。やはり今回の目玉はMotion 3。

アップル - Final Cut Studio 2 - Motion 3

Motionでもようやく3D処理が可能に。3DレイヤーなんてAfterEffectsでも使えたじゃない、という声が聞こえてきそうですが、Motionの直感的なインターフェースと脅威のリアルタイムレンダリングで3Dレイヤーが利用できるのはかなりの魅力。最近のバージョンのAfterEffectsは触ってないので一概に比較はできませんが、個人的にはなんだかちまちまやらなきゃいけないAfterEffectsよりはMotionの方が好み。オーディオの扱いもMotionのほうが自由だし。

これが念願の3D編集。QuartzComposerで3Dが扱えるんだからこれくらいのことはできていただかないと…。

リプリケーターも3D対応。その他パーティクルやブラシ機能も3D対応。これは使える。

新機能マッチムービング。はめ込み映像はこれで作成。頂点部分が拡大される機能は親切。

うーん、これがリアルタイムで使えるのは絶対便利。Motionとは別のソフトColorも気になる。

Colorはカラーグレーディングアプリケーション。Shake風のインターフェース。使い勝手もよさそう。

とりあえずいいとこ尽くめなFinal Cut Studio 2。ただし価格が前バージョンより2万円アップの148,000円。ここはなんとかなりませんでしたか…。

Windows Vistaから採用された新日本語フォント「メイリオ」。WIndows標準フォント「ＭＳ ゴシック」の後継としてデザイナーの河野英一氏、マシュー・カーター氏、フォント制作会社のC＆Gが読みやすいオンスクリーンフォントとして制作されました。

メイリオ - Wikipedia

更に詳しくは古川さんのブログにて読んでいただければ、メイリオはどのような経緯で、そしてどのような熱意の中から生まれたのかがわかるかと思います。とにかくスクリーンで読みやすいことを追求したフォント「メイリオ」。間違いなくWIndows Vista最大の売りの一つ（しかも日本語版のみのプレミアム感!!）と言えましょう。

さてこの「メイリオ」。ファイル形式はTrueTypeフォントなので、あろうことか（？）MacOSXにもインストール可能なのです。インストール方法は簡単。MacOSXでメイリオのフォントファイルをダブルクリックするとFontBookが起動して、ポップアップしたウィンドウの「インストールする」ボタンをクリックするだけ。

このメイリオはなかなか特徴的で、10ptくらいの小さなサイズで使用されたところを見ると丸ゴシックと見間違えるようなかわいらしい雰囲気。12ptで表示すると、さすが、狙い通りに読みやすい。そもそもMacOSXにはヒラギノフォントが標準でインストールされていますから、メイリオをインストールすることにあまり意味はないかも知れませんが、スクリーンに最適化された最新設計のフォントをMacOSXのアンチエイリアスで使えるというのはなかなかすごい取り合わせかもしれません。そのせいか、個人的な印象としてはWindows Vistaで使うメイリオよりMacOSXで使うメイリオの方が読みやすいような…。

せっかくのなので当ブログも期間限定でメイリオで表示させる様にCSSを変更しました。でも、このブログを読む人の中にメイリオをマシンにインストールしているしている人がどれほどいるのかは不明。