
WORKS 01
One Life
就労継続支援B型事業所 One Life の「スマホで見づらく、サービス内容が伝わりにくい」という課題を、全ページのデザイン刷新とカードUI・FAQの設計で解決しました。
STORY
課題と解決
One Lifeさまからのご依頼は、既存サイトのレスポンシブ対応でした。就労支援の利用を検討する方やそのご家族が、スマホから事業所を調べることは少なくありません。それなのに当時のサイトはスマホ表示に対応しておらず、大切な情報が届きにくい状態でした。
そこで、全ページのデザインをFigmaで再設計しました。サービス内容はカードUIで項目ごとに整理し、初めての方が不安に感じやすいことはFAQとしてまとめ、読み終わったら自然にお問い合わせへ進める流れを作りました。文字の大きさや色のコントラスト、タップのしやすさなど、福祉のサイトに求められる「見やすさ」にも配慮しています。
コーディングはトップページとお問い合わせページを担当し、残りのページは事業所内の別のメンバーへ引き継ぎました。誰が実装してもデザインが崩れないよう、Figmaデータをコンポーネント単位で整理し、余白や色のルールを明文化して受け渡しています。制作期間は約1か月です。
POINT
工夫したポイント
- 01
カードUIでサービスを整理
文章が続いていた内容を項目ごとのカードに分解。スマホの小さな画面でも、ひと目で全体がつかめるようにしました。
- 02
FAQと問い合わせへの導線
「どんな人が利用できますか?」「利用料金はどれくらい?」「在宅での作業はできますか?」——利用を迷う方の不安を先回りして解消するFAQを設け、その流れでお問い合わせへ進めるよう導線を設計しました。
- 03
引き継げるデザインデータ
コンポーネントの整理とルールの明文化により、別の担当者がコーディングしても品質が保てる状態でFigmaデータを受け渡しました。
SCREENSHOT
スクリーンショット

PC表示:トップ

スマホ表示①:トップ

スマホ表示②:選ばれる理由