宇都宮ウエブ制作所

こんにちは。徳田です。
この間、約100mくらい引っ越したので、名刺を新調しました。

名刺-表面 左：宇都宮正宗　右：宇都宮(徳田)頼子

今回のコンセプトは「懐かしのゲームブック風」。
※ゲームブック―wikipediaより

(続きを読む...)

こんにちは。徳田です。
【Flasherが始めるAE】第2弾は、AfterEffects(以下AE) のCS3から搭載されたという「パペットツール」です。 下記のアニメーションを作るのも本当にとっても簡単。ちょwwwこれさえあればアノ案件とか超役に立ったのに…！と身悶えすること必至。

(続きを読む...)

こんにちは。徳田です。

バージョンアップごとにそれぞれ連携しやすくなったという、AfterEffectsとFlashの２製品を使って、なんぞ面白い事はできないかと試行錯誤してゆくコーナーです。
とはいえ、AfterEffectsは数年前にかじっただけで、全体的に記憶の彼方…。改めて触って感じたことやつまづいたところを覚え書きがてら順にメモしていきます。3日継続もままならない私だと全然説得力ないですがシリーズ予定。

(続きを読む...)

世界を魅了したRimpaと若冲～知られざる美の系譜を探る！
http://www.tv-osaka.co.jp/jakuchu/

若沖をイメージしたモチーフをちりばめています

■クライアント

テレビ大阪 様

■協力

イラスト、htmlデザイン: 田渕裕美 様
コピーライト: 浅原奈美　様

■担当箇所（サイトTOP / Iラブ若冲 / やっぱRimpa！/ 若冲流かけ軸ジェネレーター）

プランニング・ディレクション・デザイン・flash：宇都宮（徳田）頼子
プランニング・インタラクティブデザイン・flash:宇都宮正宗

※グッドデザイン賞 ノミネート作品
※web creators　2008/3月号, web designing 2008/3 月号にサイトが紹介されました。

えらく過去の作品ですが、こちらも企画意図なども含めてご紹介する事がなかったので、この場で思い出しながら書き留めておきたいと思います。

(続きを読む...)

少し前になりますが、お豆みたいなキャラクター（フェル美ちゃん）が「おなかハリハリ～♪」と歌うCMでおなじみ、ビオフェルミンVCのサイト制作を担当いたしました。

「ビオフェルミンVC ブランドサイト-おなかのハリが気になる方に-」
http://www.onaka-harihari.jp/

ビオフェルミンVCサイト　夜バージョン

■クライアント

ビオフェルミン製薬株式会社 様

■代理店

株式会社　大広 様

■協力会社

モバイル：株式会社トイプロダクション 様
イラスト：有限会社ヴィジョントラック　様 / 山崎真理子 様

■担当

デザイン、ディレクション：宇都宮（徳田）頼子
flashオーサリング:宇都宮正宗

今日はビオフェルミンVCサイトを根掘り葉掘りご紹介をしたいと思います。

(続きを読む...)

大変お待たせしました! 2009年4月4日に行われたFPS lite vol.1「CS4キラキラかわいいアニメーション術」の寝かせすぎたフォローアップです。
当日来ていただいた方はほんとスイマセン…！
通常win使いの私が、急遽初めてMacを会場で使うことになり、私の操作はもう見てられない位不細工でしたので、要点が伝わりにくかったのではないかと心苦しく思っております。
以下に補足を添えて再度紹介させていただいていますので、皆さんの制作の参考になれば幸いです。

(続きを読む...)

実験結果

バナー制作ではファイルサイズとの兼ね合いで、テキスト要素も画像にすることが多いのですが、つまづいた事に関してメモメモ。

ステージ上では綺麗なのに、パブリッシュするとなぜかエッジだけが滲んだり切れたりしてしまいました。スムージングさせているわけでもアニメーションさせているわけでもないのに…！
プロパティでロスレス (PNG/GIF)にしてもダメ。座標も整数値なのにダメ。100％なのにダメ。もしや、いにしえの裏ワザ99％…？ダメ。画像を分解してみたら…ヒー余計汚い。adobeサイトに書いてある以下の回避法もすべてダメでした。
http://support.adobe.co.jp/faq/faq/qadoc.sv?228652+002

紆余曲折の結果、エッジに１～２pxづつ余白をとって画像を用意することに。
ふ～これで小さくてもキレイ！！

fireworksで素材を制作する際、どうしても画像のファイルサイズも削りたくって、「カンバスを合わせる」でキッチキチに作ってたんですが、この場合は「カンバスサイズ」で基準位置を中央にして周囲１～２pxづつ広げた方がいいようです。

※しかもこのバグ、常に発生するわけではない様子。同じステージサイズで別途新規作成すると綺麗に表示されました。なぜ？？

FWで画像のシルエットをパス化したんだよ

画像にリアルめな影を付ける際など、その画像のシルエットをベクター化させたい時がありますよね。それをFW（FireWorks）上で簡単に制作する方法をお届けします。地味ですが知ってるととっても便利です。

(続きを読む...)

こんなことばっかり考えてます

ちょうど先日ヴィジョントラックさん主催の「冬のweb☆クリエイター勉強会」に出席した際、「逆吹き替えカラオケ」ができるまでの企画面についてお話させていただきました。

----------------------------

●なぜ口元だけ合成させたのか？

・一部だけリアル合成って逆にキモい

昔流行ったパロディ映画「親指タイタニック」。アゴだけでものまねをする芸人「HEY！たくちゃん」。顔全体でなく一部だけ合成するとまた別の新しい表情が生まれてオモシロ気持ち悪いという発見。

・みんな結局自分が大好き！→自分で遊ばせよう！

今まで巷で流行ったコンテンツ「脳内メーカー」、「顔ちぇき」、「モーションポートレート系」…紐解いてみると、みんな会話（またはブログ）の中で自分の話題にもっていけるツールは大好き！
近頃私たちはこの結論を下に、自分をネタにできるコンテンツに注目しています。

・個人を特定しにくいコンテンツ

「とはいえ自分で遊ぶのはいいんだけど、それがWEB上で公開されちゃうのはちょっと…。」これはユーザーもクライアントも共通して及び腰になってしまう点です。
ここで“目元を隠す”とどうでしょう？
例えはアレですが風俗店の看板を思い出して下さい。笑顔で全裸になっちゃってる女性。他は手で覆わず目元だけばっちり隠していますよね。
このように人は目元を隠すことによって個人が特定されにくく、なおかつ恥ずかしさも軽減され大胆にもなれるものなんです。これは仮面舞踏会で恋の駆け引きを楽しむ女性の心理状態にも似ていることから以後「仮面舞踏会の法則」と呼ぶこととします。（*これ以後一切出てきません）

●なぜカラオケなのか？

・ユーザーってすごく不器用

「自由にお絵かきしてね」「フキダシに好きな言葉を入れよう」今まで様々なタイプの自由に遊べるコンテンツを制作してきたのですが、その度気付かされる事があります。
それは制作側の期待に反して、白紙状態のゼロのものから自由に創造し楽しめるユーザーというのは本当にごくごく一部だということ。
制作側としては「せっかく作るのだからアレもコレもできるように…」とつい欲張ってしまうところなんですが、私達はあえて自由度をなくすことで、誰もが気遅れすることなく気軽に楽しめるようなシンプルな構造を心がけています。

・とにかく口を動かしてもらわないと楽しさが伝わらない

上記のことから今回も「自由に喋ってネ！」では誰も楽しんでくれないだろうという結論に至ります。
かといってアテレコのように予めこちらでセリフを用意して喋らせる、これも唐突すぎて抵抗がありそう…。
言われるままに口を動かすことに抵抗がないシチュエーションってなんだろう…？
⇒カラオケじゃん！！

こんな感じで、ああでもないこうでもないと会議室（≒居酒屋）で夜な夜なミーティングを繰り返し、「逆吹き替えカラオケ」は出来上がりました。

----------------------------
※おまけ
ここまで愛をこめて考えた「逆吹き替えカラオケ」なんですが、口元をカメラに合わせる部分が超アナログ…

実はこの仕様の以前に「顔認識させて、自動的に口元に追従させたらいいのでは？」という案がありました。その実験コンテンツが「家庭教師のトライをFlashで試してみた」だったわけです。

今回はカラオケの音楽に遅れることなく顔に追従できなくては意味がないということで、結局アナログな方法を取りました。ユーザーにアクションさせるという意味では「自分で頭をいい塩梅の所に動かしてね」という仕様は、傍から見ると滑稽で気に入っています。

当制作所の作品「逆吹き替えカラオケ」がなんと、1-click awardの一次審査を通過しました！

次は来年1/16に東京で行われる公開最終審査です。
結果は気にならない訳はなく、毎日のように代表と「イケるか否か」の押し問答を繰り返しているのですが、例え結果は差し置いても、第一線で活躍されている審査員の方から、生の感想や意見を聞けるという貴重な機会なので、今からとても楽しみです。

これで今年は3つのコンテストに挑戦しました。
「いつもいいトコまではいくのにね！」みたいな美味しいオチが付きそうな気がしないでもないですが、いつか芽が出る時のためにもコツコツとブランド力を高めていこうと思っています。