「コーディングを勉強したものの、実際どうやってデザインからコードを起こすのか分からない。」
「Webデザインはできるけどコーディングの自信がないために、デザインのみの仕事しか受注できない。」
というWebデザイナーの方は多いのではないでしょうか。

コーディングは知識だけでは上達しません。仕事で使えるようになるにはどのように勉強していけばよいのでしょうか。

この記事では、HTML/CSS初心者の方がコーディングを業務に使えるレベルまでスキルアップする方法についてご紹介していきます。

まずは基礎をしっかり。本やWebサイトで学んだ事を実際にやってみよう。

どんなにコーディングのレベルアップをしようとしても、基礎をしっかり理解しておかなければ前に進めません。

コーディングでつまずく原因が、ブロック要素とインライン要素の性質を知らなかった、フロートやフレックスボックスの横並びの特徴を理解できていなかった、など基礎的な事である事も多くあります。

まずは入門書やコーディングを学べるWebサイトなどで、基礎的な事を確実に身につけましょう。その時、ただ本やサイトを読むだけでなく、読みながら実際にやってみる、という事が大切です。

知識を得て理解したつもりでも、実際やってみると思っていたより難しい、という事が多くありますので、学んだそばから手を動かしてコードを書いてみましょう。

例えばHTMLのtableについて書かれている項を読んだら、実際に手を動かしてtableを作ってみる。CSSのフレックスボックスの項を読んだら、実際にコードを書いてフレックスボックスで簡単なレイアウトを作ってみる、といった感じです。

また、参考書には練習問題が付属している事がほとんどですので、その問題を実際にやってみると理解を深める事ができます。

スキルアップしたいからといって、本ばかり読んで知識のみ詰め込むのはおすすめしません。得た知識を「実際にやってみる」のが大事です。

模写コーディングでスキルアップ！

デザインの勉強をする上で模写をした事がある方は多いかと思いますが、コーディングも模写をする事でスキルアップを狙う事ができます。

模写コーディングとは、実際にWeb上にあるサイトを見て、同じような見た目になるように自分の力でコーディングし、最後に模写元のサイトのコードを見て答え合わせする練習法です。

模写コーディングの元となるWebサイトはシンプルなレイアウトの、短いWebサイトがよいでしょう。
LPやペライチサイトがソースが見やすくおすすめです。ただし、文章を含めた内容を大きく画像で書き出したものを単純に並べているだけのサイトはあまり勉強にならないので避けます。
文章やレイアウトがきちんとHTML/CSS化されているものを選んで模写しましょう。

また、アニメーションやUIを制御するJavaScriptが少ない物を選ぶのもポイントです。特にアニメーションの多いサイトは動きを実現させるために、多くのタグで要素を分割していたり沢山のクラス名がついている場合があります。そうなるとソースは大変複雑になり、構造を理解するのが困難ですし、答え合わせがしにくくなります。

分からない事があってもすぐに模写元のコードを見ずに、実際の案件を受注した時のようにまずは自分で調べてみるのが大切です。調べて答えを見つけるまでの過程で得られる知識も沢山あります。それでも分からなければ模写元のソースを見て進めましょう。

そして最後に、できたコードを模写元と比べてみてどこが違うかを確認します。自分では思いつかなかったもっと効率的なコーディング方法があったと分かったり、新しいプロパティを知れたり、驚く事も多いですよ！

※ 模写したサイトはWeb上に公開しないようにしましょう。Googleなどの検索エンジンに検索結果として表示されてしまい、模写元のサイトに多大な迷惑をかけるばかりか、損害を与えてしまう事もあります。また、模写サイトを本物だと思ったユーザーを混乱させる事になってしまいます。

実際に、デザインからコーディングをやってみよう

コーディングのスキルアップで絶大な効果があるのが、やはり実際にデザインカンプからコーディングをしてみる事です。
案件を受け、実務レベルでコーディングの数をこなすのが一番なのですが、初心者にはなかなか難しいですよね。

そんな場合には練習用のデザインカンプを利用してコーディングしてみるのをおすすめします。

ネットには練習用のデザインカンプを配布しているサイトがいくつもあります。模範コーディング例も同時に入手できる場合もあり、答え合わせができるのでとても勉強になりますよ！

さらに、ポートフォリオとして掲載OKと明記されている配布元サイトもありますので、営業に役立てる事もできますね。

コーディング練習用のデザインカンプを配布しているサイトの例

■「Code Step」で配布しているデザインカンプ

https://code-step.com/xd-public/

■「未経験からWebデザイナーへ！」で配布しているデザインカンプ

https://webdesigner-go.com/template/coding-tutorial/

■「MASA BLOG」で配布しているデザインカンプ

https://masablog.net/xd-data-free/

日常レベルでWebサイトのソースを見るくせをつけよう

調べものをしたり、ネットショップで買い物をしたりなど、Webサイトは何かしら毎日必ず見る、という方も多いのではないでしょうか。その時間もコーディングの勉強にしてしまいましょう。

Webサイトを見るときはただ書いている内容を読むだけでなく、常に「これはどうやってコーディングしているんだろう。」と意識しながら見るようにしましょう。そして気になるレイアウトや表現は、その都度ソースをみて確認しましょう。

例えば、動画をテキストの形でマスクしてる素敵なサイトを見たら、「かっこいい！」だけで終わらせず、ソースも見てみます。すると引き出しがひとつ増えますよね。

「自分だったらこれをコーディングできるか。」を常に問いかけ、「どうやっているのだろう。」と疑問に思ったらその場でソースを見るのが大切です。その積み重ねでどんどん引き出しが増えていき、スキルアップに繋がります。

また、眺めたソースの中に知らないタグや、使った事のないCSSのプロパティがあったらそれについて調べてみます。全てのタグ、全てのCSSプロパティについて最初から覚えようとするのは膨大な時間も努力も必要ですが、このように分からないものに出会った時に一つずつ消化していくようにくせづけると、いつの間にか沢山の知識を身につける事ができます。

Webの世界はプロがコーディングしたコードの宝庫です。
コーディングの初心者にとって、ブラウザで簡単に、しかも無料でプロが書いたコードが見られるのはとてもラッキーな事だと思いませんか？

どんどん参考にしましょう。

パソコンを触れない時には、「エアコーディング」

通勤での移動中や人と会う時の待ち時間など、パソコンが触れない状態で時間をもてあます事もありますよね。

そんな時にはスマホを見ながら「エアコーディング」してみる事もおすすめです！「エアコーディング」とは私が勝手にそう呼んでいる造語なのですが、目で見たデザインを頭の中でコーディングすることです。

スマホではソースを見ながらの学習はなかなかできません。ですので表示されたサイトを見ながら、ここは横並びだからフレックスボックス、そしてこのプロパティを使って中央寄せ、ここはabsoluteで絶対配置だな、などと頭の中でざっくりコーディングしてみるのです。
意外と良いアウトプットの練習になりますよ。

私が駆け出しの頃はスマホを持っていなかったので、雑誌や吊り広告を見ながら、「エアコーディング」していました。飲食店で食事を待っている時は、その店のメニューを見ながらでもやってました。

必死だったんです、あの頃は。

そのうちメニューを見ると見えない線が見えるようになっていました（笑）。

コーディングの勉強に終わり無し

以上、HTML/CSSのコーディングをスキルアップする、おすすめの方法をご紹介しました。

コーディングは奥が深く、また時代と共に新しい技術が増えていきます。ひと昔前には存在しなかったけれど今は当たり前に使われているCSSプロパティも沢山あります。
コーディングの勉強に終わりはないので最初から完璧を目指す必要はありません。それよりも常に勉強し続ける事が大切です。

この記事が皆さんのお役に立てると幸いです。