📝 目次
・ 概要
・ こだわったポイント
・ 苦戦したポイント
・ 今後の課題
▼ 概要
実案件として、広島県の離島にある精神科「吉田病院」の採用ページを作成しました。
ご要望の「若手採用の強化」につなげるため、地方移住に関心のあるターゲットに向け
て「開放感・あたたかみ」のあるデザインで、島の魅力と働きやすさをPRしました。
サイトURL
https://recruit.yoshida-hospital-hp.jp/lp03/
クライアント： 医療法人社団 吉田会 吉田病院
担当範囲： 企画設計 デザイン コーディング
使用言語： HTML CSS JavaScript
デザインツール： Figma Photoshop
制作期間： 2ヶ月（ 2024.6 - 8 ）
▼ こだわったポイント
✅️ 写真ギャラリーのアニメーション
吉田病院さまの ”想い” を語るエリアの直前で、ユーザーの「ここで働くワクワク感」
を高めるため、写真ギャラリーの見せ方にこだわりました。
見たときの「気持ちよい感覚」を表現するため、どんな順番で写真を出すか、スピード
をどうするか、周囲に感想を聞きながら試行錯誤しました。
- 写真をふわっと出現させて「やわらかさ」を表現しました -
✅️ スマホユーザーへの配慮
ターゲットとなる若年層を考えて、スマートフォンでの使いやすさにこだわりました。
例えばモーダル表示の際は、枠外をタッチして閉じられるように作り、スクロールで閉
じるボタンが隠れても、直感的に使えるように工夫しました。
- 使いやすさで「ユーザーの離脱」を防ぎます -
▼ 苦戦したポイント
🌀 複雑なデザインの再現
パーツが点在しているデザインの再現に苦戦しました。実装は Flexboxを入れ子にする
方法を選んだことで、階層が深く複雑なコードになりましたが、コーディングする前に
全体像を紙に書いて整理することで、作業の手戻りを防ぎました。
- PC・スマホ表示でレイアウトが変わる点にも苦戦しました -
▼ 今後の課題
💡 UXを意識したアニメーション
情報の多いページなので、ユーザーの関心が途切れないよう、インタラクティブな操作
感を高めたいと感じています。また、ホバー時にキラリと光るボタンのような「ワクワ
ク感UP」につながるアニメーションの実装を学びたいと考えています。
- スクロールに応じた「アニメーションの少なさ」に課題意識があります -
💡 保守性の向上
以下の部分では、細かい配置調整でレスポンシブ対応しましたが、calc( )関数を使って
中央を起点に配置すれば、もっと少ない調整で済んだと感じています。よりシンプルな
コードで作れるよう、実装経験を増やしたいと考えています。
- 配置手法のノウハウ不足に課題意識があります -