いぐりーふの公式HPを作りました。どう作ったかも少し書きます
いぐりーふの公式HPを作りました。
いぐりーふは、AIを制作パートナーとして活用しながら、キャラクターIP、iOSアプリ、ゲーム、音楽、デジタルコンテンツを横断して制作していく、個人発のクリエイティブスタジオです。
まだ大きな組織というより、いろいろ作りながら少しずつ形にしている途中の創作ブランドです。
なぜ公式HPを作ったのか
これまで、アプリ制作、キャラクター制作、音楽、RPG、SNS投稿、BOOTH向けのコンテンツなど、いろいろな活動を並行して進めてきました。
ただ、活動が増えるほど、初めて見た人には全体像が伝わりにくくなっていました。
Creator Hub MiniというiOSアプリがある。
いーきゅるんちゃんの大冒険というゲーム企画がある。
ぐるみというキャラクターがいる。
いー☆ぐるんという活動名もある。
それぞれは自分の中ではつながっているのですが、外から見ると少し散らばって見えるかもしれません。
そこで、それらを「いぐりーふ」という創作ブランドとして整理する場所を作りたいと思いました。
問い合わせ獲得を強く狙う営業サイトというより、
何をしているのか
どんな世界観なのか
どんなプロジェクトがあるのか
が1ページで分かる、ポートフォリオ兼LPのような公式HPです。
AIに相談しながら作った
今回の公式HPも、AIに相談しながら作りました。
相談したのは、コードだけではありません。
サイト構成
セクション設計
文言整理
デザイン方針
画像の方向性
実装の進め方
こういった部分を、AIとやり取りしながら決めていきました。
自分の中では、AIは自動生成ツールというより、制作を進めるパートナーに近いです。
「こういう活動をしているけど、どう整理すれば伝わるか」
「このセクションは必要か」
「公式HPとして怪しく見えないか」
「でも、いぐりーふらしさは残したい」
そういう相談をしながら、少しずつ形にしました。
デザインで意識したこと
デザインでは、以下の要素を意識しました。
未来感
AIクリエイティブ
キャラクターIP
ネオン感
かわいい×テック
信頼感
ただ、派手にしすぎると少し怪しく見えます。
AI、キャラクター、音楽、ゲーム、アプリ。
このあたりの要素は、出し方を間違えると情報が散らかりやすいです。
なので今回は、
「読める」
「公式HPとして最低限信頼できる」
「でも、いぐりーふらしい」
というバランスを狙いました。
カラーはダークネイビーをベースに、紫、ピンク、シアンのネオン系を使っています。
暗めの背景に、少し光るような色を重ねることで、AIクリエイティブやキャラクターIPっぽさを出しつつ、文章も読めるようにしました。
画像もAIで作った
サイト内のキャラクター画像も、AI生成画像をベースに作っています。
いーきゅるん、ぐるみ、いー☆ぐるんなど、それぞれのキャラクター性が伝わるように、方向性を調整しました。
テキストだけだと、世界観は少し伝わりにくいです。
でも画像があると、
「こういう雰囲気のキャラクターなんだ」
「このブランドはこういう温度感なんだ」
というのが、一瞬で伝わりやすくなります。
もちろん、まだ完成形ではありません。
今後もキャラクターの見せ方は少しずつ整えていく予定です。
実装について
実装は、以下の構成で作りました。
Vite
React
TypeScript
Tailwind CSS
1ページLPとして作成し、セクションごとにコンポーネントを分けています。
構成はだいたい以下のような形です。
Header
Hero
About
Business
Projects
Works
Workflow
Contact
Footer
あとから修正しやすいように、文言やプロジェクト情報はデータファイルにまとめました。
公式HPは、一度作って終わりではありません。
新しいアプリが増える。
キャラクター設定が深くなる。
音楽やMVの導線を追加する。
BOOTHやSNSへのリンクを整理する。
そういう更新が出てくる前提なので、あとから変えやすい形にしておきたかったです。
公開について
公開は、GitHubにコードを置いて、Vercelでデプロイしました。
独自ドメインは igleaf.jp を取得して、Vercelに接続しています。
このあたりの設定は少しつまずいたので、GitHub、Vercel、お名前.comを使った公開手順は、別の記事で詳しくまとめようと思います。
今回は、公開手順の細かい解説よりも、「なぜ作ったか」「どういう考え方で作ったか」を中心に書いています。
作ってよかったこと
公式HPを作ってよかったのは、自分の活動が整理されたことです。
アプリ、キャラクター、音楽、ゲーム、SNS、BOOTH。
それぞれ別々に見えていた活動が、「いぐりーふ」という創作ブランドの一部として見えるようになりました。
これは、外向けのためだけではありません。
自分自身にとっても、
「今、自分は何を作っているのか」
「どのプロジェクトがどうつながっているのか」
「次に何を育てるべきか」
を考えやすくなりました。
公式HPは、ただの公開ページというより、活動を整理するための地図に近いです。
今後やりたいこと
今後は、公式HPも少しずつ育てていきたいです。
やりたいことは、いくつかあります。
Creator Hub Miniの情報を増やす
キャラクター紹介ページを作る
音楽やMVの導線を作る
BOOTHやSNSとの連携を強くする
制作過程やキャラ設定、アプリ開発記録をnoteに残す
まだ完成形ではありません。
でも、公式HPを作ったことで、いぐりーふという活動の輪郭が少し見えやすくなりました。
ここから、アプリも、キャラクターも、音楽も、ゲームも、少しずつ育てていきたいと思っています。
いぐりーふの公式HPはこちらです。
