Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Adobe XDでアプリデザインのワークフローを改善
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

ADOBE XD DAYS

Download to read offline

Adobe XD Meeting #03の発表資料です。
Adobe XDをデザイナーからエンジニアへのデータ受け渡しツールとして使えるかどうかを検証。

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

ADOBE XD DAYS

  1. 1. エンジニアへの受け渡しの果て、 デザイナーの内宇宙に収斂した選択 Sony Interactive Entertainment 池原健治(@kenji_clown5)
  2. 2. そもそもXDで本気デザインはできる? シンプルでコンポーネント化が可能なデザイン。 XDが得意とするデザイン XDが苦手とするデザイン 複雑で有機的/写実的なデザイン → 外部ツールに大きく依存する → XD上でデザインが完結する ?
  3. 3. 受け渡しの定義 • コンテンツ(アプリ)全体の構成 • UI・画面・個々のパーツデザイン • アニメーション、インタラクション デザイナーが伝えたいこと エンジニアが欲しいもの • コンテンツ(アプリ)の仕様書、指示書 • 全パターンの破綻のないデザインデータ(位置計測、画像書き出し) • 言語化もしくは可視化されたアニメーション、インタラクション いい感じの見た目と動き 論理的な情報群
  4. 4. 受け渡しツールあれこれ • Photoshop おそらく一番多いパターン。 • Illustrator 高解像度対応で需要高まり中。 • Animate(Flash)、Fireworks 超限定的。 • XD、Sketch ワイヤーフレームやプロトタイピングに。
  5. 5. 比較1: PSDファイルとPhotoshop • 豊富な書き出しオプション、品質コントロール • Illustrator連携(スマートオブジェクト) • CSS書き出し • レイヤー操作が直感的ではない • 画像編集機能が強力な故の弊害 (描画モードとレイヤー効果に注意) 良いところ 残念なところ
  6. 6. 比較2: PSDファイルとExtract • Adobeソフト不要 • オブジェクト間の距離計測、サイズ確認が直感的にできる • CSS書き出し • 読み込みと展開に時間がかかる • 今後もサービスが継続するか不安 (Dreamweaverにも内包されてるよ) 良いところ 残念なところ
  7. 7. • 動作が軽い • オブジェクト間の距離計測、サイズ確認が直感的にできる • 全体の構成(ユーザーフロー)を俯瞰できる • 画面遷移アニメーションの可視化、数値化 比較3: Adobe XD • 書き出し機能不足(PNG 8bit、JPG、CSS) • Photoshop、Illustratorとの連携が一方通行 良いところ 残念なところ
  8. 8. 比較表(異論は認める) Photoshop Extract Adobe XD レスポンス ○ △ ◎ 距離/サイズ計測 △ ○ ◎ 画像書き出し ◎ ○ △ CSSコピー ○ ◎ × 画面遷移 アニメ ーション × × ◎
  9. 9. ぼくのかんがえたさいきょうのXD • JPG書き出し • リピートグリッド内のオブジェクトに連番を振って一括で書き出す • スマートオブジェクト(Photoshop、Illustrator連携) • CSS書き出し → UPDATE予定 • スタイルガイド生成 → UPDATE予定 • バージョン管理 → UPDATE予定
  10. 10. 本日のまとめ • XDが得意とするデザインなら受け渡しに使えるかも • チーム内でのXDに対する情報共有が必須 • 一部の画像書き出しはデザイナー側のヘルプが必要 • コンポーネント化を想定した分かり易い構成を心掛ける - 適切なシンボル化 - レイヤー名の徹底(命名規則を決めておくと尚良し) ただし!
  11. 11. おしまい

Adobe XD Meeting #03の発表資料です。 Adobe XDをデザイナーからエンジニアへのデータ受け渡しツールとして使えるかどうかを検証。

Views

Total views

777

On Slideshare

0

From embeds

0

Number of embeds

256

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×