コーディングにブランクがあるデザイナーがブランクを埋めるためにしたこと

このエントリーをはてなブックマークに追加

かれこれ5年程コーディングから離れていましたが、現在はデザインとコーディング両方行うデザイナーに戻りました。元々フルスタックなデザイナーを目指しているわけでは無く、コーディングはそれほど力をいれていない人間だったのですが、さすがに5年も離れると色んな危機感や不便に感じることがでてくるもんですね!w やっぱり出来るに越したことはない!そう思ったのが戻ったきっかけです。

デザイナーが行うコーディングってどこからどこまで?

HTML/CSS/JavaScriptの3つを主としたフロントエンドの領域です。マークアップが得意な人や、JavaScriptで複雑な動きを作るのが得意な人、色んな人がいるかもしれませんが、デザイナーが担うコーディングはHTMLによるマークアップとCSSによるスタイリングが大半のようです。

ブランクを埋めるためにしたこと

基本を一から勉強する

最初は人から教えてもらうことで、一度自分の浅はかな知識を一回リセットしました。また、基本的な内容の書籍も読みました。中でも初心者さんに分かりやすい内容だったものを紹介します。

HTML参考書籍

Webデザインの新しい教科書
この本はこれからWebデザインの世界に飛び込もうとしている初心者の方への最初の1冊として、基本が身に付く本です。インターネットの歴史やサイト設計について、HTML/CSSとは何か、その周辺の事柄(著作権、ライセンス、画像、フォーマットなど)が広く書かれています。色んな人がこの本を買ったので、会社に3冊もありますw

HTML5マークアップ 現場で使える最短攻略ガイド
「Webデザインの新しい教科書」ではカバーしきれない、HTML5の基本的なことが書かれています。HTML5の新要素・新属性の意味や使い方について1要素1P使って説明されているので、理解が深まります。

CSS参考書籍

CSS3逆引きデザインレシピ
CSS3についての内容がメインですが、冒頭部分には歴史やブラウザ戦争の話、CSSの記述方法のおさらいとして、文法やマルチクラスなど基本的な内容にも触れられています。

Web制作者のためのCSS設計の教科書
入門本ではないですが、誰が触っても構造が分かり、運用しやすいCSSを記述するための様々な手法が紹介されています。コーディングを複数で行うような大規模サイトの場合は、こういった手法が取り入れられてコードが見やすくなっています。

Javascript参考書籍

ノンプログラマのためのJavaScriptはじめの一歩
JavaScriptの入門本として、全く読めない状態から少しずつコードが読めるようになっていく快感と達成感を得られる書籍です。ひとつのサンプルを通して、ひとつひとつ丁寧に解説されているので、実際にコードを書きながら実践してみるとより理解が深まります。

上司の言葉を借りると「3日かかって読めない本は、1週間かかっても読めない」これを頭に入れて、なるべく早く読みきることを前提にしました。これはもう気合です!!
そして、これまでいかに基本をすっぽ抜かして仕事していたということに気づきました…。

コードは書いて覚える

読んでいるだけでは、コードは書けるようにならないので、特に理解が浅いものや、頭に残したいものは一度書いてみるようにしました。なぜかやってみると動かなかったり、ケアレスミスをしていたり、色んな書き方があることも分かりました。

他の人のコードを見る

GitLabで他の人のコードを見るようにしました。自分だったらこうするかなとか、また他の人が指摘されている箇所とかも参考になります。次は自分が同じことをしないように気をつけようとか。

同じ失敗をしない努力

一度したケアレスミスはどこかに書き留めておいて、二度、三度同じ失敗をしないように気をつけました。よく忘れがちなのが、グラデーションの旧構文・最終構文や、ベンダープレフィックス関係、IE7対策用のコードなど…。新しいやり方を教えてもらったり、予想以上にハマってしまった所の原因と解決方法なども忘れないうちに書き留めて、すぐに開けるようにEvernoteで整理しています。

5年のブランクは埋められるのか?

最初はどうなることやら、自分でも使い物になるのか不安はありましたが、色んな方の協力を得て半年程でブランクを埋めるどころか、当時より少しパワーアップしたような気がします。正しい知識を身につけたことによって、以前ならハマりまくっていた箇所でバグが出なくなり、全体的なスピードも上がりました。当時はググっても解決方法がヒットしなくて、深夜泣きながらコードを書いていましたが、今ならすんなり解決方法もヒットしますし、先人の知恵を借りることができます。

そんな訳でコーディング恐怖症が解消されました!もっと勉強してよりスピーディに正確に、誰が見ても分かりやすい綺麗なコードを書けるようになって、もちろんデザイナーだからそこは全く重要ではなくて、UIを考える時間や、ユーザー体験を考えたり、新しいサービスを考えたり、色んなことに時間を使いたいと思います!

ご意見・ご感想は@moco2までメッセージやツイート頂けると嬉しいです。

Comments are closed.