初めてサイト模写した結果

こんにちは、すなです。

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

この記事では、大学生である僕が20万円を稼ぐまでどういう過程をイメージしているかを書いているので、こちらの記事も是非チェックしてみてください。

さて今回は、その過程でお話した「ポートフォリオ」を作るという話をします。

具体的には、僕がサイト模写で作成したサイトを紹介して、その模写にかかった時間や労力、技術のレベル的な話もできたらなと思っています。

今回は「初級レベル」のサイト模写

さて、ポートフォリオを作成するに当たって、僕は久々にWeb制作をすることになりました。

普段からプログラミングには触れているのですが、ただのプログラミングとWeb制作では(個人的には)全くアプローチや扱うジャンルが違うと感じます。

自転車の趣味サイト

暫くぶりにサイト制作することになったので、ウォームアップがてら最初に模写するサイトは初級程度のサイトにすることにしました。

今回、参考にしたサイトはこの趣味の自転車サイトになります(ちなみに、このサイトはサイト模写のやり方を調べるときに見つけたこのサイトから見つけました)。

恐らく趣味が自転車の人がプライベートで公開しているサイト、という想定のサイトになります。

多分、この方もサイト模写の一貫で作成したサイトだと予想しています。

実際の制作物はこちら

僕がこのサイトを参考にして模写したサイトはこちらになります。

本家のサイトとは同程度のクオリティを保てたかなと思っています。

所要時間は5時間

正確に計測はしていないのですが、このサイトを制作しきるのに体感で5時間程度かかりました。

久々のサイト制作過ぎて、昔ならスムーズにできた箇所で躓いて、時間がかかってしまいました。

この量で5時間は多分かなり遅い方だと思います(というか遅いです)。

ちなみに、サイト模写の際に僕が詰まった技術的なポイントも並行して別の記事にしていますので、そちらも合わせてご覧ください。

ページ数は1枚だけ

ページ数は1枚で、右上のリンクらしきボタンも同一ページに遷移するだけなので、サイト量はとても少ないです。

画像はフリー素材

サイトで用いている5つの画像は全て「Pixels」という自由に画像が使える海外の画像サイトから拝借しています。

最大画質でダウンロードしたので僕が模写したサイトでは少し画像に読み込みに時間がかかってしまいます(汗)。

HTML/CSSだけでok

こちらのサイトを制作するに当たって、僕が用いた知識は

• HTML
• CSS

だけです。プログラミング初心者でも時間をかければ作成できるレベル感のサイトを選びました。

少しだけ技術的な話で深掘りすると、ケータイでもレイアウトが崩れない様にレスポンシブ対応しました。慣れていない初心者の方だと、そこに時間がかかってしまうかも知れません。

加えてJavaScrpitやPHPも一切用いていないので、サイトには何も動きを加えていません。

1万円でも利益

僕は大学生で、現在のアルバイトの給料が1100円なので、この程度のサイトを1万円(かなり安い気はしますが)で受注して5時間で納品すれば、同じ時間アルバイトするよりも圧倒的に効率はいいです。

また今回の模写サイトは1枚だったので、中身が異なる他のページも複数枚制作すれば、単純計算でページ数分単価を上げられます。

いいスタートになった

JavaScriptもPHPも使用してない静的なページではありますが、昔に勉強したことや、新しい知識にも出会えて、いいスタートになったかなと思います。

少しづつサイトのレベル感を上げていって、クライアントにサイト制作を任せてもらえる様なエンジニアになりたいですねっ！