デザインの方向性を再考。AIと私の詩をどう並べるか

最初は、いわゆる「ポートフォリオサイト」の常識に囚われていました。Adobe Portfolioのようなツールを使うと、自然と作品を時系列で並べるタイムライン表示になりますよね。それが一番わかりやすいと思っていたんです。でも、いざAIアートと詩を並べてみようとすると、どうもしっくりこない。ただの「作品置き場」になってしまっている気がして、自分の美意識が置き去りになっているような、そんな停滞感を抱えていました。

時系列という檻

技術的な実装に意識が向きすぎていたのかもしれません。どうすれば効率的に作品をアップロードできるか、どのツールが使いやすいか、そんなことばかり考えていました。AI生成画像のデータはどんどん増えていき、それらを単にアーカイブ化するだけでは、私の伝えたい「共鳴」が生まれない、という焦りを感じていました。

『標高差の恋』の世界観は、時間軸だけでなく、登場人物たちの感情の機微や、風景に宿る詩情が複雑に絡み合っています。それを時系列で淡々と見せるだけでは、物語の深層に触れることはできない。そう気づいた時、ポートフォリオサイトは単なる過去の作品の羅列ではなく、それ自体が ひとつの独立した物語空間 でなければならない、と強く思ったのです。

『共鳴』を求めて、レイアウト転換

そこで、思い切ってデザインの方針を大きく変えることにしました。Webflowを使って、詩と画像をグリッド状に「対」として配置するレイアウトへと転換したのです。これは、AIアートと詩を物理的に接近させることで、互いの意味を補完し合い、単体で見るよりも強い 感情的共鳴（エモーショナル・インパクト） を閲覧者に与えられると確信したからです。

世間では「ポートフォリオサイトでは技術的なスキルを前面に押し出すべき」とか、「AIアートと詩は別々に鑑賞されるべき」という意見も耳にします。しかし、私はあえて技術的な説明を極力排除し、『詩情』のみを抽出して展示するアプローチを選びました。このサイトは、私のAIとの共創の軌跡であり、同時に『標高差の恋』を彩るもう一つの表現の場だからです。

この新しいレイアウトのプロトタイプを5名の友人に試してもらったところ、時系列表示のプロトタイプと比較して、平均滞在時間が40%も長く、作品の世界観に深く没入できたという嬉しいフィードバックを得られました。この結果に、私の選択が間違っていなかったと確かな手応えを感じています。

詩情を刻むタイポグラフィ

詩のテキストをどのようにデザインの一部として組み込むか、ここにも多くの試行錯誤がありました。デバイスフォントでは、どうしても既成の雰囲気が拭えず、私の内面の声が表現しきれないと感じたのです。そこで、思い切って 手書き風のSVGフォントを自分で作成する ことにしました。約5時間かけて、納得のいくフォントを作り上げた時は、まるで新しいキャラクターを誕生させたかのような喜びがありました。

この手書きフォントを、AIアートにCSS Gridを用いてブラウザ上で重ね合わせる（overlay）手法を採用しています。これにより、詩が単なる説明文ではなく、グラフィックの一部として機能するようになりました。異なるディスプレイサイズでも、この 「余白の詩情」 が崩れないよう、レスポンシブデザインの工夫も凝らしています。詩とアートが互いに引き立て合い、まるでひとつの絵画のように見えることを目指しました。

ファーストビューの哲学

サイトを訪れた人が最初に目にするファーストビューは、まさにその物語の「扉」です。ここに何を置くか、その選定には特に時間をかけました。数あるAIアートと詩の中から、Midjourney v6で生成した 『静寂の庭』 というアートワークを選び、それに寄り添う詩のペアリングを2時間かけて厳選しました。

『静寂の庭』は、光と影、そして微かな風の動きを感じさせる作品です。そこに添える詩は、見る人の心に静かに語りかけ、この場所がただの作品展示ではなく、深い物語の始まりであることを伝えるものでなければなりません。このポートフォリオサイト自体が、私にとっての 『標高差の恋』という物語空間 なのです。

これからも、AIとの共創を通じて、言葉とビジュアルが織りなす新しい表現の可能性を探り続けていきたいと思っています。次回は、『標高差の恋』の主人公「アオイ」のキャラクター設定と、彼女の感情を表現するためにAIアートで試みた色彩のプロンプトについてお話しできればと思います。