JULY 2024

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

制作期間
プロトタイプ設計：5日デザイン：5日
デザインしながらコーディング：１ヶ月

使用したテックスタック
P5.js / Illustrator / Photoshop / HTML / CSS / JavaScript

概要

落書きしか描けないツールをデザインし、制作しました。単純な落書きを楽しむためのツールとして、様々な落書きパターンを自由に選び、大きさ、色、線の太さを調整できます。さらに、落書きの保存、操作の取り消し、画面のクリア機能も備わっています。

この作品は、自分の修士課程における研究「プログラムによる落書き生成」から発展したものです。P5.jsを用いて、人の手による気まぐれな線や形をシミュレーションし、パラメータを調整することで、さまざまなスタイルの落書きを生成することを試みました。実験を重ねる中で、「このアイデアを実際のアプリケーションとして発展させられないか」と考えるようになり、本プロジェクトの開発へとつながりました。

ターゲット

• 落書きを制作・保存できるツールを求めている方
• デジタルコンテンツに興味がある方

デザイン

• 遊び心あるテーマに合わせてインターフェースをデザインしました。専門的なドローイングアプリと、ビジュアルクリエイターとしての私の個人作品の中間に位置づけられるものだと考えています。そのため、自分自身の表現方法を用いて、アプリケーション全体のインターフェースとインタラクションをデザインしました。
• ほぼすべてのボタンは初期画面に配置されており、自然な配置によってユーザーが求めるパラメータを選択できるよう誘導します。画面右上にはリアルタイムでヒントを表示するバナーもあります。
• アイコン（鉛筆、落書きスタイルアイコン）はすべて自作しました。それぞれの落書きスタイルには、対応するアイコンが用意されています。
• ユニークなインタラクションアニメーションをデザインしました。例えば、落書き範囲を選択すると、画面に実際の人間の手とほぼ同じサイズの手が表示され、範囲を示します。保存機能やクリア機能にも、それぞれ面白いアニメーション効果が付けられています。

備考｜この作品についての考え

最も自由なはずの落書きでさえ、「メニュー」「パラメータ」「モード」といった手段を介してでしか実現できないのが、この作品の裏に込めている矛盾と皮肉と考えています。

この作品を通じて、創作と技術・メディアとの関係について問いかけたいと考えました。私たちは本当に自由に創作しているのか、それともツールによって設定されたレールの上で「自由」を模倣しているだけなのでしょうか？