見出し画像

コーダー不要、デザイナーだけでLPが作れるSTUDIOを体験レビュー

Webサイトを作る場合、非常に大まかにいうとデザインとコーディングの2つの仕事が必要です。

(大掛かりなプログラムが動くサイトの場合は、さらにエンジニアなどが必要になることもありますが、いったん省きます)

しかし、この2つはちょっと違った才能が求められますし、極めようと思うとそれぞれ違った才能経験が必要となってきますので、今は分業となっている場合が多いです。

そんな中、STUDIOというサービスが話題です。

画像1

このサービス上でデザインを仕上げると、コードが勝手に書き出されて、Webサイトが生成されてしまうんです。

もはやコーダー(コーディング)不要、デザイナーだけで見た目も独自性あって十分なサイトが出来上がってしまうので、工数や費用削減にもつながり、とても便利です。

そこで実際にどんな感じで出来るのか試してみました。

プロジェクト作成画面レビュー

まず対応しているブラウザはGoogle Chromeだけみたいです。

最初iPadでやろうとしたら、そこで挫折。PCに切り替えました。

アカウントを作ると、まずはチュートリアルで使い方を覚えることができます。

画像2

比較的、直感で出来る感じがありますけれども、例えばデザインでよく使われるPhotoshopやIllustratorとは使い勝手が違いますので、慣れは必要。

画像3

デザインができるといっても、どちらかというとパワポに近い感じ。

画像を読み込んで、そこに明るさを加えたりくらいのことはできますが、そこで細かく編集出来るわけではないので、基本的には事前にPhotoshopやLightroomなどで写真編集してから持ってくる形になるのではないかと思います。

例えば、このSTUDIOで作ったサイト事例に、note proが貼ってありましたけど、ここで使われているアイコン(ブランディングとかリクルーティングのアイコン)は、どう考えてもSTUDIOで描いたわけではなく、別のデザインアプリで描いてから持っていきている感じですね。

画像4

こういう一手間を加えた方がデザイン精度が上がりそうです。

ちなみにレスポンシブになっていましたので、スマホ対応・タブレット対応は問題ありません。

ソースコードはどうなっている?SEOは?

次にデザイナーではなく、コーダーの方が気になりそうなのが、実際どういうコードが吐き出されるの?という点ですよね。

スクリーンショット 2020-06-01 19.50.18

これについて、サンプルでサイトを書き出して、そのソースコードを見てみました。

ほとんどJS化しているのですが、vue.jsのnuxtっていうのを使っているようです。https://ja.nuxtjs.org/

おそらく裏で定義された形がいくつかあって、このパターンならこうやって書き出そうみたいにコンポーネント化されていて、それを書き出しているのかなという感じです。

問題はほとんどテキストがHTML上に出てこないということでSEO的にどうなのかな?というところ。

私のテストでは設定しなかったのですが、titleやdescriptionの設定はできるみたいなので最低限はできるという感じでしょうか。

ただサービスサイト上に「STUDIOで作成されたサイトは、SEOにも最適化されています。」と書いてありますので、何かしらは考えられているのだと思います。

ただ徹底的に強いかというと、それはよくわかりません。感覚的にはそこまで期待しない方が良い気がします。

STUDIOはどんなサイトを作るのに向いているの?

以上から考えますと、基本的には写真主体のシンプルなサイトが向いているのかなと思います。

そして複雑なページ構成も難しいので、LPか5ページくらいまでの簡単な会社HPあたりが狙い目でしょうか。

いっぱいページ数があるようなサイトだったらWordPressとかCMSでテンプレートをベースにカスタマイズする方が良さそうです。

また、独自ドメイン・STUDIOバナー非表示・Apps(拡張機能)などは有料なので、商用で利用するには費用が必要な点も注意しましょう。

ただ、デザインしかできないけど、オリジナリティーも求めたい場合には有用なかなと思いますし、面白いサービスではありますので、興味がある方はチェックしてみると良いかなと思います。

尚、デジタルマーケティング大学校では、Webサイトの制作運用、インハウス化の支援も行っておりますので、ご興味がある場合はぜひお気軽にご相談いただければと思います。

STUDIOを使って制作でも良いですし、もっと突き詰めたいと言ったお話も歓迎です。


この度は私のnoteをご覧いただきありがとうございます。 もしもサポート頂ける場合は、お礼にデジタルマーケティングに関するお悩みにお答えいたします! 追ってお礼メッセージとともにご連絡させていただきます。