WEBサイト

開発情報サイト

WordPress PHP JavaScript Docker Claude Code ChatGPT Design
TARGET
ターゲット
・自分が作ったWebアプリを実際に使ってくれる人、開発の過程や制作物に興味がある人 ・AI開発に興味がある人
PURPOSE
目的
・制作したWebアプリをまとめて置き、開発ブログで過程も残すためのハブサイトとして立ち上げ ・作品を並べるだけでなく、色々なものを試している「ラボ」の雰囲気を出すことを狙った
DURATION
製作期間
初回制作1週間、改修1日
TECH
使用技術
WordPress / PHP / JavaScript / Docker / Claude Code / ChatGPT / Design
DESIGN
デザインの意図
作品を一つずつ紹介するのではなく、一覧をゲームのステージのように並べて、色々な実験や研究を進めているラボのような印象にした。 訪れた人が「何を作っている人か」を一目でつかめる見せ方を優先している。 フォントも作品を一つずつ紹介するのではなく、一覧をゲームのステージのように並べて、色々な実験や研究を進めているラボのような印象にした。 訪れた人が「何を作っている人か」を一目でつかめる見せ方を優先している。 カラーはネオンカラーを意識、フォントはDotgothic 16を使い、よりゲーム・科学感を出せるデザインにした。

制作エピソード

制作に関するエピソード

「興味を惹きつけられるデザイン」

ChatGPT を使ってデザインの作成、Claude Code を使ってコーディングを行い、 オリジナルのWordPressのページを作りました。

このサイトは、「ちょっと楽しい」「ちょっと便利」をテーマに、気軽に遊べるアプリや便利ツールを公開しているサイトです。
作品を一つずつ並べるだけでなく、一覧をゲームのステージのような見せ方にして、色々なものを研究している最中のラボ、という雰囲気を出して興味を惹きつけられるようにしました。

「最初のデザインはアドセンスの審査に落ちた」

制作の途中でGoogleアドセンスの審査に一度落ちたため、構成やコンテンツを見直して改修版を作り直しました。
最初のデザインはただのwebアプリ一覧サイトになっていたので、なんのサイトなのかわかりやすいデザインに変更し、開発ブログも充実させるようにしました。

「WordPress制作でDockerを使用」

このサイトで初めて、WordPress制作の環境にDocker Desktopを取り入れました。それまではコードエディタを使用する場合、FTPを使用して毎回リモートで表示確認を行うようなやり方でした。
今回Dockerを使うことで、全てローカルで作業できるようになり、作業効率が上がりました。
ローカルで環境を立ち上げてから本番へ反映する流れを一度通したことで、それまで手作業寄りだった開発の進め方を整理できました。

作品一覧へ戻る