プログラミング

【無料素材】デザインカンプ&コーディング動画でコーディングしよう!

こんにちは、だんです!

今回は、Web制作をはじめたての人が「デザインカンプからのコーディング」に挑戦するための記事です。

「コーディングむずすぎ…。全然手がうごかん。」

「初心者だけどコーディングに挑戦したい!」

「デザインカンプからのコーディングをしたいけど素材がない」

こんなお悩みを解決します。

デザインカンプと実際にコーディングしている動画をつくったので、初心者の方はぼくと一緒にコーディングしていきましょう!

【模写サポート企画】カリキュラム

このカリキュラムは、1週間でコーディング〜サイト公開までを想定しています。

Day.○ となっていますが、気にせずどんどん進んでいってOKです。

わからない所・不明点は、ぼくのTwitterにDMしてください!

この教材は『Web制作をはじめたて』の方向けです!

コーディング経験が複数ある方は、こちらの記事のコーディング教材がおすすめです。

コーディング教材を販売します【Web制作初心者向け】

 

それでは手を動かしていきましょう!

Day.1  全体を把握しよう

まずは、サイトの全体の確認と、素材のダウンロードをお願いします。

今回制作するサイトhttps://danblog.tokyo/

素材のダウンロードダウンロード(Google Driveに飛びます)

使用するツールFigma(無料です)

僕が自作したデザインカンプです。(トップページのみ)

シンプルですが、僕がよく使う実装ばかりで作られてるので、初心者にはかなり勉強になるかと思います。

【おすすめサイト】模写コーディングを徹底解説【やり方も解説】

【おすすめサイト】模写コーディングを徹底解説【やり方も解説】[st-kaiwa1]模写に挑戦したいけど何からやったらいいかわからない…。おすすめのサイトや効率的なコーディングのやり方が知りたい。ど...

上記の記事を読んで、一通り模写について知っておくとスムーズに進められます。

デザインカンプをみて「ムズすぎる…」と感じた方へ

コーディングに必要な基礎的な部分がたりないかもなので、こちらの本をまずこなしましょう。

この本を1周すれば、「できるぞ…!」と思えるレベルになります。

とはいえ、この教材は初めての模写には難しいです。

「難しいな…。」と思ったら、以下の手順を参考にしてみてください。

  1. 動画やコードをガッツリ見ながら模写する
  2. 動画やコードをちらちら見ながら模写する
  3. 動画やコードを見ないで模写する

上記の通り。

ぼくも最初は割とこんな感じで模写していました。

1回で完璧にコーディングするのは、才能がある人じゃないと無理です。

この手順通りにやると、同じものを3回コーディングをすることになりますが、3回目にはかなり完璧に近いと思います。

模写に挫折しちゃう人って「最初から完璧を目指す」人が多い印象なの、7割ぐらいの完成度を目指すのがベストです。

Day.2 コーディングをしてみよう – Header・FV編

今日から、実際にコードを書いてみましょう。

解説動画 というよりかは、動画をみつつ、一緒にコードを書いていく感じです。

ぺちゃぺちゃ喋っていたり、どう実装するか悩んでいたりするので、ミュート・倍速などを各自でしていただけるとありがたいです…٩( ᐛ )و!

Header・FV編 – PCサイズのコーディング

横幅の最大値:1100px

フォントやreset.cssなどを指定しないでこの動画が終わっています。

SPコーディング時の一番最初で指定しています、段取り悪くてすみません…!

フォントは以下をコピペしてください。

* { box-sizing: border-box; } h1,h2,h3,h4,h5,h6,p,a,li { line-height: 1.2; font-family: ‘ヒラギノ明朝 ProN’,’Hiragino Mincho ProN’,’Yu Mincho Light’,’YuMincho’,’Yu Mincho’,’游明朝体’,sans-serif; } a:hover { opacity: .5; transition: .3s; }

 

Header・FV編 – SPサイズのコーディング

ブレイクポイント:960px

ディベロッパーツールで見た際に、おそらく右側に余白が生まれてしまっていると思います。

これはDay.4で実装いたしますので、とりあえずスルーでOKです

 

Day.3 コーディングをしてみよう – Main①(お知らせ編)

Main① (お知らせ編) – PCサイズのコーディング

Main① (お知らせ編) – スマホサイズのコーディング

Day.4 コーディングしてみよう – Main②(施工事例編)

Main②(施工事例編)- PCサイズ

Main②(施工事例編)- スマホサイズ

Day.5 コーディング動画 – Main③(バナー編)

Main③(バナー編) – PCサイズ

Main③(バナー編) – スマホサイズ

Day.6 コーディングしてみよう – Footer編

Footer編 – PCサイズ

Footer編 – SPサイズ

コーディングの完成、おめでとうございます!

この企画を通して、すこしでも気づきがあれば幸いです。

Day.7 Webサイトを公開しよう

本日は、コーディングしたサイトを公開してみましょう。

サイトを公開するべき理由は以下の通り。

  • 案件の獲得に必要な実績になる
  • お客さんのサーバー・ドメイン周りのサポートや、運用保守を受けられる。
  • サーバー代が月額1000円ほどかかるので、学習をガンガン進めなきゃ!となる。

「お金をかけたくないな」と思ってしまうかもですが、プログラミングで収益を上げるためには必要経費です。

ぼくがサーバーへのアップロードは割と苦戦したので、下記記事で丁寧にまとめました。

不明点はDMでお聞きください!

ここまでできたら、本カリキュラムは完了です。

お疲れ様でした。これからもガンガンコーディングをしてスキルを磨き、収益化を目指しましょう!

完成したら「ツイート」で報告を!

サイトの公開まで終わったら、ツイッターでメンションし完成報告してください。

リツイートさせていただきます!

【お知らせ】Web制作者向けデザインカンプを制作しました!

今回制作したデザインカンプは2サイトです。

  • アプリのLP
  • 美容院

これらをやるだけでかなりコーディングのスキルも上がりますし、表示確認などの特典もおつけしてます!

ぜひチェックしてみてください。

 

 

まとめ

ここまでお疲れ様でした。

これからもコーディングをガンガンやっていきましょう。

Web制作で20万円稼ぐロードマップはこちらから

大学生がプログラミングで月20万稼ぐ学習ロードマップ【保存版】こんにちは、だんです。 先日、下記のツイートをしました。 ぼくが月20万稼ぐまでやった勉強 1. HTML/CSSを学ぶ ...
公式LINEやってます