はじめに
Progateやドットインストールの登場で、多くの方がhtml&cssの入門されてるのを twitterやブログで見かけるようになりました。
僕もどちらにも登録してます。
ドットインストールでは、htmlやcss, railsなどなど様々なプログラミング言語を学ぶことができます。
Progateではhtml&cssを学びながらサンプルサイトを作っていくことができます。
インプットとしては大枠を上記の2サービスで勉強し、細かいところを書籍などで補えば十分かと思います。
しかし、実務や副業、自分のサイトを作っていくとなると少々アウトプット不足気味なのではないかと思います。
htmlやcssの基礎を学んでも、実際に作りたいサイトを作っていくにはもう少し練習が必要となります。
僕も勉強したての頃は、基礎は学んだけど、いざ作ろうと思ってもどこから始めていいのかわからない、ダサいサイトしか作れない と悩みました。
そこで、今回はwebコーディング最強の勉強法「模写」と模写の参考になるサイトをご紹介します。
スポンサーリンク
模写とは
「模写」とは、既存のwebサイトをそっくりそのままコーディングする勉強方法です。
そっくりそのままと言っても、サイト丸々コピーするのではなく、主にコーディングするのはトップページ(やっても+1ページ程度)だけです。
色や画像は元サイトのソースコードを参考にしてもいいですが、基本的には見た目だけを頼りに作っていきます。
目新しい勉強方法ではないのですが、Progateやドットインストールで基礎を学んだ次に進むべき方向として最近注目を集めています。
模写をするのにはお手本となるサイトが必要です。
とはいっても、いきなり多機能でお洒落なサイトを作っていくのはハードルが高く心が折れてしまいかねないので、レベル別に参考となるサイトやサイトの探し方をご紹介します。
レベル１～初めての模写～
htmlコーディングの勉強方法とコーディング練習用デザインの配布 | 大事なことなので二度言います。 | 知って得する×遠まわりしないホームページ制作＆運用講座
かなりシンプルですが、まだまだ実用的なコーポレートサイトのデザインを配布されています。
同じデザインのサイトですが、PCオンリーのページ初級、PCオンリーのページ中級、レスポンシブ対応、jQueryを使ったレスポンシブ対応ページから 選ぶことができ、html&css習いたての方から、少し慣れてきた方まで自分に合わせたレベルのものに挑戦できます。
レベル感としては、Progateを終えたぐらいの方が挑戦するとちょうどいいと思います。
Progateはやっていないよという方は、Progateの「HTMLコース」で作るサイトも、初めて作るページとしてレベル感は良いので、そちらも挑戦してみてください。
レベル２～自分の好みのデザインをコーディング～
初めての模写を終えたら今度は自分で好みのデザインや、作りたいサイトのデザインに近いものを探して参考にします。
ちょうどいいレベル感のサイトを探すには、WordPressのデザインテーマが適切です。
無料のテーマなら豪華なjavascriptの機能もなく、頑張れば何とか作れる程度です。
テーマ自体は「wordpress 無料テーマ」でググればたくさん見つかりますし、ほとんどのテーマでデモページがあるので、デモページを参考に作っていきます。
レベル１からステップアップしたばかりの段階では、検索ワードに「シンプル」を追加して出てくるテーマを作るといいかもしれません。
また、現在ではほとんどのテーマがレスポンシブ対応になっているはずですが、できるだけレスポンシブ対応なページを目指して作成してみてください。
参考までに、いくつかテーマのデモページへのリンクを貼っておきます。
Unwind - Just another SiteOrigin Demo Sites site
https://themeisle.com/demo/?theme=Zillah
Sela – Not just a suit and tie business
スポンサーリンク
レベル３～実践サイトで模写修行～
ある程度シンプルなデザインが作れるようになったら、次は実際に商用で使われているサイトを模写していきましょう。
シンプルから、より複雑にお洒落なサイトが作れるレベルを目指します。
以下のサイトが程よいレベル感のサイトが集まっていて参考になります。
ここまでくると、模写で勉強するよりかは、副業やアルバイトでコーデイングの案件を取り、お金を稼ぎつつ勉強していってもいいと思います。
また、サイトではなくて書籍ですが、色別・雰囲気別でサイトを紹介されていて、好みのページを探しやすいので紹介します。
WEBデザインの本なので、デザインや色使いの勉強になります。
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
- 作者: 久保田涼子
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2017/06/16
- メディア: 単行本
- この商品を含むブログを見る
レベル４～もっとお洒落サイトで模写修行～
最後に、お洒落でjavascriptで様々な効果もついているサイトを作っていきましょう。
以下のサイトでは、縦長のお洒落なサイトが多数紹介されています。
やりごたえ満点なサイトばかりです。
特に京都美術工芸大学のサイトは、美術系の大学だけあって、かなりやりごたえのあるサイトです。
まとめ
基礎勉強を終えた後、次に何をすべきか参考になったでしょうか。
wixやjimdoなど、一切コーディングせずにwebページを作ることもできるようになりましたが、フリーランスの案件などを見るとまだまだコーディングの需要はあるようです。
プラスデザインもできると言うことないのですが、まずはデザインからコーディングする力を身に着けましょう。