今回はFlower様(https://flowr.is/)のサイトを模写させていただきました。
私の模写が確認できるURL→(http://igarashi-web.com/mosya1/flower-mosya.html)
BASIC認証を掛けています。
ID・Passwordともに[mosya]です。
| 作業時間 | |
| 全体構成 | 4.5時間 |
|---|---|
| レスポンシブ対応 | 3.5時間 |
| アニメーション | 0.5時間 |
| 制作環境 | |
| OS | Windows10 |
|---|---|
| エディター | Atom |
| 使用した言語 | HTML/Sass/JavaScript
※アニメーションはWow.jsとanimate.cssを使用しました。 |
ここから先はプログラミング学習中の皆さんに向けて
「Flowerさんの模写コーディングを経験して私が得たこと」を書きます。
この記事を読み終わるころには、
きっとあなたもflowerさんの模写に挑戦したくなっていることでしょう(笑)
Flower模写をするメリットってなに？
なんといっても達成感が得られやすいこと！
この模写にはその理由が３つあります。
①難易度が低い
私は今までisaraさんやAirbnbさんという、いわゆる有名どころの模写に挑戦してきました。それに比べてFlowerさんのサイトは圧倒的に簡単。
- ヘッダーにメニューや検索バーがない
- コンタクト部分にformがない
- QandAなどで使われるアコーディオンがない
などなど。
プログラミング学習初心者さんが難しく感じる部分がほとんどありません。
「難易度が低い模写なんて挑戦して意味あるの？」
と思われる方もいらっしゃるかもしれませんが、私は声を大にして言います。
「意味がある！」と。
プログラミング学習初心者さんにとって何よりも必要なことは「達成感」です。「やり切った」と感じることです。
1つのサイト模写をきちんと終わらせる、これがとっても大事だと思います。
難しい模写に挑戦して未完成……よりも
こちらの模写に挑戦してしっかり完成させて達成感を得る！
これが挫折防止になると、私は思っています。
②短時間の作業で完成させられる
難易度が低いことに加え、こちらのサイトはサイト自体の長さが短いです。そのうえ、１つ１つのブロックが大きい。
そのためサクサク進んでいるように感じやすいです。
やっぱり、すぐに達成感を得たいのは私だけじゃないはず(笑)
高い高い壁を長い時間をかけて乗り越えたいときもあるけど、
ちょっと頑張れば手の届きそうな壁をひょいっと乗り越えたいときもありますよね。
私個人の体感としては、
heightがあるほど、作業が進んだと思えやすいです。
（めっちゃ時間をかけて少しの高さの検索バーとか作ってもあまり達成感がないです）
大きめのブロックを9個倒せば完成！
そんなサイト構成になっています。
③なんといってもこのサイトはオシャレ
これは個人差があるとは思いますが、私このサイトの色使いや構成が大好き。
オシャレじゃないですか？flowerさんのサイト。
オシャレなサイトの模写をしていると
「自分もこんなオシャレなサイト、頑張れば作れるんだな(*´▽｀*)」と、達成感を得られます。私は将来的にはwebデザインもやりたいと思っているのでそう思うのかもしれません。
自分が作りたいサイト、憧れとするサイトを模写してテンション上げていきましょう！
どれくらい学習したら挑戦できる？
あくまで私の体感ですが、
- progateのHTML/CSSの道場を含む上級編まで終了
- Flexbox編を終了
- vscordなどのコードエディターを使える状態
このような学習状況であれば挑戦してよいかと思います。
ヘッダー部分のアニメーションも模写したかったらJavaScriptが必要になりますが、未学習の人は「animate.css」「wow.js」を使えばOK！
フォルダパスさえ分かれば実装できます。(私も今回はこちらを使っちゃいました)
「何かサイト模写したい」と思ったとき
多くの人がAirbnbやisaraの模写に挑戦すると思います。
ですが私としては、
Flowerさんの模写から挑戦したほうが良いと思っています。
難易度や作業時間の関係から挫折しにくいです。心が折れてしまっては意味がありません。
この模写を通して自信をつけていってほしいと私は思っています。
どんなスキルが学べる？
このFlower模写は特に大きなものが学べるわけではありません。
でも、progateやドットインストール、30DAYSトライアルで学んだhtml/cssの知識を、実践に似た環境で再確認できるという印象です。
paddingやmarginの使い分け、
flexboxの使い方、
私も苦戦した背景画像の位置調整など。
そういえばどう違うの?
あれとこれどっちを使うんだっけ？というような
今までの学習の一歩先を行く学びができると思います。
わからなくて検索したところは？
私がわからなくて検索したところを載せます。
これは、私のプログラミング学習として積み上げてきた時間の288時間~296時間くらいまでの記録です。私はこの模写以前に3つほどのサイト模写、2つのデザインカンプからのコーディングの経験があります。
「これしか検索しなかったのかよ……」と落ち込まないでください。
あなたも学習を積み上げれば、きっとできます。
大丈夫！
今回はtwitterで模写実況していたのでそれを載せます(笑)
毎日のようにプログラミング学習による試行錯誤を呟いていますので、
是非フォローしてください。
7つの検索箇所はこちら
①最初に検索したのは「サイト模写 背景画像 取得」
取得できるのは知っていたけど、ついつい方法を忘れちゃってはこちらのノート(https://t.co/047wloF7IX)にお世話になっています。いつもありがとうございます。先を行く先輩たちに感謝(;´∀｀)
— igarashiiiiii@webデザイナーになる (@ririru_123) October 29, 2019
②「background-size:cover; 違い」
100%やcontain。それぞれに違いがあるのは分かるんだけど、どれがどれだかわからなくなって検索。
出来れば暗記したいところだけど、暗記しなくてもいいっかって気もする。— igarashiiiiii@webデザイナーになる (@ririru_123) October 30, 2019
③「中央配置 css 上下」
左右の中央配置はよく使うから覚えているけど、
上下は久しぶりで記憶が曖昧ということで検索。
position: absolute;
top: 50%;
transform : translate(-50%,-50%);
で何とかしたけど、Flexbox使った方がコード少なくなりそうだと今思いました。— igarashiiiiii@webデザイナーになる (@ririru_123) October 30, 2019
④「2個目だけ css」
疑似クラスでどうにかするのは覚えていたけど、いまいち書き方を覚えていなかったので検索。なんたらchildだったなくらいの記憶。検索して分かったからいいのです。後ろからn番目なんて記載もできるのは初めて知った。
— igarashiiiiii@webデザイナーになる (@ririru_123) November 5, 2019
⑤「background-position 指定」
今まで経験したのはだいたいcenterだったから指定方法を検索しました。指定できるのは知ってた。でも書き方はわからん。— igarashiiiiii@webデザイナーになる (@ririru_123) November 6, 2019
⑥「height: 100vh;」
vhってあってるか不安になって検索する。
viewport heightの略なんだけど、イマイチ覚えてなくて毎回検索するけど、検索して分かればよいのです。
画面いっぱいに表示させたいときに便利。— igarashiiiiii@webデザイナーになる (@ririru_123) November 7, 2019
⑦「img 拡大 css」
幅と高さが決まっていてcss上でトリミングするときに、変な拡大率にならなくするコードあった気がする。ってことで検索。object-fit: cover;でした。— igarashiiiiii@webデザイナーになる (@ririru_123) November 7, 2019
地味に苦戦しつつも笑ったミスもご紹介。
①borderの裏切り
うわーborderに裏切られたー｡ﾟ(ﾟ´Д｀ﾟ)゜｡
お前、私を裏切ったことなかったじゃんよー。
しかもこんな形でちょっと笑っちゃったじゃんか。絶対brのせいだわ!!
でもbrは必要なの、ごめんね。
指定するcssのせいだわ!!
直してくる!!#駆け出しエンジニアとつながりたい pic.twitter.com/FhnenGblcy— igarashiiiiii@webデザイナーになる (@ririru_123) November 5, 2019
②33％の盲点
この3つの横並びの左右に開いた謎の隙間に苦戦しましたが原因はwidthでした。
「widthどうしよう……3つ横並びだから33％でちょうどよくね？」って思いついたまま書いてました。
残りの１％が謎の隙間になっていました。
これは盲点(;´∀｀)#駆け出しエンジニアとつながりたい pic.twitter.com/WEtpuiN0xw— igarashiiiiii@webデザイナーになる (@ririru_123) October 30, 2019
次回に活かすための反省は？
模写を終えた後、本家のサイト様のコードを確認しました。
そこで気づいた学びをメモ代わりにここに残していきます。
箇条書きで失礼します。
- やっぱりclassの名前付けが綺麗
- 見出しに共通するclass名を入れれば時間短縮になった。
- スマホとパソコンで順番が違う部分はorderを使う
- 自分はレスポンシブ幅で表示/非表示を切り替えたがorderを使った方がコードが綺麗。
- スマホ用とパソコン用の背景画像を別に用意するという方法がある
- 背景画像の背景色とbackground-colorで一体感を出すという方法がある
まとめ
いかがだったでしょうか？この記事をまとめるとこんな感じです。
Flower模写をするメリット
→素早く達成感が得られる。
どれくらい学習したら挑戦できる？
→progateでHTML/CSSを終えたらすぐに挑戦可能！
このどんなスキルが学べる？
→progateの復習ができる。
ということは、
今この記事を見ているあなたもすぐに模写して達成感が得られるのでは？
プログラミング学習に大切なのは絶対に達成感。
私が約300時間ほど独学で学習できているのも、達成感を大切にしたから。
プログラミング学習で不安になること、たくさんあると思います。
私もそうです。今でも不安です。
だからこそ励ましあって頑張っていきましょう。
私はこんな人と繋がりたい!!
・webデザイナー目指している方
・独学でプログラミング頑張っている方一人でパソコンに向かっているのは楽しいけど、
ちょっと寂しくなる時もあるんだ。気軽にリプ送りあえる仲間が欲しい。
いいね送りあって頑張りあいたい。#駆け出しエンジニアとつながりたい— igarashiiiiii@webデザイナーになる (@ririru_123) November 7, 2019
いつもこんなツイートしてるので是非フォローしてね。
ここまで読んでいただきましてありがとうございました。
