見出し画像

Progateとドットインストールの HTML & CSS レッスンが終わったらやるコーディング模写用サンプルデザイン【Adobe XDファイル】超初級編【0-1】 無料!

こんにちは。

コーディングサロンの竹内と申します。

現役WEBデザイナーやWEBデザイナーの卵の方に
HTMLコーディングを教えたりしています。

▼自己紹介はこちら
https://note.mu/codingsalon/n/n003e197553d6

今日は、
Progateやドットインストールの HTML & CSS レッスンが終わったけれど

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

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

超初級編、初級編、中級編、上級編、超上級編 の5ランクに分けて用意していく予定です。

■特徴

実際に僕が、Progateのレッスンを受講しながら、こういった力が必要だろうなと考えながら作成しました。

■チャレンジしてみた方の感想

※もしも嬉しいフィードバックを頂けるなんてことがありましたら、載せさせて頂きたいと思っています。
希望ハッシュタグ ⇒ #Mosyade もしくは #モシャデ


ーーー超初級編ーーー
【0-1】

【イメージサムネイル】

【販売物】
Adobe XD のファイル [0-1_interview.xd]

【価格】
無料

【同梱物】
・全体をキャプチャしたpngファイル
・内部で使用した画像ファイル 4個
※コーディングの「答え」は同梱していません!
 添削をご所望の場合、下記からご相談ください。
 https://coconala.com/services/666093

【容量】
約14MB

【対象者】
・「マークアップ」を概ね理解している人

【こだわった点】
・マークアップを正確にできる力が身についているかを確認できる構成
└セマンティックなマークアップがきちんとできればCSSはとても簡単なはず
・あえてカラム(横組みの)レイアウト無し
・ダミー文章ではなく、実際にありそうなページであること

【実践して確認できること・身につく力】
・マークアップ力

【備考】
オンライン学習サイトだと、パーツごとに進めて行って、最終的にページができるような構成になっていたりするので、1ページ全体を通しでマークアップするという機会がなかったりします。

また、「形・見た目」を作ることが優先で、正しいマークアップを学べていないこともあります。

この力が無いと、この先のスキルアップスピードも鈍化してしまうでしょう。

「マークアップ力」の再確認として使用してみてください。

案外、「初級編」より難しいかもしれません。

これをサクッとマークアップできない場合、コーディングの模写を繰り返す前に、もう一度マークアップの基礎を復習した方がよいかもしれません。


■ご注意事項

Adobe XD のファイルとなります(Adobe XD バージョン13.1.32.8 で作成しています)
※「テキストのみのデータ」は入っていません。
Adobe XD で開くとテキストをコピペできます。
※フォントはすべて「源ノ角ゴシック・源ノ角明朝」を使用しています。無料のフォントですので、適宜インストールしてください。
※コーディングの「答え」は同梱しておりません。
 添削をご所望の場合、下記からご相談ください。
 https://coconala.com/services/666093
※返金はいたしかねますので、よく内容をご確認いただき、
 吟味の上、ご購入ください。
 ⇒ https://note.mu/faq#7-1 [noteの返金ポリシーです]

■歓迎事項

・当ページやマガジンの拡散歓迎です(ファイルの拡散は禁止です!)
・ご自身でコーディングなされたページを公開するのは問題ございませんが
 テスト/架空のものであることの明記をお願いします。
・また、複数の方がチャレンジなさる可能性がございますので
 その点はご了承ください。

・公開する場合、できれば headタグ内に

<meta name="robots" content="noindex,nofollow">

の記述を入れてください。

■禁止事項

・当ファイルの一部、または全部を変更しての再販は禁止です。
・お知り合い同士のファイルの融通のし合いも禁止させて頂きます。
・当ファイルを用いてレクチャーをしたり、教材に利用することを禁じます。
・もしも禁止事項の抵触が発覚した場合、抵触日から取り下げ日までの間の使用料として、
 1万円/日をお支払いいただきます。
 ※1回の使用でも、使用日から発覚日の間の日数で計算いたします。
・当ファイルのホームページへの掲載やSNSへの共有などは禁止です。
 その場合も、公開日から取り下げ日までの間の使用料として、
 1万円/日をお支払いいただきます。
 (※自分でコーディングしたファイルの掲載はOKです!XDファイルの公開が禁止です!)

■よくある質問

Q. Adobe XDってなに?
A. Photoshop や Illustrator などで有名なAdobe社が開発している、今注目のデザイン・プロトタイプ作成ソフトです。触れておいて損はないと思います。

Q. Adobe XDは無料なの?
A. はい。制限はありますが、Adobe XDは無料で利用可能です。このコーディング練習においては、ファイルを開ければよいので、有料の機能は必要ありません。

Q. その辺のサイトの模写をすればいいんじゃない?
A. 実は僕もそう思います。

Q. ではなんでこんなを作ったの?
A. サイト模写は、

・作り終わったあと「できたー!」って公開できずにツマラナイ
・ソースを見れてしまうのでついカンニングしてしまう
・よくあるデザインテンプレートは英語ばかりで現実感がない(英語がわからずマークアップが微妙)
・「ちょうどいいレベル感」のサイトを探すのが大変(わからない)

  といったような問題があるみたいで、
  それを解決できればと思いました。

Q. デザインがダサくてやる気が…
A. デザインを美麗にすればするほど、コーディングで要求されることが増えていきます。
  1ファイルごとにレベル感を定めていますので、
  特に初級サンプルは我慢いただく必要がございます。
  それでも、なるべく綺麗に、そして何よりも
 「現実にありそうな原稿・構成」にこだわっていますので、
 ご理解いただけますと幸いです。
 課題の性質上、フォントを自由に使えないのもダサい理由の一つです。

Q. どれを買えばいい?
A. 全部です!と言いたいところですが・・・
  レベル感は人それぞれですので一概に言えなくてすみません。

・とりあえずネット教材終わっただけの方 ⇒ 超初級初級
・自信のある方 ⇒ 中級(準備中)
・なんでも来いな方 ⇒ 上級(制作中)
・単体ページのコーディングは出来る方 ⇒ 超上級(制作中)

  という目安で作成はしています。

Q. 超初級編の題材ってあなたのことですよね?
  無料で誰かにコーディングさせようとしていませんか?

A. (笑)。そんなことはありません。
  他に適当な題材が思い浮かばなかっただけです。
  また、既に自分でコーディングしたものは持っています。

Q. 上級編・超上級編はないの?
A. すみません。まだ制作できていません。
  需要も不明なため、徐々に作成して行く予定です。

Q. もっとやりたい!これからサンプルは増えていく?
A. まだ手探り状態ですので、評判と拡散のされ方次第だと思っています。
  やってみた感想をフィードバックいただけると励みになります。
  もちろん、「クリエイターサポート」を頂けると、とても嬉しいです。
  泣いて喜びます。いや、泣きはしません。小躍りします。

■アフターフォロー

コーディングをしてみて、

・あ、全然理解できていないな
・ここがどうしてもわからない
・とりあえずできたけど、正しいのかよくわからない

といった感想を抱き、添削をご所望の場合は下記からご相談くださいませ。

また、ストアカでも講座を開設していますので、是非、ご活用ください!

■販売価格について(★この超初級編は無料です)

・当ファイルは販売後に価格の改定が行われる可能性があります
・高くなることも安くなることもあります
・そんなに頻繁に変更はしない予定ですが、販売初期は色々な価格を試す可能性があります
・当ファイルは一定数溜まりましたらマガジンとしてセット販売される(販売価格は未定ですが、多少割安にするはずです)可能性があります

賢明な販売者であれば、購入アクション前にわざわざ書くことではありませんが、必ずご了承の上、ご購入下さいませ。

■購入にあたって(★この超初級編は無料です)

必ずこのフリー版の超初級編のnote及びファイルをご確認いただき、どのようなファイルなのか、どのような販売形式なのかをご理解いただきましたうえで他のファイルをご購入下さい。

・ダウンロード方法がわからない
・zipの解凍方法がわからない
・Adobe XD が使えない。よくわからない。
・思っていた内容と違った

といったことに関するサポートは致しかねますので予めご了承くださいませ。

この超初級編のファイルは、そういったことのご確認を頂くためにも無料で公開させて頂いております。


ーーーーーーーーーー
▼有料ノートの場合

ここから先が「続き」となります
無料ノートの場合は誰でも読めます
ーーーーーーーーーー


■謝辞など(★この超初級編は無料です)

この度は、ノートをご購入いただきまして誠にありがとうございます!

不具合や、不明点などございましたらコメント等でお知らせください。

可能な限り迅速に対応させていただきます。

※以下情報はすべて「有料の情報」となります。あなた様の外にもご購入者がいらっしゃいますので、決して他者に漏らしたり、SNSなどの公けの場に公開したりしないようにお願い申し上げます。
(★この超初級編は無料ですが、それでも公開しないようにお願いします)

■ファイルダウンロード

下記リンクからファイルをダウンロードできます。
ベーシック認証がかかっていますので、ID/PASSを入力してください。
また、zipファイルにも一応パスワードを設定しています。

◇ダウンロードリンク◇
ファイルをダウンロードする
◇ダウンロード認証 ID/パスワード
【ID】freenote
【PASS】freenote
zipファイル解凍パスワード
freenote

■最後に

もしも、コーディングし終わり、何か感じることなどございましたらフィードバックやシェア、スキなど頂けましたら励みになります。

希望ハッシュタグ ⇒ #Mosyade もしくは #モシャデ


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

こういった投げ銭的なサポートを受け取れている人がいるとは信じていないタイプの人間ですが、 もしも、もしもご支援いただけましたら、それは次のサンプルデザインを作成するための糧とさせていただきたいと思います!

「スキ」ありがとうございます!
5
こんにちは。タケウチと申します。 コーディング歴15年以上。総コーディング数1万ページ以上の現役マークアップエンジニア兼コーディング講師です。 コーディングが苦手なWEBデザイナーにコーディングを教えたり、マークアップエンジニアの卵をプロで通用するように育てるなどしています。

この記事が入っているマガジン

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。