Hattのホームページを公開しました

Hattの創作活動をまとめる個人サイト「Hattのホームページ」を公開しました。

このサイトは、絵、小説、VRChat向け3Dアバター・ギミック制作を一つの入口にまとめるためのホームページです。Acecore Systemsの実績ページにも、Web制作・CMS構築の事例として掲載しました。

制作の背景

Hattは、絵や小説、VRChat向けの3Dアバター・ギミック制作など、複数の創作活動を行っています。

一方で、活動の入口はブログ、外部投稿サイト、BOOTH、YouTube、Xなどに分かれていました。すでに作品や発信先はあるものの、初めて訪れた人が「Hattが何を作っているのか」「どこから見ればよいのか」を短時間で把握しにくい状態でした。

そこで今回は、作品をすべて一つのページに詰め込むのではなく、活動の全体像を見せるハブとしてサイトを設計しました。

3つの活動をトップページで見せる

トップページでは、Hattの活動を次の3つに整理しています。

• 絵：キャラクターや世界観のメモを、記事や作品として残していく場所
• 小説：投稿サイトで公開している物語への入口と、創作まわりの記録
• モデリング：VRChat向けのアバター、ギミック、アクセサリー制作の紹介

「何をしている人なのか」を先に伝え、その後にブログ、モデリング作品、プロフィール、外部リンクへ進める構成です。個人サイトでは、見た目の印象だけでなく、活動の分類と導線設計が重要になります。

更新し続けられる静的サイトにする

構築には、Astro、TypeScript、UnoCSS、Sveltia CMS、Pagefindを使っています。

Astroで静的サイトとして配信することで、表示速度と保守性を確保しました。ブログや作品情報はCMSから編集できるようにし、コードを書かなくても発信を継続しやすい構成にしています。

サイト内検索にはPagefindを組み込みました。記事や作品が増えても、訪問者がキーワードから目的の情報へたどり着けるようにするためです。

AstroサイトでSEOやOGPを整える考え方は、Astroサイトに構造化データとOGPを実装するSEO改善ガイドでも紹介しています。

外部の活動場所も分断しない

Hattの活動は、サイト内だけで完結するものではありません。小説投稿サイト、BOOTH、YouTube、Xなど、作品ごとに適した公開場所があります。

そのため、ホームページ側では外部サービスを置き換えるのではなく、入口としてつなぐ方針にしました。たとえば、モデリングページではBOOTHで公開しているアバターやギミックに移動しやすくし、YouTubeやXへのリンクも整理しています。

個人サイトやポートフォリオサイトでは、すでにある外部アカウントを無理に統合するよりも、訪問者が迷わず移動できる導線を作るほうが効果的な場合があります。

実績としても掲載しました

Acecore Systemsの実績・ポートフォリオには、「Hattのホームページ制作」として事例を追加しました。

今回の制作は、単にページを公開するだけでなく、創作活動の整理、CMSでの更新、検索、OGP、サイトマップ、外部リンク設計まで含めたWeb制作です。小規模な個人サイトでも、公開後に育てられる構成にしておくことで、作品や記事が増えたときの価値が上がります。

ホームページ制作の進め方や費用感は、ホームページ制作の費用相場と見積もりで見るべきポイントにもまとめています。

まとめ

Hattのホームページは、絵、小説、VRChat向け3Dアバター・ギミック制作をまとめる創作活動の入口として公開しました。

Acecore Systemsでは、個人サイト、ポートフォリオサイト、事業サイトなど、目的に合わせたWebサイト制作を行っています。活動内容の整理からCMS、検索、SEO、公開後の運用までまとめて相談したい場合は、受託開発サービスまたはお問い合わせからご相談ください。