Astroでマルチクリエイターとしてのポートフォリオサイトを構築・リリースした話
こんにちは、しんさんわーくす（@shinsanworks）です。
私は普段、イラスト制作、フリーBGMやAudiostockでの楽曲販売、そしてプログラミング（Web開発など）と、領域を絞らずに「ものづくり」を続けています。
これまでそれぞれの活動場所がバラバラに散らばっていたのですが、
「自分のすべてのクリエイティブ（イラスト・音楽・プログラミング開発）を1つの世界観に集約したポータルサイトが欲しい」
と思い立ち、今注目のフロントエンドフレームワーク「Astro」を使ってオリジナルのポートフォリオサイトを構築しました。
先日、無事に自分のドメイン（Xserver環境）へデプロイしてリリースできたので、
今回はその構築プロセスや、開発中に直面した泥臭い技術的なトラブルとその解決策について、体験談をまとめておこうと思います。
なぜ「Astro」を選んだのか？
ポートフォリオサイトを作るにあたり、重視したのは「圧倒的な表示速度」と「コンポーネント指向のデザインのしやすさ」でした。
すでにメインのブログをWordPressで運用していますが、
ポートフォリオ部分は極限まで無駄を削ぎ落とした「静的サイト」として爆速で動かしたかったため、
SSG（静的サイト生成）に非常に強い Astro（v4系） をチョイス。
コンポーネントごとにHTML/CSSを閉じ込めておけるため、今後の機能拡張や楽曲・イラストの追加がメンテナブルに行える点も、非常に魅力的でした。
サイトのデザインとこだわりのポイント
今回のサイトのコンセプトは、ヒーロービューのキャッチコピーにも焼き込んだ「世界観を、ひとつに紡ぐ。」です。
自作のメインイラストにデザインソフト側で直接キャッチコピーを焼き込み、最上部にドカンと配置しました。
- Illustrationセクション： 縦長の立ち絵3枚（上段）と、横長の16:10イラスト3枚（下段）が、PC・スマホどちらの画面でも破綻せず、ビシッと美しい四角形のブロックに収まる「3列均等グリッド」をCSS Gridで制御しました。
- Musicセクション： YouTubeのフリーBGMプレイリスト埋め込みや、Audiostockのプレイヤー、Unity Asset Storeの動画などを集約。訪問者がその場で私の「音」を聴ける動線を作りました。
- Inquiry（お問い合わせ）: 個人開発で面倒になりがちな「メール送信の裏側（バックエンド）」は、外部サービスであるFormspreeに丸投げ。HTMLの
<form>属性を差し替えるだけで、自前サーバーを汚さずにお手軽問い合わせ窓口を実装しました。
開発中に直面した3つのトラブルと解決策
順調に見えた開発ですが、やはり本番デプロイ前後でいくつかトラブルが発生しました。
① YouTube埋め込みによる「スマホ表示右ズレ」問題
デプロイ後、スマホ実機（iPhoneとAndroid）で確認すると、なぜか画面全体が右側に寄ってしまい、
不自然な空白が生まれるバグが発生しました。
原因は、YouTubeからコピーしてきた <iframe> の width="560" という固定値。
スマホの画面幅を無視してはみ出していたため、以下のCSSを当てることで「16:9の比率を保ったまま画面幅に100%フィット」させ、
PCでは綺麗に中央揃え（margin: auto）になるよう補正することで解決しました。
CSS
.youtube-embed {
width: 100% !important;
max-width: 560px;
aspect-ratio: 16 / 9;
height: auto !important;
margin: 20px auto !important;
display: block;
}② 既存WordPressとの「サブディレクトリ共存」の罠
今回は、このブログのドメイン shinsanworks.com 、
つまり、WordPressが動いている環境の配下（/portal/）にサイトを載せるアプローチをとりました。
Astroでサブディレクトリ運用をする場合、初期設定のままだと画像やCSSのパスがドメイン直下を参照してしまい画面が真っ白になります。
そのため astro.config.mjs に base: '/portal/' を指定してビルド。
さらに、設置直後にWordPress側のURL制御（.htaccess）と衝突して404エラーが出たため、
WordPressの管理画面から「パーマリンク設定」を何も変えずに再保存することで、
サーバー側のルーティングをリフレッシュし、綺麗にWordPressとAstroを共存させました。
③ favicon.ico の開発環境ルーティングエラー
ローカルの開発サーバー（npm run dev）のログを見ていると、
"/portal//favicon.ico" を期待しているのにブラウザが /favicon.ico を直接見に来るため、
404エラーがコンソールに出力されていることに気づきました。
調べてみたところ、本番のXserver環境ではドメイン直下のWordPress側のファビコンが返るため実害はないようなのですが、
精神衛生上よろしくないため、Layout.astro の <head> 内に明示的にベースパス付きのicoを指定することで、
開発環境のログに出ていたエラーも解消されました。
リリースを終えて
土曜日の丸一日をフルに使ったリリース作業でしたが、夜に実機で思い通りの挙動を確認できた瞬間の達成感はひとしおでした。
これまでは各プラットフォームに散らばっていた自分の作品たちが、
このポータルページという「ひとつの器」に集まったことで、クリエイターとしての名刺代わりのWebサイトが完成したと感じています。
Git pushでの自動デプロイ（Vercel連携等）の手軽さも良いですが、
すでに自分が持っているXserverのWordPress資産（強固なドメインパワー）の配下に、
爆速で動くAstroをサクッと同居させる構成は、個人開発のポートフォリオサイトとして非常にコストパフォーマンスが高いと感じました。
これからポートフォリオサイトを作ろうと思っているマルチクリエイターの方、
あるいはWordPressのサブディレクトリにモダンな静的サイトを同居させたい方の参考になれば幸いです！
新しく完成したポータルページはこちら：
