2010年6月12日に開催された「CSS Nite in Omotesando. Vol.2」にてタイトルの内容でお話させていただきました。Fireworksのパワーユーザーさんが5人も集まっていろいろな角度から攻めていました。Photoshop vs Fireworks 、 裏設定、便利な機能拡張、FireworkでのデザインTipsなどなど。これから始めようとしているに人にもヘビーユーザーにも楽しめる、稀有な内容になったのではないかな？と思います。

スライドの公開はもうちょっとお待ちくださいませませ。

Fireworksの立ち位置はPhotoshopと同じところじゃない! と熱弁しています。ざっくりと話すと「デザインワークはPhotoshopでいいんだ! その後の事はFireworksにまかせろー。」って事ですね。

当日の動画はこちら。なんと全部見れちゃいます。

まめこは27分くらいから20分ほどお話しています。Fireworks、ちょっと使ってみたくなりません？

動画で分からない事などあったらこのエントリーにコメントしちゃってください! 出来る限りフォローしますね。

Adobe Galleryは2ヶ月間

Adobe CS5のあらゆるソフトが好き勝手いじれます。すごい楽しい。Encore？ってソフトでしょうかDVDのタイトルメニューとか作れるんですね。楽しかった! もっといじりたいです。

写真について

古屋敦士さんが撮ってくださいました。会場、プレゼン中はかなり暗かったのに写真がとっても明るいです! プロってすごいですね。ほわわわわ。

※動画の公開は一旦ストップさせていただきますです。

「Photoshop , Fireworks から直接コピペができるよ!」という機能

少し乱暴ですが。psdファイルは直接ドリに入れるとそれ以降自動更新機能が使えるようになります。

htmlモックの時

画面遷移や細かい動作を確認したい時はhtmlでモックを作り、画面遷移を見ておくのがベストです。その際にいちいち書き出しすることなくコピペでpsdから貼り付けられるのは時間の短縮に繋ります。

運用時

デザインfix後にpsdを書き出しパーツごとに切り抜いておく事が条件となりますが、それが済むと細切れpsd上でデザインの修正を行うだけでドリ側で書き出しを行うことができます。ちょいと便利。

分業する時

fireworksでhtmlとcssを書き出しておけば、マークアップエンジニアがfireworksを起動したり、もう一度文字を打ち直さなくて済みます。元から原稿が用意されている場合でも微妙なアップデートでカンプにのみ最新アップデートがかかっている状況は多いので、これは地味に便利です。

イベントの感想

すごい人ですよね!

通常のセッションと大喜利と二つの形で行われましたがとても面白かったです。内容はもちろんですが、お話の仕方やプレゼンの見せ方、デモのスムーズさ、そういったところを特に目を向けて観察してしまいました。話すまではお腹が痛くて仕方ないですが、終ってみるととても良い経験ができたと思います。

洋服について

素早いのがずま。その隣りがまめこです。

目立ちたかったのでギンギンギラギラでさりげなく行ってみました。高円寺ポケモンズ(ネコゼ、ふっちー、ずまの仲良しご近所たち)はもう慣れてしまってスルー。さらに会場では千貫りこさんがとってもステキな着物を召していて、その魅力の前にいっきにふっとんでしまいました。

発表の前に鷹野さんがイジってくれたので、ここぞとばかりにポージングしたのですが、みなさん笑ってませんでした。はうあうあうあ。笑っていんですよ？(´･ω･｀)

Fireworksは4の時から使っていますが、おバカなところを残しつつもさらにとってもステキになっていて、良さをもっと知ってもらいたいと思うアプリのNo.1です。まわりの人に聞くとそもそも使ってない人の方が多く、「こんな事ができるんですよー」と話しても「今度使ってみるー」などと流されてばかりで釈然としません。なんでだー!

こんな時に便利!

たくさんの見出し、ボタン、リンクを付与することもできるのでカンタンに画面遷移も見せることができます。ヘッダー、フッター、メインイメージをPhotoshopで制作した後、Fireworksで統合したものを開き最背面にロックして配置した上で本文や操作画面をゴリゴリ作るイメージです。

例えばいくつもある見出しのデザインが変更になった時

Flashのようにシンボル機能があるので元のデザインを変更すれば一瞬で全ページに反映されたりします。これだけでもかなり使いたくなりませんか？

シンボル編集中の画面

リンク文字などの設定も楽チン

MS Gothic / 14pt / #006699 / 下線

みたいなテキストのスタイルをPhotoshopで実現するには
1.毎回その設定を適用
2.既に設定済みのテキストを複製して入力
などの方法がありますね。

でも、どちらも数ステップ必要になります。

で・す・が

Fireworksならテキストスタイルも保存しておけるのでワンクリックです!
さらに良く使うスタイルは書き出しておくこともできるので、ぬかみそのように良く使うスタイルを登録しておけばどんどん便利になるっていう寸法です! きゃー!

まだまだアリますよ!

という事で、Fireworksの良さを語るためにCSS Nite in Omotesando, Vol.2にてお話させていただく事にしました! お誘いくださった鷹野さま、ありがとうございます。

賢く使い分けよう！Webのレイアウトには、やっぱりFireworks

というような内容で話します。

Webデザインに役立つFireworksの嬉しい機能紹介
追記：セッション名が変更になりました。

Photoshopオンリストの皆さんを浮気させてしまおうという意気込みで挑みますよー! 前述で伸べた機能+いくつかを分かりやすく解説しますのでぜひぜひ見てやってくださいませ。初心者でもOK!

もちろんFireworksで出来ないこと、苦手な事もありますので、「どういう風に使い分けるとラクなのか」という事をケースバイまめことして提案してみたり、機能の紹介をしたいと思います。

6月12日、ぜひぜひよろしくです!

• イベント名：Dreamweaver Town Meeting in Tokyo
• 日時：2010年5月29日土　15:10-19:40（4.5H）
• 会場：ベルサール新宿
・主催：CSS Nite実行委員会
・参加費：4,000円（4月末まで3,500円）
• 出演：神森 勉、伊原 力也（ビジネス・アーキテクツ）、茂木葉子（Aqua Design Studio）、 森 和恵（r360studio）、千貫りこ、たにぐちまこと（H2O Space.）、石嶋 未来（ウープスデザイン）、岡部 和昌、國分 亨（dreamseeker）、丸山 章、、宮内 純人（マックグラフィックアーツ）、湯口 りさ（RsStudio）、渕上 伸吾（カヤック）、山田 恵理子（Webridge Kagawa）、鷹野 雅弘（スイッチ）
• 告知ページ：http://cssnite.jp/dtm/tokyo/
• twitterタグ：#dwtokyo
・備考：同日・同会場で開催する「CSS Niteビギナーズ：Dreamweaver編」とのセット割あり

Dreamweaverっ子の祭典に参加できるなんてありがたいです! お祭りですね! わーい。
私は大喜利枠で7分間のショートセッションに参加します。たくさん登壇される方がいるので、セッション内容だけでなく短い時間の中でどう伝えるか、何を伝えるかを見るだけでもおもしろそうですね。わくわく。

4月いっぱいまでに申し込むと早割としてお安くなるのでチャンスですよ!

アンケートにご協力をー

公私ともに仲良くさせていただいてる#fc0さんもCss Niteビギナーズ : Dreamweaver編に出演されます。
アンケートを公開されているのでぜひぜひ答えたら、セッション内で取り上げてもらえるかもしれませんよー。

Dreamweaverについて教えてください

DreamweaverでPhotoshop & Fireworksとさらに連携する!

という事をお話します。

事前に書き出しておかなくても、PhotoshopやFireworksからコピー&ペーストでDreamweaverに画像を貼り付けることができるようになっています（ダイアログボックスでGIF/JPEG/PNGなどの形式を選択したり、圧縮率などを調整）。さらに、元データのPSD データ/Fireworks PNGに変更が生じたら、Dreamweaver側で自動的に更新してくれます。FireworksからはCSSの書き出しもできます。

これらをうまく使って作業の効率化をはかりましょう!

てな感じです。

まめこのプロフィール

高円寺ポケモンズとして仲良しなネコゼさんとずまも出るのでさらに嬉しいですね。仲良しさんと同じ場でセッションするなんて新鮮です。

「Dreamweaver Town Meeting in Tokyo」に出演します…！ | necoze LOG2 [ネコゼログログ]
kzms2 – html,css,javascript

followup – お仕事がもらえるイラストレーターのちょいテク勉強会

イラストレーターのアサイちゃんが主催した勉強会にてセッションさせていただきました。
私の発表した内容は以下になります。

じゃあ自分ができてるのかと言われればかなりまだまだな感じでございますが…。社員時代には経験できなかった受注・発注の流れやその時に勉強になった事などをまとめています。

当日まで通しのリハーサルが出来ず、用意した台本もネットワークがうまくいかなくて見られないという中、アドリブで話してみましたが、体感では何度もリハした時よりも良く喋れたのかな、なんて思ってます。えへへ。

イラストレータさん向けとなっていますが、副業やフリーランスしようと思っている方にも通じるような事です。以下にイベントで話したことの一部をピックアップ+補足しています。

デザイナーが嬉しくなるイラストレーターとは

1.データが編集しやすい

線画を統合して着色するケースなどが多いが、オブジェクトごとに独立してあるとアイコンや見出しの装飾にも使用できるためデザイナーとしては大助かり。

※こちらはむしろアナログで書いてる方が多かったのでビックリでした。いや、でもそうですよね…。懇親会ではここらを良く質問されました。カラー原稿などをアナログで貰った場合、スキャニングにかなり注意をはらう事になるので、できればそういっためんどうは避けたいですね〜なんて話しました。Adobe Illustrator 自体を使わない方もいらしたので、もっと目線を広くもたないといけないな。と感じたり。

2.テイストがしっかりしている

デザインをひっぱってくれる程個性的なイラストはとても助かる。シュールだったりキモカワいかったりするものとか好きです。デザイナーとしても発想が広がります。

3.自分から連絡してくれる

忙しくて詳細があまり伝えられなくても、不明点や質問を自分からどんどん投げてくれると発注側は答えるだけで詰まっていくので嬉しい。

自分も出来てないので気をつけたいと思うところです…。はい。

イラストレーターさんに頼む理由

1.クオリティが高い

2.スピード

3.コストパフォーマンスが良い

自分も絵はかけるが、本業に頼むほうがクオリティが高い。タッチも限定されない。制作フローも出来上がっているので自分で書き起すよりもスピードが早い。よって工数で計算するとイラストレーターさんに頼んでしまって、自分はガシガシ他の仕事している方が回転率が高く利率も良い。

これらの強みを上手く伝えるためにポートフォリオを作ろう

しっかりしたものがあると、クライアントに経費として計上する場合説得しやすいです。最近読んだ本には自分がこれからやりたい仕事の呼び水となるような実績も掲載していく事が重要とありました。

自分の知らないトコロで独り歩きしても大丈夫なように、補足情報などもしっかり盛り込んで作りましょー。

クリエイティブ業界に就職するためのポートフォリオの教科書

posted with amazlet at 10.03.25

ワークスコーポレーション別冊書籍編集部
ワークスコーポレーション
売り上げランキング: 6707

おすすめ度の平均:

最低限のことだったらいいのですが・・・
参考になりました
ポートフォリオ

Amazon.co.jp で詳細を見る

イラストレーターさんの価格って安いこともある

デザイナーでもあるけれどもイラストレーターさんの単価はもっと安いものがありました。アサイちゃんからの話を聞いてもビックリ。価格を見ると時給計算でも赤がでるくらい安い相場になっています。

原因は買い切りである事、イラストレーターがたくさんいることなどありますが、やりかた次第で価格を上げることができるのでは？と提案してみました。

提案力はお金になるよ!

首から上で勝負。イラストだけでなくアイデアを売り込もう。

イラストだけ勝負するのではなく、クライアントが困っているところをどんどん巻き取りましょう。打ち合わせとかスケジューリングも主導で進めてくれたり、必要な資料を用意しておいてくれたり、提案をどんどんしてくれたり。担当者のかわりにディレクションしちゃうぐらいの気持ちで進めてくれると助かります。便利さが伝わればリピート率も上がるのでは？

表情などパーツ化して、組合せで対応し量産

といった事も可能ですね。

なのでコナンになる事も重要

クライアントと直接話ができず、間に人が入ることが多い。なので人伝に聞いた話からでもクライアントの本音を予測できる。これらはイラストの修正量、フィードバックまでにかかった時間、デザイナーの文章からも推測できますね。

お仕事する前に知っておいて欲しいコト

NDAって？

NDA案件は秘密保持契約を変わす案件の事です。基本、そういったものは実績に掲載しちゃいけないのかな？と思っていましたが契約書によってマチマチでした。あとは良く分からなかったりもするので担当者さんに聞いてます。ボツ案も含まれるのか確認しておくとさらに良いよ!

ポートフォリオは鮮度も重要なので、聞きずらいな…と放っておかずにちゃんと質問しましょう。

お仕事の流れ

1.価格の提示(見積書を要求されたら提出)
2.正式発注
3.納品
4.請求書発行

ざっくりしてます。

なぜが提示した金額より低い金額が入金された

原因は源泉徴収。

個人でお仕事する際には原則必ず発生します。お国さまが個人の収入を見て毎回計上するのを受付るのがめんどうなため、先に10%を固定で徴収しておくのです。経費などを度外視して聴取されるため、年末にしっかり経費計算などを行い多く収めた分を取り替えします。これが確定申告ですね。

対企業のお仕事であれば必ず発生しますので、10%引かれることを考慮した上で金額を決定しましょう。年末に支払い調書というのを企業さんから貰って確定申告に使います。もらえない場合は必ず請求すること。

名刺に書いたイラストが看板などにも利用された

二次利用について

クライアントさんによっては納品されたものは自由に使ってよいと知らずに思っているケースもあります。仕事が発生した時点で契約書を交わすのが望ましいですが、なかなかできないこともあります。事前に著作権利の話をしておくと良いでしょう。

「名刺だけに使ってくださいね。他の使う場合は発生します。」と言えればいいのですが、難しいこともあるので、好きに使ってくれてかまわない前提で価格を提出するのがシンプルかもしれません。

まとめ

と、こんな感じのセッションでした。もちろん自分の実体験や提案なので「普通はそんな事しないよ」などもあるかもしれません。むしろ私にも教えてやってください><

index – お仕事がもらえるイラストレーターのちょいテク勉強会

デザイン勉強会のスタッフとしてもお手伝いしてくれた皮肉屋美人イラストレーター「アサイ チエ」ちゃんがイラストレーターの卵さんに向けて勉強会開催するようです!

イベント概要

日　程 2010年3月20日（土）
時　間 未定
会　場 未定（東京23区内で探し中です）
参加費 未定（会場が決まり次第お知らせします）
定　員 20人

アサイちゃんのイラストはかわいいっす。仕事でも何度かお世話になってるのですよー。

「ブログから仕事につなげたい!でもどうしていいのか分からない…。」

という方もいらっしゃるのではないでしょうか。アメブロではイラストレーターさんブログも盛んらしいですしね。
そういった人々に向けて以下のような内容で行われます。

基本編: ブログ以外に発展する自分ブランディングの方法
応用編: 仕事へ繋げる方法を実体験をもとに解説
発展編: デザイナー（発注側）からみた「重宝するイラストレーター」「知っておいて欲しい知識」等々

どれも卵さんには気になる内容なのではないでしょうか。

フリーランスの人にも共通する内容が多そう

「イラストレーターさん向け」と銘打たれていますが、これから個人で仕事をしていきたいと思っている人にも通じるなーと思っております。セッション内容もちゃんと決めていないので、知りたい事があれば今のうちにコメントとかで教えてくださいw

ふるってご参加くださいませー!

前回のPAGE2010のセッションのお話をくださったInDesignの勉強部屋のYUJIさんが「鷹野さんから教わった」と、様々なTIPSを教えてくださいました。Macに限った話になってしまいますが、ぜひ活用してみてください。

プレゼンの文字は太く! 太く!

ヒラギノ角ゴのw3とw6を使用してプレゼン資料を作成していたのですが、遠くの席の方の視認性を考えるともっと太い書体を使うことがベストですね。

喋りに抑揚を!

セッションのテーマは何か。これだけは覚えていってもらいたい事をちゃんと伝えるためには声にも工夫が必要。すごく重要な時は少しタメを作り、「これだけは! …(タメ) 覚えていってくださいね」と抑揚をつけることが良いそうです。

これってあたり前に感じられることですけど、実際自分で話している様子を音声で聞いてみると意外に出来てないんですよね。

デモせずとも操作手順を分かりやすく!

powerpointでもkeynoteでもアニメーション設定ができますね。

そうする事によってデモ無しでも分かりやすいですね。後日の公開においても抜け落ちる部分もなく資料だけでも理解度が高まります。

画面ズームを使いこなせ!

奥まった席の場合目が悪いと操作パネルの文字が見えなくて困ることも多々あると思います。デモをする時に画面の拡大縮小をスムーズに行うと参加してくださった方の理解度も深まりますよね。

ユニバーサルアクセスでカンタンショートカット

システム環境設定→ユニバーサルアクセスをクリックします。

こちらを見てみるとオプション+コマンド+^で拡大できることが分かります。縮小の場合はオプション+コマンド+-(マイナス)ですね。

オプションでさらに詳細設定

さらに詳細設定もできるので「オプション」を押して拡大を自分の良い感じのところへ調整しておきましょう。

自分はこれをずっと知らなくてマウスホイールとコマンドキーでしかできないのだと思ってました。目から鱗!さらなるポイントはセッション時には片手だけで出来るように押しやすいショートカットへ変更することです。

素早いショートカット操作でさらにスムーズに

システム環境設定→キーボートとマウス→キーボードショートカットへ行くとOSに設定されているショートカット全てカスタマイズする事ができます。こちらで片手で押せるようなショートカット。例えばオプション+コマンド+1にしておくなどするとベスト! ハンズマイクを持ちながらのセッションやデモ時も片手はマウスに置いておけるのでももたつきません。ビックリ!

ポインタをデカくしてみる!

マウスポインタを大きくするのも一つの手です。より操作箇所が分かりやすいですし、レーザーポインタを併用しなくても画面上のマウスで該当箇所を示しやすくなります。

こんな事も出来たんですねー。まだまだ底が知れないです。

ポインタにスポットを挙てて該当箇所を分かりやすく!

Mousposeでもっと分かりやすくなります。有償ソフトになりますがこれもすごく良さそう!

このように周りが暗くなり、該当個所がスポットライトを当てたように明るくなります。設定画面でショートカットや明るさなど細かい設定ができるのでいろいろいじってみると良いです。

今後のセッションはそういうところも意識してやれたらな、と思います。がんばろーがんばろー!

2月頭に毎年行われるJAGDA主催の印刷、メディア業界のコンベンション PAGE。今年行われたPAGE2010にて無料セッションでお話させていただきました。

DTPプロフェッショナルにおくる効率的web制作フローとは

私がお話したのは「DTPプロフェッショナルにおくる効率的web制作フローとは」という内容です。マークアップなどはまず置いておいて、現場のデザイナーさん向けにPhotoshopとDreamweaverの親和性、さらにFirewokrsも使うことでもっと便利にスピーディーになるのですよー。という機能の紹介をしております。

プレゼン資料

オフトーク

事前にセッション内容を検討していた時の定食屋でのミーティングです。まめこの悩みにふっちーとすんいちさんが夕飯食べながら答えてくれています。

※音声のみ

当日はデモなどをメインにしていたので、ここに出た話のほんの一部でしたね。デザイン勉強会でやってもおもしろいかもしれません。効率化の話は楽しい!

こぼれ話

前日まで繰り返したリハーサルでデモも入れて40分ピッタリといい感じにできて満足していたら、当日に持ち時間を間違えていた事が発覚して真っ青になりました。電車の中でスライドをいじったりしたのなんて初めてです。ガッデム。今回セッションのお話をくださった森さんに「ゆっくり話すことがコツですよ」と教わったので意識してみたら、なんとか時間ぴったりに話しをすることができて一安心。思い込みって怖いですね。おっちょこちょこいにも程がある!

デジタルワークフロー・ソリューションZONE – JAGAT

DTPに関してはむしろ教わりたいくらい皆さん熟知されていると思うので、web制作的なお話をしようと思います。PAGE 2010のセッション自体は有料なのですが、このスペースで行なわれるセッションは無料ですのでひやかしがてら聞いてみてやってくださいませ。

DTPとweb制作では使用するソフトとそのポジションが異なるのでそこら辺のお話をしたりwebならではの作業を少しでも楽にできるソフトの機能やTIPSなどをお届けする予定です。他の皆さんがちょう豪華なので緊張。みんな応援してください!

デザイン勉強会の打ち上げにて、田口さんの「HolyGrailとkyousukeさんに会いたい」を発端に飲み会が開催され、その飲み会でなんと森田さんが勉強会でのスピーカーを了承してくださいました!

「チームマネジメントとはなんぞや!」とか「将来の自分を見据えるんや!」という事で大盛り上がり! 経営に興味ある人はスゴく面白いですし、現場の方もモチベーションが上がって明日も頑張る気になりました。うーん、おもしろい! 森田さんがBAで培ってきたチームを強くする方法はもちろん、人材の育成マネジメントの話もありこれからのキャリアパスや自分の作業が会社にどう貢献しているのか見えなくて迷ってしまっている人にはググっと、グググっと来る内容です。得した気分。

今回の勉強会ではそういった部分、キャリアをデザインする的な？ところをフォーカスしてみたいと思います。
10年後の自分をどうしてやろうか。そんな事を真剣に考えられるイベントにできたら最高です!

概要はこちら。

タイトルは「デザイン勉強会3rd 〜10年後の自分をデザインしよう!〜」

まだもやもやしておりますが、こんな感じにしようと考えてます。だいたいは前回のデザイン勉強会2ndと同じ流れを汲みます。

なんと2部制の前後半とも森田さんが独占です。ありがたい!
ぜひぜひMLにもご参加くださいませませ。新着情報をメールしていきますー。
※参加申し込み受付は後日別途お知らせいたします。

デザイン勉強会3rdに参加

メール:

このグループにアクセス

スピーカー 森田 雄氏

2000年に株式会社ビジネス・アーキテクツの設立に参画し、2005年より取締役。ディレクター、プロジェクトマネジャー、インフォメーションアーキテクトとして多数のプロジェクトに携わる。2009年8月に同社を退職、現在は読書家と称して充電中。HTMLやCSSなどのフロントエンド技術、アクセシビリティ、ユーザビリティのスペシャリスト。CG-ARTS協会委員。広告電通賞審議会選考委員。IA Institute会員。アクセス解析イニシアチブ会員。アックゼロヨン・アワードグランプリおよび内閣総理大臣賞、グッドデザイン賞、Webby Awards、New York Festivalsなど受賞多数。

セッション内容

これから詳細を詰めていくことになると思います。だいたいは以下のような内容。

・プロジェクトマネジメント的なもの
・チームマネジメント的なもの

要は考え方、心の持ちようひとつで、自分を成長させる事ができるよねー! という人生設計やキャリアパスすらもプロジェクトマネジメントとして捉えて話しちゃうぞー。な話になります。
今までのデザイン勉強会とは一味違いますが、まさに言葉の意味が広い「デザイン」にピッタリ。今日からアナタはできるPM!

ぜひぜひご参加くださいませませー。

・1月くらいに開催
・平日 2時間程度
・会場 これからお願いしてみます><
・現場の人間に職能・職域の意識を高めてもらう。キャリアパスの考え方を知ってもらう。
・ターゲット
デザイナー・マークアップエンジニア・プログラマー・ディレクター
現場に通じる全ての人

でお送りしたいと思います。

新着情報などお送りしますのでぜひぜひグーグルグループに登録してみてくださいな。

追記：最新情報のお知らせ

詳細は以下のサイトからご確認いただけます!

デザイン勉強会3rd ～10年後の自分をデザインしよう!～