机の上も絶賛散乱中、典型的ダメなデザイナーの宇都宮頼子です。
今回から始まった【ダメデザイナー救済！】は、基本ズボラな私が、いつかみんなに「こいつデキる・・・！」と言わせたい、そんな思いを胸にコツコツ溜まってきた小技をご紹介していくコーナーです。

twitterのタイムラインで流れてくる「ココとココの頭位置が微妙に違うのは意図的！？」「この端数は何だ？？」などなど、コーダー＆プログラマさん達の深夜のつぶやきは耳が痛い、耳が痛いよぅ。

今回はFireworksのシンボルをつかって、コーダー＆プログラマさんもニッコリ間違いなしのステキな素材作りを学びましょう！

●汎用性の高いブロックを作る

よく使うサイズのブロックを作ります。重ねても使えるので最低限でOK

こんな感じで汎用性の高そうなサイズのシンボルを作っておきます。（※以降ブロックと呼びます）ここでは5px,10px,20px,30pxと作ってみました。これらは共有ライブラリで保存しておくといつでも取り出せて便利！

※ワンポイントアドバイス： 矩形、線、テキストは保存の前にビットマップに変換しておきましょう。ベクターデータのままで回転させるとサイズが狂ってしまうようです。

基礎編は以上！さて実践編です。

●伸縮自在のパーツをつくる

中身によってタテヨコサイズが変わってしまうような素材の場合でも、9スライスとブロックを使って、paddingが再現できます。

9スライス内の四隅にブロックを配置します

まず枠オブジェクトをシンボル化させる際に、9スライスも有効にしておきます。
9スライスのガイド設定で四隅箇所にブロックを配置しましょう。この四隅だといくら伸縮してもブロックも崩れません。

伸縮させてもpaddingが可視化できて便利！

中身によって縦横が変わっても、ホラpaddingも崩れない！

●見出しをつくる

見出しの左脇と下辺にブロックを使用してみました

さっき作ったブロックを使って見出しシンボルを作ってみます。ブロックのよいところは、スナップで吸着してくれるところ。 配置もらくちんです。（※ブロックは目玉マークをオフにしてもスナップだけは効いてくれるところもシビれます。）

こんな感じでリストや区切り線などパーツをどんどん作っていきます。
「このルールにはまらない場合はどうすればいいの？ここだけは100pxの余白にしたいの。」 そういうときは別名でそういうパーツをつくっちゃえばいいだけのことです。
何度も登場するパーツであればシンボルの中にブロックを入れるといいですし、ロゴのような単体パーツだったら直接ブロックを配置してもOK。
そうこうやるとこんな感じでできあがり！

oh!デザインしてたら指示書も一緒にできちゃった・・・！

この方法のステキなところは

• 素材ファイルが兼指示書になる！
• ブロックというシンボルを作っておく事でスナップが効いて配置もラクラク！
• ルールを整理しながらデザインするので自然とcssコーディングを意識したデザインに！

これで「＃デザイナーあるある」つぶやきも、他人事のように笑える日も近いはず。是非おためしあれー。

線幅「1」では細すぎて「2」だと太すぎる・・・、そんなお悩みを抱えた方はいらっしゃいませんか？塗りがあるならまだしも*1、線だけで構成したい場合にはちょっと困りものですよね。

まずはサンプルを。ちょうど線幅「1」と「2」の中間の線をひきたい、というのが今回のお題目です。

線幅「１」では細すぎて「２」だと太すぎる・・・

そしてどん！こちらがその完成品。どうでしょう、中間といえば中間の太さじゃないでしょうか。

中間といえば中間な仕上がり。

さて続いてやり方です。まず線幅を「1」にし、フィルターのPhotoshopライブエフェクト「ストローク」を選択。サイズを「1」、位置を「縦書きの中央揃え」にします。

ポイントは「ストローク中央揃え」と、位置「縦書きの中央揃え」。

ただしこの方法ではピクセルが整数値ではなくなる為、線がにじむのはご愛嬌。。。
線のにじみに目をつぶるか、線の太さに目をつぶるか、という葛藤の末に前者を選んだ貴方様にだけおすすめできるチップスとなっております。

ここで気になるのが、Photoshopでは位置は「中央」なのに、Fireworksでは「縦書きの中央揃え」となっている点。・・・縦書きって何!?どこから来たん?!

とこんな感じの歯切れの悪い記事ですが、にじみの気になりにくいイラストなどでわりと活躍してくれてます。

*1 対象物に塗りのある場合は、ストロークを中央に整列＆塗りをストロークに重ねる、でキレイにできますよ。この場合、前者の方法よりにじみは少ないです。（あぁぁ、ますます需要なさそうな締め方・・・）

塗りがあるなら、この方法の方がキレイです・・・

Fwだけでここまでできちゃうよ！完成品

紙がビリビリに破れた感じをつくろう。

これ、Photoshopでのチュートリアルは数あれど、実はFireworksだけでも作ることができるんです。しかもお絵かき感覚で簡単に、エッジの質感もなかなか良い具合に仕上げる事ができます。
具体的な作り方は以下から。

1. 画像を用意します。
   

   元画像

   
   　
   　
2. 適当に切り取ります。隠れる部分なんでざっくりで大丈夫。ここではマスクを使いました。
   

   ここは神経質にならなくて大丈夫

   
   　
   　
3. 新規ビットマップ画像を追加したら、ブラシツール「油彩」＜「ブリストル」に設定。後で色を変えるので、輪郭が分かりやすい色にしておきます。こんな感じでお絵かきを楽しむように、輪郭を塗り塗りしてください。
   

   お絵かき感覚で思うままにぬりぬりして下さい

   
   　
   　
4. 塗り上がったところ。輪郭だけの一枚のビットマップになっているはずです。
   

   塗り上がりました。

   
   　
   　
5. このビットマップに対して「フィルター」＜「カラーを調整」＜「色相・彩度」のパラメータをこんな感じに変更。
   

   赤色だったのを「色相・彩度」をつかって自然な色に変更

   
   　
   　
6. さらにシャドウを追加すればあら簡単。ビリビリレイヤーの完成です。
   

   最後にドロップシャドウ

   
   　
   　

【応用】ブラシストロークやフィルターの微調整や追加で冒頭でも紹介したサンプル位の質感まで高めることができますよ。

ブラシストロークやフィルターを微調整するとこんな感じ

このＦｗスタイルライブラリを用意しました。こちらからダウンロードどぞ。→[ biribiri_paper.zip ]
※シャドウ部分はライブラリに含まれてませんが、サンプルではシャドウ用の別レイヤーを作ってゆがみなどの変形をさせてます。

Photoshopチュートリアルでは、投げ縄ツールを使ってエッジを作る方法が多いようなんですが、これがなかなか自然な輪郭をなぞれず、四苦八苦しちゃうんですよね。
今回紹介したFwの方法だと微妙なエッジもブラシで書くだけなので、「もうちょいココは下地の白を出したい」「ココあたりで破くことに迷いが生じて線が揺れる」等お絵かき感覚で自分の思うままにできちゃいますよ。

このサンプルでは30fpsで30秒かけてちょうど30px移動しています。

ただトゥイーンさせているだけという素材そのものを活かした作りになっております。

・・・なんですが1pxごとにしか進まないような感じで、カクついた動きになってしまっているのがお分かりになりますでしょうか。 これを解消するためにはこの為だけにAS仕込むか、別途FLV化させるか、と悩んでいたのですが、とっても簡単な方法で解決することができました。

みなさんもよくご存知の「スムージング」。

ライブラリ上のビットマップを右クリック→「プロパティ」にあるコレ！

これをポチっとチェックをいれるだけでほらこの通り。

画像のジャギー解消だけに有効なのかと思ったら、こんな使い方もあったんですね。 よく使ってた機能なだけにびっくりしました。

いつもあなたに寄り添います―― utweb

2枚1セットタイプです

UTWEB、2010年度の新作名刺のお知らせです。
今回は湿布型名刺、正しくは湿布型というより湿布そのものです。

他人様の肩をお借りして、勝手に広告媒体にしてしまうという画期的なアイテム。
そして、激務な方の多いこの業界、少しでもその大事な身体を労ってほしい―、utwebからのささやかで押しつけがましい想いが込められています。

※一部の方から、鞄にしまっておくと鞄全体が湿布臭くなる、これから手渡す予定の資料が全部湿布臭くなった、という有難いご意見をいただき、この度微香性に生まれ変わりました。

ところで、この湿布型○○。
デザインバーコードのように、この先未来があるんではないかと思っています。

例えば、

金属系のテクスチャを印刷

貼ればたちまちサイボーグ。

ざっくりと縫った、つぎはぎ風湿布

貼ればたちまち昔ながらの貧乏人。
などなど夢は膨らむばかり。
プロダクト関係でのご相談もUTWEBはお待ちしております。

結果、審査員の方々のご配慮もあって、「ロフトワーク賞」を受賞！！応援してくださった皆様、本当にありがとうございます！
今回は合わせて制作ウラ話みたいな事を書いておこうと思います。ド素人まるわかりの要領の悪さも露見してしまってますが、自分の覚え書きが誰かの何かのヒントになれば幸いです。

■絵コンテについて

まずは「社長の五つ鹿」「中学生の牛鬼」「店長の相撲甚句」の制作当初の絵コンテを一部公開。

完成ＣＭと見比べるとだいぶ端折ったカットが入っています

絵コンテのイメージ通りスムーズに作れたのは牛鬼。

自分なりに掴んだ事を少しまとめてみます。とはいえ、映像・ＣＭの勉強はお世辞にもしているとは言えないため、間違いがある場合はご指摘いただけると嬉しいです。

▼「尺」の感覚

本来であれば、尺調整するためにもきちんと絵コンテを描くものだと思うんですが「難しそうなことは後回し」。これがいけなかった・・・。
絵コンテに沿って撮影終了！いざ編集しだすと思ってたよりもどんどん尺を消耗します。絵コンテ上では1コマで済んでいる部分でも、実際には前後や途中につなぎの演技が必要なんですね。漫画感覚で絵コンテを描くと、尺の感覚が大きくずれてしまいます。
絵コンテを描く時は、自分で声を実際に出して台詞やナレーションを当てて演技してみるべきだった・・・。
※余談ですが、私は極度の恥ずかしがり屋で、どんなに酔っぱらってても、猪木のモノマネとか絶対できないんですよね。だれもが一度は通るモノマネ道なのに。
そんな性格なので、社内ミーティングの際、例え旦那といえど他人様の前で別人になりきって演技なんてできるか！と思ってたんですが、どうせ撮影のときに見ず知らずの人達に道化師のごとく、色々なパターンで実際演技しながら指示しなくっちゃいけない時が来ます。
もうそれなら絵コンテの段階で自分で思いつく限りの演技を仮に撮ってみればよかったです。

脱線しましたが、本来なら尺が足りなくて撃沈状態だったのを救ったのは、よくも悪くも次の方法。カメラワークにも編集技量にも自信がなかったので、とにかくイメージを膨らませて膨らませて、絵コンテの他にも考えつく限りのカットを別途描き出して撮影。スチールも同時に抑えるなど、とにかく素材を集めておいたのです。編集段階で思い通りにならなかった部分に、それらを絆創膏のような感じで当てて当てて、なんとかなった感じです。

▼「気を付け！」と「休め」

今回三本立てで展開していますが、三本とも視聴者に「ここは流し見でＯＫ（＝休め）」というシーンと「はい！ここから注目です（＝気を付け！）」というシーンで構成しました。この二面を意識すると、編集もしやすいです。「休め」のシーンでは思い切ってカットしてしまう判断もしやすくなるからです。

例えば「社長の五つ鹿」の社長が怒って社員を追い払う場面。ここは「休め」のシーンに該当します。絵コンテ段階では台詞が入っていますが、実際撮影・編集すると予想以上に尺を圧迫する上に、視聴者に意図以上の情報を与えて「？」と思わせてしまう可能性がありました。
このシーンでは「イライラしている社長」というキャラクターを刷り込む以上の効果は必要ないので、結局役者さんの台詞はカットし、怒っているだけと分かる最低限の字幕に変えると共に、テンポよく倍速に処理することにしました。

反面、「気を付け！」のシーンでは、
・反復動作
・非日常的なシーン
・顔のドアップ
・サウンド
などを意識的に挟むことで興味を引くよう心がけています。

■小道具について

▼鹿の壁掛け

鹿のはくせい

「社長の五つ鹿」篇で使用した、鹿の壁掛け。
意外と市販されていないんです。しかも本物の剥製だと買っても後で困っちゃう･･･。 撮影用のこういった小道具や家具をレンタルできる、専門店を発見。いやーこんな所があったなんて。

• 撮影・演出用小道具の総合レンタル サンガレン

ボケーッと商品を眺めているだけでも楽しいです。

▼体操服＆赤白帽

牛鬼つき赤白帽

宇都宮ウエブ制作中学校

「中学生の牛鬼」篇にて3人の中学生男子に着用してもらいました。映像ではなかなか確認できませんが、胸には校章「宇都宮ウエブ制作中学校」が。
こちらはアイロンプリントできるインクジェット用紙を購入して。微妙に起毛加工もしてあります。

牛鬼付の赤白帽子は、中学校レベルのお裁縫力で２～３日ほどかけて完成。ひさびさにフェルトとか刺繍糸とか触りました。体操服には付きものの白ハイソックスの手配も忘れずに。

■キャストについて（敬称略）

・「社長の五つ鹿」奥田　いちろう
・「中学生の牛鬼」濵邊　俊輔・藤川　翔・吉見　陸

アイランドプロモーション所属のタレントさん達。
私らのような自主制作という名の胡散臭く、かつ低予算の場合でも相手にしてもらえるのか不安だった中、すぐ御電話で連絡してきてくださった上に、終始こちらの事情にも柔軟かつ真摯にご対応いただけました。

• 株式会社アイランド プロモーション

■ロケーションについて

「社長の五つ鹿」に使用する、社長室を借りようと色々な所に問い合わせてみたのですが、なかなか条件が折りあわず。
では社長室に見えるような貸し会議室を借りることに。ご協力いただいたのは、レンタルオフィス　CUBEさん。さまざまな用途にあわせた会議室が用意されており、立地ヨシ、眺めヨシ、設備キレイ、スタッフ親切、ととても素敵な所でした。普段のセミナーなどでも使える、おすすめのCUBEさんです。

• レンタルオフィス　CUBE

■「店長の相撲甚句」について

ロケーション：「旬の肴と美味しいお酒 中々屋」
店長：山本氏＆バイト君：ゆうちゃん
御堂筋線あびこ駅付近にある「旬の肴と美味しいお酒 中々屋」にロケーション＆キャストと全面ご協力いただきました！普段からutwebの第二会議室・接待会場としても大活躍して下さっている中々屋。創作アイデアはだいたい中々屋で生まれます。美味しいお酒とお料理はもちろん、店長とスタッフの方々との心意気すべてが居心地良くついつい長居してしまう良店。
ＣＭ中では尺の関係上、泣く泣く音声のみの採用になってしまいましたが、鮮やかな包丁さばきを惜しげもなく披露。小気味よいリズムできゅうりの輪切りをしてもらったり、まるまる一匹のイトヨリをあれよあれよという間に捌いて、迫力の兜割りまで見せてくれました。この辺りのシーンはいつか別バージョンで使用したいです。
また当初、塩まきのシーンはCGで処理しようと思っていたのですが、なんと店長みずからバイト君に本物の塩をぶち撒いてくれ、CGなんかで処理するよりずっと面白い絵が撮れました。おそらく普段お皿の端にちょこんと盛られてる、さらさらの高級なエエ塩なのに・・・。

• 旬の肴と美味しいお酒　中々屋

■実際の秋祭りの写真

全面ご協力いただいた「おもっさまミカメジャーナル」のメンバーの皆さん。「おもっさまミカメジャーナル」とは、西予市三瓶町のディープでニッチな見所や情報を日夜配信するファンサイトです。急なお願いにも関わらず、各所に了承を得るため駆け回ってくれました！！

• おもっさまミカメジャーナル

------

という感じで、多くの人に支えられてこの作品はできあがりました。その甲斐あって、とても嬉しい結果まで生むことができ、ほんとに今回は良い経験ができました。
いやーほんとコンテストって面白い！

あなたの地元の魅力をCMで全国に広めよう！
日本の各地の「地元」情報が集まるサイト 「ZAQ」が、 日本に1700以上ある市町村をより活性化していくために、 日本中のクリエイターから、各地のCMを募集します。
―地元CMコンテスト LOVE LOCAL　開催概要より

愛媛県西予市三瓶町「三瓶町の秋祭り」
[エントリーページはこちら]http://lovelocal.jp/entries/104

映像に関して知識が乏しく、ロケーション＆タレントの手配なども含め、カンだけを頼りに手探り状態だったのですが、親身になって協力してくれる人々に恵まれ、その人達に後押しされる形で頭に描いていた以上の出来までたどり着くことができました！

絵コンテの紹介や制作秘話など、また後日長々書こうと思います。

-----

宇都宮（徳田）頼子：監督/撮影/編集
宇都宮正宗：総合責任者

■ご協力いただいた方々と場所(敬称略/順不同)

• 旬の肴と美味しいお酒　中々屋
• （株）アイランドプロモーション
• レンタルオフィス　CUBE
• 撮影・演出用小道具の総合レンタル サンガレン

他にも面白い作品や綺麗な作品など、力作揃いになってます！！　是非ご覧ください。
地元CMコンテスト　LOVE LOCAL

寒中お見舞い申し上げます-2010年-

2010年もはや2月にさしかかろうとしているこの時期に、今更の年賀状a.k.a.寒中見舞いが刷り上がりました！
もともと年賀状として考えていたため、「天地人」「大河ドラマ」「寅（タイガー）」など、ピンと来にくい上に乗り遅れ感漂う題材ばかりになってしまいました・・・。

ちょいちょい暴走してしまうウザめな宇都宮ウエブ制作所をどうか今年もよろしくお願いいたします。

宇都宮ウエブ制作所は「マッド・サイエンティスト」でした

ブログパーツ内のフォームに名前を入力するだけで、あなたの秘められた欲望が明らかになっちゃうよ！！というブログパーツを制作しました。

この映画には超豪華俳優陣（ヒース・レジャー、ジョニー・デップ、ジュード・ロウ、コリン・ファレル）が出演しており、一枚だけの写真をつかって、様々な表情のパターンを作る必要がありました。
はじめは口からアゴにかけて切り取って、腹話術人形的に動かそうかと思っていたのですが、ハリウッド俳優さんということもあってもう少し自然なイメージで表情をつけることに。

ちょっと分かりにくいですが、口周り・眉頭まわりの動きを、以前ご紹介したＡｆｔｅｒＥｆｆｅｃｔｓの「パペットツール」を使用して、基本のプラス顔・マイナス顔のべースを制作、眉の動きやマンガ的装飾パーツはFlash上で乗せています。
「照れる」「幸せ」「泣く」「怒る」「ショック」「誇らしげ」「焦り」とバリエーション豊かに結果を教えてくれますんで、是非いろんな名前で楽しんでみて下さい！

泣く泣く強制終了コマンドを押しながら、
今までの作業よ永遠にさらば…！FW子の性格は分かってたはず…！と自分を咎める前に、最後の頼みの綱。うまく行けば万々歳のファイル救済方法です。

レイヤーの目玉マークをオフにする。
それだけで保存できる場合があります。

たったこれだけで、あっさり保存できたりします。

何度も消えては現れる不死身のエラーダイアログ現象や、メモリ不足と伝えるのがやっとの全面グレー画面現象でも、レイヤーが操作できるまでは我慢！みたいな感じで、あとちょっと踏ん張ってみて下さい。
描画に負担かかりそうだなあと思われるレイヤーをフォルダごとオフにするのがコツです。