Studio歴3年のWebデザイナーが、あらためてHTML&CSSを学び直した理由
Web制作
Studio
2026年2月5日
こんにちは！Webデザイナーの梶原です。
Studioを使って、サイト全体を一人で作れる。
クライアントワークでも特に困らない。
それなのに、カスタムコードが出てきた瞬間、少しだけ手が止まる。
「このコードでは、何をしてるんだろう？」
「一応動いてはいるけど、本当にこれで合ってる？」
そんな風に感じたことのあるデザイナーの方、いませんか？
実はこれ、まさに以前の私自身です。
私は普段のクライアントワークでWebデザイナーとしてStudioを使って実装まで担当させていただいていますが、
HTMLやCSSなどのコードを0から書いて実装できるタイプではありません。
Studioはノーコードツールですが、実際の制作では
もう少しリッチなアニメーションを追加したい
外部ツールを埋め込みたい
デザインの微調整をしたいけど、Studioの標準機能だと難しい
と、コードに触れざるを得ない場面がまあまあ出てきます。
そのたびに、「コードを書かずにどうにかできないか」を調べたり、一緒に仕事をしているエンジニアの方に該当部分だけ対応していただいたりしていました。
ただ、そうした対応を繰り返す中で、
「このまま、コードをあまり理解せずに避け続けるのは不安だな」と感じるようになりました。
そう思ったことが、HTMLとCSSを基礎から学んでみようと思ったきっかけです。
Studioはノーコードだけど、HTML&CSSを知っていると何が変わる？
Studioは直感的に操作できる優れたツールですが、裏側ではHTMLとCSSが使われています。
特に以下のような場面では、HTMLとCSSの基礎知識があるかどうかで、実装する時の安心感がまったく違います。
カスタムコードを貼り付けるとき
class名を指定してスタイルを当てるとき
アニメーション用のCSSを調整するとき
HTMLやCSSを“完璧に書ける”必要はありませんが、コードの構造が分かる・読めることで、
どの要素を触っているのか
何が影響しそうなのか
を想像して実装できるようになります。
Studioを使い続けるなら、最低限のHTML&CSS知識を持つことで、自分自身の「保険」になったり、「自信になる」存在だと感じました！
勉強方法にプロゲートを選んだ理由
HTMLやCSSを学ぶ方法はいくつもありますが、私はオンラインでプログラミング学習ができるサービス「Progate（プロゲート）」で勉強してみることにしました。
Progate | プログラミングの入門なら基礎から学べるProgate
プロゲートで学ぼうと思ったのは、上司の田島さんから
「最初はプロゲートだと簡単に学びやすいと思いますよ。」
とすすめていただいたことがきっかけです。
実際に少し触ってみて、
初心者向けでわかりやすく、いきなり難しくならない
環境構築が不要で、思い立ったらすぐ始められる
用語や概念の説明が分かりやすい
などの理由から、私には合っているなと感じたのでそのままプロゲートを受講することにしました。
「Webデザイナーだけど、コードは苦手」
そんな立場の人にとって、プロゲートのゆるやかなステップ感はかなりありがたいです、、、！
Studio実装で最低限知っておきたいHTML知識
Studioユーザーがまず一番最初に押さえておきたいのは、「HTMLの基本構造を理解すること」かなと思います。
この基本構造は、以下で挙げるレッスン内で学べます。
プロゲート該当レッスン
【初級編】
HTMLに触れてみよう！ 全レッスン
レイアウトを作ろう！ 全レッスン
コンテンツを作ろう！
┗ メインのレイアウト
【中級編】
レイアウトを作ろう
┗ 全体のレイアウトを作ろう
勉強する中で特に重要だと感じたHTMLのポイント
<html>、<head>、<body>の役割と構造<div>、<p>、<span>の違い<img>、<a>タグの基本要素の入れ子（親子関係）
レッスンを進めていく中で、出てくる用語などもかなり増えていくのですが、
ここで大事だと感じたのはすべてを暗記しなくてOK!ということ。
「こんなタグがあるんだな」
「HTMLはこういう構造になっているんだな」
このくらいの理解で十分で、あとから調べられる状態になっていれば問題ないと思います。
基本構造を学んだことで、カスタムコードを見たときに、
「このタグはこの要素をまとめているんだな」などが何となくでも分かるようになり、
コードに対する心理的ハードルが一気に下がったように感じています！
Studio実装で最低限知っておきたいCSS知識
次に重要なのがCSSです。
「Studioで普段UI操作している内容は、ほぼCSSそのもの」です。
CSSの基本は、以下で挙げるレッスン内で学べます。
Studioの余白設定・文字サイズ設定UIとそれに対応するCSS（font-size / marginなど）が分かる画像入れる
プロゲート該当レッスン
【初級編】
CSSに触れてみよう！ 全レッスン
ヘッダーを作ろう！
┗ ヘッダーのレイアウト
┗ ヘッダーの余白コンテンツを作ろう！
┗ ボーダー
┗ paddingとmargin
【中級編】
トップ部分を作ろう
┗ 透明度、文字の間隔を調節しようレッスン一覧部分を作ろう
┗ レイアウトを整えようヘッダーを固定しよう
勉強する中で感じた、まず押さえておきたいCSSのポイント
セレクタとプロパティ
プロパティ末尾のコロン（:）と、行末のセミコロン（;）
font-size、color、line-heightなどの基本的なよく使うプロパティclass属性の考え方
Studioで普段設定している内容が、
「このCSSを書いているのと同じなんだ」と分かり、イメージが繋がったのが学んでいく中での大きな収穫でした。
プロゲートの中で「ここだけはやっておきたい」レッスンまとめ
プロゲートのHTML&CSS編は先ほど挙げたレッスン以外にも内容が充実していますが、
Studioユーザーがすべて完璧にやる必要はないかなと思っています。
本当に最小限の「ここだけはやっておきたい」レッスンを挙げるなら、
以下のレッスンで学んだ部分が、主にStudioでの実装の進めやすさに関わっていると感じているのでおすすめです！
HTML&CSS 初級編 全編（必須）
HTML&CSS 中級編
┗ レイアウトを作ろう
┗ ヘッダーを固定しよう
その他のレッスンで学べる細かいレイアウトなどは、「必要になったタイミングで学ぶ」で問題ないと感じました。
こんな人におすすめ
このプロゲートでの勉強方法は、こんな方には参考になると思います。
Studioでサイト制作をしているWebデザイナー
ノーコードは使えるけど、コードを見ると少し不安になる
カスタムコードを「よく分からないまま」使っている
HTMLやCSSを0から書くつもりはないけど、意味は理解したい
逆に、
エンジニア転向を目指している
フルスクラッチでサイトを作りたい
という方には、少し物足りない内容かもしれません。
実際にコードを学んでみて感じた変化
プロゲートでコードについての基礎を学んでから、Studioで実装するのが明らかに楽に、そして以前より自信を持って対応できるようになりました。
触るべきコードの箇所や「何が分からないか」が分かるようになった
何かエラーがあっても、原因や解決方法を推測できるようになった
カスタムコードを見ても基本的な構造が何となくでも分かることで焦らなくなった
まだまだ覚えきれていない部分も多いので、コードがちゃんと書けるようになったわけではありませんが、コードに対する苦手意識はかなり薄れました！
お客様からの要望があった時にも「ここを修正したら実現できるかも？」という予測が立てられるようになったことで、以前より効率よく検証など進められているなと感じています。
まとめ
Studioはノーコードでもクオリティの高いサイトを作成できる、十分に強力なツールです。
ですが、HTMLとCSSの基礎を知っているだけで、実装の幅と対応する時の安心感は確実に広がります！
個人的に、プロゲート HTML&CSS編はStudioユーザーが最初にコードを学ぶ教材として、かなり相性が良いと感じました。
「コードは苦手だけど、Studioをもっと使いこなしたい」
そんな方の参考になれば嬉しいです！
最後までご覧いただき、ありがとうございました！
サイトの「気になる点」、プロが無料でチェックします
デザイン・コンテンツ・SEOの3方向から、あなたのサイトを徹底診断。
・
ブランドの魅力が正しく伝わっていない
・
Studioの導入効果を知りたい
・
集客・採用に効くサイトに変えたい
・
狙っているキーワードで上位表示できない
SEOは、上位30サイトとの比較による統計分析で、足りない要素を明確に可視化。
見た目・中身・集客力まで、プロが改善ポイントをピンポイントでご提示します。
※診断のみのご利用も歓迎です。ご依頼は不要ですので、お気軽にご活用ください。
無料でサイト診断を受ける
本記事に関連するサービス
担当メンバー
梶原 友里絵
Webデザイナー
1997年 大分県生まれ。専門学校を卒業後、複数の企業でデザイナーとして主にEC周りのデザインを担当したのち、ノックデザインに入社。現在はWebデザインを中心にグラフィック媒体など様々なデザイン業務に携わっています。
このメンバーの記事をもっと読む
