STUDIOでイベント告知LPを作ってみた！「おすすめポイント」と「気をつけたいこと」
「Design Tools Advent Calendar 2019」3日目の記事です！
2日遅れになってしまい申し訳ありません。。
デザインツールアドベントカレンダーということで、クリエイティブ担当として関わっている「でらマーケ勉強会」の告知ページをSTUDIOで作ってみた時に感じた「おすすめポイント」と「気をつけたい点」を書いてみたいと思います。
STUDIOとは
コードを書かなくてもWebサイトが作れる！
ドラッグ&ドロップで直感的に作業ができて、デザインした画面が瞬時にコードに変換されるツールです。
※登録の仕方、細かい設定については割愛してるので公式サイトをご覧ください。
▼ 料金
無料でも使えますが、月額＄９のプランが個人的におすすめです！
独自ドメイン設定ができて、Google AnalyticsやGoogle Tag Managerが使えます。
▼ 基本的なこと
STUDIOの作業画面はこんな感じです。画面上に制作する上で必要な要素が詰まってます。
※ogpやページタイトルなどの設定は管理画面が別であります。
画面内に配置される要素「ボックス」を使ってレイアウトしていきます。「ボックス」のサイズや配置、余白（マージン・パディング）などは画面内にあるメニューで設定できます。画面の切り替えとボックスレイアウトの基本がわかれば好きなようにレイアウトを組んでいけます。
慣れるまで戸惑う点もありますが、ヘルプページやnote記事に親切丁寧な解説があるので安心です。
制作フロー
コードを書かずにサイトが完成する！を信じて、手書きのラフを書き、ベースになりそうなテンプレートを選んで、カスタマイズしながら制作しました。 ライターさんには共有機能を使ってブラウザで直に編集してもらったり、細かい装飾はIllustratorを使ったりもしました。
普通の工程（ワイヤー・原稿作成→デザイン→コーディング→修正→公開作業）と比べて、だいたい1／3くらいの工数で完成させることができました。
告知まで期間も短かく、工数もかけられなかったので本当に感謝です。
４つのおすすめポイント
❶自動SSL化
当たり前なように思えることですが、高機能かつサーバー周りのセットアップも不要で無料or月9ドルは破格すぎるのではと思います。
❷チャットですぐ質問できる！
画面内にチャットアイコンやヘルプページへの導線があるため、困った時にすぐ質問ができます。返信も早くて、とても丁寧です！
❸写真素材やアイコン、テンプレートが豊富
高品質な写真やおしゃれなアイコンが使いたい放題！！モリサワフォントも使えるうえにクオリティの高いテンプレートもたくさんあります。
❹公式ツイッターで紹介してくれる
「#withSTUDIO」を使ってツイートすると公式ツイッターで紹介してくれます。今回イベント告知ページ作成だったのでシェアしてもらえてすごく助かりました！
気をつけたいこと
①単位の使い方と画像について
単位の基本は「px」になっています。
％、flex、auto、vh、を使い分けてレイアウト組む必要があります。
テキストボックスの指定する際の注意点
テキストボックスの単位がpxになったまま使うとレイアウトによっては、画面幅が変わった時に崩れる場合があるので、autoを指定するとよさげです。
（親、子ボックス指定もありますが割愛）
画像配置の注意点
画像には、自動でサイズをトリミングしてくれる「Box」と幅・高さが指定できる「Img」の２種類あります。配置するレイアウトに合わせて使い分けましょう。
②パソコンサイズでデザインを確定させる
PC、タブレット、スマートフォンの３段階の画面切り替え（ブレークポイント）があり、レイアウトやスタイルの設定は小さい画面に引き継がれます。スマートフォンサイズで設定してしまうとPCでは反映されないため作業が２倍になります。（わからずやってしまったのでお気をつけください）
③ページ単位での非表示ができない
作ったページは全て公開される仕様になっています。（変更されてたらすみません）
例:トップページ、Aページ、Bページ、Cページとあった場合に、「Cページ」だけ非表示(noindex)はできないので要注意です。
まとめ
本当に直感的にWebサイトを作ることができる！！
デザインツールを使うことに抵抗がなく、コーディングの基本的なことがわかっていて、最低限下記の３点を気をつければ問題なく使えるようになります。
簡単に作れる！といったサービスはいくつかありますが、いざ使おうとすると仕様がガチガチに決まっていて、カスタマイズするための工数がかかりすぎるものが多いと個人的に思っていました。
STUDIOはそれらとは全く別物です！自由度が高くて本当にすごい。
引き続きでらマーケ勉強会の告知サイトやポートフォリオ制作をしたりして、STUDIOをもっと使い倒そうと思います。
では！
この記事が気に入ったらサポートをしてみませんか？