アプリUI 仕事の進め方

6-2. フロントエンド実装

執筆天野謙作

エンジニア

読了時間の目安: 約5分

フロントエンドの実装を行うフェーズです。基本的には1名のフロントエンドエンジニアで進めますが、大規模システムの場合は複数名のフロントエンドエンジニアでチームを組んで実装します。

ベイジではサンプルデータが入ったHTMLモックアップの実装を行うことが多いです。バックエンド側の開発、及びフロントエンドとバックエンドの間でデータを受け渡すインターフェースの実装はあまり行いません。お客さまの開発担当者と協議し、役割分担を決めながら進めます。

ベースコーディング

フロントエンドフレームワーク（React/Vue/Angularなど）を使わない、ビジュアルとモーションのみを表現するHTMLモックアップの場合に限り、ベースコーディングから行います。ホーム（ダッシュボード）、検索一覧画面、参照画面、編集画面など、代表的な3～4画面をピックアップし、コーディングガイドラインに従って実装を進めます。レスポンシブ対応などもこの段階で行い、ウェブアプリケーションの全体におけるソースコードの基本構造を決定します。

コーディングガイドラインは基本的にベイジ規定のものを使いますが、お客さまで管理しているものがあれば事前に共有いただき、そのガイドラインに従いコーディングします。

また、ソースコードをゼロから書くことは少なく、過去案件のソースコードを積極的に再利用したり、ベイジ独自に制作した共通ライブラリを用意して、実装の効率化、品質の向上を目指しています。より多くの案件で同じソースコードが活用できるよう、さらなるテンプレート化を進めています。

目次ページの制作

社内外のプロジェクトメンバーが開発中のHTMLモックアップを随時確認できるよう、エンジニアが検証環境にアプリケーションをデプロイします。

アプリケーション上に存在するページ名とURL、進捗状況などが記載された【目次ページ】を制作し、検証環境上でプロジェクトメンバーがチェックしやすくします。

UIパーツリストコーディング

プロトタイピング工程で定義されたUIコンポーネントリスト（デザインデータ）をもとに、アプリケーションで利用するUIをコンポーネント単位で実装します。ビジュアルや動作の確認を効率化するため、Storybookを導入したUIのカタログ化も同時並行で行います。

ベイジではアトミックデザインをベースにしたコンポーネント設計を取り入れており、その設計にしたがって適切な粒度でコンポーネントを管理します。

また、作成したStorybookはお客さまにも納品するので、リリース後の改修や画面追加の場合にもスタイルを継承するために活用していただけます。

モーション実装

マイクロインタラクションを実装します。この工程はUIパーツリストコーディングと同時に行われることも多いです。デザイナーとエンジニアで議論しながらソースコードを改修し、モーションを調整します。ベイジでは【モーション指示書】を利用して、認識のズレが出ないような工夫をしています。

マイクロインタラクション実装はこの一度の工程だけで完全に終わることは少なく、後述するデザインチェックでもブラッシュアップを行います。

主要画面実装

作成したUIパーツリストやモーション指示書、ワイヤーフレーム、仕様連携書などをもとにして、主要な画面を優先的に実装します。この工程では画面ごとの機能要件を満たすためのJavascriptの処理や、ページ固有のコンポーネントの実装が主な作業となります。

展開画面実装

主要画面と同様のレイアウトを持つ展開画面を実装します。この工程では既に利用するコンポーネントは作成済みであり、基本的に新規に画面やUIコンポーネントリストのデザインデータを受け取って実装することはありません。ワイヤーフレームや、画面項目のみを定義した資料をインプットとして実装します。
画面数が多い場合は、複数人のエンジニアが分担して展開画面の実装を行うこともあります。

デザインチェック

デザイナーによるデザインチェックを行います。この工程では、UIデザイン通りにブラウザ上のHTMLモックアップが再現されているか、触ったときに最適なUXを提供できているかを、デザイナーがユーザの目線に寄り添って判断します。プロトタイピング工程で制作したデザインデータやワイヤーフレームなどの静止画では確認できなかった違和感や、UIデザインと実装のズレを検出し、成果物のさらなるブラッシュアップを図ります。

チェック項目は【デザインチェックシート】に記載しており、チェックの観点が属人化することを防ぎます。