DIST.28 「モダンWebデザインワークフロー2019」
2019/09/14参加
LT:モダンなFireworks後継アプリはあるか
Stocker.jp Webデザイナー 庄崎 大祐(SHOZAKI Daisuke)
AffinityDesignerいいよー
▼特徴
・ベクタとラスタ両方扱える
・ネイティブファイルが軽い
・動作が軽い
・スライスが協力
・スライスからSVGの書き出し可
・Retinaデザイン対応
・調整レイヤー、レイヤースタイル、境界線の調整 もできる
LT:Sketch for Teamsでコラボレーションを加速する
chot Inc. CEO 小島 芳樹(KOJIMA Yoshiki)
デザインツールの「クラウドサービス」化
いままで…メールに添付・USBメモリ・Dropbox・Abstractなど
いま…FigmaやXDでは基本的にローカルにファイルを置かない。URLを渡すだけで共有できる(管理者の権限も細かく設定できる)
「Sketch for Teams」
クラウドドキュメント+メンバー管理の強化
ZeppelinやAbstractがいらなくなりそう。複数人でSketchを使ってるチームは移行してみてもいいかも。
LT:ひとりでAtomic Workflowを試してみた
フリーランス フロントエンドエンジニア こばしゅん(KOBASYUN)
結論:デザインはチーム全員でやったほうがよさそう
▼よくあるワークフロー
UX→ビジュアルデザイン→開発
下流に行くに連れて、あれ…?ってなっていく。
「デザインはデザイナだけに任せるには重要すぎる」
デザインフェーズだけでデザインを考えきるのが難しい
▼Atomic Workflow
UXデザイン(コンポーネント単位でもの作ったらすぐ共有!ex.ヘッダできたらすぐ渡す)
ビジュアルデザイン(すぐ作り込んで)
開発(すぐ実装する。ここへ来て初めて評価する。意思決定はブラウザで)
「Figmaが支えるVue Fes Japanのデザイン」
世路庵 インタラクションデザイナー 沖 良矢(OKI Yoshiya)
カンプは中間成果物。コミュニケーションを円滑にするための手段。
コードは、チームで作り上げる文化がある(git、bit bucket、Xcode、backlogなど)
なのにデザインは、デザイナーだけのもの…?
>>デザインのオープンソース化<<
・コードのようにデザイン(一つのファイルを同時に触ってマージされたりしたい)
・誰もがアクセス、編集可能(いまはアプリを持ってるひとしか開けない、さわれない)
・オープンな制作過程(いまはjpgとかに書き出したりファイルを開かないとわからない)
▼Vue Fes Japanのデザイン
WebとDTPと映像 初開催だったのでブランディングから…!
どこまでカンファレンスの質を求めるのか
OSSへの貢献とカンファレンスへの貢献は次元が違う(カンファレンスのほうが貢献しないといけない粒度や必要なスキルが多く求められる)
▼なぜFigmaを選んだか
XDで直面した課題→Figmaでどう変わったか
・1ファイルに対して同時にデザインできない→共同編集◯
・ファイルベース共有の限界→◯Page/Frame(フォルダみたいな感じ)
・複数人のAdobeID管理が大変
・AdobeCCを契約していないエンジニアとの連携
▼ツールを変えても変わらないこと
・デザインする上でのルールを作る
・カンプからの空気読み、を強要しない
・カンプに向かないコミュニケーションを理解する
※SVGのアニメーションとか扱うの、vue.jsだとやりやすいらしい。興味湧いてきたぞ
2019年Web制作現場のリアルな話
フリーランス Webデザイナー/マークアップエンジニア 戎島 海実(EBISUJIMA Umi)
「デザイン経営」宣言
ブランド構築に資するデザイン、イノベーションに資するデザインについて
すこーしデザインの重要性の認知・最初からデザインを考えないといけない、という動きが増えてきた
▼デザインの重要性を理解してもらうには?
本のおすすめ
▼「チームでできないことを共有する」
仕事していると、だれがなにをできるのは分かってくるが、あえて分からないこと・できないことを共有する。
自分の知識外のものが話題になったときに、より詳しい人に聞いてみたり。
デザインのことだけではなく、デジタル分野全体に興味持つ。
あと、非デザイナにデザインを教えて新しい視点を持ってもらうとか。
顧客とともに北極星を目指すースタジオディテイルズの制作現場ー
STUDIO DETAILS プランナー/テクニカルディレクター 久保 慶護(KUBO Keigo)、ディレクター 北川 パーヤン(KITAGAWA Pahyan)
北極星を目指すということ
灯台を目指すのではなく、北極星を目指す。
一般的な制作ではヒアリング結果をそのまま受け入れるが、北極星を目指す場合、ヒアリング結果を噛み砕いて再構築する
・顧客以上に顧客のビジネスを理解しようとする。提案段階からかなりの時間をかけて顧客理解を行う
・目的地を解体し、徹底的に議論する。目的地ありきではなく、どこに向かうかを顧客とともに議論する。
・議論で得られた情報を基に、目的地を再設計する。当初要望と全く異なる提案になることも恐れない。
北極星=プロジェクト・ポテンシャルを最大化したときに見える”本当の目的地”
見つけた北極星を目指して航海に出るには、メンバー全員の高い視座と共闘意識が重要
▼5か条
★サボらない
→やったほうがいいことはやる。例えば提案書作成はデザイナがイラレでやる
→実装指示書を丁寧に作り込む。ほぼすべての案件でAEによる演出参考動画を作る
★ずらさない
→演出実装のFBはすべてgitのissueに登録
→キャプチャではなくgyazo使ってissueを登録
→WebGLのコンソールを細かく用意して、様々なパラメータを非エンジニアがいじれるようにテストアップする
★頂点を上げる(金とスケジュールを惜しまない)
→豊富なビジュアル制作予算(撮影、衣装、小道具、WebGL、動画、3DCGなど)
→様々な工程で分業
★目線を上げる
→自主NG(顧客内でOKが出ても、デザインや構成でNGを出す場合あり)
→パッション!熱量を共有。
→アウトプットクオリティの追求(どんなクリエイターと組むときもそのひとのポートフォリオのトップに来るような成果物を目指す)
★あきらめない
→デザイン変更は当たり前(実装して違ったらデザインからブラッシュアップ。また実装)
→リリース直前にメンバー全員に共有。たとえ3日前でも指摘点が正しければそれを実装する
※すごいな…工数管理どうなってるんだろう…度外視なのかな。すごく楽しそうだけど