絵と音楽とWeb開発を、同時にひとりで習得する方法
──「ひとつずつ順番に」では、たぶん一生終わりません。
マンガを描き、曲をつくり、それを載せるサイトも自分で書く。こう言うと「三人分の勉強が必要ですね」と言われます。でも実際にやってみると、そうではありませんでした。三つ同時のほうが、むしろ早いのです。
この記事では、絵・音楽・Web開発をひとりで担うための、遠回りに見えていちばん近い道を書きます。
大原則：三つは別の技術ではない
最初に、いちばん大事なことを。
絵と音楽とコードは、まったく違う技能に見えます。しかし、上達に必要な骨格はほぼ同じです。
- 構造をつかむ — 絵なら骨格とパース、音楽ならコード進行と拍、コードなら設計とデータ構造
- 差分で表現する — 絵の明暗差、音楽の緊張と解決、UIのコントラストと余白
- 時間で運ぶ — マンガのコマ運び、曲の展開、ページの読み込み順とスクロール
だから、音楽で「解決」を体で覚えると、マンガの見開きの引きが上手くなります。CSSでレイアウトの余白を詰めていると、構図の空間認識が鍛えられます。三つは互いの補習になる。これが同時にやる理由です。
一分野を三年やってから次へ、では九年かかります。三つを同時に三年やると、九年分に届くことがあります。転移が効くからです。
ステップ1：最初に「作品の型」を決める
勉強から入ると、必ず途中で止まります。先に、完成させる型を決めてください。
おすすめは「1ページのWebマンガ + BGM 1曲」という最小単位です。
- マンガ：4〜8コマ、モノクロ、1ページだけ
- 音楽：30〜60秒、ループでよい
- Web：その2つが並ぶ、1枚のHTMLページ
この型なら、三分野すべてを使い、しかも1〜2日で完成します。完成すること自体が最大の練習です。100ページの大作を構想しても、三分野とも初心者のうちは絶対に終わりません。
ステップ2：各分野の「最初の30時間」でやること
◆ 音楽理論 — 順番を間違えないこと
音楽理論の教科書は、たいてい音程・音階から始まります。これが挫折の原因です。作曲に必要な順に学んでください。
- ダイアトニックコード（キーの中の7つの和音）— まずこれだけ。CメジャーならC・Dm・Em・F・G・Am・Bdim。
- 三大進行 — カノン進行、王道進行（Ⅳ→Ⅴ→Ⅲm→Ⅵm）、小室進行（Ⅵm→Ⅳ→Ⅴ→Ⅰ）。この三つだけで数百曲書けます。
- ドミナントと解決 — なぜGの次にCが来ると気持ちいいのか。ここが理論のいちばんおいしい部分です。
- 転調と借用和音 — 曲に「場面転換」を作る技術。マンガのコマ割りと同じ発想です。
練習法：DAW（Studio One の無料版、Cakewalk、GarageBand など何でも）を開き、好きな曲のコード進行をコピーして、メロディだけ自分で乗せる。これを10曲やると、理論書を1冊読むより身につきます。
◆ 絵 — 模写ではなく「観察して描き直す」
絵は量が要りますが、無闇な枚数は効きません。効くのは次の順です。
- アタリと骨格 — 人体は「箱と円柱」で捉える。顔から描き始めない。
- パースと空間 — 一点透視だけでいい。背景が描けると作品が一段化けます。
- シルエット — 黒く塗りつぶしても何のキャラか分かるか。これがキャラデザの本体です。
- コマ割りと視線誘導 — マンガならここが最重要。絵の上手さより読みやすさが先です。
練習法：「30秒ドローイング」を毎日10分。加えて、模写したあと、見ないでもう一度描く。この「描き直し」が記憶に定着させます。ただ写すだけでは手癖しか増えません。
◆ Web開発 — フレームワークから入らない
作品を載せるだけなら、React も Vue も不要です。順番はこうです。
- HTML/CSS — セマンティックなタグと、Flexbox・Grid。まずここで1枚ページを完成させる。
- 素の JavaScript — DOM操作、イベント、fetch。ページに動きをつける。
- サーバー側 — PHP か Node。記事を毎回手書きしなくて済むようにする。
- データの持ち方 — JSON かデータベース。ここまで来ると自分のCMSが作れます。
練習法：チュートリアルを写経して終わりにしない。写経したあと、必ず自分の作品用に改造する。「音楽プレイヤーの再生ボタンを自分のイラストに差し替える」。これだけで学習の定着率が変わります。
ステップ3：一週間の回し方
三つを毎日均等にやろうとすると、全部が中途半端になります。日を分けてください。
| 曜日 | 主軸 | やること |
|---|---|---|
| 月・木 | 絵 | ドローイング10分 → ネーム or 作画2時間 |
| 火・金 | 音楽 | コード写経 → 30秒の曲を1本仕上げる |
| 水・土 | Web | その週にできた絵と曲を、実際にサイトに載せる |
| 日 | 公開 | できたものを外に出す。感想を読む。休む。 |
ポイントは水曜と土曜です。ここで必ず「載せる」ことで、三分野が一本につながります。絵と曲が作りっぱなしにならず、Web開発にも実際の目的が生まれます。
とにかく手を動かす、の正しい意味
「とにかく手を動かせ」はよく言われます。ただ、これは「考えるな」という意味ではありません。正確にはこうです。
準備が完璧になるのを待つな。下手なまま完成させて、外に出せ。
三分野をやっていると、無限に「まだ足りない部分」が見つかります。絵が下手だから公開できない。曲が素人くさいから出せない。サイトの機能が足りないから告知できない。──こうして何も出ないまま数年が過ぎます。
覚えておいてほしいのは、完成した下手な作品は、未完成の傑作より百倍価値があるということです。前者からは感想が返ってきます。後者からは何も返ってきません。
そして感想こそが、独学における唯一の教師です。
ありがちな失敗と、その回避
失敗1：道具と環境を整えすぎる
新しい液タブ、新しいDAW、新しいフレームワーク。道具集めは勉強に似ていますが、勉強ではありません。いま手元にあるもので1本完成させてから、次を買ってください。
失敗2：土台ばかり作って中身がない
とくにWeb開発ができる人が陥ります。サイト、CMS、会員機能、通知システム。器はどんどん立派になるのに、中に入れる作品が1本もない。
器と中身は、必ず交互に作ってください。機能を1つ足したら、作品を1本載せる。この順番を崩さないことです。
失敗3：三分野の進度を揃えようとする
揃いません。得意な分野は勝手に伸び、苦手な分野は止まります。それでいいのです。いちばん遅れている分野に、作品の規模を合わせてください。絵が遅いなら、絵が1枚で済む形式にする。それが完成への最短距離です。
90日でここまで来られます
| 期間 | 絵 | 音楽 | Web | 成果物 |
|---|---|---|---|---|
| 1〜30日 | 骨格・シルエット | ダイアトニックと3進行 | HTML/CSSで1枚ページ | 1ページマンガ＋30秒BGM |
| 31〜60日 | パースと背景 | 展開とアレンジ | JSで動きをつける | 4ページの短編＋曲3本 |
| 61〜90日 | コマ割りと演出 | ミックスと音量 | PHP/JSONで記事管理 | 連載1話＋サイト公開 |
三か月で、作品を持ち、それを自力で世に出せる状態になります。三分野を順番にやっていたら、三か月では絵の基礎すら終わっていません。
最後に
ひとりで全部やるのは、たしかに大変です。分業したほうが速い場面もたくさんあります。
それでもこの道を選ぶ理由は、三つが同じ手から出てくると、作品に統一感が宿るからです。この場面にはこの音が要る、と分かった瞬間にその音が作れる。この演出にはこの画面遷移が要る、と思った瞬間に実装できる。誰かに説明して待つ時間が、ゼロになります。
その速さは、技術の高さとは別種の武器です。
まずは今日、1ページのマンガと30秒の曲を1枚のページに載せるところから始めてください。上手くなくていい。完成させて、外に出す。そこからしか何も始まりません。
── Fr.星乃歩
この記事を読んだ方はこちらも
この記事を読んだ方はこちらも
