PROGRAM

【ポートフォリオ公開OKも】サイト模写におすすめサイト3選+1【初級〜上級】

2020-07-20

【ポートフォリオ公開OKも】サイト模写におすすめサイト3選+1【初級〜上級】
読者

サイト模写におすすめのサイトってある?
ポートフォリオにも実績として公開したいんだけど大丈夫?

このような悩みに答えます。

makoto

本記事の信頼性

私はプログラミングの勉強を初めて3ヶ月で、以下のスキルを身に着けました。

  • HTML
  • CSS
  • PHP
  • JavaScript
  • jQuery
  • WordPress

もちろん独学で、かかったお金は1万円以内です。

スクールに通えば月に数回の授業でウン十万とかかるので、それに比べるとかなり経済的かつ効率的にプログラミングを学習できたと思います。

そして、サイト模写にも挑戦し、最終的には以下のようなポートフォリオのデザイン・コーディングまで一人で行い完成させました。

ポートフォリオのトップページ
Mako's PORFOLIO

WEB制作を独学で始めて、これからサイト模写を始めようと思っているプログラミング初心者の方。

どうせサイト模写をするなら、ポートフォリオにも公開OKなサイトがいいですよね。

今回紹介するサイトは、プログラミング初心者に向けて、初級編、中級編、上級編と段階的にスキルアップできるような4段階の難易度を用意しています。

この3つがコーディングできれば、すでにWEB制作案件を受注できるレベル。

時間はかかるかもしれませんが、少しずつこなしていきましょう!

ちなみに、サイト模写のやり方についてはこちらの記事で詳しく解説していますので、合わせてどうぞ。

サイト模写したものはポートフォリオに公開してもいい?

サイト模写したものはポートフォリオに公開してもいい?

基本的にはweb上に公開されているサイトには著作権が発生しています。

webサイトだろうと、個人や制作会社の制作物に当たるからです。

一部、サイト名や元ページへのリンクを明示していればOKとしてるサイトもあるようです。

じゃあどのwebサイトでも、情報を明示していればOKかというと、ここはグレーゾーン

実際に公開OKと公表していないサイトの模写を、実績としてポートフォリオに公開している製作者もいます。

製作者もそれらを全て監視できるわけではないので、ほとんど問題になっていないのだろうけど、普通に考えて、自分のサイトが無断でコピーされていたらいい気はしないですよね。

今回は、ポートフォリオに公開してOKなものを含めて、難易度別にサイト模写におすすめのサイトを紹介します。

サイト模写におすすめのサイト3選

サイト模写におすすめのサイト3選

デイトラ(初級)

デイトラでおなじみの東京フリーランスが公開している無料noteです。

難易度的にはProgateでHTML・CSSコースが一通り終わった人向けということで、初級レベルとしました。

公開OKとは書かれていないので、ポートフォリオには載せないほうがいいですね。

模写のレベルとしても簡単すぎるので、実績としても微妙なところ。

あくまで練習用ということで割り切っておきましょう。

難しいレイアウトはなく、ヘッダーやセクションごとなどパーツ分けをしてコーディングしていけば、初心者でも進めていけると思います。

とはいえ、はじめてのサイト模写なのでつまずいてしまう方も多いはず。

僕もそうだったので...笑

ポイントは、わからなければググること

初心者でできていない人が意外と多いです。

コーディングはカンニングOKなもので、調べずにコーディングできるエンジニアの方が珍しいですよ。

最初なので時間もかかってもOK。

最後まで完成させた頃には脱初心者ですね。

旧 MAKOTO × BLOG(中級・公開OK)

MAKOTO × BLOG

以前、このMAKOTO × BLOGのトップページだったものです。

途中から有料テーマ「AFFINGER」に移行したので今は使っていないですが、プログラミングの練習がてら、デザインからコーディングまで1人でやったものを使っていました。

特に難しいレイアウトもなく、ボリュームも多くないので、比較的簡単にコーディングできると思います。

真似して欲しいポイントは、

  • 整列させたレイアウト
  • 各セクション間の余白
  • 各リンクのホバーアクション

このあたりですね。

トップページを見た目通りにコーディングすることだけに集中しましょう。

画像は適当に入れてもらっても良いですね。

ちなみに私が作ったものなので、模写したものは公開OKです。

(一言だけだけメッセージくれたら嬉しい...)➝ マコト@ブロガー【永遠の初心者】

公開していないページなので、zipファイルをお渡しします。

makoto

旧MAKOTO×BLOGをダウンロード

html・css・jQuery・画像フォルダが入っています。

ご自身のPCにダウンロードしてお使いください。

ISARA(上級・公開OK)

外部リンク:iSARA(イサラ)

最終試験です。

タイのバンコクでノマドエンジニアを育成する講座を実施しているISARA(イサラ)のホームページ。

LP型のサイトで、長い1ページに全ての情報が集約しています。

ここまでくれば、一つ一つのセクションはそんなに難しくないと思いますが、かなりのボリュームなので、最後までコーディングするのに1週間以上はかかると思います。

また、ISARAのホームページでは「Bootstrap」というフレームワークが使用されています。

簡単に言うと、HTMLで特定のクラス名をつけるだけで、CSSを使わずにある程度のレイアウトが簡単にできる機能です。

ちょっとクセがありますが、慣れるとコーディングスピードが爆上がりするので、この際に習得しておくといいでしょう。

ISARA模写で習得したいスキル

  • トップスクロールボタン
  • 開閉式のQ&A
  • お問い合わせフォームへのスクロールアニメーション

HTML・CSSに加えて、このあたりをjQueryをつかって実装できるようになれば一人前です。

もちろん何も見ずに実装するのは難しいので、ググりながら実装していってください。

ここまでできれば、駆け出しエンジニアは卒業。

早速、案件受注に向けて進みましょう。

デザインカンプからのコーディング

Coding Note(番外編・公開OK)

実際のwebサイト制作案件では、デザインカンプというものからコーディングをしていきます。

デザインカンプとはデザインの完成イメージのことで、一般的にwebデザイナーはこのデザインカンプを制作することが仕事です。

コーダーは、デザイナーが作成したデザインカンプをもとにコーディングし、webサイトを制作していきます。

つまり、デザインカンプからのコーディングができなければ、コーダーとして仕事はできません。

自分も、初心者のとき、プログラミングの教材は山のようにあれど、デザインカンプからコーディングを教えてくれる教材がなく、めちゃくちゃ困ったのを覚えています。

makoto

Coding Noteでは、XDデザインカンプからのコーディングを練習できます。

ワンコインの500円で販売させて頂いていますが、

無料版のCoding Note FREEもあるので、それだけでも十分な練習にはなりますよ。

こちらのnoteで公開しています。

makoto

サイト模写ができたら次のステップ

サイト模写ができたら次のステップ

今回紹介したサイト模写が終わったなら、あなたはもう実務をこなせるレベルです。

次のステップとして、「クラウドソーシング」へ登録しましょう。

クラウドソーシングとは、仕事を依頼したい人と、仕事を受注したい人をマッチングさせるサービスです。

ここでは、コーディング案件や、デザインの案件の募集が毎日集まっているので、あなたのスキルを存分に発揮していきましょう。

案件を受注するかどうか迷った時は、提案された内容の50%くらいできると思ったなら、ガンガン提案してOK。

プログラミングはググりながらでもできればOKなので、悩みすぎて何もしないくらいなら、できるかどうか分からないけど「できます!」と言ってしまえば、嫌でも調べながら完成させようとします。

(...ちなみに、あのホリエモンがやっていた方法です笑)

登録しておくべきクラウドソーシングは以下のとおり。

登録必須のクラウドソーシング

また、フリーランスとして独立する以外に、転職という選択肢もあります。

  • 転職エージェントに登録しつつ、クラウドソーシングで実績を積みながら、オファーを待つ
  • 転職してさらにスキルを磨いたのちに、フリーランスとして独立する

など、自分が将来どのようになりたいかによって、転職 or フリーランスの選択を変わってくるので、明確なビジョンを持っておくといいですね。

© 2021 MAKOTO × BLOG Powered by AFFINGER5