基本レイアウトコーディング
ホーム（ダッシュボード）、検索一覧画面、詳細画面、編集画面など、代表的な3～4画面をピックアップし、コーディングガイドラインに従って実装を進めます。レスポンシブ対応などもこの段階で行い、アプリケーションの全体におけるレイアウトの基本構造をこの段階で決定します。
デザイントークンをソースコードに反映させるなど、後に続くコーディングをスムーズに行うための準備を整える作業もこの中で行います。
ソースコードをゼロから書くことは少なく、過去案件のソースコードを積極的に再利用したり、独自作成した共通ライブラリを用意するなどして、実装の効率化、品質の向上を目指しています。より多くの案件で同じソースコードが活用できるよう、さらなるテンプレート化を進めています。
UIコンポーネント実装
利用するUIコンポーネントを実装します。UIデザイナーが作成したUIコンポーネントリストを網羅できるよう作成します。
実装の際は「Storybook」を利用することで、コンポーネントをカタログ化すると同時に、開発者が一目でコンポーネントが持つ状態やプロパティを実装レベルで一覧できるようにします。
Storybookでカタログを作成しておくことで、リリース後の運用や改修の際に実装担当者でなくてもコンポーネントの把握が容易になるメリットがあります。
マイクロインタラクションコーディング
マイクロインタラクションを実装します。デザイナーとエンジニアで議論しながらソースコードを改修し、約1～2日かけて調整します。マイクロインタラクション実装はこの一度の工程だけで完全に終わることは少なく、後述するデザインチェックでもブラッシュアップを行います。
主要画面コーディング
基本レイアウトコーディングで実装しなかったその他のレイアウトパターンの画面を実装します。UIデザイナーが作成したデザインデータをもとに密にコミュニケーションをとりながら進めます。ここまでで難易度の高い複雑な画面の実装をやりきり、残りの画面はコードの流用中心で進められるようにします。
展開画面コーディング
主要画面と同テンプレート・データ違いの画面を実装します。ここからは基本的にワイヤーフレームや、画面項目のみを定義した資料をインプットとして実装します。画面数が多い場合は、複数人のエンジニアで同時に作成します。
