はじめに
生成AIの勢いはすごいですね！
いろんなWebサービスを簡単に作れる世の中になってしまって、これからウェブサイトを作れても何になるの？？
と、不安になっている方もいらっしゃるかと思います。
私もそうでした。。しかしながら、AIが苦手で、できていないことも沢山ございます！
特に、フロントエンドでWebデザインの領域については、クライアントの特性や課題が可視化できているかに依存しているおり、まだまだ人が作っていく意義があるのではと感じます。
私もwebサイト制作の初心者を代表して、地道でコツコツとしたWebサイトの勉強をしたいと思います。
模写コーディングとは
模写コーディングとは、既存のWebページを参考にして、そのページを自分でコーディングする訓練方法です。
これはWebデザインやコーディングの初心者にとって非常に有益であり、実際のプロジェクトでのスキルアップにも役立ちます。
ただし、後で紹介するディベロッパーツールでも、ソースコードを見れる範囲は限られているので、要点を押さえて効率的に取り組んでいく必要があります。
模写コーディングの目的
模写コーディングの主な目的は、Webデザインやコーディングのスキルを向上させることです。また、既存のWebページのコードを分析することで、最新の技術やデザインのトレンドを学ぶことも可能になります。
模写コーディングのルール
模写コーディングといっても、人によってルールが異なります。
私の場合は、
・HTML/CSSの知識はあり
・デザインセンス壊滅的
・アニメーションがあるようなデザイン性の高いウェブサイトのトレンドが押さえられていない。
上記のような課題を抱えています。
なので以下のように模写コーディングの目的を設定しました。
①いいな！真似したいと直感的に感じたWebサイトのトップページをfigmaで再現できるようにする。
→デザインカンプを作るスキル
→figmaを操るスキル
②html/cssで極力調べ学習をせずに実践し、自分の疑問の深度を調べる
・何も調べずに再現できるもの
・調べたら解決できるもの
・調べても解決できないもの → chatGPTで質問
③2時間以内figmaで再現し、2時間以内でコーディング完了できるようにする
※4時間とは、1人でウェブサイトを作った時に理想的な時給が再現できるから
上記はあくまで私の例ですので、みなさんもご自身の設定する目標別に活用してください！
模写コーディングに必要なツール
模写コーディングには以下のツールが必要です：
- テキストエディタ：コードを書くためのツール。例えば、VS CodeやSublime Textなど。
- ブラウザ：作成したWebページを表示するためのツール。Chrome, Firefox, Safariなどがあります。ブラウザの開発者ツールを利用すると、Webページの構造を分析したり、デバッグを行ったりすることが可能です。
- HTML/CSSの知識：模写コーディングを行うためには、Webページを構成するHTMLとCSSの基本的な知識が必要です。
まとめ
模写コーディングは、初心者がWebデザインやコーディングのスキルを身につけるための有効な方法です。既存のWebページを分析し、それを自分で再現することで、実際のプロジェクトでのスキルアップを図ることができます。必要なツールを揃え、ルールを理解した上で、模写コーディングに挑戦してみましょう。
コメント