少数案件でも展示会のように余白と情報密度で見せる構成。
Featured Projects / Case Studies
案件数ではなく、設計密度で見せる。
1件ずつを大型のケーススタディとして構成し、課題、解決、運用設計、UIの工夫までひと続きで伝えるレイアウトにしています。
Case Study 01
Cloud Log 打刻ツール
昭和商会向けに構築した打刻管理ツール。打刻の要素を整理し、1日の勤務状態を1本のバーで直感的に可視化できるようにした。
一般的な勤怠画面は情報が散らばりやすく、1日の状態が直感的に把握しづらい。また、会社ごとの休憩ルールや有給条件に合わせた運用がしにくいことが多い。
昭和商会のHPの契約サーバー上に組み込み、データベースはGoogleスプレッドシートを活用して無料で継続運用しやすい構成を実現。打刻情報を1日1本のバーとして視覚化し、勤務状況を直感的に把握できるUIを設計した。PCとスマホそれぞれで見やすく操作しやすいよう最適化し、ユーザー管理、打刻、出張申請、終日出勤申請などの機能も実装。さらに、管理者アカウントから休憩時間や有給条件を調整できるようにし、長期運用にも対応できる設計にした。
会社ルールに応じて休憩の時間の取り扱いや、有給の扱い条件などを管理者側で設定可能にし、長期的な運用変更にも対応しやすい構成にしている。
- 1日を1本のバーで可視化する直感的なUI
- PCとスマホそれぞれに最適化された画面設計
- 打刻だけでなく申請機能も含めて整理された情報設計
- 管理画面で運用ルールを調整できる柔軟性
Tech Stack
運用に寄り添う構成
- Hosting
- 既存契約サーバー
- Database
- Google Sheets
- Responsive UI
- PC / Smartphone optimized
株式会社昭和商会 2026
昭和商会向けに構築した打刻管理ツール。打刻の要素を整理し、1日の勤務状態を1本のバーで直感的に可視化できるようにした。
AttendanceAdmin UIGoogle Sheets
Hosting 既存契約サーバー
Database Google Sheets
Responsive UI PC / Smartphone optimized
Case Study 02
昭和商会 製品別不具合対応ハブ
昭和商会の製品ごとの不具合対応窓口を整理し、ユーザーが迷わず適切な問い合わせフォームへたどり着けるようにした問い合わせ導線ハブ。
製品ごとに問い合わせ先や対応フォームが分散すると、利用者が迷いやすく、社内側も案内や更新の管理が煩雑になりやすい。また、担当者依存の更新運用だと情報が古くなったり属人化しやすい問題があった。
商品ごとの基本情報をGoogleスプレッドシートから読み込む構成にし、更新しやすく属人化しにくい仕組みを構築。画像はCloudinaryで管理し、フロントはVercel上で運用することで、無料寄りの環境でも継続運用しやすい構成にした。各製品ごとの不具合対応フォームとしてGoogleフォームへの導線をまとめ、利用者が迷わず必要な窓口へ進めるUIを設計した。
基本情報をスプレッドシートから読み込むため、追加や編集がしやすく、非エンジニアでも更新しやすい。属人化を避け、長期運用しやすい構成にしている。
- 利用者が迷わない問い合わせ導線
- 商品ごとの情報整理
- 更新しやすい情報設計
- 低コストかつ継続運用しやすい構成
Tech Stack
運用に寄り添う構成
- Frontend
- Vercel
- Image hosting
- Cloudinary
- Data source
- Google Sheets
- Form
- Google Forms
株式会社昭和商会 2026
昭和商会の製品ごとの不具合対応窓口を整理し、ユーザーが迷わず適切な問い合わせフォームへたどり着けるようにした問い合わせ導線ハブ。
System DesignOperationsGoogle Sheets
Frontend Vercel
Image hosting Cloudinary
Data source Google Sheets
Approach / Strength
実運用される仕組みとして設計する。
見た目の美しさだけでなく、更新のしやすさ、無料寄りの構成、PCとスマホ両対応、そして属人化しにくい運用設計までを一つの体験として整えます。
低コストでも運用が続くこと、誰か一人に依存しないこと、そして毎日触れる画面が静かに整っていること。 その三つを同時に満たす構成を重視しています。
無料寄りの構成設計
Google Sheets、Google Forms、Cloudinary、既存サーバーなど、すでにある環境を活かして初期負担を抑えます。
属人化しにくい運用
更新箇所を分散させず、非エンジニアでも触りやすいデータ管理に寄せて、継続運用のハードルを下げます。
PC / スマホ両対応
現場で迷いなく使えるように、情報優先度と操作導線を端末ごとに最適化したUI設計を行います。
見た目と管理性の両立
単に美しいだけではなく、見出し設計、余白、タグ、技術情報の整理によって伝達力の高い画面を組み立てます。