バックログ＋求人サイトの
アプリケーション開発
概要
バックログのような「プロジェクトの進捗管理機能」と「求人の募集と応募ができる機能」を合わせた、アプリケーションの開発に携わりました。
主にフロントでの機能の実装とデザインの改善を担当しており、基本的にはAPIを弄ることはほぼありませんでした。既存のAPIを利用してDBのデータを取得しフロントに表示、リアクティブに変更されたデータを適切な型に整え、既存のAPIに渡してDBを更新するという実装を行っていました。
- 開発環境
-
- フロントエンド
- 言語： TypeScript, HTML5, CSS3
フレームワーク： Vue.js 2（Class Style）
ライブラリ： Vuetify - バックエンド
- 言語： TypeScript
フレームワーク： NestJS - データベース
- DBMS： MySQL
管理ツール： MySQL Workbench - インフラ
- 環境： クラウド
プラットフォーム： AWS - バージョン管理
- Backlog (Git)
- エディタ
- Visual Studio Code
- データフロー
-
- 参画期間
- 2022年4月～2022年10月 (約7カ月)
機能を実装しつつデザインを改善
デザイナーとしての経験がありましたので、フロントへのデータの表示やデータの更新などの機能を実装する際は、同時にデザインの改善を担当していました。
求人ページで扱う「アカウント情報」のモーダルを例にご紹介します。
アカウント情報モーダル
- 既存のデザイン
- 目線の動きが忙しく画面に安定感がありません。
また、関連性のある情報が離れて配置されていたり、保有技術の「経験年数」が言語の後に表記されているため、冗長なリストとなっているなど、改善すべき箇所が多々あります。
- 割り振られるタスクについて
-
- 「保有技術」のリストを実データを取得して表示させる
- オファー時に交渉できる項目を「交渉条件」として目立たせる
- 全体のデザインを改善する
このように、機能の実装だけでなくデザインに関するタスクを同時に振られることが多くありました。
- 改善後のデザイン
- 関連性のある情報をグループ化し、目線の動きを整えることで画面に安定感を持たせました。また、保有技術の経験年数を色分けしたアイコンで表すことで、リストをコンパクトにまとめました。
アプリケーション全体のデザイン改修
このプロジェクトはデザインに関するルールが曖昧だったようで、実装者ごとにデザインにバラつきが出ていました。具体的には「各所の余白」「テキストの色」「ボタンやアイコンのサイズ」などが、ページごとに微妙に異なっていました。
そのため、ページ遷移をすると統一感がなく、違和感を感じてしまう状態でした。
そこで、フロントの開発を一時停止し、3名で全体のデザイン改修を行いました。
- デザインの改修内容
-
- 各所で流用されるパーツを共通コンポーネント化
- コンポーネント化するほどではないレイアウトには共通CSSを用意
- CSSの命名規則の作成と適用
- 不要となったデザインを指定するためのコードの削除
- バックログのWikiにデザインガイドラインを作成
共通コンポーネントの一部にはVuetifyのコンポーネントを内包していましたので、受け渡しできるプロパティを制限することで、想定外のデザインにならないように調整しました。
また、デザインガイドラインを全て把握するのは困難なため、共通コンポーネントで受け渡しするプロパティには丁寧なコメントを設け、誰でも活用しやすくなるように心掛けました。
- 改修期間
- 2022年7月～2022年9月 (1.5カ月)