【Studioはじめてみた #4】課題2に挑み続ける日々。ホバーに泣き、レスポンシブに叫ぶ

こんにちは、IT＋の巴です。
Studioを使ったWeb制作を学び始めて4週目に突入しました。
前回の記事「質問しまくった添削ウィーク。そして、まさかの次の課題…！」をご覧ください。

前回から始まった「課題2：Studio社の採用サイト構築※」に引き続き、今週も奮闘の日々をお届けします。

※ちなみに、2025年8月8日にStudio社の採用サイトはリニューアル済み。私の課題対象だった“旧サイト”はもう見られません。
リニューアル後のサイトはさらに要素てんこ盛りで、Web制作ど初心者が構築できる代物ではなさそう……。心底、旧サイトの模写でよかったと思っています（笑）

旧サイトのファーストビュー

1. とりあえず「完成」してみた

デベロッパーツールで構造をのぞきながら、上から下まで“なんとか”並べてみました。
見た目だけは「完成」！（※動きはまだまだ）
ホバーやレスポンシブは一旦スルー。

オリジナルサイトと自分のサイトをタブで高速切り替え。
「重なってる？」「大きさズレてる？」をひたすら確認……作業中の自分、完全に間違い探し職人でした。

上：オリジナルサイト
下：私が構築したサイト

2. ホバーの沼：文字が回転する謎現象

大苦戦ポイントその1が“ホバー”。
カーソルを当てた瞬間、文字が……なぜか斜めに回転！！！

「えっ？」
「えっっ？？？」
「え、誰か手品してる？」

頭の中は完全に「？？？」の渦。え、これサイトで再現できるの？と本気でびっくり。

そして気づいたのは──
Web構築を知らない頃の私は、ホバーでどんな動きをしていても「おしゃれ〜」と全体的に眺めるだけ。
アニメーションを1つ1つ見て「この動きすごい！」なんて考えたことはありませんでした。

でも今は違います。4週間の学習を経て、ホバーの動きを見るたびに心の中でつぶやくのは──
「え、これ仕込んだ人、神なの？」
Web構築している人みんなが、もはや尊い存在に見えてきます。

3. そして現れる壁：レスポンシブ

課題1からおなじみの強敵「スマホ表示」。
PCで整ったはずのレイアウトが、iPhoneで見た瞬間に大崩壊。

文字がはみ出る。
画像のバランスが狂う。
なぜか左端に揃ってくれないロゴ...
修正しても直らない。直したはずがさらに崩れる。

──PC画面に顔を近づけてデベロッパーツールを睨み続ける私。はたから見れば、ただの怪しい人です。

4. 質問マシンガン再び

ホバーもレスポンシブも分からない。その他の謎も山ほど。
Slackはもはや「質問掲示板」と化しました。

「これとこれ、どう違うんですか？」
「ここの数値、どこから来てるんですか？」

1つ解決したと思えば、また新しい疑問。完全に“もぐら叩き状態”。
叩いても叩いても、新しいもぐら（疑問）が顔を出します。

5. 神は動画に宿る

そんな私を救ったのが、メンターさんの“動画解説”。
文章で読んでも理解不能だったことが、動画だと3分で「あー！なるほど！」と腑に落ちる。

もうこれは、“人類の叡智”。
動画って文明の光だったんですね。

6. そして、提出！

何度も詰まり、何度も質問し、何度も修正して……
ついに課題2を提出できました！

提出ボタンを押した瞬間、長いトンネルを抜けたかのような解放感。
「わーーー！」と叫びたい気分でした（実際は静かに小さくガッツポーズ）。

検証結果その2

────────────────────
HTMLもCSSも知らない Web制作ど初心者 でも、
📦 4週間でStudio社の採用サイトを「だいたい」完成させられる！
（ただしリニューアル前の旧サイトに限る！）

──これが今回のリアルな学びから得た2つ目の成果でした。

Vol.5へ続く！

こうしてなんとか課題2を提出はできたものの……ここで終わりではありませんでした。
まだまだよく見ると訂正箇所が多数！

「完成した！」と思ったのは、あくまで“とりあえず”。
その後は修正に次ぐ修正の1週間が待っていました。

次回は、この“フィードバック修正地獄”についてお届けします。

ではまた、Vol.5で！