難しくない！模写コーディング超初級おすすめサイト3選+α
「模写コーディングって難しい」、「やり方が分からない」
と、HTML/CSSを学んだ次のステップでつまづく方は多いと思います。
まず、模写コーディングとは
「既存のサイトの見た目をそっくりそのまま、自力でHTML/CSS/JSなどコーディングをして再現する」
ことをいいます。
▼これから独学でWebデザイン入門されるという方にもおすすめの勉強法です。
webabc.hatenablog.jp
Webデザイン脱初心者の登竜門として、模写コーディングは立ちはだかっています。
その原因として、模写でおすすめされるウェブサイトの多くが、０から入門された初心者にとってはレベルの高いものが多いせいだと思います。
そこで今回、模写コーディング超初心者向けおすすめサイトのご紹介をさせて頂きます。
行き詰ってる方にお読みいただいて、脱初心者のお役に立てれば幸いです。
ではやっていきましょう。
超初心者向け、模写コーディングおすすめサイト紹介
初級おすすめサイト#1 シンプルLP型「FLOWER」
こちらのサイトはお花便というサービスのサイトで、非常に美しい印象のサイトでありながらシンプルな構成で、模写初心者には最適なサイトです。
花の画像など綺麗な素材がふんだんに用いられていて、女性をターゲットとしたサイトです。
ただ、素材を配置して出来上がっていく様を見てモチベーションが高く保ちやすいサイトなので、男性にも是非模写をおすすめしたいところです。
Webデザイナーを目指す上では女性目線でのサイト制作が求められることもあるので、これを機に挑戦してみてはいかがでしょうか。
サイト制作のキモとしては、画像、背景画像の配置、Flexboxやgridなどを用いたレイアウトになるかと思います。
レスポンシブに対応して、横並び縦並びの切り替えなど出来ればかなりレイアウトには慣れてくるでしょう。
初級おすすめサイト#2 ブログ型「Write」
ブログを書く事に特化したミニマルなWordpressテーマです。
無駄を一切省いたサイトなので、その分模写するには物足りなく感じるかもしれません。
ただ無駄がない分、コーディングのレベル的に難しいということは無いので初心者にはお勧めしやすいサイトです。
のちのちWordpressの独自テーマ作成を学びたいというような方は、まずトップページをHTML/CSSで模写コーディングして、そこからWordpress化する方法を学ぶのも良いと思います。
初級おすすめサイト#3 LP型「Kneipp バスソルト」
こちらも画像が多め、かつコンテンツ量も適度で、コーディングしやすい構成のサイトかと思います。
非常にシンプルなレイアウトですが、ボーダーに画像を用いた表現だったり、チェックマークを背景画像で表現するなど、定番のサイト制作のノウハウが詰まっています。
模写することでとても勉強になるサイトでしょう。
初級+α おすすめサイト#4 コーポレート型「札友電材株式会社」
初級+αのこちらのサイトは中級といってもいいかもしれません。
サイトを見て頂くとJavaScriptでスクロールに合わせて各コンテンツが表示されるアニメーションが施されています。
このJSを無視して動きの無い部分のみ模写するのであれば初級+αのレベルと言えるかと思います。
1P内にコーポレートサイトの内容が詰まっているので、サイト構成の勉強にもなります。
問合せフォームやGoogleマップの埋め込みなど、脱初心者として勉強になるであろう部分も多いです。是非挑戦して頂ければと思います。
それでも模写コーディングに行き詰るなら…
模写に行き詰る方は基礎がまだ身についていなかったり、自分で調べるということが苦手な方が多いです。
▼理解するまで何度でも基礎には立ち返りましょう。こちらコーディングに関する記事をまとめています。
▼参考書で一通りしっかり学ぶことも基礎を理解する上では有用です。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
HTML＆CSSとWebデザインが 1冊できちんと身につく本
よく模写コーディングの定番として紹介されているサイト
「iSara」のLPなどは今回メインの紹介としては割愛させて頂きました。
ボリュームやコーディングレベル的にiSaraは初心者レベルとは言い難いからです。
逆にiSaraが模写出来れば模写コーディングの卒業レベルといえると思います。
紹介した中ではflowerやwriteはかなり難易度が易しいと思います。
ただ、それでもつまづく場合にはスクールなど受講検討されるといいでしょう。
私の方でもピンポイントでオンラインレッスンを行っています。
サイト下部問合せフォームより是非ご相談ください。
今回は模写サイトの紹介のみでした。
次回は具体的な模写のやり方なども解説出来ればと思います。
※さらにシンプルな模写用サイトテンプレートとコーディングの思考解説記事を書きました(2021.03.09追記)
※模写に必須な拡張機能5選、挙げてみました。是非模写コーディングの際にはご活用ください(2021.03.09追記)
最後までお読みいただきありがとうございました！
▼次のステップとして、良質なサイト見本から自分が模写したいと思うサイトを探すのも手だと思います。
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
▼HTML/CSSの基礎的な記事です。是非模写の際にご活用ください。
