Progateとドットインストールの HTML & CSS レッスンが終わったらやるコーディング模写用サンプルデザインをnoteで公開

コーディング模写用サンプルデザインを作成した経緯など

Progateやドットインストールの HTML & CSS レッスンが終わったし、いくつかの教材も終わったけれど、

• 次はどうしたらいいかわからない
• まだ全然、仕事を請けられる気がしない
• ページを1からコーディングしてみたけどできないことだらけ
• 久しぶりだから復習したい

といった悩みをよく目にするようになったので、
そんな方たちのために、コーディングの練習をするための題材を用意してみたという経緯です。

実際に、サロンの生徒さんにも出す課題も用意しなければならないので、どうせなら生徒さん以外の多くの方にも還元できればと思って公開しました。

模写コーディングの問題点

コーディングの模写をしようとして一番初めにぶち当たるのが題材選択の難しさです。

• 作ってみたいサイトはあるけれど自分にできるかわからない
• はじめてみたけど、量が多過ぎてなかなか完成しない
• ツラくなって途中で諦めてしまう

ある程度コーディングが出来るようになってきて、自身のレベルが掴めてくると（そうしたらもう模写は必要ないかもしれないですが・・・）この辺りの見極めができるようになりますが、最初のうちはなかなか難しいと思います。

また、他にも

• 作り終わったあと「できたー！」って公開できずにツマラナイ
• ソースを見れてしまうのでついカンニングしてしまう
• 「ちょうどいいレベル感」のサイトがわからない
• つい、難しそう＆カッコいいサイトを選んでしまう
• よくあるデザインテンプレートは英語ばかりで現実感がない（英語がわからずマークアップが微妙）

みたいな問題もあり、なかなか明るく楽しく模写をやれる環境が整っていないように思いました。

そんな問題を解決するためのデザインを提供

問題の解決方法はシンプルです。

• 各人のレベル感に合わせて選択でき
• ソース（答え）を見られないようにデザインファイルのみで
• 日本語のありそうな原稿＆サイト構成で
• 作り終わったあと「できたー！」って公開できる

そんなデザインを提供できれば万事解決です！

そう思ったので直ぐに行動してみました。

名前をつけてみました

名前をつけると魂が宿るということで、この一連の活動にMosyade [モシャデ]という名前をつけてみました。

今はnoteでの公開ですが、いつか独立したMosyade [モシャデ]のサイトができたらなと思っています。

サンプルデザインを募集しています

今は、自分達で考えて作成したデザインを提供していますが、なかなか時間が足りずに数が増えて行きません。

もしもデザインを提供してもいいよという方はTwitterでもnoteでも、可能な方法でご連絡いただけますと幸いです。

レベル感の調整など、一定の審査基準を設けるのですべてを使用させていただける訳ではありませんのでご了承ください。

また、今のところはAdobe XDファイルのみを考えています。

ゆくゆくは売れた分の利益還元もできればと思いますが、noteの規約や売上げ統計の詳細がどのように見られるかによっては実現できないかもしれません。

最後に

最後に少し脱線しましたが、コーディング練習用のサンプルデザインの提供を始めましたというお話でした。

是非、チャレンジしてみてください！