【※この記事は2025年4月3日に更新されました】
Medi-UPでは、薬剤師のためのプログラミングスクール『メディスキル』のカリキュラムを紹介しています。
今回の記事では、カリキュラムの第7回『模写①』についてご紹介します。
少しでも興味がある方はご覧ください。
第7回『模写①』の概要
本講座でご紹介する「模写①」のカリキュラムは選択制となっており、必須ではありません。
しかしながら、副業で稼げるスキルを身につけたい方や、プログラミングスキルを本気で伸ばしたい方にとっては非常に重要な内容が詰まっています。
特に、「HTML/CSSの模写スキル」は、Web制作において基礎かつ実践的な力となるため、副業で収入を得たい方には必須の知識と言っても過言ではありません。
今回ご紹介するのは、「第7回 模写①」のカリキュラムです。
模写講座は内容が非常に濃いため、2回に分けてお届けしています。
この記事では前半の模写①について詳しく解説していきます。
第7回模写①のカリキュラムの概要は以下のようになっています。
- 模写とは
- 模写の手順とは
- 模写を始める前に
それぞれご説明します。
模写とは
まずは、「模写とは何か」についてご説明します。
模写とは、実在するWebサイトをお手本にして、そっくりなWebページを自分でプログラミングして再現する学習方法です。
HTMLやCSSなどを使って構造・デザインを一から再現することで、実践的なコーディング力が身につきます。
これまでのカリキュラムでは、ドットインストールやProgateを活用して、基本的なプログラミングの書き方を学んできました。
こうした学習では、お手本のコードをそのまま写す「写経」スタイルが中心でした。
一方、今回のカリキュラムでは、インプットした知識を実際にアウトプットするトレーニングにステップアップします。
模写は、数あるプログラミング学習法の中でも、最も実践的かつ効率的な方法のひとつです。
以下のようなメリットがあります：
・デザインの構造理解が深まる
・CSSやレイアウトの応用力が身につく
・実務に近い経験が積める
・コーディングの問題解決力がアップする
プログラミング初心者から一歩抜け出したい方や、副業・フリーランスを目指す方にとって非常に効果的な学習方法です。
模写の手順とは
模写のメリットや学習効果を理解したら、次は実際にどのようにWebサイトを模写するのか、その具体的な手順について解説します。
Webサイト模写の基本的な流れ（7ステップ）
模写は、以下のような流れで進めていきます：
模写するサイトを選ぶ
自分のレベルに合ったデザイン性の高いサイトを選びましょう。スクリーンショットを撮影
デザイン全体を把握しやすくするために、全体の画面をキャプチャします。画像を一括ダウンロード
Chrome拡張機能を使えば、サイト内の画像を効率よく取得できます。テキストをコピー＆ペースト
サイト内のテキストも再現するために、文章をコピーして使います。HTML・CSSを編集しながら再現
構造を考えながら、HTMLとCSSを使ってページを作っていきます。スマホ対応（レスポンシブデザイン）に調整
画面サイズに応じたレイアウト調整も忘れずに行います。答え合わせ・仕上げ
元のサイトと見比べて、ズレや抜けがないかを確認します。
模写作業を効率化するためには、Google Chromeの拡張機能を活用するのがおすすめです。
画像やカラーコードを一括で取得できたり、要素の構造を調べたりするツールを使うことで、模写のスピードと正確性が大幅にアップします。
模写を行う際には、いくつか注意すべきポイントがあります：
検証ツールの使いどころ：ただ使うだけでなく、目的を持って使いましょう。
模写の考え方：あくまで「学習目的」であることを意識し、自分で構造を理解しながら作ることが重要です。
著作権についての正しい理解：模写したサイトをポートフォリオやブログで公開する場合、著作権侵害にならないように注意が必要です。
特に著作権に関しては、知らずに違反してしまうケースもあるため、模写を行うすべての方に知っておいてほしい重要なポイントです。
模写を始める前に
模写カリキュラムを終えたら、次に取り組んでいただきたいのが復習・応用を兼ねた課題です。
実際にコードを書いて手を動かすことで、模写の理解をさらに深め、自分のスキルとして定着させることができます。
また、模写に初めて取り組む方や、効率よく学びたい方のために、模写の進め方がわかる参考動画をご用意しています。
この参考動画では、実際にどのような手順で模写を進めればよいのかを、初心者にもわかりやすく解説しています。
動画を事前に視聴しておくことで、模写の全体像がつかめ、作業をスムーズに進めることができます。
以上、メディスキルのカリキュラム第７回『模写①』についてご紹介しました。
この記事を読んで、『自分もプログラミングを学習したい』と思ったらぜひご連絡ください。
まとめ
いかがでしたでしょうか。
弊社ではさまざまな想いを持った方がフリーランス薬剤師を選択しております。
・自身のやりたいことを叶えるため
・将来独立したいため
・今の環境を変えたい
・今の職場に＋αの要素を取り入れたい
そういった考えの方の選択肢の手助けとなれるように「きょうりょく薬剤師」は運営を行っております。
気になる方は以下より詳細をご確認ください。
他のフリーランス薬剤師の働き方を知りたい方へ
弊社ではさまざまなフリーランス薬剤師の仕事体験談を記載しております。
他の方がどのように働いているか気になる方は以下より詳細をご確認ください。
