4つ目の模写サイトが完成しましたっ！

皆さん、こんにちは。

すなです。

今回はシリーズ「大学卒業までに20万/月を稼ぐ人の話」の第四弾になります。

今回もサイトを模写するにあたって、ポイントや技術的なお話をできたらなと思います。

前回に記事をまだ見てない方は、こちらをご覧ください。

世界一周団体「TABIPPO」のモノづくりブランド

今回、模写させていただいたWebサイトは、世界一周団体TABIPPOのモノづくりブランド、PAS-POLのサイトになります。

PAS-SOLさんのWebサイトは旅の魅力を伝えつつ、モノづくりブランドとして自社で開発している商品の宣伝や、PAS-POLの企画を案内するニュースのページなどがあります。

Webサイトは非常に綺麗で、デザインはまとまっていて、かなり見やすいのではないかなと思います。

完成した模写サイト

今回、模写した僕のサイトはこちらになります。

元サイトを完全には模写していなくて、

• トップページ
• NEWSページ

のみ模写しました。

下層ページは似た様なレイアウトの横回しなので、スタミナを付けたいときは有効かもですが、ページの構成を勉強したい人にとっては多少時間の無駄かなと思いました。

作業量が多かった

今回のサイト模写で用いたスキルなどについて解説したいと思います。

HTML&CSSとJavaScript

今回のサイトで扱ったスキルは以下になります。

• たくさんのHTML
• たくさんのCSS
• 少しのJavaScript(= jQuery)

今回のサイトが今までのサイトと1番違う点は、1ページあたりのテキスト量がとても多いことです。

過去のサイトはそこまでHTMLの量が多くなかったのですが、今回はかなり作り込まれたサイトだったのでまずそもそもの量が多かったです。

レスポンシブ対応

それに加えて、レスポンシブでレイアウトではなくデザイン自体が若干変わるので、それに対応するのが少し大変でした。

画面幅が900px以下に時はheaderのメニューがアコーディオンメニューになるので、メニューを2回作る様な作業をしました。

また下部に外部リンクも画面幅に応じて要素数が変わるので、これも対応するのが少し大変でした。

レスポンシブ系で毎回重宝しているのは、やはり「display: flex;」ですね。

こいつはかなり優秀です。

数年前のBootstrapと同じ様な雰囲気を感じますが、最近はdisplay: flex;の様が覇権を握っている様な気がします。

同じ内容が実装できれば中身はどちらでもいいと思いますが、もしまだ使ったことな人いたら是非display: flex;も使ってみてください。

またheader付近にスライドがありますが、これはjQueryは使っておらずcssのみで実装しています。

複数の画像を用意して、それらにtransition: all 1s ease-in-out;を適用しています。

詳細を知りたい方は僕が参考にしたサイトを貼っておくので、そちらを参照ください。

作業時間は50時間

今回も体感なのですが、この模写サイトを制作するのに50時間くらいかかったかなと思います。

ニュースの記事部分を全て一旦書き起こしているため、同じ作業が重複しているのも時間がかかった原因かと思います。

時間の80%はWebサイト自体を制作するのに費やしました。

残りの20%はそれをWordPress化するのに使いました。

WordPressめっちゃ便利です

今までずっと食わず嫌いして避けていたのですが、ちゃんと取り組んだらこんなに使いやすいのかとびっくりしています。

これは余談なのですが、過去に俺のことをなんとなく嫌っていた人がいたのですが、ちゃんと僕と絡む様になったら今では大親友になったみたいな話が昔ありました。

その時と似た感覚を覚えました（なんの話？）。

WordPressはWeb制作をする上では避けては通れない道です。

Web制作をする際にRuby on RailsやLaravelなどのフレームワークを勉強してちゃんとプログラミングを学習される方は、なんとなく「WordPressって逃げじゃん？」みたいな思い込みでWordPressを避けることがあると思います（僕はそうでした汗）。

しかしCMS(= Content Management System)なだけあって、使いこなせる様になるとWP側で記事やレイアウトの管理(= Management)をしれくれるので、圧倒的に楽だと思いました。

要は一度HTML&CSSなどのレイアウト、デザインを決めてしまえば、全ての投稿に同様のデザインが適用されるので、かなり便利です。

10-15万円で受注できればおけ

Webサイト制作会社の相場はもっと高いですが、個人でやっているのと、まだ駆け出しなので10-15万くらいで受注できれば全然アリなのではないかなと思っています。

今回の模写では2ページ分しか模写していないので、実際はもう少し金額を上乗せできる様な気もします。

先にも書きましたが、最近はWordPressの扱い方が少しずつ分かってきてプログラミングが楽しいと感じれらる様になりました。

苦痛なく、しかもお金も頂戴できるのならば、これほど幸せなことはありません。

ありがたいことに学生の長期休暇は勉強にうってつけなので、まだまだ吸収したいと思います！