少数案件でも展示会のように余白と情報密度で見せる構成。
Featured Projects / Case Studies
案件数ではなく、設計密度で見せる。
1件ずつを大型のケーススタディとして構成し、課題、解決、運用設計、UIの工夫までひと続きで伝えるレイアウトにしています。
Case Study 01
Cloud Log 打刻ツール
昭和商会向けに構築した打刻管理ツール。打刻の要素を整理し、1日の勤務状態を1本のバーで直感的に可視化できるようにした。
一般的な勤怠画面は情報が散らばりやすく、1日の状態が直感的に把握しづらい。また、会社ごとの休憩ルールや有給条件に合わせた運用がしにくいことが多い。
昭和商会のHPの契約サーバー上に組み込み、データベースはGoogleスプレッドシートを活用して無料で継続運用しやすい構成を実現。
会社ルールに応じて休憩の時間の取り扱いや、有給の扱い条件などを管理者側で設定可能にし、長期的な運用変更にも対応しやすい構成にして…
- 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スプレッドシートから読み込む構成にし、更新しやすく属人化しにくい仕組みを構築。
基本情報をスプレッドシートから読み込むため、追加や編集がしやすく、非エンジニアでも更新しやすい。
- 利用者が迷わない問い合わせ導線
- 商品ごとの情報整理
- 更新しやすい情報設計
- 低コストかつ継続運用しやすい構成
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
実運用される仕組みとして設計する。
見た目の美しさだけでなく、更新しやすさ、無料寄りの構成、端末最適化、属人化しにくい運用設計までを一つの体験として整えます。
低コストで始められ、現場で回り続け、担当者が変わっても維持できること。 その三つを、見た目と運用の両方から整える設計を重視しています。
無料寄りの構成設計
既存サーバーや Google 系サービスを活かし、初期負担を抑えます。
属人化しにくい運用
更新箇所を絞り、非エンジニアでも扱いやすい運用に寄せます。
PC / スマホ両対応
情報優先度と操作導線を端末ごとに最適化し、迷わず使えるUIにします。
見た目と管理性の両立
余白、見出し、技術情報の整理で、伝わりやすさまで設計します。