個人のコーダーが最低限必要と思うスキル

こんにちは、もこのふ(@moconof)と申します。

普段は個人でHTMLコーダーとして仕事を請け負っています。

HTMLコーダーというとHTMLとCSSができれば良さそうなイメージがあると思いますが、自営業、フリーランスという立場で生計を立てようとする場合、それだけでは実務上不足するケースが多いです。

とりわけ個人で働くと言う特性上、一通りの作業を一人でこなさなければならず、それがHTML/CSSの範囲外の及ぶケースが多々あります。

また、制作会社で働く場合はHTML/CSSの技術に特化させて仕事をすることも可能だと思いますが、個人で働く場合は基本的に誰も助けてくれません。

もちろん、技術範囲外のことはできなければ断る、もしくは外注にかけることもよくあります。

しかし、ある程度のことは自分でこなせた方が案件進行がスムーズになりますし、今後の仕事の受注幅も広がります。

ここでは個人のHTMLコーダーが仕事を請け負い仕事をしていく中で「最低限」必要と思うスキルをまとめました。

（駆け出しの方、もしくはフリーランスを目指している方向けへの記事となります。すでに個人コーダーとして実績のある方には参考にならない記事だと思います）

もしコーダーとしてフリーランスを目指している方がいらっしゃいましたら、何かの参考になりますと幸いです。

※なお、各用語の説明は省略させていただきます。ご了承ください。

JavaScript（jQuery）

これはコーダーにとって必須スキルと言っていいいと思います。

スライダーやハンバーガーメニューなど、今やJavaScript（jQuery）はほとんどのサイトで使われています。

JavaScriptだけの頃は扱いにくいイメージでしたが、jQueryがスダンダードになってからは習得の敷居が下がりました。
jQueryはCSS習得者には扱いやすいライブラリですので、最低限、基礎構造だけでも覚える必要はあるでしょう。

最低限という意味では、jsのコードをゴリゴリに書けるようになる必要はないと思います。

スライダーやプルダウン 、モーダルなどよくある機能をプラグインを使って設置できるようになるのが最低限。
できれば自力でもそれらが構築できるくらいの習得度があればひとまずは困らないと思います。

php / WordPress

phpの基礎も必須と言えます。

ある程度ページ量があるコーディング案件の場合、ヘッダーやフッターなどの共通パーツはphpでインクルードした方が後々の作業効率が良くなります。
また、変数やif文を使って各ページごとの処理が必要になってくる場合もあります。

また最近では、コーディングとセットでWordPressのセットアップも一緒に、みたいな案件もよくあります。
ここで「phpができないので無理です」と断るのは、この作業難易度を考えると勿体ないです。（覚えてしまえば簡単です）

WordPressも、全てを実装しようとする（専門テーマとか作れるレベル）場合はかなりの知識量が必要になりますので、最低限のラインとして、

• インストールと初期設定（パーマリンク設定やhttpsの設定）ができる
• single.phpやpage.phpなどの意味・機能を一通り把握する
• ワードプレス関数を用いてできることを一通り把握する（タイトルや日付を出力したり、WP_Queryでどういう条件で出力できるかなど）
• 簡単なブログ機能であれば一から自分で作れるようにする

くらいの知識があればいいかなと思います。

なおこちらは最低限必要というわけではありませんが、phpフレームワークとDBを連携させて何か練習で作ってみることをおすすめします。

フレームワークの詳しい説明はここでは割愛しますが、これを行うことで、DBの概念やphpの扱い方を覚えることができます。

こういうことを知識として知っているだけでも、クライアントに色々提案できるようになるのでおすすめです。

ある程度のデザイン感覚

コーディングの依頼パターンとしてよくあるのが、PC版だけはデザイン支給がされて、「スマホ版はデザイン無いのでレスポンシブでお任せでお願いします」という依頼です。

おそらくデザイン費用の削減という意図があるのでしょうが、この場合コーダーがPC版のパーツを用いてスマホ版のデザインを組み立てることになります。

そしてその際、マージン間隔や文字サイズなどのデザインバランスはコーダーの裁量に委ねられます。

他にも、「会社概要などの簡単なページはデザイン支給無し」というパターンもよくあります。

この場合も、テーブルのパーツが他ページにない場合は背景色、線の色、paddingの調整などはコーダーのデザインセンスにかかります。

僕も決してデザイン感覚がある方だとは思いませんが、デザイン感覚の身につけ方としておすすめの方法があります。

webデザインリンク集のようなサイトから綺麗なサイトを毎日見る習慣をつけ、「綺麗なデザインをみる目を養う」というものです。

綺麗なデザインの基準値を自分の中に蓄積することで、自分が組んだCSSに対して違和感を持つことができるようになれば、デザインデータ無しでもレスポンシブなどが綺麗に組めるようになると思います。

Photoshop / XD の基本操作

コーディングに必要なデザインデータは大抵の場合、Photoshopのpsdデータで支給されます。
また最近は、Adobe XDでの支給も増えてきました。

psdの場合は、スライスをするのはコーダーの役割になります。また、もしアセットが組まれている場合でも、そのアセットが崩れている場合、Photoshopを触れる技術があれば自分で直した方が早いです。

他、コーディング中でもクライアント都合で簡単なデザイン修正が入る場合があります。
この時、いちいちデザイナーにバトンを戻すよりも、簡単なものであれば自分で直した方が早いと言うケースも往々にしてあります。
（発注元もその方が楽でしょうし、場合によっては修正費用が取れることもあります）

他、流し込み（例えば社員インタビューとか）があるコーディングの場合、デザインデータは大抵、雛形までしか作られません。
その場合、例えば社員の写真が暗いとかいう写真補正をお願いされる場合もあります。

ですので、Photoshopの基礎操作はできるようになった方がいいでしょう。
（Photoshopが扱えれば、XDも扱えるようになると思います）

レイヤーの操作の仕方、文字の入れ方、保存の仕方、明るさの変え方など基本的なことで大丈夫です。

あと、こちらは最低限と言うわけではありませんが、まれにIllustratorで入稿されるケースもあります。

このaiデータというのは、Photoshopに慣れてる人からすると少々扱いにくく、中にはaiでの支給はNGというコーダーもいるくらいです。

このイラレデータもある程度扱えるようになると、コーディングの仕事を獲得できる幅が増えるのでおすすめです。

サーバー周りの知識(DNSとか)

HTMLコーディングが終ると、そのままコーダーがサーバーにファイルをアップしてサイト公開、という流れになることがほとんどです。

制作会社から仕事を請け負う場合は、大抵の場合ネームサーバーの設定などは終わった状態でコーダーに渡されるので自分で設定する機会はあまりないのですが、

Webの知識が少ないクライアントから直請けする場合、ドメインサービスやサーバー管理画面に直接ログインしていいから設定お願い、なんていうこともあります。
（これらの管理画面は個人情報が詰まってますので、パスワードなどの扱いには注意してください）

この場合、ネームサーバーの設定などの知識が必要になりますので、事前に覚えておく必要があります。

なお、サーバーの知識も全て詰め込むとかなり大変ですので、

・ドメインとサーバーはどのように結びつくのか
・DNSの仕組み

などを知っていればいいと思います。
(ググればたくさん出てくると思います)

htaccessの知識

htaccessの知識も重要ですが、これは今まで挙げた項目に比べると少々難易度が高いです。

例えば、最近はSSL接続が推奨されており、サイトのhttpでのアクセスはhttpsにリロードするサイトがほとんどです。

この操作の処理はhtaccessにて行うのですが、こちらはHTMLともCSSともjsとも記法が異なり、初見ではかなり突っつきにくい印象があります。

また、このファイルは少しでも記述を間違えるとサイト全体がエラーになることもある、かなり危険なファイルでもあります。

htaccessに関しては、完璧にマスターするには敷居がかなり高いので、調べてコピペで実装するレベルで構わないと思います。

ですが、

「htaccessでこういうことができる」

という知識は必要だと思います。

具体的によく使うのは、

• httpをhttpsにリロードする
• 拡張子htmlファイルでphpプログラムが動くようにする
• 存在しないページをエラーページとして表示する（404エラー）
• Basic認証をかける

などです。

最低限、htaccessで出来ることがわかっていれば、あとは調べてコピペなどで設置すればいいのですから。
（サーバーによりコピペで動かないことも多いのがこのhtaccessの難点ですが・・）

Git

一人で作業をしてるとなかなか身につかないのがこのGitの知識。

複数人で開発をする際に威力を発揮するツールなので、個人だけだとなかなか使わない、というのが実情だと思います。

しかし、Web制作会社から仕事を請ける場合、このGitを使う前提で進行されることも多く、僕もこのGitの習得にはかなり苦労しました。

これまでに挙げた項目と比べればやや優先度は下がりますが、Gitに関してはYoutubeとかでも詳しく解説している動画があがっていますので、そのような教材を参考に勉強してみるといいと思います。