ジャーナル記事
NovelAIが生み出す、公式サイト新デザインの裏側
今回のブログでは、NovelAI公式サイトの最新ビジュアルアップデートをご紹介します。
あわせて、デザインに込めた意図や、NovelAIを活用した制作プロセスについてもお話しします。
この記事が、皆さんの創作のヒントになれば嬉しいです。
長くご利用いただいている方なら、ネイビーブルー基調の初期デザインや、冒険をテーマにした風景ビジュアルのページを覚えているかもしれません。これらは、初期のAI画像生成モデルで制作したものでした。
当時の紹介文はテキスト生成を強く打ち出しており、画像生成についてはページを進まないと触れられませんでした。そのため、画像生成を目的に訪れた方が「間違ったサイトに来たのでは？」と感じることもありました。
そこで、NovelAIの幅広い機能をもっとわかりやすく、かつ魅力的に伝える方法を模索することにしました。
公式サイトのトップには、画像生成とテキスト生成の両方にアクセスできるボタンが並んでいます。
そのため、どちらの機能も同時に魅力的に見せる必要がありました。
画像生成はアニメ調の作例を見せれば直感的に理解してもらえますが、テキスト生成は文字の塊をそのまま載せても魅力が伝わりにくいという課題がありました。
以前は、前景のテキストや人物と干渉しないよう、文字や人物を入れず、幻想的な風景や冒険世界の景色といったインスピレーション重視の画像を使用していました。
最初の案は、ユーザー人気の高いアニメキャラクター案――イメージキャラクターのNaiちゃんが、魔法で画像とテキストを同時に生み出す構図でした。
しかし、公式サイトのトップに大きくNaiちゃんを配置すると、キャッチコピーやボタン配置と干渉してしまいます。
さらに、自社の製品を使わずにインペイントだけで文字やイラスト部分を見やすく整えるのは、簡単ではありませんでした。そこで、コンセプトをゼロから見直すことにしました。
議論の中で思い出したのが、novelai.net/linksページで採用していた「パララックス効果」、スクロールや画面サイズに合わせて複数の画像レイヤーが別々に動く表現です。
この仕組みなら、モバイルでもデスクトップでも快適に表示でき、画面の奥行き感や臨場感も演出できます。
novelai.net/links ページの動作例
構成は3つのアセットで成り立っています。
左側の木、右側のNaiちゃんと木、そして背景の森です。
いずれもNovelAI Diffusionで生成した画像を使用しています。
大きなキャラクターを配置する方針は変えず、1枚の画像でテキスト生成と画像生成の両方を表現しつつ、テキストやボタンの配置・モバイル対応の課題を解決する必要がありました。
そこで、画像生成はNaiちゃん、テキスト生成は最新モデルのキャラクター「Erato」という二人構成を採用しました。
Initial draft
ここからはスムーズに進みました。
スタイルはNovelAIポーションと、2024年のTokyo AI Festivalブース用に制作した手描きアセットを組み合わせて使用しました。
昨年度の展示のために作成した：無限の可能性を指し示すNaiちゃん
NovelAIポーションを使うことによって、参考画像のような太めのアウトラインを作り出すことができました。キャラクターや小物を切り出しやすく、構図も二人のキャラクターに自然に焦点が合います。
最終案
完成形に近い案ができた段階で、画面サイズを大きくしても二人が端に寄りすぎないよう、画像の外側を描き足す必要がありました。
そのため、各キャラクターに追加の小物を用意しました。
Naiちゃんには絵の具や筆といった制作道具、そして大きめのイーゼルを。
Eratoにはインク瓶や資料、文学書籍が散らばったテーブルを追加しました。
透明背景のアセットを生成する際のちょっとしたコツがあります。
最終的に使わない部分をあらかじめ部分的に切り抜いておくと、AIが不要なランダム要素を描き込まず、同じ画風を保ったまま必要な部分だけを生成してくれるのです。
今回の作業では、Eratoの輪郭周りをキャンバス上で削除してから生成を行い、NovelAIに装飾的な背景やテーブル部分を自然に描き足させました。
同じ手順でNaiちゃんも切り抜き、その後、NovelAIの外部で（Photoshopを使用して）別途生成した素材を合成しました。
そのうえで、再度NovelAIポーションを適用し、AIに狙い通りの画風で背景小物を追加生成させました。
こうして生まれた背景要素を、img2imgで再生成し、全体の遠近感を揃えました。
最後に、背景用の素材を生成します：
キャラクターの切り抜きにはNovelAI ディレクターツール（**Director Tools）**を使用しました。
ワンクリックで背景を削除できるため、大幅な作業時間の短縮につながります。
背景から切り離した後は、各キャラクターを細部までリファインしました。
NAIロゴやアクセサリーを追加し、チームの意思決定で胸元の露出を控えめにする修正もこの段階で行いました（残念！）。
最後に、元の背景からキャラクターをインペイントで消去し、img2imgで同じ雰囲気と画風を持つ背景のバリエーションをいくつか生成しました。
完成した各アセットをフロントエンドに渡し、わずか1日で新しい公式サイトのトップページが完成しました。
どのデバイスや画面サイズでも自然に表示できるよう調整し、モバイル表示時に二人が背を向けてしまう問題は、向きを反転させて互いに向き合うようにすることで解決しました。
このようにアセットを複数に分けて制作しておくと、差し替えや更新が非常に簡単です。
新しいテキスト生成モデルに合わせてEratoを別キャラクターに置き換えたり、コンセプト全体をサイバーパンク版や中世版に作り変えて、「無限の可能性」というテーマを再び打ち出すこともできます。
今回の公式サイト制作で行った「生成 → 調整 → 再生成」という反復工程は、ほかのさまざまなプロジェクトにも応用可能です。
たとえば、この方法を使えばビジュアルノベルや恋愛シミュレーションゲームも驚くほど短時間で制作できます。
インペイント、NovelAIポーション、Director Toolsを組み合わせれば、ポーズ変更、色の変更、表情差分、背景生成などもすぐに行えます。
NovelAIの画像生成やツールで制作した作品があれば、ぜひXやDiscordでシェアしてください。
チーム一同、皆さんの作品を拝見できるのを楽しみにしています。
最後までお読みいただき、誠にありがとうございます。