Recommended
More Related Content
What's hot
What's hot (11)
Similar to うちの開発におけるXD利用法
Similar to うちの開発におけるXD利用法 (20)
うちの開発におけるXD利用法
- 1. at Adobe XD Meeting #15 2018/4/13 @KAZUMA87 Kazuma S ekiguchi
- 2. 関 口 和 真 Comcent,Inc CTO システム開発、WebDesign、あちこちの講師 ECサイト開発、Webシステム開発がメイン 普段はXD Meetingのスタッフしてます 実は現在佳境案件が・・・🔥
- 3. • ECサイトを作成したり、Webシステムを作成しています • 他にWebサイトの更新やコンテンツ作成など • 主にPHPとかJSを使用 • 少人数 • びんぼー • タスク管理をRedmine（Gitリポジトリ連携） • Slackと社内ML、wikiなどでコミュニケーション • 仕様書などはDropboxPaperを利用 • お金の掛からないソリューションを活用
- 6. • Windows7環境の存在 • XDは使えない・・・ • 外部デザイナーの存在 • 社内で完結しないフローになっている • 社内で完結する場合もどうしてもXDだけにできない • 一部CS6環境が残る • 全てはびんぼーが悪い
- 7. • ワイヤーフレームがAiのため、エンジニアが確認しづらい • イラレを立ち上げて、フォントが無いとか・・・ • 直ぐに確認して、改善を出しにくい • 結果としてエンジニアが確認して戻す、などの作業が負担になる
- 8. • 比較的タイトなスケジュールのものが多い • デザインが完成してからバックエンドが動くの では間に合わない • バックエンドはワイヤーフレームがある程度 完成した段階で開発を始める • ワイヤーフレームが決定していないため、更新 があり得るが把握しづらい（リアルタイムで 更新を確認できない） • フロント側と繋がってるシステムが多い • 最終的な出力にある程度依存してしまう • システムとして無理のないようにしたい 開発に4ヶ月想定。 デザインに1ヶ月、 納品は4ヶ月後とか
- 9. • 入れられれば問題は少ない • 外部デザイナーの問題は出てくる • 費用の問題（びんぼー）、既存システムの問題、 顧客との関係性の問題 • 少ないXDでパフォーマンスを出す • XDを使うことのできる人が利用する • XDの「プロトタイプを公開」機能を利用する
- 10. • ワイヤーフレームをXDで作成 • 今回はAiで作られていた物をXDに移植 • 色情報などが無い、フォントもデフォルトだったため、移行は スムーズで完全に再現できた • 「プロトタイプ」でリンクを設定 • 仕様書通りの動きが可能かどうかここで検証が可能になった • Aiだけのときは画面遷移を確認できなかったためヌケが生じた • 足りないボタン、表示が確認できた • コメント機能で記述していく
- 11. • クライアントにワイヤーフレームの段階で画面遷移を 確認して貰える • 仕様書では分かりづらい部分の具現化が可能 • やはり文章よりも分かりやすい • そこから仕様書の修正もある（手戻りが少ない）
- 13. • プロトタイプを確認する、コメントを付けることはXDを持っ ていなくても可能 • 同時に複数人が閲覧していても問題無い点も利点 • エンジニアから見て足りない表示などを追加して貰える • エラー表示などは最初想定されていないことが多い • 指摘しておくことで、デザインに反映して貰える • デザインもXDに落とし込めれば、デザインスペックが コーダーには有効に作用する • 外部デザイナーや受入側の体制が必要 • コーダーは使いたい意向
- 14. • 利便性が高いことをチームに知ってもらう必要があった • 新しいツールへの抵抗が少なからずある • 既存のものでも良いのでは、という意思 • それでもびんぼーが付きまとうため、なかなか更新はされない • AiをXD化する作業は大したことない • とりあえず、XD化して、共有しサイクルを回していく • 自分で編集したい、という心が出てくれば、最初からXD化も 可能になってくる • PSDもXD化したいところ（現在の目標）
- 15. • 画面遷移で分岐が表現できない（ログイン済み、ログイン していない状態の違いなど） • 遷移を増やすなどで対応が必要 • 指示を書き込めない • コメントに書いてもごっちゃになってしまうので、XDを持って いる人がコメントから必要な指示を抜き出してXDに記述する 必要がある