Web制作ってどんな仕事?過去に受注した17案件と必要なスキルを紹介!!

スクールや独学でWeb制作の勉強をしてなんとなくわかってきたけど、実案件をしたことがないから具体的にどんな仕事をするのかわからない!!
という方へ向けて、僕がフリーランスのコーダーとして今まで500サイト以上と関わってきた中からいくつかの案件の経験談を紹介します!

  • フリーランスでWeb制作の仕事ってどんなことをするの?
  • HTMLコーディングとWordPress組み込みさえ出来ていればいい?
  • デザイン力は必要?

こんなことでお悩みの方へ向けて、僕がこれまで受けてきた色々なWeb制作の仕事において面白かったことや大変なこと、注意すべきことを紹介します!

動画でも話しました!

静的コーディング6ページ(WP組み込み前提)

  • デザインデータ→XD
  • 納品方法→データ納品
  • ページ数→6ページ
お客様

WP組み込みは自社でやるので、静的コーディングだけお願いします

上杉

わかりました!

大体の流れ

デザインデータをもらって、コーディング開始。
完成したら自社サーバーなどにテストアップし、お客様に確認してもらい、問題なければデータ一式を渡して納品完了!

この仕事では公開作業が必要ないので初学者の方でも比較的受けやすい仕事かと思います。

ただし、WordPressから動的に出力される部分についての静的コーディングは注意が必要です。
例えば

  • ページネーション
  • 記事一覧
  • ブロックエディターorクラシックエディター

などです。

これらはWordPressの実装者がどういった方法で組み込みを行うかを事前にヒアリングしておく必要があります。

上杉

WPが出力するHTMLに合わせてコーディングできれば完璧です!

LP1ページのコーディング

  • デザインデータ→PSD
  • 納品方法→本番公開
  • ページ数→1ページ

大体の流れ

デザインデータをもらい、コーディングを開始。
完成後、テストサーバーにアップし確認してもらう。

その後、タイトルなどのメタ情報、計測タグなど公開前の細かい作業も必要。

LPは通常のコーポレートサイトなどのコーディングと比べると難易度が高いことが多いです。

どちらかというとWebよりも紙のデザインっぽい感じになるので思ったより工数がかかってしまうこともしばしば、、、

上杉

アニメーションがあったりレイアウトの複雑なデザインなことが多いので見積もり時には聞いておきましょう!

ただ、LPはSEOはあまり意識せず作成することも多いのであまりこだわりすぎず、HTML/CSSでの再現が難しい箇所は画像で代用するほうがよいこともありますので、事前に確認しておくことで無駄な工数を減らすことができます。

下層ページだけの依頼の場合

  • デザインデータ→XD
  • 納品方法→データ納品
  • ページ数→3ページ

別の方がトップページだけ組んだサイトや既存サイトへのページ追加の場合に、下層ページだけの依頼が来ることがあります。

上杉

個人的にはこの依頼はあまり受けたくないですね笑

なぜかというとやはりベースのCSSの部分がいつもと違うのでコーディングの工数がいつもより余計にかかってしまうからです。

さらにtailwindやbootstrapなどが使われていた場合にはさらに頭がこんがらがります。

その他にも文字コードがUTF-8ではないということもあります、、、

ただし、下層だけのコーディングは勉強にはもってこいだとも思っています。
他の方のコーディングを真似することで、色々なパターンのコーディングの知識をみにつけることができます。

大体の流れ

デザインデータと現状のHTMLデータ一式をもらいコーディング開始です
まずは、現状のHTMLがどういったルールで記述されているのかを確認しましょう。

アセットファイルへのパスが相対パスなのか絶対パスなのかというのも地味に重要です。

基本的には既存のデータにできる限り思想をあわせてコーディングしていきましょう。

静的コーポレートサイト

  • デザインデータ→XD
  • 納品方法→本番公開
  • ページ数→8ページ
上杉

スクールなどでもよくあるパターンですね!

公開まで行う場合は全ページのリンクチェックやタイトル、デスクリプションタグなどの確認もしっかりしましょう。

また、実案件の場合は事前に支給されたデザインデータからコーディング後に変更があることが多々あります。

妥協せずしっかりとメンテナンス性も考えつつ構築を行うことが重要です。

例えば共通部分はなんらかの方法でパーツ化しておかないと後々修正の時に大変です。

また、お問い合わせフォームも必要になることが多くありますが、個人情報を扱うことになるのでセキュリティなどにも十分気をつけて実装する必要があります。

サーバー移管の依頼

お客様

いまのサーバーが古いPHPしか対応していないので、新しいPHPに対応したサーバーに移行したいです!

ドメインはそのままで、サーバーだけを変更したいという依頼もあります。

静的ページなどでルート相対パスなどであればデータをコピーするだけで問題ないですが、WordPressやAPIの使用によりドメインに依存する処理がある場合はhostsファイルなどを使用してネームサーバーの変更前に新サーバーでの動作確認をするようにしましょう。

また、サーバーを移行するとそのサーバーで作成しているメールアドレスが使えなくなることがよくあるので、事前にどうするかを話し合っておく必要があります。

上杉

メールアドレスの変更は社員数が多いとかなり大変!!

WordPress組み込み

WordPressの組み込みで気をつけたいのが、開発環境と本番環境の仕様です。

開発環境は自社で用意することも多いですが、その場合に本番環境と仕様を合わせていなければ公開時にエラーが発生してしまうこともあります。

また、各レンタルサーバーの使い方も覚える必要がありますね。

昔依頼された時に、いざ公開というタイミングに本番サーバーが独自サーバーで接続も踏み台サーバーを経由したSSH接続が必要ということが発覚しかなり苦戦した経験があります。

ネットショップ系全般

  • EC-CUBE
  • Welcart
  • カラーミー

などを使用してネットショップのコーディングを依頼されることがあります。

大体の流れ

デザインデータをもらい、静的コーディング。

問題なければECに組み込んで動作確認。

大体の流れはWordPressのときと同じですが、それぞれのカートシステムごとに癖があるためデザインデータ通りにコーディングするのにかなり苦戦することが多いです。

多くの場合でデザイナーやディレクターもそこまで詳しくカートシステムについて詳しくないので、実装中に難しそうな点はできるだけデフォルトの仕様を変えずにデザインを変更してもらうようにしましょう。

上杉

過去に僕もクラウドソージングで受注したEC-CUBEのカスタマイズ案件で痛い目をみたことがあります、、、

ガッツリアニメーション案件

複雑なアニメーションが必要な案件ではクライアントとのコミュニケーションが重要です。

指示書や参考サイトなどが事前に用意されていることが多いですが、実装はコーダーのセンスになります。

正直依頼する側も実際の動きを見てみないとわからないと思っているので、迷った場合はまずはシンプルな実装で見てもらってからブラッシュアップしていくようにすれば余計な工数を減らすことができると思います。

既存テーマを使用した案件

WordPressの既存テーマにページの追加や、機能の追加をするような案件の場合はまず本番のFTPをもらって現在のテーマがどのような実装になっているか、PHPのバージョンは何かを確認した後にお見積りを提出します。

WordPressの作り方も人や時代によってかなり違うのでWordPressなら大丈夫と思って手抜きで見積もりをしてしまうと痛い目にあうかもしれません、、、

上杉

FTPだけでなく、DBのバックアップもしっかり取りましょう

既存サイトの修正

既存サイトの修正も注意が必要です。

FTPをもらってサーバーを見ると、よくわからないシステムが入っていたり、使っているのかわからないHTMLファイルが大量にあったりします。

ディレクターも仕様がわかってないことも多いので必ず関係ないファイルも全てバックアップしてから作業をしましょう。

終わらない修正

Web制作においてデスマーチが起こる一つの要因として多重下請け構造になっていることが挙げられます。

例えば依頼してきたA社にOKをもらったとしても、次はA社に依頼したB社のチェックが入ることになります。

さらにB社からエンドクライアントでのチェックもあるので、A社でOKだったことがだめになって、さらにエンドクライアントのチェックではOKになることもあります。

上杉

多分Web制作をやめたくなる理由NO1だと思います笑

納品後1ヶ月後でも対応を迫られる

納品後に対応を求められることも多くあります。

  • まずは公開を急ぐ必要があったパターン
  • 依頼元があまり確認せず公開をしてしまったパターン

があります。

当然こちらのミスであれば対応するべきですが、ステップアップのためにはそういった業者とはスパッと関わらないようにする決断も時には必要でしょう。

知見がないCMSなどの案件を受けるべきか?

過去にNuxt + microCMSの仕事をしたことがあります。

僕自身Nuxt + microCMSは触ったことがなかったのですが受けることにした理由があります。

それは担当してくれたディレクターの方のNuxt + microCMSへの知見が豊富で、僕が実装したものにたいしてある程度チェックしてくれるような体制があったからです。

自分の知識のない案件を受けることは仕事の幅を広げることができる反面、どうしても解決できない問題が発生した場合詰んでしまいます

そういった場合に依頼元がどこまでサポートしてくれそうかということが新規案件を受ける際の判断基準の一つになります。

断ったパターン

某大学の案件で学内VPSへの接続が必須でさらに独自のCMSで作られたサイトでした。

結論としては依頼を断ったのですが、その判断基準としてそのCMSを使えるようになることで仕事の幅が広がるかどうかということが重要です。

今回の場合は学習コストに対してリターンが見合っていないと感じたのでお断りさせていただきました。

マイナーCMSの依頼を受けるかどうかは慎重に検討してください。

デザインの幅が700px案件

デザイナーの方が紙媒体をメインとしている場合、Webには最適化されていないデザインデータが支給されることがあります。

その場合はこちら側である程度Webに最適化されたデザインに変更する必要があります。

また、レイアウト的にHTML/CSSで再現が難しそうな箇所は画像でも問題ないと指示されることもあるので柔軟に対応できるようにしましょう

シミュレーター

過去に住宅ローンのシミュレーターを作成する仕事を受けたことがあります。

上杉

シンプルに計算式が難しかったです笑

こういったシミュレーターの場合はまずエクセルなどの表計算ソフトで計算結果が正しいかどうかをテストできるようにしてから、Javascriptでの実装をするようにしましょう。

あとは写真撮影だけなのにやっぱいらない

知り合いの飲食店からホームページの作成を頼まれたので費用とデザインを確認してあとは写真撮影だけという状態にしてテストアップしたあとに、連絡が取れなくなり知人経由で聞くと「飲食店にホームページはやっぱり必要なさそう」と言っていたらしいです、、、

これに関しては、ある意味では

料理を注文して眼の前に出てきたけどやっぱりお腹が減っていないからやめる

と同じくらいわけわからん行為だと思いますが

僕自身もホームページを作るメリットを伝えきれなかったところがあったのでよい反省にもなりました。

gitあるのにめちゃくちゃ

データをgitで管理されているということでクローンを行い、ビルドしただけなのに大量の差分が発生したので戸惑ったことがあります。

おそらくgitを管理するディレクターがおらず色々な下請けに依頼をしてしまっていたためこのようなことになったのだとおもいますが、正直どうしようもありませんでした

長年運営されているWebサイトでよくあるのがこのパターンで、そもそも仕様書などがないので、その時のディレクターによって運用方法がコロコロ変わったり、実装方法も下請け次第で変わってしまってぐちゃぐちゃになっているサイトはよく見かけますね。

ブログ一覧へ