WEBサイト
開発情報サイト
- TARGET
ターゲット - ・自分が作ったWebアプリを実際に使ってくれる人、開発の過程や制作物に興味がある人 ・AI開発に興味がある人
- PURPOSE
目的 - ・制作したWebアプリをまとめて置き、開発ブログで過程も残すためのハブサイトとして立ち上げ ・作品を並べるだけでなく、色々なものを試している「ラボ」の雰囲気を出すことを狙った
- DURATION
製作期間 - 初回制作1週間、改修1日
- TECH
使用技術 - WordPress / PHP / JavaScript / Docker / Claude Code / ChatGPT / Design
- DESIGN
デザインの意図 - 作品を一つずつ紹介するのではなく、一覧をゲームのステージのように並べて、色々な実験や研究を進めているラボのような印象にした。 訪れた人が「何を作っている人か」を一目でつかめる見せ方を優先している。 フォントも作品を一つずつ紹介するのではなく、一覧をゲームのステージのように並べて、色々な実験や研究を進めているラボのような印象にした。 訪れた人が「何を作っている人か」を一目でつかめる見せ方を優先している。 カラーはネオンカラーを意識、フォントはDotgothic 16を使い、よりゲーム・科学感を出せるデザインにした。
Episode
制作エピソード
制作に関するエピソード
「興味を惹きつけられるデザイン」
ChatGPT を使ってデザインの作成、Claude Code を使ってコーディングを行い、 オリジナルのWordPressのページを作りました。
このサイトは、「ちょっと楽しい」「ちょっと便利」をテーマに、気軽に遊べるアプリや便利ツールを公開しているサイトです。
作品を一つずつ並べるだけでなく、一覧をゲームのステージのような見せ方にして、色々なものを研究している最中のラボ、という雰囲気を出して興味を惹きつけられるようにしました。
「最初のデザインはアドセンスの審査に落ちた」
制作の途中でGoogleアドセンスの審査に一度落ちたため、構成やコンテンツを見直して改修版を作り直しました。
最初のデザインはただのwebアプリ一覧サイトになっていたので、なんのサイトなのかわかりやすいデザインに変更し、開発ブログも充実させるようにしました。
「WordPress制作でDockerを使用」
このサイトで初めて、WordPress制作の環境にDocker Desktopを取り入れました。それまではコードエディタを使用する場合、FTPを使用して毎回リモートで表示確認を行うようなやり方でした。
今回Dockerを使うことで、全てローカルで作業できるようになり、作業効率が上がりました。
ローカルで環境を立ち上げてから本番へ反映する流れを一度通したことで、それまで手作業寄りだった開発の進め方を整理できました。