One Life のサイトスクリーンショット(メインビジュアル)

WORKS 01

One Life

就労継続支援B型事業所 One Life の「スマホで見づらく、サービス内容が伝わりにくい」という課題を、全ページのデザイン刷新とカードUI・FAQの設計で解決しました。

クライアント
One Life(就労継続支援B型)
業種
福祉・就労支援
担当範囲
デザイン(全ページ)・コーディング(トップ/お問い合わせ)
使用技術
  • Figma
  • HTML/CSS
  • JavaScript

STORY

課題と解決

One Lifeさまからのご依頼は、既存サイトのレスポンシブ対応でした。就労支援の利用を検討する方やそのご家族が、スマホから事業所を調べることは少なくありません。それなのに当時のサイトはスマホ表示に対応しておらず、大切な情報が届きにくい状態でした。

そこで、全ページのデザインをFigmaで再設計しました。サービス内容はカードUIで項目ごとに整理し、初めての方が不安に感じやすいことはFAQとしてまとめ、読み終わったら自然にお問い合わせへ進める流れを作りました。文字の大きさや色のコントラスト、タップのしやすさなど、福祉のサイトに求められる「見やすさ」にも配慮しています。

コーディングはトップページとお問い合わせページを担当し、残りのページは事業所内の別のメンバーへ引き継ぎました。誰が実装してもデザインが崩れないよう、Figmaデータをコンポーネント単位で整理し、余白や色のルールを明文化して受け渡しています。制作期間は約1か月です。

POINT

工夫したポイント

  • 01

    カードUIでサービスを整理

    文章が続いていた内容を項目ごとのカードに分解。スマホの小さな画面でも、ひと目で全体がつかめるようにしました。

  • 02

    FAQと問い合わせへの導線

    「どんな人が利用できますか?」「利用料金はどれくらい?」「在宅での作業はできますか?」——利用を迷う方の不安を先回りして解消するFAQを設け、その流れでお問い合わせへ進めるよう導線を設計しました。

  • 03

    引き継げるデザインデータ

    コンポーネントの整理とルールの明文化により、別の担当者がコーディングしても品質が保てる状態でFigmaデータを受け渡しました。

SCREENSHOT

スクリーンショット

  • One Life PC表示トップ

    PC表示:トップ

  • One Life スマホ表示トップ

    スマホ表示①:トップ

  • One Life スマホ表示 選ばれる理由

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

CONTACT

こんなサイトを作りたい方へ

お仕事のご相談、お気軽にどうぞ。

相談してみる