Webディレクターをやっているとクライアントからこのような要望もいただくことがあります。
クライアントから機能やコーディングの要望をもらった時は、必ず持ち帰ってコーダーやエンジニアにできるか確認します。
しかし、ただ「確認しますね〜」と伝えて持ち帰るよりも
このように返せたら良いですよね。
クライアントとの会話が成り立つようにするためには一定のプログラミングスキルが必要です。
では何を、どこまでできるようになっていれば良いかご紹介します！
Webディレクターが学ぶべきプログラミング言語３つ
HTML
ハイパーテキストマークアップランゲージのことで、WEBページを作るために必要な言語のことです。
文章は「タイトル」「見出し」「段落」などから構成されています。
人間は見ただけでどこが段落か、どこが見出しかなどわかりますが、コンピューターにはその判断ができません。
「ここがタイトルだよ」「ここは段落だよ」という情報をHTMLという言語で教えることで、コンピューターにも文章構造が理解できるようになり、WEBページを構成要素の通りに表示させることができるのです。
<h1></h1>で囲まれている「タイトル」がタイトルであることを表しています。
<p></p>で囲まれている「テキストテキストテキストテキストテキストテキスト」が文章です。
CSS
WEBページの装飾をする言語のことです。
HTMLという言語で見出しや段落をWEBに教えてあげる役割なのに対して、CSSは画像のサイズを変更したり、並び替えたり、背景や文字に色を付けたりすることができます。
「.main」は「class="main"」が付いているHTMLコードに対して装飾するという意味です。
「width:50px;」は横幅を50pxにするという意味です。
このように、HTMLコードの中の装飾したいものの中に「class=""」に文字を入れて、それに対してどのように装飾するかを入力することで、私たちが普段目にするWebサイトが表示されます。
JavaScript（jQuery）
画像をクリックしたら大きく表示される、スライド表示になっていて矢印を押すと写真が切り替わる、ボタンを押すとテキストが消えるなど、私たちがWebサイトやアプリケーションを使う時に使い心地や見た目の印象を良くしてくれるプログラミング言語です。
JavasprictにはjQuery(ジェイクエリー)というライブラリがあります。
ライブラリとは良く使うプログラムをあらかじめ作ってくれているファイルのことです。
jQueryを使うことでJavaSprictを使うよりも手軽に動きのあるサイトを作ることができるのです。
このコード例はどちらも同じものを表現しているのですが、jQueryで記述したものの方がシンプルなのがわかります。
最低限知っておきたいプログラミングの知識
各言語にの概要はわかりましたが、ではどのくらい理解していたら良いのでしょうか？
HTML
- html要素、head要素、body要素などの基本構成
- h要素（h1、h2などの見出しのこと）
- ul 要素、li要素（箇条書きのこと）
- p要素（段落のこと）
- header、section、main、nav、footerなどの情報の種類
- img要素（画像のこと）
- table要素（表のこと）
- a要素（リンクのこと）
CSS
- CSSの書き方のルール
- colorプロパティ（文字や背景に色をつけること）
- font-sizeプロパティ（文字サイズを変更する）
- width、heightプロパティ（幅と高さを変更する）
- margin、paddingプロパティ（余白を変更する）
- text-alignプロパティ（テキストの左寄せ、中央寄せ、右寄せを指定する）
- float、displayプロパティ（コンテンツを横並びにする）
- HTMLにCSSを読み込ませる方法
JavaScript（jQuery）
- jQueryを使ってサイトに動きをつけてみる
その他
- Webページを作成するために必要なもの（エディタ、ブラウザなど）
- インフラの知識（サーバー、ドメイン、IPアドレス、URLなど）
プログラミングのおすすめ学習方法
最低限知っておきたいことを挙げましたが、クライアントと要望に対して的確にヒアリングできるようになるためには、できればもっと深い知識を持っていてほしいところです。
しかし、プログラミング未経験の方が独学で勉強するのはとても大変です。
プログラミング未経験だった私がプログラミング学習のために活用したサービスをご紹介します！
プログラミングスクール ウェブカツ
おすすめポイント
ウェブカツ自体は初心者からフロントエンドエンジニアを目指す人、エンジニアになってお金を稼ぎたい人のためのサービスですが、短期間で基礎知識を学びたい人にもおすすめです。
- 動画がわかりやすい
- 月額制なので途中でやめられる
- 初学者が学習すべきロードマップがあるので効率がよい
- ツイッターで同じウェブカツ生と絡めて刺激しあえる
- コードの書き方だけではなく、マーケティングや起業などのレッスンがあり社会人といて知っておきたい知識を知ることができる
こんな方におすすめ
- 基礎知識だけでなく、起業や営業、マーケティング、法務などの知識も広くインプットしたい方
- ツイッターでたくさんの人と繋がりたい方
- 炎上しても気にせず学習ができる方（顧問のかずきちさんがたまにツイッターで炎上します）
全く知らなかったサーバーやネットワーク、結合テストの方法もウェブカツで学び、実際Webディレクターになったときにとても役に立ちました。
中でも「インフラ部」はWebに関わるものなら知っておくべき内容が詰まっていました。
無料で見られるのでとてもおすすめです。
動画視聴 ドットインストール
おすすめポイント
- 一部無料で視聴可能！
- 会員になっても月額1,080円と格安
- 動画1つあたり3分ほどなので集中して視聴できる
プレミアム会員になったら視聴できる「よくあるUIを作ってみよう」は、Webサイトでよく見かけるモーダルウィンドウやハンバーガーメニューなどがどのように作られているかわかるので、初学者には特におすすめです！
こんな方におすすめ
- 費用をかけたくない人
- HTML・CSSだけでなく、他のプログラミング言語にも興味がある人
プログラミング言語についてどのようなものか説明できるようになりたいときや、jQueryを最初に使ってみようと思った時にドットインストールを活用しました。
Webサービス Progate（プロゲート）
おすすめポイント
- かわいいイラストを用いたスライドがわかりやすい
- 実際にコードを書きながら学習できる
- 基本が体系的に学べる
こんな方におすすめ
- 手を動かしながらプログラミングを学びたい人
- 短期間で最低限知っておきたい基礎を学びたい人
ウェブカツと平行してProgateをやり、インプットとアウトプットを繰り返しました。
Progateはコードを書きながら学習できるので、プログラミング未経験の駆け出しWebディレクターには特におすすめです。
Webサイトを作ってみることが最終ゴール
各言語についてとプログラミングの学習法についてご紹介しました。
プログラミングを学習するときはただ動画を見て、内容を暗記するだけでは全く意味がありません。
プログラミングはスポーツや料理と一緒で知識をつけるだけでなく、実際に手を動かしてやっと上達するものなのです。
そのため、最終的にはWebサイトを自分で作成できるところまで学習をしてみましょう。
- Webサイトを作る
デザインが苦手な方はとりあえず他のサイトをそのまま真似して作成してみても良いです。
私ははにわまんさんのブログ(HPcode)を参考にさせていただきました！ - サーバーにアップする
WebディレクターはサーバーやIPアドレス、SSLなどの知識も求められます。
実践した方が理解しやすいのでWebサイトを作成したら、ドメインを取得しレンタルサーバーにWebサイトをアップすることをおすすめします。
（Webディレクターになりたてのときに先輩ディレクターに「サーバーにアップする経験をした方がよい」と言われました）
アウトプットすることで自分の知らなかった部分が明確になり、その知らないことを調べることでより深い知識を得られることになります。
インプットとアウトプットはひとセットにして実践してみてください！