このブログより先に作っていたポートフォリオサイトですが、全く更新をすることなく数年が経過してしまっておりました。
せっかく沢山写真を撮っているのに、この状況はよろしくないよなと思っていましたので、最近どんどん性能を上げているAIの力を借りてサイトをリニューアルすることにしました。
使ったのは、最初はCodexである程度進めていて、ちょうどFable5がかなり話題になっていたタイミングでClaude codeも併用するようになりました。最終的にはClaude codeをメイン運用する感じになっています。
大まかなコンセプト
HP作りなおすうえでぼんやりと考えていたのは
- 既存のサイトみたいに大きなトップ画像が少しだけマウスに追従して動いて見える
- 動きがあって視覚的に楽しめるギャラリー（スライド）の作成
- できるだけ簡単にギャラリー用の画像を追加し、自動で反映されるように
- トップページの文字等もスクロール時に動いて表示されるように
これくらいですかね。とにかく重視したかったのは2つ目と3つ目、特に3つ目の画像の追加の楽さというのは、今までの更新を怠ってしまった失敗を振り返ると、絶対に実現したいなと思っていました。
とはいえ、ギャラリーを具体的にどう見せたいかのイメージは当初は全然浮かんでいませんでしたし、画像の追加方法も何となくこうするのがいいのかなというのはありましたが、実現可能かわからないままCodexに相談し始めました。
実際にできたサイト
できたサイトがこちらです。この後画像や動画でも紹介しますが、せっかく作ったので実際に飛んで触っていただけると嬉しいです(笑)
作成しながら固めていったコンセプトとしては、前述の視覚的に楽しめる＝訪れる度に写真が変わるサイトというものでした。
サイトのトップページへ訪れていただいた際には、是非何度かリロードをしてみてください。トップ写真がランダムに入れ替わることと思います。
そして、トップ画像からスクロールすると続く、こだわって作ったギャラリー画面はこんな感じになりました。
最初に漠然と考えていたのは、サムネが動いていること（バラバラにとか整列してとかは特に具体的にはイメージしていませんでした）、好きな写真を選択すると大きく表示され、閉じなくてもそのまま次の写真へ移動していけるという感じでした。
そのイメージを伝えてCodexにデモ画面（モック）を作ってもらったところ、ほぼほぼ上の写真のようなサムネが浮遊しているギャラリーを作ってくれたので、一発で気に入って、即この方針で行こうとなりました。
それで、自分の中でイメージが膨らんでまずピンときたのは、シャッフルボタンでサムネを再配置できること⇒サムネがトランプみたいに見えてきたので、そのイメージで再配置やソートをする際はカードシャッフルするような動きを入れる、というものでした。
ただ、毎回ランダムに散らばって、探したい写真があるのに目当ての写真に辿り着けないというのも困るので、日付などでソートすると整列するようにもしてもらいました。
また、ジャンルの整理も先ほどの上のジャンルボタンで絞ることもできますし、
こちらが写真を選んだ時の画面ですが、そこのジャンル（Animal）を押すと背後でソートされるという挙動にして、使いやすさにもこだわったつもりです。
写真にはSNSのようにLikeやコメントを付けられるようにしましたので、是非積極的にご参加いただき盛り上げていただけると大変ありがたいです。よろしくお願いします。
そしていざ本番のサイト実装でも使う量の写真を準備したところ、あっという間に数百枚に達しそうなことがわかったので、トップページではランダムに100枚抽出、ギャラリー専用ページに行くとジャンル毎に全ての写真が並んでいる、という構成にしました。
ギャラリーの大まかな構成は、CodexのPlusプランの課金で5時間制限を休み休みこなすペースで数日でできあがったのですが、作っていくと細かい所も拘りたくなって、自分がウォーターマークに使っている画像をメニューボタンにしたり、更にそれを開閉する時は翼が開閉するようなイメージで動くようにし、コンタクトフォームも見た目にこだわって微調整を繰り返したり…と少しずつ細部を作っていったら結局サイト完成まで3週間くらいかかった気がします。
サイト作成終盤くらいに週間使用量制限にも引っ掛かるようになってきており、そこでClaudeのProプランにも課金し、そこでFable5の凄さを実感して、数日後にはMAXプランに上げて現在に至っております（MAXプランは1ヶ月限定で終える予定です）。
実際にサイトを動かしている動画も貼っておきます。
ギャラリーへの画像の追加方法について
もう一つのこだわり、画像追加のしやすさについても解説しておきます。
従来から、アップロード前にフリーソフト（ネタンクさんの縮小革命など）を使って、写真サイズの縮小とウォーターマークの合成をしてからアップロードをしていました。
そしてアップロードをしてからも、スライドごとに掲載する写真をライブラリから選ぶ手間等が発生していました。
なので、ギャラリーを作りながら、Codexには並行して前述の画像のリサイズとウォーターマーク付与に加え、ギャラリーと連動するジャンル等のタグを付与するソフトを作ってもらいました。
ソフト名はReWM（リサイズウォーターマーク）にしました。
複数の画像を、複数の書き出しサイズでの一括変換することが可能で、ウォーターマークの合成位置も画像上をドラッグして直感的に動かせるようにしました（動きはスムーズじゃなくてあまり使い心地のいいものにはなりませんでしたが…）。
注目はこれの右上の部分ですね。
紆余曲折ありましたが、最終的には画像に表示されている通り、
- Futured
- メインジャンル
- サイト連携用データ蓄積
- タグ
これらを付け分けることでサイトでの表示を制御しています。
まずサイト連携用データ蓄積をするかどうか、これをオンにすることで、画像変換時に別途jsonデータが蓄積保存されるようになります。
このブログで使う画像などはギャラリーに使用しないので、ここをオフにすることで、ギャラリー向け以外の単純なリサイズとウォーターマーク付与をすることが可能となっています。
そのうえで、Futuredにチェックを入れると、トップ画像のランダム抽出対象となり、それ用に大きめのサイズの画像も出力されるようになっています。
そしてタグセクションではジャンルを複数付けることができます。但し、ギャラリー専用ページではジャンルセクション毎にギャラリーが複数並ぶ仕様なので、複数のジャンルに写真が重複表示されることを防ぐために、メインジャンルというものも設定するように後から機能変更をしました。
このメインジャンルは、ジャンルが一つしか選ばれなければ自動でそれを選択し、複数ある場合は最初に付けたものを最初に選択しつつ、ドロップダウンリストで自由に選択できる仕様にして、少しでも大量の写真を捌く時に手間を減らせるよう、細かく改良を重ねてCodexに指示し直しました。
尚、スクショでは切り取っていますが、更に上部にプリセット切り替え機能があり、ポートフォリオ用やブログ用と切り替えてデフォルトの設定を変えることもできるようになっています。
ブログ用に切り替えれば前述のFutured等がオフになっており、画像も1サイズだけを書き出すという仕様に変えていたりします。
このReWMで変換した画像をワードプレスに普通にライブラリへアップロードし、先ほどから紹介しているギャラリーについては専用プラグイン（Shuffled Museum）として作成してもらっているので、そこの管理画面からジャンル等のタグ情報が蓄積されたjsonをインポートすることができるようになっています。
この画像とタグ情報両方が揃うと、自動でギャラリーを配置しているページに、ジャンル分けされた写真が表示されるという仕組みになっています。
図解（AI作成）するとこういう感じ。
これで、今後も追加したい写真をローカル環境で下処理をして、アップロードした時点で完結するという仕組みが完成しました。
ちなみにプラグイン名のShuffled MuseumもCodexが発祥です。ギャラリー名は元々はずっとdiuao-galleryみたいな仮置きで走っていたのですが、ランダムなトップ画像とギャラリーという初期の構想のモック作成時から漠然と美術館みたいなというイメージも伝えていたせいか、文章の仮置きにA shuffled museum って見出しがあったんですね（今も採用して残しています）。
この響きが結構気に入っていて、AIにも聞いたら造語っぽい言葉だってことだったので、それならプラグイン名としても個性があっていいなと思い、将来このプラグインと画像変換ソフトを配布する可能性も無きにしも非ずということで、一応正式な名称として付けることにしました。
終わりに（おまけの紹介）
こんな感じで結構こだわって作ったつもりのポートフォリオサイト、是非一度覗いて色々触ってみてください。サイトの感想なんかも、ここのコメントでも何処でもいいので残していただけると大変嬉しいです。
最後に、ポートフォリオサイトのフッターに、"おまけ"としてCodexでサイトを作りながら、合間にチャットGPTに作ってもらった愛犬のミニゲームのリンクも貼っておりますので、そちらも遊んでいただけると嬉しいです。
※当ブログの上部のメニューのおまけからもゲーム画面へ飛ぶことが可能です。
コメント