アイキャッチ1204

STUDIOでイベント告知LPを作ってみた!「おすすめポイント」と「気をつけたいこと」

 「Design Tools Advent Calendar 2019」3日目の記事です!
2日遅れになってしまい申し訳ありません。。

デザインツールアドベントカレンダーということで、クリエイティブ担当として関わっている「でらマーケ勉強会」の告知ページをSTUDIOで作ってみた時に感じた「おすすめポイント」と「気をつけたい点」を書いてみたいと思います。

STUDIOとは

コードを書かなくてもWebサイトが作れる!
ドラッグ&ドロップで直感的に作業ができて、デザインした画面が瞬時にコードに変換されるツールです。
※登録の仕方、細かい設定については割愛してるので公式サイトをご覧ください。

▼ 料金

画像1

無料でも使えますが、月額$9のプランが個人的におすすめです!
独自ドメイン設定ができて、Google AnalyticsやGoogle Tag Managerが使えます。

▼ 基本的なこと

画像2

STUDIOの作業画面はこんな感じです。画面上に制作する上で必要な要素が詰まってます。
※ogpやページタイトルなどの設定は管理画面が別であります。

画面内に配置される要素「ボックス」を使ってレイアウトしていきます。「ボックス」のサイズや配置、余白(マージン・パディング)などは画面内にあるメニューで設定できます。画面の切り替えとボックスレイアウトの基本がわかれば好きなようにレイアウトを組んでいけます。

慣れるまで戸惑う点もありますが、ヘルプページnote記事に親切丁寧な解説があるので安心です。

制作フロー

画像3

コードを書かずにサイトが完成する!を信じて、手書きのラフを書き、ベースになりそうなテンプレートを選んで、カスタマイズしながら制作しました。 ライターさんには共有機能を使ってブラウザで直に編集してもらったり、細かい装飾はIllustratorを使ったりもしました。

普通の工程(ワイヤー・原稿作成→デザイン→コーディング→修正→公開作業)と比べて、だいたい1/3くらいの工数で完成させることができました。
告知まで期間も短かく、工数もかけられなかったので本当に感謝です。

4つのおすすめポイント

画像4

❶自動SSL化
当たり前なように思えることですが、高機能かつサーバー周りのセットアップも不要で無料or月9ドルは破格すぎるのではと思います。

❷チャットですぐ質問できる!
画面内にチャットアイコンやヘルプページへの導線があるため、困った時にすぐ質問ができます。返信も早くて、とても丁寧です!

❸写真素材やアイコン、テンプレートが豊富
高品質な写真やおしゃれなアイコンが使いたい放題!!モリサワフォントも使えるうえにクオリティの高いテンプレートもたくさんあります。

❹公式ツイッターで紹介してくれる
#withSTUDIO」を使ってツイートすると公式ツイッターで紹介してくれます。今回イベント告知ページ作成だったのでシェアしてもらえてすごく助かりました!

気をつけたいこと

画像5

①単位の使い方と画像について
単位の基本は「px」になっています。
%、flex、auto、vh、を使い分けてレイアウト組む必要があります。

テキストボックスの指定する際の注意点

画像6

テキストボックスの単位がpxになったまま使うとレイアウトによっては、画面幅が変わった時に崩れる場合があるので、autoを指定するとよさげです。
(親、子ボックス指定もありますが割愛)

画像配置の注意点

画像7

画像には、自動でサイズをトリミングしてくれる「Box」と幅・高さが指定できる「Img」の2種類あります。配置するレイアウトに合わせて使い分けましょう。

②パソコンサイズでデザインを確定させる

画像8

PC、タブレット、スマートフォンの3段階の画面切り替え(ブレークポイント)があり、レイアウトやスタイルの設定は小さい画面に引き継がれます。スマートフォンサイズで設定してしまうとPCでは反映されないため作業が2倍になります。(わからずやってしまったのでお気をつけください)

③ページ単位での非表示ができない

画像9

作ったページは全て公開される仕様になっています。(変更されてたらすみません)
例:トップページ、Aページ、Bページ、Cページとあった場合に、「Cページ」だけ非表示(noindex)はできないので要注意です。

まとめ

本当に直感的にWebサイトを作ることができる!!
デザインツールを使うことに抵抗がなく、コーディングの基本的なことがわかっていて、最低限下記の3点を気をつければ問題なく使えるようになります。

画像10

簡単に作れる!といったサービスはいくつかありますが、いざ使おうとすると仕様がガチガチに決まっていて、カスタマイズするための工数がかかりすぎるものが多いと個人的に思っていました。
STUDIOはそれらとは全く別物です!自由度が高くて本当にすごい。

引き続きでらマーケ勉強会の告知サイトやポートフォリオ制作をしたりして、STUDIOをもっと使い倒そうと思います。

では!

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
やったーーーー!
16
ASUE株式会社のWebディレクター兼デザイナー。サイトリニューアル提案からLP制作、改善をしています。作って終わりじゃないデザインを追求するためマーケティングもかじってます。海外ドラマとイベント参加大好きマン。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。