目標達成支援 PWA Webアプリ

制作概要

達成したい目標を入力しAPIキーを登録すると、達成までの具体的なタスクをAIが自動生成してくれるWebアプリです。PWAに対応しており、スマホのホーム画面に追加してアプリ感覚で利用できます。

  • 制作時間:約15時間
  • 担当範囲:企画 / デザイン / フロントエンド実装 / PWA化
  • 使用技術:HTML5, CSS3, JavaScript, API連携, PWA
アプリを試す(別タブで開く)

制作のポイント・工夫した点

1. API連携によるAIタスク自動生成

ユーザーが入力した大まかな目標に対し、実行可能なスモールステップのタスクへAIが分解・提案するロジックを実装しました。

2. PWA対応による操作性の向上

ManifestファイルやService Workerの設定を行い、スマートフォン上で「ホーム画面に追加」してネイティブアプリのように手軽に起動・利用できる構造に仕上げました。

3. カスタマイズできる仕様

上下キーで順番を入れ替えたり、AIが出力したものを自分なりに編集したり、新しく追加できるようにしています。




制作を通して学んだこと

外部APIとのデータやり取りやエラーハンドリングの実装、Webサイト制作から一歩進んだ「Webアプリケーション構築」の基礎技術を習得できました。

実務でもユーザーの課題を解決するツール開発や、最新技術を取り入れた仕様提案に活かしていきます。

GitHubでソースコードを見る
← トップページへ戻る