絵と音楽とWeb開発を、同時にひとりで習得する方法

絵と音楽とWeb開発を、同時にひとりで習得する方法

──「ひとつずつ順番に」では、たぶん一生終わりません。

マンガを描き、曲をつくり、それを載せるサイトも自分で書く。こう言うと「三人分の勉強が必要ですね」と言われます。でも実際にやってみると、そうではありませんでした。三つ同時のほうが、むしろ早いのです。

この記事では、絵・音楽・Web開発をひとりで担うための、遠回りに見えていちばん近い道を書きます。

大原則：三つは別の技術ではない

最初に、いちばん大事なことを。

絵と音楽とコードは、まったく違う技能に見えます。しかし、上達に必要な骨格はほぼ同じです。

• 構造をつかむ — 絵なら骨格とパース、音楽ならコード進行と拍、コードなら設計とデータ構造
• 差分で表現する — 絵の明暗差、音楽の緊張と解決、UIのコントラストと余白
• 時間で運ぶ — マンガのコマ運び、曲の展開、ページの読み込み順とスクロール

だから、音楽で「解決」を体で覚えると、マンガの見開きの引きが上手くなります。CSSでレイアウトの余白を詰めていると、構図の空間認識が鍛えられます。三つは互いの補習になる。これが同時にやる理由です。

一分野を三年やってから次へ、では九年かかります。三つを同時に三年やると、九年分に届くことがあります。転移が効くからです。

ステップ1：最初に「作品の型」を決める

勉強から入ると、必ず途中で止まります。先に、完成させる型を決めてください。

おすすめは「1ページのWebマンガ + BGM 1曲」という最小単位です。

• マンガ：4〜8コマ、モノクロ、1ページだけ
• 音楽：30〜60秒、ループでよい
• Web：その2つが並ぶ、1枚のHTMLページ

この型なら、三分野すべてを使い、しかも1〜2日で完成します。完成すること自体が最大の練習です。100ページの大作を構想しても、三分野とも初心者のうちは絶対に終わりません。

ステップ2：各分野の「最初の30時間」でやること

音楽理論の教科書は、たいてい音程・音階から始まります。これが挫折の原因です。作曲に必要な順に学んでください。

1. ダイアトニックコード（キーの中の7つの和音）— まずこれだけ。CメジャーならC・Dm・Em・F・G・Am・Bdim。
2. 三大進行 — カノン進行、王道進行（Ⅳ→Ⅴ→Ⅲm→Ⅵm）、小室進行（Ⅵm→Ⅳ→Ⅴ→Ⅰ）。この三つだけで数百曲書けます。
3. ドミナントと解決 — なぜGの次にCが来ると気持ちいいのか。ここが理論のいちばんおいしい部分です。
4. 転調と借用和音 — 曲に「場面転換」を作る技術。マンガのコマ割りと同じ発想です。

練習法：DAW（Studio One の無料版、Cakewalk、GarageBand など何でも）を開き、好きな曲のコード進行をコピーして、メロディだけ自分で乗せる。これを10曲やると、理論書を1冊読むより身につきます。

絵は量が要りますが、無闇な枚数は効きません。効くのは次の順です。

1. アタリと骨格 — 人体は「箱と円柱」で捉える。顔から描き始めない。
2. パースと空間 — 一点透視だけでいい。背景が描けると作品が一段化けます。
3. シルエット — 黒く塗りつぶしても何のキャラか分かるか。これがキャラデザの本体です。
4. コマ割りと視線誘導 — マンガならここが最重要。絵の上手さより読みやすさが先です。

練習法：「30秒ドローイング」を毎日10分。加えて、模写したあと、見ないでもう一度描く。この「描き直し」が記憶に定着させます。ただ写すだけでは手癖しか増えません。

作品を載せるだけなら、React も Vue も不要です。順番はこうです。

1. HTML/CSS — セマンティックなタグと、Flexbox・Grid。まずここで1枚ページを完成させる。
2. 素の JavaScript — DOM操作、イベント、fetch。ページに動きをつける。
3. サーバー側 — PHP か Node。記事を毎回手書きしなくて済むようにする。
4. データの持ち方 — JSON かデータベース。ここまで来ると自分のCMSが作れます。

練習法：チュートリアルを写経して終わりにしない。写経したあと、必ず自分の作品用に改造する。「音楽プレイヤーの再生ボタンを自分のイラストに差し替える」。これだけで学習の定着率が変わります。

ステップ3：一週間の回し方

三つを毎日均等にやろうとすると、全部が中途半端になります。日を分けてください。

ポイントは水曜と土曜です。ここで必ず「載せる」ことで、三分野が一本につながります。絵と曲が作りっぱなしにならず、Web開発にも実際の目的が生まれます。

とにかく手を動かす、の正しい意味

「とにかく手を動かせ」はよく言われます。ただ、これは「考えるな」という意味ではありません。正確にはこうです。

準備が完璧になるのを待つな。下手なまま完成させて、外に出せ。

三分野をやっていると、無限に「まだ足りない部分」が見つかります。絵が下手だから公開できない。曲が素人くさいから出せない。サイトの機能が足りないから告知できない。──こうして何も出ないまま数年が過ぎます。

覚えておいてほしいのは、完成した下手な作品は、未完成の傑作より百倍価値があるということです。前者からは感想が返ってきます。後者からは何も返ってきません。

そして感想こそが、独学における唯一の教師です。

ありがちな失敗と、その回避

新しい液タブ、新しいDAW、新しいフレームワーク。道具集めは勉強に似ていますが、勉強ではありません。いま手元にあるもので1本完成させてから、次を買ってください。

とくにWeb開発ができる人が陥ります。サイト、CMS、会員機能、通知システム。器はどんどん立派になるのに、中に入れる作品が1本もない。

器と中身は、必ず交互に作ってください。機能を1つ足したら、作品を1本載せる。この順番を崩さないことです。

揃いません。得意な分野は勝手に伸び、苦手な分野は止まります。それでいいのです。いちばん遅れている分野に、作品の規模を合わせてください。絵が遅いなら、絵が1枚で済む形式にする。それが完成への最短距離です。

90日でここまで来られます

三か月で、作品を持ち、それを自力で世に出せる状態になります。三分野を順番にやっていたら、三か月では絵の基礎すら終わっていません。

最後に

ひとりで全部やるのは、たしかに大変です。分業したほうが速い場面もたくさんあります。

それでもこの道を選ぶ理由は、三つが同じ手から出てくると、作品に統一感が宿るからです。この場面にはこの音が要る、と分かった瞬間にその音が作れる。この演出にはこの画面遷移が要る、と思った瞬間に実装できる。誰かに説明して待つ時間が、ゼロになります。

その速さは、技術の高さとは別種の武器です。

まずは今日、1ページのマンガと30秒の曲を1枚のページに載せるところから始めてください。上手くなくていい。完成させて、外に出す。そこからしか何も始まりません。

── Fr.星乃歩