UI 実装と CSS 設計
専任のビジュアルデザイナーではなく、デザイン資材を起点に UI を実装し、長く保守できるコンポーネント / スタイル設計へ落とし込むことを得意としています。Web コーダーとしてのキャリアからスタートしているため、HTML / CSS の精度には特に注力してきました。
取り扱える UI 技術
- CSS / Sass: スクラッチで Web ページを構築できる水準。BEM や FLOCSS による CSS 設計の経験があります。
- UI ライブラリ: Tailwind CSS (v4)、Radix UI、class-variance-authority (CVA)、clsx、Material UI、Bootstrap 4 などを案件特性に応じて使い分けます。
- コンポーネント設計: 学習系新規サービス案件では Storybook を用いて、ボタン等の共通 UI のバリエーション確認を実施しました。
- インタラクション実装: Vue.js 案件では、ハンバーガーメニュー、アコーディオンメニュー、アニメーション処理、タブ切り替え機能を実装しました。予約系プラットフォーム案件では react-modal を用いたモーダル機能を担当しました。
デザイン資材との連携
- Adobe Photoshop / Illustrator は 2014 年からの実務経験があり、XD は 2020 年からデザインからのコーディングに使用してきました。
- Web コーダー時代から、デザイン資材を正確かつ迅速に HTML / CSS へ起こす作業を意識して取り組んでおり、クロスブラウザ対応 (IE / Safari など) にも対応してきました。
- HTML メールについても、飲食情報サービス案件で EJS を用いたテンプレートリポジトリを構築し、Outlook 等のメールクライアントでも崩れにくい配信を実現しました。
提供できる価値
デザインを忠実に再現するだけでなく、CSS 設計やコンポーネント構造を整えることで、後続の開発・保守を進めやすい UI を提供します。