前職の上司からの紹介でご縁の繋がった社長さんに頼まれ、案件に参画しました。年内での完成を頼まれ、同時に努めていたフロントエンドの本業以上に重い案件となりましたが、尽力して仕上げました。
以前の開発者とは連絡取れない状況にて、サーバーサイドエンジニア２名、リモートでプログラマー１名、初期でバグあり、WEBの連携はない状態…からのスタートではありましたが、ソースコードの所在を明確にし、まずは仮想環境と各種管理ツールなどの連携をクライアントと打ち合わせして整備し、そこから作業が安全にできる環境になって初めて着手するようにしました。
● プラットフォームの新規構築（FE / UIUXデザイナー）
| 関連リンク | https://j-izumi.com/ |
| 設計構想 | ● 中小企業事業主や個人事業主に向け、士業情報プラットフォームとして機能する ● 検索UIをベースにビジネスライクに洗練された印象を持つ toB向け情報ツールとして刷新する |
| ビジネス形態 | B to B |
| 使用言語 | HTML 5 / SCSS / JavaScript / Bootstrap4 / Laravel / EJS |
| エディタ | Visual Studio Code |
| 開発環境 | GitHub / Docker / Yarn / Node.js / Webpack / MySQL / WordPress |
| デザインツール | InVision / Photoshop / Illustrator |
| タスク管理 | Google Spread Sheet（WBS） |
| 開発スタイル | アジャイル型開発 |
| その他 | サービスのマニュアル作成、役員レビュ―有 |
・Laravel（bladeテンプレート含む）の大規模リファクタリング作業を実施。クリーンコード化や内蔵フレームワークのアップデートをしてリリースを実施。
・アカウントごとにUIの表示ロジックを条件分岐。
● デザインの作成
| 使用ツール | InVision / Photoshop / Illustrator |
| 成果物 | サービスマニュアル、新デザインデータ作成、ビジュアル・バナー作成 |
| 作業領域 | ブレーンストーミング、WF作成、プロトタイピング、ユーザーペルソナ、 IA設計、ブランディング、UI改善 |
・管理ダッシュボードのレイアウト設計・構築からワイヤーフレーム（WF）やモックアップ作成、最終デザイン作成までを実施。
・機能改善の提案・UIデザイン設計・デザインカンプ作成などをinvision・photoshop・AdobeXDなど使用しつつ進め、デザインレビューも適時実施して、最終データを作成。
【初期状態について】
海外の外注スタッフが過去に作成したWEBアプリケーションでした。データを出力する側はできていましたが、UIや情報設計などはまとまってなく、使用感やインターフェースは要改善要望があり、内部コードなどにも至る所で問題がありました。
初期はシステムの側（Laravelとデータベースで組まれた表のみのUI）だけで、デザインは当てられてなく、初期バグも多かったので、最初はバグの調査から入り、一旦は解決した後に、機能改善の提案・UIデザイン設計・デザインカンプ作成などをinvision・photoshop・AdobeXDなど使用しつつ進めて参りました。写真を加工してメインのグラフィックを造ったり、細かいUIの素材はシェイプツールで自作したりしています。
【デザイン設計画面】
【デザインとプログラム改修後】
bootstrap3から4に変更し、UIを直すためにCSSフレームワークを導入しソースコードをタスクに切り分けて慎重に作業しています。PHPのlaravel（bladeテンプレート含む）でのソースコードは composer と webpackと仮想環境（docker / nginx server）とgitで管理し、リモートワーカーとも連携して安全管理を進めました。仮想環境でのDB再現でMYSQLなども多少使ってます。
2019年11月にワイヤーの設計や、改修後のデザインデータを納品し、12月内でコーディングや幾つかプログラミングも終えて納品しました。出力される画面に収まる範囲で標題が見えるように付与し、ナビゲーションの操作に対しての画面の紐づけが分かりやすくなった上で使用感は改善されました。
また、アカウントごとに専用UIが存在するため、総じてページ数は多くなりましたが、CSSフレームワークのUIやベクターのイラストなども使った上で、最終的にはリッチで見やすい仕上がりで改善されたとクライアントからのご感想もいただきました。
