制作背景

飲食店の求人サイトでは、
「仕事内容」だけでなく、“お店の雰囲気”が応募率に大きく影響すると考えました。

そのため今回は、 あたたかさ 親しみやすさ 初めてでも入りやすい空気感を重視してデザイン設計を行いました。特に、10代〜50代以上まで幅広い年代が閲覧することを想定し、
やさしい色味と読みやすいレイアウトで構成しています。

デザインのポイント

① 親しみやすい世界観設計

飲食店らしい温かみを出すため、 ベージュ オレンジ やわらかい余白 丸みのあるデザインを使用。「応募のハードルを下げる」ことを意識しました。

② ファーストビューの追従演出

ファーストビューでは、視線誘導を意識し、
ビジュアルとテキストの配置バランスを設計。また、追従演出を入れることで、スクロール中も印象が残るUIを目指しました。

③ スマホ時のみ横スライダー実装

スマートフォン閲覧時は、求職者が直感的に情報を見られるよう、横スライダー形式を採用。PCでは一覧性を保ちつつSPでは操作しやすいUIへ切り替えています。

④ フルスクラッチ実装

テンプレートではなく、HTML / CSS をベースにフルスクラッチで制作。AIを活用しながらも、 レイアウト調整 レスポンシブ対応 UI改善 アニメーション サーバーアップロードまで含めて実装しました。

工夫したポイント

  • スマホ時のみUIを切り替え
  • 横スクロール防止対応
  • 飲食店らしい温かい配色
  • CTAの視認性改善
  • 余白設計による読みやすさ向上
  • 求職者が不安にならない導線設計

実案件を想定し、 レスポンシブ調整 overflow対策 横スクロール修正 スマホUI最適化 スライダー調整など、実務で発生しやすい課題にも対応しました。

AIを活用した制作フロー本サイトは、AIを制作補助として活用しながら、フルスクラッチで構築しています。AIによるアイデア生成やコード補助を活用しつつ、 ユーザー導線 デザイン設計 UI/UX調整 スマホ最適化 実装修正などは手動で調整。制作スピードを上げながらも、「使いやすさ」と「デザイン意図」を重視して制作しました。

使用したツール

ChatGPT / Claude Code /Visual Studio Code /Figma/ Adobe Firefly/ HTML / CSS / JavaScript / GitHub

上部へスクロール