フロントエンド開発の流れ

共通で利用されるフォーム部品や表・グラフ部品といったパーツを、共通パーツとして定義します。
パーツは個別に定義するわけではなく、派生／非派生関係をもったパーツ体系として取りまとめていきます。 こうすることで、マークアップ段階での効率化や、変更による影響範囲の特定がしやすくなります。

ユーザが何らかの行動を起こした際のレスポンスアクションは、共通したパーツや動きとして定義します。
特に動きはユーザ体験に大きく影響する要素です。表示間隔や秒数、デバイスによる許容される表示差異等も、この段階で確認することで、管理画面全体の操作性が決まるといっても過言ではありません。
また定義されたレスポンスアクションは、管理画面の機能追加や変更時にも、どういったUIにするべきかという情報ソースとして重要な役割を果たします。

パーツ集としてまとめられた画面パーツやレスポンスアクションを元に、前工程の実装となるHTML・CSSマークアップを行います。
基本的にはレイアウト（パーツが入る骨組み）とパーツから作成を進めていきますが、プロジェクトの性質によってはこの段階でアジャイル手法を用いる場合もございます。

マークアップが終了する際には、リンクのみでの画面遷移確認を行います。アクションはこの段階では未実装ですが、表示崩れや差異が無いかというブラウザ検証を実施します。
弊社では、この段階でのモダンブラウザとレガシーブラウザでの表示差異について、エンドクライアント様との間で確認を行うことをお勧めしています。スクリプト実装に入ってからの静的表示の調整は、影響範囲が大きくなるためです。

実装の最終工程となるこの段階では、STEP2や3で定義したスクリプトで表現する動きや機能の実装を行います。
実装手順はプロジェクトによりさまざまですが、大よそ外部APIとの通信部分とレスポンスアクション部分を中心に開発を実施します。
尚、プロジェクトによっては外部APIも同時に開発している場合が多く、スクリプト実装時にはスタブを構築して実装することもあります。

検証の最終段階では定義された動きについてはもちろんのこと、ユーザに実際に確認いただくシナリオテストも実施いたします。
また外部APIが存在する場合は、サーバとの連携テストも実施することで、より本番環境に近い動作確認が可能となります

管理画面やアプリといったUI/UXにかかわるシステム開発では、実際に使ってみて分かる改善点があるのが当たり前です
弊社ではご提案の初期段階で、この調整期間の導入を強くお勧めしております。よりよいUI/UX開発につなげるための、重要なフェーズと認識しています。

上記はあくまで一例です。弊社ではお客様のプロジェクトの性質に応じた、最適なUI/UX開発フローをご提案しております。是非お気軽にお問い合わせくださいませ。