岐阜県若者サポートステーション

担当の方が作ってくださったワイヤーフレームを見ながら、どのようなサイトにしたいか話を聞きました。 旧ホームページで伝わりづらいところを中心にデザインを考えていくことになりました。

ワイヤーフレームをもとに、デザインカンプを作成しました。
トップページに使用するカバーイラストは決まっていたので、そのイラストに合うような色を使って全体をまとめました。 そして何よりも、課題である見やすさを意識して、デザインしました。

ヒアリングで提案があった、相談窓口一覧ページの機能のデモ版をJavaScriptで作ってテストしました。
ボタンのクリックに応じた表示非表示をする機能で、あらかじめ作っておいたおかげでこの後の工程が少し楽に進められました。

デザインカンプになるべく近づけるようにコーディングをしました。
職業訓練で学んだ、ベースを作っておいて複製し、それを書き換えるという効率の良い方法を実践しました。 この手順を踏むことでかなりコーディングの時間が短縮されました。

スマートフォンとタブレット用のコーディングをしました。 ナビゲーションの項目が多く横に長いので、スマホ版ではハンバーガーメニューに差し替えました。 レスポンシブデザインには苦手意識がありましたが、スマートフォンからのアクセスは多いと思うので、なるべく見やすくなるように頑張りました。

旧ホームページと同じように、カバーイラストに文字を配置しました。
スマートフォンやタブレットでも文字が見えるように調整したり、相対値を使って工夫しました。

手順をわかりやすくするために白いボックスで区切りました。 見出しやリストも分かりやすいデザインを目指しました。

支援内容をカードにして並べて一覧にしました。

岐阜県の中のボタンをクリックすると、その地域の相談窓口がふわっと表示されます。 一番機能をこだわったところです。

アコーディオンメニューでQ&Aを作りました。

スマートフォン版ではハンバーガーメニューが表示されます。