今回は「【中級】デザインカンプからのコーディング実践演習【JavaScript導入】」に新課題の「架空農園サイト」を追加したので、紹介です。
中級課題は課題数が複数に
これまで中級課題は「ユアコーディング」という架空のサービスサイトのみでしたが、作ってから日が経っていたのもあり、より今風の、全く違う形の新しい課題を作ることにしました。
ポートフォリオの被りを無くしていきたいと思っています。
Figmaデザインで作成
Adobe XDとFigmaの命運はわからないですが、XDの雲行きが怪しいのがそもそもの始まりで、新規デザインを基本的に今後はFigmaで作っていこうと思い、Figmaデザインにしました。
Figmaからのコーディング方法についても解説していますが、とても直感的でコーダー的にはありがたく、デザインシステムに是非採用してほしいツールです。
スマホファーストビューのデザインあり
これまではあえてPCデザインしか用意していなかったのですが、まだレスポンシブが不慣れな時期にそれをさせるのも酷だと思い、
道筋を示すために、ファーストビューのみスマホデザインも載せています。
両方コーディング可能だが、無料レビューは一つ(２つ目は有料)
- 中級課題を購入してこれから取り組む人
- 既にユアコーディングをクリアしている人
両者ともにコーディングは両方行っていただけます。
ただ、両方ともレビュー可能にしてしまうと、私の工数が死んでしまうので、今回有償で二作品目のレビューを受けることにしました。
以下のボタンからレビュー価格を見ることができます。
正直破格すぎて、時給的にはマイナスになりかけではあるのですが、私は
- プロからきちんとレビューが受けられる、コーディング課題
- レビューを受けているので、ポートフォリオで自信を持ってアピールできる
これを目指していて、また強みであると思っているので、レビューをつけないのはありえないと思い、リリースしました。
農園サイトの方が、難しい、しかし、作っていて楽しい
JavaScriptが絡む部分はこんな感じ。
- ハンバーガーメニュー実装（ユアコーディングにもある）
- アコーディオン実装（ユアコーディングにもある）
- Swiperでスライド実装（ユアコーディングにもある）
- フォームの入力チェック（ユアコーディングにもある）
- ページ内リンクスムーススクロール（ユアコーディングにもある）
- ローディング画面実装（農園サイトのみ）
農園サイトの全体像はこんな感じ。
- 画像の配置をあえてトリッキーにしていたり、
- フォームの入力項目が少し多かったり
- レスポンシブが少し複雑だったり
既存のユアコーディングより骨が折れる課題になったかと思います。
しかし、今回「架空だけど、テーマを身近に感じられて、作っていて楽しくて、ポートフォリオとしても映える課題」を意識したので、結構自信作です笑
コーディング課題にありがちな「よくわからない興味ないサイト」を作るのは結構味気なくてつまらないので、
私の課題はなるべく「本当にあるかのようなサイトデザイン」を意識しています。
とは言え、難しいのは事実なので、今後動画解説を追加していく予定です。
ブログ版がおすすめ
この課題は単体購入が可能ですが、ブログ版でまとめて購入が一番お得になるようにしているので、興味があれば以下より取り組んでみてください。
ご寄付を頂けると今後の更新の励みになります！
