こんにちは、しょーごです。
これまで「デザインカンプからのコーディング課題」を販売してきましたが、今後より一層有効的にご活用いただくために、
2023年7月17日より「オリジナルポートフォリオを作成できるサービス」に進化させました。
この記事では
- 主な変更点
- なぜオリジナルポートフォリオが必要なのか
- 皆さんどんなメリットがあるのか
- コーディングやレビューの流れはどうなるのか
これを解説していこうと思います。
既に購入頂いている方に、今回の変更で新たな費用は発生しませんので、ご安心ください。
また新しい商品が増えるわけでも無く、ただただ内容をアップデートしたのみになります。
よって今から購入される方も、オリジナル化までレビューを受けられます。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
新課題の変更点(中級以上)
新しく「オリジナルポートフォリオ作成と、そのレビュー」が追加されています。
- デザインカンプ通りにコーディングしてもらう
- レビューを受ける
- 修正点があれば、二回目のレビューを受ける
- 終了
- デザインカンプ通りにコーディングしてもらう
- レビューを受ける
- 修正点があれば、二回目のレビューを受ける
- 記事を参考に、オリジナルポートフォリオにしてもらう（NEW）
- オリジナルポートフォリオのレビューを受ける（NEW）
- 終了
オリジナルポートフォリオの例
ここでいう「オリジナルポートフォリオ」というのは
完全オリジナルではなく、課題デザインを元に、画像、テキスト、ロゴ、配色、要素の配置を改変したものを指します。
これらの要素が異なるだけで、サイトの印象も内容も結構変わるので、半オリジナルポートフォリオにすることができます。
変更前とオリジナル例
オリジナルポートフォリオ化は結構重いので、コーディングに慣れてきた「中級以上」の課題を対象にします。
なぜオリジナルポートフォリオが必要なのか
- クリエイターとしてのアピールになる
- 直案件の練習になる
❶クリエイターとしてのアピールになる
これまでのコーディング課題は、どこも「デザインカンプからのコーディング」だけで、これによって
ポートフォリオが他の初学者と被って、同じポートフォリオが同じ営業先の会社に大量に届く
といった現象がありました。
正直私のコーディング課題もたくさんの方が取り組まれたので、被りの問題が出てしまっていました。
私は、「コーディングポートフォリオは技術力を示すものだから、被ることに何が問題があるのか」と思っていましたが、
コーダーもクリエイターなので、自分でオリジナル作品を持つ人を評価する面もあることに気づきました。
確かに、私も人を募集する時に、見たことあるスクールの課題だけ出す人よりも、オリジナルのものを出す人の方を見ちゃいますね。
他にも、ポートフォリオをアピールする際にもアピールしやすくなります。
Colaは、デザインカンプからのコーディング課題を元にした作品で、セクション構成は課題と一緒です。
それを元にオリジナルポートフォリオを作成する際に、「コーディングのスペシャリストを現場に派遣する」という架空サービスをイメージし、親しみやすさと快活さをイメージする#4gdh5dの色を使用し、「丁寧で素早くコードを納品する」イメージを表現しました。
また、サービスも「コーディング代行」だけでなく、「コーダー派遣」も準備することで、幅広い企業のニーズに答えられるようにしました。
う〜ん、でもコーダーのクリエイティビティって制作会社とかに評価されますぅ？
デザインを忠実に再現するのが、コーダーの仕事では？
そうなんですが、Webサイトは「何かの課題を解決する手段として」あるはず。
その「課題を解決するためにどういう思考を辿ってサイトを作ったのか」は結構どんなクリエイターに営業しても響くと思いますね。
❷直案件の練習になる
直案件というのは、「Webサイトがほしいお客さんと直接繋がってWebサイトを制作すること」です。
例えば、あなたの身近のお世話になっている「美容院」のサイト制作を行うにしても、直案件と言えるでしょう。
今回オリジナルポートフォリオを作成する上で、まず題材を自由に決めてもらって
- どういった課題や特徴を持っているのか
- 競合サイトの調査を行い、文章や画像、配色の傾向を掴み
- ロゴ、画像、テキスト、配色を選定、作成
これを行ってもらいますが、まんま直案件で行う工程になります。
逆に制作会社のコーディング案件をこなす際には、これは「下請け」という形になります。
これまでの課題デザインの画像制約が消える
実はコーディング課題デザインを頒布する場合に、「再配布可能な画像」しかデザインに使用できませんでした。
これによって画像選びの選択肢、特に日本人の画像が極端に少なかった問題があります。
Webサイトの印象の8割が画像で決まってしまいます
しかし、今回画像を皆さん自身にお選びいただくことで、サイトのデザインの自由度が大きく上がるので、ポートフォリオ自体の魅力度も上がるはずです。
皆さんのメリットは何か？
- デザインカンプからのコーディング練習を積める
- オリジナルポートフォリオを作成できる
- 直案件の練習になる
❶デザインカンプからのコーディング練習を積める
もう一度、これからのコーディング課題の工程を復習します。
- デザインカンプ通りにコーディングしてもらう
- レビューを受ける
- 修正点があれば、二回目のレビューを受ける
- 記事を参考に、オリジナルポートフォリオにしてもらう（NEW）
- オリジナルポートフォリオのレビューを受ける（NEW）
- 終了
つまり、制作会社などの下請けで必須能力の「デザインカンプからのコーディング経験」はこれからも積むことができます。
ただ、「できればレビュー後に皆さんにオリジナルポートフォリオ化してほしい」ので、
実際に営業や就活で使用してもらうのは、「原則オリジナルの物のみ」を基本にしたいと思います（過去完走者については後述しますが、任意とします）
デザインカンプを忠実に再現する力は必要なので、これはそのままです。
またオリジナルポートフォリオも一回のみレビューしますので、表示崩れはない状態を目指せます。
❷オリジナルポートフォリオを作成できる
現在「与えられたコーディング課題をそのままポートフォリオにすること」はある程度広まってしまっています。
今回の教材で「オリジナルポートフォリオ」を作成できれば、人によって作品がある程度異なるので、営業の際に返信率が高まる可能性が高いです。
❸直案件の練習になる
オリジナル化するにあたって、以下の作業が新たに発生します。
- ロゴ
- 画像
- テキスト
- 配色
- ファーストビュー（任意）
この作業の中で、「canva」などの各種ツールに始めて触れる方もいるかもしれません。
しかし、これらのツールはお客さんと直接つながる「直案件」などで利用する機会もあるので、このタイミングでその練習を積むことができます。
どういった物を、どう使うのかの解説も、オリジナル化の方法の記事で解説しています。
皆さんのデメリットは何か？
完成までの負担と期間増
これまでの単純な「デザインカンプからのコーディング」だけに比べて、行う作業の量だけでなく、種類も異なるので、オリジナル化によって一つの作品にかかる時間が増えると思います。
なので
早急にポートフォリオ利用したいのに、完成まで時間がかかるなぁ
こういった現象が起きると思います。
特別に、急ぎの方は一旦カンプ通りのものをポートフォリオ活用してもらっても大丈夫ですが、できれば近いうちに、必ずオリジナル化して提出していただきたいと思います。
質疑回答コーナー
Q:オリジナルポートフォリオ化は必ずしないとだめ？
これから取り組まれる方には、原則皆様にお願いしようと思います。
ただ、こっそり「デザインカンプからコーディングしたものをそのまま使う」ことをされても、こちらでは観測できないので、多分バレませんが…
とはいえ、絶対オリジナル化したほうが成果は出やすいし鍛えられると思いますので、ぜひ！！
Q:今すぐコーディングしたものをポートフォリオ利用したいけど、オリジナル化しないとダメ？
今就活中なので、コーディングしたらポートフォリオとしてすぐ活用したいのですが…
こういうケースが7.8月のうちは発生しそうなので、臨時的にOKとします。
その代わり、ポートフォリオとして使い続けるつもりなら、将来的にはオリジナル化していただくのと、オリジナル化したほうが就活の成果は多分出やすいと思う（オリジナリティアピール）ので、そこはご認識ください。
今回急なオリジナル化の宣告だったので、ある程度猶予期間を設けようと思います。
Q:既に課題を完走した人もオリジナル化しないとだめ？逆にしていい？
既に課題をいくつか過去にこなしていますが、オリジナルにしたらレビューしてもらえる？
既に課題を完走された方も、ひとまず無料でレビューをしていこうと思います。
絶対私が死ぬ気がするんですが、今回急な決断だったので、完全無料で卒業生もレビュー対応します。
「オリジナルポートフォリオのレビュー依頼フォーム」を課題ページに用意しています。
取り敢えず頑張ってみます(・・;)
Q:いきなりオリジナルのレビューで良くない？
どうせ最後にオリジナルポートフォリオをレビューしてもらうなら、最初からオリジナルポートフォリオをレビューに出せば良くない？
あくまでコーダーに求められるのは「デザインカンプを正確にコーディングで再現する力」です。
クリエイティビティはその次に来ます。
よって、「デザインカンプからのコーディング」のレビューを受けた方のみ、次の「オリジナルポートフォリオのレビュー」に進めるようにします。
Q:オリジナルポートフォリオを作るの大変そう…
正直大変だと思います。
ただ、なるべくシステマチックに制作できるように、変更箇所を以下に定めています。
- ロゴ
- 画像
- テキスト
- 配色
- ファーストビュー（任意）
また、「オリジナルポートフォリオの作り方」の記事を別途課題ページに掲載しているので、そちらを見ていただければ行えるようにしています。
慣れないことが多く難しいと感じるかと思いますが、評価されるオリジナルポートフォリオのために、頑張りましょう！
Q:オリジナルポートフォリオのレビューって何を見るの？
- 表示崩れが再発していないか
- 配色、画像、テキスト、ロゴが不自然じゃないか
これを見ます。
ぶっちゃけ、自分が作ったものがデザイン的に問題ないのか判断つきません
こんな方が多いと思うので、配色など違和感あれば指摘します。
とはいえ、どれぐらいのレベル感のを皆さん出されるのか、分からないので、取り敢えずレビュー回数を一回までとしますが、今後変更の可能性があります。
Q:値上げする？
値上げは少しずつしていくと思います。
単純にレビュー回数が増えるので、本業と並行でギリギリで運営しています。
なので、価格を上げて課題をこなす人数を減らすのもいいのですが、まずある程度は現状維持で頑張りたいです。
Q:せっかくパーフェクトピクセルでコーディングしたのにオリジナルにするのは抵抗感がある…
せっかくデザイン通りにコーディングしたものをそのままポートフォリオとして使えないのは、なんだかなぁ。
構築した後に、崩していく過程が嫌です…
ここはご理解いただくしかないのですが、この課題では
デザイン通りにコーディングを行える→自分のため
オリジナルポートフォリオを作成できる→自分のため&相手へのアピールのため
こういった２つの側面を一つの課題で叶えるものなので、どうしても一度組み立てたものを変えていく工程が出てしまいます。
皆様が希望する進路に進めるよう、ご理解いただく。
Q:どこでオリジナルポートフォリオのレビュー依頼を出せるの？
課題ページ内にオリジナルポートフォリオレビュー依頼ページのリンクを掲載しますので、そちらから送付ください。
Q:実績ではどうアピールすれば良い？
必ず「デザインカンプからのコーディング課題」がデザインの土台にあることを伝えてください。
完全オリジナルポートフォリオではないので、自分なりにどうアレンジしたのかの部分を伝えていただくのが良いと思います。
Colaは、デザインカンプからのコーディング課題を元にした作品で、セクション構成は課題と一緒です。
それを元にオリジナルポートフォリオを作成する際に、「コーディングのスペシャリストを現場に派遣する」という架空サービスをイメージし、親しみやすさと快活さをイメージする#4gdh5dの色を使用し、「丁寧で素早くコードを納品する」イメージを表現しました。
また、サービスも「コーディング代行」だけでなく、「コーダー派遣」も準備することで、幅広い企業のニーズに答えられるようにしました。
オリジナルポートフォリオが準備できると謳っているのですが、正確に言うと「半分ぐらいオリジナル」な感じなので、そこはご承知おきください。
基本的なレイアウトは他の人のポートフォリオと同じになりますからね。
具体的なオリジナルポートフォリオ化の方法
具体的なオリジナルポートフォリオの作成方法はこちらを御覧ください。
先駆者のお手本例を掲載予定
これから課題提出者が増えてきた際に、優れた題材、デザインの場合は、特設ページに掲載していこうと思います。
コーディング課題の最新情報はLINEにてお知らせ！
今後更新があれば都度LINEに流しますので、登録しておいていただけると嬉しいです！
＼LINE登録はこちらから／
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
ご寄付を頂けると今後の更新の励みになります！
