PR

上記のお悩みに1つでも当てはまる方はぜひ最後まで読み進めてください。
必ずあなたの役に立つ内容となっています。
その前に「いや、お前誰やねん」って感じだと思うので、
簡単に自己紹介させていただきます。

自己紹介

初めまして。
Web制作フリーランスのゆうきと申します。
約2年間コーダーとして活動しており、
✔ 最高月収195万円
✔ 営業0で月100万円×4回
をコーディングのみで達成しました。

コーディングのクオリティについて、
ありがたいことにお客様からは
✔ いつも素晴らしいです！
✔ 大変助かっています！
✔ 本当に満足です！
など高い評価をたくさんいただいています。

また、学習コミュニティも運営しており
約90名の方にコーディングを教えています。

この記事を執筆している今は、
コーディングのお仕事をスタートしてから
たったの2年ちょっとです。
月の収入は安定して50〜100万円をキープしています。

おかげで時間や気持ちの面でも余裕ができるようになったので、
仲間に会いに日本各地いろんなところへ行ったり

ど平日の空いてる時間にサウナでリフレッシュしたり

好きなタイミングでふらっとホテルに泊まってゆっくりしたり

最近だとノリで神奈川→博多に移住してしまいました。

こんな感じで、
自分の思うがままに生きることができています。

特別なスキルや才能があった訳でも、
運が良かった訳でもありません。

このようになれた理由は

効率化ができるようになった結果、
3日間で13ページコーディングを仕上げたり

実際にお客様からスピード感でびっくりされることも度々起こったり

学習コミュニティでも同じくスピード感でびっくりされたりします。

コーディング効率化ができると
✔ クラス名で迷って手が止まることも無くなり
✔ 無駄な修正や手戻りも最小限に抑えられて
✔ どんどん案件を効率良く進められるので
✔ 1人で回せる案件数のキャパが広がる
✔ 結果として時給もアップ
という感じで進むことが可能です。

僕もこれを実現して時間的に余裕ができたので、
今は学習コミュニティの運営に注力することができています。

ゆえに多くの方が悩みがちな上記のようなお悩みは
コーディング効率化ができれば全て解決します。

どうやってコーディング効率化するのか

コーディング効率化ができるようになるには、
CSS設計ができなければいけません。

CSS設計と聞くとちょっと難しく聞こえるかもしれませんが、
言い換えると
「クラス名やCSSの当て方にルールを設けましょう」
ということです。

これがコーディング効率化に直結してきます。

「なぜCSS設計ができるとコーディング効率化に直結するの？」
って思った方もいると思います。

では、質問です。

ルールに沿ってコーディングしていくのと
ルールなしでその都度考えながらコーディングしていくのでは
どちらの方が効率的でしょうか？

多くの方は前者と回答すると思います。

そうなんです。
CSS設計という手段を使ってコーディングをルール化する。
それによってコーディング効率化につなげることが可能となります。

コーディングのルール化の具体例については
僕の過去のポスト（ツイート）でいくつか紹介しているので、
気になる方はぜひ見てみてください。

では、もっと案件ベースで例えてみます。

仮に数十ページのコーディングを行う場合、
クラス名やCSSの当て方にルールなしで
コーディングしたらどうなるでしょうか？

・クラス名被りしすぎてCSSが他の要素に影響しちゃってる…
・コーディングを進めれば進めるほどコードぐちゃぐちゃ…
・下層ページコーディングしてたら知らぬ間にTOPページ崩れてる…
・ピクパしたいのに全然合わない、むしろどんどん表示ズレていく…
こんな状況になりかねません。

これが実際の案件だったら？
・永遠に修正祭りが続く…
・時給換算したらアルバイトした方がマシ…
・お客様からの信頼を失って継続案件につながらない…
・収入も安定せず精神的にもキツい…

想像しただけで「うぅっ…」てなりますよね。

このようにルールなしでコーディングすると
今は上手くいっているとしても
いずれ悲惨なことになります。

実際に僕らの身の回りでも
ありとあらゆることがルールの上に成り立っていますよね？
これはルールがないと破綻するからです。
コーディングも同じです。

CSS設計ができないとヤバい

「まあCSS設計なんてできなくて大丈夫っしょ！」
と思ってる方、
ちょっと待ってください。

1、2年前であれば
まだCSS設計ができるコーダー自体少なかったです。
当時はCSS設計ができるだけで
周りのコーダーとの差別化も可能でした。

しかし現在はどうでしょう？

情報やサービスが充実したことにより
全体のレベル感も上がったため
CSS設計はできて当たり前になりました。

僕の周りの仲間でもCSS設計ができずに
案件不足に陥ってしまった方を何人も知っています。
でも、その方たちはCSS設計を学習し直した結果、
今では制作会社とバリバリお仕事するコーダーとして変貌を遂げたんです。

つまり、
CSS設計ができないというだけで
相手（特に制作会社）から選ばれにくくなるというのが現実です。

確かに、案件が溢れるくらい引っ張りだこなコーダーのほとんどは
共通してCSS設計ができます。

また、これは制作会社とのお仕事に限った話ではないですが
案件対応で納期に間に合うかどうかはスピード勝負です。

自分のペースでコーディング…
なんてしてて納期に間に合わなかったらどうなりますか？

最悪の場合、損害賠償問題です…。

仮に納期に間に合ったとしても
いつもギリギリに提出しているようであれば
「次もまたこの人に頼もう！」
とは思いませんよね？

前章でも述べましたが、
コーディング効率化ができるようになるには
CSS設計ができる必要があります。

つまり、現在において
CSS設計ができないというのは
コーダーとして活動する上で非常にヤバい状態なんです。

CSS設計の大きな罠

僕が運営している学習コミュニティでは
実際に下記のようなお悩みの声をよく耳にします。
・CSS設計学んだけどしっくりこない…
・考えることが多くなって頭パンクする…
・結局細かいところを気にして効率化できてない…

それに対して毎回マンツーマンで対応してきました。

総じて思ったこととして、CSS設計は
・学習コストが高い
・量をこなさないと定着しない
・だから学んでもすぐにできるというわけじゃない
ということです。

CSS設計ができればコーディング効率は格段に上がる。
でも学習コストが高く、一筋縄ではいかない。
これがCSS設計の大きな罠なんです…。

僕もCSS設計ができるようになるまでは
合計3サイトほど、
ページ数だと25ページくらいコーディングして
ようやく腑に落ちました。

HTML, CSS（Sass）, jQuery（JavaScript）といった
基礎ができている状態でも、
結果的にかかった時間は3〜4ヶ月ほどです。

「基礎もできてなかったら一生学習沼だったなあ」
と振り返ってみて思います。

ゾッとしますね…。

また、案件対応中でも
「もっとこうした方がいいなあ」
という気づきも多く、繰り返しですが
やはり学習コストは高いと感じます。

でも、だからと言って
CSS設計だけに数ヶ月も学習に時間をかけるのはもったいないですよね。

学習コストを最小限に抑えて
パパッと先に進むにはどうすべきか？

コーディングを効率化するたった一つの答え

CSS設計はコーディングをルール化したものです。

であれば、コーディングの答えみたいなものを
最初から知っていればスムーズに進められるのでは？
と考えました。

確かに学生の頃も
「ここ絶対にテスト出るよー」
と先生が言ってくれれば
事前に解き方を知った状態でテストも臨めるので
楽勝で解答することができました。

皆さんもそんな経験ないでしょうか？

極論コーディングもこれと同じです。

始めから正しいコードを知ることで
知らない状態よりもコーディングはスラスラ進めることができます。
よって効率化も進む。

コーディングでいう “正しい” とは
“その分野で結果を出している人の知識・経験” を意味します。

つまり、
正しいコード ＝ 結果を出している人のコード
ということです。

実際に僕がCSS設計を学んだ時は
正しいコードを知らずに手探り状態で進んでいたので、
3〜4ヶ月も学習に時間がかかってしまったんです。

これらをもとに考え抜いた結果、
1つの答えにたどり着きました。

それは

シンプルですがこれです。

これがあれば
✔ 学習中の方だろうと
✔ 案件対応中の方だろうと
コーディング効率は間違いなく爆速になります。

学校の先生から
「ここ絶対にテスト出るよー」
と言われた部分の解答集みたいなイメージです。

さらには

ということで、
今でも活用しているコーディングルールも
できる限り分かりやすく言語化して共有します。

これでテストの答えだけでなく、
解き方（答えまでの過程）も知ることができます。

つまり、
✔ 自分のコーディングが間違ってる間違っていない関わらず、コードストックさえあれば一発でできる！
✔ クラス名の付け方やCSSの当て方、JSの実装などのよくある不安もコードストックを使えばすぐに解消！
✔ なぜこのようなコードなのかという考え方はコーディングルールの内容をパクるだけで身に付く！

コーディング効率で悩んでいる方、
もっと言うとコーディングそのもので悩んでいる方の力になれると確信しました。

そうして形となったのが本Brainです。

今回このBrainを出すにあたり、
先行で5名の方に内容を見ていただきました。

下記の通り、フェーズはバラバラです。
✔ 学習中の方
✔ 営業準備中の方
✔ 営業駆け出しの方
✔ 普段から案件対応している方

感想の一部を紹介します。
■学習中の方

■営業準備中の方①

■営業準備中の方②

■営業駆け出しの方

■普段から案件対応している方

✔ 学習フェーズにはたまらない！
✔ かなり時短になりそう！
✔ 期待の10倍以上！
✔ きれいなコーディングを目指す上で最もオススメできる！
✔ コピペでパーツが完成できた！
✔ 特典も豪華すぎる！
という嬉しいお言葉をいただいています。

こんな方は買わないでください

逆にこんな方にめちゃくちゃオススメです

✔ 自分のコードに自信が持てない…
✔ いつもクラス名の付け方に迷って手が止まる…
✔ 修正や手戻りが多くてなかなか時給が上がらない…
✔ 複数案件になると時間なくて余裕がない…
✔ そもそもコーディングスピード遅すぎる…
✔ 学習や案件対応しながらコードストック作るのが大変…
✔ 正しいコードを知って無駄な悩みや迷いをなくしたい…

「コーディング効率で悩んでいる全ての方の力になりたい」
この一心で作成したものになります。

少しでも興味があるという方は
次の章からコンテンツ内容について紹介していくので、
ぜひ読み進めていってください。

本編について

コーディングを爆速で進める！コーディングルール7選

2年間コーダーとしての経験、
メンターとして約300件コードレビューを行ってきたナレッジをもとに
コーディングを爆速で進めるための
“ここを抑えておくべき”という内容を厳選しました。

各項目は下記の通りです。

本当に知っているか、知らないか
ただそれだけでパパッとコードを書けるかが決まります。

クラス名やCSSなどでその都度悩んで迷って…
という時間を最小限に抑えることができます。

先行で見ていただいた方からは
✔ CSS設計の学習をすっ飛ばせる！
✔ BEMの書き方で知りたい情報が全てあった！
✔ 真似するだけでBEMの書き方が身に付く！
✔ とても安心感がある！
と言うお言葉をいただいています。

基本的なパーツを全て網羅した160種類以上のコードストック集

こちらが大本命です。

今回BEM・FLOCSSで書いたパーツ
各々80個以上、合計160個以上
ご用意しました。

現状のパーツ項目は下記の通りです。

✔ HTML・Sass・JSのコード
✔ ソースコード（完成形）
をパーツごとに掲載しています。

コードをコピペしてご自身のコードストックへ反映させることも可能ですし、
ソースコードをダウンロードすることもできるため、
「まずは完成形を見てみたい！」
という方も簡単にご確認いただけます。

先行で見ていただいた方からは
✔ コーディングで悩む時間がなくなりそう！
✔ コピペだけでパーツが完成できた！
✔ 簡単に思い通りのレイアウトになった！
✔ これでもかってくらい量が充実している！
と言うお言葉をいただいています。

結局このBrainでどれくらい効率化できるの？

皆さんが気になっていることを代弁します。

「結局このBrainを活用するとどれくらい効率化できの？」
これですよね。

個人のレベル感もあるので
一概に「〇〇くらい！」とは言えませんが

詳細は下記の通りです。
なかなかエグい結果となりました…。

これらのコンテンツは半永久的に追加し続けます

✔ コーディングを爆速で進める！コーディングルール7選
✔ 基本的なパーツを全て網羅した160種類以上のコードストック集
上記がメインコンテンツになります。

正直これだけでも大ボリュームなのですが、
コンテンツは半永久的に追加し続けます。

より良いコンテンツを皆さんにお届けできるように
作成して終わりではなく、
今後もアップデートを行なっていきます。

コーディング効率をさらに加速させる10大特典

特典はコーディング効率をさらに加速させる10大特典をご用意しました。
時短ツールを開発しているヒロさん（https://twitter.com/Hirohman）
と共同制作したものになります。

正直特典だけでも別コンテンツになり得るレベルです。
全てを含めるか公開ギリギリまで悩みました。

ですが、ここで中途半端に出し惜しみするのも嫌だったので、
特典10個全て公開します。
※場合によっては非公開にする場合もあるので
お早めにお受け取りください

1つずつ紹介していきます。

①効率的な営業活動を行うための進捗管理表

仕事する上で必ず行うのが「営業」です。
営業の効率化も避けては通れません。

営業先の情報や営業してみた結果など、
色々と管理するのって大変じゃないですか？

それらをまとめるだけで
数時間経ってたなんてこともよくある話です。

また、情報の抜け漏れや打ち合わせ日時忘れた…
なんてことも場合によっては起こってしまいます。

こんな状況をずっと続けていたら
かなりの時間ロスです。

この進捗管理表をご活用いただければ、
営業活動に関する情報を一括管理できます。

あなたは該当する情報を入力するだけです。

②全てはここに！コーダーの業務管理シート

要件定義書や議事録、作業工程表など
書類作成に無駄な時間を取られてないですか？

この業務管理シートは
ボタンを1クリックするだけで作成完了します。

1つずつコツコツ書類を作成するか、
1クリックで一瞬にして書類を作成するか。

どちらの方が効率的かは歴然ですね。

③あなたの収入を5万円上げるための見積書作成事前確認ポイント17項目

見積もり段階での確認を誤ると
「想定外の作業」が発生しかねません。

そうなるとコーディング時間もどんどん増えてしまい、
結果的に低単価となってしまいます。

めちゃくちゃ非効率です。

だからこそ、
見積書作成段階から
きちんとした事前確認はマストです。

このシートを上から順番に項目をチェックしていくだけで
低単価での対応とおさらばできます。

④コーディングを迷わず進めるための事前確認ポイント16項目

コーディング効率を上げるためには
分からなくて作業が止まるのを無くしていく必要があります。

コーディング着手前の事前確認を怠ったら、
のちに分からないことが頻発してその都度コーディングが中断する
なんてことはあるあるです。

でも、このシートをご活用いただければ問題ありません。

上から項目をチェックしていくだけなので、
ぶっちゃけ10分もかからずに事前確認をクリアにできます。

⑤指摘事項ゼロにするための納品前品質チェックシート42項目

コーディング効率を上げても品質が悪かったら本末転倒です。
継続案件にも繋がりません。

また、品質が悪かったら
どれだけ早くコーディングを終えたとしても
のちにたくさんの修正対応が待っているので
結果的にコーディング時間が長くなってしまうんです。

コーディング効率化において、
品質の担保は必須です。

このチェックシート使って、
品質の高いコーディングを手に入れてください。

⑥クラス命名の迷いを解消するキーワード一覧表131個

これは正直ヤバいです…。
キーワード合計131個ご用意しました。

クラス名で悩むことは無くなります。

コーディング効率化がさらに加速すること間違いなしのアイテムです。

⑦ChatGPTを駆使した超時短制作の秘密

ChatGPTを上手く活用できると
コーディング効率は格段に加速します。

でも、下記のような課題にぶち当たってる方も
多いのではないでしょうか？
・トンチンカンな答えが返ってくる
・上手く意思疎通が取れない
・そもそも何て聞けばいいか分からない

実はChatGPTを上手く活用するにはコツがあります。
そのコツを実践形式で解説しちゃいました。

コーディング効率最強の相棒ChatGPTを使いこなしたい方、必見です。

⑧実案件・学習ですぐに使える「ChatGPTの具体的な活用法」25項目

「⑦ChatGPTを駆使した超時短制作の秘密」でコツを掴んだ上で
すぐに活用できる具体的な活用法を25項目紹介します。

これを活用するだけで、
今より倍以上のコーディング効率も実現可能です。

知ってるか、知らないかなので
ぜひゲットしてください。

⑨効率化マストアイテム！Gulpソースコード

こちらはコーディング効率化のマストアイテム
と言っても過言ではありません。

Gulpを使うと下記のような雑務を自動化できます。
✔ Sassのコンパイル
✔ CSSの圧縮
✔ ファイルを編集したら即座にブラウザを更新・反映する自動リロード
✔ ベンダープレフィックスの自動付与
✔ 画像の自動圧縮

このような、ちまちました作業も自動化すれば
ちりつもで圧倒的な時間の差が生まれるんです。

静的コーディング用、WordPress用
どちらもご用意しているので、ぜひご活用ください。

⑩ポートフォリオ掲載OK！実践型デザインカンプ

3ページの架空コーポレートサイトのデザインカンプになります。
ポートフォリオへの掲載もOKです。

難易度はやや高めですが、
その分、営業の強力な武器になるのでぜひご活用ください。

⚠️注意点⚠️

10大特典だけでも別コンテンツになり得るレベルです。
場合によっては非公開にする可能性もあるので、お早めにお受け取りください。
受け取り方法は有料部分に記載しています。

価格について

11/6(月)23:59までは特別価格「19,800円」でご提供します。
※定価「29,800円」

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

むしろ、コンテンツの充実化やアップデートにより
値上げする可能性があります。

✔ 約2年間コーダーとして活動してきた知識・経験
✔ 学習コミュニティで得たナレッジ
を全て詰め込んだ内容です。

僕の約2年間分の経験をこれだけでワープできます。

“誰でもすぐに活用できる”形としてあるので、
スキル感は関係ありません。

また、コーディング効率をさらに加速させる10大特典付きです。

これらを踏まえた上で考えると、かなり格安だなと思います。

「正しい考え」と「正しいコード」をゲットして、
パパッとコーディング効率化を進めたい

そんな方にはコスパ最強です。

よくあるご質問

最後に

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

僕は今でこそコーディングに追われることのない日々を過ごせていますが、
駆け出しの頃は1日10〜15時間くらいは
ずっとコーディングしていました。

コーディング自体は好きでしたし、
楽しかったんです。

しかし気が付くと、
下記のようなことを永遠と考えるようになっていました。
・コーディングめちゃ時間かかるな…
・それ以外のことやる時間なんて全くない…
・これいつまで続けないといけないんだろ…
・自分が動けなくなったら元も子もないな…

精神的にもキツかったですし、さすがにマズいなと思い
効率化と真剣に向き合うようになりました。

その結果、
✔ 1日の稼働は6時間ほどに抑えられたり
✔ 1人で回せる案件数も倍に増えたので収入アップにつながり
✔ 空いた時間で学習コミュニティの準備を進められたり

このように
着実にステップアップすることができました。

お付き合いしている制作会社や学習コミュニティからは
毎日ベースで感謝のお言葉をいただいています。

心の底から人生幸せだなと
今なら胸を張って言えます。

もしも効率化と向き合う決心をせず、
力技でコーディングする日々のままだったら
今の自分はないでしょう。

本Brainは当時の僕みたいな方のために作りました。
ぜひそういった方にお手に取ってほしいと思っています。

僕と同じような悩みを持たずに、
ご自身の目標へ進んでいってもらえたら本望です。

もちろん学習中の方も
今のうちからご活用いただければ、
無駄な苦労をせずに済みます。
ぜひお手にとっていただけますと幸いです。

約2年間コーダーとして活動してきた知識・経験
全てを詰め込みました。

後悔はさせません。

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

この続きを見るには購入する必要があります