STUDIOの革新|WD ONLINE

WD Online

特別企画 [PR] Web Designing 2024年2月号

STUDIOの革新 制作現場やクライアントのニーズに寄り添う実用的な機能を次々とリリース

ノーコードWeb制作プラットフォームのSTUDIOは、2018年の正式リリース以後も数々の機能向上・機能追加を繰り返しています。さらに2023年末には、チーム単位で複数のSTUDIOサイトを一元管理できる「チーム機能」もリリースされる予定。ここでは、草創期からSTUDIOを活用し続け、STUDIO認定パートナーで唯一GOLDランクを獲得しているgazさんに、制作会社がSTUDIOを導入するメリットを尋ねました。

 

株式会社gaz
300以上のSTUDIOサイトを手掛ける制作会社が新機能を先行チェック

2019年に創業して以降、300以上のSTUDIOサイトを手掛けているWeb制作会社。SEOやアクセシビリティに配慮したサイト構築や、UI/UX視点に立ったWebサイトの設計などに定評があります。STUDIOを草創期から知る制作会社の一つであり、STUDIOとはイベントの参加や機能のフィードバックなど深く連携して協業しています。2020年、日本初のSTUDIO認定パートナーに認定されました。【URL】https://gaz.design

 

 

STUDIOとともに成長を続ける制作会社“gaz”

STUDIOがもたらしたパラダイムシフト

gazのCEOを務める吉岡泰之さんがSTUDIOと出会ったのは、まだ前職のスタートアップに在籍していた頃です。個人で作っていたサービスのLPにSTUDIOを使用したのが最初でした。吉岡さん自身はノーコードツールを使わずにWebサイトを構築できるスキルがありましたが、STUDIOを使うことでスピーディに、十分なクオリティのWebサイトを制作できることに価値を見出しました。

gazの創業後も、STUDIOは同社の主要なツールとして使われ、今やほとんどのWeb制作プロジェクトで活用されています。制作の依頼はWebサイト経由が多く、業界を問わず多種多様なクライアントを抱えているそうです。

同社のスタッフは現在24人で、そのほとんどがデザイナーです。その全員がSTUDIOを扱うスキルを習得しており、クライアントへのヒアリングからデザイン、実装まで案件の全行程を各自が1人で担当できるようになっています。

「新しく採用したデザイナーが、コーディングやディレクションのスキルを習得するにはどうしても時間がかかります。しかし、STUDIOを使えば、ポテンシャルのある人材なら数カ月で即戦力になります。そういう点でも、STUDIOはWeb制作の現場にパラダイムシフトを起こした存在だと言えるのではないでしょうか」

ベネッセ「進研ゼミ小学講座かがく組」
小学生向け科学雑誌の紹介ページ。スッキリとした構成とデザインで、雑誌の魅力をわかりやすく伝えることに成功しています【URL】https://sho.benesse.co.jp/op/science/grade1

 

立命館大学「宇宙地球探査研究センター(ESEC)」
立命館大学内にある宇宙科学研究チームのWebサイト。モノトーンでまとめることでアカデミックな雰囲気を醸し出しています【URL】https://esec.ritsumei.ac.jp/

 

国立大学法人北海道大学 大学院総合サイト
北海道大学 大学院を紹介する総合サイト。ニュースや大学院生の声など複数の更新ページをCMS機能で実装しています【URL】https://www.grad.hokudai.ac.jp/

 

 

新たに実装された「チーム機能」がもたらす恩恵

管理の効率化に加えセキュリティリスクも軽減

STUDIOは、複数のSTUDIOサイトを管理するための「チーム機能」を2024年上半期に正式リリースする予定です。この機能を使用すると、制作会社は複数のSTUDIOサイトをチーム単位で一元的に管理できるようになり、さらにメンバーの管理も効率化します。現在、チーム機能はクローズドベータで検証中であり、gazも参加しています。

「チーム機能を使うと、制作会社に新しいデザイナーが加わった場合でも、各クライアントのSTUDIOサイトに素早く招待できます。また、退職したメンバーを一括で削除することも可能です。管理の効率化に加え、使用していないアカウントがそのままになるようなセキュリティリスクも軽減できます」

クライアント企業は、制作会社がチーム機能を使用しているかを意識することなくSTUDIOを利用できます。

「一部の制作会社は、ドメインやサーバの契約を企業に代わって行うこともありますが、私たちはそういった方法で顧客の囲い込みをするよりも、顧客の自立を支援することが重要だと考えています。STUDIOを使い、顧客が自分たちでWebサイトを運用できるよう支援することで、むしろ長期的な信頼関係を築けることが多いです」

ノーコードで運用・編集が可能なSTUDIOは、クライアントによるWebサイトの自走を支援しやすいツールだと言えるでしょう。

制作会社の悩みを解決するチーム機能
従来の運用では、メンバーの追加や支払い管理などに対して、管理者に大きな負担がありました。チーム機能はそうした不安を解消するために生まれたものです
チーム単位で複数のサイトを一元管理
チーム機能では、複数のSTUDIOサイトをチーム単位で一元管理できます。ユーザーインターフェイスや操作も非常に直感的で、戸惑うことなく操作できます
メンバーの追加・削除も簡単
例えば制作会社に新しい制作スタッフが加わった時、まずはチーム機能でチームに招待します。その後、参加の必要があるプロジェクトにメンバーを割り当てていくことができます
従来の運用方法でも柔軟な共同編集が可能
従来の運用方法でも、プロジェクト(Webサイト)ごとにメンバーを追加することは可能です。「オーナー」や「編集者」など、柔軟に権限設定が行えます

 

 

制作会社の生産性を高める充実の機能

さまざまなコストの削減に大きく貢献している

吉岡さんは、STUDIO導入のメリットとして、次の3点を挙げています。

1つ目は、教育コストの削減。冒頭でも触れたとおり、経験の浅いスタッフでもSTUDIOなら短期間で即戦力として活躍できます。2つ目は、コーディングが不要になり、制作期間を短縮できること。短納期で制作が可能になれば、発注側の満足度にもつながります。そして3つ目は、コミュニケーションコストの低減。STUDIOなら打ち合わせをしながらでもすぐにWebサイトを変更し、即座に相手に確認してもらえます。

個別の機能では、直感的に使えるエディタを高く評価しています。特にアニメーションの設定部分では、CSSアニメーションのパラメータを視覚的に確認しながら調整できる点に魅力を感じているそうです。

「個人的には、STUDIOがこれからのWeb制作のスタンダードを担うツールだと確信しています。もちろん、まだ改善を期待するポイントもあります。例えば、現在はWebサイトを予約更新する機能がありませんが、これはエンタープライズ市場でSTUDIOを普及させていくために必要な機能だと思います。gazでは、STUDIOの開発メンバーと直接意見交換を行うなど、密接に連携しています。今後も現場の声をフィードバックしながらともに成長し、STUDIOがより使いやすいツールになってくれるのを期待しています」

直感的なアニメーション設定
フェードインなどのモーションの設定は、カーブを曲げるようなUIで設定します。サイトの印象を左右する動きの設定を、直感的に試行錯誤できます
画像のサイズを自動で最適化
Webサイトに掲載する画像をアップロードすると、画像サイズの調整を自動で行ってくれます。画像の最適化は、SEOの観点からも非常
難解なサーバ公開の流れもわかりやすく
サイトにドメインを適用すると、DNSの浸透待ちやTLSの証明書発行の進捗が画面に表示されます。これにより、サイト公開の過程が非常にわかりやすくなっています
プロジェクトを跨いでコピー&ペースト
STUDIOのブロックパーツはコピー&ペーストでほかのプロジェクトに持っていくことができます。gazでは、よく使うパーツを集めたテンプレートを社内で共有しているそうです

本記事はSTUDIO株式会社とのタイアップです。

掲載号

Web Designing 2024年2月号

Web Designing 2024年2月号

2023年12月18日発売 本誌:1,680円(税込) / PDF版:1,580円(税込)

思い通りに「伝わる」「伝える」ための「デザイン基礎講座」/マーケティングフレームワークの“正しい”使い方

サンプルデータはこちらから

第1特集
思い通りに「伝わる」「伝える」ための
デザイン基礎講座

⚫︎Introduction
【UI/UXの基本 5つのルール】
UI/UXの基本概念を「UIデザイン」「UXデザイン」「情報設計」「インタラクションデザイン」「UXライティング」といった“5つのルール”で解説します。

⚫︎第1特集:【デザイン基礎講座】
デザインの基礎を知っているだけで、伝わり方や伝え方は変わります。本特集では、「レイアウト」「色」「文字」の基本を押さえた上で、「Webデザイン」の大事な考え方をはじめ、ビジネスで多用する「資料作成」など、幅広い内容のデザインについて解説を行っています。「なんとなく」や「雰囲気」ではなく、再現性のある確かなコミュニケーションを図ること。それこそが、Webビジネスのクオリティを高める第一歩かもしれません。

Part1_【デザインの基礎】レイアウト・文字・色の基本原則を押さえる
レイアウトの基本原則を理解する:情報の整理と差別化 / デザインに必要な4つの原則 / レイアウトの規則性…etc.
配色の基本原則を理解する:色の性質と選び方 / イメージと色
書体の基本を理解する:書体の種類と選び方 / 文字組みの重要性

Part2_【Webサイトのデザイン】心地よいユーザー体験のためのデザイン
_見せる情報と隠す情報: アコーディオンで開閉 / 長いものは続きを隠す / カルーセルでスライド…etc.
_適した動きの可変レイアウト: デザインに合った変化に / 安定したソリッドレイアウト / 柔軟なリキッドレイアウト…etc.
_“普通”の文字サイズ: 基準となる文字サイズと行間 / Google 検索やnoteを参考に
_リンクの有無を明確に: 誰もがリンクだとわかる表現
_画像や動画を快適に表示する: 画像の基本的なフォーマット / 次世代型の画像フォーマット / 動画フォーマットの使い分け
_アニメーションが活きる場面: 動かす効果と役割 / 変化の過程を見せる
_アイコン画像の活用:情報をアイコンで表現
〈 Webデザインの味方となる便利サイト8選 〉

Part3_【ビジネスのデザイン】装飾的ではなく機能的なデザインのポイント
_資料や企画書の見せ方: サブ要素はグレーで表現/ 図は線の囲みを少なく…etc.
_グラフやチャートのデザイン: 吹き出しでグラフ内を説明/流れを視覚化する…etc.
_チラシ/ペラもののデザイン: ここぞ! という文字は丁寧に処理 / アイコンで直感的に…etc.

【特別企画】
非デザイナーのためのデザインオーダー術

【コラム】
「商品の魅力を引き出す」ためのスマホ写真の心得と撮影の基本
非デザイナーが重視すべきビジネス文書のデザイン視点


--
第2特集:「使わない」からはじめる
マーケティングフレームワークの“正しい”使い方
【監修】トライバルメディアハウス 池田紀行さん

どうもフレームワークを上手く使いこなせない、使っている場面に居合わせてもイマイチ納得できない。これが本企画の始まりでした。そこで思い切って、トライバルメディアハウスの池田紀行さんにぶつけてみたところ、返ってきたのは「最初からフレームワークを使わない」とのお言葉。え、それってどういうこと? からスタートするこの話、きっとフレームワークを使いこなすための考え方が変わると思います。

_マーケティングにおいてフレームワークは正解への近道か?
_独自のフレームワークを開発する背景とその利点
_「使わない」からはじまる独学ステップ
_フレームワーク活用度を高める反復トレーニング


⚫︎連載
・Personalization X オムニチャネル
・文章力を上げる鉄板ルール
・どうする要件定義
・ECサイト業界研究
・ど根性ディレクション道
・データのミカタ
・知的財産権にまつわるエトセトラ
・コラム「デザイン」