webプログラマーの仕事内容とwebプログラマーになる方法を紹介!

webプログラマー

takato(@n8takato)です!

webプログラマーの仕事内容を知りたい

この記事では上記の課題を解決します。

僕は都内制作会社でwebデザイナーとして働いており、デザインとプログラミングの両方を担当しております。

そんな僕が、webプログラマーの仕事内容や僕がwebプログラマーになるために実際に行ったことなどを紹介します。

webプログラマーの仕事に興味のある方や、webプログラマーを目指している方は読んでみてください。

    この記事でわかること
  • webプログラマーの仕事内容
  • webプログラマーの大変なところ
  • webプログラマーになって良かったこと
  • webプログラマーになるために行ったこと
  •  
目次

webプログラマーとは

webプログラマーとは
webプログラマーとは

webプログラマーとはどういった職業なのか、プログラマーとの違いを説明します。

webプログラマーとは

主にwebサイトやwebアプリを作成するプログラマーのこと

プログラマーには、webサイトやwebアプリを作成するプログラマーやスマホアプリを開発するプログラマーなどがいます。

webプログラマーとは、プログラマーの中でもwebサイトやwebアプリを開発するプログラマーのことを意味するのです。

webプログラマーは主に下記のプログラミング言語を使用してサイトを作成します。

HTML CSS JavaScript PHP

他にも、WordPressなどのCMSを使用してサイトを作成することもあります。

webプログラマーの仕事内容

webプログラマーの仕事内容
webプログラマーの仕事内容

webプログラマーの仕事内容を紹介します。

基本的にはwebデザイナーが作成したデザインデータを元にコーディングしていきます。そのためIllustratorやPhotoshopを使用することがあります。

実際の業務の流れに沿って説明していきます。

STEP
デザイナーからデザインデータをもらう

デザイナーからデザインデータをもらいます。

デザイナーによって使用するデザインソフトが異なりますが、基本的にはIllustratorかPhotoshopのどちらかでデザインを作成します。

また、デザインに使用している画像やフォントのデータもここでもらいます。

画像データをもらわないとデザインデータに画像が反映されませんし、フォントデータをもらわないとデータが文字化けしてしまいます。

ここではデータに漏れが無いかしっかりと確認する必要があります。

STEP
使用する画像を書き出す

コーディングの前に、使用する画像を書き出す作業を行います。

デザインデータに使用されている画像や、装飾の難しい文字などを書き出します。

画像を書き出す際に気を付ける点は、拡張子をJPGかPNGのどちらにするかです。

基本的に人や風景がメインの画像はJPGで書き出してください。

反対に、イラストやロゴなどはPNGで書き出してください。

判断基準は画像の中に使用されている色数の多さです。

風景や人物は、影の影響でかなり多くの色数を使用しています。JPGは数多くの色を扱う拡張子なので、風景や人物の画像はJPGで書き出してください。

イラストやロゴはあまり多くの色を使用していていません。これらは色数の少ないPNGで書き出してください。

拡張子の判断基準

・色数の多い画像(風景画や人物など)はJPG
・色数の少ない画像(イラストやロゴなど)はPNG

STEP
デザイン通りにコーディングする

画像を書き出したら、実際にコーディングしていきます。

最初はHTMLとCSSで静的サイトを作成し、その後にJavaScriptを使用して動的サイトに仕上げます。

ほとんどのサイトには問い合わせフォームがあるので、PHPで問い合わせ先のメールアドレスや自動返信内容を作成します。

PC版のコーディングが終わったら、スマホ版もコーディングを行います。デザインの段階でPC版とスマホ版をそれぞれ作成しているはずなので、スマホ版もデザイン通りに作成します。

スマホ版はPC版を崩して作成するので、PC版の作成時からレスポンシブを意識してコーディングする必要があります。

例えば、PCでは横並びだけどスマホだと縦並びにしたり、PCとスマホで並び順が異なるデザインがあります。

そのため横並びの解除が容易にできる設定や、並び順をデバイスごとに変更できる設定をする必要があるのです。

コーディングをする際は、他のデバイスの見え方も考慮して作成していきます。

STEP
テストアップして修正を仰ぐ

PC版とスマホ版の作成が終わったら、クライアントに確認してもらいます。

コードファイルをテスト用のドメインにアップし、URLをクライアントに共有します。

クライアントにはパソコンとスマホでサイトを見てもらい、修正箇所を共有してもらいます。

STEP
納品する

クライアントから納品指示が来たら、コードファイルを納品します。

サーバーへのアップは、クライアントが行う場合と制作側が行う場合の2パターンがあります。

クライアントがサーバーへアップする場合は、我々はコードファイルのみ納品します。

制作側がサーバーへアップする場合は、クライアントからサーバー情報をもらい、FTPツール等でサーバへアップします。

サーバーへのアップは、基本的にはクライアントで行って頂きます。サーバー情報は第三者に渡すとサーバーアタックの原因になりますので、クライアントのサーバー情報は頂かないようにするのがベストです。

納品が終わったら制作は終了です。

webプログラマーの大変なところ

webプログラマーの大変なところ
webプログラマーの大変なところ

webプログラマーの大変なところは主に下記の3つです。

webプログラマーの大変なところ

・デザインデータを綺麗に修正する必要がある
・コーディングするスケジュールがあまり無い
・デザインの変更に振り回される

それぞれ説明します。

デザインデータを綺麗に修正する必要がある

デザイナーからもらったデザインデータを綺麗に修正することがあります。

これはグラフィックデザイナーからもらったデザインデータによくあるのですが、画像や図形などのピクセル数に小数点が含まれている場合があります。

画像や図形を書き出す際、ピクセル数は整数である必要があります。

数値に小数点が含まれたまま画像を書き出すと、1ピクセルずれて書き出されてしまうことがあります。

1ピクセルずれるだけで画像がぼやけてしまうこともあるので、書き出す際はピクセル数を整数に修正してから行ってください。

グラフィックデザイナーは、ミリメートルの単位で作成するためあまりピクセルの概念を持っていない方が多いのです。

webデザイナーが作成したデザインデータはピクセルの数値が整数であることが多いので、修正する手間が省けます。ありがたい。

コーディングするスケジュールがあまり無い

ぶっちゃけ、webプログラマーがコーディングする時間はあまりありません。

その理由は、デザインの確定が遅れるからです。これはデザイナーが悪いという訳ではありません。

デザイン会社あるあるなのですが、締め切り間近になって重めの修正依頼をしてくるクライアントが結構いるのです。

締め切りが近づくにつれて、やっぱりこうしたいという気持ちが出てくるのでしょうね。良いものを作りたいという気持ちは同じなので、わかります。

断らずに修正するので、デザイン確定日が後ろにずれてしまいます。

しかし、恐ろしいことにコーディングの納期は変わらないことがほとんどです。

これが制作会社、web業界あるあるです。追加の依頼は来るが納期は変わらないので、納品前は結構大変です。

デザイン変更に振り回される

デザインデータをもとにコーディングを進めていると、途中で「このデザイン変更ね〜」と言われることがあります。

画像や文字の差し替え程度なら問題ないのですが、レイアウトが大きく変更されると結構大変です。

そのため、変更がなさそうなページ(概要ページや問い合わせページなど)から着手するのも1つの手段です。

また、デザインが確定していない場合もあるので、事前に確定しているかも確認した方が良いです。

webプログラマーとして働くには

webプログラマーとして働くには
webプログラマーとして働くには

webプログラマーとして働くには、webプログラマーが扱う言語を習得する必要があります。

繰り返しになりますがwebプログラマーが扱う言語は主に下記の4つです。

HTML CSS JavaScript PHP

この4つのプログラミング言語を習得することが必要となります。

HTMLとCSSの勉強にはコツがあります。詳しくは「HTMLとCSSの勉強のポイントを3つ紹介!」を読んでください。

さらに、webプログラマーはデザインセンスを求められることもあります。

これは、デザインの基本だったり、UI・UXなどのwebデザインの知識を必要としているからです。

他にもIllustratorやPhotoshopの使い方も求めらることがあります。

僕自身は大学でデザインを専攻していたので、IllustratorやPhotoshopは大学のうちに身につけました。

デザインやデザインソフトの勉強方法は、本で学ぶのが効率的です。「webデザインの勉強におすすめな本10選!」の記事を参考にしてください。

また、webプログラマーやwebデザイナーとして働いてみたいけど自分に合うかわからないという方は、「webデザイナーに向いている人の特徴」という記事を読んでみてください。

僕がwebプログラマーになるために行ったこと

僕がwebプログラマーになるために行ったこと
僕がwebプログラマーになるために行ったこと

僕は元々営業職でしたが、社会人2年目でwebデザイナーに転職しました。

webのデザインとプログラミングの両方を担当しております。

僕がwebプログラマーのスキルをどのように身につけたのか、実際に行った行動内容を紹介します。

始めは独学で勉強

当然ですが、始めの頃はHTMLもわからない状態でした。

そんな状態でスタートした勉強は、プロゲートと参考書を使った独学です。

プロゲートがどういったサービスなのか、プログラミングに興味のある方は周知だと思うので割愛します。

プロゲートに課金してHTMLやCSSを勉強しました。

同時に1冊ですべて身につくHTML & CSSとWebデザイン入門講座という参考書も活用しました。

架空のカフェサイトを作成することが出来、1つ1つのコードを丁寧に教えてくれます。

もし興味のある方は、プロゲートと1冊ですべて身につくHTML & CSSとWebデザイン入門講座の購入を検討してみてください。

その後プログラミングスクールに通う

数週間独学で勉強した後、テックキャンプというプログラミングスクールに通いました。

独学からプログラミングスクールへ切り替えた理由は、勉強のスピードを高めるためです。

身近に質問できる環境がない限り、不明点は自分で解決しなければいけません。

プログラミング初心者が自分の力だけで不明点を解決しようとすると、多くの時間がかかってしまいます。

しかし、スクールに通うと気軽に質問できる環境が作れます。

不明点はスクールの講師に聞くことですぐに解決します。そのため勉強のスピードが独学と比べて格段に早くなるのです。

プログラミングスクールはいくつかありますが、その中でも僕がおすすめするプログラミングスクールがあります。

別の記事で紹介しているので、プログラミングスクールのおすすめは?の記事を読んでみてください。

転職活動

転職活動をするにあたり、ポートフォリオを作成しました。

ポートフォリオとは作品集のことで、いくつか作成したwebサイトをまとめたものになります。

ポートフォリオ用のサイトを作成し、そのサイト内に今まで作成したサイトをまとめて配置しました。

ポートフォリオ用のサイトを作る際は、実際にサーバー契約してドメインを取得することをお勧めします。

無料でサーバーを立てる方法もありますが実際にサーバー契約してドメインを取得することで、サーバーやドメイン取得の知識もあると面接官に伝えることが出来ます。

年間10,000円ほどで、サーバーとドメインを契約することが出来ます。

僕はエックスサーバーに契約しております。サイトの読み込み速度が早く、費用も格安なサーバーなのでお勧めです。

ポートフォリオサイトを作成する際は、サーバーの契約を行なってみてください。

webプログラマーになって良かったこと

webプログラマーになって良かったこと
webプログラマーになって良かったこと

僕は営業職からwebプログラマーに転職しましたが、実際に転職して良かったと感じたことを紹介します。

会社以外の収入源を作ることが出来る

webプログラマーとして働くことで、会社以外にも収入源を作ることが出来ます。

本業の内容がそのまま個人のスキルに直結するので、個人で案件を獲得することも出来るのです。

僕は会社員として働くつつ、個人事業主としても活動しております。

そのため平日の夜や土日で個人の案件を行い、本業以外の収入を作っております。

下記は僕が実際に作成したwebサイトとECサイトです。

個人で作成したwebサイト
個人で作成したECサイト

webプログラマーとして働くことで、新たな収入源を作ることが出来るのです。

会社員と個人事業主を両立させるのは大変ですが、両立は可能です。

会社員が個人事業主として両立することは出来るのか?」という記事に詳しく書いてるので、こちらも読んでみてください。

在宅ワークが出来る

webプログラマーは出社する必要がありません。パソコンがあればどこでも仕事することが出来る職種なので、近くのカフェで仕事することが出来ます。

また、社内の煩わしい人間関係に巻き込まれることも無いので、余計なストレスを抱えることもなくなります。

さらに、出勤時間がなくなるので、仕事が始まるギリギリまで勉強したり個人の案件を行うことも可能です。

会社員ではあるけど、フリーランスのような働き方をすることが出来るのです。

最後に

webプログラマーの仕事内容やwebプログラマーになるために実際に行ったことなどを紹介しました。

既に伝えた通り、webプログラマーとして働くと会社以外の収入源を作ることが出来るようになります。

さらに、webプログラマーとして独立することも可能になります。

フリーランスのwebプログラマーとして活動することで、時間や場所に縛られない働き方をすることが出来ます。

webプログラマーに興味のある方は、是非勉強してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる