DEVELOPMENT FLOW

STEP1画面全体をサイトマップにて把握

SEO
どういったページが何ページある、といった個別の情報のみならず、各ページが保持する情報(モデル)が何か、どういったアクションが実行されるか、それによりどういった情報の変化が発生するかという、ユーザ行動から考えた画面定義を行います。
この情報は後工程で実施されるスクリプト実装時に、初期設計情報として活用されます。

STEP2共通画面パーツの定義

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

STEP3共通レスポンスアクションの定義

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

STEP4マークアップ実装

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

STEP5ブラウザ検証(静的表示)

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

STEP6JSによるスクリプト実装

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

STEP7ブラウザ検証(動的表示)

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

STEP8調整期間

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

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

CONTACT US

FASTSCRIPTは各種ブラウザに対応した強力なスクリプトを「明朗会計」でご提供。
またAngularJSやBackbone.js等を活用したSingle Application Pages(SPA)開発も対応しております。
まずは一度お問い合わせください。