ポートフォリオのUIを改善した話(Webフォントと配色)

はじめに

私はフロントエンドエンジニアとして7年ほど働いています。

転職活動では、フルスタック志向であることを伝えると、「バックエンドの経験はどのくらいあるのか」と聞かれることがよくありました。職務経歴書の文面だけでは、実際にどこまでできるのかが伝わりにくいと感じ、AIがコードを書く機会が増えた今だからこそ、仕組みを理解したうえで実装できる力を磨こうと、バックエンドも含めたポートフォリオを作成中です。

現在開発中のアプリ

ストック管理アプリは、買い出しのときの「買い忘れ」と「買いすぎ」を防ぐ、在庫管理アプリです。
日用品などの在庫を登録しておくと、定期購入の周期を設定でき、買うべきタイミングでPush通知が届きます。PWAにも対応しています。

• GitHub

• 画面イメージ

• 技術スタック
  • UI: React(TypeScript)、Inertia、Tailwind CSS 4、shadcn/ui
  • サーバー: PHP(Laravel)、PostgreSQL、Docker
  • その他: PWA、Push通知

UI改善の方針

CSS

• TailwindCSSベースのshadcn/uiを導入
  • https://www.shadcn.net/ja

アイコン

• FontAwesomeを追加
  • https://fontawesome.com/search

配色

• メインカラー: #547048
• アクセントカラー: #AE5A32

Webフォント

• Zen角ゴシック New: 日本語部分に使用
• Roboto: 日付や数字系統で使用

フォントサイズ

• 本文を14pxから16pxに変更

改善前後の比較

左が改善前、右が改善後になります。比較にはClaude Artifactを使用しています。

ダッシュボード画面（抜粋）

ストック管理画面（抜粋）

ログイン画面（抜粋）

学んだこと

• デザインの方針1つでアプリの印象がかなり変わる
• ペルソナ設定時点からデザインを意識することが大切

今後の課題

• テスト実装
• デプロイ（AWSを想定）
• Push通知の検証（iPhone + Safari）