弥生株式会社 様のオンラインサービス「弥生会計」のリニューアルプロジェクトの一環として、士業情報や補助金・助成金・融資情報を取扱う新規サービス「資金調達ナビ」の構築にアサインされました。プロジェクトマネージャーの方と相談・連携し、管理画面UI・検索UIの構成案作成から、WF～モック～最終デザイン作成、フロント側のマークアップ実装を担当しました。
①UIUXデザインの業務：
- 管理画面UI・検索UIデザインのレイアウト設計構築、WF・モック作成、LPデザイン
- デザインレビュー（1次レビュー→PMレビュー）の過程で成果物を制作
②フロントエンド：
- Figma作成の各種デザインをレスポンシブ設計・MFIやクロスブラウザ考慮で実装
- EJSなどのHTMLテンプレートエンジンでページ実装の効率化
- フロント側のパフォーマンスチューニング（Webpackによる画像最適化・コード圧縮、遅延読み込み、キャッシュ活用など）
● 新規プロダクトのデザイン構築・実装（FE / UIUXデザイナー）
| 関連リンク | https://shikin.yayoi-kk.co.jp/ https://shikin.yayoi-kk.co.jp/search |
| 設計構想 | ● 中小企業事業主や個人事業主に向け、士業情報プラットフォームとして機能する ● 資金調達における補助金・助成金・融資情報を検索UIを通して、分かりやすく直感的に情報を整理して取得できること |
| ビジネス形態 | B to B / B to C |
| 使用言語 | HTML 5 / SCSS / JavaScript / Bootstrap5 / EJS |
| エディタ | Visual Studio Code |
| 開発環境 | GitHub / Docker / Yarn / Node.js / Webpack / MySQL |
| デザインツール | Figma / Adobe XD / Photoshop / Illustrator |
| 分析ツール | Googleアナリティクス / Google Search Console / Page Speed Insights |
| タスク管理 | 独自 |
| 開発スタイル | ウォーターフォール型開発、チーム内レビュー体制 |
| その他 | 役員レビュ―有 |
● 検索機能にはフロント側で上手く条件判定できるギミックを取り入れて、分類別に扱えるようにソース側を調整。
● SCSS / 規則はBEMを使用。RWDデザイン対応。他、フォームバリデーションや条件別検索UIなど、フロント側の実装を担当。
● 後工程でのバックエンド連携を考慮してデザインコンポーネント単位で実装を分け、クリーンコードで納品。
● デザインの作成
| 使用ツール | Figma / Adobe XD / Photoshop / Illustrator |
| 成果物 | 新旧デザインデータ作成、ビジュアル・バナー作成 |
| 作業領域 | ブレーンストーミング、WF作成、プロトタイピング、ユーザーペルソナ、 IA設計、ブランディング、UI改善 |
● プロジェクトに分けてデザインデータの作成には、Figma / Adobe XD を使用
● デザインガイドラインが既にあるものについてはトンマナを合わせてデザイン
● 素材などはPhotoshop、Illustrator、Figmaで画像を必要、ご要望に応じて適時作成
