将来Webデザイナーとして働くためにWebデザインを学ぶ方もいれば、簡単なチラシやロゴのデザインはできるけど、キャリアの幅を広げるためにWebデザインを学ぶという方もいます。どちらにしてもWebデザインを学び始めたばかりの人の中には、コーディングに苦手意識を持っている方が少なくありません。
Webデザインの世界で活躍するためは、色彩やレイアウト、タイポグラフィの知識だけではなく、これらの要素をデザインとして実現するためのコーディングスキルが欠かせません。特にHTMLのコーディングは必ずマスターする必要があります。そこで今回は、HTMLコーディングの練習方法について考えてみます。
参考書や専門スクールでHTMLの基本を学ぶ
HTMLでは文章にタグをつけることで、見出しや段落などを設定します。初心者の方は、タグの意味と使い方を確実に覚えましょう。
例えば、見出し（heading）を表すタグにはh1～h6の6つがあり、h1タグを使用する場合は、見出しに含めたい部分を<h1>と </h1>で挟みます。一方、段落（paragraph）を表すタグをp要素と呼び、段落にしたい部分を<p>と</p>で挟みます。
見出しタグや段落タグの他にも、表組みや箇条書きのタグなどがあります。数はそれほど多くないので、全部覚えてしまいましょう。実際にコーディングしてみて、タグの働きを確認しておくと、覚えやすくなります。
HTML5ではグラフィック機能が強化され、HTMLのコーディングを覚えるだけで高度なグラフィックを描画できます。できればJavaScript、PHP、SQLのプログラミングもマスターしたいところですが、まずはHTMLをしっかり学びましょう。
HTMLを学ぶときは参考書や専門スクールを活用します。最近では、Web上の学習サイトも充実しています。
自分でWebサイトを作ってみる
コーディングの基礎を学んだ後は、実践的なコーディングスキルを身に付けるため、自分でWebサイトを作ってみましょう。出来上がりをイメージしながら、そのイメージに少しでも近づけるようにします。
自分が思った通りのWebサイトを作れない場合も多いと思いますが、Webサイトの出来よりも、とにかく完成させることが大切です。Webサイトを自分で構築してみることで、今の自分に足りない点が見えてきます。
他のWebサイトのデザインを参考にする
HTMLの基本は分かっていて、本やWeb上の情報を参照せずにコーディングできる方もいるでしょう。このような方がコーディングスキルを高めるためには、他のWebサイトを参考にすることが有効です。
まずは、デザインの評判が高いWeb制作会社のポートフォリオから、気になるWebサイトや新しいWebサイトを選び、デザインをチェックしていきましょう。
デザインをチェックする際には、さまざまな視点からチェックすることがポイントです。イラストやキャラクターだけでなく、サイト構成、メニューのデザイン、フッターの最下部にいたるまで、細かく確認してください。
まとめ
かつてはWebデザイナーがコーディングを行っていましたが、現在ではマークアップエンジニアやフロントエンジニアがコーディングを担当するケースが増えています。しかし、Webデザイナーがコーディングをする機会は減っているから、コーディングを学ばなくて良いと考えるのは早計です。
最終的にはデザインの要素をWebに落とし込む必要があるため、WebデザイナーもHTMLが読めるに越したことはありません。コーディングを担当するエンジニアと意思疎通を図るためにも、コーディングスキルは必須です。独学や専門のスクールなどを利用して、Webデザインと一緒にコーディングについても学びましょう。