Aoi Tools
Web制作支援ツールシリーズ

プロジェクト概要

Web制作の学習や実際の制作作業で感じた不便をもとに制作した、3つのWeb制作支援ツールシリーズ。企画・要件整理・UI設計から実装、確認、公開まで行いました。

制作目的

Web制作の中で繰り返し発生する「調べる」「構成を考える」「表示を確認する」といった作業を、必要な機能に絞ったツールで使いやすくすること。

担当範囲

企画 / 要件整理 / 情報設計 / UI設計 / デザイン方針策定 / AIを活用した実装 / 動作確認 / 改善 / 公開

AI活用

要件や必要な機能、画面構成、UIの方向性を自身で整理したうえで、Codexを実装支援として活用。実装後は画面や動作を確認し、要件や指示を見直しながら修正・改善しました。

技術構成

各ツールの目的に応じて、HTML / CSS / JavaScript / React / TypeScript / Vite / Next.jsなどを使用。Cloudflare Workersで公開しています。

公開サイト

制作背景

Aoi Toolsは、最初から3つのツールをまとめて作ろうと考えていたわけではありません。

Web制作を学んでいた頃、専門用語の意味が分からないまま使うことが多く、「見た目や動きと一緒に確認できたら分かりやすい」と考え、Webパーツ図鑑を制作しました。

その後、普段の制作で時間がかかっていたワイヤーフレーム作成を効率化するWireframe Maker、PCとスマートフォンの表示を並べて確認できるResponsive Preview Labへと展開。自分が学習や制作の中で感じた不便を一つずつツールにしたものが、Aoi Toolsです。

ツール名を選ぶと、画面と制作のポイントを切り替えられます。

Web制作を学んでいた頃、専門用語の意味が分からないまま使うことが多かった経験から制作しました。名称だけを並べるのではなく、実際の見た目や動きを確認しながら、用途やコードまで理解できる形を目指しています。

ワイヤーフレーム作成に毎回時間がかかっていたことから、よく使うHero、Features、FAQ、CTAなどをテンプレート化しました。色や装飾よりも、まずページ全体の構成を考えることに集中できるようにしています。

Webサイトを確認するとき、PC表示とスマートフォン表示を何度も切り替える手間を減らしたいと考えて制作しました。URLを一度入力するだけで、異なる画面幅を同時に確認できます。

INITIAL6画面標準表示

CURRENT390px / 1440px標準表示・必要な幅だけ追加

当初は6画面を一度に表示する仕様でしたが、完成後に自分で使ってみると、基本的な用途ではPCとスマートフォンの2画面が最も比較しやすいと判断。初期表示を2画面に絞りました。

Aoi Toolsでは、要件や必要な機能、画面構成、UIの方向性を自分で整理したうえで、Codexを実装支援として活用しています。

HTML / CSS / JavaScriptを中心に、自分で内容を確認・調整できる部分は対応し、React / TypeScript / Next.jsなど、現在の自分のスキル範囲を超える技術を使用する部分ではCodexを活用しました。

実装された内容をそのまま採用するのではなく、実際の画面や動作を確認し、使いにくい部分やデザイン上の違和感があれば、要件や指示を見直しながら修正・改善しています。

AIに実装を任せきるのではなく、自分で「何を作るか」「どう使いやすくするか」を考え、Codexを実装手段として活用しながら公開まで進めた制作です。

自分で確認 → 修正・改善 → 再度AIへ ↺

3つのツールは、それぞれ別の目的から制作を始めましたが、作っていく中でWeb制作の流れの中で使えるツールとして関連していることに気づきました。

個別のツールとして公開するだけでなく、まとめて見つけやすくするために「Aoi Tools」としてシリーズ化し、各ツールを紹介する専用サイトも制作しました。