プロコーダーに必要なこと
プロコーダーに必要なスキルは、ずばり「デザインを厳密に再現できる」ことです。
もちろん、細かく言えば、綺麗で分かりやすいコードを書く、効率的なid,class設計ができるなどの技術も必要です。しかし、その前に「渡されたデザイン画をWebページとして再現できる」ことが大前提。
フリーランスの場合は一人でデザインからコーディングまでを行うこともありますが、Web業界全体で見るとデザイナーとコーダーが分業というケースが圧倒的に多いです。しかも、コーディング知識がほぼ無いWebデザイナーも珍しくありません。
お仕事を探していくと「コーディングのみ」という依頼も結構あります。 そうした依頼を引き受けた際には、無茶振りとしか思えないようなデザイン画を送られた場合もなんとか（自力で）それをWebページにしなくてはいけません。
様々なデザインに対応できるコーダーになるためには、下記２つの“スキル”が必要であるとSKILLHUBでは考えています。
- 基礎スキル
- 検索スキル
1.基礎スキル
基礎スキルは読んで字のごとく、HTMLやCSSの基礎知識部分です。
基礎知識と言ってしまうと、HTMLタグやCSSプロパティをすべて覚える必要があるように感じてしまうかもしれませんが、すべてを覚える必要はありません。 特にCSSは膨大なので、すべてを暗記しようと思っても難しいでしょう。 丸暗記しているのと、使いこなせるのは異なりますしね。
基礎スキルは下記３つがあればOKです。 * 基本書式を知っている * 大まかなレイアウトが組める * コードを調べるボキャブラリー
【基本書式・大まかなレイアウト】
ここは、枠組みをHTMLで組み、必要に応じてclassもしくはidを付けられることを指します。そのclass等にスタイル指定を書いていく、という基本的な部分です。 制作課題をこなしてきた皆さんであれば問題ないでしょう。
【コードを調べるボキャブラリー】
最初のうちはコーディングの仕方がわからない部分があって当然です。 コーディングが出来ない部分があっても、作り方を調べられるボキャブラリーがあれば、完成させることができます。
- 汎用的なパーツの名称（例：ボタン、リンク、見出し、ハンバーガー）
- 表現の名称（例：吹き出し、シャドウ、グラデーション、マスク）
この２つが分かっていれば、だいたい調べられます。 解説サイト類もSEO対策で色々なワードを入れていますから、「背景 グラデーション」「ボタン 凹む」「吹き出し css」など思いつくものを入れればコードを発見できます。
更にボキャブラリーを増やすには、Web制作系のカテゴリーに強いメディアサイト（Web Design TrendsやphotoshopVIPなど）を定期的にチェックすると良いでしょう。デザイン手法の名称やトレンドも分かります。
目標はコーディング箇所の判断がつくこと
デザインによっては画像でページを作る場合もあります。 特にSEOが必要なく、ターゲットへの訴求力に全力を注いだLPに多いパターンです。
例えば、下の『Wの健康青汁』のLPは圧倒的に画像が多いです。
しかし、画像の上に注釈やキーワードなどのテキストを入れている箇所もあります。
↓青く反転させた部分はテキスト
https://www.shinnihonseiyaku.co.jp/promotion/health/569/
上図のような場合は、クライアントから指示があるでしょう。 しかし、基本的にデザインを見て、どこまでをHTML+CSSで再現して・どこから画像として切り出すかを決めるのはコーダのお仕事です。
コーディングに着手してから、ここは…とクライアントに確認を取ろうとすると、時間と労力がかかってしまいます。
デザインを受け取った時点でざっと構成を考えて 「ここは画像として書き出してよろしいでしょうか」 「CSSで再現しようとすると～～～」 など、クライアントに提案・相談できるとベストですね。
2.検索力・応用力
わからない部分は調べながら完成させられれば良い、とお伝えしました。 この調べて完成させる部分こそ、検索力。 プロコーダーに最も必要なスキル＝検索力と言っても良いくらい重要です。
例えば、下記サイトのように文字色を反転させたデザイン。
例えば「css 文字色 反転」などでHTML+CSSコード（作り方）を検索すると、作り方を解説しているページがいくつも出てきます。
ですが、こうした解説ページが親切丁寧に分かりやすく書かれているとは限りません。実装コードと要点だけ解説されている、なんてことも珍しくありません。
また、コーディングしなくてはいけないデザインと、ぴったり同じものも基本的に存在しないと思っておいたほうが良いでしょう。調べた組み方を元に、デザインに合うようにアレンジする必要があるので、どういった仕組みかを理解できる必要もありますね。
ただし、最初から解説サイトに書かれている内容がすべて理解できなくても構いません。 解説でわからない部分があれば、それも調べてみましょう。 そうやって調べているうちに、自然と基礎力も検索力も上がっていきます。
まとめ
本講座ではこれから最低限知っておきたい基礎知識をいくつか紹介した後、自分で調べることを中心とした実践的なトレーニングに入ります。
レッスンを進めて頂く中で重要なのは「調べる手間を省かない」「しっかり悩んでみる」ということです。調べているうちに基礎力も検索スキルも自然とアップしていきます。