手に職を付けようと思ってプログラミングの勉強をしております．
Progateで基礎を終わらせたので，現在は既存のwebページを模写することで流れをつかもうとしているところです．
そんでAirbnbのサイトを模写していたんですよ．
ただね，やってみるとかなりてこずった．その時の記事がこちら．
-
-
【模写コーディング】Airbnbの模写難しいって！
続きを見る
今回はもう終了ということでこの記事で取り上げたわけだが，
「満足いくものが完成したから終わり！」
ではない．
「これ以上はもう無理だよおおおおお;;」
の終わりである．
まあ見てくれ．
Airbnb模写の成果物
これがオレの成果だああ！
1枚目
2枚目
3枚目
4枚目
5枚目
ぱっと見はそんなに違和感ないのではないでしょうか．
しかしそれは錯覚です．不自然に見えないのは，写真のおかげ．
ぶっちゃけ，画面に対して写真の占める割合が大きいから写真次第でそれっぽい雰囲気が出るのだ．
写真と関係ないところは結構できていないところが多い．
特に1枚目が一番できていない．
これは公式サイトの図
そしてこちらが私が模写した図．
全く手が出なかったところの3か所は印もつけました．
背景画像が違うのが一番気になるかもだけど，模写してる期間中に公式サイトが替えたのよ．そこは気にせんといてくれ．
まず①ね．この位置にはAirbnbのロゴが配置されているのが正解だ．
その方法は簡単で，たくさんの記号やロゴなどのアイコンを表示させてくれるサイトを使うだけ．今まで何回も使っているから，使い方には困らないはずだった．
だが，なぜかAirbnbのアイコンは表示できなかった．何回やり直しても無理．試しにアップルのアイコンを配置してみたらちゃんと表示されたので，そのままにしておいた．
アップルは表示されてAirbnbが表示されなかった理由は今でも謎である．
②アイコンが微妙に違うってのは置いといて．なんで左に寄った？なんなら真ん中にそろえるよりも左に寄せる方が難しいまであるぞ．白枠の形もおかしいな．ただこれはなんでできなかったのか覚えていない．今ならできそう．
③虫眼鏡ボタンを白い検索ボックスの中に入れれなかったわ．
不満点
うまくできなかったせいかもしれねえけどよお，Airbnbのサイトにも不満があるんだよお．
①検証者ツールが分かりにくい
いざ公式サイトのつくりを勉強しようと思って検証者ツールを見てみたわけです．
そしたらこれがすごく見にくい．クラス名はランダムな英数字が並んでいるだけなのだ．
普通は次に編集するときも分かるように，そのクラスの構造とかに基づいて簡単な単語が充てられたりするんですよ？
AirbnbのページはAIが作ってるのか？
②子供の画像
子供の画像があるんですけど，見ました？
私が模写した2枚目のページに，母親に抱かれた子供がこちらに向かって舌を突き出している画像がありました．
もう一度載せます．
ほら！ここ！
これですわ．
いや，かわいらしいんですよ？僕だって，初めて見たときならほほえましく思いましたもん．
でも，毎日見てるとそんなことも言っていられない．朝起きてからすぐに模写していると，寝起きでテンションの低い私に向かって舌を出してくるのです．26歳いい大人なのに，さすがにイラっとしてしまう．
しかも，難しいなー，どうやったら同じデザインになるかなーと頭を悩ませているときに，この顔です．
何とも言えない気持ちになるので「さっさとAirbnb終わらせてえ」と思うようになりました．
まとめ：「完了しなかったから断念した」が正しい
いやー，Airbnbの模写は難しかった．
しかもやっていて楽しくなかったなあ．思うようにできないし子供にあっかんべーされるし．
できていないことはたくさんあるんですけど，途中でできることが頭打ちになっちゃうんですよ．これ以上時間をかけても進歩はなさそうだったので，断念しました．
ま，まあ，無駄に粘ってプログラミング自体に興味をなくすよりは切り替えたほうがましだもんな！うん，そうだ！そうに違いない！
というわけで，Airbnbは潔く諦めて次の模写に進みますあざしたー．