模写コーディングのおすすめを3つ教えて下さい

Question

超初心者向けの模写コーディングページorサイトを3つ教えて下さい！

現在プログラミング学習を始めてから約2週間ほどのものです。現在は2つ目の模写コーディングをWriteというページで行っています。

【現在の目標】模写コーディングを10個

質問の修正
みなさん、こちらにコメントしていただいた方々ありがとうございます。

【目標模写10個の理由ついて】
とりあえずの目標を模写10個としたことに関する、整合性のある理由は正直言ってありません。ただの数的な目標です。

ただ、何かProgateのコースの後のステップアップとして、そこで学んだことを定着させること、そしてまだ触れたことのないコーディングに少しずつ触れられたらと思い質問しました。

【超初心者とした理由】
超初心者ということについても、プロフィールには記入したのですが、私自身まだプログラミングの勉強を始めたのが今年の8/22からで、まだ数週間足らずなので、そのように致しました。

【模写サイトを勧めて頂きたい理由】
まだまだSEO意識したセマンティックなコーディングというものは聞いたこともなくこれは後なのかなと思います。
とりあえずまず今のところの目標は
・jQueryを用いたアニメーションのあるページを作りたい。
・HTML/CSSの基礎知識を定着させ、かつ引き出しを増やしたい。
・
と考えてはいますが、まだまだ目的のなぜなぜが深く出来てないような気がします。

まだ回答者側として、曖昧な点があれば、指摘してくれればと思います。

よろしくお願いします！

Comments

[maisumakun]

> 現在の目標はとりあえず模写コーディングを10個こなすことです。

どのような狙いを持ってその目標を立てたのでしょうか？

[miyabi_pudding]

自身で決めた方がいいかと・・・。
（そっちの方がモチベーションにもなるし、自身が意図した練習ともなる）

[miyabi_pudding]

どのような目標での3つを勧めてほしいのでしょうか？
Webデザインの実装力をつけたい、
アニメーションをできるようになりたい、
Ajaxなど、非同期通信技術をつけたい、
SEOをしっかりしたコーディングをできるようになりたい、

など、目的をはっきりしていただかないと、お勧めもしようないです。
（でないと私の回答みたいに趣味も混じったものを勧めるしかない）

[takashi_ono]

みなさん、こちらにコメントしていただいた方々ありがとうございます。

【目標模写10個の理由ついて】
とりあえずの目標を模写10個としたことに関する、整合性のある理由は正直言ってありません。ただの数的な目標です。

ただ、何かProgateのコースの後のステップアップとして、そこで学んだことを定着させること、そしてまだ触れたことのないコーディングに少しずつ触れられたらと思い質問しました。

【超初心者とした理由】
超初心者ということについても、プロフィールには記入したのですが、私自身まだプログラミングの勉強を始めたのが今年の8/22からで、まだ数週間足らずなので、そのように致しました。

【模写サイトを勧めて頂きたい理由】
まだまだSEO意識したセマンティックなコーディングというものは聞いたこともなくこれは後なのかなと思います。
とりあえずまず今のところの目標は
・jQueryを用いたアニメーションのあるページを作りたい。
・HTML/CSSの基礎知識を定着させ、かつ引き出しを増やしたい。
・

と考えてはいますが、まだまだ目的のなぜなぜが深く出来てないような気がします。

まだ回答者側として、曖昧な点があれば、指摘してくれればと思います。

よろしくお願いします。

[m.ts10806]

質問編集されたようですが、私の回答に変更はありません。
まぁ「なぜなぜ分析」をご存知のようなので、それに加えて「ABC分析」もしておけばやるべきことは自ずと見えてくるのではないでしょうか。

Answer 1

そもそもですが、超初心者に模写コーディングはおすすめできません。

本来の模写とは、単にそれっぽいものを作るのではなく、
模写先のサイトの意図や役割、伝えたいこと、ユーザーに対する配慮まで全て汲んで対応する必要があるものです。
そこまで考えて作れますか？

超初心者であればHTMLもCSSもまだきちんと役割を理解して組めてはいないものと思います。

「模写」というのでそれなりの制限を設けてやっている人も多いかと思います。
「模写先のコードは見ない」とか。
全く見ないのであれば、地力は変わらないまま「それっぽいもの」を作り続けているだけになるので
おそらくスキルアップには繋がらないでしょう。

なぜこのように回答したかというと

現在の目標はとりあえず模写コーディングを10個こなすことです。

これが引っかかったからです。
目的が模写することなら「やめたほうがいい」です。
技術力の向上を目指しているのであれば、単に数をこなすよりも1つ1つの質を大事にした方が良いように思います。

その中で、サイトの存在意義や役割を考え、それらに1つ1つの機能やHTMLのタグの意味まで考えながら組んでいるのであれば、続けてください。

いずれにしても、何を目指しているのか分からない状態で例示するのは難しいです。
何でもいいのなら、それこそ自分で選ぶべきと思います。
超初心者であれば尚更、公開されているWebサイトはご自身よりもスキルも経験もある人が作ったものなのですから。

Answer 2

現在の目標はとりあえず模写コーディングを10個こなすことです。

そもそも、自分は模写コーディングに対してあまり肯定的な気持ちを持っていません。もちろん、デザイン案からcodingできるようになるスキルは必要です。しかし、模写コーディングをする人の中には、デザイン通りに作成できてそれで満足してしまう人が多くいると感じています。たとえば、作成した端末だと上手に表示されるが、画面サイズが変わると途端にデザインが崩れる等の強引なコーディングをしている等。や、Chromeだけはうまく動作し、SafariやFireFoxで思いっきり崩れる等。

質問者さんの場合は数に執着しているように見受けられました。
本来の目的は、デザイン案からコーディングできるようになることだと思います。（または、その他の向上心からによる理由）
その為には数に執着することがなく、ただひたすら模写コーディングをすることをお勧めします。世の中にはこんなサイトがあります。頑張ってください。

Comments

[kyoya0819]

ちなみに模写コーディングの推しの方法は

1, とりあえず作ってみる。
2, 自分のコードについて反省
3, 参考サイトのコードを解析
4, 自分のコードについて反省
(5, 誰かにコードを見てもらう)

です。

[TsukubaDepot]

「デザイン通りに作成できてそれで満足してしまう人が多くいる」
これをハッキリ指摘していることに高評価です。
携帯アプリでも同じような作業、というか勘違いをしている人が多いように感じます。
見た目だけに捉われてしまい、本質的な機能や実装について及んでいない人が多く感じています（私も人のことは言えませんが）。

[takashi_ono]

コメントありがとうございます。

本質的な機能や実装を学ぶためには、何をどう学べば良いでしょうか？そして、Progateのプログラミング学習を始めてまだ2週間の私が、現段階のレベルで学ぶ部分はどの辺りでしょうか？

本当に始めたばかりで、わからないこと、かつ、わからないことがわからないことが多すぎて、頭に浮かんだことを質問しています。

[TsukubaDepot]

m.ts10806さんのご回答には
「模写先のサイトの意図や役割、伝えたいこと、ユーザーに対する配慮まで全て汲んで対応する必要があるものです。」
「その中で、サイトの存在意義や役割を考え、それらに1つ1つの機能やHTMLのタグの意味まで考えながら組んで」
とありますし、
kyoya0819さんのご回答であれば、
「デザイン案からcodingできるようになるスキルは必要」
Lhankor_Mhyさんのご回答であれば、
「デザインカンプからページを作る」
ということが「本質的な機能や実装を学ぶため」に必要となる作業かと思いますが、いかがでしょうか。
m.ts10806さんは「それらに1つ1つの機能やHTMLのタグの意味まで考えながら」と明確に書いていますから、ここのタグの役割や、それらを合わせて使ったときの機能が理解できるような勉強方法を取りなさい、とも読めるかと思います。

じゃあ実際にどのような教材があるのかは、私は分野違いなので把握していませんが、もし私が同じことをやろうとするならば、まずは論理的な構造ということで地道ながらも文法を勉強するでしょうし、応用に取り組むのであれば、「なぜこのような構造にするのか」という点まできちんと説明してある教材を選ぶと思います。

仮に見た目は同じになったとしても、論理的なタグ構造を無視したサイトであれば意味がないでしょうし（たぶん）、仮に全てのタグや表示結果が同じになったとしても、単に模写しただけであればそれは偶然の一致にすぎず、ご自身の能力ではない、ということかとおもいまます。
（上のコメントがkyoya0819さんへのコメントであれば横取りしてごめんなさい。コメントが私宛に書いているようにも読めたので）。

Answer 3

追記に対して回答

・jQueryを用いたアニメーションのあるページを作りたい。

ここに関して。
現代では、CSSのみで、かなり複雑なアニメーションをさせることができるため、
オブジェクトを変形させる、動かす、ならば、jQueryでわざわざやることはないと思います。
JavaScript（jQuery）を使ってまでやるアニメーションとなると、
SVGのパスを複雑に動かす、canvasを使って、インタラクティブまで手を伸ばす、
の方が今後のためになると思います。
ただ、となると、現在の質問者さんのレベルでは、
手をつけるのは早いな、とお見受けします。

・HTML/CSSの基礎知識を定着させ、かつ引き出しを増やしたい。

まず、上記通り、アニメーションさせるなら、CSSでまずはやれるようにした方が、
今後の力に、ためになります。

定着させる、引き出しを増やす、であれば、正直、お勧めも何も、
好きなサイトを好きなだけやればいいと思います。
これ好きだな、かっこいいな、ってご自分で感じるサイトの方が、
モチベーションになると思います。
それで力になるのか？と思うかもしれないですが、
大丈夫です。
今が駆け出しならば、全て経験になると思います。
ただ、Lhankor_Mhyさんが上げてくださった様に、
逆に、これはやらない方がいいってサイトもあるっちゃあるかと思います。
（私はそれも含めて、失敗も含めて経験になる、と個人的には思ってます）
それを知る機会になったのであれば、この質問は成功なのではないかな、と思います。

というわけで、、、
元回答のものは、一番上のやつなら、
一歩ステップアップとして、模写コーディングをする上では、
質問者さんの目的に適合するものになるかと思います。

ただし、ハードルは高めです。正直なところ

-------- 以下元回答 --------

DIVE TO ZONe

• 単純にかっこいい
• 最近流行のパララックス要素、背景の動画再生、ボタンホバー時の変化など、基本かつ、ニッチな技術があり、かなり参考&練習になる
• Reactを使っているので、フロントエンドフレームワークに触れることもできる
• セマンティクスコーディングはまったくされていないので、模写した上で、セマンティクス要素に置き換えると、

SEO力の習得にもなりそう

P.I.C.S.

• 全画面系レスポンシブの練習になる。
• GSAPというフレームワークを使用している

Buddience | Buddience

• よくわからんがすごい
• 少し古いがGIFアニメーションをうまく使いこなしている。
• 上記合わせて、CSSのアニメーションもうまく併せている。
• 三つのフレームワークを組み合わせている。
• 模写する気が失せる = 練習になる

え、難易度が高いですか？
それは、個人的なお勧めなのでご了承ください・・・。

Comments

[m.ts10806]

やはり、大目的が分からない段階では下手にすすめられませんね。
「超初心者」って曖昧過ぎて技術レベルが分かりませんし。

[miyabi_pudding]

そうですね・・・。
ちょっと早とちりました。
質問者さんにどんなものがいいか修正依頼投げて、
それをもって回答編集しようと思います。

[kyoya0819]

> DIVE TO ZONe

おぉぉぉ、、、
（個人的観測範囲では）動画をファーストビューに使うサイトだと、動画とサイトデザインがあってないことが多いのですが、これは完璧に一致していてすごいです。。

[miyabi_pudding]

kyoya0819さん >
それメチャカッコいいですよね。
個人的には、模写してみたいと思ってしまうサイトです。

[m.ts10806]

ただ、大抵の初心者段階での「模写」ってサイトの解析一切せずに表示だけ真似るので、React使ってるとかフレームワーク使ってるとか関係なさそうに思います。
サイトの解析までしたほうが勉強になることは多いんですけどねぇ・・
「こんなフレームワークがあるのか」「このフレームワークにはこんな使い方があるのか」発見が沢山あるはずなのですが、目的が模写になってるのであんまり勉強にならない。

[miyabi_pudding]

> 目的が模写になってるのであんまり勉強にならない。

確かに、そんな感じがありそうです。
そう考えると私が挙げたサイトは、コードコピペではまず上手く行かないし、見た目から、構造などを自分で考えないとできないので、
模写するならいい練習にはなりそうです。
フレームワーク部分はCLI使ってたら特に、元ソースがわからないので、検証して構造だけ参考にで止め、
見た目を自分なりに組むがベストかも。

ただ、初心者向け、となると難しいのは否めません。
質問者さんの返答待ちます。

Answer 4

Zen Garden はどうでしょうか。

CSS Zen Garden: The Beauty of CSS Design

このサイトで紹介されているページは、全て同じHTMLで書かれており、JavaScriptが使われておらず、表示の違いはすべてCSS（と画像）によるものです。
そして恐ろしいことに、IE9+ 対応が原則です。

http://www.csszengarden.com/219/
http://www.csszengarden.com/221/
http://www.csszengarden.com/218/

実に抑制的で、まさに「禅」って感じですよね。
修行にはもってこいだと思いませんか？

---

まあ、ネタはこれくらいにして、質問の範囲から逸れますが、teratailの質問でよく模写されているサイトで、個人的に「このサイトはやめとけ」という二つを挙げておきます。

Airbnbでお家、アパート、お部屋をシェアしよう

ソースコード見ただけで死ねる。
HTMLの入れ子がすごい上に、class名が自動生成されていてわかりにくい。
人の目でコードを読んで人の手で模写するのには、向いていないです。

Dental Clinic

今さらフロートレイアウト？
10年前ならともかく、2020年にこれを模写する必要があるのかな……？
JavaScriptエラー出てるし……

---

個人的には、どこかのサイトを模写するよりも、「デザインカンプからページを作る」方が勉強になると思いますよ。
「模写　カンプ　教材」でググってみてはいかがですか？

Comments

[miyabi_pudding]

これは、渋いですね・・・。
コーディングという名の瞑想したくなった時、私もやってみます。

[Lhankor_Mhy]

CSS2のころからあったサイトなんですよね。

[kyoya0819]

「元完全な技」。。。。

[Lhankor_Mhy]

日本語版、いつの間になくなったんでしょう？

[m.ts10806]

そういやairbnb模写ってteratailでよく見ますネ。

[airbnb] の検索結果： 314件
https://teratail.com/search?q=airbnb

[Lhankor_Mhy]

そうなんですよね。
どこのスクールがやらせているのかわからないですが、教材として適切なようには思えないんです。

見た目しか問わないよ、細かいところは違ってもルック＆フィールが変わらなければいいよ、というお題であれば、まあ分かりますけど。

Answer 5

阿部 寛のホームページなんてどうでしょうか。

Comments

[m.ts10806]

Shift_JISで非推奨機能そのまま5年も前のホームページビルダーを利用しているサイトが、これから学んでいく初心者にすすめられる理由を教えてほしいものですね。

[kyoya0819]

当該サイトから学べることはなくはないと思いますが、模写の時点ではまだ学べるものはないと思います。

Answer 6

codepenで面白そうなものを模写すればいいでしょう