Webデザイナーを目指して勉強を進めると「コーディング」という文字を目にすることがあるかと思います。
「Webサイトを構築するもの？」と何となくイメージはできても、実際にどのような工程で行うのかわからなかったり、プログラミングとの違いが理解できなかったりするのではないでしょうか？
そこで今回は、これからWebデザイナーを目指す方に向けて、コーディングの基礎知識をご紹介いたします。
しかし、近年ではアプリのクオリティが高まったことで、illustratorやPhotoshopなどがなくても、Webデザインを簡単に作ることができるようになっているのはご存知でしょうか？
そこで今回は、無料で使えてスマホやパソコンで簡単にWebデザイン作成ができるアプリ「Canva（キャンバ）」についてご紹介いたします。
コーディングの基礎知識①コーディングとは？
コーディングとは、プログラミング言語を使ってソースコードを作成する作業のことを指します。コーディングをする人のことを「コーダー」と呼びます。
プログラミング言語とは、コンピューターに処理を命令するときに使う言語のことです。これを使うことでコーディングができます。Webページのコーディング時に多く使われているプログラミング言語を紹介します。
比較的習得が簡単なプログラミング言語です。コーディングを仕事として請けない場合でも、Webデザイナーの基礎知識として覚えておいた方がいいでしょう。HTMLを使用することで、Webページ上にテキストを表示できます。
「スタイルシート」と呼ばれることもあります。テキスト情報の一部を強調したり色をつけたりして、Webページを見やすくします。
Webページを作成するためのプログラミング言語です。スライダーなど、Webページに動きをつけることができます。
コーディングの基礎知識②コーディングの工程
どのような工程でコーディングを行うのでしょうか？簡単にご紹介します。
まずは全体像を把握しましょう。「この画像がここで、この文書がここに入る」ということを理解しておくことが大切です。
サイトのロゴやタイトルが入る「ヘッダー」、文章や画像などが表示される「メイン」、運営会社情報などが入る「フッター」に分けて、大枠を作成しておくといいでしょう。
早速HTMLを書いていきます！まずは、Webページ上では表示されない〈head〉内を書いていきましょう。〈head〉は、Webページのタイトルとなる〈title〉や、検索結果ページに表示される〈meta name（discription）〉など、Webサイトがクリックされるかどうかが重要になる項目が多々あります。SEO対策を勉強して記述していくといいでしょう。
次に、Webページに表示される〈body〉内を記述します。ヘッダーやメイン・フッターなどを記述しながら進めていきましょう。
CSSで文字に色をつけたり強調させたりしていきます。色の指定にはカラーコードを使用します。
全体のコーディングが終わったら、ブラウザで確認して完成です！ モバイルでも見られるようにレスポンシブ対応をしたり、一つのブラウザではなくあらゆるブラウザで確認したりすることも重要です。また、動きをつけたい場合はJavaScriptを使用しましょう。
コーディングの基礎知識③コーディングとプログラミングの違いとは？
コーディングを勉強すると「プログラミング」という言葉が出てきます。混合されがちですが、実は違いがあります。
プログラミングはプログラムを動かすことが目的で、JavaやC言語などのプログラミング言語を使って作業をします。プログラミングを行う人を「プログラマー」と言います。
コーディングは、プログラミングの一つです。
つまり、「プログラミング」と言うときはコーディング作業も含まれる、ということです。 プログラミングを行うプログラマーはコーディング技術がありますが、コーディングを行うコーダーが必ずしもプログラミング技術があるわけではありません。
コーディング習得方法
最後に、コーディングを学びたい方に習得方法をご紹介します。
サイトや本で独学してコーディング技術を身につけることができます。
本屋へ行けば、コーディング学習関係の書籍は多数あります。「プログラミング」と書かれた本の中にも「コーディング」について書かれていますので、手に取ってみましょう。 また、コーディングを学べる学習サイトも存在しますので、あなたに合った方法を見つけるのもひとつです。
確実に学びたい場合は、スクールへ通うことがおすすめです。
分からないところを気軽に聞くことができたり、一緒に学ぶ仲間がいることで意欲が湧いたりします。通うことが困難な方はオンラインで学べるスクールを探すといいでしょう。
初心者Webデザイナーはオンラインスクールに通うべき？おすすめのスクールはどこ？
まとめ
Webデザイナーを目指す方に向けてコーディングの基礎知識をご紹介しました。
「私はデザインしかやらない！」という場合でも、コーディングの基礎知識は持っていた方がより良いWebデザイナーになることができます。
コーダーやプログラマーと打ち合わせをするときに専門用語が出てきても理解できたり、コーディングしやすいWebデザインが出来るようになったりするからです。
スクールに通わなくても、本やサイトで独学できるため、時間を見つけてぜひ習得してくださいね。