Web制作

Web制案件獲得に必要な事!作るべきポートフォリオと制作環境【DAY2~5】

Web制案件獲得に必要な事!作るべきポートフォリオと制作環境

こんにちはKANOHです。

毎日このブログを更新しロードマップとしてWeb制作で案件を獲得していく方に対し残していきたいと思っていました。

勉強をして、ブログに残してとなると時間が足らなくなります。。(私

がYouTubeをやってるのもあって。。。)

ということで今回はまとめて2日目~5日目でやったことをささっと書き残します。

内容は薄いですが時間でき次第リライトし、質を上げるようにします。

DAY2~DAY5でやったこと

この期間、僕が悩んでいたこと。

  • 制作環境
  • ポートフォリオサイトの実績欄に掲載する成果物

大きくこの2つを悩んでいました。

色々ググって答えを見つけたので書いていこうと思います。

①Web制作における制作環境

なぜこれについて考えたのかというと、HTML、CSSコーディングが最終目的じゃないからです。

プログラミングと言えばターミナルという黒い画面を想像しますが、HTMLとCSSを使うだけでは、HTMLファイルCSSファイルが存在すれば動作します。

なので静的なWebサイトを制作するのが目標であればここがゴールでも問題ないでしょう。

ただ、HTML・CSSコーディングだけでは案件の単価も低く、それだけで食べていくということは非常に厳しいでしょう。

今は少しでもお金になればと思うかもしれませんが、Web制作を本業以外でも始めたきっかけのことを考えると、もっと幅広い知識が必要です。

とはいえ、最初から数十万、あるいは百万円程の案件をベースには考えず、まずは3ヶ月で3~5万円程度の案件を受注できるようになる、というところをベースに、作業を進めていきましょう。

3~5万円の案件とは一体どんな案件か?

3ヶ月でこのくらいの額の案件をこなせるようになりたい。

そうすると、3ヶ月後にその程度の案件をこなせるスキルかつ実績が必要になります。

1つの案件をこなすか、2つの案件をこなすかで、求められるコーディングスキルは変わってきますが。

とはいえ、Web制作初心者なのに3~5万円の案件がどういうものかなんてわかりませんよね。笑

それじゃあ知る必要があります。

  • クラウドワークスで案件を探す
  • ランサーズで案件を探す
  • Twitterで案件を探す

他にも手段はあると思いますが、今回は上記2つ、クラウドソーシングサービスを使って実際にどんな案件が該当するのか、調査してみました。

1~5万円のWeb制作案件

クラウドソーシングサービスにてWeb制作案件を検索しました。

価格帯は1万円以上5万円未満としました。

検索結果を見ると様々な案件が。

さっぱりどれをイメージするのがいいのか分かりませんでしたが、案件の中でも一部ジャンルが多く掲載されていました。

  • LP制作
  • WordPressカスタマイズ
  • ホームページコーディング

以上3つが案件の中でも目立ってたのではないかと思います。

納期としても長くて2週間、平均的に見て1週間という設定が多かった印象です。

該当する案件をだらだらと紹介していくとこの記事の終わりが見えないので、どのくらいのレベルだと案件が取れそうか概要だけまとめます。

  1. 1案件コーディング量 5ページ以上
  2. HTML+CSSは大前提。JavascriptもしくはPHPのスキルが必要(比重が大きくなればなるほど案件単価が高くなる。)
  3. 1週間で完成させる力
  4. WordPressカスタマイズの知識(PHP)

大まかにいえばこんな感じじゃないでしょうか。。。

ただ、これでまず収得すべき言語というのがはっきりしましたね。

案件獲得のために収得すべき言語

案件獲得のために必要な言語をまとめます。

  • HTML
  • CSS
  • Javascript(jQueryやVue.js等のフレームワーク含む)
  • PHP(Laravel含む)

以上4言語は学ぶ必要があると思います。

HTML、CSS、jQueryはすぐに始められる

HTML,CSS,jQueryは特に環境構築は必要なく、コーディングするのに必要なエディタやブラウザは必要になります。

ただ、jQueryはJavascriptライブラリのひとつなのでライブラリを読み込む必要がありますので、そこの導入に少し知識が必要かもしれません。

Javascript、PHP等のサーバーサイド言語はサーバー環境が必要

JavascriptやPHPといった言語をサーバーとのやり取りが発生する場合、サーバー環境の構築が必要になってきます。

環境構築はプログラミング初心者にとって関門じゃないでしょうか。

幸いなことに僕は今Web開発のエンジニアとして学んでいるので、苦労は少ないです。

とりあえず今は環境構築のハウツーは述べませんが、Javascriptはnode.js、PHPは業務でも使ってるフレームワークLaravelを使おうと思っているので、それに合わせた環境構築を行っていきたいと思います。

DAY6以降にやっていくこと

開発環境に関すること、3か月後に目指すイメージができたところで、早速プログラミングを始めていこうと思います。

DAY1の時にポートフォリオサイト実績欄のところに成果物として載せるものとして模写サイトを考えていました。

しかし、著作権の問題や、デベロッパーツールを使うことで容易に模写が可能なため、スキルがよくわかりにくいという難点があるそうです。

その影響もあり、模写コーディングは実績欄には載せないようにします。

載せたい人は載せていいかしっかり調査して載せるべきですね。ほぼ案件獲得の材料にはならないと思いますが。

基本はデザインカンプからコーディングで実装

実際案件を獲得したら、デザインからコーディングによって実装していかなければなりません。

模写コーディングがあまり案件獲得に関しては意味がないということはわかりますよね。

色々探してみたところ、デザインカンプからコーディングという手順を練習できるコンテンツを見つけたのでそれをやっていこうと思います。

コンテンツは後述します。

架空サイトの方向性は大体確定

3~5万円の案件を獲得するために必用なスキルというのも把握できたので、ポートフォリオサイトの実績欄に掲載するコンテンツをどういうものにするのか決まりました。

  • 架空のLP×2
  • 架空のコーポレートサイト
  • 架空のWordPressカスタマイズ

まずは営業を行う前にこれらのコンテンツを作成したいと思います。

大体道が見えてきました。

ただ、僕は半年前にTechAcademyのWebデザインコースを受講しましたが期間が開いてしまっているため少し練習が必要なので、まずは練習したいと思います。

Web制作練習コンテンツ

だんさんの建設会社デザインカンプ

https://prog-anchor.com/trace/#i-6

ねこさんのデザインカンプ

https://webdesigner-go.com/template/coding-tutorial/

クリスタさんのデザインカンプ

https://crestadesign.org/cording-first/

KROWLさんのコーディング課題

https://krowl.jp/academy/subject/coding