上記画像のコードを見る（1/2）
（ここをクリックすると以下が開く）
/**
* @title Find Your North Star
* @author Takuya Watari (watataku)
* @date 2025-08-07
*
* @desc
* ブログ記事「【脱・何作る問題】クリエイティブコーディングで挫折しない「作品テーマとコンセプト」設定術」のアイキャッチ画像。
* 無数の選択肢という暗闇の中から、自分だけの「北極星」（テーマ・コンセプト）を見つけることで、進むべき道が照らされる様子を表現しています。
*
* @license
* This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
* http://creativecommons.org/licenses/by-nc-sa/4.0/
*
* Takuya Watari
* Website: https://watataku-artist-katsuyaku.com/
* X: https://x.com/Watataku_Art
*/
// 作品の「テーマ」と「コンセプト」を見つける、という北極星をテーマにしたアイキャッチ画像
function setup() {
createCanvas(1600, 900);
colorMode(HSB, 360, 100, 100, 100);
noLoop(); // 静的な画像なので一度だけ描画
}
function draw() {
// 1. 夜空のような背景を描く
background(230, 80, 20); // 深い夜の色
// 無数の遠い星々をパーティクルで表現
for (let i = 0; i < 20000; i++) {
let x = random(width);
let y = random(height);
let dia = random(0.5, 2);
let alpha = random(10, 60);
noStroke();
fill(230, 20, 100, alpha);
ellipse(x, y, dia, dia);
}
// 2. 中心となる「北極星」を描く
let starX = width * 0.75;
let starY = height * 0.3;
// 星の強い輝き（グロー効果）
for (let i = 200; i > 0; i -= 5) {
fill(50, 100, 100, 2); // 暖かい光の色
noStroke();
ellipse(starX, starY, i, i);
}
// 星の中心核
fill(60, 20, 100);
ellipse(starX, starY, 15, 15);
fill(0, 0, 100);
ellipse(starX, starY, 5, 5);
// 3. 北極星から伸びる「道筋」を描く
// これが見つかった「テーマ」や「コンセプト」の比喩
drawPath(starX, starY, width * 0.1, height * 0.85, 55, 100, 100, 15);
// ぼんやりとした他の可能性の道筋
drawPath(starX, starY, width * 0.5, height * 0.95, 220, 50, 100, 3);
drawPath(starX, starY, width * 0.9, height * 0.9, 220, 50, 100, 2);
// 4. テキストを追加
textFont('Helvetica, Arial, sans-serif');
textAlign(LEFT, BASELINE);
fill(0, 0, 100, 80);
textSize(32);
text("【脱・何作る問題】", 60, height - 120);
textSize(64);
text("作品のテーマとコンセプト設定術", 60, height - 50);
// 5. 全体に質感を与えるノイズを追加
addGrain();
}
// 道筋を描くための専用関数
function drawPath(startX, startY, endX, endY, hue, sat, bri, alpha) {
let ctrlX1 = startX + random(-200, 200);
let ctrlY1 = startY + random(100, 300);
let ctrlX2 = endX + random(-200, 200);
let ctrlY2 = endY - random(100, 300);
noFill();
stroke(hue, sat, bri, alpha);
strokeWeight(10);
bezier(startX, startY, ctrlX1, ctrlY1, ctrlX2, ctrlY2, endX, endY);
strokeWeight(20);
stroke(hue, sat, bri, alpha / 2);
bezier(startX, startY, ctrlX1, ctrlY1, ctrlX2, ctrlY2, endX, endY);
}
// ざらっとした質感（グレイン）を追加する関数
function addGrain() {
loadPixels();
for (let i = 0; i < pixels.length; i += 4) {
let grain = random(-15, 15);
pixels[i] = pixels[i] + grain;
pixels[i + 1] = pixels[i + 1] + grain;
pixels[i + 2] = pixels[i + 2] + grain;
}
updatePixels();
}
ワタタクこのブログ「クリエイティブコーディングロード」は、「クリエイティブコーディングの学習方法と上達方法」をテーマに、「クリエイティブコーディング1万時間の歩き方」というコンセプトを掲げて運営しています。この明確な指針があるからこそ、僕は今日まで迷わずにブログ運営を続けることができています。
この経験から、ふと思ったのです。
「ブログ運営と同じように、作品作りにも明確なテーマとコンセプトがあれば、もっと創作がうまくいくんじゃないか？」
そんな中、#minacoding2025 という企画に挑戦したとき、その重要性を改めて思い知らされました。日々のアウトプットが求められる中で、こんな悩みに直面したのです。
「クリエイティブコーディングの勉強を始めたけど、チュートリアルを真似するだけで、オリジナル作品が何も作れない…」
「上級者のようなオシャレな表現に憧れるけど、どうやってアイデアを出せばいいか分からない…」
これは、クリエイティブコーディングを学び始めた多くの人がぶつかる壁であり、まさに僕自身が長年抱えていた悩みでした。人の作品を真似するばかりで、「自分だけの表現」が見つけられず、もがき苦しんだ経験があります。
しかし、あることを意識するようになってから、この悩みはスッと消え、創作活動が驚くほどスムーズに進むようになりました。
その答えが「作品テーマ」と「作品コンセプト」を自分のためにしっかり決めてあげることだったのです。
この記事では、僕がどのようにしてテーマとコンセプトを定め、それが創作活動にどのような良い影響を与えているのか、具体的な経験を交えながらお伝えします。
この記事を読み終える頃には、「何を作ればいいか分からない」という悩みから解放され、あなたも自分だけのオリジナル作品を作るための一歩を踏み出せるはずです。
僕の「作品テーマ」と「作品コンセプト」
上記画像のコードを見る（2/2）
（ここをクリックすると以下が開く）
/**
* @title CUTE & COOL
* @author Takuya Watari (watataku)
* @date 2025-08-07
*
* @desc
* 自身の作品コンセプトである「すごくて、かわいい」と「すごくて、かっこいい」を一枚の絵の中で表現した作品。
* パステルカラーで描かれた丸みのあるキャラクターが「かわいさ」を、
* ダークな色調とシャープな直線で構成されたグリッチ風の図形が「かっこよさ」を象徴しています。
* 二つの異なる要素が共存することで生まれる、ユニークで楽しい世界観です。
*
* @license
* This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
* http://creativecommons.org/licenses/by-nc-sa/4.0/
*
* Takuya Watari
* Website: https://watataku-artist-katsuyaku.com/
* X: https://x.com/Watataku_Art
*/
// 色のパレット
let cuteColors;
let coolColors;
function setup() {
createCanvas(1600, 900);
colorMode(HSB, 360, 100, 100, 100);
// かわいい色のパレット (パステルカラー)
cuteColors = [
color(0, 50, 100), // ピンク
color(30, 60, 100), // オレンジ
color(60, 70, 100), // イエロー
color(130, 60, 100), // ミントグリーン
color(190, 60, 100), // スカイブルー
];
// かっこいい色のパレット (ダーク & シャープ)
coolColors = [
color(240, 90, 20), // ディープブルー
color(300, 80, 40), // マゼンタ
color(0, 0, 95), // ホワイト
color(200, 100, 100), // シアン
];
noLoop(); // 静的な画像なので一度だけ描画
}
function draw() {
background(240, 10, 98); // 明るい背景
// グリッド状にオブジェクトを配置
let padding = 150;
let gridSize = 120;
for (let x = padding; x < width - padding; x += gridSize) {
for (let y = padding; y < height - padding; y += gridSize) {
push();
translate(x + random(-15, 15), y + random(-15, 15)); // 少し位置をずらす
rotate(random(-0.1, 0.1));
// 50%の確率で「かわいい」か「かっこいい」オブジェクトを描画
if (random(1) < 0.5) {
drawCuteObject(0, 0, random(gridSize * 0.5, gridSize * 0.8));
} else {
drawCoolObject(0, 0, random(gridSize * 0.5, gridSize * 0.8));
}
pop();
}
}
// テキストを追加
textFont('sans-serif');
textAlign(CENTER, CENTER);
noStroke();
fill(0, 0, 20, 80);
textSize(24);
text(
"Theme: 分かりやすい芸術表現 / Concept: 「すごくて、かわいい」「すごくて、かっこいい」",
width / 2,
height - 40
);
}
// 「すごくて、かわいい」オブジェクトを描画する関数
function drawCuteObject(x, y, size) {
let c = random(cuteColors);
noStroke();
// 影
fill(0, 0, 0, 10);
rect(x + 5, y + 5, size, size, size * 0.3);
// 本体
fill(c);
rect(x, y, size, size, size * 0.3);
// 顔
fill(0, 0, 20);
let eyeSize = size * 0.1;
ellipse(x + size * 0.3, y + size * 0.4, eyeSize, eyeSize * 1.2);
ellipse(x + size * 0.7, y + size * 0.4, eyeSize, eyeSize * 1.2);
// 口
noFill();
stroke(0, 0, 20);
strokeWeight(size * 0.03);
arc(x + size * 0.5, y + size * 0.6, size * 0.3, size * 0.3, 0.2, PI - 0.2);
}
// 「すごくて、かっこいい」オブジェクトを描画する関数
function drawCoolObject(x, y, size) {
let baseColor = random(coolColors);
let accentColor = random(coolColors);
// 本体（複数の四角形を重ねてグリッチ感を出す）
for (let i = 0; i < 5; i++) {
let offsetX = random(-size * 0.1, size * 0.1);
let offsetY = random(-size * 0.1, size * 0.1);
fill(
hue(baseColor),
saturation(baseColor),
brightness(baseColor),
random(20, 80)
);
noStroke();
rect(x + offsetX, y + offsetY, size, size);
}
// シャープな線
stroke(accentColor);
strokeWeight(size * 0.05);
for (let i = 0; i < 3; i++) {
let r = size * 0.7;
let angle = random(TWO_PI);
let x1 = x + size / 2 + cos(angle) * r;
let y1 = y + size / 2 + sin(angle) * r;
let x2 = x + size / 2 + cos(angle + PI) * r;
let y2 = y + size / 2 + sin(angle + PI) * r;
line(x1, y1, x2, y2);
}
}まず、僕自身の例をお話しさせてください。僕が掲げている作品テーマとコンセプトはとてもシンプルです。
- 作品テーマ：「分かりやすい芸術表現」
- 作品コンセプト：「すごくて、かわいい」「すごくて、かっこいい」
クリエイティブコーディングの世界は、時に抽象的で難解な表現が多くなりがちです。それはそれで奥深い魅力があるのですが、僕は「芸術が苦手な人でも直感的に楽しめるもの」を中心に届けたいと考えています。
その上で、作品を見た人が「何だかよく分からないけど、すごい！」と感じる技術的な驚きと、「かわいい！」「かっこいい！」と思えるような、視覚的な楽しさを両立させることを目指しています。
この一見単純な指針が、僕のクリエイティブコーディングにおける「北極星」の役割を果たしてくれています。
なぜ最初に「テーマ」と「コンセプト」を決めるべきなのか？4つのメリット
「でも、テーマとかコンセプトとかって、なんだか難しそう…」と感じるかもしれません。しかし、これらを最初に決めておくことで、学習や制作の過程で計り知れないほどのメリットが得られます。
メリット1：作品づくりに迷わない（初動が爆速になる）
最大のメリットは、「何を作ろう？」と悩む時間が劇的に減ることです。
以前は、PCの前に座ってから「さて、今日は何を作ろうか…」とインターネットで調べて1時間経っていた、なんてこともザラでした。
しかし今は違います。「よし、今日は『すごくて、かっこいい』をテーマに、ピクセルを使った表現を試してみよう」というように、明確な目的を持ってコーディングをスタートできるのです。この初動の速さが、創作を継続する上で非常に重要になります。
メリット2：学んだことを活かしやすい（知識が定着する）
チュートリアルや本で新しい技術を学んだとき、それをどう活かせばいいか分からず、結局忘れてしまう…という経験はありませんか？
テーマとコンセプトがあれば、インプットの質が変わります。
「このランダム関数は、『すごくて、かわいい』動きに応用できそうだ」 「このシェーダーの知識は、『すごくて、かっこいい』光の表現に使えるな」
このように、学んだ知識を自分の作品コンセプトに紐づけて考える癖がつくため、知識が単なる点で終わらず、実践的なスキルとして定着しやすくなります。
メリット3：学びが深くなる（学習の羅針盤になる）
自分の目指す表現が明確になることで、「その表現を実現するためには、どんな知識が必要か？」という視点が生まれます。
僕の場合、「『すごくて、かわいい』キャラクターの動きをもっと自然にしたい」という目的のために、物理演算について学ぼう、という意欲が湧いてきました。
目的がはっきりしているため、学習意欲が継続しやすく、より専門的な分野にも踏み込んでいけるのです。
メリット4：難解な技術書にも挑戦でき、挫折を防げる
クリエイティブコーディングの世界には、『The Nature of Code』のような、自然現象をシミュレーションするための数学的・物理的な知識を扱う、少し難易度の高いバイブル的な本が存在します。
正直に言うと、文系出身で数学や物理に強い苦手意識がある僕にとって、この本は非常にハードルが高いものでした。
しかし、「この本を理解すれば、僕が目指す『すごくて、かっこいい』表現の幅が格段に広がるはずだ！」という強い動機があったからこそ、挑戦する決意ができました。
現在、僕は「NOCプロジェクト」と名付け、この『The Nature of Code』の内容を少しずつ自分なりに解釈し、発信する活動を始めています。これも全て、最初に作品テーマとコンセプトを定めたおかげです。
まずは学習計画を立てることから始めました。もし、同じように『The Nature of Code』に挑戦したいけれど不安だという方は、ぜひこちらの記事も参考にしてみてください。
→ 数学・物理が苦手でも大丈夫！『The Nature of Code』挫折しないための学習ロードマップ
たった一つのデメリットとその乗り越え方
もちろん、良いことばかりではありません。作品テーマとコンセプトを決めることには、大きなデメリットが一つだけあります。
それは、「決めるのがめちゃくちゃ難しく、時間がかかる」ということです。
自分と向き合い、何を表現したいのかを言語化する作業は、簡単ではありません。僕も、今のテーマにたどり着くまでに、かなりの時間を費やしました。
もし、コンセプト作りに悩んだら、ぜひこの一冊を手に取ってみることをお勧めします。
『コンセプトの教科書 あたらしい価値のつくりかた』（細田 高広 著）
この本は、広告業界のプロが実践するコンセプトの作り方を、非常に分かりやすく解説してくれています。僕もこの本を熟読し、書かれているワークを実践することで、自分の考えを整理し、「分かりやすい芸術表現」というテーマにたどり着くことができました。
まとめ：自分だけの「北極星」を見つけよう
クリエイティブコーディングの学習は、時に広大な海を一人で航海するようなものです。そんな時、「作品テーマ」と「作品コンセプト」は、あなたが進むべき方向を照らしてくれる「北極星」になります。
- 作品づくりに迷わなくなる
- 学んだことを活かしやすくなる
- 学びが深くなる
- 難しい挑戦への意欲が湧き、挫折しにくくなる
完璧なものである必要はありません。まずは仮のものでも大丈夫です。「自分は、こんなものを作りたいのかもしれない」という小さな光を見つけることから始めてみませんか？
その小さな光が、あなただけのオリジナル作品を生み出し、クリエイティブコーディングをさらに楽しく、奥深いものにしてくれるはずです。
ワタタクそれでは今日もレッツワクワクコーディング。