コーディングなしでWeb制作ができるSTUDIOを使用した制作事例

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

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

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

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

studioとは

“Where your tools and team Click.

“デザイン、公開、CMSまで、すべてがここに。”


https://studio.design/ja

STUDIO | ノーコードでWebサイトを作成

これからのWebサイト作成に必要なのはSTUDIOだけ。コードやテンプレートに縛られることなく、自由自在にWebサイトをデザインしましょう。

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

STUDIOの概要

無料プラン(0円/月)、有料プラン(980円/月 or  2480円/月)があり、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

STUDIOでWEBサイト制作代行 | gaz, Inc

株式会社gazは、日本初、STUDIO株式会社公認のWEBサイト制作会社です。STUDIOを用いて制作をすることで、低価格かつ高品質・スピーディーなWEBサイトをあらゆる業種のお客様に提供しております。

株式会社gazのHPです。

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

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

株式会社Goodpatch

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

Goodpatch Anywhere | フルリモートデザインチーム

Goodpatch Anywhereは日本や世界各地から集まるデザインチームです。UI/UXデザイナーをはじめ様々なスペシャリティを持つメンバーで構成されたチームが、フルリモートであなたのプロジェクトをサポートします。

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

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

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

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

Eri Miura Portfolio site

東京都在住のフォトグラファー、三浦えりのポートフォリオサイトです。ポートレイトを中心に広告、書籍、ウェブサイト、企業写真、アーティスト写真などを撮影。また、海外の企業広告や書籍、ウェブサイトなどへの写真提供も行っている。写真展やイベント内での展示でも国内外で精力的に活動中。

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

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

日本デザインセンター

  • サイト所有者:日本デザインセンター
  • サイトリンク:https://recruit2021.ndc.co.jp/
  • サイト名:日本デザインセンター2021年度新卒採用サイト

日本デザインセンター2021年度新卒採用サイト

2021年度新卒・既卒採用サイトです。デザイナー/エディター/プランナー/ライター/プロデューサーを募集しています。

日本デザインセンターの新卒採用サイトです。

白を基調にしたシンプルな色使いで、中にはYouTubeの埋め込みやフォトグラフの横スクロール表示などが用いられています。

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

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

VISUAL DESIGN|専門学校文化デザイナー学院 ビジュアルデザイン

専門学校文化デザイナー学院広告プロモーションデザイン学科1年次で実施している「だるま」を題材とした授業課題作品集

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

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

Fukuoka Growth Next

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

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

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

みらいの食券

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

みらいの食券|飲食店のスマホ回数券発行サービス

「みらいの食券」は、飲食店がかんたんにスマホ用の回数券を発行・販売できるwebサービスです。飲食店側は事前に回数分の収益を得ることができ、ユーザー側はプラスαのサービスを受けると共にお店のファンであることを伝え飲食店を応援することができるサービスです。

みらいの食券のLPです。

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

メンド(mend)

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

メンド(mend) - オンラインパートナーサービス | 生活はナイスか

mendはナイスな生活をサポートするオンラインパートナーサービスです。事前登録の受付中。

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

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

Ubie株式会社

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

Ubie株式会社

Ubie株式会社 (Ubie, Inc.) は、「テクノロジーで人々を適切な医療に案内する」をミッションにしたヘルステックスタートアップです。AIを使って、医療機関向けに業務効率化サービス「AI問診ユビー」を、生活者向けに「AI受診相談ユビー」を提供しています。

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

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

Yuichi Yoshimura│Portfolio

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

Yuichi Yoshimura│Portfolio

吉村優一/Yuichi Yoshimura - UI/UX Designer & Video Creater Live in Tokyo, JAPAN. Webデザイン, アプリデザイン, グラフィック, プロモーション動画、広告動画、イメージ動画、Vlogなどを制作しています。

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

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

まとめ

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

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

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

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

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

STUDIO | ノーコードでWebサイトを作成

これからのWebサイト作成に必要なのはSTUDIOだけ。コードやテンプレートに縛られることなく、自由自在にWebサイトをデザインしましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA