見出し画像

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

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

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

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

web制作_XDからの模写コーディング教材

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

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

コーディング教材比較表

既存教材における課題

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

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

デザインについて

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

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

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

ホーム

デザイン内画像はunsplash及びPixabayのものを使用しています。

サイト構成

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

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

完走者の声

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

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

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

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

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

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

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

・関連記事一覧
・おすすめ記事
・カスタム投稿
などの言葉が出てきます。しかしそうした場所も「〜を使って実装してください」とすることで、作りながら学べる形式にしております。

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

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

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

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

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

購入者特典👑

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

教材作成の思い

画像15

画像16

画像17

表示確認特典の価値

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

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

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

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

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

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

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

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

しかし、フリーランスとして活動している人に自分の表示確認をお願いするのもハードルは高いです。数千円が相場でしょうし、大半の人はいきなりポートフォリオにして営業し、そして「お断り、もしくは返信なし」になってしまうのだと思います。

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

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

コーディング教材_学習の流れバナー

中級Ex以降(この上級も含め)はポートフォリオとして強力

ポートフォリオ準備できる

実務で必須の『セルフチェック習慣』を身につけることができる

セルフチェックシート配布

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

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

料金

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

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

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

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

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

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

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

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

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

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

完走者の模範解答公開

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

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

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

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

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

よくある質問

Q1:表示確認2回でクリアできなくてもポートフォリオとして活用可能でしょうか?
A1:可能です。その場合はセルフチェックで各自の判断で公開お願いします。
*表示確認は初級Ex以降の特典です。
Q2 :表示確認はどれぐらいの期間で返ってくるのでしょうか?
A2:通常3日以内です。それ以上経っても返信のない場合はメールが届いていない可能性があるので再送いただければと思います。
Q3;表示確認はどのように行われますか?
A3:MONJI、AUNで視覚的にわかりやすく行っております。
Q4:技術的にわからない部分を質問できますか?
A4:質問はお受けしておりませんm(_ _)m
その代わり完走された方のサイトを掲載しております。
Q5:かなり古いPCを使っていますが、Adobe XDを使えるか心配です。 A5:URLカンプも配布していますので、PCのOS,性能に関わらず学習していただけます。心配でしたら無料の「入門編」も出しておりますので、そちらで試していただけると良いかと思います。

入門編はこちら
Q6:これら一連の教材で案件獲得できるレベルになりますか?
A6:本教材は私が公開しているロードマップに練り込んでいるため、ロードマップ上で活用していただけると各教材がどのレベル感になるのか、イメージが湧きやすいかと思います。
web制作学習
ロードマップはこちら

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

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

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

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

スクリーンショット 2021-06-15 12.08.07

この続きをみるには

この続き: 4,591文字 / 画像8枚
この記事が含まれているマガジンを購入する
中級上級をバラ買いすると、9520円のため、このマガジンで購入頂くと1900円お得です!

XDデザインデータからのコーディングを経験するためのデザインデータの【中級】【中級Ex】【上級】【JavaScriptを練習できるJS特訓…

このマガジンでお買い求めいただきますと、 2500円以上お得で、実質「中級までが無料」でついてきます。 これから学習を始められる方には一番オトクとなっております。 教材詳細はこちら→https://shogo-log.com/coding-study/

XDデザインデータからのコーディングを経験するためのデザインデータを【すべて】同梱しています。 計10回もの表示確認を受けられます(初級E…

または、記事単体で購入する

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

Shogo(しょーごログ運営)

2,980円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
Shogo(しょーごログ運営)

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

応援、ありがとうございます!!!(by全員)
126
新大卒、山形在住のWeb系フリーランス兼YouTuber兼ブロガー。 メディア運営(ブログ5万pv超,YouTube1万人超,note1.5万pv) 「それが知りたかった!」を届けるメディアしょーごログ運営→https://shogo-log.com