NOVEMBER 2024

担当範囲
Planning / Web Design / Web Development / Creative Coding

制作期間
プロトタイプ設計：2日（自分の既存の作品を使用する）
デザイン：1日
デザインを調整しながらコーディング：22日

使用したテックスタック
P5.js / Figma / Material UI / React / Vite / Firebase

概要

これは、人型ピクトグラムを編集・保存し、他のユーザーの作品を閲覧できるWebアプリケーションです。ユーザーはインタラクティブな操作で自由にピクトグラムのポーズを調整し、自分だけのピクトグラムを作成・共有することができます。

最初にP5.jsで点・線・面を用いて基本的な人型ピクトグラムを作りました。身体の各部位は複数の頂点からなる多角形で構成されており、マウスでドラッグすることで各部位の位置を自由に変更し、さまざまなポーズを作ることができます。この制作過程がとても面白く、多くの人に共有したいと感じました。また、他の人の作品も見てみたいと思い、このアプリを開発することにしました。

情報設計

このアプリはミニマルな構成を意識して設計しており、画面は主に2つだけです：

• メイン画面：「Play」ボタンを押すと、次々と新しい人型ピクトグラムが生成され、ダンスをするようにポーズを変えながら表示され、しばらくすると消えます。ここに登場するピクトグラムは、すべてユーザーによって作られたものです。
• 編集画面：「自分のマンを作ろう」ボタンをクリックすると遷移できます。ここでは、初期ポーズのテンプレートからスタートして、ドラッグ操作でポーズを編集・保存することができます。保存後、メイン画面に戻って再び「再生」ボタンを押すと、自分が作ったピクトグラムが登場する可能性があります。

デザイン

ユーザーがピクトグラム作品に集中できるように、UIはモダンでミニマルなデザインに仕上げました。全体のUIコンポーネントは黒を基調としており、白いP5.jsのキャンバスと白いピクトグラムが視覚的に際立つように設計しています。

フロントエンド

フロントエンドでは、Reactの状態管理とp5.jsの描画キャンバスの連携について研究しました。編集機能を例にとると、下部のコントロールパネルはReactコンポーネントで構成されており、メイン画面のp5.jsキャンバスを操作し、状態をリアルタイムで同期できます。
UIの実装にはMaterial UIを使用し、公式ドキュメントを参考にしながらスタイルをカスタマイズすることで、デザインを忠実に再現しました。