NDC LUNCH
MEETING

石井穣  STUDIO株式会社 CEO/Design Chief
甲斐啓真 STUDIO株式会社 CPO/Founder

Event Date : 2019.01.11

石井穣   STUDIO株式会社 CEO/Design Chief 甲斐啓真 STUDIO株式会社 CPO/Founder

先進のテクノロジーや独自の発想で、デザインの可能性を広げる人たちがいます。さまざまな領域を横断し、これからのデザインをともに考える対話の場「NDC LUNCH MEETING」今回は、コードを書かずにWebサイトを作成できるデザインツール「STUDIO」を開発した石井穣さん、甲斐啓真さんをお招きしました。

デザイナーとエンジニアの仕事をひとつにするために、
コードを書かずにWebサイトを制作できる「STUDIO」を開発しました───石井
デザイナーとエンジニアの
仕事をひとつにするために、
コードを書かずにWebサイトを
制作できる「STUDIO」を開発しました
───石井

石井

僕たちが開発した「STUDIO」は、デザインとコードをひとつにしたまったく新しいデザインツールです。必要な操作はドラッグ&ドロップだけで、デザインしたものは瞬時にコードに変換されるので、コーディングの知識がなくても、サイトの制作から公開までが可能です。写真を選んだり、テキストを置いたり、デザインは自由自在。簡単なパディング、マージンなどCSSの概念も持ち込んでいて、レスポンシブにも自動で対応しています。

鍋田(NDC)

開発のきっかけは何だったのでしょうか。

石井

世界には20億を超えるサイトがあり、さらに毎日約100万の新しいサイトが生まれています。以前はテキストやリンクだけでシンプルだった内容も、写真や動画、さまざまな演出や機能が加わり、リッチになっています。デバイスもデスクトップからタブレット、モバイルまで多岐にわたって対応が必要で、求められる要件は年々増え続けているのに、制作環境は20年前とあまり変わっていない。いまだに黒い画面で、エンジニアが人間的ではないコードを書いているのが現状です。

サイトを作るフローも煩雑です。デザイナーがIllustratorやPhotoshop、Sketchなどで絵を描いて、それをもとにエンジニアが1からコードを組み立てていく。各種デバイスへの対応作業、コーディング、サーバのセットアップ・・・と、そうこうしているうちに数ヵ月が経ち、費用もかさみます。ゴールが同じにもかかわらず、デザイナーとエンジニアがまったく違ったフォーマットで作業をしているのは非効率なので、それを1つに融合させてサイト制作のスピードを上げたいと思ったんです。

石井穣(Ishii Yutaka)
STUDIO株式会社 代表取締役CEO/Design Chief

大学在学中にWeb制作会社を起業。その後、旅行系のスタートアップ「Travee」を立ち上げ、取締役CPO(Chief Product Officer)就任。約2年間の運営後、大手旅行会社に事業売却。2016年12月にオハコプロダクツ株式会社(STUDIOチーム)にジョイン。MBOを経て代表取締役CEOに就任。

甲斐

僕はデザイナーとエンジニアをどちらもやっていたのですが、デザインして、またコーディングして、というのが単純に面倒くさいし、意味があるように思えなかった。コードを書く「面倒」をゼロにして、そのまま成果物になるデザインツールがほしいと考えました。

原(NDC)

構想からリリースまではどれくらいかかりましたか?

石井

約3年です。2016年の4月にβ版が完成し、2018年4月に正式にリリースしました。4ヵ月後には、Webのトレンドメディア「Product Hunt」で、日本企業で初となる世界一を達成したこともあり、いまは世界82カ国でユーザーを獲得しています。利用者は約3万人で、海外の利用者率は約40%です。

甲斐啓真(Kai Keima)
STUDIO株式会社 CPO/Founder

大学在学中に、UIデザインカンパニー「オハコ」の創業期にジョイン。取締役就任。2016年4月に、オハコプロダクツ株式会社(現STUDIO株式会社)を創業、「STUDIO」を作り始める。2016年12月に石井と出会い、オハコからのMBOを経て取締役CPOに就任。

コーディング不要なので
よりデザインに集中できるという声が届いています───石井
コーディング不要なので
よりデザインに集中できる
という声が届いています
───石井

杉本(NDC)

日本発のプロダクトとしては見たことがないので感動的です。他にはどんな特徴がありますか?

石井

「STUDIO」が比較されるものは2つあって、ひとつはWIX、もうひとつはWordPressです。WIXは世界に1億ものユーザーを持つサイト作成ツールですが、ターゲットは一般の方。テンプレートを選んで、写真、テキストをあてるだけなので、オリジナルなデザインやレイアウトができません。世界中のサイトの約30%で使用されているWordPressは、カスタマイズする場合にはどうしてもコードの知識、つまりエンジニアが必要になります。それらを踏まえて、デザインに自由度があり、かつコーディングの知識が不要であることを両立させたのが「STUDIO」です。画像などのパーツもピタリとはまる独自のレイアウト手法は特許も取得しました。

原(NDC)

ほぼ何でもできると考えていいですか?できないこともあるんでしょうか?

石井

静的なサイトであれば自由に制作できますし、Gifや動画を埋め込むことも可能です。ただ現段階では、スクロールにあわせてポップアップしたり、トランジッションを設定したりなど、動きのある演出には対応していません。決済のできるECサイト、ブログ更新など、機能面の拡充もこれからですね。

深津(THE GUILD代表)

Webにそのまま公開できるIllustratorやPhotoshopというイメージですね。

鍋田(NDC)

どのような方がどのように使われていますか?

石井

企業の方が自社のイベントページ、採用ページなどを作っています。高校生が使っている例もありました。レビューも高評価が多く、「コーディングの時間をとらないでいいからデザインに集中できる。よりクリエイティブを発揮できてうれしい」という声が届いています。ワークショップを3回主催しましたが、いまは、コアなユーザーが自主的に広めてくれて利用者が増えている状況です。今後は制作会社のクリエイターに使ってほしいですね。プロが満足できるデザイン性というものを大切にしているので。

原(NDC)

ユーザーが増えることでより充実していくのでしょうね。わたしたちは、VI、サイン、カタログ、書籍、パッケージ、展覧会など、さまざまなメディアを手掛けるのですが、Webだけは別の知識がないとできないと考えていた一面があったので、「STUDIO」のようなデザインツールは、ぜひ使ってみたいです。

複数企業が注目している領域なので
ビジネスとしての可能性にも期待───甲斐
複数企業が注目している
領域なのでビジネスとしての
可能性にも期待
───甲斐

佐々木(NDC)

ビジネスとしてはどのように成立しているのでしょうか?

石井

Webサイトごとに課金するシステムです。基本プランは無料ですが、オリジナルのドメインを設定したり、Google Analyticsをはじめとする外部サービスと連携したり、「STUDIO」のバナーを外したり、各種カスタマイズする場合は月額で費用が発生します。

吉岡(NDC)

そもそもなのですが、なぜ「コーディング不要」ということが可能なのでしょう?

甲斐

実際にデザインしていることが、そのままコーディングになっているんです。ベースはコードであるにもかかわらず、知識がなくても簡単に使えるということです。Webflowというツールもコードを書かずにサイト制作ができるのですが、操作が複雑でかなり難しい。

杉本(NDC)

正しいコードをベースにしているということはSEO的にも良いということですか?

石井

そうです。正しいHTMLに則りながらデザインができるので、コードもきれいです。例えば「STUDIO」は一般名詞ですが、検索すると1位にあがってきます。

原(NDC)

これから似たようなツールが出てくると思いますか?

甲斐

コードを書かずにサイトを制作するというのは、常に複数の企業がチャレンジしている領域です。でも主流にはなっていない。さまざまな試みがされてはきましたが、結局は(エンジニアがコードが書くほうが優れているな)となってしまう。だから20年間、制作環境が変わっていないんです。逆に考えれば、達成さえしてしまえば、追いつきずらいということかもしれません。

クリエイションの中身が一層重要になる───原
クリエイションの
中身が一層重要になる
───原

原(NDC)

Webサイトが簡単に制作できると、Webを介したクリエイションの重心はどう動いていくと思いますか?

石井

中身重視になっていくと思います。シンプルでもいいから、伝えたいメッセージがきちんと表現できているか。言葉はとても大切です。

甲斐

単純作業は自動化されていくので、最後は「想い」、伝えたいものがあるか、作りたいものは何かということになると思います。機械に近いところから、人間的な部分に置き換わっていくイメージです。

原(NDC)

最初は存在自体が貴重だったWebも、充分に普及したからこそ、企画、編集、写真、動画、コピーのクオリティの重要性が増してきますね。わたし自身は、単純なフレームがあり、フォントも明朝とゴシックがあればよく、その中でどうバリューを作るか、クオリティを出すか、という考えでデザインをしています。イメージしていたものが、実際にコーディングしてみると思い通りではないケースもありましたが、「STUDIO」の機能を端から端まで使いこなせば、いいものができそうだと感じます。

一方で、美術館の仕事などをしていると、カタログやポスター、Webなど、キュレーターのセンスがよいと、デザイナー不在でもよい制作物を作れることがあります。ツールが進化するほどに、デザイン教育を受けなくてもできるようになることも増えていき、ある部分では急速にデザインの必要性がなくなるかもしれない。

深津(THE GUILD代表)

誰もが下駄をひとつ履けるということですよね。プロは集中してクリエイティブを高めていかないと。いいパターンとしては、エンジニアの工数や予算が減ったので、撮影や制作に時間をかけて良いものをつくるということ。エンジニアの工数や予算が減ったので、予算や日数もカットして・・ということであれば、クリエイターにとってあまり意味がないかもしれません。

「STUDIO」を通して、斬新なクリエイティブや
革新的なサービスが生まれたらうれしい───石井
「STUDIO」を通して、
斬新なクリエイティブや
革新的なサービスが
生まれたらうれしい
───石井

深津(THE GUILD代表)

デザインとテックを組み合わせていくときに、難しかったことはありますか?

甲斐

両方の職能を持ったふたりで開発したので、そこはあまり意識しなかったですね。技術的なことで言えば、ドラッグ&ドロップの挙動を最適化するのが難しかったです。「STUDIO」でのレイアウト作業は、積み木を重ねていくような考え方で、上下には好きなものが置けるのですが、左右には置けなかった。それはコードの仕組みを考えると自然なことではあるのですが、その操作部分を去年の夏からひたすらやり直して、改善されたものが2019年1月にリリースされました。

石井

とにかくコードは完全に正しいものを。それでいてユーザーの自由度を高める。いいバランスに着地したのが「STUDIO」なんです。今後は、コンテンツを自在に更新できる機能も追加したくて、そうすればWordPressができていることもカバーできる。

原(NDC)

よい機材、よいツールを使いこなせれば、デザイナーが写真も動画も撮影できて、Webも制作できて・・と、ますますいろんなものの垣根がなくなるでしょうね。連続的にメディアを扱える人たちが新しいクリエイティブを作っていくと思います。まずは使ってみたいですね。社員対象にワークショップを開催してもらえたらと思います。

石井

「STUDIO」を通して、斬新なクリエイティブや革新的なサービスが生まれたらうれしいです。僕たちはひとりひとりのユーザーとコミュニケーションして仲良くなること、ファンになってもらおうということは、とても意識しています。インターコムというチャットのCSツールを使っているんですが、頂いたメッセージは24時間対応で返すほどです。ワークショップもぜひやりましょう。