東京・大阪を始め全国展開し、オフィス移転のパートナーとして、B to Bで物件提案・契約・サポートなどを一貫して提供している 株式会社HATARABA 様において、移転用オフィス検索型Webプラットフォームの新規立ち上げプロジェクトがあり、リニューアルUIデザインに関する IA設計・UIデザインの提案とデザインデータ作成、仕上がったデザインのフロント側実装を主に担当致しました。
①UIUXデザインの業務：
- オフィス移転サービスのフロントページ全デザインのレイアウト設計と構築・ワイヤーフレーム～モック作成
- メインビジュアル作成（社内コンペ）、バナーの作成
- 制作物データの保守・運用・整備
- デザインレビュー（1次レビュー→PMレビュー）の過程で成果物を制作
②フロントエンド：
- Figma作成の各種デザインを、コード抽出後、レスポンシブ設計・共通UIコンポーネント化、iOSなどのクロスブラウザ対応などを考慮して実装
- EJSなどのテンプレートエンジンを使用したフロント実装、Docker、Node.jsとの連携
- バックエンドは Ruby on Rails と連携して検索UIに向けた動的データを表示
- フロント側のパフォーマンスチューニング（画像最適化、コード圧縮、遅延読み込み、キャッシュ活用など）
- 一次リリース後、QAフィードバックを受けて、技術的改善とバグ修正・最適化を実施
- WordPressコンテンツページに関する外注先選定について、他部署のサポートも実施
- 実装チーム内コード成果物のレビュー
● プラットフォームのフルリニューアル（FE / UIUXデザイナー）
| 関連リンク | https://hataraba.com/ |
| 設計構想 | ● DX化の潮流において、オフィス移転用の物件検索機能を強化 ● 競合他社の均質化・標準化されたUIの良さも取り入れつつ、事業者間のペーパーレスな契約をサポートするサービスを目指す ● ブランドイメージの青系統に沿ったトンマナやデザインで表現 |
| ビジネス形態 | B to B |
| 使用言語 | HTML Living Standard / SCSS / JavaScript / TypeScript / Bootstrap5 / Ruby on Rails / EJS |
| エディタ | Visual Studio Code |
| 開発環境 | GitHub / Docker / Yarn / Node.js / Webpacker / Hotwire / Ruby on Rails / MySQL |
| デザインツール | Figma / Photoshop / Illustrator |
| 分析ツール | Googleアナリティクス / Google Search Console / Page Speed Insights |
| タスク管理 | Trello / Backlog / Google Spread Sheet（WBS） |
| 開発スタイル | ハイブリッド型開発、チーム内レビュー体制 |
| その他 | リードエンジニアによる技術フィードバック、役員レビュ―有 |
● リニューアル作業の実装フェーズにおいて、リードエンジニアやバックエンド開発の方と協力の下でRails環境に対応させつつ実装、チーム内でコードレビューや成果物フィードバックを互いに行い、アジャイル開発体制にて作業して参りました。
● CSSの規則はBEMを使用し、PC / SPページ、レスポンシブ設計を適用。一部共通化できるものは、デザインコンポーネントに変換。SCSS技の各種検証と導入（@use、コンテナクエリ、has()…）も実施。
● Core Web Vitals（CLS）改善を目的にレイアウトシフトを分析後、画像・広告・Webフォントなど非同期で読み込まれる要素について、表示領域の事前確保と読み込み順の最適化を行い、CLSを改善。
● ワイヤーフレーム・各種デザインデータ・バナーの作成
| 使用ツール | Figma – FigJam / Photoshop / Illustrator |
| 成果物 | 新旧デザインデータ作成、デザインガイドライン、ビジュアル・バナー作成 |
| 作業領域 | ブレーンストーミング、WF作成、プロトタイピング、ユーザーペルソナ、 IA設計、ブランディング、UI改善 |
● Figmaを使用しリニューアル用新規UIデザイン作成（TOP～各種機能含め全て）、ビジュアル・バナー作成、ガイドライン作成、リニューアル前後のデザインデータ整備とトレース、トンマナ調整
● Light houseなどでサイトの改善部分を提案、リニューアルに当たってツールの導入の提案、ユーザーペルソナ設定に関してもサポート
● 主にWFやホワイトボード、デザインでもメインは Figma を使用し、リニューアル要のPC画面とモバイル画面を作成しました。ブランドイメージに沿って、コントラストや識字率などアクセシビリティの向上も考慮しつつ、設計と制作を進めて参りました。
● 素材などはPhotoshop、Illustrator、Figmaで画像を必要、ご要望に応じて適時作成
● Figma生成データのチーム内管理を強化（デザインガイドラインをもとに、スタイルガイドやデザインコンポーネントの体系的管理）