見出し画像

コーディングが苦手なデザイナーへ [後編]

前の記事の続きです。コーディングさっぱりわからないデザイナー、どこから手をつけたもんか... 的な話、いきます。
この記事の内容はめっちゃバイアスかかってるかもしれません。自分にとって好ましいと思う習得法を書いてますが、他の人にはしんどいやつかもしれません。でも書きます。マサカリ飛んでくるかな。

ざっくり言うと「スマートさとかスムーズさとかそういうのは捨てろ」って話です。

Webフロント系からやってくのがいいです

「コードさっぱりわからん」というデザイナーがどこから学んでいったらいいのかと言うと、Webフロント系の言語から入るのがいいと思います。
すなわち、HTML・CSS・JavaScriptです。
フレームワークとか使わずベーシックな書き方で遊び始めるのが吉です。

イマドキの開発トレンドとか効率いい勉強法とかガン無視で、ガリガリと愚直に書いてくのがいいです。

制作対象がアプリの人はアプリ開発で使う言語から入りたくなるかもしれませんが、それ系の開発は環境構築がややこしかったりするので、まずはWebから入った方が挫折しにくいです。(アプリの開発環境構築わからなくて最初の一歩踏み出す前に挫折するとか、超あるあるです。)

Webフロント系なら、テキストエディタとChromeがあれば十分遊べます。

入門書の写経から入るといいです

入門書を買って書いてある通りになぞって学習するのがいいです。

「前編と言ってること違うじゃねえか」
「絵を描くのと同じじゃなかったのかよ絵を描くときに入門書とか読まねえよ」

という声が聞こえてきますが、違うのです読むのではないのです。なぞるのです。真似るのです。物心つく前の幼児が親の動きを真似るように、です。体で覚えていきます。
ここは(絵に例えるなら)「画材を使って絵を描くフェーズ」ではなく、「画材を持つために腕や手や指の使い方を覚えるフェーズ」です。
誰でも幼少期にやってるやつです。

スポーツに例えるなら、野球初心者がひたすら素振りするように、です。
サッカー初心者がひたすらリフティングするように、です。
頭は使わんでいいです。

1つ注意点としては、教材はWebサイトでなく書籍の方がいいです。

書籍に掲載されてるソースコードを目視しつつそのまま入力して、サンプルプログラムを作っていきます。
そうすると必ずミスが起きて、作ったプログラムが動かなくなります。動かないと先に進められないので、ミスの箇所を探るべく何度も見返したり試行錯誤したりします。ミスが多ければ多いほど学習量が増します。なのでなるべく雑に書いてくのがコツです。

書籍一冊やりきったら、なんとなく「こう書いたらこう動く」っていうのが肌感覚としてわかってきます。(理屈や理論はわかってなくていいです。)

そしたら次は自分の作りたいものを、その肌感覚のままに作るといいです。
当然うまく動かなくてググりつつ試行錯誤しつつ書いてくことになりますが、ひたすら書いて動かしてを繰り返していけば、そのうち頭で考えるよりも先に手がコード打ってるような状態になってきます。

そこまで来たら、そこから先はあなた次第です。
UIのインタラクション検証のためにコード書いてたり、簡易ユーザテストのためのデモを作ったりして、デザインの精度向上に役立てても良い。
知識を深めてパフォーマンスや拡張性や保守性まで配慮したコード書いて、本格的なエンジニアリングに踏み込んで行ってもいい。
プロダクトと自動同期するデザインシステム作ったっていい。
コード書くのやめてワイヤフレーム作成やビジュアル構築に専念してもいい。ユーザリサーチに専念したっていい。

どう行動しても、何を目指しても、思考や表現の幅・深さが以前より増していることは間違いないです。

ただおそらく、多くの人にとって「肌感覚でなんかわかる」という状態に至るまでが大変だと思われます。
こればっかりは「時間をかける」以外の解決策を私は知りません。
時間かける甲斐はあります。筋肉と同じくらい裏切らないです。

わからない時はわかる人に聞く

習得過程で、どうしても先に進めなくなってしまうことがあります。
書籍の説明が不十分だったり端折られてたり、検索して調べようにも用語がわからなかったり。ブラウザの仕様に不具合あったり。
そういう場合は詳しい人に聞くしかないです。職場にエンジニアがいたらその人に聞くのがいいでしょう
聞く相手が居ないなら、Twitterとかで知らない人に質問ぶつけても面白いかもしれません。

ただ、コーディング初心者からプロのエンジニアへの質問の仕方については、注意点があります。
「ここでつまづいた!どうしたらいい!?」と聞くのはいいんですけど、「JavaScriptの書き方教えて!」みたいな聞き方はしない方がいいです。

デザイナーは自分の脳内にある形や動きを画面上に再現するためにコードを書くので、「忠実に」「格好よく」「面白く」とかが重要であり、それがモチベーションになります。初心者であるほどその傾向強いです。

一方でエンジニアは開発効率とか保守性とかコードの可読性とかを重視します。熟練者であるほど。

なので、コーディング初心者デザイナーに対して熟練者エンジニアがアドバイスをするのは難しいです。有効なアドバイスをするには、己の正義を曲げないといけなかったりします。

躓き解消の助力を乞うのは良いけど、アドバイスは求めない方がいいです。
下手すりゃ怒られて心折られます。
アドバイスを求めるのは、初心者レベルを脱して「品質いいコードを書きたい」と思ってからです。

まとめ

コーディングは画材であり、素材でもあります。
コードは書くものでなく描くものです。
コーディングは頭でなく体で覚えます。

実務レベルに至るまでにどれだけ時間かかるのかとか、発想が技術知識に制限されそうで嫌だとか、自分の目指すデザイナー像とマッチしないとか、いずれAIが代替するから不要とか、そういうのは一旦脇へおいときましょう。

コーディングスキルが表現の幅を拡げるのは間違いないです。
自分のイメージ通りのビジュアルやインタラクションを実現できることは果てしなく楽しいです。
紙とクレヨンを与えられた幼児のように、図画工作の時間に熱狂する小学生のように、ただ描いてりゃいいのです。そこに恐れるものはないです。

えらいマッチョで幼稚な主張ですみません。
繰り返してればそのうち無意識に出来るようになる、ていうそれだけのことを長々書いてしまいました。

最後にバランスとり

つらつら書いた文章を最後まで読んでいただいてありがとうございます。
ここまで読んでくださった方は、多分真面目な人なんだと思います。
「なるほど時間かけて頑張らなきゃな!でも忙しくて時間ないな!なんで時間作れないんだダメだ自分ゴミだ…」と真面目余って思いつめられたら申し訳ないんで、ツモマーさんの記事貼ってバランスとっておきます。

以上でーす。

この記事が気に入ったらサポートをしてみませんか?