先日、illuminateというプロジェクトを立ち上げる際に、はじめてSTUDIOを使いました。

なぜならメンバー3人中、全員が全くコードを書けないからです。そして説明ページを読むということも苦手。終わった！

そもそも、STUDIOとは…？
コードを書かずに、完全なレスポンシブのサイトを作成、公開することができるサービス！基本機能は無料で使えます。

使い方がわからなすぎて、突然広大な空白が出現したり、突然背景の更に下レイヤーに巨大なマカロンが出現するなど、制作過程は混沌を極め、ついに最後には「STUDIOわからない、誰かお駄賃あげるからやって…」とツイートしました。

そしたらなんと、STUDIO CEOの石井さんからリプライが。

で実際、色々聞きに行ったのですが、わざわざアドバイスいただいたお礼にnoteを書こうと思ったのが今です。

STUDIO初心者向け ポイント
・初心者はテンプレスタートだとかえって難しいかも。
・PC表示から作り上げるべし
・フレックスという概念、大事
・綺麗にさえ整えれば、SEOにも◎

・初心者はテンプレスタートだとかえって難しいかも。

色々相談して思ったのは「初心者の場合、テンプレスタートだとかえって難しいかも」ということです。

テンプレートとして出ているサイトはどれも作りが良く、その分複雑になっていたりするので、中堅以上でないとそもそもどういった構造になっているのかを理解するのに時間がかかりそうです。なので、それらのサイトや他自分が好きなサイトを参考にしつつ、お弁当におかずを詰めていくように、まっさらな状態からパーツを足していく方が初心者にはわかりやすいのではないかと思われます！

ドンズバでこのデザインにしたい！っていうのがあれば、テンプレート利用もいいね！

・PC表示から作り上げるべし

これは知らなくて大変な目に遭いました！まずは説明を読んでから作業を始めろという感じですね。

いわく、そもそもはPC表示がベースとされているので、PC表示での変更は他のスマホ表示などにも影響するらしいです。なので、全体の変更をしたい場合はPC表示を触る。逆に、それ以外の表示に関しては触っても他の表示に影響しないので、スマホはスマホで最適な表示に調節するといったことが可能。

なのでオススメとしては、まずPC表示で作り上げてから、スマホ表示にして調整していくというやり方だそう。

・フレックスという概念、大事

これを知らないと、パーツが不思議な挙動をし始めるので動揺します。

(この縦幅autoって状態です。ブルーの枠をダブルクリックするとなる。)

フレックスという概念はコードの基礎らしいのですが、詳細はわかりません。
でも、中のコンテンツに合わせてフレキシブルにサイズが調整されるといったことらしいです。
要所要所で幅や高さがフレックスになっていないと、縦横にコンテンツが可動になります。これをうまいこと使うと画像のスライダー等が作れるそう！

・綺麗にさえ整えれば、SEOにも◎

大事だし気になっているのがSEOについて。

一時SEOについてめちゃ教えてもらっていたので基礎の基礎は踏んでいるつもりですが、そのうえで気になったのはhタグなどのタグ指定と構造の綺麗さについて。構造についてはそもそも、レイヤーなどを含めて綺麗な構成にできていたら大丈夫とのこと。タグについてもワンポチで設定可能。あとはサイト自体の設定をダッシュボードでポチポチやればOKらしいです。

ということで、散々「無理かも…」と騒いでおりましたが、大切な部分を押さえたら簡単でした。

みなさんもぜひ。そして石井さんありがとうございました…！