見出し画像

【上級】デザインカンプからのコーディング実践演習【WordPress実案件レベル】

オリジナルポートフォリオ作成に対応しました!
それに伴い無料レビュー回数も増えました!Fimgaにも対応!
2021.12.15
記事の複製方法について(Duplicate Post)
2023.02.24 動画解説を導入!
2023.02.27 紹介者制度を導入
2023.05.08 游ゴシック解説記事追加
2023.07.17 オリジナルポートフォリオ化について、追記しました。2023.10.02 OGP,SEO対策,PerfectPixel.SNSシェアボタン、Faviconなど様々な解説記事追加
2023.10.06 Figmaデザインを追加
2024.02.07 模擬案件を経験できる超実践編を開講、記事下部に掲載しました

こんにちは、フリーランスのWeb制作者として6年ほど活動しているしょーごです。

今回は実案件レベルのWordPressサイト制作を体験できるデザインカンプを作成しましたので、公開します。

レベル感的には、既出noteの「中級Ex」を完走し、「WordPressレッスンブック」を終わらせた人向けのレベル感となっております。

また、2023年7月よりオリジナルポートフォリオ作成にも対応し、他人と被りにくいポートフォリオを準備していただけるようになりました!


【動画でも解説しています】

この動画の17:33より上級編に触れています。


独学ロードマップにも取り込みました。

とにかく、実案件レベルでポートフォリオとして高く評価されるものを追求しました。

既存教材における課題

これまでのコーディング教材は大多数がシングルページでした。

スクリーンショット 2021-11-22 13.10.39

この教材では、複数ページにまたがる実案件レベルの模写を体験いただけます。その分難易度が高いため、上級編となります。

デザインについて(FigmaとXD両方あり)

ページ数は8ページになります。

スクリーンショット 2021-04-07 10.37.14

サイトの題材としては英語資格のスクール(TOEFL)で、トップページはこんな感じです。

ホーム

また、上記のデザインをコーディング後に、オリジナルポートフォリオ化を行っていただきます。

オリジナル化例

オリジナルポートフォリオ化とは?なぜしないといけないの?

以下の記事必読!!

2023年7月より、デザインカンプ通りにコーディングしたものをそのまま実績利用するのではなく、オリジナルポートフォリオにしてレビューを受けたものを、実績として活用頂きます。
かならず上記認識いただき、ご購入いただくようにお願いします。

サイト構成

ページの構成としては以下の感じで、基本的なコーポレートサイトの要素を備えています↓

スクリーンショット 2020-09-14 23.04.23

完走者の声

ここに上げている以外にも、ツイッター検索していただければたくさんの最新の感想を見つけられると思います。


スクリーンショット 2022-04-19 21.43.01
スクリーンショット 2022-09-29 19.36.27


スクリーンショット 2022-08-27 16.41.58
スクリーンショット 2022-08-09 18.50.41
スクリーンショット 2021-11-22 13.15.19

この教材で学べること&できるようになること

①サイトの複数ページ構成方法が分かる、できる

このコーディング教材を作るに当たり意識したこととして、複数ページのコーポレートサイトを作るということです。

なぜなら、Web制作案件の大半が複数ページのコーポレートサイトだからです。

よく制作会社サイトの意見として、「カフェとかのサイト出されても判断に困る」というのは、実案件でカフェのサイトを作る案件がほとんど無いからです。

②WordPressサイトの構築を一通り学べる

今回は仕様書を準備しました。WordPressのサイトを作ると、当然のように

・関連記事一覧
・おすすめ記事
・カスタム投稿

などの言葉が出てきます。しかしそうした場所も「〜を使って実装してください」とすることで、作りながら学べる形式にしております。

スクリーンショット 2020-09-15 15.40.38

また、主要プラグインの使い方も学ぶことができます。いずれもほぼ毎回案件で使うものばかりです。

スクリーンショット 2020-09-15 16.00.01
SNS共有リンクとフォームに関しては、現在は別の物にしています

③テスト方法を学べる

この課題では「テーマユニットテスト」を使用してテストまでさせています。

どんな投稿でも極力崩れない実装をCMS案件では求められるので、デバッグにとてもいいのです。

スクリーンショット 2021-11-22 13.12.46
スクリーンショット 2021-11-22 13.12.56

④サーバーアップロード経験が積める

サーバーアップロード訴求バナー

⑤オリジナルポートフォリオを準備できる

デザイン通りにコーディングしていただいた後、オリジナルポートフォリオ化していただきます。

購入者特典👑

①表示確認を行います。
完走された方は仕様書最下部のフォームよりご連絡ください(ここが分からないなど、技術面の相談には乗れかねます)
機能確認ではなく、あくまで表示がデザイン通りかを確認します。
②ポートフォリオとしてご活用頂けます(必ず表示確認の後活用してください)
③ポートフォリオとしてアピールする際のお手本文章を仕様書下に同梱
適切なアピール文章で採用担当に響くアピールを行えます。

動画解説を導入しました!

WordPressの一からの実装はイメージつかない方が多いと思うので、動画解説を新たに導入しました!

上級解説の一コマ、スライドで解説しています

教材作成の思い

画像15
画像16
画像17

表示確認特典の価値

本noteシリーズの最も付加価値が高い部分です。

このコーディング教材シリーズでは初級編以外に表示確認特典をつけています。これには明確な理由が存在するのです。

表示崩れポートフォリオ多すぎ問題

私と同時期にフリーランスになった人や先輩エンジニア、教え子の多くは既にディレクターやマーケター、起業された方、案件にあふれる人気コーダーデザイナーなど発注者側にも回っています。

彼らにも駆け出しエンジニアから営業メッセージが多く届くようです。

その中で最近多く聞く言葉があります。

添付のポートフォリオがぱっと見でズレてる人が多すぎる

自分が思っている以上にデザインの崩れは気になるものです。

しかし、フリーランスとして活動している人に自分の表示確認をお願いするのもハードルは高いです

この規模の課題の場合、どんなに安くても¥5,000~が相場でしょうし、大半の人はいきなりポートフォリオにして営業し、そして「お断り、もしくは返信なし」になってしまうのだと思います。

そこに問題意識を持ったこのnoteでは、この料金で「表示確認特典」までつけているので、ポートフォリオ崩れの問題を解消することができます。

表示確認特典に価値を感じられた方は、このnote,確実に「買い」だと思います。

スクリーンショット 2021-11-22 13.03.46

コーディング課題の進み方

レビュー返しは爆速!!

上級レビュー例

現場で使われているAUNというレビューツールで添削を行います。制作会社や私も実案件でよく使っているものです。

上級はページ数が多いのでかなりチェックが大変ですが、がんばります笑

スクリーンショット 2021-12-23 12.33.57

実務でも使えるセルフチェックシート無料プレゼント!!

コーディングチェックシート配布note

各教材ごとにチェック項目を指定しているので、セルフチェックの手法を学ぶことができます。

セルフチェック→表示確認の二段構えでクオリティの高いポートフォリオを準備することが可能になります。

料金

デザイン・企画の作成にかなり時間がかかったのと、上記特典に付き、初級編中級編より価格は上がっております。

ただ、コスト以上の価値は確実にありますし、この教材を終えられたら就職転職にも有効ですし、完走できれば人生を変えるほどのインパクトがあると思います。

発注者視点での教材づくり

最近はプログラミングスクールや教材が増えたことで、

 「まーたスクールの課題か」と言う言葉を聞く機会も増えてきました。

教材が出回れば、採用担当に教材への既視感が出てくるのは、ある程度仕方ないと言えます。

しかし、本質的には「結局何ができるのか」を気にしているのが真理で、そこに訴求できれば勝率は高いです。

今回はひたすら発注者視点にたって、ポートフォリオとして評価されるサイトになるように設計しました。

担当者「なるほど、この人はデザインカンプ通りにコーディングできて、WordPress対応できて、カスタム投稿とカスタムフィールドが使えて、お問合せフォーム対応も大丈夫なのか、スキルは大丈夫そうだな」

という反応になるように、アピールポイントも記載しております。

完走者の模範解答公開

許可をとって完成度の高い方のテストサイトを模範解答としてのせています。挙動を確認することができます。

実案件を前に怖くて踏み出せない全あなたへ

私も実案件が全くイメージできずに、案件獲得に動くのがこわかった記憶があります。「実案件を想定した教材があればいいのに」という思いを今回形にしました。

大丈夫です。今回の課題は「実案件レベル」なので、完走していただいて私のレビューで合格が出れば、それは納品と同じようなものです(その代わり難しいのでかなりググることになると思います笑)

もしあなたがまだ「実案件を前に尻込みをしている」状態であるなら、この教材があなたの助けとなるはずです。

よくある質問

Q1:表示確認2回でクリアできなくてもポートフォリオとして活用可能でしょうか?
A1:可能です。その場合はセルフチェックで各自の判断で公開お願いします。
*表示確認は初級Ex以降の特典です。

Q2 :表示確認はどれぐらいの期間で返ってくるのでしょうか?
A2:通常3日以内です。それ以上経っても返信のない場合はメールが届いていない可能性があるので再送いただければと思います。

Q3;表示確認はどのように行われますか?
A3:MONJI、AUNで視覚的にわかりやすく行っております。

Q4:技術的にわからない部分を質問できますか?
A4:質問はお受けしておりませんm(_ _)m
その代わり完走された方のサイトを掲載しております。

Q5:オリジナルポートフォリオに必ずしないといけませんか?
A5:原則皆様にお願いしております。同じ課題をこなしている人が今後増えても、ポートフォリオが被りにくくなるので、営業の成果が上がりやすくなるため、ご協力ください。

Q6:これら一連の教材で案件獲得できるレベルになりますか?
A6:月20万を稼げる&就職転職が十分可能なスキルレベルまで押し上げます。
本教材は私が公開しているロードマップに練り込んでいるため、ロードマップ上で活用していただけると各教材がどのレベル感になるのか、イメージが湧きやすいかと思います。
web制作学習
ロードマップはこちら

Q7:公開するサーバーの指定はありますか?
A7:特にないですが、おすすめはあります。「サーバー契約→サイト公開」まで解説した記事リンクを置いているので、手順通りに進めれば決して難しくありません。

Q8:XDはソフトがなくても開けますか?URLカンプがありますか?
A8:URLカンプがあるので、Figmaのようにブラウザでデザインを見ていただけます。よってソフトの用意は必要ございません\(^o^)/また、最近Figma版も用意しました。

課題完走者からのメッセージ・アドバイス

挫折しそうなとき、ここを見て下さい。

すでに制作会社と仕事されていて、この上級編課題をこなされた方の講評も載っています。実際にこの課題について面談で話したとか。参考になるはずです。

スクリーンショット 2021-06-15 11.36.48
スクリーンショット 2021-11-17 14.37.52

購入の際は中級Ex、上級、Photoshop編3つをまとめた「即戦力パック」が超お得!

コーディング課題はnote以外にブログでも販売しています。

ブログではnoteと違い単体販売していない変わりに、限定コンテンツをプレゼントしています。
中級ExもPhotoshop編も、静的な部分は上級より難しいので、かなり良い訓練になりますよ!

購入前最後に確認いただきたいこと

全員にオリジナルポートフォリオ化していただきます

デザインカンプからコーディングして頂いたあと、全員にオリジナルポートフォリオ化していただきます。
よってデザインカンプからコーディングしたものをそのままポートフォリオとしてはお使いいただけませんので、ご注意ください。

オリジナルポートフォリオ化する方法の記事も紹介していますので、そちらを参考に行っていただきます。

続きをみるには

残り 4,677字 / 18画像 / ファイル3個
この記事のみ ¥ 6,480
期間限定 PayPay支払いすると抽選でお得に!

過去の自分が知りたかった、欲していたものを発信する、その信念で活動しています。たくさん遠回りもしてきました。そんな過去の自分を助けにいく。 もしよろしければ応援頂けますと幸いです!↓