【Studioはじめてみた #3】質問しまくった添削ウィーク。そして、まさかの次の課題…！

こんにちは、IT+の巴です。
Studioを使ったWeb制作を学び始めて3週目に入りました。

今回は、1つ目の課題を提出してから添削を受け、修正に取り組んだ一連の体験と、
その後にやってきた衝撃の2つ目の課題について書いていこうと思います。

前回の記事は「“分からない”を乗り越える練習中。」をご覧ください。

1. 質問だらけのフィードバックタイム

課題を提出したあと、出てくるわ出てくるわ、質問の山！
これはチャンスとばかりに、Slackでメンターさんにこれでもかと投げました。

たとえば──

• 「リンクをつけた〈a〉タグを〈h1〉にできないのはなぜ？」
  　→ 今見ると初歩すぎて笑えるレベルですが、本気で分かりませんでしたw

• 「ある要素を固定したいのに、なぜかずれる…」
  　→ 何がいけないのか、検証の方法すら分からず…

そして、レイヤーの扱いやグループの階層構造など、「これって必要？不要？」という判断がつかないことだらけ。

もはや、何を聞けばいいのかを言語化するところから始まっていました。

2. パーソナルプランのありがたさ、ここに極まる

私はcaroa campの「パーソナルプラン」で受講しています。
このプラン、週1回の1時間オンライン面談があり、
事前に送っていた質問をもとに、画面共有で丁寧に解説してもらえるんです。

さらに、面談中に解決しきれなかった部分は、あとからSlackで何度でも質問OK。
必要に応じて画面収録動画で説明してくださるという神対応。

初心者にとってこのサポートは本当にありがたく、
分からなかったポイントが1つずつクリアになっていくことで、

「わからないまま放置する」という状況が減っていくのを感じました。

3. 修正完了！“作った”から“理解して直した”へ

添削を受けて、自分がどこで間違っていたか、何が不十分だったかが明確になることで、
「作って終わり」ではなく、「理解して改善する」プロセスこそが本当の学びだと実感。

自分の“わかってなさ”を認めたうえで、
メンターの力を借りながら1つずつ乗り越えていく──
この感覚そのものが、今の自分にとっての成長でした。

4. そして、やってきた課題2：え、これマジ？

課題1の修正が終わるや否や、次の課題がやってきました。

なんと……Studio社の採用サイトの構築！

えっ？
えっっっ？？？
あのおしゃれすぎるあのサイトを？今の私が？つくるの？？？？
私、まだStudio触って3週間なんですが……（震）

メンターさん「意外とシンプルですよ」

……いやいやいや、本気ですか？

でも、やるしかない。

5. 今回はFigmaもなし。頼れるのは「デベロッパーツール」だけ

課題1は、Figmaのデザインを見ながら“見たまま作る”スタイルだったので、
レイアウトもスタイルも、ある意味「答え合わせ」しながら進めることができました。

しかし、課題2ではFigmaが一切ナシ。
頼れるのは、ブラウザに内蔵された「デベロッパーツール」のみ。

そう、右クリックして出てくる「検証」ってやつです。
私はこれまで一度も開いたことがありませんでした。

それを開いて、コードの中身を読み解き、構造を把握して、Studioで再現していく……
HTMLすらよくわかっていない状態で、文字とタグの海に飛び込むことに。
一気に難易度、跳ね上がりました。

課題1のFigma↓

6. デベロッパーツールって何？

「デベロッパーツール（開発者ツール）」は、ブラウザに内蔵されている“サイトの裏側”をのぞけるツールです。
右クリックして「検証」を選ぶと出てくる、英数字と記号がずら〜っと並んだ画面──
…初めて開いたとき、「え、これ見ていいやつ！？」って本気で思いました（笑）
なんか、PCの深部にうっかり入っちゃったような、見ちゃいけないものを開いた感すごかったです。

でも、実はここで見られるのは、

• そのテキストや画像がどんなタグで囲まれてるのか？

• フォントやサイズは？

• どれくらい余白（マージン・パディング）があるのか？

などなど、Webページの構造とデザインの情報まるっと。

Studioで模写するには、この“設計図”みたいな情報がめちゃくちゃ大事！
……なんですが、初心者の私は完全に「未知との遭遇」状態。
画面を前に「なんでみんなこんなの読めるの？」って思考停止しました。

7. 意味不明すぎる。でも、だからこそ面白い

とりあえず、フォントの確認方法や、パディング／マージンの数値の見方など、
最低限の使い方をメンターさんに教えてもらって、いざ構築スタート！

とはいえ、ほぼ何も分からない状態で実践に挑むのは、やっぱり大変。

大人になってから、こんなに“意味不明なもの”に正面から向き合う機会って
実はなかなかないんじゃないでしょうか。

普段は、わからないことも調べればすぐに答えが出てくることが多いけれど、
今回はちがった。
「全然わからない！！」という感覚が、すごく久しぶりでした。

どこを見ればいいの？
この数値ってどこに影響してるの？
何がどう繋がってるの？？

そんな混乱の中でも、「とりあえずやってみる」を繰り返していくうちに、
ほんの少しずつですが、“読めそうな気がする”感覚が育ちはじめています。

8. Vol.4へ続く！

4週目は、ひたすら課題2のサイト構築。
壁、壁、そしてまた壁。
手を動かしては止まり、調べては詰まり、気づけば1週間が溶けていました（笑）

次回は、そんなぶつかりまくったリアルな制作の日々について書こうと思います。
ではまた、Vol.4で！