CASE STUDY / PROTOTYPE

Next Jobs

PocketBase APIから取得した求人情報を検索・閲覧するためのSvelteKitフロントエンド。

  • SvelteKit
  • Svelte
  • PocketBase API

Problem

PocketBaseで提供される求人情報を、レスポンシブな一覧UIで見やすく提示することを目的としました。

Research

求人一覧で必要となる情報量、カードの読み取り順、狭い画面での操作性を整理しました。

Planning

表示を担当するSvelteKitフロントエンドと、データを提供するPocketBaseバックエンドを分離しました。

Implementation

UI設計、SvelteKitフロントエンド、PocketBase API連携、レスポンシブな求人一覧導線を実装しました。

Challenge

データ取得処理と表示状態を分離し、APIの応答待ちやデータ不足でも画面構造が崩れないようにする点を検討しました。

Result

求人データを検索・閲覧できる公開ポートフォリオ用プロトタイプとして、フロントエンドとバックエンドをGitHubで公開しています。

Reflection

APIの仕様とUIを同時に設計することで、必要なデータ項目と画面責務を早い段階で明確にできました。