【脱初心者】効率のいいサイト模写【はじめてのアウトプット】

Hello World!!
杉山です。

今日の記事では、脱初心者の第一関門である、サイト模写について書いていきたいと思います。

はじめは、どんな人でもHTMLで「Hello World」を書くところから始まり、そしてそれにCSSを用いて、色を変えたり、文字の大きさを変えたり、幅を持たせたりすることを学びます。

最初のインプットが終われば、それを自分の実力として保持していくためにアウトプットが必要になります。

学んだことをアウトプットすることはすごく大事で、インプットだけでは、きっと少し時間が立てば忘れてしまいます。

実際に、手を動かし。
画面上に自分の作った作品をみることに学習した内容が頭に入ります。

その、一番初めのアウトプットとして誰もが通るのがこのサイト模写になります。

しかし、このサイト模写ですが。
サイト模写を薦めている人によって提唱しているやり方が違います。

例えば、デベロッパーツールをみてもいいよという人もいれば。

デベロッパーツールは極力見ないほうがいいと言う人もいます。

初心者の人からすると、一体なにが正しくて、なにが正しくないのか判断ができかねると思いますので。

私が、自分の中で決めた模写のルールをシェアします。
決してそれが正しいわけではないですが、少なくとも私はこのルールのもと、だいたいどんなサイトでも模写できるスキルは身に着けることができましたので、あながち間違ってはいないと思います。

私自身も、早く勉強を進めたかったので一つのセクションを繰り返し何度もするのは嫌だったので効率のいいアウトプット法を考えた結果たどりついたルールになりますので、模写のルール化に悩まれていれば、是非参考にしてください。

私が模写のルールとかした項目は以下の3点

杉山流サイト模写ルール

  • デベロッパーツールは、徹底的して見ない
  • フォント、色、画像などは便利ツールを使用
  • だいたいあってたらOK!

では、ひとつずつ深堀していきます。

デベロッパーツールは、徹底してみない


これは、人によっては見たほうがいいよと言われるかもしれませんが、私は徹底的に見ませんでした。

※デベロッパーツールが分からない人のためにこちら参照ください。

確かに、見たほうがサイトの全体像は知ることができる為、学習にはいいという側面も確かにあると思います。

しかし、我々が目指しているところは模写の達人ではないはずです。
クライアントから頼まれた、仕事を臨機応変に効率的にこなすスキル。
これが求められると思います。

また、クライアントのイメージを実際にコーディングする場合や。
一からサイト制作などもしていかなければなりません。

サイトの模写のための練習であればデベロッパーツールを使うことはいいでしょうが、あくまでもサイト模写ではお金を稼ぐことはできませんよね。

だから、練習のための練習ではなく。
実践のための練習が大事だと思ったため、デベロッパーツールは徹底してみませんでした。

クライアントから渡されるものには、きっとデベロッパーツールはありませんので。

そして、デベロッパーツールを使わないもうひとつの利点として、「検索する力」がつくということも大きな要素だと思います。

例えば、初めて模写をする際に…
いろいろな疑問が発生します。

ヘッダー画像が、真ん中にこないとか。
要素を真ん中に寄せるのはどうすればいいのか。
同じ、段に2つの要素を均等に配置するにはどうすればいいのか。

これらの疑問は実際に、私が初めて模写をしたときに浮かんだ疑問です。
きっと、デベロッパーツールを開けば、すぐに分かったと思いますが徹底してみないことを決めていましたので見ませんでした。

じゃあ、その疑問を解決する方法は2つしか残されていません。

人に聞くか、自分で調べるかです。

しかし、私の過去の経験から簡単に導けた答えは脳に定着しないという持論がありましたので、よっぽどのことがない限り人に頼ることはよくないと思っていました。

なので、残された選択は自分で調べるという一択です。

Googleで検索するのですが、自分の思っている疑問になかなかたどりつけません。それは検索する、ワードのチョイスが下手だったからです。

でも、そうやって疑問がでるたびに検索をしていくと、だんだんと検索の力も高まってきます。
検索の力が高まると、疑問はすぐにGoogle先生により解決されます。

この、一見遠回りに見えるこのひと手間が、長い目で見れば大きな差となる気がします。

案件を受注していくフェーズになれば、クライアントの要望に自分の知識では実装のできない項目が出てきて来た時、この検索する力は非常に有利には働く、そんな気がします。

フォント、色、画像などは便利ツールを使用


デベロッパーツールを見ないからと言って、色やフォント、画像までも自分で検索して探すのかというとそうではありません。

実は、便利なことにGooglechromeには、こういったものを調べることができるツールが用意されています。

なので、模写したいサイトで使用されている画像やフォント、色や、margin paddingで記載する幅に至るまで必要な情報はそのツールを使えば取得できてしまうのです。

そのツールをシェアします。

以前、こういうツイートしました。


ここに、すべての調べるツールが入っています。

そうすれば、デベロッパーツールを見ずとも必要な情報を取得して模写を始めることができます。

だいたいあってたらOK!


実際に模写をしていたら、寸分の狂いは絶対にでてきます。
上記のツールでちゃんと測って、そのpxを入力してもなぜか、ずれているということはよくあります。

でも、そこはあまり気にしなくてOKです。

目標はきっと、模写の達人を目指しているわけではないと思いますので、寸分変わらず作ることにこだわりすぎないほうがいいです。

模写によって養うべく能力は、自分の脳で思い描いているレイアウトに要素を配置できるかというところでしょう。

だから、模写元のサイトと多少ずれていようが、containerの幅が違うことなど気にしなくていいのです。

日本人は完璧主義が多いので、気持ちはすごくわかります。
私も不安になって、模写を始めたころ、ボソッとつぶやいたことがあります。


そんなこと気にしなくていいんだよ、だいたいでOKなんだよって、今となればこの時の自分に言ってあげたいですね笑

だから、もし自分と同じように悩んでいる人がいれば、だいたいでOKと自信をもって大丈夫です。

サイトの完璧コピーを仕事にして生きていきたいのなら別ですが、たいていの人は受注をやっていきたいと思う人だと思うので。そこに寸分の狂いのないようになど必要ないので安心してくださいね。

まとめ


効率のいいサイト模写の方法を3つご紹介しました。
知らず知らずのうちにきちんとできている人もいるでしょうし、なにか指標があったほうが進めやすいといった人のためにはいい指標になったかな?

そうなってくれれば幸いです。
サイト模写は、始めたての時はちんぷんかんぷんだと思いますが、できてくると楽しく感じてくる瞬間もあると思います。

でも、模写も楽しくなってしまうと模写ばっかりしてしまいがちですが。
模写もある程度のレベルまでくれば、先に進んだほうがいいと思います。

模写ができるレベルって、仕事でいうとコーディングを受注できるレベルに過ぎないので、コーディングだけでは、なかなか食べていけないと思います。

だから、更にその先に進むことで単価がいい案件を受注できるようになると思うので、楽しいからといって、模写をやりすぎないように気をつけましょう。

今日も長くなりましたが、最後まで読んでいただきありがとうございます。