【NoCode】STUDIOを使用した制作事例まとめ！

皆さん、今話題のNo Codeツール「STUDIO」は使ったことありますか？

興味はあるけどまだ使ったことはない、という方の中には「具体的にどれくらいのサイトが作れるのか？」という事が分からないという方も多いかと思います。

そんな方に向けて、この記事ではNo Codeツールの中でも特に注目を集めているWebサイト制作ツール「STUDIO」の導入事例をまとめました。

素敵なサイトが沢山あるので、この記事を読み終えるとSTUDIOへの興味が更に湧いてくると思います！

studioとは

“Where your tools and team Click.
“デザイン、公開、CMSまで、すべてがここに。”

STUDIO

STUDIOはSTUDIO株式会社が提供するクラウドベースの Web サイト作成ツールです。コーディング不要で美しいWebサイトが作れるということで、近年Web制作界隈での注目が高まっているサービスです。

STUDIOの概要

無料プラン（0円/月）、有料プラン（980円/月・2,480円/月・4,980円/月）があり、STUDIOバナーの表示有無や規模など細かいところで差があります。一部機能制限などもありますが、基本的な機能である「サイトデザイン」「サイト公開」「CMS機能」は無料プランでも十分利用できる仕様になっています。

デザイン

STUDIOはデザインツール（XDやフォトショップなど）でデザインを構成していく感覚で、クリックやドラック操作だけでWebサイトが作成できます。また、CSSやJavaScript等でコーディングしていたアニメーションなども手軽に実装できる機能も備わっています。Googleフォントとも連携しているので、サイトを作成しながら多様なフォント選択も可能です。

公開

作成したデザインをワンクリックでWeb上へ公開できる機能も有しているため、面倒なサーバーアップの作業も不要の為、誰でもWebサイトとしての公開ができます。STUDIO独自サブドメイン.studio.designがあるため、無料プランであってもドメイン契約不要です。有料プランにすると独自ドメインとの紐付けも可能になります。

運用

STUDIO CMSという機能を使い、ブログやお知らせ事項の管理ができるようになっています。記事の執筆や作業チームでのリアルタイム共有、公開まで一つで完結させることができます。また、内部SEO対策として必須となるtitleやmetaタグなども自由に編集可能となっています。

STUDIOを使用したWeb制作の事例

それでは本題の事例紹介に移ります。

株式会社gaz

• サイト所有者　：　株式会社gaz
• サイトリンク　：　https://studio-gaz.design/
• サイト名　　　：　STUDIOでWEBサイト制作代行 | gaz, Inc

株式会社gazのHPです。

日本初STUDIO株式会社公認のWebサイト制作会社ということで、STUDIOの機能がふんだんに盛り込まれています。

サイト内アニメーションは勿論、CMSでのブログ機能など取り入れられています。

株式会社Goodpatch

• サイト所有者　：　株式会社Goodpatch
• サイトリンク　：　https://anywhere.goodpatch.com/
• サイト名　　　：　Goodpatch Anywhere | フルリモートデザインチーム

デザイン会社Goodpatchが運営する、フルリモートデザインチームGoodpatch AnywhereのHPです。

メインカラーは本体と合わせ白と青に統一させており、無駄な装飾の無いシンプルで見やすい構成になっています。

フォトグラファー三浦えり

• サイト所有者　：　フォトグラファー三浦えり
• サイトリンク　：　https://erimiura.com/
• サイト名　　　：　Eri Miura Portfolio site

フォトグラファーのポートフォリオ ということで写真も沢山使われていますが、グリッドで綺麗に整えられています。

また、スクロール連動のフェードインアニメーションなども使われています。

専門学校文化デザイナー学院

• サイト所有者：専門学校文化デザイナー学院
• サイトリンク：https://visualdesign.studio.design/
• サイト名：VISUAL DESIGN｜専門学校文化デザイナー学院 ビジュアルデザイン

専門学校文化デザイナー学院のHPです。

赤と白のメインカラーが印象的ですが、グリッドのレイアウトやページ遷移時のフェードもオシャレです。

Fukuoka Growth Next

• サイト所有者：Fukuoka Growth Next
• サイトリンク：https://growth-next.com/
• サイト名：Fukuoka Growth Next – 福岡のスタートアップ支援施設

福岡のスタートアップ支援施設、Fukuoka Growth NextのHPです。

Googleマップの埋め込みやSNSとの連携、イベント情報やニュースなどのCMS機能も活用されています。

みらいの食券

• サイト所有者：みらいの食券
• サイトリンク：https://lp.mirai-ticket.jp/
• サイト名：みらいの食券｜飲食店のスマホ回数券発行サービス

みらいの食券のLPです。

イメージカラーの黒と黄色が印象的で、フルスクリーンのヒーローイメージに動画が埋め込まれています。

メンド（mend）

• サイト所有者：メンド（mend）
• サイトリンク：https://mend.life/
• サイト名：メンド(mend) – オンラインパートナーサービス | 生活はナイスか

日常の面倒なことをサポートしてくれるサポートサービス、メンド（mend）のLPです。

優しい色使いと、セクション毎に流体シェイプで区切られているデザインがモダンな感じでオシャレです。

Ubie株式会社

• サイト所有者：Ubie株式会社
• サイトリンク：https://ubie.life/
• サイト名：Ubie株式会社 | Ubie, Inc.

ヘルステックスタートアップ企業UbieのHPです。

Gooleマップの埋め込みや、日本語・英語の言語切り替え機能もあります。

Yuichi Yoshimura│Portfolio

• サイト所有者：吉村優一/Yuichi Yoshimura
• サイトリンク：https://yuichi-japan.com/
• サイト名：Yuichi Yoshimura│Portfolio

STUDIOアンバサダーでもある吉村優一さんのポートフォリオです。

黒をベースにモダンな仕上がりになっており、レイアウトやスクロール連動のアニメーションもオシャレなサイトです。

まとめ

STUDIOで作成された導入事例をまとめてみましたがいかがでしたか？

アニメーションもふんだんに盛り込まれているモダンなサイトや、シンプルで無駄のないオシャレなデザインのサイト等、幅広いパターンのWebサイトに導入されていることが分かりますね。

デザイナーやコーダーの仕事も一つにまとめることができるツールのため、上手く使いこなすことができればこれまでのサイト制作フローを大きく変化させることもできそうです。

No Codeツールの進化を強く感じるツールですね！

導入は無料からできるので、興味がある方は自分でも触れてみて、実際にサイト公開までしてみましょう！