模写コーディングにおすすめのサイト集めました【理由も解説】

Web制作

 

コーディングの練習をするために、模写コーディングをやろう!

と思ったが、いざやってみようとしても「どのサイトをコーディングすればいいかわからない・・・」と言う方もいると思います。

 

今回はそんな方に向けて、模写コーディングに手頃な難易度のサイトを集めてみました。

コーディング先に悩んでいる方は、是非参考にしてみてください。

 

ちなみに「模写コーディングとはなんぞや?」という方については、以下の記事で解説しています↓

 

以下、記事に入ります。

 

サンプルサイト

まずは入門編です。

とりあえず最初は超簡単なサイトのコーディングからやってみましょう。

 

とはいえ、最近のサイトから誰でもコーディングできそうな簡単なものを探すのは結構難しいです

こういう時は、「コーディング サンプルサイト」「コーディング 練習用」とかでググるとちょうど良さそうなのがちょこちょこ出てきます。

以下紹介↓

【初心者向け】HTML+CSS練習用のサンプルコード

https://note.mu/krowl/n/n0b339b21bb50

某所の勉強会で使用されたらしい、練習用のデザインです

完成品の画像とサンプルコードが付いてます。

 

レイアウトは超シンプルで分量も少ないので、Progateを終えたばかりの方とかに丁度良さげ。

素材も用意されてるので、画像を見ながらコーディングして終わったらサンプルコードと見比べてみましょう。

 

ただ、製作者が未経験時代に制作したものらしいので、HTMLとCSSのコード上に「うまくいっている箇所も、そうでないところ・苦戦した痕跡も、残しました。」とのことです。

サンプルコードを全て鵜呑みにするのはちょっと危ういかも。

 

htmlコーディングの勉強方法とコーディング練習用デザインの配布

http://miraiyanet.com/lecture/forth/cording.html

こちらは企業が練習用に作ったデザインをzipで配布してくれています

単なる見た目の再現だけでなく、スライダーやスムーススクロールなどよく使うjQueryの指定もしてくれます

最初のステップアップとしてはかなりちょうどいい課題ですね。

 

ひとつ欠点があり、デザインのみでサンプルのコードは付属していません

正解と見比べることが出来ないので、自分の書いたコードが綺麗かどうかなどの判断ができないのが欠点。

 

ちなみにサイト内の【ポイント】に「ヘッダとコンテンツでfloatを使ってみましょう。」と書いてますが、普通にFlexBox使って問題ないです。多分そっちの方が楽ですし。

 

Photoshop、Illustrator、XDからのコーディングに慣れよう!

https://note.mu/haniwaman/n/nefa48db83682

こちらは現役コーダーの方が配布している有料のnoteです。

 

デザインからのコーディングになるため模写コーディングとは若干カテゴリが違うのですが、コーディング始めたての方にはかなりおすすめの内容なので紹介させていただきました。

以下メリット↓

メリット

・難易度が低く、コーディング初学者におすすめ

・デザインデータからコーディングできるので、実案件を想定できる

・現役コーダーのソースコードを見ることができる

多分この3つの中で一番いい教材になるので、初心者にはオススメのnoteです。

 

ランディングページ

ランディングページ(LP)とは、「商品やサービスを売るための縦に長いページ」です。

コーディング案件は、このLP制作が非常に多いです

事前に模写で練習して、実案件に入る前に簡単なLPはスムーズに作れるようにしておきましょう。

 

iSaraLP

https://isara.life/

 

バンコクのプログラミング講座「iSara」のLPです。

サイト自体は複雑なCSSやjQueryが必要なく、レイアウトも至ってシンプルで難易度は結構低めです

手始めのLPコーディングとしては割とオススメのサイトです。

 

ただし、1つ欠点がありコーディングの分量がかなり多めです

レスポンシブも含めると中々の作業量になるので、初っ端でこれに挑戦する人は心が折れないようにご注意を・・・

 

ちなみに、このサイトは条件付きでポートフォリオに掲載可能です

実績がないor少ないコーダーにとってはありがたいですね。

https://twitter.com/Keisukexlife/status/1068728920931856385

 

コーポレートサイト

コーポレートサイトとは、ざっくり言うと企業の公式Webサイトです

一般的なホームページと言ったら、こちらをイメージする方も多いと思います。

サツドラ(トップページのみ)

https://satudora.jp/

 

我らが北海道のドラッグストア、サツドラのホームページです。

ほどよい分量でレイアウトもシンプル、レスポンシブもブレークポイント1つと全体的にコーディング難易度は優しめです

手始めのコーポレートとしてはかなり丁度いい難易度だと思います。

 

難易度もそうなのですが、このサイトを紹介する大きな理由は先ほどのiSaraLPに存在しなかった「ハンバーガーメニュー」と「スライダー」です。

 

こちらのサイトはレスポンシブ時にハンバーガーメニューが出てきます。

内容もクリックしたらボタンがアニメーションで×になり、上からメニューがスライドしてくるというオーソドックスな作り。

この手のハンバーガーメニューはコーディング案件において頻出なのでここで作れるようになっておけば後々使い回しが可能になります

 

もう1つの目当てはスライダーです。

スライダーも最近では割と使われることが多いので、事前に学んでおくことをおすすめします。

 

ちなみにサツドラではスライダーのプラグイン「slick」が使用されています。

slickはスライダーの中でもメジャーなプラグインで、割といろんなサイトでも使われがちです。

 

自前でスライダーを作っても全く問題ないのですが、このサイトの模写を機会にslickの使い方を学んでおくと後に役立つかもしれません。

 

ブログ型

ブログ型のサイトはヘッダー/メイン(記事)/サイドバー/フッターで構成されています。

 

ペライチのLPだと、サイドバーがついた構成はなかなかお目にかかれません。

しかし、コーポレートやブログだとこの構成は割とスタンダードに出てくるので、事前に模写して慣れておくのをオススメします。

 

特に、WordPressの自作テーマを作る場合なんかはこの構成が作れることが必須です。

WordPress案件も見越して力をつけておきましょう。

JIN

https://jin-theme.com/demo/

WordPressの有名テーマ、JINのデモページです。

オーソドックスな構成ながら、綺麗で作りやすいサイトです。

 

ちなみにJINはデモサイトが複数ありますが、スライダーもタブメニューも無い4番目か8番目がおすすめです。

 

SANGO

https://saruwakakun.design/

 

JINと同じ、ブログ型のサイトです。

構成はほぼ同じなので、JINとSANGOはどっちかやればOKです。

自分のレベルや好みを考えて、やりたい方を選びましょう(もちろん両方やってもOKです!)

 

アニメーション

今まで紹介したサイトをコーディングできれば、LPコーディング程度の案件はこなせるようになります。

ただ、これまで紹介したサイトには凝ったアニメーションがほとんどありません

 

コーディングの幅を広げるためにも、以下のようなアニメーション付きのサイトにもチャレンジしてみましょう。

SWM

http://www.swm.jp/

 

こちらのサイト、トップページに今まで紹介したサイトより難し目のアニメーションが使われています。

以下例↓

使用アニメーション

・ローディング画面

・ハンバーガーメニュー

・フェードイン

・文字装飾

このように、今までよりワンステップ上の内容がそろっています。

この辺りがこなせるようになれば、コーディングの実案件で不安はほとんどなくなると思います。

トップページのボリューム自体はかなり少なめになっているので、見た目の作成だけならそこまで時間がかからない点もポイント。

 

ただ、一応紹介はしましたが、アニメーションに関しては無理にサイトごとコーディングしなくてもOKです。

自分で簡易的なHTMLを用意して、サイト内で使われている動きを再現するだけでも十分勉強になります。

 

もしこれ以外のアニメーションを勉強してみたい方は、自分が実装してみたい動きをするサイトを探してみましょう。

アニメーションがふんだんに使われたサイトは、以下のサイトから探すことができます。↓

MUUUUU.org

ページを開いたら、

左のカテゴリメニューを開く→DESIGN→TOPページにJS多用

詳しく勉強したい方は、ここから自分が「これいいな!」と思うサイトを探せばOKです。

 

まとめ

ここに記載したサイトをコーディングできれば、簡単なコーディング案件は問題なくこなせると思います。

コーディングの実力を伸ばしたい方は、手が空いたら上記のサイトをガリガリコーディングしてみましょう!٩( 'ω' )و