インタビュー Web制作

1000人超をレビュー!しょーごログのしょーごさんがデザインカンプからのコーディングと制作会社営業を解説!

※ 当サイトではアフィリエイト広告を利用しています

コーディングってどうやって勉強したらいいんだろう?
勉強開始から仕事をこなしていくまでのイメージができない・・・
いつになったら営業できるの!

私のように、リモートワークで稼ぎたくてWeb制作・コーディングを始めた人は多いと思います。

しかし、

  • どうやって勉強したらいいのか?
  • 何を勉強したらいいのか?
  • どこまで勉強したらいいのか?
  • 営業って何??
  • 実務が怖い😨

などなど、不安は尽きないと思います。

僕もほとんど独学でつまづきまくったし、営業経験0だったから学習中も不安で不安で仕方なかったよ・・・

そこで今回は、Web制作界隈で知らない人の方が少ないと思われる、しょーごさん(@samuraibrass)にインタビューしました。

しょーごさんは超人気プログラミングスクール『デイトラ』でメンターをやっていて、さらに個人でもサービスを提供しており、これまで累計1,000人以上のコードレビューをしてきたベテランコーダーです。

しょーごさんには、

  • 今からコーディングを勉強するならどうするか
  • 初学者がつまづきやすいポイント
  • 制作会社営業の注意点
  • 実務レベルなるための教材の解説

などなど、これまで多くの初学者を見てきた経験から解説して頂きます!

初めまして!2018年よりWeb制作コーダーとして活動している、しょーごと申します。もう7年目になろうとしています。
現在は制作会社と仕事をしつつ、ブログやYouTube発信をしていたり、コーディング課題を出してレビューをしていたりします。
デイトラWeb制作コースでメンターとして3年ほど活動もしています。よろしくお願いします!

しょーごさん
ちなみにしょーごさんは、現在国内ノマドとして活動しているよ!

Web制作でリモートワークができるようになると、好きな時に好きなところに行けるね!

実務レベルのコーディングスキルを習得するまでの流れ

デイトラのWeb制作コースのメンターとして多くの受講生を見てきたと思いますが、これからコーダーになるためには、どんな流れで勉強したらいいと思いますか?
おおまかな流れとしては、HTML / CSSを学び、Web制作で使うJavaScriptを学び、WordPressテーマ制作を学ぶ流れは今後も変わらないと思います。

しょーごさん
大枠に関しては今までと変わらないんだね!

そのうえで、独学かスクールかの選択肢があると思います。

私なら脳死でデイトラ受講を勧めちゃいますかねw

しょーごさん

私自身はWeb制作独学ロードマップを出していたり、じゅんぺいさんも出されてるかと思います。

しかし、明らかに学習者が増えているので、メンター付きの環境で爆速で学習を終わらせて、早く仕事をするフェーズに行くのがいいかと思います。

特にAIもフロントエンドもWordPressも進化が早すぎて、制作現場の最新環境も日々変わってきているので、それらを網羅したデイトラが一層おすすめという感じです。

私は他のスクールのカリキュラムも知ってますが、結構古いカリキュラムや初歩レベルで終わるところも多く、さらに50万円とかする所も多いので、10万前後で実践レベルまで鍛えられるデイトラが安心だと思います。

しょーごさん
デイトラは安さだけじゃなくて、口コミも抜群にいいよね!
ちなみに、僕がWordPressのオリジナルテーマ化で勉強していたのは、デイトラの先駆けである30DAYSトライアルだよ!

もし独学でやるにしても、誰かの学習ロードマップに沿いつつも、最低でもMENTAでメンターをつけるかコミュニティーに入るのが良いと思います。

例えば、デイトラ初級編に2ヶ月かけてた人が、デイトラコミュニティーに入ったら中級・上級が2ヶ月で終わったという話を最近聞きました。

スクールに入っていてそれなので、独学勢はコミュニティーなど、環境に投資することをサボってはいけないと思います!

しょーごさん
今はコミュニティーがたくさんあるけど、僕が勉強してた頃はほとんど無かった気がする・・・

最近は技術革新の流れが早いので、早く現場に飛び込むために、学習フェーズは高速で終わらせるのが重要だと思いますね。

学習に1年とかかけちゃうと、もう学んだことが時代遅れになりかねない速さなので!

しょーごさん
技術ブログも、2年以上前の記事は『情報が古い?』って感じがしちゃうよね・・・
2年くらい前まで、IE対応に泣かされていたのが懐かしい😢

デイトラ公式サイトはこちら

あわせて読みたい
デイトラのサービス内容・コース料金・評判・口コミをまとめて紹介【Web制作におすすめのスクール】
デイトラのサービス内容・コース料金・評判・口コミをまとめて紹介【Web制作におすすめのスクール】

続きを見る

 

模写コーディングは必要?

コーディングの勉強方法に『模写コーディング』というのがありますが、必要だと思いますか?
模写ってよく聞きますよね。でも、私は結論いらないと思ってます。実案件で模写の技術は使わないし、工程が全く異なるので。

しょーごさん
数年前までは、しょーごさんのようなデザインカンプからの教材もほとんどなかったから、模写で勉強する人が多かったんだよね。
ただ、いきなりデザインカンプからのコーディングだと何も書けない人も結構いるので、そういう場合は私は模写コーディングをおすすめすることはありますね。

しょーごさん

題材としては、【模写コーディング】おすすめの練習サイト【入門編~上級編】の入門と初級をやれれば、もう模写は卒業してもいいと思います。

あわせて読みたい
【レベル別】模写コーディングにおすすめのサイト7選【初心者向け】
【レベル別】模写コーディングにおすすめのサイト7選【初心者向け】

続きを見る

 

デザインカンプからのコーディングとは?

デザインカンプからのコーディングとは、どのようなものですか?
PhotoshopやIllustrator、Figmaなどで作られたデザインデータを元に、コーディングしていく作業ですね。

しょーごさん

コーディングの案件は、最初にこういうデザイナーが作ったデザインデータが共有されます。

ただ、デザインデータのままだと、ブラウザに表示できません。

なので、みんながWebサイトとして見れるように、コーディングをしてサーバーにアップロードする必要があります。

こういった一連の業務を『デザインカンプからのコーディング』と言い、コーダーが担います!

しょーごさん
設計図を元に組み立てるのが、コーダーって感じだね!

 

しょーごログのコーディング演習課題とは?

コーディング演習課題全部盛り

しょーごさんが販売されているコーディング演習課題は、初心者コーダーの必携アイテムだと思いますが、どんな内容か教えて頂けますか?
必携とはありがとうございます!w
私のコーディング課題は、デザインカンプからのコーディング練習をひたすら行う『問題集』のような教材です。今は全部で8つあります。

しょーごさん

 

 

今はデザインカンプからのコーディング課題は、私以外にも出している方はたくさんいますが、

  • 現役エンジニアから、各課題最大3回のレビューが受けられる
  • 他者と被らない、オリジナルポートフォリオ化までできる
  • オリジナルポートフォリオ化後も、デザインフィードバックがある

こういった特徴があります(レビューは初級Ex以降)

特にレビューに定評がありますが、それが爆速であるのもよく言っていただけますw

しょーごさん

後ほど詳しく解説すると思いますが、ポートフォリオの被りをなくすため、オリジナル化まで支援しています。

ポートフォリオの被り問題は、特にスクール生だと発生しやすいよね(経験あり)

ここまで行ってくれる課題は他にありませんし、自分で言うのも何ですが、かなりお値打ちの価格で提供できているのがこの課題の特徴です。

ひそかに『安すぎてしょーごさん大丈夫なのかな?』と心配だったり😱

各課題を紹介する前に、前提としていくつかお伝えしておくことがあります。

注意ポイント①

取り組み始めるのは『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』『ちゃんと学ぶ、HTML/CSS + JavaScript』などを取り組み終わったレベルを想定しています。全くの初心者の方は、まずは書籍や動画で学習してから挑戦してほしいです。

注意ポイント②

答えがあったり解説があるわけではありません。

本当に難しい部分は動画解説がありますが、基本的に私のコーディング課題は教科書というより『問題集』という位置づけです。

 

初級編

コーディング演習課題:初級編

コーディング演習課題:初級編

初級編は、デザインカンプからのコーディングが初めての人向けです。

ただ、初めてのデザインカンプからのコーディングは厳しいという人も多いので、そういう人は無料で出している入門編から始めるのをおすすめしています。

初級の段階で、超簡単なレイアウトを組めるようにします。

最初は無理せず入門編から挑戦してみよう!

 

初級その2

コーディング演習課題:初級その2

コーディング演習課題:初級その2

初級その2は、初級から少しだけレベルアップした課題です。

この後の初級Exが少し難しいので、そこへの橋渡し的レベル感です!

しょーごさん

 

初級Ex編

コーディング演習課題:初級Ex

コーディング演習課題:初級Ex

初級Exは病院サイトで、縦書きがあったり複雑なテーブルが出現したり、HTML/CSSの基礎仕上げのような内容で、かつ私のレビューがここから入ります。

ここで苦戦する人が多いです!

しょーごさん

 

中級編

コーディング演習課題:中級編

コーディング演習課題:中級編

中級編は『サービスサイト』か『農園サイト』のどちらかを選んで、コーディングしてもらいます。

ここからはハンバーガーメニューやスライダー、アコーディオンなどJSが絡んできます!

しょーごさん
どれも実務ではよく使うものばかりだね!

 

中級Ex編

コーディング演習課題:中級Ex編

コーディング演習課題:中級Ex編

中級Exは、複雑なレイアウトかつ複数ページに対応でき、HTML / CSS / JSの基礎卒業を目指した課題です。

ブロークングリッドなど意図的に苦戦しそうなレイアウトを組んでいたり、アニメーションも入ってきますが、静的サイトの案件ならこの段階でも挑戦できるようになります!

しょーごさん
ついに実務レベルに到達だね!

 

上級編

コーディング演習課題:上級編

コーディング演習課題:上級編

上級はWordPressでのコーポレートサイト制作で、ページ数は8枚です。

カスタム投稿やカスタムフィールドも使用します。

実案件では数十ページのWordPressサイトを構築することも多いので、この課題で実案件への予行演習ができます。

WordPressのオリジナルテーマ制作については、このブログでも解説してるよ!

関連記事WordPressオリジナルテーマ関連記事

 

Photoshop編

コーディング演習課題:Photoshop編

コーディング演習課題:Photoshop編

Photoshop編では、未だに実案件で多く使われるPhotoshopカンプから練習できます。

1ページですが、ファーストビューの実装難易度は最高レベルです。

Photoshopのデザインカンプって難しいんだよね・・・
あわせて読みたい
【Adobe Photoshop編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe Photoshop編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

 

JavaScript / jQuery特訓編

コーディング演習課題:JavaScript / jQuery特訓編

コーディング演習課題:JavaScript / jQuery特訓編

Web制作でよくあるJS関連の実装を学べます。

  • ハンバーガーメニュー(ページ内リンクのスムーススクロール含む)
  • ドロワーメニュー
  • ローディング
  • スムーススクロールでページトップに戻るボタン
  • アコーディオン
  • モーダル
  • タブ

コーディング課題内で使用するパーツも揃っています。

特徴として、jQueryとJavaScript両方の解答を載せているので、両方の理解も深められます。

 

評判や口コミ

爆速レビューに定評があり、ここ数年を振り返るとレビューをしなかった日は一日たりとも無いですねw
レビュー依頼を受けて、24時間以内には返すことが多いです。

しょーごさん
ここ数年、毎日レビュー!?
僕が勉強してた頃はこんな充実した教材は無かったよ😢

初心者コーダー必須の教材!

コーディング演習課題【全部盛り】はこちら

コードレビュー付き!

 

コーディング演習課題のつまづきポイントと攻略のコツ

これまで多くの方のレビューをしてきたと思いますが、つまづきやすいポイントや、それをクリアするコツなどはありますか?
そうですね、具体的なつまづきポイントと言うか、前提としてどんな課題をやるにしてもPerfectPixelで提出前に確認をしてほしいですね。

しょーごさん

実務でも完璧を求められることは多くないですが、PerfectPixelを使って自分でセルフチェックをすることで初稿の完成度を挙げられるので、一発で通りやすくなると思います。

実務では、初稿の完成度が低い人は案件が継続しないので、ぜひ意識してほしいです!

しょーごさん
ピクセルパーフェクトのコーディングは大変って言う人がいるけど、僕はPerfectPixelを使った方が楽だと思ってるよ!
最初からピクセルパーフェクトした方が楽かどうかは人によるみたいだけど、当然できた方がいいよね。

メモ

ピクセルパーフェクト → 1pxもズレないようにコーディングすること
PerfectPixel → ピクセルパーフェクトするのに便利なChromeの拡張機能
PerfectPixelについては以下の記事が参考になるよ!
あわせて読みたい
【Chrome拡張機能】ピクセルパーフェクトでコーディングするのに必須なPerfectPixelの使い方
【Chrome拡張機能】ピクセルパーフェクトでコーディングするのに必須なPerfectPixelの使い方

続きを見る

あと、みんなの修正点が多い箇所を挙げるとしたら、『フォント周り』の修正は本当に多いです。

font-weight、line-height、letter-spacingとかですね。

しょーごさん

ちなみに、私は制作会社の品質管理みたいなのもやっているのですが、プロでもフォント周りはよく抜けてます。

1,000件以上レビューしてきて、あまりにもレビューポイントが似るので、このあたりはYouTubeで過去に徹底解説しています。

フォントって意外と難しくて、これこそPerfectPixelを使わないと気がつくのが非常に難しいよ。

 

デザインカンプからのコーディングはポートフォリオの実績に使える?

初案件獲得の大きな問題が『実績』だと思いますが、しょーごさんのコーディング演習課題は、ポートフォリオの実績として使えますか?
ポートフォリオとして利用できます!

しょーごさん

また、ポートフォリオの被りを防ぐために、2023年7月から『原則オリジナルポートフォリオ化』してもらうことにしています。

その結果、日々以下のような素晴らしいポートフォリオ達が出てきています。

 

 

こちらから、課題のオリジナルポートフォリオ化の事例集をご覧になれます!👇

しょーごさん

デザインカンプからのコーディング課題のオリジナルポートフォリオ化事例集

スクールの課題ってかなり被るんですが、題材、画像、配色、ロゴ、テキストを変えることで、結構雰囲気を変えることができます。

また、オリジナルポートフォリオ化でデザイン面が不安な方が多いと思うんですが、手法は記事で解説していますし、オリジナルポートフォリオ化後も1回のみレビューをしています。

また、希望者には実は2回目のレビューをしてたりもするので、品質が高い状態のオリジナルポートフォリオを営業・就活までに準備できます。

つまり、一作品につき最大4回レビューが受けられますw

しょーごさん
これで営業対策もバッチリだね!

 

初案件に向けて制作会社へ営業する方法

実務レベルのコーディングスキルを習得してポートフォリオができたら、次は初案件獲得に向けて営業だと思います。しかし営業したことない人や、営業が怖いという人も多いと思います。制作会社とのお付き合いが長い、しょーごさんからアドバイスなどはありますか?
私からは『営業文テンプレートに沿うのは辞めよう』と言いたいですw

しょーごさん

例えば、営業文の最初に企業理念への共感を入れるみたいなテンプレあると思うんですが、過去に私もしてたので気持ちは分かります。

でも、受け取る会社側からすると、かなりわざとらしいのが透けて見えちゃうんですよねw

しょーごさん

私のもとにも、コーディング・動画編集などの営業メールがフリーランスチームや企業から来たりしますが、テンプレ感を瞬時に察知すると見るのを辞めますw

毎日のように見る人からしたら、一発で分かっちゃうよね。

これは、手法として広まりすぎたからというのもあると思います。

もちろん、自分のスキルの見せ方とかは分かりやすい方が良いので、テンプレも一部を使うならありだと思います。

変化球すぎても見にくくなるだけだからね・・・

あと、多くの営業文を見てると、『あなたと組むと私にどうメリットがあるのかイメージしにくい』と感じます。

なので、具体的にどう役立てるのか、もっと掘り下げる必要があるかと思います。

これらを踏まえて制作会社に営業をかけるなら、

『ある程度フォーマットに沿いつつ』『自分の言葉で』『相手にどう役立てるのか』

に気をつけて営業すると、返信率は上がると思いますね。

ただ、自分の営業文が、相手から見てどう映るのか判断しにくいと思います。

しょーごさん

よくあるのは、自分では自分なりの言葉に結構置き換えてるつもりだったけど、相手からしたら

制作会社

テンプレの一部文言を変えただけのテンプレ営業文だね。

って思われてることが多いです。

私自身は今も制作会社の代表と話したりして、日々大量の営業文が届く側の気持ちがわかるので、そのうえで『営業文添削』をサービスとしてやっていたりします。

Web制作会社に特化した最強の営業法の解説と実践課題【あなたの営業文と作品を鬼レビュー】

実は初学者の方より既に実案件を複数されている方の文章を添削することの方が多いですが、それでももっともっとよくなる部分が散見されるので、どんな方の文章でもより良くできるかなと思います。

しょーごさん
返信率がアップすれば、希望の制作会社と繋がれるだけじゃなく、余計な営業をしなくて済むから時間も節約できるね!

 

模擬案件が経験できる超実践編

実は最近リリースしたばかりの、『超実践編』という課題があります。

しょーごさん

これまでのコーディング課題が『問題集』なのに対し、超実践編は『模試』です。

もう1ランク実務に近付いたね!

私のコーディング課題やデイトラのようなスクールを卒業した人と、案件を安定的に回せるWeb制作者の間には、まだ壁があると思っています。

ここの差は、実はスキル以上に『コミュニケーション力』の差であることが多いです。

コーディング課題は『納期』の設定がないので、無限に時間をかければいつかできて当たり前という感じですが、実際の案件って納期があるじゃないですか。

迫りくる納期の中で、綺麗にコミュニケーションするのって意外に難しいんですよね。

しょーごさん
  • 報連相はスムーズか
  • 進捗報告は綺麗にできているか
  • 品質管理はきちんとできるか
  • 自分からタスクを切り出し、見積もれるか
『〇〇日までには、初稿を提出します!』って言うのって、結構勇気いると思うんですよ。無理かもしれないしw

しょーごさん

でも、実際の案件では自分からそういう見積もりを出していかないといけません。

それを、この超実践編では練習できるようにしているんですね。

例えば、超実践編は『模擬案件』なので当然納期があるのですが、全体の作業・費用見積もりを最初に出していただきます。

他にも、クライアントって平日の営業時間しか稼働していないわけなので、土日にコミュニケーションが取れなかったりしますよね。

なので、平日10:00〜18:00の稼働時間の概念を入れたり、こういった極限まで実案件に近い環境を取り入れています。

そして、この期間中のテキストコミュニケーションも全部レビュー対象です。

これによって、実案件でも『またよろしくお願いします!』と言われるような、継続と紹介で仕事が回りやすい制作者になることができます。

ただ、私がフル稼働するので、月に数人しか見れませんw

しょーごさん

こちらはまだリリースされたばかりなので、特別料金となっています。

徐々に値上げもされるようなので、気になる方は早めのご購入をおすすめします(コーディング案件1件で教材費は回収可能)

初案件前に自信をつける!

【超実践編】納期厳守の模擬コーディング案件はこちら

期間限定の特別料金!

ここまでやればスムーズに実務に入れるね!

まとめ

今回は、ベテランコーダーのしょーごさんに、インタビューをしてきました。

これからコーディングで稼いでいきたいという人には、とても参考になる情報ばかりだったと思います。

最初は本を買うことですら躊躇してしまうかも知れませんが、早く稼ぎたいならお金を払ってでもプロに教えて貰うのが一番の近道です。

こちらのツイートで言う『知識のレバレッジ』ですね。

そして先ほどもしょーごさんが言っていたように、ダラダラ勉強をしていると、最初に勉強したことが不要(無駄)になってしまう可能性があります。

それくらい、Web制作業界の進歩は目まぐるしいです。

今回ご紹介したしょーごさんのサービスを利用すれば、

  • 実務レベルのスキルを習得
  • 周りと頭ひとつ抜けたオリジナルのポートフォリオ
  • 制作会社営業への打率を上げる営業文添削

などが得られます。

つまり、『スキル・ポートフォリオ・営業力』という、三種の神器が手に入ります。

何より売りっぱなしではなく、爆速レビューをして貰えるのが最大のメリットでしょう(私にはできる気がしませんw)

『スキル・ポートフォリオ・営業力』はどれか1つ欠けても致命的なので、不安がある人はしょーごさんの力を借りて克服しましょう!

 

コーディング演習課題全部盛り

初心者コーダー必須の教材!

コーディング演習課題【全部盛り】はこちら

コードレビュー付き!

 

返信率をアップさせる!

制作会社への営業文添削はこちら

テンプレ営業文と差をつける!

 

さらに限りなく実務に近い体験をしたい方は、こちらも押さえておきましょう👇

初案件前に自信をつける!

【超実践編】納期厳守の模擬コーディング案件はこちら

期間限定の特別料金!

 

最後までお読み頂きありがとうございました!

しょーごさん

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-インタビュー, Web制作