独学

【HTML・CSS】効果的な模写制作の方法について考えてみた

「コーダーとしてスキルを上げたい」と思った時、効果的なアウトプットの方法が既存サイトの模写制作ですね。

未経験からだと実績もありませんし、転職時のポートフォリオには模写サイトを提示される方も多いはずではないでしょうか。

 

Twitterのタイムラインを見ていると、PAS-POLやiSaraの模写が人気のようですが、単純に模写するだけでは実務的なスキルは身につかないなーと思うわけです。

 

 

そこで今回は、

より実務的なスキルを身につけるための模写制作方法について解説していきたいと思います。

 

  • 僕の模写制作遍歴
  • 効果的な模写制作のやり方

 

僕の模写制作遍歴

僕がどんな模写制作をしてきたのかを簡単にご紹介します。

 

 

Twitterに投稿していないものは割愛しますが、だいたいこんな感じです。

 

模写サイトの決め方

初めのうちは、自分が出来そうなものから手をつけていき、徐々に動きがあるサイトにも挑戦していきました。

途中から思ったのが、「模写サイトから何を学ぶかを明確にしてから始めること」が大事だなーと。

 

これは読書と共通していて、

目次も読まず、本から何を学びたいかを意識せずに読書をすると、何も身につきませんし、行動にも結びつきません。

 

模写サイトを決めるときのポイントは、このサイトを模写することで何を学べるか?を考えることだと思います。

 

サイトを探すにはこちらのサイトを使ってました↓

 

効果的な模写制作のやり方

模写サイトの決め方はざっくり紹介しましたが、

ここからは効果的な模写制作のやり方をご紹介します。

 

実際にWeb制作の実務についてみて、自己満足だけの浅い模写制作は時間の無駄だなーと感じました。

というのも、既存のサイトを模写するだけでは、どうしても受動的になりがちで、「自分で想像して工夫していく」という意識が生まれにくい。

 

自分で考えて手を動かしていく、「アクティブラーニング」の概念が非常に重要なんですね。

アクティブラーニングで模写制作を進めていきましょう。アクティブトレースとも名付けましょうか。

 

じゃあ具体的にどうやって進めていくのがいいのか、例として僕も模写したPASーPOLのサイトで解説していきます。

 

アクティブトレースのやり方

アクティブトレースと大手を広げましたが、やることはあまり変わりません。

ただ、少し自分なりに工夫をして、自分の頭で考える意識を持つことが大事です。

 

ポイントとしては、

  1. 下層ページまで模写する
  2. WordPress化する
  3. 業務と仮定し、クライアントの姿を想像する

下層ページまで模写する

下層ページもあるサイトの場合、全ページ模写している人ってどれくらいいるのでしょう?

正直、僕は全ページしていなかったです。

 

後述しますが、以下のマインドが大事だと思ってます。

模写=「サイト制作の案件を受けた」と仮定してコーディングする

 

単純に、「練習だ」と思って模写しているだけだと、トップページだけやって満足してしまったり、ちょっとデザインが崩れていてもそのままにしてしまう可能性があります。

実際の案件だと思って取り組みましょう。

 

PASーPOLで作るべきページはこんな感じです。

  1. TOP
  2. PRODUCT
  3.  →PRODUCTの詳細ページ
  4. ABOUT
  5. NEWS
  6.  →NEWSの詳細ページ
  7. CONTACT

合計7ページのコーディングになります。

 

ボリュームたっぷりに見えますが、ヘッダーとフッターは共通なのでコーディング量としては少ないですし、CONTACTページにはフォームがないのでサクッと作れますよ。

 

下層ページまで模写するメリットとしては、「コンポーネント設計の練習になる」ということです。

 

僕がボリュームの多いサイトを作っていると、コードがぐちゃぐちゃになってしまい、コンポーネントなんて破綻してしまってましたw

「ボリュームのあるサイトも練習しとけばよかったな〜」と感じてます。

 

何より、

下層ページまでしっかりコーディングし、全ページ作り上げたときの達成感はやばいです!

 

WordPress化する

ざっとサイトを眺めてみて、WordPressで構築するにはどうすればいいか?を考えてみてください。

 

例えば、

それぞれどのテンプレートで作成するべきなのか?

 

 

 

PRODUCTも、NEWSも、記事を投稿していく投稿タイプで、アーカイブページ (一覧ページ)がありますね。

となると、カスタム投稿が必要かも、、?

 

みたいな感じで、構成を組み立てて管理がしやすいように考えていきましょう。

 

 

WordPressの構築なんてできない!って人は、

東京フリーランスの30DAYSトライアルでWordPress構築について学んでみてください。

 

30DAYSトライアルでは、ブログテーマを作成しますが、WordPress構築に必要な知識を学ぶことができるので、まずやってみる価値はあります。

 

さらに、今回のように模写したサイトをWordPress化してみると、身につくスピードも上がるはずです!

 

 

業務と仮定し、クライアントの姿を想像する

さて、WordPress構築がなんとかできたとしましょう、

次に、自分なりに「どこか改善するべき点はないだろうか?」と考えてみてください。

 

自分が作ったサイトをクライアントが実際に使用すると仮定し、考えていきます。

  • 使いやすいサイトにするにはどうすればいいだろうか?

 

例えば、

PAS-POLではコンタクトフォームが実装されていないようですので、

「コンタクトフォームを作ってみる」とか。

 

 

参考

 

簡単に言うと、模写したサイトに新しい機能を実装したり、自分なりにデザインを変更してみるということです。

 

触れる知識も増えますし、自分で考えて実装することで知識が定着しやすくなります。

 

まとめ

  1. 下層ページまで模写する(コンポーネント設計、綺麗なコードを書く)
  2. WordPress化する
  3. 業務と仮定し、クライアントの姿を想像する

長々と書きましたが、あくまでも僕の理想とする模写制作ですw

どんな方法にせよ、「そこからどんな知識が得られるのか?」が重要だと思っていますので、是非手を動かしてアウトプットしていただければいいな〜と思います。

 

【無料】完全未経験からのプログラミング独学方法まとめ【 Web制作】 こんな質問に答えたいと思います。 結論から言うと、 しっかり基礎をこなして、手を動かしていけばスキル...