未経験・初心者からのWEBコーディング

どうもこんにちは。 WEBデザイナー・ディレクターのやったんです。

今日は、未経験・初心者からのWEBコーディングのやり方についてご紹介
していきます。

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!

コーディングって何?


コーディングとは、「HTMLで文書を書いて(マークアップして)、CSSで見栄えを整える(CSSコーディングする)」ことを言います。PhotoshopでデザインしたデータをWEBブラウザ上で見えるようにする作業のことです。
プログラミングの一種なので、最初はとっつきにくいです。<p>や<li>や<div>、<article>など聞きなれない英語がたくさん出てくるので、特に初心者の方がくじけそうになる瞬間だと思います。でも実はよく使うコードはそこまで多くないので、基本さえ覚えてしまえば、十分身につくスキルですので頑張っていきましょう!

WEBデザイナーに就職するために必要なコーディング技術とは?


WEBデザイナーさんの中には、一切コードを書かない人もいます。HTMLやCSSからは、コーダーさんお願い! って完全分業性にしているところ多いのではないでしょうか。
僕の感覚でいうと、半分ぐらいの会社さんはデザインとコーディングは分業にしているように思いますね。
じゃあ、私WEBデザイナーでの就職・転職希望だからコーディング覚えなくても良いじゃん! と思ってしまわないでください。
コーディングを覚えるメリットはたくさんあります。

1.応募できる会社の幅が増える

比較的小さな制作会社とかではデザイナーがコーディングまでやっているところがほとんどかなと思います。そして以外とそんな会社さんは、人が慢性的に足らないので初心者・未経験でも就職・転職できるチャンスは多いもの。

2.コーディングができることでデザインの幅も広がる

今のトレンドである動画や動きを取り入れたデザインは、全てコーディングで実現しています。やはり止まっているデザインだけできても将来的なスキルを考えるとちょっと弱いもの。
ワンランク上のデザイナーを目指すために、今からコーディングを身につけておくことはとっても大事!

3.チームで仕事をするときにとても役にたつ

コードをしらないデザイナーのデザインは、実はコーダーさんにとっても嫌われてしまうこともあります。最終的には、HTMLやCSSを使って実現するので、その知識があった上でのデザインしているかしていないかで、同じチームのコーダーさんも非常にやりやすくなります。

コーディングとは本を書くことと同じ。初心者が押さえておくべきポイント。


ここからは実際にどうやってコーディングをしていくかですが、イメージとすると本を書くことに似ています。

1.文書構造(ディレクトリ構造)

まずはじめに、サイトの全体図を書きます。サイトに必要なファイルを、種類や用途、ページやコンテンツごとに仕分けをして、どこに入れるのかを決める。それを文書構造(ディレクトリ構造)と言います。
「ディレクトリ」とは、「フォルダ」とおなじもの。WEBサイトも1つのフォルダ=ディレクトリに最終的にまとめるので、その中で例えば会社案内のフォルダ、お問い合わせのフォルダ、画像をしまうフォルダ、CSSをいれておくフォルダと区切っています。

それらをまとめて1枚のシートにしたものを「ディレクトリマップ」といい、WEBサイトの全体像として作成を行います。

2.HTML5

1.使用するソフトを使ってテキスト情報を入力する
まずは、全てのテキスト情報をDreamweaverやコーディングソフト(codaやsublimetext)を使って書いていきます。タイトルやメニュー、見出しとかも全てです。
2.画像を配置する
次に作成した画像を配置していきます。メイン画像やボタン等々。
3.マークアップ(html5)でコーディングをする
ここからhtmlでマークアップしていきます。マークアップとは、テキストに意味をつけていくこととイメージしてください。これはタイトルだから<h1>=もっとも大きい見出し。これはメニューリストだから<li>、これは段落の文章だから<p>と。文章に意味づけをすることで、Googleの検索エンジンが、作ったサイトを正しく認識してくれます。
4.CSS3
CSSコーディングは、サイトを組み上げるためのものです。HTMLがサイトに意味をつけるものだとすると、こちらはサイトに色をつけたり、位置を変えたりする作業のこと。
文字サイズや線の太さ、画像の位置をCSSを使って調整していきます。

コーディングを勉強できる参考サイト紹介

コーディングは、本を買って勉強する以外にWEBサービスでもいろいろ勉強できるところあります。そのようなサービスも使ってぜひ覚えていってください!

1.Progate


ゲーム感覚でコードの基礎を学ぶことができる無料の学習サービスです。
HTMLの基本のコードを1つずつ実際に書きながら学べる実践的なプログラムが組まれています。設問ごとにわかりやすいヒントが設置されており、自分だけの力でコードの勉強ができるような工夫が施されています。

2.ドットインストール


3分間で1つの学習が終わるので忙しい人でも空いた時間でサクッと学習できるのが特徴です。
プログラミング学習サービスとしては定番のサービスです。HTMLやCSSの他にもプログラミング言語やWordpress等のCMSも勉強することができますので、いろいろ見てみて興味があるものもやってみても良いです。
分間で完結する動画コンテンツで学習するスタイルなので、自分のペースで少しずつ進めることができるうえ、カテゴリも細分化されているので、「この部分だけ忘れたから復習したい」というような復習ツールとしても有用です。

3.Codeprep


Codeprepは、実際にプログラムコードを記述しながら学べるWebサービスです。
HTML、CSSからアプリ開発まで幅広くカテゴリが豊富なサイトであり、カテゴリの充実度で言うと1,2を争うほどのボリュームです。

すべてのカテゴリに「はじめての」と見出しがあるように、Web初心者にも入りやすいよう導線設計されているので、コーディングの知識がほとんど無い状態でも安心してスタートできるでしょう。

4.Schoo


WEBでいろいろな授業を生放送配信しているサービスです。見逃したものは録画でも見れます。
WEB系の授業もコーディングやでデザインだけでなく、SEOやアクセス解析等の様々なスキルが勉強できます。
しかも講師の先生は、第一線で活躍している人が多く登場していますのでまさに現場の最前線おスキルを身につけることができます。

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!


スポンサーリンク







シェアする

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

フォローする

スポンサーリンク