ホームページコーディングが面白くなる思考

Webデザイナーの人は、コーディングが苦手な人が多いようです。 逆に、Webエンジニアの人は、デザイン方面がかなり苦手な人が多いようです。 これって水と油なんでしょうか？ なんとなく、理系と文系みたいな対立構造が頭に浮かんできますが、 多くの場合、脳みその中で、「苦手」と思い込んでいるだけの人が多いようです。 いきなりですが、次のクイズに答えてみましょう。

男はマンションの10階に住んでいる。 朝はエレベーターで1階まで降りる。 でも、帰宅するときは必ず階段で上る。なぜ？

このクイズを聞いて、しばらく考え込んだ人は、物事に対して興味関心が高い人でしょう。 逆に、いち早く答えを知りたいと思った人は、デザインもエンジニアリングもどちらも不向きである可能性が高いです。 答えが気になって仕方がないけど、できるだけ自分で思考して解くことに、解いた後の気持ちよさがイメージできる人は、 きっと、クイズの答えが分からなくても、自分で考えた分だけ、その後に気持ちよさが来ることを知っている人なんですよね。 そして、自分で苦手と思い込んでいる人は、こうした思考のコントロールが苦手という人が多いみたいなので、 今回は、自分の周囲の多くいる「デザインはできるけど、コーディングが苦手」という人のために、どうすればコーディングを謎解きのように面白く感じることができるようになるかをブログに書いてみたいと思います。 ちなみに、クイズの答えがすぐにわかってしまった人は・・・特にコメントはないので、「今回のブログでは対象外」ということにしておきましょう。 この記事を読んだ人は、今日から無性にコーディングがしたくてたまらなくなるでしょう。 上のクイズの答えは、この記事の一番したに書いておきます。

コーディングが苦手なのではなく、正解を探すのが苦手なだけかもしれない

まず最初に、Webデザイナーの人は、「コーディングが苦手」なんでしょうか？ HTMLを書いて、CSSを書いて、JavaScriptを書いて……。 そう聞くと、なんだかプログラミングの専門知識が必要で、英単語のようなコードを大量に覚えなければならないように感じてしまいます。 でも、実際にホームページを作るときにやっていることを、一度バラバラにして考えてみてください。

「この文字をここに置きたい」 「この画像をもう少し右に寄せたい」 「スマホでは、このメニューを縦にしたい」 「この部分だけ背景色を変えたい」 「このボタンを押したら、この場所を表示したい」

これって、よく考えると全部「問題」なんですよね。 そして、その問題を解決するための道具がHTMLやCSSやJavaScriptです。 つまり、コーディングとは「コードを覚える作業」ではなく、「自分の頭の中にある答えを、コンピューターに伝える作業」なんです。 ここを理解すると、コーディングに対する見え方が少し変わってきます。 確かに、難しい命令や、アルゴリズムやコーディングルール的な話で、マウントをとってくるエンジニアも多いかもしれません。 でも、一つずつの問題を解決するという亀歩行術を実行できるようになると、コーディングって実は確実に作業を進められる側面もあるんですよね。

デザイナーは、実はコーディングに向いている

Webデザイナーがコーディングを苦手だと思ってしまう理由の一つに、「自分には論理的思考力がない」という思い込みがあります。 でも、本当にそうなのか考えてみましょう。 デザインをするときには、

「この余白だと狭い」 「ここに情報を置くと視線が散る」 「この色だと文字が読みにくい」 「この写真を大きくした方が伝わる」 「このボタンは、もっと押したくなる見た目にした方がいい」

といった判断を、何度も何度もしているはずです。 これも立派な問題解決なんです。 しかも、デザインの場合は「正解」が一つではありませんし、センスや感覚などが問われることも多いでしょう。 A案を作って、B案を作って、「やっぱりAの方がいい」と戻ることもあるし、クライアントに振り回されることも多いでしょう。 つまりデザイナーは、普段から試行錯誤を繰り返して、人とのコミュニケーションを重要視いるわけです。 実は、この能力はコーディングでもまったく同じなんですよね。 違うのは、使っている道具だけです。 デザインではPhotoshopやFigmaなどを使っていたものが、コーディングではHTMLやCSSを書き込むテキストエディタに変わるだけなんです。 「デザインはできるけどコーディングは苦手」という人は、能力が足りないのではなく、単純に「問題を解くための道具」にまだ慣れていないだけという事も多いんですよ。 多くの人が、初めて触るアプリは、どれも「苦手」と思い込んでしまう心理現象がありますからね。

「どう書くか」より「なぜそうしたいのか」を考える

コーディングを勉強するとき、多くの人は「このコードは何を意味するのか？」から入ります。 もちろん、それも必要なんですよね。 でも、これだけをやっていると、コーディングは途端につまらなくなります。 そこで、おすすめしたいのは、逆の考え方です。 「このコードを書くと何ができるのか？」ではなく、 「自分はいま、何を実現したいのか？」 から考えてみることです。 例えば、 「この見出しを画面の中央に置きたい」 と思ったとします。 そこで「中央寄せするCSSは何だっけ？」と検索するのではなく、

「なぜ中央にしたいんだろう？」 「横方向だけ中央なのか？」 「縦方向も中央なのか？」 「画面のサイズが変わったらどうしたい？」 「親要素に対して中央なのか、画面全体に対して中央なのか？」

と考えてみる。 すると、いつの間にか問題が細かく分解されています。 そして、その答えを探す。 これが実は、コーディングの面白いところなんです。 コードを書く前に、頭の中で少しずつ謎を解いていく。 そして最後に、 「なるほど。だからこのCSSを使えばいいのか！」 となる。 この瞬間が、コーディングの気持ちいいところです。 さらに、面白いのは、HTMLもCSSも、書くのが正解なのは1パターンではなくという事です。 これは「コードをデザインする」という領域で、デザイナーの人ならではの「美しいコードを書く」という思考に持っていくと、 コーディングをしているけど、まるでデザインをしているような感覚になって、楽しく感じるようになるんです。

「動かない」は失敗ではなく、最高のクイズ

コーディングが嫌いになる最大の理由は、おそらくこれなんですよ。 「書いたのに動かない」 これは、初心者にとってかなり苦痛ですよね。

書いた。 保存した。 ブラウザを更新した。 ……動かない。 「あれ？」 もう一回書き直す。 ……動かない。 「モウムリ・・・」

ここで嫌になってしまう人が多いでしょう。 でも、ここで考え方を少し変えてみるといいんです。 「動かない」ということは、実はものすごく優秀なヒントが出ている状態です。 なぜなら、目標はすでに決まっているからです。

「このボタンを右側に置きたい」 なのに左側にある。 だったら、 「右側に行かない理由は何だ？」

という謎解きが始まります。

親要素の幅がおかしいのかもしれない。 positionの指定がおかしいのかもしれない。 displayの指定がおかしいのかもしれない。 別のCSSに上書きされているのかもしれない。 ブラウザの開発者ツールを開いてみる。 CSSを見る。 チェックを外してみる。 値を変更してみる。

すると、 「あ、これだ！」 という瞬間がやってきます。 この瞬間を何度も経験すると、コーディングは「苦行」から「謎解き」に変わってきます。 これを数多く繰り返すと、面白いぐらいに、「苦手」から「楽しい」「得意」と変わってきます。 なんなら、「もっと書きたい」とすら思えてくるかもしれません。 脳の思考が、慣れたコーディングをしていると、安心感を感じるようになってきて、作業がしんどくなくなるんですよね。 エラーは敵ではなく、答えに近づくためのヒントだったという事が理解できて、これらを繰り返すことができた人が、コーディングが楽しく感じるようになるみたいですよ。

検索することは、カンニングではない

もう一つ、コーディング初心者が勘違いしやすいことがあります。 「コードを全部覚えなければならない」 という思い込みです。 これは、かなり危険な思い込みです。 現役のエンジニアだって、全部を暗記しているわけではありません。 「これってどう書くんだっけ？」 と思えばググるし、チャピります。 信頼している公式ドキュメントを見る事もあれば、 過去に自分が書いたコードを見る事だってあります。 なんなら、他の人の実装を見る。 それでいいんですよ。 コーディングやプログラミングが苦手という人は、 知らないことに苦手意識を感じているだけなんですよ。 自裁にプロのコーダーの人で、CSSのプロパティを100%覚えている人なんて、これまでみたことがありません。 そして、ブラウザの更新頻度と同時に、対応すべきプロパティの数は日々増えていきます。 そうなんですよ、知らなくても全然仕事ができるんですよね。 ただ、全く知らないということではなく、「こうすればできる」程度に理解しておくというのが、プロとアマの違いなんです。 個人的には、「他のサイトでできていることは、なんとかすれば絶対にできる」と思って、クライアントなどから、 「これできます？」と言われたら「できます」と安心感を与えるようにしています。 そして、陰で、ググる・・・ むしろ重要なのは、「検索する能力」なのかもしれませんね。 例えば、 「CSS 中央寄せ」 だけで検索するより、 「CSS flex 子要素 縦横 中央寄せ」 と検索できた方が、欲しい情報に近づきます。 さらに、 「なぜheightを指定すると中央にならないんだろう？」 と、自分の問題を言葉にできれば、もっと答えに近づけます。 これはコーディング能力そのものです。 コードを覚えている人が強いワケではないことがよくわかります。。 「何が分からないのか」を発見して、「どう調べれば答えにたどり着けるのか」を考えられる人が強いのです。

小さな「できた！」を大量に集める

コーディングが楽しくなるためには、最初から大きなホームページを完成させようとしないことも重要です。 いきなり、 「企業サイトを全部コーディングしてみよう！」 では、ちょっと荷が重すぎます。 それよりも、

「このボタンだけ作ってみよう」 「このカードを横に3つ並べてみよう」 「画像を丸くしてみよう」 「マウスを乗せたら少し動かしてみよう」 「スマホになったら縦に並べてみよう」

くらいでいいんです。 そして、一つできたら、「できた！」と喜ぶ。 これを繰り返します。 この「できた！」が非常に重要です。 コーディングというのは、最初から楽しいものではありません。 自分の頭の中にあるイメージが、ブラウザ上で実際に動いた瞬間に、少しずつ楽しくなっていきます。 そして、 「これを変えたらどうなるんだろう？」 という気持ちが出てきたら、かなりいい状態です。 そこから先は、勉強ではなく実験になっていくんですよね。 お金をもらって実験ができるという環境がある人は、すごく恵まれていると思うので、邪魔なのは、苦手意識と考えましょう。

デザインとコーディングの境界線は、意外と薄い

Webデザインとコーディングは、別々の仕事のように見えます。 でも、実際にはかなり近いところにあるんですよね。 デザインでは、「どう見せるか」を考えます。 コーディングでは、「どう実現するか」を考えます。 この二つは対立するものではありません。 むしろ、「どう見せたい？」から、 「じゃあ、どうやって実現しよう？」につながっていく関係です。 だから、Webデザイナーがコーディングを身につけると、単純に「コードも書けるようになる」だけではありません。 自分のデザインを、

「これは実装できる」 「これはちょっと難しい」 「こうすれば実現できる」

と判断できるようになります。 そして逆に、コーディングを知ることで、デザインそのものにも変化が出てきます。 「このレイアウトならレスポンシブにしたときも美しくできるな」 「この構造ならコンテンツが増えても崩れないな」 という視点が生まれてきます。 デザインとコーディングは、水と油ではありません。 実は、かなり相性のいい組み合わせだと思うんですよね。

コーディングを「作品」ではなく「ゲーム」にしてみる

個人的には、コーディングを好きになる一番の方法は、「勉強だと思わないこと」だと思っています。 例えば、目の前にデザインカンプがあるとします。 最初は、「これをコーディングしなければならない」と思う。 これでは、ちょっとつらい。 そうではなく、「この画面を完全再現するゲームを始めよう」くらいに考えてみる。 まずは、「この余白を再現できるか？」 次に、

「このカードの幅を完全に合わせられるか？」 「スマホでも同じように見せられるか？」 「このアニメーションを再現できるか？」 「このデザインをHTMLとCSSだけでどこまで近づけられるか？」

と、一つずつ攻略していく。 そうすると、同じ作業なのに、心理的にはまったく違います。 「やらされている」のではなく、 「攻略している」 状態になるからです。 そして、うまくいかなかったら、「この方法ではダメだったか」と考えて、別の方法を試す。 それでもダメなら検索する。 また試す。 そして完成する。 この繰り返しです。 考えて、試して、失敗して、調べて、また試して、最後に動く。 この流れそのものが、コーディングの醍醐味だとわかったら、あなたは立派なコーダーになっていることでしょう。

「苦手」という言葉を一度捨ててみよう

もし今、「私はコーディングが苦手だから……」と思っている人がいたら、一度だけ、その言葉を使うのをやめてみてください。 「苦手」ではなく、「まだ謎が解けていない」くらいに考えてみるといいでしょう。 この違いはかなり大きいです。 「苦手」と思うと、そこで思考が止まります。 でも、「まだ解けていない」と思えば、「じゃあ、どうすれば解けるんだ？」と考え始めます。 この「どうすれば？」が出てきた瞬間、コーディングは面白くなります。

分からないことが出てきた。 ↓ 調べる。 ↓ 試してみる。 ↓ 動かない。 ↓ なぜだろう？ ↓ もう一度考える。 ↓ 動いた！

この瞬間を何度も経験していると、いつの間にか「分からないこと」が怖くなくなります。 むしろ、「おっ、面白そうな問題が出てきた」と思えるようになります。 ここまで来れば、もうコーディングは勉強ではありません。 むしろ遊びであり、楽しいゲームなんです。

そして、コーディングが楽しくなる瞬間がやってくる

正直コーディングの面白さは、最初から分かるものではないと思います。 最初は意味不明な記号に見えます。 HTMLタグも、CSSプロパティも、JavaScriptも、何が何だか分からない。 でも、一つずつ謎を解いていく。 そしてある日、「このデザインなら、こう組めばいいな」と頭の中でコードの構造が浮かぶようになります。 ここからが面白い。 デザインを見ただけで、

「これはflexだな」 「ここはgridの方がいいな」 「この部分はabsoluteを使うと楽そうだな」 「スマホではこの構造を変えた方がいいな」

と考えられるようになる。 つまり、デザインを見た瞬間に「謎解き」が始まるようになります。 そして、その謎を一つずつ解いていく。 完成した画面を見て、「よし、再現できた！」となる。 この感覚を一度知ってしまうと、結構やみつきになります。 コーディングが得意な人というのは、最初から特別な才能を持っていた人ばかりではありません。 単純に「分からない」を楽しめるようになった人が多いのだと思います。 だから、もし今コーディングが苦手だと思っているなら、無理に「コーディングを勉強しよう」としなくてもいい。 まずは、自分が作りたいものを一つ決める。 そして、「これ、どうやって作るんだろう？」と考えてみる。 その瞬間から、もうコーディングは始まっています。

あとがき

今回の記事を書いていて、改めて思ったのですが、コーディングって結構「謎解き」に近いんですよね。 完成したコードだけを見ると、「こんなのよく書けるな……」と思うかもしれません。 でも、実際には一気に書いているわけではありません。

「ここをこうしたい」 ↓ 「じゃあ、どうすればいい？」 ↓ 「これを使えばできそう」 ↓ 「やってみよう」 ↓ 「……あれ？動かない」 ↓ 「なぜ？」 ↓ 「ここが原因だったのか！」

という、小さな謎解きの連続なんです。 そして、その一つ一つをクリアしていく。 だから、コーディングが得意な人は「頭がいい」というより、「分からない状態に耐えられる人」なのかもしれません。 分からない。 でも、ちょっと気になる。 調べてみる。 試してみる。 それでも分からない。 じゃあ、もう一回考えてみる。 そして、「あっ！」となる。 この「あっ！」が、コーディングの一番気持ちいいところです。 もし今まで、「私はデザインはできるけど、コーディングは苦手」と思っていた人がいたら、今日から少しだけ考え方を変えてみてはいかがですか？ 「コーディングが苦手」ではなく、「まだ解いていない問題がある」ぐらいの思考です。 そう考えるだけで、目の前のHTMLやCSSが、少し違って見えてくるかもしれません。 そして、その問題を一つ解いてみてください。 たった一つでも「できた！」と思ったら、 もう一つ。 また一つ・・・ 気がつけば、「もう少しここをこうしたい」と、自分からコードを書き始めているかもしれません。 そこまで来たら、もう大丈夫ですね。 あなたはコーディングを「勉強している」のではなく、「謎解きを楽しんでいる」状態になっているはずです。

クイズの答え

エレベータのボタンは、このように配置されています。 男の人は、背の低い男の子で、マンションの10階に住んでいます。 1階のボタンには手が届くが、 10階のボタンには手が届きません。 そのため、帰りは仕方なく階段を登るしかないという事です。