副業プログラミングの教科書

プロナビ

2025年2月15日 16:07

はじめに

どうも！かかしといるかです！
今回は副業プログラミングの教科書を受け取っていただいて、本当にありがとうございます！

熱がこもりすぎて膨大な情報量になってしまったのですが、ぜひ最初から読んでいただければと思います！

ということで、早速本題に入ります。

世は副業戦国時代

かかし・いるかのアカウントを見て、こうしてテキストを受け取ってるということは、何かしら副業や在宅ワークに興味がある、もしくは始めてる人だと思います！

本当に今って終身雇用も終わって、個人の力とかスキルでどんだけでも収入もそうだし、働き方を決めていける時代だからこそ、副業とか在宅ワークからスキルをつけるのは重要になってくる。

だから今の時点でこの教科書を受け取る行動力はバッチリ！

ってなると次のフェーズ。どんな副業・在宅ワークを通して、どういうスキルを身につけるか。

今って現状を変えるためとか、将来の不安をなくすため、自分のやりたいことをするために動いてると思うけど、ぶっちゃけ将来性とか今後オワコン化する副業を始めても意味がない笑

そんなことしてたら時間も労力も無駄にしちゃいます。

だから、どの副業をするかが重要になってきて、これはタイトルにもあるし、普段の発信でも散々言ってるので、分かってくれてると思うけど

プログラミングです🧑🏻‍💻

プログラミングしかないです笑
なんでかっていうと、理由は２つ！

将来性✖️お金

そもそも副業をやる目的を思い出して欲しくて、きっとこんな感じになると思う。

「今の仕事とか収入的に、将来が経済的な面で不安を感じてる」
「現状お金がなくて、やりたいことがやれずに我慢してる」
「今はいいけど、子供とか生まれた時に養える経済力がない」

ざっくり将来の不安と現状の悩み。もっというと結論”お金”
ぶっちゃけるとそこだよね。
これをどうにかしたくて副業っていう手段で収入を増やそうとしてるはず。

で、この２つの点を考えたときに解決できるのがプログラミングなんです。

プログラミングの将来性としては
経済産業省の出したデータで2030年にIT人材が約79万人不足すると言われていて、自分の身の回りを見ればわかると思うけど、ITを使った技術しかないです！

上の画像の通り！
パソコン、スマホ、Netflixなどなど

もう全てがITで成り立っている。だから、業界としての需要は計り知れないと言ってもいい。しかも最近は小学校の学校教育にもプログラミングが取り入れられてるし、大学受験の科目にもなるって話があります。

もうやらない理由がない！！
それぐらい将来性がある！

もちろん最初副業でやる時はプログラミングの中のWEB制作っていう会社とか店舗のホームページとかを作る仕事から始まるんだけど、そこから学習を進めていけば、いろんな世の中の技術を作っていけるようになります。

こういう部分で、まず将来仕事なくなるとか、お金的に不安っていう問題は解消される。

その上で、プログラミングのお金はどうなのか。

これはびっくりするかもしれないけど
慣れてきたら10万くらいの案件なら１週間とかで完成します笑

そもそもプログラミングって他の副業よりも圧倒的に案件単価が高くて、普通に1本のHPで30万くらいしてきます。企業で取ると100万以上も全然ある。

副業としてはなんでやらないんだろうって感じなんだけど、これがさっきの将来性にも繋がってきて、３つ紹介！

①需要と供給のミスマッチ！

需要は高いのに、できる人が少なすぎて供給が足りてない。
だから、価格が下がりにくい。

②挑戦する人が少ない！！

確かにSNS運用とか最近だとめっちゃ流行ってる副業だけど、これって普段からSNSを触って、自分でも見たりしてるから、直感的に何をどうすればいいかがイメージしやすい。だから、やる人も多いし、そのせいで競合増えすぎて、もう未経験から挑戦するのは困難な業界になってます。。。

自分がイメージできないことをやるって結構ハードル高いから、そこで参入障壁が高くなって、そもそもやろうとする人が全然いません。

もう一つ最後に重要なプログラミングを副業にする人が少ない理由が

③プログラミングの独学挫折率90％という事実

勘違いしてほしくないのが、「難しいからやめておこう」こう思うこと！
だめですよ〜笑

未経験からでも全然案件獲得して副業、フリーランスとして在宅で働くこともできます！実際いるかかかしがやってるサポートのプロナビ生にも、フリーランスとして独立してる人もいるし、50万の案件をやってる人もいます！
プロナビ生の案件獲得率もこの間調べたら93%あった😳

だから未経験から始めても、案件獲得までいける！ただどう学ぶかが非常に重要になってきて、そこを間違えると挫折してしまう。

ただこうして、

需要と供給のミスマッチ
挑戦する人が少ない
挫折率90%

これのおかげで起きるのが、
プログラミングをできる人が少なくなる

つまり、できる人が少ないと単価が上がる→だから案件単価が高くなる！

こういうフローで案件単価が高くて、副業としてお金の部分も他にないくらい優位性を持ってます。

この副業プログラミングの教科書を手にしてる人は、プログラミング自体に興味を持ってくれて、受け取っているはずです。

伝えたいのが、もうプログラミングしかないです！！

それ以外はやめてください笑
いるかもかれこれSNS運用代行、SNSアフィリ、動画編集、せどり、AIなどなどめっちゃやってきたけど、どれも稼げんかった。あと長期的じゃなかった。

なので、プログラミングを身につけましょう！

そして、その具体的な方法をすべて詰め込んだのが、このテキスト。もう本当にプログラミングを未経験から始めて、案件獲得、その先まで全部網羅的に作りました！

その文字数なんと9万文字越え！！

本当にやばいです。

ただ使いこなすのが難しいので、簡単にお伝えします。

このテキストの使い方

使い方としては、全部一気に読めるものではないので、自分のレベル感に合わせて、今自分が学習してる段階のところを、かいつまんで読むようにしてください１

だから本当にその名の通り教科書です笑

上手く使えば、これだけでも案件獲得できるような情報を包み隠さず書いてるので、今後の学習にぜひ役立ててください！

それでは、ここから本章に入っていきます！

STEP1　目的・目標設定

プログラミングを学び始める際、多くの人が何から手を付ければよいのか分からず、漠然とした状態でスタートすることがあります。しかし、明確な目的や目標を設定することは、学習を成功させるための第一歩であり、これを怠るとモチベーションの低下や挫折につながりやすくなります。STEP1では、なぜ目的・目標の設定が必要なのか、それによって得られる効果、そして具体的にどのように設定すればよいのかを詳しく解説していこうと思います。

なぜ目的・目標を設定する必要があるのか？

1. 方向性を明確にするため
プログラミングの学習は膨大な知識とスキルを要します。言語の選定、アルゴリズムの学習、フレームワークの習得など、多岐にわたるため、方向性を明確にしなければ途中で迷子になってしまいます。目的や目標を設定することで、どの分野にフォーカスすべきかが明確になり、学習が効率的になります。

2. モチベーションを維持するため
具体的な目標があると、達成への道筋が見えるため、学習に対するモチベーションを維持しやすくなります。一方で、目標がないと日々の努力が報われている実感が得られず、挫折しやすくなります。

3. 成果を測定するため
目標を設定していないと、自分がどれだけ成長したかを測る基準がありません。目標を達成することで、自信を深めたり、次の課題に進むための準備が整ったりします。

4. 学習の優先順位を決めるため
プログラミングの世界には無数のトピックが存在しますが、すべてを一度に学ぶことは不可能です。目的に基づいて学習内容を選ぶことで、時間と労力を効率的に使えます。

目的・目標を設定することによる効果

1. 学習効率の向上
目標が具体的であるほど、必要なリソースや学習ステップが明確になります。これにより、無駄な時間を減らし、効率よくスキルを習得できます。

2. 自己成長を実感できる
目標を達成することで自分の成長を実感できます。これにより次のステップへのモチベーションが生まれ、継続的な成長が促進されます。

3. 問題解決能力の向上
目標を設定し、それに向かって進む過程で、さまざまな課題や問題に直面します。これを解決することで、プログラミングスキルだけでなく、論理的思考力や問題解決能力も養われます。

4. 実践的な成果物が得られる
目標が具体的なプロジェクトに基づいている場合、学習の成果として実践的な成果物が得られます。例えば、ウェブサイトの構築やアプリの開発など、実際に役立つものを作れることは大きな達成感をもたらします。

目的・目標を具体的に設定する方法

1. SMARTの法則を活用する
目標設定において有効なフレームワークとして、SMARTの法則があります。これは以下の要素から成り立っています。

Specific（具体的であること） “プログラミングを学ぶ”では漠然としすぎているため、“JavaScriptでシンプルなウェブアプリを作る”のように具体化します。
Measurable（測定可能であること） 目標が測定可能であると進捗を確認しやすくなります。“HTMLとCSSの基礎を学ぶ”のように、達成基準を明確にします。
Achievable（達成可能であること） 自分のスキルレベルや時間を考慮して、無理のない範囲で目標を設定しましょう。
Relevant（関連性があること） 長期的な目的と一致していることが重要です。“機械学習を学びたい”という長期目標があるなら、まずPythonを学ぶのが適切です。
Time-bound（期限があること） 期限を設けることで行動を促進します。“1カ月以内にJavaScriptの基本を理解する”のように設定しましょう。

2. 自分の興味や長期的な目標を考慮する
プログラミングを学ぶ理由は人それぞれです。仕事で使いたいのか、趣味でプロジェクトを作りたいのか、それとも将来的にエンジニアとして活躍したいのか。これらの目的を明確にすることで、目標設定がより適切になります。

3. 小さな目標を段階的に設定する
いきなり大きな目標を設定するとプレッシャーになることがあります。まずは短期的な目標（例: 1週間でHTMLの基本を学ぶ）を設定し、それを達成したら次のステップに進むようにします。

4. 具体的なアクションプランを作る
目標を達成するために必要な行動をリストアップします。

例
- 毎日1時間、オンラインコースで学習する
- 週に1回、自分の進捗を記録する
- 簡単なプロジェクトを作成して実践する

5. 他人に共有する
目標を周囲に共有すると、責任感が生まれ、達成に向けて努力する意識が高まります。また、アドバイスをもらえることもあります。

具体例: 目標設定のプロセス

ステップ1: 長期的な目的を考える
・例: “ウェブアプリケーションを開発できるようになりたい”

ステップ2: 中期的な目標を設定する
・例: “3カ月以内にJavaScriptで動的なウェブページを作れるようになる”

ステップ3: 短期的な目標を設定する

例
- 1週目: HTMLとCSSの基本を学ぶ
- 2週目: JavaScriptの基礎構文を理解する
- 3週目: 簡単なDOM操作を学ぶ

ステップ4: アクションプランを作成する
・毎日30分オンラインチュートリアルを進める
・週末に学んだことを復習し、小さなプロジェクトを作る

結論

プログラミングを始める上で目的・目標を設定することは、学習の成功に直結する重要なステップです。目的を明確にすることで方向性が見え、目標を具体的に設定することでモチベーションを維持しながら効率的に学べます。さらに、適切な目標設定は自己成長を実感しやすくし、学習の楽しさを引き出します。

本稿で紹介した方法を参考に、あなた自身の目的・目標を設定し、行動に移してみましょう。それがプログラミング学習を成功に導く鍵となるはずです。

STEP2　購入パソコンスペック＋VScode(Visual Studio Code)

購入パソコンの必要スペック
Windowsパソコンの場合
CPU：corei5以上、もしくはそれと同等
RAM（メモリ）：８GB以上
ストレージ：256GB以上

MacBookの場合
※MacBookならどれでも条件を満たしてるのでなんでもOK！
M1チップ以上ならMacBook Airで問題なし！

VScode(Visual Studio Code)

パソコンの準備ができたら次はプログラミングのコードを打ち込むために必要な専用のテキストエディタというものをダウンロードする必要があります。

以下ではまずダウンロード方法について画像を用いながら詳しく説明していきます。

ダウンロード方法

ステップ1
まずはお使いの「Chrome」「Safari」などで「VScode」と検索します。
検索していただいた方はこちらのサイトをクリックしてください。
↓　　　↓　　　↓　　　↓

※出てこない方は下記のリンクを押していただいても構いません。

ステップ2
上記のリンクを開いていただくと以下のような画面が表示されると思います。

ステップ3
画像の「Download for macOS」を押していただくと次の画面になります。
↓　　　↓　　　↓　　　↓

ステップ4
こちらから自分のパソコンに合ったOSのものを選択していただいてダウンロードを選択！
※MacBookなら「Finder」、Windowsならファイルの中にアプリがダウンロードされています。

ダウンロードはこれで完了です！

上記の方法でアプリのダウンロードはできましたが
まだこれではアプリを立ち上げてもコードを入力することができません。
なので続いてはコードを入力できるようにするための手順を解説します！

ステップ1
まずはデスクトップ上に新しくファイルを作成します。

ステップ2
先ほど作ってもらったファイルをVScode上でドラッグ＆ドロップします。

新しくファイルを作成するとこのような画面が出てくると思いますが
この場合は「はい、作成者を信頼します」を選択してください。

そうすることでVScode内に作ったファイルが入ったかと思います。

ステップ3
このテキストの中にHTMLファイルとCSSファイルを作成する必要があります。
ファイルを作成するにはこちらのボタンから作成します。

HTMLのファイルを作りたい場合は
〇〇.html　一般的な名前「index.html」
CSSのファイルを作りたい場合は
〇〇.css　一般的な名前「style.css」
と入力するとファイルを作成することができます。
※〇〇のところはご自身が分かりやすい名前でも構いません。

以下のような画面になっていれば正しく作成することができています。
※index.htmlとstyle.cssの横にアイコンがあると思いますがこれが表示していない場合は正しく作れていないので注意してください。

STEP4
写真のフォルダは見にくくなるので以下の手順で作ってください！
まずは赤の部分を選択します。

そうするとテキストファイル内に新たにファイルを作成することができるのでここで画像専用のimgフォルダを作成します。

これで画像のフォルダは作成できるので使用したい画像はこちらのimgファイルに格納してきましょう。

拡張機能の追加

これでコードを入力することはできますがもっとエディタを使いやすくする機能があります。
そこで「拡張機能」という機能を使っていきます。

拡張機能というのは、VSCodeをもっと便利にするための追加アイテムのこと。
例えば、スマホにアプリを入れると、できることが増えますよね？📱
それと同じで、VSCodeにもいろんな拡張機能を入れると、プログラミングがもっと楽になります！🎮

ここからは拡張機能の追加方法について解説していきます。

まずは左下の「設定アイコン」を選択
↓
「拡張機能」
↓
検索項目で
「Japanese Language Pack for Visual Studio Code」と検索
Japanese Language Pack for Visual Studio Codeはエディタの英語表記を日本語に変更する拡張機能です。
日本人なら必須の拡張機能になりますので入れておいてください。

検索項目で
「Live Server」と検索
Live Serverはコードを書いてる画面の途中経過を確認するための拡張機能です。

使い方に関しては画面右下に「Go Live」とありますので
そこを選択していただくと途中の経過を確認できる優れた拡張機能です。

検索項目で
「Code Spell Checker」と検索
Code Spell Checkerは、辞書ファイルに存在しない単語に対して、VSCode上で波線の下線をつけて知らせてくれる拡張機能です。

他にも沢山の拡張機能は存在しますのでご自身であったらいいなと思うものを調べてぜひ使いやすくカスタマイズしてみてください！

STEP3　Chrome

続いてGoogle Chromeの拡張機能について説明していきます。
プログラミングをする際なぜChromeに拡張機能を追加した方がいいかというとブラウザの利便性を向上させたり、作業効率を上げたりできるためです。
その拡張機能をご紹介していきます。

1. Visual Inspector

Visual Inspectorは、Web制作やデザイン制作に役立つ機能が1つにまとめられた拡張機能です。

例えば、下記のようなことをこれ1つで行うことができます。

・要素間の距離の表示
・要素のサイズの表示
・一部分のみのキャプチャ
・フォントやカラーの確認
・画像の一括ダウンロード

2. CSS Pepper

CSS Pepperは、Webサイト内の要素をクリックするだけで、幅や高さ、padding、margin、font-family、色などを調べることができる拡張機能です。

Visual Inspectorと似ていますが、CSS Pepperの方が機能がシンプルで軽快に動作します。

3. HeadingsMap

Headings Mapは、HTMLのページ内のh1,h2,h3などの見出しの構成を確認することができる拡張機能です。

見出しはSEO対策にも大きく影響すると言われていて、ソースを目視で確認すると大変ですが、この拡張機能を使うと簡単に一覧にして表示することができます。

エラーチェッカーと合わせてファイル納品前など、Webサイト公開前の最終確認に使用するのがおすすめです。

4. ColorPick Eyedropper

ColorPick Eyedropperは、Webページの色を抽出できるカラーピッカーが使えるようになる拡張機能です。

Webページの色からカラーコードを抽出したり、Web上に掲載されている画像からも抽出することができます。

4. What Font

What Fontは、Webサイト上のテキストのフォントやサイズ、カラーコードなどを簡単に確認することができる拡張機能です。

ワンクリックで簡単に確認することができるので、気になるフォントを見つけたら、すぐにチェックしてしまいましょう。

6.WhatRuns

WhatRunsは、表示中のWebサイトに使われているツールやプラグイン、ライブラリ、フレームワークなどをチェックすることができる拡張機能です。

気になるWebサイトがどのようにして作られているのか、どういったツールが使われているのかチェックする時に役立ちます。

7.GetTabInfo

GetTabInfoは、開いているタブのURLやタイトル、短縮URLなどを一括で取得できる拡張機能です。

デザインの参考サイトなどを探している時に、開いているタグのURLを一括でコピーしたりできます。

8.Web Maker

Web Makerは、Chrome上でCodePenのように簡易的にHTML、CSS、JavaScriptを書いて表示を確認できる拡張機能です。

書いたコードは保存、共有、エクスポートなどが可能となっていて、記述中のコードをCodePenで開くこともできます。

STEP4　Progateの進め方

1.HTML＆CSS初級編
2.HTML＆CSS初級編　道場レッスン
3.HTML＆CSS中級編
4.HTML＆CSS初級編　道場レッスン
5.HTML＆CSS上級編
6.HTML＆CSS初級編　道場レッスン
※この順番で進めてください

ここまでできたら実際にProgateというアプリを使ってプログラミングの勉強をしていきます。
ただ、最初に言っておくと、Progateをいくら勉強しても実務で通用するプログラマーにはなれません。
ですが基礎を理解するには最高のプログラミング学習サービスになってます！

まず大前提Progateは携帯でもできますがそれはオススメしません。
⚠️パソコンがある人は必ずパソコンで勉強しましょう！

はじめに

完全未経験の人が途中で学習を挫折することなくプログラミング学習を続けていくには
「Progateから始める」以外選択肢はありません。
それくらい素晴らしいサービスです。
この事実をしっかり理解した上で仕事終わりや休みの日などの貴重な時間を無駄にしないためにもProgateの正しい方法を把握して学習に取り組みましょう！

まず最初に勉強しないといけないのは
「HTML＆CSS」という項目を選択します。
これがWeb制作のの一番最初に勉強する言語になります。
そもそもHTMLとCSSは別の言語になります。

HTMLは何ができるのか？
HTMLではよく本などでも本の表紙があり中は章題、本文など構成が分かれていると思います。
その構成をWeb上でもする必要がありサイトの骨組みや画像を差し込んだりして作るために存在する言語になります。

CSSは何ができるのか？
CSSはサイト上のレイアウトを変更するために使う言語になります。
文字1つとっても「大きさ」、「文字の色」、「画面のどこに配置するか」など細かいところを微調整するために存在する言語になっています。
これらを組み合わせることでサイトを作成することができます。

進め方のポイント

HTML＆CSSコースを選択するとその中でもカテゴリが初級、中級、上級に分かれています。
よくやりがちなのが全ての学習レッスンを終わらせてから道場レッスンですが実はもっと効率のいい順番があります。

進めていく順番として
1.「HTML＆CSS初級編」

2.「HTML＆CSS初級編　道場レッスン」

3.「HTML＆CSS中級編」

4.「HTML＆CSS中級編　道場レッスン」

5.「HTML＆CSS上級編」

6.「HTML＆CSS上級編　道場レッスン」

Progateの正しい勉強方法

1.暗記をしない
2.何周もしない
3.答えを見てもOK
4.不要な言語に手を出さない

1.暗記をしない
「コードをフルで暗記しなくていいの？」と思う方もいるかもしれません。
これはProgateに限らずプログラミングの世界で暗記が一切必要ないです。
なぜなら、「検索すればいくらでも答えが出てくるから」
重要なのは

そのコードを使って何をすることができるのか？
どういった時に使うのか？

この2つのポイントは重視して勉強しましょう。

2.何周もしない
Progateを完全にマスターしてもサイトは制作できません。

「スラスラ手が動かないからインプットが足りないんじゃないか」
「まだまだ理解できてない気がする」
「サイトを作れる自信がないから何回も復習しよう」

このような気持ちになって何度も何度も復習したくなる気持ちは分かります。ですがProgateはテスト勉強ではありません。
何十周したところで、実務で戦えるスキルは身につきません。
過去に一度でも経験しておけば分からない場面に直面した時
「そういえばこういうのあったな」と
過去の記憶を辿ってググることができます。
最初から100%理解する必要はないので50%くらい理解できたら次に進みましょう。
Progateのレベル上げもする必要はありません。

大事なのは
いかに効率よく基礎を理解して実践に活かせるかが重要なのでそこに注力してみてください！
勘違いしてほしくないのは進めることに夢中になって全く理解していないのは危険なのでそこには注意が必要です！

1周だと基礎理解に苦しむ方もいると思うので
最大でも2周までにしましょう！
3周目以降は、ただの自己満足です。

3.答えを見てもOK
「答えを見てもいいの？」と驚く方もいるかもしれませんが
これはテストではないのでカンニングOKです。
実際の現役エンジニアでも実務でコードを書く時に事前に暗記したコードをスラスラ書いてる訳ではありません。
昔勉強したことを遡りながらネットで検索し仕事を進めているので答えを見ることは決して悪いことではありません。

4.不要な言語に手を出さない
Progateをやっていると
「Rubyも勉強した方がいいのかな？」
「念のためにJavaも勉強しておこうかな？！」
こんな感じでいろんなプログラミング言語をコンプリートしたくなりますが今後使う予定がない言語は学ばなくてOKです！
現段階で自分がやりたいことに必要な言語をマスターすることが大切です！

これらを踏まえてProgateの勉強を頑張りましょう💪

STEP5　Progate学習レッスンの進め方

まずはSTEP4でもお話しした通り初級編の学習レッスン→道場レッスンの順で進めていきます。
まずはProgateの学習レッスンがどのような仕様なのかや使い方を解説します。

コースを選択すると実際にコードを打つ画面でこのような画面が出てきます。

左の欄が手順になります。
この手順に沿って上から順に進めていきましょう。
万が一分からなくなったらヒントをを確認して思い出しましょう。
それでも思い出せない、たが動かないそんな時はスライドを確認してもう一度インプットするのがオススメです！

途中からHTMLとCSSも記述してくださいとなりますがHTMLとCSSの書くファイルは別になります。
赤枠の所にどっちのファイルに記述しないといけないものか書いてあるので間違えないようにしましょう。

続いて真ん中は実際にコードを書く所になります。
ここにスライドで学習したことを踏まえて実践的に書いていきます。
上の方で記述するファイルの変更ができるのでここで変更してください。

次に右側の画面を解説していきます。
右の欄の上はプレビュー画面になっています。
これは今現在進行形で何が起こっているのかを確認しるためのものです。
下のお手本と同じになるように確認しながら進めましょう！

最後にお手本と同じように完成することができた時には画面中央の下の「できた」を選択すると答え合わせができるようになっています。

もし間違っていたとしてもどこが間違っているのか教えてくれるのでそれで確認するのもいいと思いますし答えを見るで間違いを確認するでもここはやりやすい方にお任せします。

答えを見るにするとちょっと違ったいい点があります。
それは自分の書いたコードと答えのコードを照合わせながら間違い探しができること。
「スペルミス」、「スペースの作り忘れ」、「改行のやり方」など細かいところまで修正できるので個人的には答えを見るの方がオススメです。

この容量で学習レッスンは進めましょう！

STEP6　Progate道場レッスンの進め方

道場レッスンは学習レッスンに比べて少し難易度が上がるので頑張りましょう！
学習レッスンではスライドを用いながら解説したのちに手を動かす作業です。それに比べて道場レッスンでは初級で勉強したことをスライド無しで実践をしないといけないのでいかに学習段階でインプットできてるかが問われます。

進め方としてある程度の進め方は学習レッスンと変わりはないです。
学習レッスンではCSSの場合だとpaddinngのpxなどの数値の表記がわかりやすくあったと思いますがそこの確認方法が少し違いうのでそこを解説していきます。

どうやって確認をするのか？
それは画面下にある赤枠のアイコンを押してください。

ここがこのレッスンの仕様書になっています。
このアイコンを押すことで今回の

「headerの背景色は何色なのか？」
「headerの文字色はない色なのか？」
「文字の感覚は何px開ける必要があるのか？」

などサイトを作成する上で大事な細かい部分を確認することができます。

この仕様書を参考にしながら道場レッスンを進めましょう。
おそらく最初からスラスラ書けることはないと思います。
ですがそれで自信を無くさずに手が進まないところはもう一度スライドに戻りインプットしなおす。
これを繰り返し行なっていくことが重要です。

STEP7　検証ツールの使い方

1.ページのHTMLを確認する
2.HTMLを編集する
3.ページのCSSを確認する
4.CSSを編集する
5.CSSを追加する
6.レスポンシブの確認

続いてここでは「Google Chrome」の検証ツール（デベロッパーモード）の使い方について説明していきます。
検証ツールとはWebページなどを作成する際に、ブラウザで表示しているページのHTMLやCSSを確認・編集することができる、開発者にとって便利なツールです。使いこなすことでかなり作業効率を上げることができるため、Webページを制作する人にとっては必須のツールとなってきています。

検証ツールは「Google Chrome」だけでなく、「Firefox」や「Safari」などの他のブラウザでも用意されていますが、今回は「Google Chrome」を使用しながら進めていきましょう。また、検証ツールは「開発者向けツール」や「要素の検証」などと呼ばれる場合もあります。

検証ツールとはWebページなどを作成する際に、ブラウザで表示しているページのHTMLやCSSを確認・編集することができる、開発者にとって便利なツールです。使いこなすことでかなり作業効率を上げることができるため、Webページを制作する人にとっては必須のツールとなっています。

必要なツール・知識
・Google Chrome
インストール方法については下記のリンクを参照してください。

・HTMLおよびCSSの基礎的な知識
※「MacBook」、「Windows」ともに同じように進めることができるのでご安心ください。

1.ページのHTMLを確認する

検証ツールは非常に高機能なツールで、開発者にとって便利な様々な機能が用意されています。今回は、その中でもWebページ制作でもっとも使用されている「HTML」および「CSS」を確認・編集することができる機能について学習していきましょう。

まずはブラウザで表示しているページのHTMLを確認する方法を見ていきましょう。「Google Chrome」で以下のURLのページにアクセスしてください。

今回はこのページを使用しながら検証ツールの使い方を学習していきます。
開いているページ上で右クリックをしてください（画面内なら場所はどこでも大丈夫です）以下の画像のようにメニューが表示されたら、一番下の「検証」を選択してください。

以下の画像のように、画面右側（または下側）からコードの画面がでてきたでしょうか？これが検証ツールです。

検証ツールの上半分の部分に注目してください。この部分には今見ているページのHTMLのコードが表示されています。

より詳しくHTMLを調べてみましょう。検証ツールの左上に表示されている、カーソルアイコン（下図参照）をクリックしてください。

一度クリックすると、以下の図のようにアイコンの色がピンクからグレーに変わったかと思います。

この状態で、サイト中央に表示されている「LEARN TO CODE」という文字の部分までカーソルを移動させてクリックしてください。

すると、検証ツール内のHTMLの1行の背景が青色になったかと思います。

<h1>...</h1>

この部分が、先ほどクリックした「LEARN TO CODE」という文字の部分のHTMLです。ただ、この状態ではタグの中の文章が隠れた状態で表示されてしまっています。<h1> というタグの左側に表示されている三角形のアイコンをクリックしてください。

以下の画像のように、隠れていた部分が表示され「LEARN TO CODE」という文字が表示されたかと思います。

試しに他の部分のHTMLも確認してみましょう。
もう一度検証ツール左上のカーソルアイコンをクリックしてから、今度は「新規登録はこちら」という緑色のボタンをクリックしてみてください。

以下のようなHTMLが表示されたでしょうか？

<a href="#" class="btn signup">新規登録はこちら</a>

このボタンは <a> タグで作成されていて、「btn」と「signup」という2つのクラスが付けられていることが確認できました。

2.HTMLを編集する

次は先ほど確認したHTMLを編集して、ページ内の文章などを変更してみましょう。
検証ツール左上のカーソルアイコンをクリックし、今度は「Progateはオンラインプログラミング学習サービスです。」という文章をクリックしてください。

検証ツールでは以下のような <p> タグ部分が青く表示されたかと思います。

<p>...</p>

この1行の上で右クリックをしてください。表示されたメニューの中から「Edit as HTML」という項目を選択してください。

上の画像のように、HTMLを編集するためのフォームが表示されたかと思います。まずは <p> タグの中の文章を編集してみましょう。「Progateはオンラインプログラミング学習サービスです。」という部分を消し、以下の文章を貼り付けてください。

Progate is a web service where you can learn programming online.

文章を貼り付けたら、「command（⌘）」キー（Windowsの方は「Ctrl」キー）を押しながら「Enter」キーを押します。すると、ページに表示されている文章が実際に変わったかと思います。

検証ツールでは文章だけでなく、HTMLのタグなども書き換えることが可能です。もう一度 <p> タグの上で右クリックをし「Edit as HTML」を選択して、編集画面を表示してください。今度は先頭の <p> と末尾の終了タグ </p> を、それぞれ <h2> と </h2> に書き換え、commandキー（Ctrlキー）とEnterキーを押してください。

今度は表示されている文章部分が <h2> タグに変わり、少し大きく表示されたかと思います。

なお、これまでに変更した内容は一時的に見た目を変えているだけであり、実際にインターネット上のこのWebページのHTMLが書き換わることはありません。そのため、ブラウザの左上に表示されている更新ボタンをクリックし、このページを再読み込みすることで元の状態に戻すことが可能です。

このように検証ツールを用いてHTMLを書き換えることで、Webページを制作する際にわざわざコードを書き換えなくても、簡単に見た目の変更を試してみることができます。

3. ページのCSSを確認する

HTMLの次は、WebページのCSSを確認する方法を学習していきましょう。
検証ツール左上のカーソルアイコンをクリックし、青色の「Facebookで登録」というボタンをクリックしてください。検証ツール内のHTMLの下、または右に表示されている「Styles」という箇所にCSSのコードが表示されているかと思います。

ここには今クリックしたボタンのCSSが表示されています。この要素には「btn」と「facebook」の2つのクラス名がついていますので、それぞれが別で表示されるようになっています。

.btn {
    padding: 8px 24px;
    color: white;
    display: inline-block;
    opacity: 0.8;
    border-radius: 4px;
    text-align: center;
}

.facebook {
    background-color: #3b5998;
    margin-right: 10px;
}

このようにすることで、Webページに表示されている各要素のCSSを確認することが可能です。

次に、今CSSを確認した場所の下、または右側に表示されている、オレンジ・黄・緑・青の四角形を見てください（以下の画像参照）。

この図は、今確認している要素の大きさや余白をまとめた図です。
内側の青い部分はその要素自体の幅と高さを表しています。上の画像では、幅が139.188px、高さが24pxということを表しています。
その周りの緑はpaddingの大きさを、黄色はborder、オレンジはmarginを表しています。上の画像では、paddingの上下が8px、左右が24px、borderは上下左右とも0、marginは右にだけ10pxある、ということが分かります。

このボタンはマウスを乗せる（ホバーする）ことで背景の青色が少し濃くなるようになっています。次はこのホバー時のCSSを確認する方法を学習してみましょう。

先ほど確認したCSSが表示されている箇所の右上あたりに「:hov」というグレーの文字が表示されていますので、この文字の部分をクリックしてみてください。

すると、以下の画像のように「Force element state」という選択欄がでてきたかと思います。これを用いることで、HTML要素の様々な状態でのCSSを確認することができます。

例えば「:active」にチェックをすることでその要素をクリックした時のCSSを、「:hover」にチェックをすることでマウスを乗せた時のCSSを確認することが可能です。
今回は「:hover」にチェックを入れてみてください。

すると、CSSが表示されている箇所に、以下のようなCSSが追加で表示されたかと思います。

.btn:hover {
    opacity: 1;
}

これより、この「btn」クラスはホバー時には「opacity（透過度）」の値が「1」に書き換わっていることが確認できました。

4. CSSを編集する

では、先ほど確認したCSSを編集してみましょう。まずは初期状態に戻すために一度ページを再度読み込み、検証ツールで「Facebookで登録」を選択してください。

今回は「btn」クラスの「border-radius」（角の丸さ）に関する値を編集してみましょう。検証ツールを用いることで、現在は「4px」という値になっていることが確認できるかと思います。

この「4px」という文字の部分をクリックしてください。以下の画像のように編集フォームが表示されましたか？

クリックすることで編集できるようになります。
この状態で「4px」という文字を消し、代わりに「20px」と入力して「Enter」キーを押してください。

表示されているボタンが、以下の画像のように角が丸くなったかと思います。

変更前

変更後

marginやpaddingなどの余白に関しては、先ほど紹介したオレンジや緑の図からも編集することができます。
オレンジ色のmarginを表している部分の右側の「10」という数字をダブルクリックし、代わりに「50」と入力してみてください。

正しく更新できれば、FacebookとTwitterのボタンの間の余白が広がったはずです。

実際にWebページを制作したことがある人は、「ここの余白は何pxがいいかな？」と試行錯誤したことがあるかと思います。検証ツールを使うことで、簡単にCSSの値を調整し、適切な値を判断することができます。

5. CSSを追加する

最後に、CSSを追加する方法を学習してみましょう。今回は「LEARN TO CODE」という文字の部分に背景色を付けてみます。
まずは今まで通り、検証ツール左上のアイコンをクリックして「LEARN TO CODE」という部分を選択してください。

検証ツール内の、先ほど使用した「:hov」というボタンの右側にプラスマーク「+」のアイコンが表示されているかと思います。そのアイコンをクリックしてみてください。

すると、以下のように「h1」に対するCSSを記述するための欄が追加されたかと思います。

この状態で、「h1 {」の後ろ辺りをクリックしてください。

すると、以下の画像のようにコロンとセミコロンだけの行が1行追加されたかと思います。

この状態で、background-color と入力し、「Enter」キーを押します。
さらにその後、 #02ccba と入力して再度「Enter」キーを押してください。
以下の画像のような表示に変更できましたか？

これで「LEARN TO CODE」という文字の部分に背景色がついたかと思います。

途中で誤って別の箇所をクリックしたり、違うキーを押したりするとうまくできない場合もあります。間違ってしまった場合には、落ち着いてもう一度「+」ボタンを押すところからやり直してみましょう。

あくまでこの内容はブラウザ上での変更になるので間違わないようにしてください。実際に変更したコードを出力して表示することは可能ですがここではややこしくなるので説明はしません。もし興味がある人はご自身で調べて見てください！

6.Capture full size screenshot
「Capture full size screenshot」を使うと、ウェブページ全体のスクリーンショットを取得できます。ここで「全体」というのは、画面に表示されている範囲だけでなく、スクロールしないと見えない部分も含む、ページ全体を1枚の画像として保存するという意味です。

通常のスクリーンショット機能では、画面に表示されている部分しか撮れませんが、この機能は縦長のウェブページや、隠れた部分も含めて全てをキャプチャできます。

やり方
画面上の点々が3つあるボタンを押します。

こここを押していただくと「Capture full size screenshot」が出てくるのでこのボタンを押すと画面全体のスクリーンショットを撮ることができます。

意外と簡単ですぐにできるし自分の作ったサイトが上手くできているのかなどの確認作業でも使えるのでぜひ使ってみてください。

6.レスポンシブの確認

検証ルールでレスポンシブを確認する方法は3種類あります。
どれも使いやすいので状況に合わせてどれを使った方がいいかで使い分けてください。
サイトを作る上でレスポンシブは重要なものになります。携帯の表示では上手くいってるけどPCの画面で見たらレイアウトがおかしなことになる。
上手くレスポンシブがかかっていないとサイトの見た目も悪くなるのでこの機能で確認などしてみてください。

1つ目の確認方法
これの確認の利点は携帯の機種やiPadの機種を選択することでその画面に自動で合わせてくれるところです。
表示して確認したいデバイスが決まっている時はこちらを使う方がいいかもしれません。

画面赤枠のところを押してください。

そうすると次のような画面が出てくるのであとは好きなデバイスを選択していただくとその画面幅で表示することができます。

「iPhone 14 Pro Max」を選択すると表示していた画面が以下の画像のように変更されます。

2つ目の確認方法
続いての確認方法は表示されている規格の中から選択する確認方法になります。
これは視覚的にどのくらいのサイズ感なのか分かりやすいのが特徴です。
画面の上部に線があるのでその線を選択していただくと表示が変わります。

ラインのところを選択するとそこの幅で画面の表示を変えることができます。

3つ目の確認方法
最後のこの確認方法が一番柔軟性が高くご自身の好きな画面サイズを設定することができます。その方法を説明します。
画面上部の赤枠の部分に数値を入力することができそのこ数字を変更していただくやり方になります。

入力の方法は数字の部分にカーソルを合してクリックしていただくと好きな数字を入力して変更することができます。
数字の枠の周りが光ったら入力することができます。

数値の左側がサイトの横幅を変更する数値
数値の右側がサイトの縦幅を変更する数値になっています。

検証ツールの使い方説明は以上です。検証ツールを用いて他のWebページを参考にしたり、自分のページを調整してみてください！

STEP8　模写コーディングとは？オススメサイト

ここまできたら本格的に模写コーディングに入っていきます。

模写コーディングとは？
既存のウェブサイトやアプリケーションのデザインや構造をそのまま真似して再現する練習方法のことです。言い換えると、実際に存在するプロダクトを参考にして、同じようなコードを書き、同じ見た目や機能を作るプロセスを指します。

たとえば、「シンプルなブログのページ」や「洗練された企業サイト」を見て、そのレイアウトや動きをどのように実現しているのかを探りながら、ゼロから自分の手で再現していく作業です。

なぜ模写をする必要があるのか？

模写コーディングをする目的は単に「真似すること」ではなく、プロが作った実際のプロダクトを通じて、基礎から応用まで幅広いスキルを効率よく学ぶためです。

1. 基礎技術を体得できる
模写をすることで、HTMLやCSS、JavaScriptといったフロントエンド技術の基本的な使い方を実践的に学ぶことができます。特に初心者にとって、教科書のサンプルコードだけでは分からない「実際の使い方」や「技術のつながり」を体感できます。これは模写でしか感じることができないのでいろんな応用のスキルを習得しましょう。

2. 構造や設計思想を学べる
ウェブサイトやアプリは、デザインの美しさだけでなく、使いやすさや効率を考慮して作られています。模写を通じて、「どのようにHTMLが構造化されているか」「CSSでどのようにデザインが実現されているか」など、実践的な設計思想を学ぶことができます。

3. 問題解決力が鍛えられる
模写を進めていく中で、必ず「うまく再現できない部分」が出てきます。そのたびに、自分で考えたり、調べたり、試行錯誤を繰り返すことで、問題解決力が磨かれます。このプロセス自体が、実際の現場で役立つスキルになります。

4. 手を動かすことで記憶に残る
プログラミングでは特に重要視しているのがアウトプットメインの勉強法です。テストでもテスト勉強だけして試験がないとどこの勉強が甘かったのか？自分が何を覚えれていないのか？など明確な課題は見えてこないと思います。そのため、実際に手を動かしてコードを書くアウトプットが重要です。模写はコードを書く量を増やし、自然と記憶に定着させる効果があります。

5. デザインとコーディングの一体感を理解できる
模写を行うことで、デザインを実際のコードに落とし込むプロセスを学ぶことができます。たとえば、「このボタンの影はどのようにCSSで実現するのか？」や、「この動きはJavaScriptでどのようにプログラムされているのか？」など、デザインとコーディングがどのように結びついているかを理解できます。

模写コーディングから得られる学び

模写コーディングを行うことで得られる学びは多岐にわたります。以下に具体例を挙げます。

1. 現場感覚の習得
実際に使われているサイトを模写することで、最新のトレンドや現場でよく使われる技術スタックを身につけることができます。例えば、レスポンシブデザイン（画面サイズに応じたデザインの調整）や、モダンなCSSフレームワークの活用方法などです。

2. アウトプットの経験
模写は、単なる練習ではなく「完成物」を作るプロセスです。完成したものは自分のポートフォリオにもなり、後々転職活動やプロジェクト提案に役立てることができます。

3. 細部への気づき
模写する中で、細かい部分に目を向けることが求められます。例えば、フォントのサイズや間隔、アニメーションの速さ、余白の取り方など、見過ごされがちなポイントを注意深く観察する習慣が身につきタイピングミスやコーディングの書き漏らしなども気づくことができます。

4. コーディングの引き出しが増える
模写を続けることで、さまざまなレイアウトや機能を実現するコードの書き方が引き出しとして蓄積されます。この引き出しは、自分が新しいサイトをゼロから作るときに大いに役立ちます。

模写コーディングを成功させるポイント

模写コーディングを効果的に行うためには、以下のポイントを意識するとよいでしょう。

段階を踏む 最初は簡単なサイト（たとえば、静的なランディングページなど）から始め、徐々に複雑なサイトや動きのあるものに挑戦すると良いです。
観察を深める ただ見た目を真似るのではなく、「なぜこのような構造になっているのか」を考えながら進めることが重要です。
不足しているスキルを補う 模写を進める中で、自分に足りない知識が明確になります。その都度、本やオンラインリソースで学びを深めることで成長につながります。
ツールを活用する ブラウザの開発者ツールを使って、実際のサイトのコードを確認しながら模写を進めることで、学びが深まります。

このようなことから模写はとても重要な学習段階になります！

実際にこれらを理解して模写に取り掛かろうとしている方もいるかと思います。なのでここでオススメしている模写サイトを紹介します！

それは「 Code jump」です。
サイトのリンクも貼っておきます。分からない方は下記のリンクから閲覧してみてください。

※特に登録などは不要で活用できます。

今でこそ僕もプログラミングの業務に携わっていますが過去勉強している時にものすごくお世話になったサイトです。
このサイトはレベル別に分かれていて自分のレベルに合った模写のサイトを選択することができ解説なども分かりやすく説明があるのでとても便利です。

ここからは実際にCodejumpの使い方について解説していこうと思います。
サイトを開いていただくとこのような画面があると思います。

この画面でレベルが書いてあるので今自分がどの言語を使うことができるかで模写のサイトを選択しましょう。
もし模写が初めての場合だと左上の自転車のサイトがオススメです。

実際にレベルを選択して開くとこのような画面になります。
ここの赤枠で囲っているところが模写をする上での重要なヒントやポイントなどもあるので何が見れるのかを一つづつ解説していきます。

コーディング練習
ここでは模写の練習方法であったりこのサイトの完成がどのようなレイアウトになっているのか。またPCで画面を表示した時とスマホで表示した時のサイトの違いなども確認することができます。
模写をする前に全体の構造がどういった感じになっているのかを事前に確認しておくことはとても重要です。

レイアウト構成
ここでは全体のレイアウト構成についてと各パーツのレイアウト構成が載っています。
具体的にどういったことかも画像を用いながら説明していきます。

まずは全体のレイアウトがあると言いましたがサイトにはもっと具体的に載っています。
この画像を確認すれば

「ページ全体は何のタグで括られているのか？」
「headerの部分はどこの部分なのか？」
「mainはどこで括っているのか？」
「mainの中にはどんな要素が入ってるのか？」
「mainはどういった名前で分けているのか？」

などこのサイトを模写する上でかなり重要になることを確認することもできますしもし仮に手が止まってしまってどういったコードを書いてくくればいいのか分からなくなってしまった。そんな時にこのページに戻って頭の中を整理するのもいいかと思います。

そしてこの画像に対しても丁寧に文字で解説もしてありますので画像も確認しつつ文字も読んでより自分自身の頭の中の解像度を上げていくのもいいかもしれません。

次に各パーツのレイアウト構成も解説してあります。
先ほどのものはレイアウトの構成なのでサイトの全体を把握するための解説が多いです。
しかし、サイトを作る時にはもう少し細かいところまでコーディングしていく必要があると思います。
例えば、headerで冒頭は括るのは分かるけどそのheaderの中がどのような構成になっているのか分からない。そんな時に最適な解説になっています。

画像を見ていただくと分かる通りheaderの中がどういったclassの分け方をしているのか。これを見れば一目でどういった構造に分かれているのか分かると思います。

これに付随してheaderのコーディングのヒントも書いてあります。

これはheaderのコーディングに対してのみの解説になります。
この部分の解説は今回の自転車の模写であれば[header],[div(#mainvisual)],[section(#about)],[section(#bicycle)],[footer]のように各部分に対してレイアウトの画像とコーディングのヒントがセットで解説してありますのでぜひ模写で躓いた時のヒントにしてもらえればと思います。

解説
この解説の部分では文字と画像のみになりますがサイトを完成させるための答えが載っています。
先ほどのレイアウト構成よりもより具体的に詳しく解説してあります。

どうやってコーディングしていかないといけないのか？
なぜそういった構成にしないといけないのか？
どういった理屈でそういったコーディングになるのか？

など各部分に対して細かく説明があります。
どうしても手が止まって他のヒントなどを見てもさっぱり理解ができない人などはちらの解説を見ることをオススメします。

ソースコード
これは名前の通り答えのコードが載っています。

・どうやったコードの書き方コーディングをしているのか？
・自分で書いたコードの配列が見にくい

などの問題も答えのソースコードを見ることで確認することができる優れものです。ですがこの答えは全てが載っているので極力見るのは最終手段にした方がいいと思います。
できそうなところは自力で頑張って綺麗なコードの書き方ができなくても自分の力で書いてみるということも力をつけるためにはとても重要なことです。このような点も含めて使ってみてください。

デモ
このデモは完成したサイトを今使っているデバイス上で確認できるものになっています。
これの利点でもあるポイントは実際の完成サイトを確認することができるということ。これの何がいいのか？
模写は完成しているものを見ながら完成サイトと同じようにコードを入力していき完成させる必要があります。
そのため完成のサイトを確認し例えばボタンをクリックすることができるようなものであったりクリックすることでサイトのどの部分に飛ぶことができるのかなども細かいところではありますが真似しないといけません。
その確認の作業もできるため実際に完成したサイトを使ってみることができる優れたものになります。

これらのいいところなどを使いながらこれからの模写に役立ててもらえたら嬉しいです！

模写コーディングの具体的な進め方の手順

ここまでは模写の重要性などをお話ししたのでやらないといけないということは伝わったかなと思います。
ですがまだ具体的にどのような手順で模写を進めていけばいいのか分からないと思います。
なのでこれら実際に模写をするにはどの手順で始めていけばいいのかを詳しく解説します。

使うサイトは上部で紹介した模写サイト（codejump）を活用して説明していきます。

1.模写するサイトを決める
まず初めは模写するサイトを決めていきます。
個人によってレベル感が違うと思うので自分に合った模写サイトを選択しましょう！
※初心者は動きのないサイトから選ぶようにしましょう！

2.デモサイトでサイトを触る
ここで何をするのかというと実際に完成したサイトを触ってボタンを押したらどんな動きをするのかなどサイトの確認作業も含めて触ります。
ここでもう一つしてほしいことがサイトの共通点を探すことです。
コーディング前にサイトの共通点を把握するだけで模写をするときにかなり楽にコーディングできるのでオススメです。

3.レイアウト全体構成を見る
本格的に模写に入っていくので全体のレイアウトを確認します。
ページの構成を的確に把握していくことが大事です！
部分ごとに細かいデザインまで確認することでサイト全体にイメージを掴むことができます。

4.サイトに必要な画像をダウンロード
サイトで使う画像などは模写の前にダウンロードしておきしょう。
ダウンロードのやり方はが模写するサイトを選択してページのした部分に
「画像をダウンロード」の文字があるのでそこをクリックしていただくとダウンロードが開始します。

5.VScodeでファイルを作成
必要な素材のダウンロードが終わったら模写をするために使うVScodeを立ち上げて模写をする準備をしていきます。
STEP2でも説明したとおりの手順で今回必要になるコーディングファイルを作成します。

6.コーディングスタート
これらの手順を踏まえて模写のコーディンをしていきましょう！

STEP9　部分的な模写コーディング

1.負担を減らす
2.基本的な構造を理解しやすい
3.エラーに気づきやすい
4.応用力を身につけやすい
5.学習の柔軟性が上がる

Progateを勉強したからといって急に模写をするとほぼ確実にできなくて挫折の原因になります。
そうならないためにまずは部分的な模写コーディングからしていくことをオススメします。
なぜ最初は全体の模写から入らずに部分的な模写から始めた方がいいのかを説明していきます。

1.負担を減らす
冒頭でお話ししたように初心者にとって、いきなり全体を模写するのは難しく、途中で挫折しがちです。
小さな部分に分けて取り組むことで、「できた！」という達成感を得やすく、モチベーションを保つことができるので挫折するリスクを軽減することができます。

2.基本的な構造を理解しやすい
プログラムは部分ごとに役割があるため、一部だけを集中して模写することで、その役割や仕組みをしっかり理解できます。
全体を一気に見ると混乱することも、部分的に見るとシンプルに感じられます。

3.エラーに気づきやすい
部分的に模写をすることで、エラーが発生したときに原因を特定しやすくなります。
全体を模写してエラーが出ると、どこが原因か分かりにくいですが、部分ならすぐに修正できます。

4.応用力を身につけやすい
小さな部分の模写を積み重ねることで、「このコードはこういうときに使える」という知識が増えます。
それを繋ぎ合わせて、やがて全体を作れるようになっていきます。

5.学習の柔軟性が高まる
部分的に模写すると、自分のペースで進められます。難しいところは飛ばして、得意な部分から始めることができるので、無理なく学習を続けられます。

初心者にとっては、「小さな成功体験を積み重ねること」が非常に大事です。部分的な模写を繰り返しながら、徐々に全体へと挑戦していく流れが、学習の効果を最大化するので最初は部分的な模写から初めていきましょう！

じゃあ実際にどうやって初めていけばいいのか？
STEP9ではその部分的な模写はどのように始めたらいいのかを説明していこうと思います。

今回はコードジャンプの一番簡単なサイトである自転車を例にして説明していきます。おそらく初めての方はこのサイトの模写から始めることになります。

サイトのリンクは以下から参照してください。

今回部分的な模写で説明するのは画面中央のところを解説します。

ソースコードはこちらになります。

<main>
      <div id="mainvisual">
        <img src="img/mainvisual.jpg" alt="テキストテキストテキスト">
      </div>

      <section id="about" class="wrapper">
        <h2 class="section-title">About</h2>
        <div class="content">
          <img src="img/about.jpg" alt="テキストテキストテキスト">
          <div class="text">
            <h3 class="content-title">KAKERU MIYAICHI</h3>
            <p>
              テキストテキストテキストテキストテキストテキストテキスト<br>
              テキストテキストテキストテキストテキストテキストテキスト<br>
              テキストテキストテキストテキストテキストテキストテキスト
            </p>
          </div>
        </div>
      </section>

1.全体の構造を分かりやすくするため

<main>タグ
ページの「主要な内容」を表しています。検索エンジンやスクリーンリーダーが「ここがこのページの重要な部分だ」と認識しやすくなります。

<section>タグ
コンテンツを「セクションごと」に分けています。それにより、HTMLコードを読む人も、ブラウザも、どの部分が何を表しているか理解しやすくなります。

初心者向けのポイント
HTMLでは、意味のあるタグを使うことで、読みやすさとSEO（検索エンジン最適化）が向上します。

2.IDやクラスを使うのは「スタイリング」や「機能追加」のため

id="mainvisual"やid="about"
・特定の要素を一意に識別するための名前です。
・CSSでデザインを変更したり、JavaScriptで動きを追加する際に役立ちます。
class="wrapper"やclass="section-title"
・複数の要素に同じスタイルや機能を適用したいときに使います。
・例えば、全ページで「セクションタイトル」の見た目を統一したい場合に便利です。

初心者向けのポイント
IDは「一つの特定の要素」に使い、クラスは「複数の要素」に使います。

3.画像やテキストには「意味を持たせる」必要がある

<img src="img/mainvisual.jpg" alt="テキストテキストテキスト">
・src属性は画像のファイルパスを指定します。
・alt属性は、画像が表示されないときに代わりに表示されるテキストです。さらに、視覚障害者用のスクリーンリーダーがこれを読み上げるので、アクセシビリティ（使いやすさ）の向上につながります。

初心者向けポイント
画像に「alt属性」をつけるのは、ユーザーの体験を良くするためです。

4.見出しタグで情報の「階層」を表す

<h2>と<h3>
・<h2>は「セクションのタイトル」、<h3>はその中の小見出しです。
・見出しタグを使うと、コンテンツの構造が明確になり、視覚的にも「重要な部分」を強調できます。

初心者向けポイント
見出しタグを使うことで、ページの内容が分かりやすくなり、SEOの効果も高まります。

5.テキストと画像を使い分ける

・<div class="text">と<img>で分かれているのは、デザインやレイアウトを柔軟に調整できるようにするためです。
・例えば、CSSを使って画像を左、テキストを右に配置するなど、自由にレイアウトが組めます。

初心者向けポイント
HTMLでは「コンテンツの構造」を決め、CSSで「見た目やレイアウト」を調整します。

まとめ

1.全体の構造を明確にする（<main>や<section>）
2.スタイリングや機能を簡単に追加する（idやclassの利用）
3.アクセシビリティを向上させる（alt属性など）
4.情報の階層を明確にする（見出しタグの使い方）
5.柔軟なデザインが可能になる（テキストと画像の分離）

これらを意識して書くと後でCSSやJavaScriptを使う時に非常に便利です！

続いてCSSについて解説していきます。
ソースコードはこちらです。

/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
  margin-bottom: 80px;
}
#mainvisual img {
  width: 100%;
  max-width: 1920px;
  height: 600px;
  object-fit: cover;
}

/*-------------------------------------------
About
-------------------------------------------*/
#about .content {
  display: flex;
  justify-content: center;
  align-items: center;
}
#about img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 30px;
}
#about .text {
  text-align: left;
}

1.#mainvisualセクションのCSSについて

#mainvisual {
  margin-bottom: 80px;
}

意味
#mainvisualのセクションに余白を設けています。
・セクションと次の要素（Aboutセクション）との間に十分なスペースを作り、見た目をすっきりさせています。
・この余白がないと、要素同士が詰まって見え、デザインが窮屈に感じられます。

#mainvisual img {
  width: 100%;
  max-width: 1920px;
  height: 600px;
  object-fit: cover;
}

width: 100%;
・画像の横幅を親要素（#mainvisual）の横幅に合わせています。
・これにより、画面サイズに応じて画像がリサイズされます。
max-width: 1920px;
・画像の横幅が1920pxを超えないように制限しています。
・フルHD解像度に対応しつつ、データサイズを適度に保ちます。
height: 600px;
・高さを固定し、一定のバランスを維持します。
・画像が極端に縦長または横長にならないよう調整します。
object-fit: cover;
・画像の縦横比を維持したまま、枠いっぱいに表示します。
・画像が切り取られる場合も、自然に収まるように見せる効果があります。

2. AboutセクションのCSSについて

#about .content {
  display: flex;
  justify-content: center;
  align-items: center;
}

display: flex;
・フレックスボックスを使って、画像とテキストを横並びに配置します。
・Flexboxは、レイアウトを簡単に整列できる便利なCSSプロパティです。
justify-content: center;
・画像とテキストを水平方向の中央に配置します。
align-items: center;
・画像とテキストを垂直方向の中央に揃えます。
・これにより、画像とテキストが高さの異なる要素でも見た目が均等になります。

#about img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 30px;
}

width: 100px; / height: 100px;
・画像を指定サイズにリサイズし、コンパクトに見せています。
・Aboutセクションでは「プロフィール写真」のような役割を果たすため、小さく円形に表示するのが一般的です。
border-radius: 50%;
・画像を円形にします。
・四角い画像に角を丸め、デザインを柔らかくする効果があります。
margin-right: 30px;
・画像とテキストの間に余白を設け、見やすさを向上させています。

#about .text {
  text-align: left;
}

text-align: left;
・テキストを左揃えにしています。
・日本語や英語の文章は左揃えが一般的で、自然に読めるレイアウトを実現しています。

このCSSの目的と効果

1.メインビジュアルセクション
・幅広いデバイスで見た目を崩さず、美しい画像表示を実現。
・フルHD画像を最大限活用し、トリミング効果でデザイン性を向上。
2.Aboutセクション
・フレックスボックスを使い、画像とテキストをバランス良く配置。
・プロフィール写真を円形にし、デザインの一貫性を高める。
・全体のスペースや配置を調整し、視認性を向上。

初心者向けのアドバイスとして、このCSSは以下のポイントを学ぶのに最適です

・フレックスボックスの基本的な使い方
・画像のリサイズやトリミング
・余白やデザイン調整の考え方

このように最初は全体をせずに好きなところを一部分切り抜いて初めてみてください！

STEP10　静的な模写コーディング①PHOTO BOOK

・全体のレイアウト構成
・各パーツのレイアウト構成
header
div(#mainvisual)
section(#index)
section(#detail)
footer

全体のレイアウト構成

解説
レイアウト構成は以下の通りです。

header
ロゴを囲みます。
main
コンテンツのメインエリア全体を囲みます。
div(#mainvisual)
メインビジュアルのエリアを囲みます。
section(#index)
Indexコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(#detail)
Detailコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
footer
コンテンツ下のfooter部分を囲みます。

各パーツのレイアウト構成

コーディングのヒント

ヘッダー全体をheaderタグで囲みます。
ロゴをh1タグで記述します。

div(#mainvisual)

コーディングのヒント

メインビジュアル全体をdivタグで囲み、マージンの設定を行います。

section(#index)

コーディングのヒント

エリア全体をsectionタグで囲み、背景を白に設定します。
中のコンテンツ部分をdivタグで囲み、横幅を600pxに設定して中央に配置します。

タイトル
h2タグで記述します。

Indexリスト
番号付きのリスト、ol、liタグを使用します。
ちなみに、順序性のない箇条書きの場合は、ul、liタグを使用します。

section(#detail)

コーディングのヒント

エリア全体をsectionタグで囲みます。
中のコンテンツ部分をdivタグで囲み、横幅を600pxに設定して中央に配置します。

タイトル
h2タグで記述します。

画像とテキストエリアの横並び
画像とテキストエリア全体をdivタグで囲み、Flexboxで横並びに配置します。

著者、出版社、発行年
dl、dt、ddタグを使用します。
dtタグとddタグは、Flexboxで横並びに配置します。

footer

コーディングのヒント

フッター全体をfooterタグで囲みます。
コピーライトをpタグで記述します。

STEP11　静的な模写コーディング②Mywork

・全体のレイアウト構成
・各パーツのレイアウト構成
header
div(#mainvisual)
section(#about)
section(#works)
section(#news)
section(#contact)
footer

全体レイアウトの構成
画像を差し込む

解説
1カラムのシンプルなレイアウトです。
レイアウト構成は下記の通りです。

header
ロゴとグローバルナビを囲みます。
main
コンテンツのメインエリア全体を囲みます。
div（#mainvisual）
メインビジュアルのエリアを囲みます。
section（#about）
Aboutコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#works）
Worksコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#news）
Newsコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#contact）
Contactコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
footer
コンテンツ下のfooter部分を囲みます。

各パーツのレイアウト構成
header

コーディングのヒント

header
ロゴとグローバルナビをFlexboxの両端揃えで横ならびに配置します。
ロゴ
h1タグで記述します。
グローバルナビ
navタグで囲んだ中に、ul、liタグを使用してCSSのFlexboxで横並びに配置します。

div(#mainvisual)

コーディングのヒント

・画像に高さを指定して高さを固定します。
・object-fitで、固定したエリアの中に画像を表示することができます。
・レスポンシブ時の画像の切り替えは、pictureタグで行います。

section(#about)

コーディングのヒント

エリア全体をsectionタグで囲みます。
タイトル
h2タグで記述します。
プロフィール
タイトル下のプロフィールはul、liのリストタグで記述します。
一番下のテキスト情報はpタグで記述します。

section(#works)

コーディングのヒント

エリア全体をsectionタグで囲みます。
タイトル
h2タグで記述します。
画像リスト
ul、liタグで記述を行い、flexboxの両端揃えで横並びに配置します。
flex-wrapで折り返しを指定します。
レスポンシブ時は、flex-directionで縦積みにします。

section(#news)

コーディングのヒント

エリア全体をsectionタグで囲みます。
タイトル
h2タグで記述します。
ニュース
ニュースの一覧部分はdl、dt、ddタグで記述します。
日付がdtタグ、ニュース内容がddタグです。
このように「説明したいワード」と「説明内容」とがペアになるようなリストは、dlタグが適しています。
dtタグとddタグはflexboxで横並びに配置します。

section(#contact)

コーディングのヒント

エリア全体をsectionタグで囲みます。
タイトル
h2タグで記述します。
フォーム
フォームのエリアはformタグで囲みます。入力フィールドやボタンなど、フォームに関する情報は全てこのformタグ内に記述します。
フォーム内はdlタグを用いて、ラベルをdtタグ、入力フィールドをddタグで記述します。dtタグとddタグは、flexboxで横並びに揃えます。
送信ボタンは、CSSの「:hover」で、マウスホバー時の色反転を実装します。

※フォームの入力欄の種類と使い方については、「フォームの入力欄の種類と使い方について」で詳しく解説しています。

footer

コーディングのヒント

フッター全体をfooterタグで囲みます。
コピーライトをpタグで記述します。

STEP12　静的な模写コーディング③web Entertainment design

・全体のレイアウト構成
・各パーツのレイアウト構成
header
div(#mainvisual)
section(#news)
section(#about)
section(#business)
section(#company)
footer

全体レイアウト
画像を差し込む

解説
レイアウトの構成は下記の通りです。

header
ロゴ、グローバルナビ、お問い合わせボタンを囲みます。
main
コンテンツのメインエリア全体を囲みます。
div（#mainvisual）
メインビジュアルのエリアを囲みます。
section（#news）
Newsコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#about）
Aboutコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#business）
Businessコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#company）
Companyコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
footer
コンテンツ下のfooter部分を囲みます。

各パーツのレイアウト構成
header

コーディングのヒント

header
ロゴとグローバルナビのグループとお問い合わせのボタンをFlexboxの両端揃えで横並びに配置します。
ロゴ
h1タグで記述します。
グローバルナビ
navタグで囲んだ中に、ul、liタグを使用してCSSのFlexboxで横並びに配置します。
お問い合わせボタン
「display: inline-block;」を設定してから、widthとheightでボタンの横幅と高さを設定します。
スマホ表示の場合だけ非表示にするため、レスポンシブのCSSでボタンのクラスに対して「display: none;」を設定します。

div(#mainvisual)

コーディングのヒント　

画像の高さを画面下にあわせるために、heightに100vhを指定するのですが、ヘッダーの高さの80px分だけはみ出てしまうためマイナスします。
高さを固定したまま画像を拡大縮小させるため、「object-fit: cover;」を使用します。

section(#news)

コーディングのヒント

エリア全体をsectionタグで囲みます。
タイトル
タイトル全体をh2タグで囲みます。
英語と日本語のタイトルをそれぞれspanタグで囲みフォントやマージンの設定を行います。縦に並べるためブロック化するのがポイントです。
下線は、疑似要素（after）を使用します。

※spanタグの使い方やdivタグとの使い分けについては、「divタグとspanタグの違いと使い分けについて」で詳しく解説しています。

ニュース
ニュースはul、liタグを使用してFlexboxで横並びに配置します。
間の罫線はborderで設定しますが、中の2つだけになるよう疑似クラスを使用して工夫します。
日付はtimeタグを使用してコーディングしてみましょう。

section(#about)

コーディングのヒント

エリア全体をsectionタグで囲み、画像とテキストエリアを横並びに配置します。
画像
横幅は画面幅にあわせて変動するようパーセントで設定します。
画像の高さを固定して、「object-fit: cover;」を設定します。
テキストエリア
タイトルは、NEWSと同じです。
横幅と左右のpaddingは画面幅にあわせて変動するようパーセントで設定します。

section(#business)

コーディングのヒント

エリア全体をsectionタグで囲みます。
タイトル
NEWSと同じです。
画像リスト
スマホのレイアウトを確認すると左のブロックから順に1列に並んでいるため、左右のブロックをそれぞれdivで囲み、Flexboxで横並びに配置します。
スマホ時は「flex-direction: column;」で、このブロックを縦に並べます。
このように変則的な画像の並び方をしている場合は、PCとスマホ両方のレイアウトを確認してからdivのグルーピングを考えると手戻りがなくなります。

section(#company)

コーディングのヒント

エリア全体をsectionタグで囲み、「position: relative;」を設定します。
positionプロパティの使い方については、「【CSS】positionプロパティの使い方について」で詳しく解説しています。
タイトル
NEWSと同じです。
テキストエリア
「position: absolute;」を設定して、左に配置します。
会社情報は、dl、dt、ddタグを使用します。
dt、ddタグはFlexboxで横並びに配置します。
画像
「position: absolute;」を設定して、右に配置します。
スマホ表示の際は、「position: static;」を設定して、relativeとabsoluteを解除します。

footer

コーディングのヒント

フッター全体をfooterタグで囲み、背景を白色に設定します。
内側をdivタグで囲み、ロゴと会社情報を両端揃えの横並びに配置します。
コピーライトをpタグで記述します。

STEP13 JavaScript・jQueryインプット

なぜjavascript・jQueryを学ぶのか

HTMLとCSSがWebページの「骨組み」と「見た目」を作る役割を持っているとしたら、JavaScriptはそのページに「動き」や「便利な機能」を加えるための大切な要素です。たとえば、ボタンを押すとアニメーションが動いたり、フォームに入力した内容がその場で確認されたり、ページをリロードしなくても新しい情報が表示されたりします。こういった機能があると、サイトやアプリがもっと使いやすく、楽しいものになりますよね。だから、JavaScriptを学ぶことで、より魅力的で価値のあるWebページを作れるようになるんです。

さらに、JavaScriptはWebサイトの表側（フロントエンド）だけでなく、Node.jsを使えばサーバー側（バックエンド）の開発や、モバイルアプリの開発にも活用できるんです。いろんな分野で使えるから、とっても頼もしいスキルなんですよね。しかも、たくさんの企業やプロジェクトで必要とされているので、JavaScriptを学ぶことは、Webエンジニアとしての道を広げるための大きな一歩になります。言ってしまえば、今では必須のスキルといってもいいくらいなんです！

JavaScriptは学習リソースが豊富で、初心者向けの教材やチュートリアルがめちゃめちゃ充実しています。Progateやドットインストール、Udemyといった学習プラットフォームを活用すれば、未経験者でも基礎を効率的に習得できちゃいます。

JavaScriptやjQueryを学ぶことは、他のフレームワークやライブラリを学ぶ際の基盤になります。
例えば、jQueryを学んだ後にReact,Vue.jsやAngularに挑戦したり、TypeScriptを導入してより安全なコードを書いたりすることができます。スキルを組み合わせることで、より高度な開発が可能になります。

JavaScriptとjQueryを学ぶことは、Webエンジニアとしてのスキルセットを広げ、キャリアの選択肢を広げるために非常に重要になります。その需要の高さや学びやすさ、応用範囲の広さから、初心者にとっても必須のスキルになっていくためここからはJavaScriptを効率的に学んでいくステップを紹介します。

1. JavaScriptの基本文法を学ぶ

まずは、ProgateのJavaScriptコースに取り組んでみましょう。初心者がよくつまずくポイントを、丁寧かつわかりやすく解説してくれるので、初めてJavaScriptを学ぶ方にも安心ですよ。

このコースを通じて、JavaScriptの基本的なコードの書き方や「変数」などの基礎知識をしっかり身につけていきましょう。

最初にやってみたいのは、実際にJavaScriptのコードを動かしてみることです。ブラウザの「コンソール」という画面を使って、文字を出力（表示）してみましょう。
「console.log("○○");」というJSのコードを書くと、丸括弧の中の○○という文字がコンソールに出力されます。

上のように書くと、"Hello World!" という文字がコンソールに表示されます。どうでしょう？しっかり出力できると、なんだかちょっとワクワクしますよね。これでJavaScriptの世界に、一歩踏み出せました！

次に、「変数」について学んでみましょう。
プログラミングの世界では、変数はとてもよく使われる仕組みです。イメージとしては、「値を入れておくための箱」があって、その箱に付いている名前が「変数名」です。箱の中身には文字や数字など、いろいろなものを入れることができます。

変数は「var 変数名 = 値」で定義します。プログラミングの「=」は「等しい」という意味ではなく、「右辺の値を左辺の変数に入れる」というイメージです。var は「これから変数を定義しますよ」という合図で、そのあとに変数名を書き、最後に代入したい値を記述します。

上の写真のイメージをコードで表すと、「var name = "john"」「var number = 24」というようなコードになります。

なぜ変数をプログラミングでは使われるのか
プログラムの中では、本当にたくさんの値が出てきます。その値を整理しながら使い、さらに値が変更になってもスムーズに対応できるようにするために、「変数」が役立つんです。変数には、大きく分けて次のメリットがあります。

変数にはこんなメリットがあります。

1. 同じ値を繰り返し使える
何度も同じデータを使いたいとき、変数に入れておけば簡単に呼び出せます。

2. 変更に対応しやすい
後から値を変更したい場合、変数の中身だけ変更すればOK。コード全体を書き直す必要が少なくなります。

3. 値の意味がわかりやすくなる
変数名をわかりやすい名前にしておけば、その中にどんな値が入っているのか一目で想像しやすいですよね。

たとえば、似たような文章やコードを何度も書くのは面倒ですが、変数を使っておけば「同じ値」が必要なところで、その変数を使い回せるため効率的にコーディングできます。また、後から値を修正したい場合にも、変数に代入している値を変えるだけで、プログラムの各所に反映されます。

変数練習問題
名前（string）と年齢（number）を変数に代入し、console.logを使って「私の名前は〇〇で、年齢は〇〇歳です。」と表示してください。

次は「if文」を使った条件分岐について学んでいきましょう。if文は、ある条件（条件式）が「真（true）」の場合に実行する処理を指定し、それ以外の場合には別の処理を行うことができる仕組みです。

if　(　条件式　){　条件が正しいときの処理　}　
　else　{　条件が間違っている時の処理　}

という構文を使って条件に応じた処理を行ないます。

例として、お酒の購入を例にします。日本では２０歳未満はお酒の購入ができませんよね。これを条件として考えると２０歳未満はお酒は買えないが２０歳以上はお酒の購入ができるという条件が成り立ちますよね。

この文章をここまでならった変数とif文を使って勉強をしていきましょう。

変数はわかりやすい名前にするためageとします。

var age = 20;
if (age >= 20) {
console.log("20歳以上です。お酒が購入できます。");} 
else {
console.log("20歳未満のため、お酒は購入できません。");}

というようなコードになります

今回の例では20を変数ageに代入しているため、出力結果は「20歳以上です。お酒が購入できます。」と出力されます。

if文のような条件分岐は、プログラミングの世界だけでなく、私たちの身近な生活の中にもあふれています。
• 自動販売機でジュースを買うとき
• 遊園地のチケット料金（大人、子ども、シニアなど）
• バスの乗車賃（区間や年齢で料金が変わる場合）

こうした仕組みの裏側でも「もし◯◯ならこうする、それ以外ならこうする」という条件分岐が使われているんですよ。普段の生活で「ここにも条件分岐があるかも！」と考えてみると、プログラミングをより身近に感じられると思います。

条件分岐（if文）に関する練習問題
変数scoreに任意のテストの点数（0～100）を代入し、以下の基準でメッセージを表示するプログラムを作ってください。
• 90点以上: 「素晴らしい！」
• 70点以上90点未満: 「良いです」
• 50点以上70点未満: 「頑張りましょう」
• 50点未満: 「もっと勉強が必要です」
if文の学習として、上記の問題を解いてみましょう。

最後は同じ処理を何度も行いたいときに便利な「繰り返し処理（ループ）」について学びます。ここでは for 文を取り上げましょう。（Progateの初級編では while 文も登場しますが、まずは for 文を使ってみるのがおすすめです）

for(変数の定義 ; 条件式 ; 変数の更新){
処理
}

上記がfor文の構文です。
for文では「変数の定義」「条件式」「変数の更新」の3つを括弧の中に書きます。括弧の中ではそれぞれをセミコロン（;）で区切ります。

朝食を準備するとき、パンが5枚あるとしましょう。1枚ずつパンにジャムを塗るイメージで、for 文を使ってみます。
変数　iを　パンの枚数として設定します

for (let i = 1; i <= 5; i++) {
console.log("パン " + i + " 枚目にジャムを塗りました。");}

このコードは、i という変数を1からスタートして、i <= 5 という条件式が true の間（＝ i が 5 以下の間）繰り返し処理を行い、1周するたびに i++ で i に 1 を足していきます。
その結果、「パン1枚目にジャムを塗りました。」「パン2枚目にジャムを塗りました。」……と、5枚分のメッセージが順番に表示されます。

実際の生活では、パンを数えながらジャムを塗る作業を手動で行いますが、プログラムならこうした繰り返し処理を自動化できるんです。ちょっと便利ですよね。

繰り返し処理（for文）に関する練習問題
配列["りんご", "バナナ", "みかん"]を用意し、各要素を1行ずつ表示するプログラムを書いてください。
for文の練習問題として、上記の問題を解いてみましょう。

ここまでで、JavaScriptの基礎文法である
1. 変数
2. 条件分岐（if文）
3. 繰り返し処理（for文）

を学習してきました。これらを組み合わせるだけでも、いろいろなプログラムを作ることができます。

次の段階では、プログラミングをより発展的に使いこなすために「オブジェクト指向」などの概念も学んでいきますよ。ここで紹介した基礎をしっかりと身につけておくと、次のステップがずっとわかりやすくなるので、ぜひ復習しながら進めてみてくださいね。

2. JavaScriptを使ったオブジェクト指向

ここからは、オブジェクト指向の中心となる「オブジェクト」「クラス」「インスタンス」という考え方を学んでいきましょう。少し難しく聞こえるかもしれませんが、イメージをつかめると「なるほど！」と思えるはずです。

オブジェクトは、配列のように複数のデータをまとめて管理する方法のひとつです。ただし、配列が「並べて管理」するのに対して、オブジェクトは『「プロパティ（名前）と値」をペアにして管理する』点が特徴です。

オブジェクトの書き方：
• {} でオブジェクトを囲む
• プロパティ名: 値の形で書く
• プロパティ同士は ,（コンマ）で区切る
例：{name:"ジャムパン",price:"450"}
例：{name:"john",job:"teacher"}

オブジェクトの作成：let person = { name: "John", job: "teacher" }; という形でオブジェクトを作成し、プロパティ（データ）を持たせます。

プロパティへのアクセス：person.name,person.jobという形で
プロパティへアクセスします。

オブジェクトには「機能」も持たせられます。これをメソッドと呼びます。たとえば、「挨拶をする」という動作を person オブジェクトに加えると、こんなイメージです。

let person = {
  name: "John",
  job: "teacher",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

person.greet(); // "Hello, John" と表示される

オブジェクトを使うことで、データと処理をひとつのまとまりとして扱う感覚を掴んでいきましょう。

オブジェクトに関する練習問題
. 自分の名前、年齢、趣味をプロパティに持つオブジェクトを作成し、それぞれのプロパティの値をconsole.logで表示してください。
オブジェクトの練習問題として上記を解いてみましょう。

オブジェクトを使ってオブジェクト指向の中心的な概念である「クラス」と「インスタンス」を学びます。
オブジェクト指向のポイントは、このオブジェクトをより効率的かつ再利用しやすい形にするために「クラス」と「インスタンス」を使うところにあります。

クラスとは？
クラスは「オブジェクトの設計図」のようなものです。

クラスはオブジェクトの「設計図」です。
たとえば「人間」というクラスを考えると、以下のような情報を持っていそうですよね。
• プロパティ（属性）: 名前や年齢など、人間が持つ情報
• メソッド（機能）: 「挨拶をする」「自己紹介をする」など、人間が行う動作

クラスの定義:

class Person { 
constructor(name, age) { this.name = name; this.age = age; } 
greet() { 
console.log("Hello, " + this.name); }
 }

• class Person：人間を表すクラスの定義。
• constructor(name, age)：新しい人間（インスタンス）を作るときに、名前と年齢を設定する部分。
• this.name と this.age：それぞれの人間に固有の名前と年齢を保持します。
• greet()：その人が「Hello, my name is…」と言う挨拶の機能を持っています。

インスタンスとは？
インスタンスは「設計図（クラス）」から作られる、実際に使えるオブジェクトのことです。

例えば、「人間」という設計図（クラス）から、次のような具体的な人を作ります：
• John（名前：John、年齢：30歳）
• Alice（名前：Alice、年齢：25歳）
これを実際にコードに書くと下記のようになります。

// Personクラスを使って新しいインスタンスを作る
let john = new Person("John", 30);
let alice = new Person("Alice", 25);

• new Person("John", 30) は「John」という人間を作成しています。
• john や alice はそれぞれ別々のインスタンス（実際のオブジェクト）です。

インスタンスメソッドの呼び出し
クラスに定義されたメソッドは、作成したインスタンスごとに動作します。

// Johnが挨拶する
john.greet(); 
出力: Hello, my name is John

// Aliceが挨拶する
alice.greet(); 
出力: Hello, my name is Alice

• john.greet() を呼び出すと、「John」という名前が使われます。
• alice.greet() を呼び出すと、「Alice」という名前が使われます。
• 同じgreet()というメソッドでも、インスタンスごとに異なる結果が出ます。

どうしてクラスとインスタンスを使うの？

1. 効率的な管理
似たようなオブジェクトをたくさん作る必要がある場合、一から手動で書くよりクラスを使ったほうが圧倒的にスムーズです。

2. コードの再利用
一度クラスを作っておけば、何度でも同じ設計図を使って新しいインスタンスを作れます。

3. 柔軟性
インスタンスごとに違う名前や年齢を持たせたり、メソッドの挙動を変えたりも簡単にできます。

イメージで理解する

ここまで少し難しかったかもしれませんが、クラスとインスタンスを使った、オブジェクト指向の中心的な考え方を勉強してきました。
まだうまく理解できてない人もいると思うので、イメージをして理解しましょう。
クラスとインスタンスを現実世界の例に置き換えると、次のように考えられます：

• クラス：クッキーの型抜き（設計図）
型抜きの形状が「クラス」にあたります。
（例：丸型、星型、ハート型）

• インスタンス：型抜きから作ったクッキー（実体）
型抜きから実際に作ったクッキーが「インスタンス」です。
（例：丸型のクッキー1枚、星型のクッキー2枚）

クッキーの型抜きを一度作れば、何度でも同じ形のクッキーを作れるように、クラスを使えば効率的にオブジェクトを作成できます。

クラスとインスタンスに関する練習問題
「車」を表すクラスを作成し、名前（例: トヨタ）、色（例: 赤）をプロパティとして持たせてください。また、「走る」メソッドを追加し、console.logで「[名前]が走っています」と表示するようにしてください。
• このクラスを使って「トヨタの赤い車」と「ホンダの青い車」の2つのインスタンスを作り、それぞれの「走る」メソッドを実行してください。

ヒント
• 車を表すクラスの定義。
• 新しい車（インスタンス）を作るときに、名前と色を設定する部分。
• それぞれの車に固有の名前と色を保持します。
• その車が「[名前]が走っています」と言う機能を持っています。
上記のヒントを参考に、クラス、インスタンスに関しての練習問題を解いてみましょう。

3. jQueryの基礎を学ぼう

ここまでで、JavaScriptの基礎をひと通り学習してきましたね。次のステップとして、Progateの「jQueryコース」を活用しながら、jQueryの基本的な使い方を押さえていきましょう。

jQueryを使うと、HTML要素の操作やアニメーション、イベント処理などがより簡単なコードで実現できるようになりますよ。

jQueryとは？

1. 簡単な書き方
JavaScriptで複雑になる処理を、短いコードで書けるようになります。たとえば、HTMLの要素を探して操作する「DOM操作」や、アニメーション、イベント処理などがスッキリ実装できます。
2. クロスブラウザ対応
古いブラウザでも動くように作られているので、ブラウザの互換性で困りにくくなります。
3. 豊富な機能
DOM操作、アニメーション、イベント処理、Ajax通信など、Webサイトを動的にするための機能がひと通り揃っています。

とはいえ、最近はブラウザの機能向上やReactやVue.jsなどのモダンフレームワークの普及により、jQueryの使用は減少傾向です。でも、シンプルなサイトや既存プロジェクトの改修など、jQueryがあると楽な場面もまだまだあります。

ここでは、「ライブラリ」に慣れるための第一歩として、そして簡単に動きのあるWebサイトを実装するための手段として、jQueryの基礎を学んでおくのがおすすめです。

jQueryの書き方

jQueryで操作を行うときは、主に次の2ステップで進めます。
1. jQueryオブジェクトの作成 : $('セレクタ')
2. 作成したjQueryオブジェクトにメソッドを適用 : .メソッド(引数);

セレクタとメソッド
• セレクタ: どのHTML要素に対して処理を行うかを選択する仕組み
• メソッド: セレクタで指定した要素に対して「どういう操作をするか」を指示する機能

セレクタはCSSのセレクタと同じ書き方なので、CSSの知識があれば直感的に使えます。

${'h1'}.hide();

このコードはHTMLのh1タグをhidden(要素はあるけど見えない状態)に変更するというセレクタになっています。

イベントとは？

JavaScriptやjQueryでは、ユーザーが行うさまざまな操作（クリックやマウスホバー、入力など）を「イベント」として扱います。イベントが起こったタイミングで、あらかじめ指定した処理を実行できるので、とても便利です。

$('セレクタ').イベント名(function(){
イベント発生時に実行する処理
});

イベントの構文は上記の通りです。

clickイベント

clickイベントを用いると、「セレクタがクリックされた時に処理をする」ことができます。
例えば、ボタンをクリックしたときに関連する文章を表示する、といったイベントを設定できます。

HTML(index.html)

<button id="fadein-text">テキストを表示</button>
<p id="text">ボタンクリックされるとテキストが表示されます</p>

jQuery（main.js）

$('#fadein-text').click(function()){
$('#text').fadein();
});

これはボタンをクリックすると#textがフェードインアニメーションで出現するというコードになります。

このクリックイベントと先ほどjavascriptでならったif文の条件分岐を組み合わせるとアコーディオンアニメーションの実装ができるようになります。

faq-list-itemがクリックされたときに、answerクラスがopenクラスを持っているかどうかをif文で判定し、持っているなら.openクラスを外し、.answerクラスを隠しますし、もし.openがついていないなら、.openクラスをつけて、.answerを表示するという仕組み（プログラム）を作り、cssでアニメーションをつけていきます。

実際にコードに書いてみましょう

HTML（index.html）

<div class="faq-list">
      <h3 class="faq-list-item">Question 1</h3>
      <div class="answer">This is the answer to question 1.</div>
</div>

jQuery(main.js)

$(document).ready(function () {
  $('.faq-list-item').on('click', function () {
    const answer = $(this).next('.answer');
    if (answer.hasClass('open')) {
      answer.removeClass('open');
    } else {
      answer.addClass('open');
    }
  });
});

CSS（style.css）

.answer {
  display: none;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  max-height: 0;
  opacity: 0;
}

.answer.open {
  display: block;
  max-height: 100px; /* 必要に応じて調整 */
  opacity: 1;
}

軽く説明を加えます

  $('.faq-list-item').on('click', function () {

.faq-list-itemクラスを持つ要素にクリックイベントを設定します。
このイベントが発生したときに、内部の関数が実行されます。

 if (answer.hasClass('open')) {
      answer.removeClass('open');
    } else {
      answer.addClass('open');
    }

もしanswerがopenクラスを持っていたらopenクラスを外しますし、そうじゃなかったら（open）クラスを持っていなかったら、openを付け加えます.

.answer{
  display:none
}

.answer .open{
  display:block;
}

CSSの方で、元々.openクラスがついていない時は隠しておいて（display:none）、.openがついたときには表示する（display:block）ようにしています。

練習問題
クリックイベントを利用してハンバーガーメニューを作成しよう。
.hamburgarをクリックしたときに、.openがついているか確認し、.openがついていればspanタグを動かし、✖️を作り、.openがついていないときは ≡ にしましょう

ここまで Progate を活用して、JavaScript・jQuery の基本から応用までをざっと学んできました。今回のアコーディオン機能のように、ユーザーの操作に合わせてページの見た目や要素の状態を切り替えることが、動きのあるWeb制作の醍醐味です。
• JavaScriptで基礎文法を学ぶ → jQueryで手軽に要素を操作する
• Webページに動的な仕掛けを取り入れることで、使いやすくて楽しいサイトを作れます。

今後は、今回のような小さなサンプルをたくさん試しつつ、自分の作りたいWebアプリやサイトのアイデアに応用してみてくださいね。需要の高い「動的なWeb制作」は、学べば学ぶほど奥が深い分野です。引き続き、ぜひ楽しみながら学習を進めていきましょう！

STEP14　検証ツールの使い方２

前半でも検証ツールの使い方が出てきましたが、JavaScript・jQueryのためにより応用的な使い方を実践していきましょう。

1. デベロッパーツールを開く

軽くおさらいですがまずはデベロッパーツールを開いていきましょう。
1. 右クリック→メニューを利用
任意のウェブページ上で右クリックし、「検証」または「Inspect」を選択します。
これにより、直接Elementsタブが開き、ページのDOM（Document Object Model）を確認できます。
2. キーボードショートカットを利用
• Windows/Linux: Ctrl + Shift + I または F12
• Mac: Command + Option + I
この方法でも素早くツールを開くことができます。
3. ブラウザメニューから開く
ブラウザの「設定」や「ツール」メニューから「開発者ツール」や「デベロッパーツール」を選択します。

デベロッパーツールの基本構成

デベロッパーツールを開くと、いくつかのタブが表示されます。それぞれのタブには異なる目的がありますが、主に次のような用途に分かれます：
• Elements: ページのHTMLやCSSの構造を確認。
• Console: JavaScriptのエラーメッセージやログを確認。
• Sources: JavaScriptコードを読み込み、デバッグ。
• Network: ネットワークリクエストやレスポンスの監視。
• Performance: ページのパフォーマンスを分析。
• Application: Cookieやローカルストレージ、キャッシュの確認。

デベロッパーツールは、ウェブ開発者がコードの問題を迅速に発見し、修正するための強力な手段です。初めて使う場合は、ElementsとConsoleから始めると良いでしょう。これらは、DOMやCSS、JavaScriptのエラーを直感的に確認できるため、初心者にも扱いやすい便利な機能です。

2.DOMの検証（Elementsタブ）

DOMとは？

DOM（Document Object Model）は、ウェブページのHTML構造をプログラムで操作できるようにしたオブジェクト表現です。ページ内の要素（タグ、属性、テキストなど）を階層的に表し、動的な操作を可能にします。

Elementsタブの使い方

HTML構造の確認
Elementsタブでは、現在表示されているウェブページのHTMLコードがツリー状に表示されます。各要素をクリックすると、その内容や属性が右側のペインに表示されます。

CSSの確認と編集
ページ内のスタイルは、HTMLとCSSが組み合わさって定義されています。特定の要素を選択すると、その要素に適用されているCSSが右側にリストアップされます。値を変更すると即座に反映されるため、デザイン調整に役立ちます。

要素のハイライト
ページ内の特定の部分を右クリックし、「検証」を選択すると、その部分に対応するHTML要素が自動的にハイライトされます。これにより、どのHTMLがどの部分を制御しているのかを直感的に理解できます。

属性の編集
各HTMLタグの属性（例えばclassやid）を直接編集できます。属性を追加・削除することで、スタイルやスクリプトの動作をテストできます。

実用例

• スタイルの調整: ページのデザインを修正する際に、実際の影響を即座に確認。
• 構造の調査: 特定の要素がどのCSSルールでスタイル付けされているかを把握。
• デバッグ: 不具合が発生している要素を特定し、原因を追跡。

ここまでは前半のおさらいになります。
ここからが応用的なデベロッパーツールの使い方です。

3. JavaScriptの検証（Consoleタブ）

Consoleタブは、JavaScriptのエラーやログを確認したり、コードを直接実行したりするための強力なツールです。ウェブページの動作確認やデバッグにおいて最も使用頻度が高い機能の一つであり、開発者が問題の原因を素早く特定し、解決するのに役立ちます。以下にConsoleタブの主な機能と実用例を詳しく説明します。

主な機能

1. エラーの確認

Consoleタブを開くと、ウェブページで発生しているJavaScriptエラーが赤いテキストで表示されます。たとえば、関数が正しく定義されていない場合や、サーバーから期待するレスポンスが得られない場合などにエラーが発生します。このエラーは、詳細なメッセージと共に、どのファイルの何行目で問題が起きたのかを表示します。エラー内容をクリックすると、該当するコードの行に直接ジャンプできるため、素早く問題箇所を特定できます。

2. ログの確認

Consoleタブでは、開発者がコード内でconsole.log()を使用して出力した情報が確認できます。console.log()は、変数の値や関数の動作を確認するために非常に便利です。特に、関数が期待通りに動作しているかどうかや、データが正しく渡されているかを追跡する際に役立ちます。また、console.error()やconsole.warn()を使用すれば、エラーや警告を色分けして表示することも可能です。

console.log("こんにちは)

実際にコードを打って実施してみると

このようにデベロッパーツール上に出力されているのが確認できます。

3. コードの実行

Consoleタブでは、JavaScriptコードを直接入力して実行できます。たとえば、document.querySelector()を使用して特定の要素を取得したり、element.style.color = 'red'のようにスタイルを変更したりする操作が可能です。このリアルタイムな実行機能により、コードのテストや検証が簡単に行えます。また、グローバルスコープの変数や関数にアクセスできるため、ページの状態を詳細に調査できます。
下の写真では簡単な計算式を直接Consoleタブで実装しています。

実用例

変数の確認

開発中に、関数や処理の途中で変数の値を確認したい場合に、console.log()を利用します。たとえば、ループ処理の中でカウンタ変数が正しくインクリメントされているかや、条件分岐の結果が期待通りかを調べることができます。

リアルタイム編集

ページの動作を確認しながらJavaScriptコードを調整することも可能です。たとえば、ページの特定の要素を非表示にしたり、色やサイズを変更したりといった操作をコンソール上で行い、その結果を即座に確認できます。

APIレスポンスの確認

fetchやaxiosを使用してサーバーからデータを取得する場合、そのレスポンスをConsoleタブで確認することで、データが正しく取得できているかを確認できます。例えば、

fetch('https://api.example.com/data').then(response => response.json())
.then(data => console.log(data));

のようなコードを使用して、APIから返されたデータをその場でチェックすることができます。

Consoleタブの利便性

Consoleタブは、初心者から上級者まで幅広いレベルの開発者にとって欠かせないツールです。エラーの特定やデータの確認だけでなく、コードの実験場としても活用できます。ブラウザ上でリアルタイムにページの動作を確認できるため、開発効率が大幅に向上します。まずは、console.log()や簡単なJavaScriptコードの実行から始め、徐々にエラー解析やデバッグの機能に慣れていくと良いでしょう。

4. ネットワークの確認（Networkタブ）

Networkタブとは？

Networkタブは、ウェブブラウザがウェブページを表示する際に発生するすべてのネットワーク通信を監視できるツールです。
例えば以下のような情報を確認できます：
• 画像やCSS、JavaScriptファイルの読み込み状況
• サーバーとの通信内容（リクエストとレスポンス）
• ページの読み込み速度やパフォーマンス

これを使うことで、ウェブページの問題を特定したり、正しく動作しているか確認することができます。

ネットワークアクティビティをログに記録

ページによって発生するネットワークアクティビティを表示するには:

ページを再読み込みします。[ネットワーク] パネルでは、すべてのネットワークアクティビティが [ネットワークログ] に記録されます。

[ネットワークログ] の各行はリソースを表します。デフォルトでは、リソースは時系列で表示されます。通常、最上位のリソースはメインの HTML ドキュメントです。一番下のリソースは、最後にリクエストされたものです。

各列はリソースに関する情報を表します。デフォルトの列は次のとおりです。

ステータス: HTTP レスポンスコード。
種類: リソースタイプ。
Initiator: リソースがリクエストされた原因。[Initiator] 列のリンクをクリックすると、リクエストの原因となったソースコードが表示されます。
サイズ: ネットワーク経由で転送されたリソースの量。
時間: リクエストに要した時間。

これらのデータが一覧形式で表示され、ファイルごとの読み込み時間やステータスが確認できます。

DevTools が開いている限り、ネットワークアクティビティが [ネットワークログ] に記録されます。これを示すために、まず [ネットワークログ] の下部で最後のアクティビティを確認します。
デモの [Get Data] ボタンをクリックします。
ネットワークログの下部をもう一度確認します。getstarted.json という新しいリソースがあります。[データを取得] ボタンをクリックすると、このファイルがページからリクエストされました。

実際に確認するポイント

(1) 正常に読み込まれているか

リクエストごとにステータスコードを確認します。
• 200なら正常に読み込まれています。
• 404や500の場合はエラーが発生しているため、原因を調べる必要があります。

(2) 読み込み時間の確認

各リクエストのTime列を見て、どのファイルが読み込みに時間がかかっているかを特定します。特に、数秒以上かかるファイルがある場合、それがページのパフォーマンスに影響している可能性があります。

(3) 不要なリクエストがないか

読み込まれているファイルの中に、現在使われていない画像やスクリプトが含まれていないかを確認します。これらは削除することでページの読み込み速度を改善できます。

Networkタブの活用例

(1) ページが正しく読み込まれない場合

• ステータスコードが404や500の場合、ファイルが見つからないか、サーバー側でエラーが発生しています。原因を特定し、修正しましょう。

(2) ページの読み込みが遅い場合

• Time列で読み込み時間が長いファイルを特定します。画像が大きすぎる場合は圧縮、JavaScriptファイルが重い場合は最適化を検討します。

(3) APIの動作確認

• Ajaxリクエストを使用している場合、レスポンスの中身が正しいかをPreviewタブで確認します。

Networkタブを使うと、ウェブページがサーバーとどのようにやり取りしているかを簡単に確認できます。特に、ページの読み込みエラーやパフォーマンスの問題を特定するのに役立ちます。いきなりJavaScriptを学び始めて最初は戸惑うかもしれませんが、リクエストやレスポンスの基本を理解すれば十分に活用できますので、ぜひ実践してみてください！

5: ブレークポイントでコードをデバッグ（Sourcesタブ）

デベロッパーツールが開いたら、上部の「Sources」タブをクリックします。

1.ファイルを探す
• 左側のペインに、現在ロードされているすべてのファイルが表示されます。フォルダ構造をたどってデバッグしたいファイルを選択します。
• ファイル名が分からない場合は、検索バー（Ctrl + PまたはCmd + P）を使ってファイル名を入力するとすぐに見つかります。

2. コードの内容を確認
中央ペインに選択したファイルのコードが表示されます。このエリアでコードの編集やブレークポイントの設定ができます。

ブレークポイントを設定する

コード上にブレークポイントを設定することで、設定した箇所で処理の実行を止めることができます。
コードの任意の行番号をクリックすると、行番号が青くなり、ブレークポイントが設定されます。
ブレークポイントは複数設定することもできます。
設定したブレークポイントの一覧は、右エリアの「Breakpoints」で確認できます。

JavaScriptを実行する

JSを実行し、ブレークポイントで処理を止めます。
定義されている変数の一覧が、右エリアの「Scope」に表示されます。
関数内で定義した変数は「Local」に表示されます。
画像では”Local”,"Closure","Window / Global"について書かれています
Localスコープには、現在の関数やスクリプト内で定義された変数が表示されます。
今回の例では、this: div.hamburger が表示されています。これは、現在のコードが div 要素（class="hamburger"を持つ要素）を操作していることを意味します。を定義しており、止めた時点でのそれぞれの値が表示されています。
Localスコープに表示される変数は、現在の関数内で定義されているものです。この情報を確認することで、以下のような状況を特定できます：
• 関数内で値が期待通りに変化しているか。
• 思わぬ値（undefined や null）が代入されていないか。
• 関数内で使用している変数のスコープが適切かどうか。

例：this: div.hamburger が表示されている場合、コードが特定の要素を正しく操作していることを確認できます。もし違う要素を操作していた場合、その原因を追跡できます。

Closure には、現在の関数やその親スコープから継承されている変数が表示されます。
pagetop がここにあり、S.fn.init（ jQuery オブジェクト）として初期化されています。
関数間で共有されるデータの追跡
Closureスコープに表示される変数は、現在の関数がアクセス可能な親スコープの変数です。これを確認することで、以下のような問題を解決できます：
• 親スコープから意図しない値が影響しているかどうか。
• 関数間でデータが正しく共有されているか。

例：pagetop が S.fn.init として初期化されていることを確認できれば、親スコープから引き継いだデータが正しいかどうかを検証できます。

Window / Globalには、JavaScript のグローバルオブジェクトに定義されたすべての関数や変数が表示されます。
lert, btoa, clearTimeout など、ブラウザで使用できる標準的な機能が並んでいます。

グローバルな変数やブラウザ機能の確認

Window / Globalスコープは、ブラウザ全体で利用可能なオブジェクトや変数が含まれています。これを確認することで以下の点を理解できます：
• 意図しないグローバル変数が作成されていないか。
• 標準のブラウザ機能や外部ライブラリが適切にロードされているか。

例：alert や btoa のようなブラウザの組み込み関数が利用可能であることを確認したり、必要なライブラリ（例：jQuery）が正しく読み込まれているかどうかをチェックできます。

デベロッパーツールを使った学習を通して、HTMLやCSSの確認・編集、JavaScriptのエラー解析、ネットワーク通信のチェック、ブレークポイントを使ったデバッグ方法など、動的なWeb開発に欠かせないスキルを身につけました。これらの機能を活用すれば、問題の原因を素早く突き止めて解決できるだけでなく、リアルタイムでコードを調整してすぐに結果を確認できるので、開発効率が大幅にアップします。

STEP15　動的な模写コーディング　jsアニメーション　

1. 目標物の確認・プロジェクトの準備

ハウスメーカーからコーポレートサイトの制作をjQueryを使って、動的なサイトとして制作していきましょう。

2. 静的部分の構築

動的なサイト制作とはいえ根本的には前半で学んだ、HTML・CSSが基礎になってきますので、まずは、HTML・CSSでサイトを作っていきましょう。

各セクションにまずは分けて考えていきましょう。

レイアウト構成は下記の通りです。

header

ロゴ、グローバルナビを囲みます。

main

コンテンツのメインエリア全体を囲みます。

div（#video）

動画のエリアを囲みます。

section（#project）

Projectコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。

section（#feature）

Featureコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。

section（#flow）

Flowコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。

section（#contact）

Contactコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。

footer

コンテンツ下のfooter部分を囲みます。

前半部分で静的サイトのコーディングについては解説済みですし、ここまで読んでくださった皆さんならコーディングは実装できると思うので、細かい説明については割愛します。

3. 動的機能の追加（jQueryで実装）

1. ハンバーガーメニューの実装
レスポンシブのsp画面からハンバーガーメニューと呼ばれる ≡ が出現します。これの実装をjQueryを用いて実装していこうと思います。

仕組みはSTEP12のJavaScript・jQueryインプットでやった、アコーディオンアニメーションの仕組みを応用してハンバーガーメニューを作っていきます。

jQuery

$(function(){
  $('#hamburger').on('click',function(){
    $('#hamburger').toggleClass("open");
    $('#header-menu').slideToggle();
  });
});

HTML

<div id="hamburger" class="hamburger">
   <span></span><span></span><span></span>
</div>

CSS

.hamburger {
    position: absolute;
    top: 32px;
    right:32px;
    cursor: pointer;
    width: 32px;
    height: 24px;
    z-index: 10;
}
.hamburger span {
    /*3本の線を作る*/
    transition: all .3s;
    position: absolute;
    height: 2px;
    background-color: #333;
    width:100%;
    z-index: 10;
}
.hamburger span:nth-of-type(1) {
    /*上の線の位置*/
    top: 4px;
}
.hamburger span:nth-of-type(2) {
    /*真ん中の線の位置*/
    top: 12px;
}
.hamburger span:nth-of-type(3) {
    /*下の線の位置*/
    top: 20px;
}
.hamburger.open span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    top: 10px;
    transform: translateY(6px) rotate(-33deg);
}
.hamburger.open span:nth-of-type(2) {
    /*真ん中の線を消す*/
    opacity: 0;
}
.hamburger.open span:nth-of-type(3) {
    /*下の線を左斜めにする*/
    top: 22px;
    transform: translateY(-6px) rotate(33deg);
}

ハンバーガーメニューにhamburgerというidを与えていて、それをクリックした時の関数を書いています。

$('#hamburger').toggleClass("open");

このtoggleClassというのは、指定したCSSクラスが要素に無ければ追加し、あれば削除するという意味で、関数が呼び出されるたびに（ハンバーガーメニューがクリックされるたびに）openクラスをつけたり外したりしています。

2. To-Topボタンの実装

スクロールに応じてボタンが出現し、クリックするとトップページに戻り再度ボタンが非表示になるというto-topボタンの実装を行います。

jQuery

let pagetop = $(".to-top");
  // 最初に画面が表示された時は、トップに戻るボタンを非表示に設定
  pagetop.hide();

  // スクロールイベント（スクロールされた際に実行）
  $(window).scroll(function () {
    // スクロール位置が700pxを超えた場合
    if ($(pagetop).scrollTop() > ) {
      // トップに戻るボタンを表示する
      pagetop.fadeIn();

      // スクロール位置が700px未満の場合
    } else {
      // トップに戻るボタンを非表示にする
      pagetop.fadeOut();
    }
  });

  // クリックイベント（ボタンがクリックされた際に実行）
    pagetop.click(function () {
    // 0.5秒かけてページトップへ移動
    $("body,html").animate({ scrollTop: 0  },500 );

    // イベントが親要素へ伝播しないための記述
    // ※詳しく知りたい方は「イベント　バブリング」または「jQuery バブリング」で調べてみてください
    return false;
  });

HTML

<a class="to-top" href="#"></a>

CSS

/*
右下に固定で配置
表示・非表示の切り替えはjQueryで行うため、詳細は「main.js」のコメントを参照
*/
.to-top {
  width: 50px;
  height: 50px;
  background-color: #121212;
  border: solid 1px #fff;
  border-radius: 50%;
  position: fixed;
  right: 25px;
  bottom: 25px;
}

/*
中の三角は疑似要素で作成
*/
.to-top::after {
  content: "";
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  position: relative;
  left: 17px;
  bottom: 3px;
}

まず初めに画面に表示されるときにはto-topボタンはhide()にして非表示にし設定します。

let pagetop = $(".to-top");
  // 最初に画面が表示された時は、トップに戻るボタンを非表示に設定
  pagetop.hide();

次にスクロールされたときに実行するスクロールイベントを書いていきます。
if文を用いて、条件に応じてフェードイン・フェードアウトで表示/非表示を切り替えていきます。
今回の例ではスクロールの位置を700pxに設定しています。

  // スクロールイベント（スクロールされた際に実行）
  $(window).scroll(function () {
    // スクロール位置が700pxを超えた場合
    if ($(pagetop).scrollTop() > 700) {
      // トップに戻るボタンを表示する
      pagetop.fadeIn();

      // スクロール位置が700px未満の場合
    } else {
      // トップに戻るボタンを非表示にする
      pagetop.fadeOut();
    }
  });

ここまででスクロールに応じてto-topボタンの表示/非表示の切り替えができるようになりました。

次にボタンがクリックされたときに0.5秒かけてページトップに移行するという動きを作っていきます。

  // クリックイベント（ボタンがクリックされた際に実行）
    pagetop.click(function () {
    // 0.5秒かけてページトップへ移動
    $("body,html").animate({ scrollTop: 0  },500 );

クリックされたら、scrollTop(表示されている画面の上端の位置)から０（トップページ）まで500ミリ秒（０.５秒）かけてスクロールするという動きを設定しています。

これでハンバーガーメニューとto-topボタンの実装が完了しました。

４. テストと改善

STEP13でやったデベロッパーツールを使ったデバックを踏まえてハンバーガーメニューとto-topボタンの実装を調べていきましょう。

ハンバーガーメニュー

検証ツールを開いて、Elementsタグをクリックします。
デベロッパーツールの「Elements」タブで、#hamburger をクリックした際に open クラスが正しく追加・削除されるか確認します。

• イベントのトリガー確認
「Sources」タブを使用して、クリックイベントが正しくトリガーされているか確認します。
• $('#hamburger').on('click', ...) にブレークポイントを設定し、クリック時にコードが実行されるか追跡します。
• this が正しい要素（#hamburger）を指しているかを確認します。

to-topボタン

検証ツールを開いて、Elementsタグをクリックします。
デベロッパーツールの「Elements」タブで、to-topボタンが非表示になっているか cssのstyleでdisplay:noneになっているか、スクロールをしていくと、700pxの位置でdisplay:noneが外れて、to-topボタンが表示されているか確認する。

• イベントのトリガー確認
「Sources」タブを使用して、クリックイベントが正しくトリガーされているか確認します。
• pagetop.click(function(){にブレークポイントを設定し、クリック時にコードが実行されるか追跡します。
• this が正しい要素（a.to-top）を指しているかを確認します。
• $('body,html').animate({scrollTop:0},500)にブレークポイントを設定し、実際にスクロールアニメーションが実行されていることを確認します。

ここまでで、動的なアニメーションの実装と、それに応じたデベロッパーツールを使用したデバックを学びました。
この手順を踏んでいくと、不明点を改善しながら動的サイトの作成を行っていくことができるようになります。

STEP16　デザイン基本概論

1. デザインとは

デザインの基本原則は、見た目を美しく、使いやすくするための「ルール」です。このルールを意識することで、プロっぽいデザインが作れるようになります。

UIとUXの違いを理解する

• UI (User Interface)
ユーザーとアプリやウェブサイトが「直接触れる部分」のデザインです。
例: ボタンのデザイン、配色、フォント、レイアウトなど。
• 目標: 見た目が美しく、直感的に使えるデザインを作ること。

• UX (User Experience)
ユーザーがアプリやウェブサイトを使ったときに感じる「体験」のデザインです。
例: アカウント作成が簡単、情報がすぐ見つかる、ストレスが少ない操作感。
• 目標: ユーザーが満足し、使いやすいと感じる体験を提供すること。

ユーザー視点を意識する

UI/UXデザインの基本は、『ユーザーのために作る』ことです。
ユーザーのニーズや課題を理解し、それを解決するデザインを考えます。

ユーザー視点を取り入れる方法

• ユーザーペルソナ:
どんな人が使うのかを具体的に想定します（例: 30代女性、スマホ中心で操作）。

• ユーザーテスト:
実際のユーザーに試してもらい、使いにくい部分をフィードバックしてもらう。

UI/UXデザインの基本原則

直感的な操作

• ボタンやリンクがどこにあるかすぐ分かるデザインにする。
• 例: 青い文字はリンクであることが多いため、リンクに青色を使う。

シンプルさ

• 情報が多すぎるとユーザーが混乱するため、重要な要素だけを見せる。
• 例: フォームは入力項目を最小限にする（名前・メールアドレスのみ）。

一貫性

• ページ全体でデザインを統一する。
• 例: 同じ種類のボタンは同じ色と形にする。

フィードバック

• ユーザーが操作した結果を分かりやすく伝える。
• 例: ボタンを押したら色が変わる、ロード中のアニメーションを表示する。

UI/UXデザインは「見た目」と「体験」を両立させるアプローチです。ユーザーの視点に立ちながら、シンプルで使いやすいデザインを心がけることが重要です。そのために必要な知識を次のステップで学んでいきましょう

2. デザインの基本概論

デザインの基本原則

近接 (Proximity)

• ポイント: 関連性のある要素は近くにまとめ、情報をカテゴライズする
• 例: タイトルと説明文は近くに配置することで「セット」だと認識しやすくなる。
• やり方: 関連性の低いものはスペースを空け、グループ化を明確にする。

整列 (Alignment)

• ポイント: 要素をきちんと揃えて、デザインに一貫性と秩序を与える。
• 例: ボタンやテキストが揃っていると、プロフェッショナルな印象を与える。
• やり方: 左揃えや中央揃えを統一的に使う。

対比 (Contrast)

• ポイント: 強調したい部分を目立たせる。情報の重要度をつける
• 例: 重要なボタンを目立たせるために、背景色を変える（青い背景に白い文字など）。
• やり方: 色やフォントサイズ、太さを使って、他と違いを出す。

反復 (Repetition)

• ポイント: 同じデザイン要素を繰り返し使い、統一感を出す。
• 例: ヘッダーやフッターに同じスタイルを適用する。
• やり方: アイコンの形や色、フォントサイズなどを揃える。

配色の基本

色の使い方はデザインの印象を大きく左右します。以下のポイントを押さえましょう。

３色で構成する。

初めてデザインを作っていこうとすると、複数の色を使いがちになってしまいます。色使いはサイトの印象に大きく影響する部分です。
冒頭にも申しましたが、デザインは見た目を美しく、使いやすくするための「ルール」です。
3色に絞ってサイトの構成を行っていきましょう。

•ベースカラー: 目立たせない補助的な色70~80%
• メインカラー: 主に使う色（ブランドの象徴となる色）15~25%
• アクセントカラー: 強調するための色（ボタンやリンクに使用）5~15%

ベースカラー
ベースカラーは、Webサイトの背景色にあたる箇所の色です。

一般的に「白」「黒」「灰色」など無彩色の色を使います。

これら無彩色の色を用いることで、他の色の妨げになりにくく配色のバランスが取りやすくなります。

ベースカラーは、Webサイトのデザインの中で最も大きな面積を占める色です。
Webサイト全体の面積におけるベースカラーの比率は「約７０%」ほどのイメージを持っておきましょう。

メインカラー

メインカラーは、Webサイトの主要なイメージカラーとなる色です。

Webサイトの面積におけるメインカラーの比率は「約２５%」ほどでのイメージを持っておきましょう。

メインカラーは、「このWebサイトのイメージカラーならこの色！」となるような頻繁に目にする色になります。

案件の場合は、お客様から指定された企業/サービスの色を用いることが一般的です。
企業のロゴやアイコンなどから色を抽出しましょう。

指定が特にない場合は、Webサイトのターゲットや雰囲気に合わせて自分で考える必要があります。

アクセントカラー

アクセントカラーは、Webサイトの大事な情報につける色です。

アクセントカラーは、本当に大事な情報に対してのみ用いられます。
なので、Webサイトの面積におけるアクセントカラーの比率は「約５%」ほどです。

最後の最後に使う奥の手の色のイメージを持っておきましょう。

アクセントカラーは「デザインを見る人に絶対気づいてほしい！」と思う箇所に用います。
見本サイトでは、サイトの「お問い合わせ」に関する箇所にのみアクセントカラーが使われています。
見本サイトの場合は「集客」という目的があるので、お問い合わせに関する情報が非常に大事な位置付けをされています。

アクセントカラーは「Webサイトの目的を達成する＝ゴールに繋がる箇所」に用いるようにしましょう。

まとめ
ベースカラー：サイトの背景色になる色
メインカラー：サイトのイメージカラーになる色
アクセントカラー：サイトの大事な情報に用いる色

非常にバランスの取れた綺麗なWebサイトに仕上がるので、上記３つだけ色を選んでWebデザインを作ってみてください。

配色の選び方

色の役割

色は感情や印象を伝えます。
• 青: 信頼、冷静（銀行や企業のロゴに多い）
• 赤: 情熱、警告（セールや注意を促すデザインに使う）
• 緑: 自然、安心（環境関連や健康食品のデザインに最適）

色によってイメージや感情を表すことができます。
サイトのイメージによって配色を選ぶことでよりマッチしたサイトの制作ができます

色相環

まずは、「色相環」を使って色を選んでいきます。
色相環とは、簡単にいうと色相（色の違い）を円状に配置した図のことです。
この色相環を用いることで、Webデザインの色選びを簡単にしていきます。

例　アクセントカラーを決めたい

まずは、アクセントカラーを選ぶ方法を確認していきましょう。

アクセントカラーを選ぶときは色相環の構造のうち、「補色」にあたる色を選びます。

補色とは、色相環の中で円の向かい側に対応する色のことをいいます。
補色は、お互いの色に同化せず、鮮やかに見せる組み合わせの色になります。
お互いの色を活かしながら、サイト内で目立たせることができます。

例　サブカラーを決めたい

先ほど、「配色は３色だけ選ぶ」という話をしてきました。
デザインを作成するにあたり、３色だとどうしても物足りないタイミングが出てくる時があります。
そうなった際には、バランスを崩さないようにサブカラーとなる色を１色を加える必要が出てきます。

サブカラーを選ぶときは色相環の構造のうち、「同系色」に当たる色を選びます。

同系色とは、色相環の中で隣接している色のことをいいます。
同系色は、お互いの色と調和し、統一感が生まれる組み合わせの色です。
色相環を使ってメインカラーに対応する同系色の色をサブカラーに用いることができます。

色相環を使った配色の方法まとめ

・アクセントカラーは「補色」の関係の色を用いる
・サブカラーは「同系色」の関係の色を用いる

ここまでで「色相環」を用いて配色を決める方法を説明してきました。
先ほどの色相環を用いた色の決め方は、ある程度使う色が決まっていないと難しい方法でした。
次の説明では、そもそも０からどうやって色を選ぶかの方法を学んでいきます。

配色ツールを使用する

０から色を考える際は、配色ツールを使っていきましょう。

配色ツールとは、デザインで使用する色選びを助けてくれるツールです。

配色ツールの中には、プロ顔負けの配色パターンを提案してくれるツールもあるので、自分で考えるよりも圧倒的に素早く配色のアイデアを得ることができます。

Adobe Color CC

「Adobe Color CC」は、トップページでは自身でカラーパレットを作成できます。

メニューから「探索」を押すことで、世界中Adobeユーザーが公開している配色パターンを探すことができます。

colorsupplyyy

色相環とカラーホイールを使って簡単に配色パターンを考えることができます。
色の明るさの調節もカラーパレットをクリックするだけでとても簡単です。

先ほと説明した色相環を見ながら、配色の例も確認できます。

Coolors

ワンクリックで調和の取れたカラーパレットを自動生成。
•色の組み合わせに悩むことなく、デザインに適した配色が得られます。

タイポグラフィの基本

タイポグラフィには、主に2つの意味があります。

【文章を読みやすく見せるデザインの手法】
文字の配置や並びによって、文章を読みやすくする手法です。文字間・行間などの余白をうまく使ったり、レイアウトを工夫したりして、文章を読みやすく配置します。

【アーティスティックな文字デザインそれ自体】
ただの文字情報ではなく、文字自体をデザインに組み込んでしまうのもタイポグラフィです。色や太さを変えたり、文字のタッチを変えることで、全体として見たときに文字がデザインの一部となります。

最適なタイポグラフィを選ぶことで、読みさすさ、アクセシビリティ、ユーザビリティ、全体のグラフィックのバランスなど、全てを最適化できる
と言われるほどタイポグラフィーにこだわることは、どんなデザインプロジェクトにおいても重要なプロセスです。

フォントを選ぶ

• サンセリフ体: シンプルで読みやすい（例: Arial, Roboto）
• セリフ体: 高級感や伝統を感じさせる（例: Times New Roman）
• 手書き風フォント: カジュアルで親しみやすい（例: Comic Sans, Pacifico）

セリフかサンセリフで迷ったら、使用するテキストの長さを考慮しましょう。多くの場合、セリフは長文に適しています。文字についた飾りが、次の文字に目を滑らせる働きをしてくれるからです。

逆にサンセリフは、児童などの文字を勉強している層や、視覚障害のある人々に好まれる傾向があります。

ターゲットによってフォントを選ぶように心がけましょう。

複数のフォントを使用する場合、多くても3つまでに制限しましょう。

すべてのフォントに統一感を持たせることができれば、異なる書体で自由に表現して大丈夫です。ただしよく似た2つのフォントを使用すると、意図的にフォントを変更しているのか、単に間違っただけなのか、見る人に誤解されてしまうこともあります。

文字サイズと階層

例
・セクションの見出し：24~32px
・小見出し：18~20px
・読んで欲しい文章：14~16px
・文章の箇所はline-heightが「2」になるようにする
・字間はletter-spacingが0.1emになるようにする

自分の中で見出しや文章のテキストのルールを決めておくと、ワイヤーフレーム作成が捗ります。

重要な情報と、それほど重要ではない情報がある場合は、情報に階層（ヒエラルキー）をつけるのがおすすめ。

大きい見出し / 小さい見出し、大きいボディタイプ / 小さいボディタイプを使用して各情報の重要度を区別し、読者の視線を適切にリードしましょう。

また文字の色や太さ、間隔を用いて階層を生み出すこともできます。

タイポグラフィの基本概念を学んできましたが、まだどのようなfontがいいのか感覚が掴めていない人が多いかと思います。
どのようにしてfontを決めるか迷った際に一番おすすめなのは、既存のタイポグラフィーを分析すること。何がタイポグラフィーを効果的かつ魅力的にするかを知るには、オンライン上にある膨大な数のデザインを見ていくのがベストです。また、ふと目を惹いたグラフィックスやフォントを分析しても良いでしょう。

STEP17 Figma でデザイン制作

１. Figmaの概要を理解する

Figmaの特徴

Figmaとは、ブラウザ上で手軽にデザイン作業ができるツールです。

アカウントを作成すれば、どこにいてもブラウザさえ使えればデザインを編集できるので、チームでの作業にも適しています。しかも、無料で使えるプランがあるので、誰でも気軽に導入できるのが嬉しいポイントです。

Figmaの便利な点として、Web上で利用できることが挙げられます。アカウントさえ取得していれば、作成したデザインは制作時に使用したPCではなく、Web上で呼び出すことができるため、オフィスと自宅で作業をスムーズに継続できます。

また、1つのファイルを複数のメンバーで編集することができるので、デザイナーのほか、ディレクターなどの制作に関わる様々な役割の人とデータを共有し、相談しながら制作物を仕上げられます。スムーズに作業を進められるように最適化された仕様は、オンラインをフル活用する現在のビジネスシーンにぴったりだと言えるのではないでしょうか。

Figmaはハイスキルなデザイナーだけが使えるツールではなく、様々な役割の人が感性をアウトプットし共有できる仕組みが備わっている魅力的なデザインツールなのです。

Figmaの構成要素

Figmaのウィンドウは大きく、ツールバー・左サイドバー・キャンバス・右サイドバーの4つのエリアに分かれています。

左サイドバー（ページとレイヤー）

左のサイドバーにはページとレイヤーの一覧があります。
ページリストはデフォルトで折りたたまれており、ページ名をクリックすると展開します。

レイヤーリストは、配置されているオブジェクトの一覧ですが、デザイン確認で使うことはおそらくないでしょう。
しかしこのレイヤーリストの構成を考えながら作り込むことができると、HTMLと同じような構成でデザインデータを作っていくことができます。

キャンバス

中央はキャンバスで、ここにいわゆる“デザイン”が並びます。

右サイドバー（コメント・インスペクター・書き出し）

右にサイドバーがありコメント関連の操作やドキュメント・オブジェクトの情報の確認、画像の書き出しが実行できます。

メニュー：Fimgaのアプリケーションメニューを開きます。
ムーブツール（Move）：オブジェクトを選択するツールです。名前は「移動」ツールですが、Viewer権限だと移動はできません。
ハンドツール（Hand tool）：画面をつかんで移動させるためのツールです。
コメントツール（Add comment）：コメントを挿入するツールです。
ドキュメントタイトル：表示しているドキュメント名が表示されます。すぐ右の下向きの矢印アイコンをクリックすると、ドキュメントに関するメニューを表示できます。
ドキュメントを見ているユーザー：現在ドキュメントを開いているユーザーが表示されます。
ファイルの共有：共有モーダルダイアログが表示され、共有リンクの取得やドキュメントにアサインされているユーザーを確認できます。
プロトタイピング開始：ドキュメントにプロトタイピングが設定されている場合、再生が可能です。
画面の拡大率：拡大率をはじめとした、画面表示に関するメニューが表示されます。

２. Figmaの基本操作を学ぶ

フレーム

フレームを呼び出すには、ツールバーの「フレーム」を選択します。「フレーム」が選択されていると、画面右のメニューにフレームの選択肢が現れますので、ここからデザインの外枠となるスクリーンサイズを選びます。

このとき、「スマホ」「タブレット」「デスクトップ」…などのデバイス名を選択すると、さらに「iPhone14, iPhone14Pro…」などといった細かい選択肢が展開されます。PCやスマホだけでなく「用紙（A4, A5…）」などからも選択できます！

簡単にレスポンシブサイズのデザインを作成していくことができます。

こういったフレームは、ひとつのキャンバスにいくつでも作成することができます。また、フレームを削除するときは、削除したいフレームが選択された状態で（選択されているフレームは青枠で表示されます）「delete」キーを押します。

フレームのサイズ変更にはいくつかの方法があります。

「フレーム」の選択肢から変更サイズ変更したいフレームを選択し、画面右の「デザイン」タブの「フレーム」から、先程のようなフレームの選択肢を呼び出します。この中から変更したいサイズをクリックすればOKです。

その他として「フレーム」の数値から変更サイズを変更したいフレームを選択し、画面右のW（wide=幅）、H（Hight=高さ）の数値を入力する方法や、
「フレーム」をドラッグして変更フレームの各辺（上・下・左・右）にカーソルを合わせると、矢印（「⇔」）が現れます。この状態で、その辺を引っ張る（ドラッグする）と、その方向にフレームが拡大or縮小します。

デザイン制作を行っていくと高さが足りなくなることが出てくるのでその時は数値変更やドラッグを使用してサイズの変更を行っていきましょう。

Figmaのフレームには、アートボードのようなサイト全体のサイズを定義する使い方の他に、ある子要素に対する親要素（親ボックス）としての使い方があります。
※フレームの中にフレームを入れる（ネストする）こともできます。

フレームが本領を発揮するのは、ある要素の「親ボックス」として「オートレイアウト」を適用するときだといえます。

オートレイアウトとはどのような機能か見てみましょう！

まず、適当なサイズのフレームを用意し、中に要素（今回は図形３つ）を加えます。そして、３つの図形の親ボックスであるフレームを選択し、画面右の「オートレイアウト」をクリックしてみましょう。

適当に並べた３つの図形が一瞬で整列しましたね！同時に、「オートレイアウト」のメニューが現れました。ここでレイアウトの詳しい設定をすることができます。

縦並び・横並びの変更、要素の配置の変更を設定できます。
HTML・CSSでいうところのdisplay:flexのような仕組みになっています。

フレーム練習
フレームを「スマホ」「タブレット」「デスクトップ」の三つ用意し、各フレーム内で三つの箱を作りオートレイアウトで横並びにしましょう

制約

制約は、フレームのサイズを変更したときにオブジェクトがどのように変化するかを設定することが出来ます。
これにより、さまざまな画面サイズとデバイスでデザインがどのように表示されるかを制御することが出来ます。

例えば、UIの大きさを可変してもそれを追従するように中の全ての要素がサイズと位置を変更することが出来ます。
これを使うことで、UIデザインの作業効率を格段に上げることが出来るため、活用していきましょう。

制約を使うには、フレーム内に存在するオブジェクトを選択します。
次に、プロパティパネルの右に位置する「Constrains」セクションから設定を行うことができます。
図3のように十字部分をクリックすることで、どの位置を固定するかを選択することが出来ます。また、プルダウンメニューからでも選択することが可能です。制約を複数選択したい場合は、「Shift」を押しながらクリックすることで、複数の制約を選択することが出来ます。

また、制約を使う時のポイントは次の通りです。

フレーム内のオブジェクトにしか適応することが出来ません。
他のフレーム内に入れ子にしたフレームに制約を適用することも出来ます。
オブジェクトに水平および垂直の両方の制約を適用することが出来ます。
制約を使用して、スクロールプロトタイプでのオブジェクトの応答方法を定義することが出来ます。
グループには制約を適用することはできません。

水平方向の制約は、x軸に沿ってフレームのサイズを変更するときのオブジェクトの動作を定義することが出来ます。

Leftは、フレームの左側に対するオブジェクトの位置を維持します。
Rightは、フレームの右側に対するオブジェクトの位置を維持します。
Left+Rightは、フレームの両側に対するオブジェクトのサイズと位置を維持します。
Centerは、フレームの水平中心に対するオブジェクトの位置を維持します。
スケールは、オブジェクトのサイズと位置を親フレームに対して比率を維持します。

垂直方向の制約は、y軸に沿ってフレームのサイズを変更するときのオブジェクトの動作を定義することが出来ます。

Topは、フレームの上部に対するオブジェクトの位置を維持します。
Bottomは、フレームの下部に対するオブジェクトの位置を維持します。
Top+Bottomは、フレームの上下に対するオブジェクトのサイズと位置を維持します。
Centerは、フレームの垂直中心に対するオブジェクトの位置を維持します。
スケールは、オブジェクトのサイズと位置を親フレームに対して比率を維持します。

コンポーネント

Figmaのコンポーネント機能をシンプルに説明すると、「デザインファイル内で何度も利用する、同じかちょっと似ている要素を簡単・便利に扱うことができるようにする仕組み」です。このコンポーネント機能を使って作成される、UI上再利用な要素をFigmaではComponent（コンポーネント）と呼んでいます。

Figmaの同一デザインファイル上でよく使うオブジェクトやレイヤーをコンポーネント化しておくと、これらの要素ごとの管理がしやすくなり、結果としてデザイン制作が効率的に進みます。

また、フロントエンド領域のコンポーネント指向の設計ともとても相性がよく、コンポーネント作成時点でフロントエンドの実装と近づけることで、両者の見た目やふるまいの乖離を減らすことができるメリットもあります。

Figmaのコンポーネントには2種類あります。コンポーネントの性質（これらの情報をプロパティといいます）を定義する「メインコンポーネント」と、メインコンポーネントから生成されるデザインファイル上で再利用可能なコピーである「インスタンス」と呼ばれるコンポーネントです。

メインコンポーネントは、インスタンスを生成するための設計図だと捉えてもらうとよいでしょう。再利用したい任意のレイヤーやオブジェクト（テキストオブジェクト・シェイプ・画像要素など）をメインコンポーネントとしてコンポーネント化しておき、メインコンポーネントを元にインスタンスという実際の製品を作成してデザインファイル内のいろんな場所で利用していく、というのがコンポーネントの基本的な利用方法です。

スタイル

スタイルとは、Figmaの右側のパネルに表示される装飾系のものを管理するためのものです。

スタイルでは、大きく以下の4つのスタイルを管理できます。

Text Style

フォントの種類、大きさ、太さなどが定義できます。今回は以下のようにしています。

Color Style

色を定義できます。今回の場合は、以下のようにしています。

Text、Border、Backgroundなど役割ごとに色を設定できます

また、すべてのスタイルで可能なのですが、設定時にdescriptionエリアに説明文を記載することで、さらに分かりやすくなります。

Effect Style

Inner Shadow、Drop Shadow、Layer Blur、Background Blurなど影やぼかしなどのスタイルを定義できます。今回は以下のように設定しています。

基本的に影を設定することが多いです。いくつかの影をだし分ける時に設定しておきます。

Grid Style

フレーム内で、オブジェクトを整列させるためのレイアウトグリッドを定義できます。

レイアウトグリッドとは

フレーム内で、オブジェクトを整列させるための機能です。

デザインでは規則性（ルール）が大切になってくるため、レイアウトグリッドを使って規則的にデザインを配置することでより良いデザインを作っていくことができます。

3. Figmaでプロトタイプを作成する

プロトタイプとは

Figmaでは、デザインをつくる以外にもプロトタイプという機能があります。プロトタイプ機能では、作成したデザインに画面遷移や動きをつけることができます。

下の写真はログインボタンを押したらログイン画面に行くことや
アカウントボタンを押したらアカウント作成画面に画面遷移するようにプロトタイプを作成しています。

プロトタイプを活用することで、ホバーアクションや画面遷移、モーダルなどのアニメーションを作ることができ、デザインからのコーディングが非常にわかりやすいものになります。

ここまでデザインツールFigmaの内容について詳しくお話ししてきました。
次のステップではいよいよ自分のポートフォリオ制作に入っていきます。
これまでの知識をふんだんに盛り込んでより良いサイト制作にしていきましょう。

STEP18　ポートフォリオ制作

ポートフォリオを制作する時に、まず最初に取り組むべきことは「目的の明確化」です。ポートフォリオは、ただ自分のスキルや成果を並べるだけではなく、閲覧者に明確なメッセージを伝えるツールです。そのため、どのような目的で作成するのかをしっかりと考える必要があります。

１.ポートフォリオ作成の目的を明確にする

ターゲットを明確にする

ポートフォリオのターゲットは、就職活動の採用担当者、フリーランスとしてのクライアント、または自分の作品を見せたい特定のコミュニティなど、目的によって異なります。ターゲットを明確にすることで、ポートフォリオのデザインや内容を適切に設定していくことができます。

たとえば、採用担当者向けの場合は、具体的なスキルやプロジェクトの実績を強調し、職務に関連する成果をアピールすることが重要です。一方で、クライアント向けのポートフォリオでは、デザインやプロジェクトの完成度を重視し、依頼に応じた柔軟性や実績を示すことが求められます。

見せたいスキルや成果を整理する

ポートフォリオを通じて、どのようなスキルや成果を見せたいのかを明確にしましょう。これは、あなたが特に得意としている分野や、強調したい実績にフォーカスするために重要です。
過去の成果を振り返り、どのような課題を解決したのか、どのような価値を提供したのかを整理しておくと、閲覧者にとって魅力的なポートフォリオになります。

競合や参考サイトを調査する

競合や参考になるポートフォリオサイトを調査することも非常に重要です。他のクリエイターやエンジニアがどのように自分をアピールしているのかを研究することで、自分のポートフォリオに活かせるアイデアが得られます。
エンジニアならQiitaやZennの記事を確認してみたり、wantedlyで就職活動中の人のレベル感やスキルを確認することをおすすめします。
デザインではfolioで確認するとデザインのポートフォリオを確認できます。

2. ラフ案を作成する

ターゲットと目標が決まったらどんなデザインで作っていくかのラフ案を作っていきます。
ラフスケッチとは、簡単にいうとWebサイトの下書きです。
デザイナーが思い浮かべるデザインのアイデアをどんどん出していく作業です。

ペンと紙でスケッチ

まずは「紙」と「ペン」を使ってアナログにラフスケッチを描いていきましょう。

一発で良いデザインを浮かぶことは稀なので、デザインの案を出すときはとにかく数を出すことが大切です。

デザインツールなどを使ってラフスケッチを描いてしまうと、慣れないうちはかなりの時間がかかってしまいます。
なので、学び始めた方は特に、アナログでのラフスケッチを心がけてください。
質より量ってことですね。

ラフスケッチは、自分だけが使うメモのようなものです。
なので、特に人に見せる場合を除いては、綺麗さは考えないで大丈夫です。

思いつく限りペンを走らせて手を動かしましょう。

ラフスケッチの段階で大切なことは、完成までのイメージを膨らませることです。

ラフスケッチは何度も書いて大丈夫です！
抽象的なラフスケッチから具体的なラフスケッチにどんどん描き換えていくことが大切です。
何度もラフスケッチを重ねていくことで、デザインの完成までのイメージが膨らんでいきます。

ここまでのラフスケッチで大切なことを以下にまとめました。

・紙とペンでラフスケッチを書く
・とにかくデザイン案の数を出す
・思いついたことがあればとにかくメモしておく
・いくつも案を出すためにとにかく手を動かす
・抽象的なラフから具体的なラフに描き換えていく
・完成までのイメージを膨らませる

一番大切なことは、完成までのイメージを膨らませることです。

ラフスケッチで描いたデザインが、次の「ワイヤーフレーム」や「デザインカンプ」に反映されます。
なので、ラフスケッチの段階で完成のイメージがつかないと、後の工程には進めないのです。

3. ワイヤーフレームを作成する

ワイヤーフレームとは、Webサイトの設計図になります。
Webサイト内の構成やレイアウトなどを決めた、いわばラフスケッチの清書です。

お客様と打ち合わせをする資料ともなるため、綺麗に作る必要があります。

次は、ワイヤーフレームを作成する上で注意すべきポイントを解説していきます。

1. Figmaでワイヤーフレームを作成

基本的に白黒で作る

ワイヤーフレームは、基本的に白黒で作られます。
先ほどのワイヤーフレームの画像を見ると、白黒で作られていることが確認できるかと思います。

理由は、ワイヤーフレームはあくまで設計図だからです。

設計図の段階で色などをつけてしまうと、次のデザインカンプを作成する際に自由な発想が生まれにくくなるのです。
「画像」や「配色」や「あしらい（装飾）」などのデザインを飾り付ける要素は、後の工程で行なっていきます。

画像の箇所には灰色の四角を置く

Webサイト内の画像がどこに配置されるかがわかるように、灰色の四角形を配置します。

画像の例で配置されている灰色の四角形には、後で画像が入ることがイメージできるかと思います。
ボタンに関しても、わかりやすいように灰色四角形が用いられる場合もあります。

ダミーテキストは完成に近い形で打ち込む

文章を仮置きするためのダミーテキストは、できる限り完成の文章に近い形で打ち込んでおきましょう。
「テキストテキスト」「○○○○」などのダミーテキストは、実際の見た目とはかけ離れており、「改行の位置」や「読みやすさ」の判断ができなくなります。

一番良いのは、デザインを作る前に文章の元となる原稿を作っておくことです。
打ち込む文章が決まっていると、よりスムーズなデザイン作成が行えます。

案件などの場合は、ワイヤーフレームの作成の前段階でお客様から事前に原稿を考えてもらっておきましょう。

ここまでのワイヤーフレームで大切なことをまとめました。

・ワイヤーフレームはWebサイトの設計図
・基本的に白黒で作る
・画像が配置されるところには灰色の四角形を置く
・ダミーテキストは完成に近い形で打ち込む
・テキストのスタイルを調節しておく
・基本的に8の倍数の大きさで作る

ワイヤーフレームを綺麗に作っておくことで、次のデザインカンプの作成が捗ります。
なるべく後から修正をしないような作成を心がけてください。

2.要素を細かく検討

4. デザインカンプを作成する

1. Figmaでデザインカンプ作成

デザインの最後の工程です。デザインを完成させていきます。

デザインカンプとは、デザインの完成形のことです。
正式名称は、「Design Comprehensive Layout」です。

デザインを依頼された場合は、お客様に納品するデザインデータになります。
そして、最終的にエンジニアがコーディングをする元となるデザインデータにもなります。

デザインカンプは「モックアップ」と呼ばれることもあります。

画像を挿入する

実際にWebサイトの中で使用する画像を挿入します。
ワイヤーフレームで配置されていた灰色の四角形に画像を挿入していきましょう。

デザインデータの画像がそのままコーディングに使用されるので、元のデータとなる画像も完成形のものを使用するようにしましょう。

配色する

配色とは、色をつけることです。
デザインカンプの段階で、配色を行っていきます。

Webデザインは以下の３つの色を基本的に使っていきます。

・ベースカラー
・メインカラー
・アクセントカラー

配色の決め方はSTEP15のデザイン基本概論で確認してください。

あしらいを追加する

あしらいとは、装飾のことです。

画像の例でいうと、キャッチコピーの下線やチェックのアイコンなどがあしらいにあたります。
デザイン４原則の対比を意識するために、あしらいを追加してデザインにメリハリをつけます。

前述した配色の作業で選んだ色と合うようにして、あしらいの色も決めましょう。

誤字脱字のチェックをする

最後に、デザインカンプを作成する際に忘れてはいけないのが、誤字脱字のチェックです。

デザインカンプはお客様に納品するためのデザインなので、ミスは許されません。
デザインを作り終わっても気を抜かず、誤字脱字のチェックを行いましょう。

誤字脱字のチェックをするときは、デザイン制作直後ではなく時間を空けてから行いましょう。
短くて1時間、長くて1日デザインを寝かしておきましょう。

後日、頭を冷静にしてから見直しを行わないと、ミスの発見は難しいのです。

デザインカンプのまとめ

ここまでのデザインカンプで大切なことをまとめました。

・デザインカンプはWebデザインの完成形
・画像を挿入する
・配色をする
・あしらいを追加する
・誤字脱字のチェックをする

デザインカンプはデザインの完成形です。
最後まで絶対に気を抜かずに作成しましょう。

コーディング

デザインが出来上がったら、あとは今までの知識を活用して、コーディングを行なっていきます。

はじめに静的な部分のコーディングからはじめHTML/CSSで作り上げていきます。
次に必要に応じて、動的な部分のコーディングをJavaScript/jQueryを使って書いていきます。
最後にデベロッパーツールを使って全体のコーディングのテスト・確認を行なっていきます。

レスポンシブデザインも含め確認し、問題なければコーディングは完成になります。

STEP19　Github　サーバーについて

1. Webページを公開する流れ

Webサイトの表示に必要な要素

はじめに、Webに関する5つの用語「IPアドレス」「ドメイン」「Webブラウザ」「Webサーバー」「DNS」を説明します。これらはWebサイト表示の原理を理解するのに重要な項目です。それぞれがどのような意味や役割を持っているのか、よくわからないという方はこちらで確認してみてください。

IPアドレス

IPアドレスとは、インターネットなどのIPネットワークに接続する端末や機器に割り当てられる識別番号です。接続中の端末や機器の1台1台に一意の値が割り当てられます。

IPアドレスは、インターネット上の住所と言い換えることもできます。クライアント端末から住所を指定して特定の送信先に要求したいデータを送ることができ、自身もその住所を所有していることで、要求したデータを送り返してもらうことができるのです。

ドメイン

ドメインは英語で「領土」「領域」「範囲」を意味し、Webの世界ではWebサイトや、サーバーなどの機器を識別するためにつけられた住所や愛称のようなものです。

インターネットではIPアドレスによりデータの送受信先を指定しますが、数値だけで表現されるIPアドレスは人間にとって扱いにくいものです。そのため、IPアドレスに紐づく名前として、人が認識したり覚えやすかったりするアルファベット表記の「ドメイン」が作られ、IPアドレスと併用されています。

なお、ドメインはIPアドレスと同様、インターネット上に1つと決められていて、ほかに同じ名前は存在しません。

Webブラウザ

Webブラウザとは、インターネット上に開設されたWebページを閲覧するためのアプリケーションです。WebブラウザはWebサーバーにあるファイルデータを指定されたレイアウトで表示します。ブラウザによって機能はさまざまで、第三者が開発したプラグインや拡張機能を追加して利用することもできます。

Webサーバー

Webサーバーとは、WebサーバーソフトとWebサイトの構成ファイルを格納している通信機器のことです。Webサーバーはインターネットに接続されており、ネットワークを通じてアクセスしてきた端末にデータや機能を提供します。

国内で著名なWebサーバーソフトに「Apache」「Nginx」「IIS」があります。

DNS

DNS（Domain Name System）は、ドメインとそれに対応するIPアドレスの管理をするシステムのことです。WebサイトのドメインをDNSシステムに照会し、アクセス先のIPアドレスを参照します。

家で例えると

要するに「IPアドレス」は家の住所みたいなものです。インターネット上では、どのデバイスも固有の住所（番号）を持っていて、それを使ってお互いを見つけるんです。でも数字ばっかりだと覚えにくいですよね。

そこで、「ドメイン」が登場します。これは家の名前や表札みたいなもの。「〇〇さんの家」みたいに、覚えやすくするための名前なんです。実際にはこの名前が住所（IPアドレス）と結びついています。

次に、「Webブラウザ」は家に遊びに来る人みたいな存在です。ブラウザを使うことで、家の中にある情報やサービスを見たり使ったりすることができます。

その家の中身にあたるのが「Webサーバー」。家の中に色々なデータやサービスがしまってあって、訪問者（ブラウザ）が来たときに「どうぞ！」って渡してくれる感じです。

でも、家の名前（ドメイン）だけ聞いても住所（IPアドレス）がわからないと、たどり着けませんよね。そこで、「DNS」が登場します。これは住所録や地図アプリみたいなもので、「この名前の家はこの住所だよ」って教えてくれる役割を持っています。

Webサイトがブラウザで表示されるまでの流れ

Webサイトが表示される流れはおおむね以下の4つの手順になります。

URLに含まれるドメインからDNSサーバーにWebサーバーのIPアドレスを問合せ
アクセス先のIPアドレスの送信
Webサーバーにアクセスしてページデータを要求
Webページの転送と表示

DNSサーバーにIPアドレスを問合せ

インターネットではIPアドレスをもとに通信を行ないますが、通常Webページを閲覧するにはブラウザにURL（サイトのアドレス）を入力し、Webサイトを管轄するWebサーバーにアクセスします。まずはこのURLに含まれるドメインをIPアドレスに変換して、アクセス先を特定する作業が必要になります。この作業は「名前解決」とも呼ばれます。

URLを構成する主な要素は「ドメイン」と、ページファイルを指定する「パス」です。Webサイトを表示するには、URLのドメイン部分を抜き出してDNSサーバーに照会し、通信相手となるWebサーバーのIPアドレスを特定します。

アクセス先のIPアドレスの送信

DNSサーバーはインターネット上にいくつも存在します。クライアント端末はまず自分のネットワークに近いDNSサーバーに照会を行ない、IPアドレスを受け取る窓口とします。DNSサーバーはドメインの階層別に管轄分けされており、ユーザーが指定したURLに含まれるドメインとIPアドレスの対応情報を持つDNSサーバーを参照するように窓口のDNSサーバーに応答します。

ドメインに対応するIPアドレス情報を持つDNSサーバーと通信ができれば、窓口のDNSサーバー経由でIPアドレスをユーザーに返答します。

Webサーバーにアクセスしてページデータを要求

クライアント端末はDNSサーバーから得たIPアドレスを用いて、Webサーバーと通信し、Webサイトのページファイルを送信するよう要求します。Webブラウザが通信を行なうためのプロトコルや「HTML」方式でデータを送信してもらいます。

Webページの転送と表示

ページファイルの送信要求を受けたWebサーバーは、クライアント端末にHTMLファイルを送信します。送信されたHTMLファイルはWebブラウザに表示され、ユーザーはURLで指定したサイトページを閲覧できます。
Webページのデータ送信は1回のやり取りで完了することはなく、何回にも分けてデータを送受信するのが普通です。

以上のような4つの手順を踏み、WebサイトやWebページは表示されます。

2. GitHubのアカウント作成

今回は無料でwebサイトを公開できるGitHubを利用してオリジナルのポートフォリオを公開していきます。

まずは「GitHub」の無料アカウントを作成しましょう。以下のURLにアクセスしてください。

画面に表示されている入力フォームに、「ユーザー名」「メールアドレス」「パスワード」をそれぞれ入力して、緑色の「Sign up for GitHub」というボタンをクリックしてください。
なお、ここで入力した「ユーザー名」は後ほど公開するWebページのURLの一部になります。

ユーザー名やパスワード等に問題がなければ利用プランの画面が表示されたかと思います。
無料のプランで大丈夫ですので、「Unlimited public repositories for free.」にチェックが入っていることを確認してから緑の「Continue」ボタンをクリックしてください。

その後、アンケートを入力する画面が表示されますが、ここは特に何も入力せずに一番下の緑のボタンをクリックすれば大丈夫です。

これから先の作業を続けるには、GitHubに登録したメールアドレスを認証する必要があります。GitHubからメールが届いているはずですので、確認してください。

3. リポジトリの作成

次は「リポジトリ」というものを作成していきます。リポジトリとは、1つのWebページやアプリケーションなどをGitHub上で管理するためのプロジェクトのようなものです。

画面右上のプラスアイコン「+」をクリックし、「New repository」を選択してください。
表示されたページの中央にある、「Repository name」という入力欄にリポジトリ名を入力します。リポジトリ名は基本的に何でも大丈夫ですが、ここで設定したリポジトリ名によって、この後公開するWebページのURLが変わってきます

「アカウント名.github.io」とした場合
公開URLは https://アカウント名.github.io となります。

上記以外の場合
公開URLは https://アカウント名.github.io/リポジトリ名となります。

つまり、ユーザー名を testとした場合、
リポジトリ名を test.github.io とすれば test.github.io というURLに、
リポジトリ名を sample とすれば test.io/sample というURLになります。

今回は特に理由がなければ上の「アカウント名.github.io」で作ってみましょう（リポジトリ名はあとから変更可能です）。

リポジトリ名を入力したら、緑色の「Create repository」ボタンをクリックしてください。

これでリポジトリを作成することができました。表示された画面にて、「README」というリンクをクリックしてください。

この「README.md」（リードミー）とは、このリポジトリの説明を書くためのファイルです。
今回は特に何も書く必要はないので、何もせずに右の緑の「Commit changes...」というボタンを押してください。

では次の章で、HTMLやCSS等のファイルをアップロードする方法を学んでいきましょう！

4. ファイルのアップロード

HTML・CSSファイルのアップロード

まずは「index.html」というHTMLファイルを用意していきましょう。

「Create new file」メニューを選択しファイルの追加画面を開きましょう。

入力欄にファイル名である「index.html」を入力しましょう。
自分でWebページを作成した人は、ファイル名が「index.html」ではない場合もあるかと思いますが、ここは必ず「index.html」にしてください。

次は、CSSファイルをアップロードします。手順はHTMLのときと同じです。
今回はファイル名は「index.html」のコード内で指定しているファイル名にしましょう（以下の画像の例では「style.css」としてあります）。

画像のアップロード

コードがアップロードできたので、次は画像ファイルをアップロードする方法を見てみましょう。
先ほどクリックした「Create new file」というボタンの下にある「Upload files」というボタンをクリックしてください。

表示された画面の真ん中に、HTMLやCSS内で使っている画像をドラッグアンドドロップしましょう。「choose your files」というリンクを押すことでもアップロード可能です。

アップロードできたら、緑色の「Commit changes」というボタンを押すことで保存が完了します。

アップロードしたファイルは以下の画面から確認することができます。

各ファイル名の部分をクリックすることでそのファイルの中身も確認できますので、正しくアップロードできているか確認してみましょう。

5. ページの公開

それではアップロードしたファイルを用いて、Webページを公開してみましょう。
まず、画面右上の「Settings」というリンクをクリックしてください。

Settingページの左側にあるメニューの中から「Pages」をクリックしてください。

Pages画面に「Your site is live at ...」と表示されている場合には、そこに表示されているURLですでにWebページが公開されています。

もし表示されていない場合には、「Branch」の項目が「None」となっていると思いますので、これをデフォルトブランチ「main」に変更して「Save」ボタンを押すことでURLが表示されます。

これで自分のWebページをインターネット上に公開するための作業は終了です。これで自分が作ったページに、自分だけでなく友達などの他の人でもそのURLからアクセスすることができます！

※ もしURLにアクセスしても何も表示されない場合には、ページを表示する処理に時間がかかっている可能性があります。少し待ってから再度ページを読み込んでみてください。

STEP20　PHPインプット

1.PHPとは

PHPは、WebサイトやWebアプリケーションを作るためのプログラミング言語の一つです。例えば、ログイン機能があるサイトや、商品の注文ができるショッピングサイトなど、「動きのある仕組み」を作るときに活躍します。

PHPの特徴をざっくり言うと…

• サーバーサイドの言語
PHPは、Webページを表示するためにサーバーで動きます。つまり、裏側で処理をして結果をユーザーに届けるような役割を担っています。
（例：フォームに入力した内容をサーバーで受け取って保存する）

• 初心者にも優しい
書き方がシンプルで、初めてプログラミングを触る人にもとっつきやすい言語です。エラーが出たときも比較的わかりやすいメッセージが表示されるので、学習が進めやすいです。

• WordPressのベース
世界中で使われているWebサイト作成ツール「WordPress」は、PHPで動いています。そのため、PHPを学ぶとWordPressのカスタマイズもできるようになります。

PHPを使うと何ができるの？

PHPを使うと、こんなことが実現できます：
1. お問い合わせフォーム
入力された名前やメールアドレスをサーバーに送って管理する。
2. ログイン機能
ユーザー名とパスワードを確認して、特定の人だけが使えるページを作る。
3. データベースとの連携
商品情報やユーザー情報をデータベースに保存して、必要な情報を画面に表示する。

ちょっと例えてみると…

PHPは「お店の店員さん」みたいなものです。
• HTMLやCSSが「お店の外観やインテリア」だとしたら、
• PHPは「お客様の注文を受けて、キッチンに伝えたり、レシートを発行したりする店員さん」です。

見た目を整えるだけではなく、「お客様が実際に使える仕組み」を作るのがPHPの役割なんですね。

２. PHPの基礎理解（Progateで学習）

PHP基本文法について

<?php echo "Hello world!";?>

<?php ?>で閉じられ、「echo」は文字列などを出力するための命令です。文字列を出力する場合はシングルクォーテーション「'」かダブルクォーテーション「"」で囲みます。
文末にセミコロン「;」を使って文を区切ります。
セミコロンを忘れるとエラーが起きるので注意！

配列

配列を用いると複数の値をまとめて保存することができます。
配列は仕切りのある箱のようなもので、それぞれのスペースにデータが入っており、0, 1, 2...というインデックス番号によってスペースの名前が付けられています。

配列の基本構文は「$配列名 = array(値１, 値2, ・・・);」のようになっています。配列のデータには先頭から0, 1, 2, ・・・と順に「インデックス番号」が割り振られていきます。配列のデータを取り出すには「インデックス番号」を用いて $配列名[インデックス番号] という風にします。

$names = array('john','Kate','Bob');
echo array[0];
//結果　john
echo array[1];
//結果　Kate

このように名前を配列に入れて、データを取り出して出力することができます。

連想配列

連想配列は、配列と同じく複数のデータをまとめて管理するのに用いられます。配列との違いは、個々の要素を管理するのにインデックス番号ではなく、「キー」と呼ばれる文字列などの値を指定することができる点です。
連想配列では「$配列名 = array('キー名' => '値１', ・・・);」といったように、「=>」を用いてキーと値をセットします。

$user = array(
  'name' => 'Kate',
  'age'  => '30',
  'gander' => 'men'
)

連想配列の値を取り出すには、対応する「キー」を用いて「配列名[キー] 」のようにします。

echo $user['name']

この連想配列を使うことで
まとめてデータを扱うことができるようになります。

PHPを使って、ECサイトを作ったりするので商品の情報を連想配列にすることができます。

$product = [
    'id' => 101,//id
    'name' => 'Wireless Earbuds',//商品名
    'price' => 4999,//値段
    'stock' => 25,//在庫
    'category' => 'Electronics'//カテゴリー
];

３. 簡単なバックエンド実践

お問い合わせフォーム実装

簡単な機能実装をしながらphpのアウトプットを行なっていきましょう。
まずはHTMLを簡単に作成しましょう

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フォームの例</title>
</head>
<body>
    <form action="process_form.php" method="POST">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="message">メッセージ:</label><br>
        <textarea id="message" name="message" rows="5" cols="30" required></textarea><br><br>

        <button type="submit">送信</button>
    </form>
</body>
</html>

次に、フォームデータを受け取り、連想配列に格納します。

form.php

<?php
// フォームから送信されたデータを受け取る
$form_data = [
    'name' => $_POST['name'], // 名前
    'email' => $_POST['email'], // メールアドレス
    'message' => $_POST['message'] // メッセージ
];

// ユーザーにメッセージを表示
echo "こんにちは、" . htmlspecialchars($form_data['name']) . "さん！<br>";
echo "メールアドレス: " . htmlspecialchars($form_data['email']) . "<br>";
echo "メッセージ: <br>" . nl2br(htmlspecialchars($form_data['message']));
?>

HTMLに書いてあるformのinputやtextareaから、name属性を利用して、各項目にデータを送信します。
$form_dataに'name','email','message'が連想配列に格納し、そこから一つずつ情報を取り出し、メッセージが表示されるように設定を行なっています。

1. 連想配列を使う理由
フォームから送信されたデータ（$_POST）はもともと連想配列です。必要なデータだけを抜き出して整理するため、自分で新しい連想配列を作成しています。

2. htmlspecialchars()を使う理由
ユーザーがフォームに悪意のあるスクリプト（XSS攻撃）を入力した場合、それを無効化するためにエスケープ処理を行っています。

3. nl2br()を使う理由
ユーザーがメッセージに改行を含めた場合、それをHTMLで適切に表示するために使用します。

フォームデータの高度な処理
より実務的な応用の技術を学んでいきましょう。
フォームの送信処理を深掘りし、セキュリティや機能性を強化します

CSRF対策
• フォームにCSRFトークン（ランダムな値）を埋め込み、送信時にその値を検証します。
• セッションを使ってトークンをサーバー側で管理。

<?php
// セッションを開始
session_start();

// CSRFトークンを生成
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
?>

HTMLの最初に上記のCSRFトークンの生成のコードの埋め込みを行います。

// CSRFトークンの検証
if (empty($_POST['csrf_token']) || $_POST['csrf_token'] !== $_SESSION['csrf_token']) {
    die("不正なリクエストです。");
}

次にphpに上記のようなCSRFトークンを検証するコードを埋め込みます。
トークンが一致しない場合は処理を中断してエラーメッセージを表示します。

CSRFトークンを利用することで、不正なリクエストを防ぎ、フォーム送信の安全性を大幅に向上させることができます。セッションを正しく管理し、トークンを適切に検証することがセキュリティ対策の鍵です。

入力バリデーション
• ユーザーからの入力が正しい形式であることをサーバー側で確認します。
• 入力内容に不正なスクリプトやSQLインジェクションのリスクがないかを検証。

// 入力バリデーション
if (empty($form_data['name'])) {
    $errors['name'] = "名前を入力してください。";
}

if (empty($form_data['email']) || !filter_var($form_data['email'], FILTER_VALIDATE_EMAIL)) {
    $errors['email'] = "正しいメールアドレスを入力してください。";
}

if (empty($form_data['message'])) {
    $errors['message'] = "メッセージを入力してください。";
}

// エラーがある場合の処理
if (!empty($errors)) {
    echo "エラーがあります:<br>";
    foreach ($errors as $field => $error) {
        echo htmlspecialchars($field) . ": " . htmlspecialchars($error) . "<br>";
    }
    exit;
}

このようなphpのコードを埋め込み、バリデーションをかけ、エラーメッセージを出力させます。

STEP21　wordpress学習

WordPressとは

WordPressとは、だれでも簡単にブログやWebサイトの作成ができるソフトウェアである「コンテンツマネジメントシステム（CMS）」の一つ。
CMSを利用しているWebサイトの60パーセント以上がWordPressで作られています。

WordPressはテーマと呼ばれる機能によって、まるで洋服の着せ替えをするような簡単な感覚で、ホームページ全体に共通するデザインや表示内容を変更することができます。ホームページ全体の見た目や表示機能を変更したくなった場合でも、WordPressなら1つ1つページの設定を変更するといった面倒な作業は必要ありません。

さらに充実したプラグインを活用して、複雑な機能を簡単に実装し、好きなように自由にカスタムができるのも特徴の一つになっています。

1.localのダウンロード

Webサイトを他人に閲覧してもらうにはサーバーが必要になります。基本的には有料サーバーをレンタルし、そのサーバーにHTMLファイルや画像ファイルなどをアップロードします。
しかし、今回は練習ですので自分のパソコンをサーバーに見立てられる「Local」というものをダウウンロードして使用します。

Localダウンロード

WordPressの環境構築のやり方にはMAMPやXAMPPを利用するなど様々な方法が存在しますが、今回は「Local（Local by Flywheel）」を利用します。

写真のようなページが表示されたら、右上の「DOWNLOAD」クリックします。

Macをお使いの方は「Mac」、Windowsをお使いの方は「Windows」を選択してください。

Local をダウンロードするにあたって情報を入力します。
ご自身の名前、メールアドレス、電話番号を入力し、「GET IT NOW!」をクリックしてください。

「click here」をクリックするとダウンロードが開始されます。

Macの場合、Finderの「ダウンロード」に、Local がダウンロードされます。
左の「Local.app」をドラッグして、右の「Applications」上に移動してください。

上記を実行するとLocal.appがFinderの「アプリケーション」に入ります。
ダブルクリックしてアプリケーションを開いてください。

「開く」をクリックしてください。
以上で、Local のダウンロードは完了です。

※お使いのPCの状態や設定によって「Local」が正常にダウンロードできない場合があります。仮想環境の設定ができていないことが原因になることが多いのでその場合は設定の変更をお願いします。

サイトを作成しよう

Local.appを開くと、写真のような画面が表示されますので、「CREATE A NEW SITE」
をクリックしてください。

サイト名を入力します。

サイト名は任意ですが、今回は「project」という名前でプロジェクトを作成します。
サイト名を入力したら右下の「CONTINUE」をクリックしてください。

次は環境を選択します。
「Preferred」を選択し、「CONTINUE」をクリックしてください。
「Custom」を選択すると、PHPのバージョン、Webサーバー、MySQLのバージョンを指定することができます。

サイトで使用するアカウントのユーザーネーム、パスワード、メールアドレスを設定します。

このユーザーネームやパスワードはサイトごとに異なりますので任意のもので構いません。基本パスワードは強固なものにしますが、今回は練習サイトですので簡単でも問題ありません。

こちらの情報はWordPressにログインする際に必要となりますので、忘れないようにしましょう。

入力し終わったら、右下の「ADD SITE」をクリックしてください

Macをお使いの方で、こちらのポップアップが出てきた場合は、ご自身のPCのユーザー名とパスワードを入力し、「OK」をクリックしてください。

Windowsをお使いの方でこちらのポップアップが出てきた場合は「はい」を選択してください。

WordPressのダウンロードが終了するとこちらの画面が表示されます。
上記の画面が表示されれば、問題なくサイトの作成ができています。

サイトの確認とWordPressの基礎設定をしよう

右上の「VIEW SITE」をクリックするとサイト画面に遷移します。

WordPressのログイン画面が表示されます。
先ほど設定したユーザーネームとパスワードを入力してログインしましょう。

WordPressの管理画面に入ることができました。

管理画面では、表示設定やテーマの切り替え、プラグインのインストールなど様々な設定ができます。また、ブログのような記事の投稿もこちらの管理画面から行います。
次のセクションでいくつか設定をしてみましょう。

2. WordPressの構築

教材をLocalのプロジェクト配下に移動する
Localで「project」というサイトを作成しました。

次は教材を「project」サイトのproject/app/public/wp-content/themes配下に移動させます。

分かりづらい部分なので、以下のステップをひとつひとつ確認しながら進めてください。

画像の赤い囲ったところをクリックして、サイトフォルダを開きます。

Localのprojectフォルダが開かれます。

先ほどダウンロードした「project」フォルダーをprojectフォルダー内の「theme」フォルダーに置きます。以下の手順でファイルをたどってthemeフォルダーを開きましょう。

app　→　public　→　 wp-content　→　theme

この「theme」ファイル内に「project」ファイルを置くことでWordPressでテーマとして使うことができます。

WordPressの外観からテーマを見たときに、WordPressでテーマとして表示されているものは、themeフォルダーに同じ名前のファイルが入っています。（projectは除く）

※実際にWordPressテーマとして使用するには、projectフォルダの中にさらに用意するべきファイルがあります。今はそのファイルがないため壊れたテーマとなっており、pronjectはテーマとして反映されておりません。
詳しくは後ほど解説します。

3. Wordpress化

テンプレートパーツファイルとは

WordPressにはテンプレートパーツファイルというものが存在します。
テンプレートパーツファイルとは、コードを書いて呼び出すことで繰り返し使うことができるパーツのようなものです。

例えばページが複数あるサイトの場合、<main>部分が違うだけで、header、footerは同じことが多いですよね。
HTMLで作成すると複数のページで同じ記述することになると思います。
しかし、WordPressではヘッダーであればheader.php、フッターであればfooter.php、サイドバーであればsidebar.phpなどと、共通の部分を一つのテンプレートパーツファイルとして作成することができます。そして、使いたいところで呼び出し使い回せるので、headerを何度も書く必要がなくなります。

VSCodeでテーマを開く

先ほど説明した、テンプレートファイルを用意していきましょう。
VSCodeでコーディングしていきます。
themes配下に移動させたpronavi-wpフォルダをVSCodeで開きます。

必ずthemeフォルダの中にあるpronavi-wpを開いてください。

このように開ければokです

赤枠のファイル追加をクリックして、以下の6つのファイルを追加しましょう。

・index.php（トップページファイル）
・header.php （ヘッダー部分）
・footer.php（フッター部分）
・ sidebar.php（サイドバー部分）
・functions.php（その他の処理）
・style.css（※必須ファイル（テーマ識別））

特に大切なindex.php、style.css、functions.phpについて解説します

・index.php
トップページのコード(今までindex.htmlに書いていたこと)を書くファイルです。

WordPressのテーマとして使用する際に必ず必要になるファイルです。

このファイルがないと、themeの中にファイルをおいても「ファイルが壊れています」と出てしまいます。先程テーマが壊れていると出たのもこのファイルを作っていなかったからです。

style.css

index.phpと同じく、WordPressのテーマとして使用する際に必ず必要になるファイルです。

こちらは今までのcssを書くファイルではなく、テーマの情報を書くファイルになります。

コメントアウトで記述していきます。
試しにテーマの名前（Theme Name）を設定してみましょう。

themeファイルの中に作ったファイルの名前がテーマ名となっています。

style.css（コメントアウトで記述）に記述するコード

functions.php

このファイルは簡単に言えばWordPressに機能を追加できるファイルです。
cssや、javascript、googleフォントなど今までindex.htmlに記述して読み込んでいたものはこのファイルに記述して読み込みます。

よくあるミスとしてfunction.php(functionsのsが抜けてしまっている)という状態でファイルを作ってしまうことがあります。
このままだとエラーになってしまいますので、気を付けて下さい。

WordPressの管理画面からテーマを有効化する

WordPressでpronaviのテーマを有効化しましょう。
Wordpressの管理画面を開いて、左側の外観を選択します。
有効化をクリック。
「project」がサイトのテーマに設定されました。

サイトを表示させよう

有効化にしているテーマをサイトで表示して結果を確認しましょう。

管理画面の左上の赤枠をホバーすると「サイトを表示」と出てくるので、その上で右クリックして、「新しいタブで開く」を選択。

テーマ作成をしてる際に管理画面とサイトをいったり来たりとすることが多いので、新しいタブで開いた方が効率がいいです。

開いた別タブを確認しましょう。

開いてみましたが、真っ白のページになっています。これは、エラーではなくトップページとなるindex.phpにまだ何も記述していないからです。
問題ありませんので、このまま次にいきます。

index.phpにindex.htmlの内容をコピーする

VSCodeに戻って、トップページを表示されるようにindex.htmlのコードをすべてindex.phpにコピペしましょう。

サイトを見てみると、先ほどコピーしたコードが反映されているようです。
しかし、写真やcssなどは反映されていません。

functions.phpに記述してスタイルを適応させる

cssの読み込みはfunctions.phpにて行います。
今回読み込みたいのは、
・reset.css
・main.css

functions.phpに以下のコードを書いて、2つのファイルを読み込みます。

<?php
add_action('wp_enqueue_scripts', 'add_styles');

function add_styles()
{
    // reset style
    wp_register_style(
        'reset_style',
        "https://unpkg.com/ress/dist/ress.min.css",
        array(),
        '1.0'
    );

    // main style
    wp_enqueue_style(
        'main_style',
        get_template_directory_uri() . '/css/main.css',
        array('reset_style'),
        '1.0'
    );
}
?>

それぞれのコードを理解してみよう

先ほどfunctions.phpに書いたコードを上から順に解説します。

add_action('wp_enqueue_scripts', 'add_styles');

直訳すると、「サイト公開時にスタイルを追加する処理を行う」という意味になります。ここでいうスタイルとはCSS のことですので、簡単に言うと、CSSファイルを読み込ませますよという指令をここで行っています。

「wp_enqueue_scripts」が読み込みタイミングを指定しており、サイトが表示された時にという意味を示しています。

function add_styles()
{
    // reset style
    wp_register_style(
        'reset_style',
        "https://unpkg.com/ress/dist/ress.min.css",
        array(),
        '1.0'
    );

    // main style
    wp_enqueue_style(
        'main_style',
        get_template_directory_uri() . '/css/main.css',
        array('reset_style'),
        '1.0'
    );
}

２行目以降は実際にGoogleフォントとCSSを読み込むコードが書かれています。
reset.css、main.cssを読み込んでいます。

それぞれ読み込む一番初めの所に

wp_register_style（reset.css）、wp_enqueue_style（main.css)

が記述されています。この二つの違う点は、
wp_register_styleで記述した方が先に読み込まれ、
wp_enqueue_styleで記述した方は、wp_register_styleが読み込まれた後に読み込まれるところです。

main.cssはreset.cssを読み込ませてから読み込ませる必要があります。（HTMLでも先にreset.cssを読み込んでいたはずです）

このようにファイルを読み込む順を決めたいときに、この二つをセットで使用します。

難しいかもしれませんが、とりあえずこれを書くのだなと思っていただければ大丈夫です。

css読み込みのポイントをお伝えします。
①ファイルの読み込み順番を考える。

➁・順番を付ける必要がある時
→先に読み込みたいものは、wp_register_style、
　最後に読み込みたいものは、wp_enqueue_styleを使用。

　・順番が特にない時
→全てwp_enqueue_styleを使用。

③順番を付ける必要がある時
→最後に読み込みたいものに、先に読み込みたいファイルのハンドル名（第一引数）を指定する。（先に読み込みたいものは空欄）

ここまで書けましたが、まだcssは反映されていません。さらに記述が必要ですので次に進みましょう。

headに必要なコードを記述しよう

index.phpを開き、</head>の直前にwp_head();を追加し、linkタグ(<link></link>)はすべて削除しましょう。

wp_head();はWordpress化する上で必ず記入する必要があります。

Wordpressに必要な情報が読み込まれると思ってください。

普段のHTMLとは違い、index.phpではlinkタグ等を使用して外部ファイルを読み込むやり方は非推奨であるため、linkタグは全て消去します。

必要な情報は先程functions.phpに記述したため消去しても問題ありません。
funvtions.phpに記述したコードは、読み込まれるとlinkタグに変換されて、headタグの中に組み込まれます。

サイトをリロードして、結果を見てみましょう

CSSが反映されていますね！

footerに必要なコードを記述しよう

headと同じくfooterにも、Wordpress特有のコードを書く必要があります。

ndex.phpを開き、</footer>の直後にwp_footer();を追加しましょう。

<?php wp_footer();?>

headと同じくfooterにも、Wordpress特有のコードを書く必要があります。
wp_footer();も、働きとしてはwp_head();と同じです。</body>直前に、ページの最後に読み込まれるべきスクリプトなどが出力されます。

そのためwp_footer();がないと一部のスクリプトが読み込まれずエラーになったり、管理バーが表示されないなど不具合が出てきます。

画像を読み込む

スタイルは適用されましたが、画像がまだ表示されていません。

今回はすべてのimgタグで読み込まれている画像を対象に関数を適用させます。

変更前

<img
  src="img/thumb_article.jpg"
  class="post-thumb"
/>

変更後

<img
  src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article.jpg' ); ?>"
  class="post-thumb"
/>

先程CSSファイルまでのパスを取得する際に使用したget_template_directory_uri();が使われています。おさらいをすると、get_template_directory_uri();はテーマフォルダまでのパスを取得します。また、リンクということでesc_url()という形でエスケープ化されています。

それではすべてのimgタグのsrcタグを書き換えましょう。

写真も反映されるようになりましたね！！！

次のセクションではもっとよくwordpressを活用できるプラグインを説明します

STEP22　wordpress プラグイン

１.SEO（Yoast SEO）

Yoast SEOも、SEO対策に関係する機能が豊富に搭載されたプラグインです。
基本的なSEO対策であれば、本プラグインだけで問題なく対応できます。
Yoast SEOの特徴は、以下のとおりです。

初心者向けの設定ウィザード（チュートリアルのようなもの）がある
改善すべき点を教えてくれる
2週間ごとに更新されており、バグの改善が見込める

All in One SEO PackでもSEO対策ができるため、どちらか1つだけを入れるのがおすすめです。

それぞれ細かな機能は異なるので、SEO対策に取り組みたい方はあらかじめ機能を比較してからインストールするようにしましょう。

２.フォーム（Contact Form 7）

Contact Form 7は、WordPressサイトに簡単に問い合わせフォームを作成できるプラグインです。コードの知識がなくても、直感的な操作でカスタマイズ可能なフォームを作成することができます。
Contact Form 7の特徴は、以下のとおりです。

簡単にカスタマイズ可能: ドラッグ&ドロップでフォームの項目を追加・編集できるため、初心者でも簡単にカスタマイズが可能です。

多言語対応: 多言語サイトでも利用できるため、国際的なビジネスや多国籍の顧客に対応したフォームを作成できます。

スパム対策機能: reCAPTCHAやAkismetと連携することで、スパムメールを効果的に防止します。

複数のフォームを管理: 複数の問い合わせフォームを簡単に管理・運用することができ、用途に応じたフォームを作成できます。

Contact Form 7は、サイトの訪問者と直接コミュニケーションを取るための重要なツールです。簡単に導入できる上、豊富なカスタマイズオプションにより、どのようなニーズにも対応可能な問い合わせフォームを作成することができます。サイトの利便性を向上させるために、ぜひ活用してみてください。

３.ページビルダー（Elementor）

ノーコードでプロ仕様のWordPressサイトを作れる最強プラグイン「Elementor」
Elementorは、WordPressに追加するだけで、簡単に美しいWebサイトを作ることができるプラグインです。特別なプログラミングの知識がなくても、直感的に操作できるので、誰でもオリジナルのサイトを作成できます。ドラッグ＆ドロップで要素を配置し、リアルタイムでデザインを確認しながら編集できるのが大きな特徴です。

ノーコードツールは確かにコーディングの知識がなくても使えはしますが、コーディングの知識がある人が使うと制作スピードは上がり、レイアウトも含めて綺麗なサイトを作り上げることができます。

４.ACF（Advanced Custom Fields）

Advanced Custom Fields（ACF）とは、WordPressの固定ページや投稿ページに、入力項目を新たに設定できるプラグインのことです。

WordPressであらかじめ設定されている「タイトル」や「本文」以外に、別の入力項目が必要になったときに使用します。

例えば、ある商品を紹介したいときに「価格」や「サイズ」など、よく使用する項目があるとします。

そういった場合、あらかじめ入力項目を設定しておくことで、都度変更する手間が省けるのです。

Advanced Custom Fieldsのプラグインをインストールすると、下記のように、投稿ページに新たな入力欄が追加されます。

入力項目の名前・内容・入力する位置などは、自由にカスタマイズできます。

プラグインを有効に活用して、充実したwebサイトの構築を行なっていきましょう。

STEP23　クラウドソーシング攻略

1.プロフィールの最適化

ここまでの知識を活かして、案件獲得するための準備をしていきます。
まずはクラウドソーシングサイトのプロフィール文の最適化を行なっていきましょう。

プロフィールは、クライアントのことを意識して書きましょう。
なぜなら
クライアントに必ず見られているからです
プロフィールは、クライアントに必ず見られているという意識で作りましょう。

案件に応募を行なうと、クライアントに必ず通知がいきます。
クライアントは応募からあなたのプロフィールを確認し、
あなたのスキル、人柄、経歴を確認し、あなたに案件を依頼しようか考える基準にします。

ただ適当にプロフィール文を作るのではなく、クライアントのことを意識して書いていきましょう。
逆に言うとクライアントがプロフィールを見た時に「あなたはだれでどんな人？」なのか分かる内容を書いていない応募者は無視されます。

そうなると当然、発注を検討するに至らないですよね。

ではどのようなプロフィール文を書いたらいいのかのポイントをお伝えします。

実績が1番重要
クライアントの不安を削る
長すぎず読みやすく削る

プロフィールでは実績が1番重要です。

なぜなら、人は「何を言うか」よりも「誰が言うか」を重要視しているからですね。

あなたが「どんな実績を持つ人物か」によって、伝えたい言葉が相手に届くか決まります。

実績がまだない場合、何をプロフィールに載せれば良いのか迷うかもしれません。
そのような場合は、自分がこれまでに作成したポートフォリオが実績として重要な役割をしてくれます。例えば、個人で取り組んだ作品や学習の中で制作したwebサイトなどを具体的に記載することで、あなたのスキルや得意分野をアピールできます。案件に携わった経験がなくても、自分の取り組みを丁寧に伝えることで信頼を得ることができます。

クライアントの不安を削る

プロフィールを書く時には、クライアントの不安を削っていく感覚で書きましょう。

お仕事を依頼するとき、クライアントは不安でいっぱいです。

・ちゃんと納期までに納品してくれるのか
・低いクオリティのサイトになるのではないか
・後から高い請求をされるのではないか

など、さまざまな角度から不安を抱えています。このようなクライアントの心の声に耳を傾けて、１つ１つ丁寧に回答していくようにプロフィールを書くことが大切です。

長すぎず読みやすく削る

プロフィール文を記載する時は、簡潔に分かりやすく書きましょう！
お仕事を募集すると、クライアントにはたくさんの提案文が届きます。
ひとつひとつ提案文や提案者のプロフィールを読み込む時間がないわけです。

だから簡潔に分かりやすく記載する必要があります。

自分の伝えたいアピールポイント・セールスポイントを見つけ、そこが伝わるようにプロフィール文の内容を添削しましょう。

以上のことを踏まえてクライアントが仕事を頼みたいと思えるようなプロフィール文の作成を行いましょう。

2. ターゲット案件の選定

初めて案件に応募していくことにまだ皆さんは不安を感じているんじゃないでしょうか。誰しもはじめは初心者ですし、執筆している僕自身もはじめは不安でした。

ここではそんなみなさんのために、応募していく案件の選び方をお話しします。

まずは情報がないと案件に応募できないので情報収集を行います。
少しのチャンスを機会も逃さないためには案件の状況を常にチェックすることが大切になります。
始めのうちは特に、自分から行動しないと案件は獲得できません。
クラウドソーシングサイトなどを使用する場合はサイトを毎日チェックするのを習慣づけましょう。
案件の状況は、日々変わります。
「自分に合う案件がない！」と思っても、翌日には条件に合う案件が出ている可能性もあります。
定期的に案件をチェックし、機会損失を減らしましょう。

各クラウドソーシングサイト
SNS
Web制作会社
毎日10分でも案件をチェックする時間を設けてみてください。

次に自分に合う案件を探しましょう。

得意分野の案件なら、仕事もスムーズに進み、クライアントの要望に柔軟に応えられます。

つまり、数ある案件の中から「これは得意だからできる」という案件をピックアップし、受注することで、仕事の効率を良く実績を上げられるでしょう。

クライアントにも「この人はこの分野が得意なんだ」と知ってもらうことで、次の仕事にも繋がります。

ですので、得意な案件を優先的に探し、応募する際に強く自己アピールするといいでしょう。

自分の強みを見つけ、それをさらに伸ばしていくのもいいですし、新しいスキルをさらに身につけ、強みを増やしていくのもいいかなと思います。

自分に合った案件があればそれにめがけて応募をかけていくような流れになります。

3. 提案文の作成

実際に提案を行うには提案文が必要になります。
プロフ文の時と同様にクライアントに必ず見られるものになります。

未経験で実績を積むための提案は現実的にはとりづらく、難しくはあるのですが、
特別に未経験・実績なしの状態での提案文のコツについてお話ししていこうと思います。

未経験のうちは、フルネームを名乗りましょう。

採用側は、全く実績がなくラフ・砕けたニックネームの相手には「遊び半分かもしれない」と感じ、大事な仕事を任せて報酬を払う気にはなりません。

その為、姓名で名乗られた方が印象も良くなります。

社会人としてしっかり働いていた経歴

類似の経験がなくても、社会人としてしっかり働いていた経歴を記載します。
契約後、納期間際に急に音信不通になってバックれてしまう動画編集者が非常に多いです。
その為、案件と関係のない職歴であっても社会人として最低限のマナーや責任感があると判断できる要素は大切です。

正社員でなくてもどこかに所属して勤務していたことを記載すれば、信頼性が高くなります。専門職の方は専門職のLP・HPの案件につながることもあります！（例：歯科衛生士の職歴→歯列矯正のLP案件獲得3万円）

具体的なやる気、誠意を見せる

クライアントが納期や品質に嫌悪感がある場合には

報酬の発生しないサンプル案件を提供してもらい、デザイン指示と納期を確実に守る。
未経験の為、制作の方向性がもし違ったら早めに修正できるように、納期より半分の日付の時点で途中までの作品を一旦納品する。

といったような内容を入れ、具体例を用いてクライアントの不安感を払拭していくことが大切になります。

ただし、案件につながった場合に実践できないような具体例は自分の首を絞め逆効果になってしまうので、できる範囲での提案を心がけましょう。

STEP24　案件獲得について

1. 提案

STEP22で紹介したクラウドソーシングの攻略を使って、実際に案件を応募していきます。

クラウドソーシングでは企業だけでなく個人でもクライアントとして発注することができるサービスです。そのため、割りに合わないひどい低価格で募集されている案件もたくさんあります。
未経験で実績が0の時は、まずはこういった人気のない案件を狙うのも一つの手です。

なぜなら、実力・実績のある人はまず応募しませんし、未経験・初級者でも敬遠するので、丁寧な応募文とポートフォリオを記載すれば高い確率で採用されやすいからです。
そして一旦報酬のことは我慢し、高評価を得るために全力で仕事に取り組みます。

これは、クラウドソーシング上の実務未経験の自分のアカウントに、実績を数値で証明していくためです。
目安として「受注数と高評価を3件積む」までは、今後に活かすためにライバルの少ない案件に全力で取り組みます。
3件以上実績があれば、条件のいい案件にも採用されやすくなりますので、めげずに挑戦しましょう。

2. アポ（初回連絡・ヒアリング）

文面上でやり取りをする人と実際にzoomやgooglemeetを使用して顔合わせした人だとどちらが信用しやすいですか？

実際に顔合わせした方信用しやすくてお仕事をお任せしたいとなりますよね！

クラウドソーシングサイトで、
普通に提案するだけではなく、クライアントとの
商談を挟むようにしましょう。

また、商談や実装の中で
クライアントとの関係値をより深めることによって、
今後の仕事も取れる可能性が高まるからそこを目標に頑張りましょう。

ヒアリング

まずは「喋りやすい雰囲気」を作っていくことが重要です。
そのために必要な項目は以下の項目が主に挙げられます。

・ハキハキした挨拶
・正しいけれども堅すぎない敬語
・相手の依頼内容を理解していること

これらの要素を踏まえた上でヒアリングに入ると会話が進みやすいです。
なので、アポ前に事前にアプリ上に書いてある依頼内容については把握しておき、できれば参考リンクまで目を通していると準備万端です。

ヒアリング会のゴールと目的

ヒアリングを通してクライアントの目的を明確にし、
目的達成のためにクライアントがやって欲しいことを聞き出します。
やって欲しい内容を細分化し、クライアントと方向性をすり合わせを行います。

まず目的を明確にします。目的によって聞くことが変わってきます。

サイト・LP制作案件の場合のヒアリング内容として
・デザインとコーディングどちらをやるのかまたは両方か
・何を重要視してサイトを作るか（デザイン・集客・機能追加）
・カラーのイメージはあるか（デザイン依頼の場合）
・実装は何ページあるか
・納品方法について（コードを渡すだけか、サーバーアップまでやるか）
・ターゲットや事業コンセプトは決まっているか

ここまでで大まかなやりたいことをヒアリングしておきます。
ここからは細かい依頼要件を定義していきます。

ここも非常に重要な部分で、「何をどこまでやるか」によって金額も変わってきますし、工数・納品期間も変わってきます。
うまくヒアリングができないと下手したらクレームに繋がる可能性が高いです。

細分化してヒアリングする必要がある部分をまとめてみました。
・デザインのイメージ（コンセプト・カラーは明確にしておくと◯）
・CMSがすでに実装されているのか新しく実装するのか
・素材/ライティングはこちらでやるのか用意してもらえるのか

実装に移ってから、何度もクライアントに質問するのは大変になるので、
ヒアリングでできる限りのことを明確にしておくことが非常に大事になります。

3. 見積もり・交渉

交渉材料として挙げられるのは大きく次の３つです。
①納期について
②価格について

①納期について

納期が一番大事になります。
納期がズレることでクライアントからのクレームにつながります。
ですので、ここでおおよその着手期間を洗い出して、適正納期を交渉材料にしてください。
LP制作：コーディング１週間・デザイン１週間
HP制作：デザイン１ページ３〜４日、コーディングは機能の実装により期間が前後します。
サイト修正：コーディングは難しいことを要求されることがあるので、その場で交渉せず一度持ち帰ることを検討してください。

②価格について

おおよその単価ですが、
基本的にデザインとコーディングの単価は同じと考えてください。
LP制作：5〜15万(デザイン＋コーディング)
HP制作：トップページ：3.5万　下層ページ：1〜1.5万
機能実装：2万〜（実装内容等により要相談）

上記はあくまでおおよその案件単価の相場です。しかし、未経験で初案件に応募した際にはクライアントが提示する最低単価で仕事を引き受けるくらいの気持ちで応募し、勉強の一環だと思って引き受けるようにしましょう。

実績やスキルが身に付いてきたら単価は上がっていくのでまずは、下積みをコツコツ積み上げて成長していきましょう。

4. 受注

クライアントがあなたに仕事を依頼したいとなり、案件の受注を行う場合には、先方との支払い方法を確認し、案件を進めていく上で重要な連絡手段を決めていきます。

支払いについてはクラウドソーシングを通しての支払いになるのか、直接クライアントからいただくのかという2択になります。

直接やりとりする場合は請求書を作成する必要があるので、早急に「どんな案件でいくらの金額を請求する」という請求書を作成してください。

サイトやアプリを通じて請求する場合は忘れられることや、期限が遅くなることがあるので最後までそこを確認しましょう。

連絡手段についてですが、短い案件であれば数回のやりとりですみますが、HP制作など大きな案件になってきますと実装期間も長くなり、進捗報告が必要になってきます。

また、受注されるまでに質問を受けることが多いので、あらかじめどのような連絡手段で連絡を取るかを決め、必要に応じて定例のやり取りを挟むようにしましょう。相手とのコミュニケーションを図り、納品まで進めましょう。

ここまでヒアリングから交渉・受注まで話してきました。
ヒアリングの中で要件が難しすぎたり、期限が近くて実装できるかわからないなど、その場で答えてしまうと思わぬことが起こってしまう場合があります。
その場合は「１度持ち帰る」という戦術を使い、しっかりと考えをまとめた上で建設的な話し合いができるように心がけましょう。

何でもかんでも持ち帰るのも相手に不信感を持たせてしまうので、ある程度は持ち帰るそれ以外の部分についてはその場で返答をすることを検討してください。

５. 着手・実装

着手において必要なことはいつまでに何をどこまで終わらせないといけないかを明確にすることです。

納期から逆算して細分化を行い、スケージュールをしっかり管理しましょう。
プロジェクトによってはガントチャート等を作成し、クライアントと案件の進捗状況について可視化して共有するといいと思います。

着手期間中への進捗報告のタイミングは下記の例を参考にするといいかもしれません。

トーン＆マナーの提出→クライアント確認
↓
ページ全体へデザインを反映→クライアント確認
↓
全ページ作成→クライアント確認
↓
コーディング（トップページ）→クライアント確認
↓
コーディング（下層ページ）→クライアント確認

コーディングにおいては途中でローカル環境・テスト環境で確認を行いクライアントに確認していただき問題なかったら実装するという動きをするとスムーズに案件を進められると思います。

デザイン・コーディングに関わらず、着手期間が１ヶ月以上かかるような案件に関しては週単位で先方へ報告を行うことでトラブルやクレームがなく進められるので進捗報告はなるべく行うようにしていきましょう。

6. 納品

クライアントから完了OKが出ることを納品と言います。
この納品を行ってようやく案件完了です！

納品方法については案件によって変わっていきます。
・デザインならどんなデータで送るのか。
・コーディングならファイルのみかサーバーに入れ込むのか

事前のアポやヒアリングで行ったやり取りの中で決まったやり方で納品を完了してください。

納品後の対応

修正の対応期間
納品完了後も、一定期間はバグ修正や微調整を無料で対応する場合もあります。その可否や期間、範囲を明示すると親切です。
「検収期間○日間以内であれば、この範囲の修正は無料対応します」など。

追加作業や修正の費用・範囲
検収期間を過ぎた場合の対応がどうなるか、追加料金が発生する場合は明確に書いておくと、今後のトラブル回避につながります。

7. 完了・評価依頼

取引完了後すぐにアクションを起こす

クライアントが納品完了を承認したら、すぐに「支払い」および「評価」の依頼を行う流れを提示しましょう
「納品ありがとうございました。ご確認いただき、問題なければ〇〇サイト上でのお支払いと評価のご対応をお願いできますでしょうか？」など、具体的な例文があるとスムーズです。

良い評価レビューをもらうための工夫
納品・完了報告メッセージの中で、「今後も何かございましたらお気軽にお声がけください」など、フォロー体制を示しましょう。
「評価に関しても率直なご感想をいただけますと幸いです」と、依頼の姿勢を丁寧に伝えると印象が良くいいレビューにつながります。

評価レビューを書いていただくことは、実績の評価に直結する部分なので、次の案件の繋がりやすさや信頼度に影響します。

評価・支払いまでの進め方

クラウドソーシングサイトで「納品完了」ボタンを押してもクライアントの承認がなければ支払いが行われないケースがあります。スムーズに支払いと評価が行われるよう、クライアントとのやり取りのテンプレートやコツを入れておくと良いです。

おわりに

お疲れ様でした。以上が副業プログラミング教科書の全貌となります。
本当に疲れ切ったよ、、って人が多いと思いますが、これは読んで終わりではなく、いかに使いこなして自分の実力を上げるか！

ここが勝負どころなので、使いこなしてください！

そして、ぜひ公式LINEの方に感想を送ってもらえればと思います😭
そしたらいるかとかかしが大喜びします。

ではでは！読んでいただきありがとうございます！
これからも一緒に頑張りましょう🔥

いるか　かかし

副業プログラミングの教科書

はじめに

世は副業戦国時代

このテキストの使い方

STEP1 目的・目標設定

なぜ目的・目標を設定する必要があるのか？

目的・目標を設定することによる効果

目的・目標を具体的に設定する方法

具体例: 目標設定のプロセス

結論

STEP2 購入パソコンスペック＋VScode(Visual Studio Code)

VScode(Visual Studio Code)

ダウンロードはこれで完了です！

拡張機能の追加

STEP3 Chrome

1. Visual Inspector

2. CSS Pepper

3. HeadingsMap

4. ColorPick Eyedropper

4. What Font

6.WhatRuns

7.GetTabInfo

8.Web Maker

STEP4 Progateの進め方

はじめに

進め方のポイント

Progateの正しい勉強方法

STEP5 Progate学習レッスンの進め方

STEP6 Progate道場レッスンの進め方

STEP7 検証ツールの使い方

1.ページのHTMLを確認する

2.HTMLを編集する

3. ページのCSSを確認する

4. CSSを編集する

5. CSSを追加する

6.レスポンシブの確認

STEP8 模写コーディングとは？オススメサイト

なぜ模写をする必要があるのか？

模写コーディングから得られる学び

模写コーディングを成功させるポイント

模写コーディングの具体的な進め方の手順

STEP9 部分的な模写コーディング

1.全体の構造を分かりやすくするため

2.IDやクラスを使うのは「スタイリング」や「機能追加」のため

3.画像やテキストには「意味を持たせる」必要がある

4.見出しタグで情報の「階層」を表す

5.テキストと画像を使い分ける

まとめ

このCSSの目的と効果

STEP10 静的な模写コーディング①PHOTO BOOK

STEP11 静的な模写コーディング②Mywork

STEP12 静的な模写コーディング③web Entertainment design

コーディングのヒント

STEP13 JavaScript・jQueryインプット

なぜjavascript・jQueryを学ぶのか

1. JavaScriptの基本文法を学ぶ

2. JavaScriptを使ったオブジェクト指向

どうしてクラスとインスタンスを使うの？

3. jQueryの基礎を学ぼう

jQueryとは？

jQueryの書き方

イベントとは？

STEP14 検証ツールの使い方２

1. デベロッパーツールを開く

デベロッパーツールの基本構成

2.DOMの検証（Elementsタブ）

DOMとは？

Elementsタブの使い方

実用例

3. JavaScriptの検証（Consoleタブ）

主な機能

実用例

4. ネットワークの確認（Networkタブ）

Networkタブとは？

ネットワーク アクティビティをログに記録

実際に確認するポイント

Networkタブの活用例

5: ブレークポイントでコードをデバッグ（Sourcesタブ）

ブレークポイントを設定する

JavaScriptを実行する

STEP1　目的・目標設定

STEP2　購入パソコンスペック＋VScode(Visual Studio Code)

STEP3　Chrome

STEP4　Progateの進め方

STEP5　Progate学習レッスンの進め方

STEP6　Progate道場レッスンの進め方

STEP7　検証ツールの使い方

STEP8　模写コーディングとは？オススメサイト

STEP9　部分的な模写コーディング

STEP10　静的な模写コーディング①PHOTO BOOK

STEP11　静的な模写コーディング②Mywork

STEP12　静的な模写コーディング③web Entertainment design

コーディングのヒント　

STEP14　検証ツールの使い方２

ネットワークアクティビティをログに記録

STEP15　動的な模写コーディング　jsアニメーション　

STEP16　デザイン基本概論

STEP18　ポートフォリオ制作

STEP19　Github　サーバーについて

STEP20　PHPインプット

STEP21　wordpress学習

STEP22　wordpress プラグイン

STEP23　クラウドソーシング攻略

STEP24　案件獲得について