Webデザイナーを目指すならHTML/CSSの前にSTUDIOを使ってみると学習が捗りそうという話
こんにちは、kitsune studio代表のいしいです！
今回は駆け出しWebデザイナーやエンジニア志望者の方々に向けてHTML/CSSを学ぶ前にまずSTUDIOで構造を理解した方がその後の学習が捗りそうだと思ったのでそのことについてnoteで解説していきたいと思います！
はじめにSTUDIOを始めたきっかけについて
なぜHTMLの前にSTUDIOをやった方が良いのかということを解説する前に、そもそも僕がなぜSTUDIOに目をつけたかということを説明します。
実はkitsune studioでSTUDIOを使うと決める前にWixも試してみたのですが、この二つはどちらも同じノーコードでWebサイトを制作するツールでしたがサイトの作り方には大きな違いがありました。
この二つのツールを簡単に比較すると、正直STUDIOの方は直感的というには少しだけ学習コストが高く、Wixの方がより直感的に容易にデザインができるという感想を持ちました。
しかしこの少し高い学習コストの壁さえ乗り越えてしまえば、STUDIOの方が制作する際の効率と完成した時のクオリティが高いと感じてSTUDIOを選択しました。
実はこの少し高い学習コストの壁が、HTMLやCSSを学ぶ前にSTUDIOを使ってみた方が良いと思った理由でもあります。
なぜHTMLやCSSを学ぶ前にSTUDIOをやるといいのか
この理由は正直たくさんありますが今回は3つに絞って解説していきます。
ボックスレイアウトを採用している
まず一番の理由はSTUDIOがボックスレイアウトを採用しているからです。
ボックスレイアウトはHTMLを設計する上で最も基本的な概念になるのですが、僕が初心者の方に教えるときは左上に重力が発生しているマトリョーシカスタイルの箱と教えています。（これってわかりにくいですかね？笑）
ちなみにSTUDIO公式ガイドによる解説では下記のように説明されています。
STUDIOが採用しているボックスレイアウトは、要素が積み上げられる構造（積み木構造）になっています。
従来のデザインツールは、下記図の左のように要素がテーブルの上に乗っている紙のように散らばっているイメージですが、STUDIOが採用しているボックスレイアウトは、下記図の右のようなテーブルの上に要素が積み上がっていくイメージに近いです。
※下の画像はSTUDIO公式ガイドよりお借りしました
STUDIOの他にもWixなどノーコードでWebサイトが作れるサービスはたくさんありますが、それらの多くは上の画像の左のように自分が表示したい要素を表示したい場所にドラッグ&ドロップで置いてAIか何かがあとから自動的にその要素をHTMLに変換していくシステムであることが多いです。
一見それらの方が簡単にWebサイトを作れそうにも思えるのですが、SEO的な観点からみてもHTMLの構造をしっかり作り込むことは重要になってくるので、STUDIOのように自分でHTMLの構造を確認しながら制作できるのはとても良いと思っています。
そしてその構造がどうなっているのかを理解することがHTMLでサイトを作る上で重要になってくるのですが、STUDIOを使うことで下の画像のように構造を目で理解しながら作ることができるので初めからコードをみて理解するのと比べても初心者にはわかりやすいかと思います。
このボックスレイアウトがマスターできれば、HTMLでコーディングをする際も、HTMLでサイトの骨格を先に書いてしまい、あとからCSSをガーっと書いていくということができるようになり、かなり時間的にも効率的にコーディングができるようになると思います！
ちなみに僕は先に全部HTMLを書いてからCSSをかくというスタイルにしてからコーディングの効率が爆上がりしました！
flexboxを採用している
二つ目の理由はflexboxを採用しているからです。
最新のHTMLを学ぶための本はどのように教えているのか詳しくはわかりませんが、いまだに多くのHTML教本では要素を横並びにしたい時にfloatを使おうと説明されているように感じます。
今現役でWebデザイナーやフロントエンドエンジニアをしている人でfloatを使っている人っているんですか？
いたらすいません！でも僕の周りでfloatを業務で使っている人はみたことないです！
なのにHTML教本などではflexboxではなくfloatを教えているんですよね。
ちなみに数年前のHTMLを学び始めたばかりの頃の僕はこのfloatの説明が全然意味がわからなかったし正直今でもあんまわかってないです笑
ただ、アルバイト先の先輩エンジニアが教えてくれたflexboxはすぐに理解できました！
STUDIOでは横並びのレイアウトはflexboxで作られるように設定されているので直感的にこのflexboxの仕組みが理解できるようになると思います。
CSSから学んでfloatで詰まって諦めてしまう人もいると思うのでこんな感じでflexboxを極めれたら救われる人も多いはず...！
気付いたらWebサイトができているからモチベーションの維持ができる
これが地味に一番大事かもしれない3つ目の理由です。
結局HTMLやCSSを学ぶというのは手段であって、目的はWebサイトを作れるようになること。
エンジニアを目指すならHTMLの知識は必須ですが、Webデザイナーを目指すのであればSTUDIOなどのノーコードツールで十分になる未来も見えています。
僕は過去にエンジニアバイトを始めるまで実は4回くらいHTMLとCSSやWordPressを独学で学んで挫折し、結局バイトという強制力のおかげで無理やりコードをかけるようになりました。
4回も挫折していて、それでもエンジニアのバイトをしたのはWebサイトやアプリが作りたかったからです。
でも今はそんな苦労をしなくてもWebサイトが作れるのでSTUDIOをやらない理由はないと思います！
STUDIOから始めることで少しずつWebサイトの構造を学んで気付いたらHTMLやCSSもかけるようになれば良いと思うので、駆け出しWebデザイナーや駆け出しエンジニアの方はぜひSTUDIOを触ってもらえればなと思います！
最後にCM🦊
kitsune studioではSTUDIOやShopifyを活用してほぼノーコードでWebサイト制作を行っています。
ご興味のある方はぜひお問い合わせください！
最近ではノーコードでも高クオリティなサイトが簡単に制作できる時代になって来ているのでノーコードに関する情報発信を通してこの業界の発展に貢献できれば良いなと思ってたりします！
この記事が気に入ったらサポートをしてみませんか？