DIST.28「モダンWebデザインワークフロー2019」
「モダンなFireworks後継アプリは存在するか？」
Stocker.jp Webデザイナー 庄崎 大祐
Fireworksの特徴
ベクターとラスター
ネイティブファイルが軽い
動作が軽い
スライス
欲しいとおもった機能
スライスからSVG書き出し
Retinaディスプレイ対応
Affinity Photo
Affinity Designer
Fireworksの機能と一緒
Photoshopと比較すると平均70%ファイルサイズ圧縮
ほしいと思った機能もある
調整レイヤー
レイヤースタイル
境界線の調整
Adobeで制作していたころ
RAW
Lightroom
PhotoShop
Illustrator
Fireworks
Affinityでできると
RAW
Affinity Designer
作成した
Slackグループへの誘導もある
「Sketch for Teamsでコラボレーションを加速する」
いろんなデザインツールがクラウド化している
ローカルにファイルを置かなくてもいい
URLを渡して共有
権限管理の設定などが可能
Sketchもver.56からクラウドドキュメントを採用
Sketch for Teamsが7/24にリリース
クラウドドキュメント＋メンバー管理
チーム作成
チーム内で作成されたドキュメントが一覧表示
ブラウザで確認
バージョン管理ができる
年間99ドル
新機能
同時編集機能
ブラウザ版の強化
まとめ
複数人でSketchを使ってるチームは是非導入を
「ひとりでAtomic Workflowを試してみた」
フロントエンドエンジニア こばしゅん
Atomic Designを作った人が提唱したワークフロー
結論
デザインはチーム全員でやったほうがよさそう
ビジュアルデザインまで良くても開発でテンションが落ちてしまう
何故か
デザインはデザイナーに任せるには重要すぎる
> Design is too important to be left to designers
ウォーターフォールの各領域を同時進行にする
コンポーネント単位ですすめてみる
意識したこと
実装は明確に分業
デザインができたらすぐ実装
実装の単位は
Organisms くらいで行う確認は必ずブラウザ上で行う
所感
足りない考慮にすぐ対応できた
小さい単位で確認のサイクルを回す
ブラウザの確認が早い段階でできる
かならず変更があるので精神衛生上良くない
チーム内での対話は必要そう
「Figmaが支えるVue Fes Japanのデザイン」
インタラクションデザイナー 沖 良矢
デザインについて語る
「カンプとはあくまで中間成果物である。コミュニケーションを円滑するもの」
一方エンジニアは？
コードが最終成果物
チームで作り上げる文化になってきた
GitHubのプルリクエスト
VS Codeでのペアプロ
backlogでの課題共有
デザインはどうなってる？
デザイナーだけのものになっていないか？
デザインのオープンソース化 は提唱したいコードのようにデザインしたい
誰もがアクセス、編集可能
オープンな制作過程
デザインツールに閉じすぎてないか？
アジェンダ
Vue Fes Japanとデザイン
技術カンファレンスのデザイン領域
favicon
OGP
参加パス
ステッカー
会場ガイド
Vueビール
映像
どこまで質を求めるのか？
OSSの貢献とカンファレンスの貢献は次元が違う
なぜFigmaを選んだのか
Adobe XDでの課題が出てきた
5人ですすめる
1ファイルで同時にデザイン不能
ファイルベース共有限界
複数人のAdobe ID管理がきつい
Adobe CC契約していないエンジニアとの連携
Figmaが上記を解決できた
ツールが変わっても変わらないこと
デザインするルールをつくる
カンプから空気読みを強要しない
カンプに向かうコミュニケーションを潤滑にしたい
今後に向けて
目標は概ね達成
コミュニティにおけるデザイン
文化や経験の違う人によるデザインのロールモデル
コミュニティへの貢献をどう評価するか
「2019年のWeb制作現場のリアルな話」
Webデザイナー／マークアップエンジニア 戎島 海実
2019年のこれまでと現在とこれから
バズ
スマートスピーカー
SEOが量から質
仮想通貨
IoT
サブスクリプション
サーバーレスアーキテクチャー
クラウド
機械学習
デザインは？
CXO
Figma
「デザイン経営」宣言
デジタルマーケティングが増えた
上流工程のロゴやブランディングも意識
プロトタイプをしっかり作る
「デザインの重要性」はまだまだの現状
デザインの重要性について
デザインがデザイナーのためのものではない
ビジネス・技術も掛け合わす
チームで出来ないことを共有する
専門外のバズってるワードについてを聞いてみる
知識の幅が広がる
境界線をなくすことが
2020年は5Gがはじまる
通信速度が爆速に
どういう状況になるかを考える
Webの制作現場とフリーランスの仕事
デザインツール
FIgmaが8割
実際の仕事は何をしているか
デザイン：5割
マークアップ・フロントエンド：5割
スピード優先でスマホ版・PC版を作ることはしてない
レスポンシブのブレークポイントはデザイナーが握る場所ではなかったりする
「顧客と共に、北極星を目指す。 - スタジオディテイルズの制作現場 -」
プランナー／テクニカルディレクター 久保 慶護
ディレクター 北川 パーヤン
北極星を目指すということ
岬の灯台ではなく、北極星を目指そう
プロジェクト・ゴールの価値最大化を目指す
どうやって見つけるか？
顧客以上にビジネスを勉強する
提案段階から理解する
インタビュー記事
競合調査
未来の競合推定
目的地を解体し徹底的に議論
目的地ありきではない
どこへ向かうか
本質的議論
北極星が見つかる
議論で得られたゴールから提案をする
異なる提案を恐れない
例
採用サイトの新規構築
コーポレートサイトのフルリニューアル
スローガンの策定
プロダクトサイトを作る
製品のUI/UX改善
メンバー全体の高い視座、共闘意識
制作現場
５つの肝
サボらない
提案書の清書
写真カンプを合成して作り込む
緻密な実装指示書
補足のAffter Effects
ずらさない
GitHubでissue登録
1案件で500以上
Gyazoでスクショ
WebGLコンソールを用意して非エンジニアがいじれるようにする
頂点をあげる
豊富なビジュアル制作予算
分業とプライド
目線をあげる
自主NG
顧客内でOKであってもNGにする
デザイン、構成など
パッション
熱量の共有
How toがない
情熱伝播の術はある
アウトプットクオリティの追求
諦めない
デザイン変更は当たり前
スクラップ＆ビルド
リリース直前の叩き会
改善案を出す
バグ以外でも
全社員が3〜10 issuesくらい出す
まとめ
2019年のデザインが取り巻く環境の変化
市場背景
提供できる価値や解決できることの拡大
技術・環境背景
テクノロジーの変化・デバイス、環境も変化
北極星を生み出すための手法
常に試行錯誤して必死に追いかける
スクラップ＆ビルド
でも技術革新において明日には陳腐化するかもしれない
北極星をデザインするのはいつの時代も変わらない