絵・音楽・Web 開発を同時に一人で習得する方法

要旨

漫画を描き、曲をつくり、それを載せるサイトも自ら作ろうとすると、三人分の勉強が必要だと思われがちです。しかし実際に取り組んでみると、三つを同時に学ぶほうが早いことが分かりました。三つの分野は、上達に必要な骨格がほぼ共通しているためです。本記事では、絵・音楽・Web 開発を一人で担うための、遠回りに見えて最も近い道をご紹介します。ひとつずつ順番に学んでいては、おそらく終わりは来ません。

経緯

絵と音楽とコードは、まったく違う技能に見えますが、上達の骨格はほぼ同じです。第一に構造をつかむことで、絵なら骨格とパース、音楽ならコード進行と拍、コードなら設計とデータ構造にあたります。第二に差分で表現することで、絵の明暗差、音楽の緊張と解決、UI のコントラストと余白が該当します。第三に時間で運ぶことで、漫画のコマ運び、曲の展開、ページの読み込み順とスクロールがそれにあたります。

そのため、音楽で解決の感覚を身につけると、漫画の見開きの引きが上達します。CSS でレイアウトの余白を詰めていると、構図の空間認識が鍛えられます。三つは互いの補習になり、これが同時に取り組む理由です。一分野を三年学んでから次へ進むと九年かかりますが、三つを同時に三年学ぶと、九年分に届くことがあります。分野の間で学びが転移するためです。

補足

最初の段階として、勉強から入るのではなく、完成させる作品の型を先に決めます。勉強から入ると、必ず途中で止まるためです。おすすめは、1 ページの Web 漫画と BGM 1 曲という最小単位です。この型なら三分野すべてを使い、しかも 1〜2 日で完成します。完成させること自体が最大の練習であり、三分野とも初心者のうちに 100 ページの大作を構想しても、完成には至りません。

• 漫画：4〜8 コマ、モノクロ、1 ページのみ
• 音楽：30〜60 秒、ループでよい
• Web：その二つが並ぶ 1 枚の HTML ページ

次の段階は、各分野の最初の 30 時間の使い方です。音楽理論の教科書は多くが音程・音階から始まり、これが挫折の原因になります。作曲に必要な順に、次の項目を学ぶことをおすすめします。練習としては、DAW（Studio One の無料版、Cakewalk、GarageBand など）で好きな曲のコード進行を写し、メロディだけを自ら乗せる作業を 10 曲行うと、理論書を 1 冊読むより身につきます。

• ダイアトニックコード（キーの中の 7 つの和音）。C メジャーなら C・Dm・Em・F・G・Am・Bdim
• 三大進行：カノン進行、王道進行（Ⅳ→Ⅴ→Ⅲm→Ⅵm）、小室進行（Ⅵm→Ⅳ→Ⅴ→Ⅰ）。この三つで数百曲を書けます
• ドミナントと解決：G の次に C が来ると心地よい理由。理論の中心となる部分です
• 転調と借用和音：曲に場面転換を作る技術で、漫画のコマ割りと同じ発想です

絵は量が必要ですが、やみくもに枚数を重ねても効果は上がりません。上達に役立つのは次の順です。練習としては、30 秒ドローイングを毎日 10 分行い、模写した後に見ないでもう一度描きます。この描き直しが記憶を定着させ、ただ写すだけでは手癖しか増えません。

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

Web 開発では、作品を載せるだけなら React も Vue も必要ありません。次の順に進めます。練習としては、チュートリアルを写して終わりにせず、必ず作品用に改造します。音楽プレイヤーの再生ボタンを自作のイラストに差し替えるだけでも、学習の定着が変わります。

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

一週間の回し方としては、三つを毎日均等に行うと、すべてが中途半端になります。曜日ごとに主軸を分け、次のように進めます。要は水曜日と土曜日で、ここで必ず作品をサイトに載せることで、三分野が一本につながります。絵と曲が作りっぱなしにならず、Web 開発にも実際の目的が生まれます。

• 月・木（絵）：ドローイング 10 分の後、ネームまたは作画を 2 時間
• 火・金（音楽）：コードの写しの後、30 秒の曲を 1 本仕上げる
• 水・土（Web）：その週にできた絵と曲を、実際にサイトに載せる
• 日：公開できたものを外に出し、感想を読み、休む

手を動かすことの正しい意味は、考えないことではなく、準備が完璧になるのを待たずに、未熟なまま完成させて外に出すことです。三分野に取り組んでいると、まだ足りない部分が際限なく見つかります。絵が未熟だから公開できない、曲が素人くさいから出せない、サイトの機能が足りないから告知できないと考えるうちに、何も出さないまま数年が過ぎてしまいます。完成した未熟な作品は、未完成の傑作より百倍の価値があります。前者からは感想が返り、その感想こそが独学における唯一の教師です。

よくある失敗は三つあります。第一は道具と環境を整えすぎることで、新しい液晶タブレット、DAW、フレームワークを集めることは勉強に似ていますが、勉強ではありません。第二は土台ばかり作って中身がないことで、特に Web 開発ができる方が陥りやすく、器と中身は必ず交互に作り、機能を 1 つ足したら作品を 1 本載せます。第三は三分野の進度をそろえようとすることで、得意な分野は伸び、苦手な分野は止まりますが、それで構いません。最も遅れている分野に作品の規模を合わせ、絵が遅いなら絵が 1 枚で済む形式にすることが、完成への最短距離です。

この方法で、90 日で次の段階まで到達できます。三か月で作品を持ち、それを自力で世に出せる状態になります。三分野を順番に学んでいたら、三か月では絵の基礎も終わっていません。

• 1〜30 日：絵は骨格とシルエット、音楽はダイアトニックと三つの進行、Web は HTML/CSS で 1 枚のページ。成果物は 1 ページの漫画と 30 秒の BGM
• 31〜60 日：絵はパースと背景、音楽は展開とアレンジ、Web は JavaScript で動きをつける。成果物は 4 ページの短編と曲 3 本
• 61〜90 日：絵はコマ割りと演出、音楽はミックスと音量、Web は PHP/JSON で記事を管理。成果物は連載 1 話とサイトの公開

一人ですべてを行うのは確かに大変であり、分業したほうが速い場面も多くあります。それでもこの道を選ぶ理由は、三つが同じ手から生まれると、作品に統一感が宿るためです。この場面にはこの音が要ると分かった瞬間にその音を作れ、この演出にはこの画面遷移が要ると考えた瞬間に実装でき、誰かに説明して待つ時間がなくなります。その速さは、技術の高さとは別の種類の武器です。まずは今日、1 ページの漫画と 30 秒の曲を 1 枚のページに載せるところから始め、上手くなくてよいので完成させて外に出してください。