ノーコードに対する見方が変わる「STUDIO」の創造性|WD ONLINE

WD Online

特別企画 [PR] Web Designing 2023年8月号

ノーコードに対する見方が変わる「STUDIO」の創造性 SHIFTBRAIN×STUDIO

「デザイナーのためのWeb制作プラットフォーム」を目指すノーコードツール「STUDIO」。デザインの現場では、どこまで力を発揮できるのでしょうか。クリエイティブエージェンシー、SHIFTBRAINの鎌田亮平さんと、STUDIO代表取締役CEOの石井穣さんの対話から探っていきます。

(写真左)鎌田亮平
株式会社SHIFTBRAIN執行役員、アートディレクター、Paraph編集長。プロのマジシャンとしての活動を経て、デザイナーの道へ。SHIFTBRAINではブランディングを中心に、アートディレクション、デザインなどを担当。https://shiftbrain.com
(写真右)石井穣
STUDIO株式会社代表取締役CEO。学生時代からWebデザインやアプリケーション開発を経験。旅行サービスの立ち上げなどを経て、2016年にSTUDIOに入社。2017年6月より現職。https://studio.inc

 

便利なものがあれば、積極的に使いたい

石井 SHIFTBRAINさんとのお付き合いは、STUDIO DESIGN AWARDというイベントに協賛として参加いただいたのがきっかけでしたね。今は鎌田さんご自身も、STUDIOを使い始めてくださっているんですよね。

鎌田 はい。個人的にSTUDIOのワークショップに参加したり、YouTubeを見たりしながら、少しずつ詳しくなってきました。今は、STUDIOを使って既存のWebページを再現するといった自主レッスンをしています。

石井 ツールの印象はいかがですか?

鎌田 触っていて楽しいと感じるツールです。僕はコードが全然書けないので、ノーコードでWebサイトができるのはうれしいと思います。

石井 ノーコードツールに対して、もともとどのようなイメージを持っていましたか?

鎌田 ノーコードツールに対してはポジティブに捉えていました。便利になるものがあれば、なんでも積極的に使いたいと思っていますし。最近は、楽しそうなツールがいっぱい出てきたな、という印象です。

石井 STUDIOは、デザイナーのためのWeb制作プラットフォームを目指しています。私はもともとデザイナー兼エンジニアなんです。それで、デザインデータをつくった後に、一からコードを書いていかなければいけないのが非効率だと感じて。もっとうまい方法がないかと考えたのがきっかけで、今のSTUDIOになっているんですよ。

鎌田 STUDIOには、SHIFTBRAINのデザイナーの多くが興味を持っており、それぞれ使い方を研究しています。まずは1つ目の実績をつくって、STUDIOでできる範囲がわかっていくと、SHIFTBRAINでの利用実績も増えていくのではないかと思います。

※STUDIOで作成されたWebサイトを讃えるアワードイベント

 

短期間で制作できる分、コストを抑えられるかも

石井 SHIFTBRAINさんでは、デザイナーがコーディングのことを意識する機会はあるんですか?

鎌田 SHIFTBRAINの場合は、デザイナーチームとエンジニアチームがしっかりと分かれています。デザインがそのままWebになれば…と感じることはたまにありますけど、アニメーションなど、コーディングの力が加わって初めて完成するという意識のほうが強いですね。

石井 SHIFTBRAINさんのWebサイトは、アニメーションがすごいですよね。動きはどなたが設計しているんですか?

鎌田 デザイナーとエンジニアの両方です。デザイナーは、デザインしながら頭の中に動きの演出があって、エンジニアと相談しながらつくり上げていく感じです。あと場合によっては、コーディングの前にAdobe After Effectsでアニメーションをつくってクライアントに見せるケースもあります。

石井 鎌田さんはアートディレクターであると同時に、SHIFTBRAINの執行役員という立場でもありますよね。ビジネス視点で見たときに、STUDIOはどのようなツールですか?

鎌田 やはり短期間で制作できるというのはメリットだと思います。その分、コストを抑えられるでしょうし。案件の中には予算感があわずにお断りせざるを得ないケースもあるのですが、STUDIOを使うことで対応できるようになるかもしれません。

石井 対応の幅が広がるということでしょうか。

鎌田 一方で、開発力の高さがSHIFTBRAINの強みの一つでもあるので、もしSTUDIOを使用する場合は、どのように折り合いをつけるかが課題になると思います。今後はSTUDIOを活用するかどうかも含めて、使いどころを探る必要がありそうです。

誰もが自由にデザインできるノーコードツール

STUDIOは、コードやテンプレートに縛られず、自由にデザインできるWeb制作プラットフォーム。ブラウザベースで軽快に動作します https://studio.design/ja
従来のワークフローでは、デザイン作業とコーディング作業が分断しており、効率性や再現性の面で問題が発生することもありました。STUDIOは、デザインとコーディングを一体化することで、こうした諸問題をスマートに解決します
 

 

クリエイティブツールとして望む機能とは?

石井 クリエイターがWeb制作ツールに望むのは、どんな機能でしょうか?

鎌田 レイアウトだけじゃなくて画像加工までできたらいいですね。Photoshopでやればいいという話ではあるんですけれど。1つで完結できたら理想的ですよね。

石井 STUDIOはまだ、画像加工などは弱いです。現状では、ほかのツールでつくって読み込んでもらう作業フローですが、いずれはSTUDIO上でできるようにしたいと思っています。

鎌田 あと、要望を言わせていただくと、グリッドが出せるようにしてほしいです。デザインツールの「Figma」でデザインしたものをSTUDIOで再現しようとすると、マージンを何ピクセル…って測らなければいけないんですよ。だから僕はハック的な使い方で、グリッド状のSVGデータを配置して、それを目印にしてパーツを並べています。

石井 フィードバックありがとうございます。対応できるかどうか考えてみます。あと、Figmaとの連携に関しては、今後もう少し便利になるかもしれません。

鎌田 なにかアップデートがあるんですね。期待しています。

石井 あと、機能が増えると習得コストも気になると思うのですが、その点で不満などはありましたか?

鎌田 習得は比較的簡単だと思います。僕は公式のYouTube動画で全体像を把握したあとは、それほど戸惑わずに使えました。それに、国産のツールということもあり、ネット上に日本語のノウハウがたくさんあるのもうれしいです。今からFigmaを覚えるよりも楽だと思いますね。あと、動作が軽快なのも使いやすさにつながっています。

石井 そうですね。むしろデスクトップのツールより軽快だと感じる部分が多いのではないかと思います。

創造性と生産性を両立するSTUDIOのデザイン機能

ドラッグ&ドロップで柔軟にレイアウト
ボックスの大きさやマージン、順序の並べ替えなどが、ドラッグ&ドロップで可能。操作結果がリアルタイムに反映されます
動きのある表現もおまかせ
スクロールと同時に要素をフェードインさせるなど、動きのある演出も思いのまま。変化のスピードや遅延も細かく調節することができます
豊富なWebフォントから選択できる
WebフォントはTypeSquareとGoogle Fontsに対応。カーニングなどの文字設定もCSSを使わずに完結します
 

 

現場のワークフローを支える機能も充実

石井 STUDIOには、現場のワークフローを支える機能もいろいろと用意されています。例えば、クライアントとの共同作業も簡単にできますよ。

鎌田 公開前にチェックしてもらうような使い方ですか。

石井 チェックだけでなく、権限次第では直接文字を入れてもらうこともできます。

鎌田 それは便利ですね!実際にクライアントに文章を用意していただきたいケースもありますし。お客さん側も、実際にレイアウトを見れば分量をイメージしやすいですね。

石井 あと、バージョン管理機能も便利ですよ。

鎌田 以前のイベントのトークセッションのときに教えていただいた機能ですよね。過去の状態に復元できるっていう。しかも、すごく遡ってましたよね。

石井 プランによってはほぼ1年前まで遡れます(Businessプランの場合)。

鎌田 運用していて、お客さんから「前の状態に戻して」と要望されたときでも、すぐに戻せますね。

石井 運用面に関して言えば、SEO対策にも配慮しています。デザイナーでも、SEOやセキュリティのことを意識することはありませんか?

鎌田 SHIFTBRAINでは、そういうのは全部エンジニアがやってくれるので、私自身はあまり詳しくないんですよ。

石井 STUDIOは、メタタグの設定やリダイレクト設定などSEO周りの設定が簡単にできるようになっています。セキュリティに関しても、自前でサーバを構築するより、STUDIOのプラットフォームに任せていただいたほうが安心できると思います。

鎌田 デザイナーが技術的なことを心配せず、デザインに集中できるのは心強いですね。

制作現場のワークフローを強力にサポート

 
【制作】フォームもノーコードで作成
ボックスの大きさやマージン、順序の並べ替えなどが、ドラッグ&ドロップで可能。操作結果がリアルタイムに反映されます
【制作】ライブプレビューで校正
ワンクリックでプレビュー用のURLを発行し、クライアントにチェックしてもらうことができます。権限を与えて共同編集してもらうことも可能です
【制作】過去のバージョンにロールバック
STUDIOにはバージョン管理機能があり、任意のバージョンに復元できます。バージョンの保存期間は契約プランにより異なります
 

企画協力:STUDIO株式会社

掲載号

Web Designing 2023年8月号

Web Designing 2023年8月号

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

Web制作・運用がパフォーマンスアップするノーコードツールとの付き合い方

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

Web制作とノーコードの良い関係

数年前より「ノーコード・ローコード」というキーワードはWeb制作界隈に限らず話題に挙がっており、2023年になり、さらに一層取り沙汰されることが多くなってきました。
「Web制作の知識がなくても簡単にサイトが作れる」として関心は高まっていますが、Web制作を生業とする人たちの反応は、「興味ある」「必要ない」など、大きくわかれています。Web制作会社にとってのノーコードツールの是非とは。まずはノーコードツールそのものをきちんと理解して、せっかくなら自分たちの仕事に有意義に使い、ビジネスの幅を広げることを考えてみませんか?

本特集では、Web 制作のみならず「業務改善」「受託開発」などさまざまなシチュエーションでの活用事例とツールを採用した背景や理由を取材し、用途・目的・仕事のあり方などさまざまな角度からメリット・デメリットを追究します。

また、ノーコードツールだけでなく、巷で大きな話題となっている「ChatGPT」に代表されるAI技術やサービスの行末までカバーします。