01
プロの設計思想が身体に染み込みます
Apple.jpのHTMLを手で書くと、なぜこのclass名なのか、なぜこの順序なのかが見えてきます。設計の「型」は教科書では学べません。手を動かした時間だけが、あなたのコーディング体質を作ります。読んで分かった気になるのと、書いて分かるのは、まったく別物です。
第01回 / 模写コーディング
MIMICAPPLE
本家を、手で写しましょう。
コピペでは何も残りません。
Apple.jpのコードを1行ずつ、自分の手で書き写してください。
プロの設計思想が、指先から身体に染み込んでいきます。
これが、あなたの最初の実践です。
Scroll
WHY?
WHY
MIMIC?
コピペは、学びを止めてしまいます。自分の手で書きましょう。
02
コーディングの手が早くなります
模写はタイピングの反復練習でもあります。HTML構造を素早く組めるようになり、CSSプロパティを指が覚えていきます。最初は遅くて大丈夫です。100行書いた手は、1000行書いた後には別人の手になっています。スピードは後から必ずついてきます。
03
クライアントに説明できるようになります
なぜこのレイアウトが必要なのか。なぜこの余白なのか。プロのコードを写すと「設計意図」が読めるようになります。それは将来クライアントに『なぜこう作ったか』を説明できる力になります。コードが書けるだけではなく、語れるエンジニアを目指しましょう。
Section 03THE
THE
GOAL
Apple.jpのランディングページをまるごと再現します。
見た目だけではありません。構造を理解し、レスポンシブに動くところまで作りきりましょう。
apple.jp
What you'll learn
01セマンティックHTML
02Flexbox / Grid実践
03レスポンシブ設計
04画像最適化
05プロのコード設計の読み解き
Section 04
PREREQUISITES
Difficulty
★★★★★
中級
Estimated Time
8–15
時間
Required Skills
- →HTML/CSSの基本構造が書ける
- →VSCodeの基本操作ができる
- →Google ChromeのDevToolsが使える
Section 05HOW TO
HOW TO
BUILD
01
Time10分
Output素材フォルダ一式
02
VSCodeでフォルダ作成
任意の場所に作業フォルダを作り、ダウンロードした素材を配置します。index.htmlとstyle.cssを作成して、コーディングの準備を整えましょう。
Time10分
Outputプロジェクトフォルダ構成
03
動画を見ながら実装
解説動画を見ながら、一時停止しつつ自分の手でコードを書いていきましょう。コピペは禁止です。必ず自分でタイプしてください。
Time6〜12時間
Output完成したHTML/CSSファイル
04
Time15分
Outputスクリーンショット（PC + スマホ）
or
Section 06CSS or
CSS or
SCSS?
お好きな方で、どうぞ。2つの違いは、ほんのわずかです。
動画について
本講義の解説動画はSCSSで実装されています。 CSSで取り組む方は動画を参考にしつつ、 DOWNLOADSセクションから配布されるソースコードを 確認しながら進めてください。
同じボタンを書くと
CSS
.button { background-color: #0071e3; color: white; padding: 12px 24px; border-radius: 8px;} .button:hover { background-color: #0077ed;} .button .icon { margin-right: 8px;}SCSS
$primary: #0071e3; .button { background-color: $primary; color: white; padding: 12px 24px; border-radius: 8px; &:hover { background-color: lighten($primary, 5%); } .icon { margin-right: 8px; }}表示結果
この2つのコードは、どちらもまったく同じボタンを生成します。
SCSSは変数（$primary）、 ネスト（&:hover）、 関数（lighten()）が使えるので、コードが短く書けます。 ですが、最終的にコンパイルされるCSSはまったく同じ動きをします。
Conclusion
どちらで作成するか迷ったら、まずは標準CSSで模写してみましょう。
慣れてきたらSCSSに挑戦するのもおすすめです。
大切なのは、止まらず進み続けることです。
Section 07
DOWNLOADS
素材ファイルと完成版ソースコードをダウンロードできます。 パスワードは講義内でお伝えしています。
Section 08
USEFUL TOOLS
01
導入方法を見る ↗VSCodeでSVGプレビュー
SVG Previewerという拡張機能を入れると、VSCode内でSVGファイルをプレビューできます。模写時にアイコンの確認がスムーズになります。
02
導入方法を見る ↗LiveServer拡張機能
HTMLファイルを保存するたびにブラウザが自動リロードされます。コードを書く → 保存 → 確認のサイクルが格段に速くなります。VSCodeの拡張機能から「Live Server」で検索してインストールしてください。
03
使い方を見る ↗Chrome DevToolsで本家を観察
Apple.jpを開いて右クリック →「検証」でDevToolsが開きます。Elementsタブで構造を確認し、Stylesパネルで適用されているCSSを調べてみましょう。プロがどう書いているか、答えはそこにあります。
Section 09SELF
SELF
CHECK
提出前に以下をすべてチェックしてください。
進捗は自動で保存されます。
0/ 9
Section 10DON'T DO
DON'T DO
THIS.
✕
コードをコピペする
一見進んでいるように見えますが、身につきません。手を動かさなければ、ただの作業になってしまいます。
✕
動画を早送りで見る
プロの思考プロセスを見逃してしまいます。なぜそう書くのか、その理由が大切です。
✕
すぐに答えを見る
まずは30分、自力で悩んでみてください。悩んだ時間こそが実力になります。
✕
完璧を目指しすぎる
まず動くもの、次に美しいもの。80%の完成度で次に進む勇気を持ちましょう。
✕
1人で抱え込む
詰まったら、遠慮なく質問してください。聞くことは弱さではなく、成長の最短ルートです。
Section 11
TROUBLESHOOTING
Q.
画像が表示されない
A.
ファイルパスが正しいか確認してください。src属性のパスと実際のファイル配置が一致しているか、拡張子（.jpg / .png / .svg）が合っているかチェックしましょう。
Q.
レイアウトが崩れる
A.
Chrome DevToolsでElements → Box Modelを確認してみてください。marginとpaddingの値を本家と比較し、widthが100%を超えていないかも確認しましょう。
Q.
SVGが表示されない
A.
viewBox属性が正しく設定されているか確認してください。width/heightの指定が抜けていないか、fill属性の色指定も要チェックです。
Q.
LiveServerが動かない
A.
VSCodeの拡張機能タブで「Live Server」を検索し、再インストールを試してみてください。ポートが競合している場合はSettings → liveServer.settings.portで変更できます。
Q.
動画と画面が違って見える
A.
画面解像度やブラウザのズーム率の差異による場合がほとんどです。DevToolsのレスポンシブモードで解像度を指定して確認してみましょう。
Q.
どうしても分からない
A.
Discordで質問してください。質問時はスクリーンショットの添付を推奨します。「何をやろうとして」「何が起きて」「何を試したか」の3点を書くと、回答が早くなります。
Section 12
FAQ
A.
8〜15時間が目安です。個人差がありますので、焦らず取り組んでください。初めての方は多めに見積もっておきましょう。
A.
MDN Web Docsで用語を調べてみてください。CSSプロパティ名やHTML要素名で検索すると、詳しい解説が見つかります。
A.
まずはCSSで十分です。セクション「CSS OR SCSS?」をご参照ください。慣れてきたらSCSSに挑戦してみましょう。
A.
30分自力で悩んでから、最終手段として参照してください。答えを見ること自体が悪いのではなく、考える時間をスキップすることが問題です。
A.
ピクセルパーフェクトでなくてOKです。本家と80%くらい似ていれば合格です。大切なのは構造の理解と手を動かした経験です。
A.
NWA Coding Labで業種別28課題に挑戦していただきます。今回の模写で身につけた力が、そこで爆発的に活きてきます。
NEXT
Section 13NWA Coding Lab を見る→
NEXT STEP
Apple模写が終わったら…
NWA Coding Labで業種別28課題に挑戦しましょう。
模写で培った力を、実案件レベルの制作で発揮してください。