0
1
こんにちは。お久しぶりです。
数年ぶりのブログ更新となりますが、この度 パーソナルサイト（yoshvol.ddo.jp）を大幅にリニューアルいたしました！ デザイン面から技術的な部分まで手を入れたので、今回はその経緯と取り組みをまとめて紹介したいと思います。
🎨 デザイン面の大幅刷新 ── Claude Design の活用
今回のリニューアルで一番力を入れたのが、ビジュアルデザインの全面刷新です。
使用したのは Claude Design（Adobe Express）。AI の力を借りることで、これまで以上にモダンで洗練されたUI/UX を短期間で実現できました。複数のデザイン案を比較しながら方向性を決め、カラースキームやレイアウトを何度も調整してようやく納得のいく仕上がりになりました。
Claude Design を活用することで、具体的には次のような恩恵を受けました。
- プロフェッショナルなデザイン案をすばやく複数パターン生成できる
- カラースキームやレイアウトの候補を AIに提案してもらいながら比較検討できる
- デザインの反復改善がテキストベースの指示だけで完結するので圧倒的に速い
個人サイトのリニューアルで「デザイナーでもないのにどこまでできるか…」と半ば不安だったのですが、AI ツールのおかげで自分でも驚くくらいの仕上がりになりました。
🛠️ 過去記事の一括修正 ── Claude をフル活用
デザインの刷新と同時に、もう一つ大きな課題がありました。それが「過去記事のレイアウト崩れ」です。
以前使用していた WordPress テンプレートに依存した書き方をしていたため、テンプレート変更後に多くの記事でレイアウトが崩れたり、表示が乱れたりしてしまっていました。数十本ある記事を手作業で直すのは現実的ではない…そこで Claude に頼ることにしました。
具体的にやったことはこんな感じです。
- 過去記事の内容を Claude に読み込ませ、構成と文脈を把握させる
- 旧テンプレート依存の記述箇所（特殊なショートコードや HTML タグ）を特定
- 新テンプレートに合ったブロック形式・マークアップへ自動変換
- 文脈・文体・意図を保ちながら記事全体の一貫性を確認・修正
一本一本手直しすると途方もない作業量になるところでしたが、Claude のサポートのおかげで大幅に時間を短縮できました。サイト全体の品質を落とすことなく刷新を完了できたのは、Claude なしでは実現しなかったと思います。
✏️ ブログ、また書いていきます
せっかくサイトをきれいにしたので、長らく止まっていたブログの更新をここから再開します。
「完璧な記事を書かなければ」というプレッシャーが邪魔をして、気づけば数年間ほぼ放置状態になってしまっていました。反省を込めて、これからはもう少し気軽に、思ったことや学んだことをこまめにアウトプットしていきたいと思います。
扱うテーマはだいたいこのあたりを予定しています。
- テクノロジー・AI ツールの活用事例
- ウェブデザイン・フロントエンド開発
- 個人開発・ものづくりの記録
- 日々の気づき・ちょっとした Tips
頻度は週1〜2本くらいを目安にしていきたいですが、まずは続けることを優先して、無理なく更新していきます。よかったら引き続き読んでもらえると嬉しいです！
おわりに
今回のリニューアルを通じて、AI ツール（特に Claude と Adobe Design）の可能性を改めて実感しました。デザインも、記事の一括修正も、個人がひとりでここまでできる時代になったんだなと、作業しながら何度も感動しました。
新しくなったサイトを眺めながら、次の記事のネタを考えています。これからもどうぞよろしくお願いします。
それでは、また次の記事で！ 👋
