本Brainではコーディング初学者〜営業駆け出しの方向けに

「案件で求められるポイント」を徹底解説しました。

この内容を知っていると無駄な悩みや迷いなく学習を進められたり、

案件対応も劇的に楽することができます。

実際に事前に何名かの方に見ていただいて

✔️知らないって怖い…！

✔️一つも無駄ない！

✔️知っているだけで詰まる・悩む・迷う時間が激減する！

✔️今知れて良かったと心底感じる！

✔️全コーダー必見！

✔️知ってるか否かで大きな差がつく！

✔️目から鱗の情報がたくさん！

というお言葉をいただいています。

感想の一部を紹介します。

しかしながら、ほとんどの方は

「案件で求められるポイント」を知りません。

だから毎回学習で詰まってなかなか先に進めなかったり、

案件で修正地獄にハマってしまうんです。

実は本記事の無料部分の中で

このポイントを公開しちゃいました。

どういったところが実際に課題になっているのか

正直、皆さんまだ分かっていない方も多いですよね？

今回、公開したポイントを取り入れていただくだけで、

かなり今後の結果も分かってくると思います。

なので、ぜひ最後までご覧ください。

注意事項

一点だけ注意事項があります。

こちらは学習者のためのコンテンツです。

・コーディングに詳しい上級者の方

・すでに案件をこなし、苦労なくコーディングできている方

上記の方々は時間がもったいないので、

この先お読みいただく必要はありません。

こちらで画面を閉じていただいて大丈夫です。

逆に下記のような方はめちゃくちゃオススメなので、

この先も読み進めていってください。

・コーディング学習始めたばかりで案件対応なんてイメージできない

・学習頑張ってるけど案件で求められるポイントは分からない

・ディレクターさんがどのようなところチェックしてるか知りたい

・営業準備中だけどシンプルにまだコーディングに不安ありまくり

・営業入ってから無駄な苦労はしたくない

・実際に案件でたくさんダメ出しもらってばかり

・結局、自分のコードに自信が持てない

自己紹介

知らない方も多いと思うので、

簡単に自己紹介させていただきます。

初めまして。

Web制作フリーランスのゆうきと申します。

✔️2021年1月からコーディング学習を開始して同年10月に独立

✔️この記事を執筆している現在はコーダー歴4年目

✔️コーディングのみで月収100万を5回達成

✔️最高月収はコーディングのみで195万、

　コンテンツ販売を含めたトータルだと500万

✔️平均月収は80〜100万ほどをキープ

お取引しているお客様とも良好な関係を築けており、

2年以上ずっと継続してお仕事をご一緒させていただいています。

また、人にものごとを教えるのが好きで

現在120名以上の学習者にコーディングの指導をしています。

その他たくさんの方が学習のお悩みを解消できたり、

営業で結果を出しています。

まだコーディングを教え始めて一年半ほどですが、

毎日ベースで感謝のお言葉をいただけるようになりました。

先人の知恵を借りるべし

と、偉そうに語っている僕も3年前はまだ学習中でした。

当時は下記のような感じです↓↓↓

・画面幅ちょっと変えるとすぐ表示崩れる

・クラス名いつも何となくで決めてて無駄に時間かかる

・CSSもその場しのぎで正しいか否かは二の次

・スライダーの実装が大の苦手

・分からないことで数日沼るも解決できず

・自力だとすぐ手が止まるから模範コードないと無理

・下層ページコーディングしたらなぜかTOPページ崩れてる

：

挙げるとキリがないのでこの辺で。

今みたいに教材が充実しているわけでもなく、

切磋琢磨できるような仲間もいなかったので

「本当にこれで仕事できるのか…？」

みたいな不安と常に隣り合わせでした。

こんな状況だった僕でも

自信を持って案件に臨むことができるようになった、

ある一つのきっかけがあります。

そのきっかけとは

「結果を出してるメンターからコーディングを教えてもらったこと」

です。

それまでは書籍などで学習はしていたのですが、

第三者からコーディングを教えてもらうというのは

これが初めてでした。

メンターからは知らない知識をどんどん教えていただき、

本当に目から鱗の連続だったのを覚えています。

「あ、自分はまだ何も知らないんだな」と

その時、気付くことができました。

今でもなお、

この経験は僕の中での転換点だと思っています。

教えてもらったアドバイスをもとに

1ヶ月間ほどガチでコーディング学習し直した結果、

・デザインカンプを見ればどのようにコーディングすべきかイメージできる

・ルールに沿ってコーディングするため無駄な迷い0

・分からない部分も論理的に考えて解決できる

・正しい品質チェックのやり方を習得

・自分のコードに自信を持てるようになった

このように劇的に変わることができました。

おかげさまで実際の案件では

お客様からコーディングのクオリティについて

✔️いつも素晴らしいです！

✔️大変助かっています！

✔️本当に満足です！

など、高い評価をいただけるようになりました。

そのままだとどうなるか？

仮にメンターからの教えなく、

コーディング無知のまま案件に進んでいたら

どうなっていたでしょう？

・永遠に自分のコーディングに自信持てない

・終わらない修正地獄

・納期を落として信頼喪失

・損害賠償請求されたり

・最悪の場合Web制作辞めてたかも

考えるだけでゾッとしますね…。

一歩間違えていれば、

こうした未来に進んでいた可能性もあったわけです。

では、僕がメンターと出会う前まで抱えていた課題は何か？

言い換えると、

ほとんどの学習者や営業駆け出しの方が抱えている課題は何か？

それは

ということです。

だから、下記のようなことで悩んだり迷ったりする方が多いんです。

・コーディング学習始めたばかりで案件対応なんてイメージできない

・学習頑張ってるけど案件で求められるポイントは分からない

・ディレクターさんはどのようなところチェックしてるか知りたい

・営業準備中だけどシンプルにまだコーディングに不安ありまくり

・営業入ってから無駄な苦労はしたくない

・実際に案件でたくさんダメ出しもらってばかり

・結局、自分のコードに自信が持てない

本編の一部を公開します

「そもそも案件で求められるポイントとはどのようなものか分からない」

そんな方もいると思います。

なので今回は特別に、本Brainでも取り上げている

「案件で求められるポイント」を1つだけ紹介しますね。

ぜひメモを取りながら読み進めていってください。

ーーーーー本編の内容紹介ここからーーーーー

“スマホ”のコーディング時にインナー幅で気をつけるポイント

【解説動画】

💡必ずご覧ください💡

【事前知識：インナー幅について】

○インナー幅

インナー幅のことを知らない方向けに解説していきます。

まず、インナー幅とはコンテンツの最大幅のことです。

画面幅を広げた時にコンテンツが広がりすぎるのを防ぐ役割を担います。

○書き方

インナー幅は「inner」が該当します。

innerとクラス名を付けるのが一般的です。

・HTML

<div class="parent">
    <div class="inner">
        <!-- コンテンツ部分 -->
    </div>
</div>

・CSS（各数値はデザインカンプにより異なります）

.inner {
    margin: 0 auto;  /* 左右中央寄せ */
    padding: 0 25px;  /* 画面両端にピタッとくっ付かないように */
    max-width: 1250px;  /* インナー幅 */
    width: 100%;
}

【ポイント① インナー幅は600pxくらいに設定する】

PCのデザインは横並びだったとしても

スマホ時は縦並びになるのが大半です。

ゆえにPC→スマホへ切り替わる直後など（768px前後）は

コンテンツが横長になります。

そこで、インナー幅にmax-width: 600px;（値はよしなに）

設定することによって、

600〜768px間のレイアウトをすっきりさせることができます。

下記はインナー幅に

max-width: 600px;を設定しているか否かの比較です。

だいぶ印象が違うのが分かると思います。

・インナー幅設定なし

・インナー幅 max-width: 600px; 設定

【ポイント② コンテンツはデザインカンプ上のwidthを設定しない】

例えば、スマホのデザインカンプ幅は375px、

NEWSセクションのコンテンツが355pxだったとします。

そこでNEWSセクションのコンテンツに対して

width: 355px;を設定した場合、

・画面幅375pxの時

デザインカンプと同じ375pxの時は表示に違和感はありません。

・画面幅700pxの時

画面幅を400・500・600…と広げても

コンテンツ部分は355pxのままなので、

画面幅に対してコンテンツ部分が狭いという印象になります。

ゆえに基本的にコンテンツは

デザインカンプ上のwidthを設定しないようにしましょう。

下記ポストも併せてご参照ください。

https://x.com/yuki_web126/status/1699242052964499668

ーーーーー本編の内容紹介ここまでーーーーー

いかがでしょうか？

「案件で求められるポイント」と聞くと

めちゃくちゃ難しい内容なのでは？と思う方もいますが、

上記で紹介した例のように決してそんなことはありません。

シンプルに「知っているか知らないか」です。

これはほんの一部に過ぎず、他にも↓↓↓

・フォームのユーザビリティを上げる方法

・画面高さいっぱい＝100vhは不適

・aタグhref属性やinputタグtype属性の頻出項目

・適切なクリック領域の設定方法

・ドロワーメニューやモーダル実装する時の注意点

・CSSの設定する上でのルール

・CSS設計のちょっと深ぼった話

・WordPress化で気をつけるポイント

：

など、たくさんあります。

これだから、

できるコーダーとできないコーダーの格差が

死ぬほど広がってしまうんです。

この部類の内容は

教材やスクールのカリキュラムを進めているだけでは

基本的には教えてもらえない。

細かすぎてカバーしきれないんだと思います。

つまり本記事を執筆している現在、

このような状況がゆえに、

実際「案件で求められるポイント」を知らないまま

営業に進む方がめちゃくちゃ多いです。

結果的に

・案件をご依頼いただいてもお客様からはダメ出しの嵐

・継続案件にならない日々が続いて単価感も上がず疲弊

・最終的にWeb制作を辞めちゃう

みたいな方を今までごまんと見てきました。

コーディングを教える身としても、

この現状は変えていかなければならない。

今教えている方たちには絶対そうなってほしくない。

だから、今回このBrainを出すことに決めました。

案件で無駄な苦労をしないために

勘違いしてほしくないのは

「これで案件で苦労するなんてない♪」

そんなことはあり得ません。

案件で結果を出すためには

営業や対応面のスキルも必須です。

ここばかりは経験を通してでないと

スキルアップは図れないと考えています。

始めから営業や対応面が完璧なんて人は

一部の天才だけです。

僕の周りにそんな天才はいませんが。

なので、営業や対応面は多少の苦労はすると思います。

僕もしてきました。

しかし、回避できる苦労は存在します。

それが“案件で求められるポイントを知っているか否か”

要するに知識です。

前章で紹介したような内容をどれだけ知っているか否かで、

実際に案件で上手くいくか否かに雲泥の差が生じるのは明白です。

だから、

僕がコーディングを教えている方には

早い段階から「案件で求められるポイント」をシェアしていて、

多くの方が

✔️学習中に悩んでいたことを解消できたり

✔️実際にお客様から嬉しいお言葉をいただたりと

皆んなプラスの方向に進んでいます。

ここまで読んでいただいた方なら分かると思いますが、

このBrainの内容を知ってさえいれば

案件で無駄に苦労するみたいなことは最小限に抑えられます。

ただし、繰り返しになりますが

基本的には「初学者〜営業駆け出しの方」向けに

案件で必要となるノウハウをまとめたものです。

なので、次のような方はご購入いただく必要はありません。

・コーディングに詳しい上級者の方

・すでに実案件をこなし、苦労なくコーディングできている方

逆にこんな方にはめちゃくちゃオススメできます。

・学習中でこの先、案件が不安しかない…

・案件で求められるポイントが把握できていない…

・情報が溢れ過ぎてて案件で必要なものの取捨選択ができない…

・営業駆け出しだけど、まだコーディングに不安がある…

・営業入ってから無駄な苦労はしたくない…

一つでも当てはまる方は

次の章からコンテンツ内容について紹介していくので、

ぜひ読み進めていってください。

本編について

コーディングTips

コーディング学習で

・学習者が100%つまづくポイント

・間違えに気づけない見落としポイント

・教材やスクールでは教えてもらえないポイント

総じて「案件で求められるポイント」を

あり余すことなく詰め込みました。

✔️3つのレベル分けで学習しやすい全28項目

✔️解説テキスト付き

✔️解説動画付き約270分

可能な限り分かりやすく徹底解説しました。

あなたはコンテンツ内容を知って、

ご自身のコーディングに取り入れるだけです。

さ

ら

に

：

：

：

このコーディングTipsは

コーディングのノウハウは移り変わりが激しいです。

その時代時代に合わせて最適なものになるよう

アップデートをし続けていきます。

表示チェック添削動画

実際に現在コーディングを教えている方の成果物に対する添削動画です。

今まで完全にクローズドで出していた情報ですが、

この度ついに外部向けに初公開します。

「添削する側がどのような視点でチェックしているのか？」

一人で学習しているだけでは決して知り得ない、

そんな内容を含んでいるのでぜひお楽しみに。

コーディング学習で周りと差を付ける5大特典

特典は以下の5個です。

①これでスッキリ！最も多く寄せられる質問＆相談TOP5

②初学者必見！コーディング問題解決マニュアル

③一度使うと手放せない！厳選便利ツール&サイト集

④コーディング腕試し！練習用デザインカンプ

⑤【半永久更新版】表示チェック添削動画

①これでスッキリ！最も多く寄せられる質問＆相談TOP5

今までに学習者や営業駆け出しの方から寄せられた質問&相談の中で、

最も多かった項目TOP5をまとめました。

各質問&相談に対して、

「どのようなポイントをチェックすれば解決するか？」

を徹底解説しました。

周りのほとんどが悩む・迷う内容を事前に対処しておくことで、

後々の学習が格段に楽になるのは間違いなしです。

②初学者必見！コーディング問題解決マニュアル

「このレイアウトどのようにコーディングすればいいんだろう？」

という悩みは頻繁に出くわしますよね。

そんな時に役立つ問題解決の手順を4つのステップでご紹介します。

このステップを踏むことで問題解決がスムーズになり、

作業効率もアップします。

ぜひ参考にしてみてください。

③一度使うと手放せない！厳選便利ツール&サイト集

よく使用する便利ツール&サイト集を厳選しました！

・Google拡張機能

・ジェネレーター系

・品質チェック関連

・便利サイト

など、計29個をピックアップ。

これらを使えば、作業効率が爆上がりすること間違いなしです。

僕自身も普段から愛用しており、その効果を実感しています。

④コーディング腕試し！練習用デザインカンプ

1ページの架空サイトのデザインカンプになります。

ご自身のコーディングレベルアップにお役立てください。

ポートフォリオへの掲載もOKです。

⑤【半永久更新版】表示チェック添削動画

本編「表示チェック添削動画」の半永久更新版になります。

正直ヤバいです。

本来であれば、これだけでも別コンテンツになり得る、

それくらいのボリューム&レベルだと自負しています。

多くの添削動画をご覧いただき、

添削する側の視点を最大限学び取ってください。

価格について

「19,800円」でのご提供となります。

今後は値下げをする予定は一切ございません。

むしろ、コンテンツの充実化やアップデートにより

値上げを検討します。

今回のBrainは

✔️約3年間コーダーとして活動してきた知識・経験

✔️120名以上の学習者へコーディング指導して得た知識・経験

これらを全て詰め込んだものになります。

本当にこの内容を知っているか知らないかで

学習の進み具合や案件で継続になるか否か、

知識の差が原因でハッキリした明暗が分かれる

と言っても過言じゃありません。

仮にこの知識の差によって学習の進捗が半年遅れてしまった場合、

将来的にコーディングで月50万稼げるようになったとしたら

「月50万 × 6ヶ月」なので“300万の損失”をしている

ということになります。

数字にしてみると恐ろしいですね。

・学習中でこの先、案件が不安しかない…

・案件で求められるポイントが把握できていない…

・情報が溢れ過ぎてて案件で必要なものの取捨選択ができない…

・営業駆け出しだけど、まだコーディングに不安がある…

・営業入ってから無駄な苦労はしたくない…

繰り返しになりますが、

上記に一つでも当てはまる方はめちゃくちゃオススメできます。

ぜひご検討ください。

よくあるご質問

Q.

今回掲載している内容は本当に信頼して大丈夫なものですか？

A.

問題ありません。

掲載している内容は

現役で制作会社様とお仕事をしているコーダーさん2名にも

ダブルチェックいただいています。

また、第三者のご感想もぜひご覧いただいた上で、

信頼できるか否かご判断ください。

こちらのリンクからご覧いただけます。

しかしながら、コーディングに対する考え方は個人差があるため、

意見が食い違うこともございます。

Q.

どのように活用していくのがオススメですか？

A.

本編のコーディングTipsは学習の進捗度合いに合わせて、

3段階（初級・中級・上級）にレベル分けしています。

ご自身のフェーズに合わせてご活用ください。

また、表示チェック添削動画は

コーディングTipsの内容をもとに

添削する側がどのような視点でチェックしているのか？

その全体の流れを把握する目的でご覧ください。

ただ解説動画を見るだけでなく

コーディングしてみたりメモを取るなど

積極的に手を動かすことをオススメします。

Q.

案件で求められる複雑な実装（アニメーションやWordPress関連など）

も含んでいますか？

A.

複雑な実装は含んでおりません。

あくまで学習者〜営業駆け出しの方が初案件の時に

自信を持って対応できることをゴールとしているためです。

複雑な実装などを含むとコンセプトからズレてしまいます。

Q.

このBrainを購入すれば案件で苦労しなくなりますか？

A.

まず、購入しただけでは変わりません。

実際にご活用いただくことが大前提です。

また「案件で無駄な苦労をしないために」

の章でもお話ししましたが

案件では営業や対応面のスキルも必要になります。

本Brainでは“知識”にフォーカスを当てたものです。

なので、知らなかったことによる苦労は

十分カバーすることができます。

Q.

分からないことなどあった場合は質問しても大丈夫ですか？

A.

本Brainに関するご不明点などについては

ゆうきのX（旧Twitter）のDMからお気軽にご相談ください。

最後に

最後まで読んでいただき、ありがとうございます。

僕は人に物事を教えるのが好きです。

元々は高校の物理の先生になるのが夢で、

大学では教職課程を学んでいました。

ちょっと分け合って4年生の途中で辞めてしまい、

先生になる夢は叶いませんでしたが。笑

そんな人間なので、今コーディングを通して

教える活動をさせていただけることに感謝しています。

学習者が頑張ってコーディングに取り組み、

どんどんスキルアップしていく、

その成長課程を間近で見届けられるのは本当に何事にも言い難いです。

たくさん嬉しいお言葉をいただくことも増えましたが、

僕からしたら「教えさせていただきありがとう」です。

本当であれば今関わっている方たちみたいに

一人ひとりと密に接して教えることができれば理想ですが、

僕の体は一つしかありません。

時間がどれだけあっても足りないです。

だからこのように、Brainで公開する運びとなりました。

学習中や営業駆け出しで、

悩み・迷い・不安を抱えている一人でも多くの方に

このコンテンツが届けたい、その一心だけです。

自信を持って営業に進み、

頑張って学習して身につけたコーディングスキルで

お客様から感謝される未来が来ることを心から願っています。

その未来への道筋に、このBrainがお役立てできたら本望です。

では、本編に入っていきます。