アプリUI 仕事の進め方

6-1. 開発準備

執筆 天野 謙作
エンジニア
読了時間の目安
3

フロントエンドの実装を開始する前の準備工程です。設計・プロトタイピングの内容を開発を担当するエンジニアに伝え、その内容をもとに実装環境の準備やドキュメントの整理などを行います。

開発ブリーフィング

設計・プロトタイピングの工程で定義した内容をもとに、エンジニア向けのブリーフィングを行います。UIデザイナーへの社内ブリーフィングで用意した【ブリーフィングシート】を使い、プロジェクトの概要、開発に利用するJSフレームワーク・ライブラリや対象ブラウザなどのシステム要件、ワイヤーフレーム・プロトタイプの設計・画面仕様情報をエンジニアに共有します。

ブリーフィングシート

進捗管理方法の検討

実装の進捗・課題の管理については、基本的にBacklogを利用しますが、Googleスプレッドシートで画面単位の一覧表を作成して進捗管理を行うこともあります。ツールや管理単位はプロジェクトごとに社内及びお客さまとの合意のうえで選定します。

仕様情報の連携

設計・プロトタイピングの工程で検討した仕様について、エンジニアが実装の観点から確認します。基本的には画面仕様書を確認しますが、静的な画面イメージでは再現しきれない動作やロジックは別途【仕様連携シート】を使って確認します。コンサルタント・ディレクター・UIデザイナーと仕様の調整及び認識合わせを行います。場合によってはお客さまと仕様確認のためのコミュニケーションが発生することもあります。また、この工程では画面仕様だけでなくUIのモーションについても整理します。

仕様連携シート

開発前ヒアリング

開発にあたり、システムに関わる確認すべき前提事項がこのタイミングで出てくることがあります。フロントエンド・バックエンドの担当範囲の切り分けやGitリポジトリの参照先など、開発者目線で確認しておくべき事項をお客さまにヒアリングします。
ミーティングの場で確認することもありますが、ベイジでは【開発前ヒアリングシート】をお客さまと共有し、テキストベースでヒアリングを進めます。

開発前ヒアリングシート

開発・検証環境準備

モックアップを配置する検証サーバの初期設定や、ファイルのバージョン管理に使用するGitの準備を行います。検証環境の情報はプロジェクトメンバーに共有し、完成した画面を任意のタイミングで確認できるようにしておきます。

検証環境準備と同時に、エンジニアは自身のPCで開発環境を構築します。複数人が開発に携わることを想定し、環境構築用のドキュメント整備もこの工程で行います。場合によっては、お客さまの開発環境やGitに招待いただき共同開発をすることもあります。

ベイジに問い合わせる
1週間で14件のお問い合わせが入りました 1ヶ月間で100件のお問い合わせが入りました