JULY 2025
担当範囲
Planning / Web Design / Web Development / Creative Coding
制作期間
プロトタイプ設計：2週間
デザイン：2日
デザインを調整しながらコーディング：25日
使用したテックスタック
P5.js / TypeScript / Git / React / React Router / FireBase / Tailwind CSS

概要

「sloop」というグラフィック生命体をデザインしました。外見は、なめらかな曲線で囲まれた閉じた図形で構成された、小さなグラフィックで、常に動いています。この「sloop」には遺伝的アルゴリズムを導入しており、「繁殖」という行動を通じて進化します。異なる外見を持つ2体のsloopが繁殖すると、その子どもは両親の遺伝子を組み合わせた新たな外見を持ち、親とは異なる姿のsloopが誕生します。子どものsloopも同様に繁殖可能なため、sloopたちの外見がどのように発展していくのか予測できず、楽しくワクワクする体験が広がります。また、sloopの作成や編集が可能で、アカウントを登録することで自分だけのsloopを保存することもできます。

目的

ビジュアルアーティストおよびクリエイティブコーダーとして、自分の作品をより多くの人々に届けたい。2025年上半期には、遺伝的アルゴリズムの研究を進めており、その成果を他の人に「見せる」だけでなく、「体験してもらう」ことを目的としている。

情報設計

• ホームページ上でドラッグ＆ドロップするだけで、「sloop」たちを生成できます。生成されるsloopの外観は、他のユーザーが作成したものです。
• 複数のsloopを生成し、その繁殖の過程を観察することで、遺伝的アルゴリズムの仕組みや面白さを直感的に体験できます。
• また、もしユーザーがsloopに興味を持った場合は、「sloops」ボタンを押すことで、自由にsloopを制作・編集できます。
• 「自分だけのsloop群を持ちたい」と思ったユーザーに向けて、アカウント登録をすることで、自分のsloopを保存・生成することも可能です。

デザイン

sloopの外観は、多彩で生命力を感じさせるようにデザインされています。
この「生命感」を引き立たせるため、UIデザインには丸みのある要素を多く取り入れ、インターフェースの存在感をできるだけ抑えることで、ユーザーの視線がsloop自体に自然と向くよう工夫しています。
ログイン画面やsloopの編集画面には、現代的で信頼感のあるUIデザインを採用しています。これは一般的なウェブアプリと似たスタイルではありますが、ユーザーが安心してログイン・編集操作を行えるよう意図したものです。
また、レスポンシブデザインを採用しており、スマートフォンでもすべての機能を快適に利用することができます。