見出し画像

LP制作でSTUDIO使ってみた

mai

こんにちは。ネクストビートでデザインリードを担当しているmaiです。
ネクストビートではUI・UX、WEBデザインを中心にデザイン業務を担当していますが、前職ではフロントエンド・コーダーの業務も兼任していました。

ネクストビートでは、フロントエンド〜バックエンドまでを開発が担っており、デザイナーはデザイン業務に集中できる環境が整っていますが、デザイナーだけで完結できるノーコード開発「STUDIO」を導入しています。

今回は、保育士バンク！パレットのサービス紹介LPの制作でSTUDIOに触る機会があり、初めてSTUDIOを使ってみた感想を簡単にご紹介します。

保育士バンク！パレットとは？
日本最大級の保育士・幼稚園教諭専門の就職転職支援サービス「保育士バンク！」が開発した、保育士・幼稚園教諭専門エンゲージメント管理ツールです。

保育士バンク！パレット

ノーコード開発って？
ノーコードとは、ソースコードの記述をせずにアプリケーションやWebサービスの開発が可能なサービスのことです。

ノーコードとは？メリットと注意点、ローコードとの違いとは？

✍️STUDIO向きのサイトって？

STUDIOは導入が簡単でコストが抑えられる分、複雑な機能や動的処理の実装には向きません。導入前にメリット、デメリットをしっかりと確認してどんなサイトがSTUDIO向きなのか把握しておく必要があります。

STUDIO向きのサイト

  • LP

  • ティザーサイト

  • イベント告知サイト

  • サービス紹介サイト

STUDIOに不向きなサイト

  • 多様な機能の実装、サービスとの連携がしたい

  • 複雑なアニメーションや機能を実装したい

  • 本格的なSEO施策を実装したい

  • オウンドメディアなど大量の記事を掲載したい

✍️STUDIOのメリット

レイヤーでマークアップを管理

コーデンング知識0でも安心
XD、Sketch、FigmaなどのプロトタイピングツールにUIや使用感が似ているので、コーディングの知識が0の方でも安心してWEBサイトを作成することができます。
パーツやレイヤーごとに細かくタグを指定したり、配置方法なども柔軟に設定することが可能なので、ダイナミックなパーツ配置のデザインも表現できます。

作業コストの削減
ノーコード開発一番の利点でもありますが、開発コストを大幅に削減することができます。通常、開発には専門的な知識を必要とするためそれに伴う学習コスト、実際にコードを書く作業コストがかかりますが、STUDIOはデザイナーが直接作業をするので、そういった開発コストがかかりません。

柔軟なレスポンシブ対応
PCを基準にタブレット、スマホとリアルタイムでプレビューしながら画面を編集することができます。
ブレイクポイントの設定も変更ができるので、アナリティクスなどで閲覧率の高いデバイスサイズに合わせて設定することや、iosやandroidの機種に応じたプレビューも可能です。

シンボルの活用
header、footer、Grobal Navなど、サイト全体で読み込むようなパーツをシンボル化することができます。XDなどのプロトタイピングツールにあるコンポーネントのように扱うことができるので、非常に便利です。

不要なタグを自動で削除
作業中、空になったボックスやテキストは自動で削除されるため、手打ちでコーディング作業をしている時のように不要タグの消し忘れなどが発生しません。

✍️STUDIOのデメリット

バージョン管理
現時点で未実装です。
gitのようにリリース日ごとにブランチを切って管理などができないため、複数人での作業やリリース日の違う作業を並行して行うには注意が必要です。
応急処置として、ページを複製してバックアップを作成し、非公開設定にすることで前のバージョンを一時的に保管しておくことは可能です。

ソース編集
ソースを直接いじって編集することはできません。
とはいえ、STUDIO上で作成されたコードは最適化され、コンソールで見てもエラーのない綺麗なコードが吐き出されるため、LPなどちょっとしたページを作る分には問題ありません。
一方で、SEO施策や構造化データなどのコードを埋め込みなどができないため、ソースを厳密に管理したい場合には不向きです。

スクロール量に応じたエフェクト
スクロール量に応じたエフェクト効果が追加できないため、例えばグローバルナビをスクロール方向によって出し入れ、スクロール途中で色を変化させる、CVボタンが途中から出てくる、などのよく見かける仕掛けは表現できません。

h1はテキストのみ
h1タグが設定できるのはテキスト要素のみです。
indexページのロゴ画像をh1に設定し、altにキーワードを設定する、という運用などはできないため、トップページのh1設計にはデザイン面でも一工夫が必要になります。

複雑な機能の実装
パンくずリスト、目次、RSS、関連コンテンツやランキングなど、Wordpressなどには当たり前に実装されている機能はありません。

✍️ネクストビートでのSTUDIO活用

ネクストビートでは冒頭で紹介した保育士バンク！パレットの他にも、開発経験のない人事の方が作成したサマーインターンの特設サイトなどでSTUDIOを活用しています。
デザイナーはもちろんのこと、デザイナーではない部署の方もSTUDIOを活用してサイトを作成した実績もあり、業務でも積極的に活用しています。

私自身も、STUDIOを触ったのはネクストビートに入社してから初めてのことでしたが、ネクストビートでは基本的な使い方から便利な活用方法まで、作業に必要なナレッジをまとめているため、初めての方でも安心して作業できる環境を整えています。

✍️STUDIOを使ってみた所感

もともとフロントエンドも兼任していたこともあり、STUDIOってどうなの？ソースぐちゃぐちゃになったりしないのと？と半信半疑だった部分があります。しかし、実際に使ってみた正直な感想は、意外とどんなデザインも作れそうと思いました。

コード面でも細かなタグの設定ができたり、マークアップもプロトタイピングツールに近いUIだったこともあり、実際に吐き出されたコードはエラーもなく綺麗な状態で、コーディングにアレルギーのあるデザイナーの方でも安心して使えるツールだと感じました。

反面、コーディングができる人にとっては、コード書いた方が早い！と思う場面も多く、慣れが必要です。
とはいえ、コーディング知識が0の人でも感覚的に理解できるUIになっているので、今までコーディングができないからと諦めていたデザイナーの方にとっては、STUDIOを使ってサイトを作成するという新たな選択肢が増えることは大きなメリットだと感じました。


この記事が気に入ったらサポートをしてみませんか？