Webデザインを覚える為、初心者が模写するのに最適なサイトを教えてください

Question

現在、html/cssをprogateと模写で少し覚え、
javascriptをprogateと
「Javascript1年生」と言う書籍で勉強しましたが、javascriptが全然頭に入ってきません。
そこで、html/cssを覚える際、模写をして覚えるのがとても良いと思ったので、
javascriptもサイト模写をやりながら覚えようと思っています
初心者に最適なサイトがあれば教えていただけないでしょうか？
よろしくお願いいたします。
質問の意図
初学者がWebデザインに関連するjavascriptの身につけ方を知りたい。
解決したい課題
Webデザインに関連するjavascriptを身につけたい。

Comments

[crowmt]

「Javascript1年生」にサンプルソースのダウンロード先が書いてあるのでそれでいいと思うのですが、それではだめなのでしょうか？

[laten_shrimp]

Javascript1年生はひと通り勉強いたしました。
webデザインを覚えたいので、もう少しwebデザインにあったサイトを模写したいと思っております

Answer 1

javascriptが全然頭に入ってきません。

プログラム系のものは丸写しじゃー何をやっても頭に入らない！やりたい事があってそれを調べながら作って行くから頭に入るのだ！そしたらまずはjavascriptで出来る事を検索！そしてこれやりたい！と思ったものを実現する方法を調べながら作る！それが一番！
調べても何を作りたいのかが頭に浮かばないそこのあなた。最大公約数計算機とか最小公倍数計算機を調べながら作ってみましょう。

Comments

[m.ts10806]

>最大公約数計算機とか最小公倍数計算機を調べながら作ってみましょう。
Webデザイン・・・？

[kei344]

To: mts10806さん
「Webデザイン」がタイトルに追加される前の回答です。 https://teratail.com/questions/history-questions/201119

[m.ts10806]

なんと、失礼しました。

[hentaiman]

> kei344さん
あざっす

>mtsさん
編集後の質問は見ましたけど、デザインでも結局javascriptの基礎（ifとかtrue or false）は必要だし四則演算も使う事が多いと思うしinputやoutputでもデザインは関わると思ったので、この回答のままで問題無いと思ったので編集してません。
なのでwebデザインの為のjavascript習得に対して不適切な回答と思う場合は低評価して頂ければと思います

[hentaiman]

それと最初は回答で計算機って書こうと思ったけどUIのハードル高そうなので条件付きの計算機にした次第です

[m.ts10806]

hentaimanさん
いえいえ「プログラム系のものは丸写しじゃー何をやっても頭に入らない！やりたい事があってそれを調べながら作って行くから頭に入るのだ！」
にはWebデザインでも通じるものですし私も大いに感銘を受けてその方向で回答をしたためている途中なので、むしろ＋要件です（既にしてますが）

[laten_shrimp]

回答ありがとうございます。
そうです「丸写しじゃー何をやっても頭に入らない！」を正に実感してしまい行き詰まったので、
この質問をさせていただきました。
javascriptで出来る事で検索し、拝見させていただいたところ、ポップアップウィンドウやスライダーなど、
普段、目にする機能をいくつか作ってみようかという案が浮かんできました！
計算機については、調べてみましたが正直、どういったものなのか（html/cssで計算機のデザインを作るとか？）よくわかりませんでした。
しかしながら、大変参考になりました。
ありがとうございます。

[hentaiman]

> 計算機
計算機の場合だと、html+cssで計算機の見た目は作れますよね？ボタンとか計算結果を表示する部分とか。でもボタンがあるだけだと何も動作しない、１・２・３と押しても何も意味が無い。
そこにjavascriptを組み込むんですよ
「１」を押した時には１と表示、「１・２」と押した時には１２と表示する。ってこれだけだと簡単ですが、例えば足し算する時は１２＋３４の場合だと「１・２・＋３」を押した時点で３だけを表示する必要が出てきたりと、頭を使う必要が出てきます。
この辺を考えて実装出来る事が事がWEBデザインを作りUIに組み込むときに有効だと思います。

約数倍数を求めるものでなくとも普通の計算機作れるならそっちのがよほど勉強になりますね

[laten_shrimp]

なるほど、計算機は良いかもです！
html/cssも使うし、javascriptも使いますね。
道が見えてきたきます！
ありがとうございます！

Answer 2

Web サイトで確認できる JavaScript は、初学者向きでは無い非常に可読性の低いものになっているのが一般的です。

なので、コードを読み挙動を理解していきたいのであれば、codepen の Explore で紹介されているコードが学習向きだと思います。
「可動するコードを参考にする」といった観点で読みやすく書かれているし、何より単体で作られているケースが多いので、挙動の確認がしやすいです。

ただし、難易度はそれほど低くないので、個人的には基礎学習をもっと丁寧に行ったほうが良いとも思います。

基礎学習用の参考サイト：
JavaScript - MDN

Comments

[laten_shrimp]

回答ありがとうございます。
codepen 初めて知りました。
こちらで、紹介されているコードを貯めていき、
自分の作りたいサイトに組み込んでいくのが、良いかもしれませんね。

基礎学習をもっと丁寧に、ん〜そこをどうして良いのかが、わからないのです…。
しかし、
大変参考になりました。
ありがとうございます！

Answer 3

Webデザインを進めていくうえで必要なのは模写ではないと思います。
もちろん具体的な目標をどこに置くかにもよりますが、
模写（または写経）で身につくことって本当に少ないです。

確かにJavaScriptはHTML/CSSよりもプログラミング要素が強いもので、頭に入ってこないのは良く分かります。
私もWeb触り始めた頃は「なるべくコピペで済ませられるもの」「持ってきて使うだけ」でした。
だからこそ余計に「模写では身につかない」と思っています。

既にあるように、既存のサイトのCSS／JavaScriptのコードって見やすいものは少ないです。
大手企業のものは難読化(Minify)されているものも少なくないですし、
画一的なデザインのものはおおよそCMS化されていて模写には向きません（ブログとかもそうですね）

Webデザインは紙媒体ではないので無限に近い表現ができるようになりますが、
例えば「スマートフォンサイト」と「PCサイト」では載せられる情報量が違いますし、
レイアウトも変わってきますし、「開いたときの画面に何を見せるか」というのが非常に大事です。
縦幅におさまるようにきっちり見せたりとか、導線をきちんと張って閲覧者を逃さないようにするとか、
1秒でも多くページにとどまらせるような工夫が必要だったりします。
「より多くの人にきてもらうため」にはSEOの知識も必要でしょう。
参考：ヒートマップとは？ユーザー行動を分析できるツール比較9選

「模写」することにより単にページを組み上げる技術は多少身につくかもしれませんが、
それが「適切なWebデザインを提供するための知識や技術」はなかなか身に付きません。
あくまで「模写」は作る側の視点となるので、なるべく「見る側」の視点を養う必要があると思います。

例えば下記のような記事を読んで「どういうWebデザインが」「どのように素晴らしいのか」「どのような効果があるのか」「自分ならどうするか」というのを見ていっては如何でしょうか。

• 素晴らしいホームページデザイン１６の実例

※私も学生時代にWebデザイン関係の講座を受けていて「デザイン力をあげるにはより多くのデザインに触れること」と講師に教えられました

あと「自分ならどうするか」の視点の時に「これをどうやったら自分で再現できるか」というのを考えるのも良いかもしれません（結局模写に近いですが、「考える」ことが地力を育てます）

ついでにJavaScriptのことにも触れておきますが、アニメーションであればCSSでも色々なことができますしCSS3では表現の幅が大きく広がったので（有名な例：CSS3ドラえもん）、「必要な時に必要なだけ利用する」というスタンスもありだと思います。
私もWebデザイン観点というよりPHPなどのサーバーサイドのプログラミング言語に関連して使うことが多いですし、モーダルやポップアップ、スライダーなどはCSSフレームワークやプラグインが充実しているため、それだけを自分で組むことってあまりないです。

Comments

[laten_shrimp]

回答ありがとうございます。
「模写（または写経）で身につくことって本当に少ないです。」
なるほど、確かにhtml/cssを模写した時も、自身にはなりましたし、それなりに身についたと思いましたが、それは最低限の知識だったかもしれません。なぜならおっしゃる通りコピペで済ませることが多かったので。
「「より多くの人にきてもらうため」にはSEOの知識も必要でしょう。」
確かに、ちょっと今の僕では理解しづらい部分ではありますが、何というか避けては通れないですし、
身につけなければならないですね。
「素晴らしいホームページデザイン１６の実例」拝見させていただきました。
いつか、こんなページを作りたいと思わせてくれるだけではなく、しっかりとお手本のポイントが書いてあり
参考になりそうです。
しかし、どれも難しそうです。
それぞれの簡単なところを参考にするなんてことができれば良いですが、それさえも選べなそうです。
しかしながら、
「自分ならどうするか」の視点の時に「これをどうやったら自分で再現できるか」というのを考えるのも良いかもしれません」というのは、ヒントになりそうですし、「必要な時に必要なだけ利用する」というスタンスという意見は大変参考になりそうです。

ありがとうございます。
長文で書いていただき大変感動いたしました。

[m.ts10806]

最初は何をするにしても難しいものだと思います。
そこで「自分でも認識できるくらいに要点を細分化・部品化をする」というのを試してみると良いかと思います。それもまた「考える」ということにつながってきて自身の実になることと思います。

[laten_shrimp]

そうですね、ポップアップウィンドウなど、よく見かけるものを
まずは、それだけ作ってみて、そういったものを幾つか作っていくと
覚えられるんじゃないかと思いました。
そして、慣れてきたら自分で簡単なサイト例えば「個人的な好きなラーメン屋ランキング」とか
「旅行をした国の紹介サイト」（まぁなんでも良いですが)
とかを作ってみて、
そこに作ったポップアップウィンドウなどを組み込んでいくというやり方が良い気がしてきました。
ありがとうございます！

[m.ts10806]

はい。少しずつ作れる部品が増えてくればあとは如何に組み合わせていくか、パズルのようなものです。
少しずつステップアップしていきましょう

Answer 4

わたしはウェブで模写なんてしたことないので、それに意味があるのかどうかわかりません。
MDN などを読んだほうがいいのではないでしょうか？

Comments

[laten_shrimp]

回答ありがとうございます。
MDNは一通り読んだのですが、なかなかうまくいきませんでした。
読み方が悪いのかもしれせんね。
ありがとうございました。

Answer 5

サイトを模写しながら学ぶ方法は選択肢としてありですが
まずは基礎をしっかりと覚えることが重要だと思います。
私は先日までここで質問してましたが質問することを辞めてひたすら基礎学習に励んでます^^
他の方法だとゲームを作りながら覚えるという選択肢もあります。
YouTube動画で「javascript　ゲーム」で検索すると様々な解説動画が出てきます。

■参考書籍
・確かな力が身につくjavascript
・いちばん優しいjavascript

Comments

[m.ts10806]

Webデザインとゲーム作りでは目指す先が一致していません。
それにJavaScriptをメインでやっていきたいという内容ではないですよ。
質問ちゃんと読んであげてください。（くみ取れないなら学習中の方があまり積極的に回答できる質問ではないです）

[laten_shrimp]

回答ありがとうございます。
「まずは基礎をしっかりと覚えることが重要」というのは本当にその通りだと思います。
そう思い、progateや書籍で勉強してきましたが、丸写しになってしまい頭に入ってきませんでした。
そこで、模写をすれば覚えていくのではと考えこの質問に至りました。
しかしながら、教えていただいた参考書籍などは、模写をする際大変役に立ちそうですし、模写でわからないところがあれば、こちらを見ながら進めていくのが良いかもしれませんね。
javascript　ゲームもいつかチャレンジしてみたいです。

大変、参考になりました。
ありがとうございます。