akuyan to

イベント/旅行/デザイン/おいしいもの...

Webデザイン歴10年だけどノーコードWeb制作のSTUDIOが使いやすすぎて制作捗る

先日、個人でやってる豆腐マイスターとしての活動をまとめた「tofu mix」というWebをオープンした。これの制作にノーコードでWebを作ることができる「STUDIO」を使ってみたところ、思っていた以上に使いやすく「もうこれでええやん、Web制作」となった。

どこらへんがよいと感じたのかのポイントや、逆にできないところなどをつらつら書いていく。


f:id:akuyan:20220222222714p:plain

STUDIOのここがいいね

UIがいい

ざっくりとした表現だが、あえてここではざっくりいう。UIがいい。UIがいいサービスって結局使っててテンションが上がるしまた触りたくなる。STUDIOは間違いなく「また触りたくなる」サービスだ。


f:id:akuyan:20220222222921p:plain


できることが多いが、情報が整頓されているので混乱することがほぼなかった。
また、THE★管理画面、みたいな雰囲気はなく、白を基調としたシンプルで余白の多い構成は「なんかこれ簡単にできそう」という印象を持った。簡単にできそう感は大事。そして実際に簡単に触れるというのは情報がしっかり整理されているということでもある。


独自ドメインの反映なんか簡単すぎて「本当にこれで反映されてるのか?」って不安になったけど、反映された。TLS取得は結構かかるので、公開するときは余裕もってドメイン反映させておこうね。


一般的なビジュアルエディタとは結構全然テイストやレイアウトが違うにも関わらず、あまり使い方に困らないというのは、それだけ「作る側」の考えに沿って設計されてるんだろうなぁ。


コーディングする人にとって馴染みのある設定ができる

ノーコードサービスなのだが、コーディング経験のある人にとっては馴染みの設定がしやすい。

  • div、article、sectionなど、どの要素にどれを使うか指定できる
  • hoverや、表示アニメーションの指定が可能
  • 階層構造がレイヤーで見やすい&入れ替えやすい
  • positionのabsoluteとrelativeが意識的に選べる


f:id:akuyan:20220222223345p:plain


そのわりには、ちゃんとノーコードらしくYouTubeなどの埋め込みとかはフレーム追加するだけで楽々という「ここは細かくいじりたいけど、ここはぶっこみたい」というのの切り分けがいい。


上であげた部分は正直、気にする人は気にするがそもそもコーディングとか意識してなくてWebができればなんでもいい人は気にしない部分なので、そういう棲み分けができてるのってユーザーのこときちんと見てるんだろうなと感じる。


ライブプレビューへの反映がはやい

保存という概念がなく、作業したものがライブプレビューURLで確認できる。しかもログイン不要。すげぇ。スマホとか別のデバイスでの確認容易〜〜〜〜。
ちなみにPC表示を基準にタブレット・スマホ表示も自動で調整してくれるけど、個別にデバイスごとに見え方調整もできる。便利。


f:id:akuyan:20220222223519p:plain


今回は1人プロジェクトなので誰かに公開前に確認してもらう必要なかったけど、クライアントワークの時の確認、これで完璧やんね。


ていうか、新規公開ならFigmaにデザイン作らないでもうSTUDIOで作ってそのまま確認してもらった方がいいよね。今回も最初はFigmaでいじいじしてたけど、STUDIO直でデザインした方が早いなってなって、結局STUDIOで完結してしまった。


公開するときは別途「反映」をしないと公開にならないので、そこも安心。
ライブプレビューもあるけど、作業を複数人で行う想定もされてるから権限管理も楽。

f:id:akuyan:20220222224619p:plain
ちなみにGoogleアナリティクスの追加や反映もすぐだけど、タグマネージャー経由でしか今はできない


STUDIO触ってると1ヶ所、不具合を見つけてサポートチャットに連絡したら「現象を確認するためにサポートアカウント追加してほしい」って言われて追加した。たしかにサポートアカウント追加が1番早いよね、わかる。こちらもすぐ確認してもらえて助かる。その不具合はその場ですぐ確認してもらい、すぐに反映しました!とご連絡きた。対応が早い。


STUDIOのここがもどかしいね

本当にノーコード

ここはサービスのテーマかつアイデンティティなので当たり前といえば当たり前なのだが、まっじでコード触らない。いや触らせてくれない。


「ここコードで書きたい」みたいなところがあっても触れない。そもそもコードが表示されるところが存在していない。


SEO的にSTUDIOのソースの評価がどうなのかは正直わからない。そこまでぐちゃぐちゃなソースにはなりにくいようになってるような気がしているけど、ここはなんとも判断が今時点ではできない。


要素の入れ子に限界がある

そこまで困ることでもないのだが、div/article/section要素は6個までで、その中にp/a/img要素いれて7個までの入れ子構造しかできないっぽい。


f:id:akuyan:20220222224313p:plain


なんかうまく配置できないなとおもったら、仕様っぽい。勘違いかもしれない。
ただデザインによってはちょっと気をつけた方がいいところではある。

CMSの記事本数

無料プランがCMS5記事までっていうのはわかるけど、有料プランのBASICまでも5記事までとはこれ如何に。

f:id:akuyan:20220222224401p:plain


とか思っていたら、2022年春から新しいプランができるみたい。

f:id:akuyan:20220222224428p:plain
https://blog.studio.design/ja/posts/plan-renewal-2022


無料プランでCMS1000記事までいけるのにBASICだといけないの、ちょっとつらい。従量課金と考えればコンテンツ料金とPV数の比率で妥当なところなのだとは思うけれど。


まぁLPや更新頻度の少ない店舗などの場合はBASICで、中小規模の企業でリリースとかも適度に配信したかったらCMSプラン選んでねってことなんだろうな。
そのうちプランに加えたアドオン機能での課金ができるようになったらもっと使い勝手よさそうだけどなー。まぁ追々需要があれば追加してくれるだろう。


簡単に触れすぎてミスる

基本的にビジュアルエディタしか存在しないので、画面上の要素を触っていく感じなのだが、現在はそれらをロックしておく機能がない。もしかしたら自分が見つけられてないだけかもしれないけど。


「ここはもう絶対触らない!」みたいなところを要素やグループ単位でロックしておきたいんだなぁ。じゃないとたまに変なところで変な作業をうっかりしてしまう。うっかり人間にはつらい。その上バージョン管理もない。つらい。


これ、クライアントワークの場合は納品したあとに「うっかり変なとこ触っちゃいました」ということも出てきそうだなと、ちょっと心配。

f:id:akuyan:20220222225316p:plain
ここに「ボックスのロック」があったら最高なんだけどな。

とはいえ、今のところ他のノーコード系サービスの中では個人的に5段階評価4ってかんじなので、今後は積極的に使っていきたい所存。


勉強がてらSTUDIOでWeb制作

そもそもなんで今回STUDIOで作ってみたのかといえば、勉強のためだった。


豆腐マイスターとかいっておいてなんなのだが、本業はWeb制作に携わる者でかれこれもう10年以上Webデザインなどの仕事をしている。企業勤めだったこともあったが今はフリーランスだ。


そしてWebデザイナーという職をしていると本当にありがたいことによく「Web作りたいんだけど」「Webあるけどリニューアルしたいんだけど」というご相談をいただく。


その相談の多くはあまりWebに予算をかけられない人たちで、かつ、あんまりWebツールを使い慣れていない人が多い。LINEかFacebookはやってる、くらいの温度感だ。その場合に、過去にも何度か別のノーコードでWebを制作できるサービスを提案して使ってきている。結局のところWebは作って終わりではなく「生きた情報」を載せ続けてもらわないと価値が目減りしてしまうので、可能な限りこちらの仕事が終わった後、自身で更新していってもらえるようにだ。
多少予算がある場合はWordpressなどを提案する場合もあるのだが、いかんせん、ドメインやサーバの契約にもお金をかけること、よくわからないものをたくさん契約するのに抵抗がある人は多い。


なので、ある程度これまで色々なノーコードサービスを触ってきたのだが、なんていうか使いづらいなぁ、テンション上がらないなぁというのが全体的な感想。そこで出てきたSTUDIOというサービス、評判がよかったのでずっと触ってみたいと思っていた。そしてこの感想である。満足。


とはいえまだまだ全然機能使えていないところも多そうなので、また気づいたところがあればまとめておきたい。