【クリエイティブコーディング】ノンデザイナーこそコードを学べ？でも、敷居高いよね。遊んじゃおう！ブラウザでコードを書いてアートを作れるサイト５選

【AI活用】指示が基本！クリエイターが現場で使えるAI活用術｜v0、Magnific、Lovableなど特化型ツール9つ

🐱クリエイティブ系AI活用法を解説。ChatGPTやGeminiでアイデアを練り、v0やLovableで形にする。Perplexityでのリサーチ術からMagnific AIでの仕上げまで、初心者でもわかる「AI使い分け術」を紹介します。

www.atelier-monotype.com

2026.02.26

ノンプログラマーにチャンスの風が吹いている？

Webサイトやアプリを作るには、プロジェクトを立ち上げ、専門のエンジニアとデザイナーが数ヶ月かけて連携する必要がありました。しかし最近では個人がAIを駆使し、スパゲッティコードなりにもなんとか動くものができる時代。

とはいえ、AI時代につけたいスキルとして挙げられる「どんなものを作りたいか」というイメージ、作ってみること・挑戦すること自体の価値は上がる一方。

とかいう記事を書こうと思っていたんですよ。

でも、やめました。なぜなら、バイブコーディング（AIに書いてもらう、自分はコード読めないし書けないので）をかじる程度にやる自分でも「よし、今こそコードを覚えよう！」とはな離ませんね（鼻ほじほじ）。分からないからバイブコーディングをするのだし？少しもコードがわからない人間にとって、コーディングの敷居、依然として高い。

ならば、遊ぼう。

ならば、コードがよくわからないまま遊んでしまえばよいのではないか。コードわからないけど。

【遊ぼう】意識低い系がブラウザでアートを作る

本記事では有名どころののp5.js、Processingをはじめ、その他のコードでアートを描く系のツール５つをご紹介します。

クリエイティブ・コーディングはAI前から熱かった🔥

近年、NFTアートの台頭やデジタルインスタレーションの普及もあって、コードを使って視覚表現を行うクリエイティブ・コーディングで作られた作品も数多くみられるようになりました。特にプログラミング言語の一つ、JavaScriptを使用するp5.jsは、その書きやすさから教育現場やデザイナーの間で標準的なツールです。

星野源さんの『Glitch』MVの一部モーションは、 p5.jsで実装してブラクラを再現しています🐬📎#星野源 #Glitch #G3N_H0SH1NO pic.twitter.com/B8caWIRIaS

— _karudo (@_karudo) December 30, 2025

海外では「The Coding Train」などのYouTubeチャンネルが数百万人規模の登録者を抱え、数学とアートを融合させた遊びが浸透しています。一方、日本でも数学的な美しさからか、Xを中心に独自のジェネラティブアート・コミュニティが急速に発展。コードを書くだけでは終わらず、コードを気軽にツイートする文化も活発化しています。

p5.js・クリエイティブ・コーディングで遊べるサイト比較表

主要なプラットフォームの特徴を一覧表にまとめました。

サービス名	主な用途	難易度	国内/海外
p5.js	練習・学習・基本制作	★☆☆	公式（世界）
Processing	作品投稿・コード共有	★★☆	海外（主流）
NEORT	アート作品・国内SNS	★★☆	日本
P5LIVE	ライブコーディング・VJ	★★★	海外
CodePen	Web制作との融合	★★☆	海外

各ツールの詳細と「遊び方」ガイド

1. p5.js

p5.jsとは？
p5.jsの開発元が提供する、最もシンプルで標準的なオンラインエディタ。ログインして自分の作品をクラウドに保存できます。

2. Processing

Processingとは？
Processingは2001年に誕生した、クリエイティブ・コーディングの原点とも言える無料の開発ソフトです。パソコンにインストールして使用し、Javaという言語をベースに、より高度で高速な描画を可能にします。

3. NEORT（ネオルト）

NEORT（ネオルト）とは？
NEORT(ネオルト)は、日本発のデジタルアート共有プラットフォームです。非常に洗練されたUIが特徴で、作品を美しく見せることに特化しています。

4. P5LIVE

P5LIVEとは？
P5LIVEはライブコーディング（コードを書きながらリアルタイムで映像を変化させる）に特化した、ブラウザベースのツールです。

5. CodePen

CodePenとは？
CodePenはフロントエンドエンジニアがHTML/CSS/JSの腕を競うサイトですが、p5.jsの作品も非常に多いです。

AIと共作することを前提としたものづくりとは

AIありきのものづくりでは、「人間（構想）→ AI（生成）→ 人間（仕上げ）」と、ワークフローの間にAI業務が加わるスタイル。ディレクションのフローさえもクリエイター自身が受け持つ形に移行しています。

考察：プラットフォームの違いから見える「クリエイティブ」の本質

動画、音楽、アート、コーディング。全ては繋がっているけど、技術自体は別モノ。それらを組み合わせることが以前なら人力であったものの、今ではAIの力でそれらの技術習得コストが下がりつつあるのは事実。

最近の傾向として、すごいコードを書くことよりも、OpenProcessingのように「他人のコードをリミックスして新しい価値を生む」という、オープンソース的な遊びに興じる人々もちらほら。プログラミングで作るアートが、敷居を下げてくれている気もするのです。

まとめ：あなたにぴったりの遊び場はここ！

最後に、タイプ別の診断チャートをまとめます。迷ったら以下の基準で選んでみてください。

クリエイティブ・コーディングに「正解」はありません。数学が苦手でも、アルゴリズムが分からなくても、まずは1行「ellipse(50, 50, 80, 80);（円を描く）」と、書いてみませんか。テキトーに変更した数字が、あなただけのジェネラティブアートになっているかもしれませんよ。