サイト模写におすすめのサイトってある？
ポートフォリオにも実績として公開したいんだけど大丈夫？
このような悩みに答えます。
本記事の信頼性
私はプログラミングの勉強を初めて3ヶ月で、以下のスキルを身に着けました。
- HTML
- CSS
- PHP
- JavaScript
- jQuery
- WordPress
もちろん独学で、かかったお金は1万円以内です。
スクールに通えば月に数回の授業でウン十万とかかるので、それに比べるとかなり経済的かつ効率的にプログラミングを学習できたと思います。
そして、サイト模写にも挑戦し、最終的には以下のようなポートフォリオのデザイン・コーディングまで一人で行い完成させました。
WEB制作を独学で始めて、これからサイト模写を始めようと思っているプログラミング初心者の方。
どうせサイト模写をするなら、ポートフォリオにも公開OKなサイトがいいですよね。
今回紹介するサイトは、プログラミング初心者に向けて、初級編、中級編、上級編と段階的にスキルアップできるような４段階の難易度を用意しています。
この3つがコーディングできれば、すでにWEB制作案件を受注できるレベル。
時間はかかるかもしれませんが、少しずつこなしていきましょう！
ちなみに、サイト模写のやり方についてはこちらの記事で詳しく解説していますので、合わせてどうぞ。
サイト模写したものはポートフォリオに公開してもいい？
基本的にはweb上に公開されているサイトには著作権が発生しています。
webサイトだろうと、個人や制作会社の制作物に当たるからです。
一部、サイト名や元ページへのリンクを明示していればOKとしてるサイトもあるようです。
じゃあどのwebサイトでも、情報を明示していればOKかというと、ここはグレーゾーン。
実際に公開OKと公表していないサイトの模写を、実績としてポートフォリオに公開している製作者もいます。
製作者もそれらを全て監視できるわけではないので、ほとんど問題になっていないのだろうけど、普通に考えて、自分のサイトが無断でコピーされていたらいい気はしないですよね。
今回は、ポートフォリオに公開してOKなものを含めて、難易度別にサイト模写におすすめのサイトを紹介します。
サイト模写におすすめのサイト３選
デイトラ（初級）
デイトラでおなじみの東京フリーランスが公開している無料noteです。
難易度的にはProgateでHTML・CSSコースが一通り終わった人向けということで、初級レベルとしました。
公開OKとは書かれていないので、ポートフォリオには載せないほうがいいですね。
模写のレベルとしても簡単すぎるので、実績としても微妙なところ。
あくまで練習用ということで割り切っておきましょう。
難しいレイアウトはなく、ヘッダーやセクションごとなどパーツ分けをしてコーディングしていけば、初心者でも進めていけると思います。
とはいえ、はじめてのサイト模写なのでつまずいてしまう方も多いはず。
僕もそうだったので...笑
ポイントは、わからなければググること。
初心者でできていない人が意外と多いです。
コーディングはカンニングOKなもので、調べずにコーディングできるエンジニアの方が珍しいですよ。
最初なので時間もかかってもOK。
最後まで完成させた頃には脱初心者ですね。
旧 MAKOTO × BLOG（中級・公開OK）
以前、このMAKOTO × BLOGのトップページだったものです。
途中から有料テーマ「AFFINGER」に移行したので今は使っていないですが、プログラミングの練習がてら、デザインからコーディングまで１人でやったものを使っていました。
特に難しいレイアウトもなく、ボリュームも多くないので、比較的簡単にコーディングできると思います。
真似して欲しいポイントは、
- 整列させたレイアウト
- 各セクション間の余白
- 各リンクのホバーアクション
このあたりですね。
トップページを見た目通りにコーディングすることだけに集中しましょう。
画像は適当に入れてもらっても良いですね。
ちなみに私が作ったものなので、模写したものは公開OKです。
（一言だけだけメッセージくれたら嬉しい...）➝ マコト@ブロガー【永遠の初心者】
公開していないページなので、zipファイルをお渡しします。
html・css・jQuery・画像フォルダが入っています。
ご自身のPCにダウンロードしてお使いください。
ISARA（上級・公開OK）
外部リンク：iSARA（イサラ）
最終試験です。
タイのバンコクでノマドエンジニアを育成する講座を実施しているISARA（イサラ）のホームページ。
LP型のサイトで、長い１ページに全ての情報が集約しています。
ここまでくれば、一つ一つのセクションはそんなに難しくないと思いますが、かなりのボリュームなので、最後までコーディングするのに１週間以上はかかると思います。
また、ISARAのホームページでは「Bootstrap」というフレームワークが使用されています。
簡単に言うと、HTMLで特定のクラス名をつけるだけで、CSSを使わずにある程度のレイアウトが簡単にできる機能です。
ちょっとクセがありますが、慣れるとコーディングスピードが爆上がりするので、この際に習得しておくといいでしょう。
ISARA模写で習得したいスキル
- トップスクロールボタン
- 開閉式のQ&A
- お問い合わせフォームへのスクロールアニメーション
HTML・CSSに加えて、このあたりをjQueryをつかって実装できるようになれば一人前です。
もちろん何も見ずに実装するのは難しいので、ググりながら実装していってください。
ここまでできれば、駆け出しエンジニアは卒業。
早速、案件受注に向けて進みましょう。
サイト模写ができたら次のステップ
今回紹介したサイト模写が終わったなら、あなたはもう実務をこなせるレベルです。
次のステップとして、「クラウドソーシング」へ登録しましょう。
クラウドソーシングとは、仕事を依頼したい人と、仕事を受注したい人をマッチングさせるサービスです。
ここでは、コーディング案件や、デザインの案件の募集が毎日集まっているので、あなたのスキルを存分に発揮していきましょう。
案件を受注するかどうか迷った時は、提案された内容の50%くらいできると思ったなら、ガンガン提案してOK。
プログラミングはググりながらでもできればOKなので、悩みすぎて何もしないくらいなら、できるかどうか分からないけど「できます！」と言ってしまえば、嫌でも調べながら完成させようとします。
（...ちなみに、あのホリエモンがやっていた方法です笑）
登録しておくべきクラウドソーシングは以下のとおり。
登録必須のクラウドソーシング
また、次のサービスもおすすめです。
駆け出しエンジニアにピッタリのクラウドソーシングサイト
「FLEDGLING」は駆け出しエンジニアへ仕事を依頼する変わりに、報酬を相場よりも抑えることができるという、新しいクラウドソーシングサービスです。
駆け出しエンジニアの悩みで多いのが、
実績がないから仕事が獲れない。仕事が獲れないから実績がない。
ということです。
FLEDGLINGを利用するメリットは、FLEDGLING内での仕事は全て実績として公開OKということ。
つまり、『報酬よりもまず実績を取りに行きたい』というエンジニア向けのサービスになっています。
詳しくは以下の記事で解説しています。
また、フリーランスとして独立する以外に、転職という選択肢もあります。
登録必須の転職サイト・転職エージェント
- 転職エージェントに登録しつつ、クラウドソーシングで実績を積みながら、オファーを待つ
- 転職してさらにスキルを磨いたのちに、フリーランスとして独立する
など、自分が将来どのようになりたいかによって、転職 or フリーランスの選択を変わってくるので、明確なビジョンを持っておくといいですね。
