Webコーディング上達の近道にサイト模写コーディングがあります。「模写コーディング」という言葉自体はもしかしたら造語なのかもしれませんが、
模写コーディングとは、
「公開されているWebサイトを見て、ソースコードを見ずに似たようにコーディングすること」
と思っていただければと思います。
コーディングできるようになりたい人にとってはメリットしかありません。
- 実際に必要なスキルを肌で感じられる
- できない箇所が明白になる
- コーディングのパターンをストックできる
この記事では、模写コーディングするサイトの選び方を紹介します。どうやってサイトを選べばいいか分からない方は参考にしてみてください！
はにわまん実践力が身につく模写コーディングはめっちゃおすすめです！
模写する対象のサイトの探し方
模写コーディングする対象となるサイトの探す上で参照できる方法をまとめました。
知っているサイトから選ぶ
これまでいくつものサイトを見てきたと思います。その中には、「なんか好き」であったり「こんなサイト作りたい！」みたいなサイトもあったはずです。まずは、そのサイトを模写するといいかと思います。
理由としては、モチベーションが高く取り組めること。模写コーディングが終わったときには、憧れの人とほぼ同じ見た目で同じ動きのサイトが手元に出来上ているわけです。しかもそのサイトは1から自分がコーディングしたものです。この高揚感はみなさんにも味わってほしいと思います。
わたしはSANGOのテーマの柔らかな雰囲気がとても好きでした。なので「SANGOのページは確実に模写コーディングしよう！」と決めていました。
→ https://saruwakakun.design/
※ 画像は模写したものではありません。
このように、やっていて自分のモチベーションが上がるようなサイトを選ぶといいと思います。
アーカイブサイトから選ぶ
インターネット上には、いい感じのサイトをまとめてくれているアーカイブサイトがあります。ここから探すとお金も労力もかからず済むのでいいかもしれません。
ただ、キャプチャだけでまとめてあるアーカイブサイトもあります。実際にサイトにアクセスしないとJavaScriptなどの動きの部分が見えません。また実際のソースも見ることができません。
キャプチャからのコーディングは個人的には時間の無駄だと思うので、実際のサイトへアクセスできるアーカイブサイトを使ってください。
以下のアーカイブサイトは実際のサイトにアクセスできます。覗いてみて、良さそうなサイトがあれば模写コーディング候補に入れてやってみましょう！
- 縦長のwebデザインギャラリー・サイトリンク集
- I/O 3000 | Webデザインギャラリー
- イケサイ ウェブデザイナーのWEBデザインデータベース
- WEBデザインの見本帳｜WEBデザイナーのためのデータベース・リンク集、サンプル・配色・参考・ご提案に!!
- スマートフォンサイトのデザインリンク集 sps collection
- 優れたスマートフォンサイトデザイン集 – iPhoneデザインボックス
- ランディングページ集めました。
Pinterestから探す
ほとんどのデザイナーが愛用しているサービスかと思います。Webに限らずあらゆるデザインのアーカイブがまとめられていますね。上記したアーカイブサイトのアーカイブのサイトっていう感じです。
→ Pinterest
検索キーワードで「LP」もしくはジャンルを絞って「旅行 LP」などで調べるとめっちゃ出てきます。
ただし、模写コーディングのサイトを探す上では使いづらい部分があって、それほどおすすめはできないかもしれません…。実際に使ってみようと検索してリンクを辿ってみると、
キャプチャしかない！！！
みたいなケースが多いです。もちろん実際のLPページに飛べるものもあるのですが、キャプチャの方が割合ととしては多い印象だったので、模写コーディング対象を探す効率としては悪いと思います…
（デザイン案を探る上では最高のサイトです）
書籍から選ぶ
わたしが模写コーディングしていた頃は、主に以下の本から選んでいました。LPに限らずいろんなパターンのサイトが並んでいて、単純に眺めていても楽しかったです。
ちょっと難易度は高めかと思います…
ただ、テーマごとにWebサイトが分類されているので、興味のある分野やパターンを選びやすいという特徴があります。
こんな感じで分類分けされているので、自分がコーディングで学びたい部分を決めてできたのがよかったです。
探すのが面倒くさい場合
「探すのが面倒くさい。こんな記事を書いているんだから例を提示してくれ！」という方は、次のサイトをまずやってみるといいかもしれません。
こちらはわたしの知っているサイトの中で、シンプルな構成で作られているサイトたちです。難易度としてはシンプルなLPレベルで、上から順番に簡単だと思います。自分で探すのが面倒なら以下から選んでもいいかと思います。
→ https://isara.life/
→ http://pas-pol.jp/
こちらのサイトは実際にわたしも模写コーディングさせていただきました。
模写コーディングの方法
模写の目的は、以下の2点だと思います。
- デザインを見ただけでコーディングできるイメージを持てる
- 実際にコーディングできるようになる
具体的なやり方は以下でまとめていますので、実際に取り組む際は参考にしてみてください。
https://haniwaman.com/replication-coding/
コーディングは基本的には作業数に比例して上達するものです。反復練習が身になる世界なので、最初のうちは同じようなデザインでも何度もコーディングすると力が付きやすいと思います。
模写コーディングしながら学びたいスキル
シンプルなLPを問題なくコーディングできるスキルを身につければ、コーダーとして仕事があります。なので、LPを構成している要素が作れるようになるんだというイメージでサイトを選び、コーディングしていくといいでしょう。
LPがどういう要素で構成されているかは、以下でまとめています。
https://haniwaman.com/lp-coding/
自分の足りないと思うスキルがあれば、積極的にコーディングしていきましょう！
例）スライダーが苦手 → スライダーが含まれるサイトを模写コーディングする
おわり
模写コーディングするサイトの選び方でした。
実際に公開されているサイトは当然のことながら「誰かがコーディングした結果」生まれているサイトです。コーディングした人も当然お金をもらって仕事としてコーディングしているわけです。
つまり、公開されているサイトが問題なくコーディングできるということは、仕事としても問題なく受けられるレベルにいるということです。
世の中にはたくさんのサイトが存在します。
今回の選び方を参考に、いろんなサイトを模写コーディングして実践力をつけていきましょう！
