2019年2月3日ツイートシェアB!はてブポケットWebコーディング上達の近道にサイト模写コーディングがあります。「公開されているWebサイトを見て、ソースコードを見ずに似たようにコーディングすること」と思っていただければと思います。コーディングできるようになりたい人にとってはメリットしかありません。実際に必要なスキルを肌で感じられるできない箇所が明白になるコーディングのパターンをストックできるこの記事では、模写コーディングするサイトの選び方を紹介します。模写コーディングする対象となるサイトの探す上で参照できる方法をまとめました。知っているサイトから選ぶこれまでいくつものサイトを見てきたと思います。その中には、「なんか好き」であったり「こんなサイト作りたい!」みたいなサイトもあったはずです。そのサイトを模写するといいかと思います。理由としては、モチベーションが高く取り組めること。模写コーディングが終わったときには、憧れの人とほぼ同じ見た目で同じ動きのサイトが手元に出来上ているわけです。そのサイトは1から自分がコーディングしたものです。この高揚感はみなさんにも味わってほしいと思います。わたしはSANGOのテーマの柔らかな雰囲気がとても好きでした。「SANGOのページは確実に模写コーディングしよう!」と決めていました。画像は模写したものではありません。このように、やっていて自分のモチベーションが上がるようなサイトを選ぶといいと思います。さるわか様のSANGOマニュアルのページを模写しております。2018年7月29日アーカイブサイトから選ぶインターネット上には、いい感じのサイトをまとめてくれているアーカイブサイトがあります。ここから探すとお金も労力もかからず済むのでいいかもしれません。キャプチャだけでまとめてあるアーカイブサイトもあります。実際にサイトにアクセスしないとJavaScriptなどの動きの部分が見えません。実際のソースも見ることができません。キャプチャからのコーディングは個人的には時間の無駄だと思うので、実際のサイトへアクセスできるアーカイブサイトを使ってください。以下のアーカイブサイトは実際のサイトにアクセスできます。iPhoneデザインボックスランディングページ集めました。Pinterestから探すほとんどのデザイナーが愛用しているサービスかと思います。Webに限らずあらゆるデザインのアーカイブがまとめられていますね。上記したアーカイブサイトのアーカイブのサイトっていう感じです。LP」などで調べるとめっちゃ出てきます。模写コーディングのサイトを探す上では使いづらい部分があって、それほどおすすめはできないかもしれません...。実際に使ってみようと検索してリンクを辿ってみると、キャプチャしかない!!!みたいなケースが多いです。実際のLPページに飛べるものもあるのですが、キャプチャの方が割合ととしては多い印象だったので、模写コーディング対象を探す効率としては悪いと思います...(デザイン案を探る上では最高のサイトです)Pinterestすごい...。関係ないけど、コーディング練習する対象選ぶのにも困らなさそう。書籍から選ぶわたしが模写コーディングしていた頃は、主に以下の本から選んでいました。LPに限らずいろんなパターンのサイトが並んでいて、単純に眺めていても楽しかったです。難易度は高めかと思います...ただ、テーマごとにWebサイトが分類されているので、興味のある分野やパターンを選びやすいという特徴があります。2017-06-16AmazonKindle楽天ブックスこんな感じで分類分けされているので、自分がコーディングで学びたい部分を決めてできたのがよかったです。こちらのサイト様を模写させていただきます。https://t.co/BVEUZLVOASおそらく2~3時間で終わるはず。本日はこのサイトを模写しておりましたー!https://t.co/BO7mLQaWcT全然終わらないもっと早く、、もっと早くなりたい。「探すのが面倒くさい。こんな記事を書いているんだから例を提示してくれ!」という方は、次のサイトをまずやってみるといいかもしれません。こちらはわたしの知っているサイトの中で、シンプルな構成で作られているサイトたちです。難易度としてはシンプルなLPレベルで、上から順番に簡単だと思います。自分で探すのが面倒なら以下から選んでもいいかと思います。http://pas-pol.jp/こちらのサイトは実際にわたしも模写コーディングさせていただきました。模写の目的は、以下の2点だと思います。デザインを見ただけでコーディングできるイメージを持てる実際にコーディングできるようになる具体的なやり方は以下でまとめていますので、実際に取り組む際は参考にしてみてください。Webサイトをコーディング模写するやり方と使用するツールコーディングは基本的には作業数に比例して上達するものです。反復練習が身になる世界なので、最初のうちは同じようなデザインでも何度もコーディングすると力が付きやすいと思います。リンク模写コーディングしながら学びたいスキルシンプルなLPを問題なくコーディングできるスキルを身につければ、コーダーとして仕事があります。LPを構成している要素が作れるようになるんだというイメージでサイトを選び、コーディングしていくといいでしょう。LPがどういう要素で構成されているかは、以下でまとめています。@haniwa008模写コーディングするサイトの選び方でした。実際に公開されているサイトは当然のことながら「誰かがコーディングした結果」生まれているサイトです。コーディングした人も当然お金をもらって仕事としてコーディングしているわけです。公開されているサイトが問題なくコーディングできるということは、仕事としても問題なく受けられるレベルにいるということです。世の中にはたくさんのサイトが存在します。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。【コピペOK】よく使われがちなマウスホバーのCSSパターン10選と作...前の記事WordPressで作る側(仕事する側)の知識を得るためおすすめ書籍を3...はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。