【模写サイト探し】webデザインの見本帳をオススメしたい【初学者でもいける】

プログラミング

こんにちは、のくと申します。

 

Progateやdotinstallである程度の基礎を学習したけど、その次何をするべきかわからない

そんな方にオススメしたいのが、私も現在進行形で取り組んでいるサイトの模写です。

 

模写とは何か既存のサイトを見ながら、自分でそれをそのまま再現する作業のことを言います。

模写をすることで、自分がインプットしたプログラミングの知識をアウトプットし自分に蓄えたり、実際にどのようにコードが使われているのかを知ることができます。

 

そんな時に現れるもう1つの問題が、「どのサイトを模写すると良いのか」ということです。

 

模写をするべきサイトは、自分で全体の7割ほど書くべきコードの想像がつくものが良いとされています。残りの3割は自分の伸びしろということです。

 

そこで今回は、そんな模写に最適なサイトをどのように見つけたらいいのかについて、オススメのツールを紹介したいと思います。

 

結論を先に言うと、Webデザインの見本帳というサイトにある物の中から選ぶと良いでしょう。

 

理由は、

  • 豊富なページ数
  • シンプルなものから凝ったものまで様々な難易度のページが掲載されている

からです。

 

では1つずつ見ていきます。

 

豊富なページ数

このサイトでは、2011年のサイトを立ち上げてから今もなお、様々な見本になるページを集めています。

それゆえ、選ぶのに迷うほどの量があります

 

また、サイトの見た目などによって検索がかけられるため、自分がやってみたいデザインを優先して探すことのできる楽しさもあります。

画像の左側を見ると、キーワードで検索できるだけでなく、印象やメインの色、そのサイトが取り扱うジャンルなど様々なフィルターがあることがわかります。

単純に見て回るだけでも楽しい

ページ数が豊富で、このサイトに集まるページはどれもこれも面白いです。

 

そういった意味では、模写のことを考えずただギャラリーを歩くようにこのサイトをフラフラするだけでも学びはあると思いますし、何より楽しいです

 

初めて知る動きや、要素の配置、写真や動画の使い方など私のような初学者にはすぐに頭がパンクしてしまいそうなほどに情報量が多いと感じます。

 

真似したくなるサイトが多く、モチベーションが高く保つ

見て回って楽しんだ後は、やはり自分の手で再現したくなるものです。

 

あれもこれもやろうとすると、だんだん今模写に取り掛かっているサイトを切り上げて、次のサイトをやってみようと思います。

 

その気持ちが、今取り組んでいる模写のモチベーションを高くし、それまでよりも能動的に作業できるようになります。

 

事実私は、最近かなりモチベーションが高いです。

音楽も作りたいと思いながら、時間的な比重が少しずつプログラミングに傾いているのを感じます。

 

シンプルなものから凝ったものまで様々な難易度のページが記載されている

ページの種類が多いだけでなく、ページの難易度も大きく幅があるように感じます。

 

つまり、HTML/CSSやjQueryだけでもなんとか作れそうなサイトも少なくありません。

 

もちろん、今の自分には意味不明な動き方をするページが多いことはもちろんなのですが、その中にも自分で7割くらいの想像がつくものはあります。

 

例えば、このサイトから私が選んだサイトは、EDIFICEのホームページです。

確かにヘッダーの動きは少し頭を使いそうで難しく感じるのですが、それ以外はBootstrapを用いればあまり悩むことなく作れそうだと思いました。

 

このように、シンプルなデザインながら、自分でも模写できそうなサイトがあることは確かです。

 

そして、簡単なものばかりでなくやはり難しい(または難しく見える)サイトが多いことも確かです。

 

複雑な動き、ホバーやクリックによって変わるアニメーションなど、サイトを訪れた人が楽しめる仕組みや伝えたい情報をより印象的にするデザインなど、難しいけれどそれによってサイトがより良くなると感じるものはとても多いです。

 

そうしたサイトを自分の手で作れるように学べるサイトも数多くあるので、いずれはそういったものにも手を出していきたいと思わせます。

 

プログラミングは自分で書いて身につけるもの

Progateでのインプット学習だけではやはり身につきません。

もちろんそうしたインプットがないと始まらないのですが、その先にアウトプットをする場所がないとせっかく学んだものが自分のものになる前に忘れてしまいます。

 

その点で、模写はとても効果が見込めるものです。

私は今回とても良い参考サイトのWebデザインの見本帳を見つけたので、今までよりも一層プログラミングに時間をかけたいと思います。

 

今回の記事があなたの参考になれば幸いです。

では今日はこの辺りで終わります。

最後までお読みいただきありがとうございました。

コメント