Share on FacebookTweet about this on TwitterShare on Google+

D2Dで7/23にOBPアカデミアで開きました「D2D WEBグラフィックツール ?デザインワークフローの転換?」のレポートです。
当日は真夏の日照りにもかかわらずキャンセル待ちも出て30名以上の方が参加していただきました。
会場のOBPアカデミアは新しくとてもきれいで、晴れ渡る窓からは大阪城がきれいに見えました。

IMG_0276

※D2Dとは”Dev & Design Draft” 特定の技術やプロダクトに限定せずに、Web制作者が今イチバン気になる情報を知ろうという領域横断型の勉強会シリーズです。
https://d2draft.doorkeeper.jp/

簡単な当日のタイムスケジュールを説明し挨拶が終わったあと、最初に登壇いただいたのは前回も登壇してくれた京都で活躍するフリーランスのウェブデザイナー完山さん。完山さんは、前回の内容を聞いてからSkecthに移行した話。
「Sketchに辿り着いた話と、制作フローにおける各ツールの連携」というタイトルで話をしてくれました。

IMG_0278

以前から気になっていたSketchを前回のワークショップの情報交換から積極的に使い始めて、今までのワークフローからSketchのたどり着いた理由や制作中に使うツールや進める上でのポイントなどを紹介してくれました。SketchのプラグインCRAFTでプロトタイプコンテンツを効率的に作る解説など、実際の画面で操作しながら具体的に紹介してもらいました。

詳しい資料はこちらをご覧ください。
https://dl.dropboxusercontent.com/u/22613663/d2d/d2d_designworkflow_vol2_motoyama.pdf

2人目は大阪で活躍するフリーランスのウェブデザイナー飯田さん。「10年前から変化ナシ?!新技術を使えなくてもなんとかなるさ!基本の制作ワークフロー」

IMG_0281

飯田さんは制作事務所などから依頼を受けてランディングページやデザインからコーディングまでを制作されているフリーランスです。
メインはPhotoshopでスライス書き出しでwindowsベースで仕事をされています。クライアントがあるものですので、ネット上ですべてを公開できないのが残念ですが、デザインのクオリティが高くツールやプラットフォームがデザインクオリティをあげるのではないとよくわかりました。お仕事に配色やマージンの緊張感があり、是非お話を聞きたくてお願いしました。

詳しい資料はこちらをご覧ください。

http://www.pictron.net/d2d/20160723/all.pdf

3人目はクオリティの高い演出のコンテンツを制作している宇都宮ウエブ制作所から宇都宮 頼子さんに登壇いただきました。
人気ブログおなじといっしょの作者でもあるのでスライドにはおなじみにキャラクターがたくさん登場するほっこり楽しいものでした。

写真 2016-07-23 15 12 03

FlashのiOSでの非対応から動きのあるFlashでの演出をウェブで見なくなってから時間がたちますが、AdobeがFlashという名前を捨ててAnimateCCとなりましたが、少し前のFlashのバージョンからCanvas+CreateJSでの書き出すことでプラットフォーム間での違いを意識せずに作れるようになりました。
これを使えばデザイナーでも複雑なcanvasの記述などを一から記述しなくてもページの演出を作成できるという内容を実例を交えて解説してくれました。

また2次元ビットマップをボーンとメッシュでアニメーション化するSpineというツールでイラストの動きを演出、AnimateCCと連携して仕上げる流れを解説していただきました。
動きと言えばパララックスに飽きた人はチャレンジしてみてはどうでしょう?

詳しい資料はこちら

当日のスライド

最後に私こと杉山がフジロックに行けない事でヤケになって発表しました。

写真 2016-07-23 15 51 40

京都でやった第一回の話を聞けなかったという事で大阪で2回目を開催したこともあり、一回目のダイジェストをざっとやって、あとは最近更新された、Skecthの新機能などを紹介しました。

AdobeのextractでなぜかBracketsとCloudからのextractがなくなり、Cloudと別サービスになるかもしれないという懸念が否定できませんね。

Sketchのレスポンシブデザインを考えたスケーリングの属性指定が追加され(これけっこうスゴイと思ってるのにフューチャーされ方が少ないと思う)、今までのグラフィックツールと考え方を変えないとダメなように思いました。
完山さんが解説してくれたCRAFTでのコンテンツのプロトタイプデザイン制作ですが、CRAFTのバージョンアップで追加されたJSONなどを読み込んでフロントエンドデザインなどを考えるための機能追加を解説しました。

当日使ったスライドはこちら

https://speakerdeck.com/pictron/webdesign-workflow-dot-key

みなさんの登壇のあとは、30分ほどの質疑応答と来場者の方から出された疑問やお題をみなさんでディスカッションしました。
いろいろと質問が出て、おおむね好評をいただいたように思います。

またウェブのデザインを主題にしたワークショップが少ないのでまたやって欲しいという声も複数いただいたので、是非また調子に乗って開催できればと思います。

DojoCon Japan 2016