こんにちは Notaでデザインを担当しているtakeruです。この記事はNota Advent Calendar 8日目の記事です。ここではNotaのデザインワークにおけるNoCode 事情について紹介したいと思います。デザイナーだけでなく色んな職種の方に向けて書いてみました。

ここ数年NoCodeという言葉をよく耳にするようになりました。Notaでも最近、静的なWebサイトは全てコーディング無しで制作しています。たとえばコーポレートサイトやマーケティングイベント用のLP、採用イベント用のLPは全てこの方法で作られています。

良い点ばかりが注目されがちなNoCodeですが実情はどうでしょう？ ここでは私たちがこの方法を取り入れた経緯や実際に経験したメリットとデメリットをまとめてみました。

これまでの問題点

Notaにはデザイナーが3人います。スタイリング、コーディング、グラフィックなどそれぞれ得意なスキルが異なります。サイトを制作する場合、以前はスタイリングが得意なメンバーtiroが描画ツールで見た目を整え、それをコーディングができるメンバーtakeruが実装するという流れをとっていました。ところがこの手法はいくつかの問題を抱えています。

問題1 : コミュニケーションコストが高い

スタイリングと実装を別のメンバーが行うため、コミュニケーションに時間がかかります。レスポンシブ対応や画面遷移の動きなど描画ツールでは気づかない箇所も多いため、その都度レビューや修正を繰り返す必要がありました。またマーケターや採用担当者からの要望がデザイナー同士で伝言ゲーム化してしまうなど、無駄なコミュニケーションコストが発生していました。

問題2 : お互いに気持ちよく仕事ができない

スタイル担当者にとっては細かいアイデアを自由に反映できないことにフラストレーションを感じます。また実装担当者は他者から提案されたスタイルを実装するだけの作業に物足りなさを感じがちです。お互いにあまり気持の良い状況ではなかったと思います。

問題3 : リリース後は実装担当者に作業が集まる

サイトは一度作って終わりではありません。リリース後も小さなアップデートが頻繁に発生します。大抵の場合は描画ツールを必要としない程度の軽微な更新です。必然的に実装担当者に業務が集中してしまいます。

こうした状況の中、主にスタイリングを担当していたtiroが提案してくれたのがWebflowの利用でした。Webflowを使えばコーディングによる実装は不要になります。

Webflowとは

Webflowはコーディングを使わずGUIのみでWebサイトを作成できるサービスです。「コーディングができなくてもプロ並みのウェブサイトが制作できるサービスを提供する」という目標もために2013年にVlad Magdalinさん（現CEO）によってスタートしました。このVladさんのtweetによれば10年以上の構想と4度の大失敗を経てやっと今のプロダクトにたどり着いたことが記されています。並々ならぬ執念を感じますね。

Webflowでできること

サイトの制作と運用

レイアウト、ページ遷移、フォーム管理、ホスティングの設定など全てGUIで作業できます。Webflowはブラウザ上で動くWebアプリなので、MacやWindowsなどのOSによる動作環境をを気にしなくてよいのも特徴です。

CMSの運用

単発のWebサイト制作だけでなく、ブログ等のコンテンツを管理できるCMSとしての機能もあります。Notaではこの機能を使い、今読んで頂いてるNota Blogやイベントのアーカイブ情報を公開しています。これらのテンプレートのデザインも当然GUIで作成できます。

編集者によるコンテンツ更新

デザイナーとは別にコンテンツの編集権限を持つ「編集者」を追加できます。面白いのは、編集者が扱えるのは記事コンテンツにとどまらない点です。サイトのコンテンツに関わるデータベース全般を編集することができます。例えばNotaでは社員プロフィールや採用ページでの募集職種などがこれに当たります。これらの情報はエンジニアやデザイナーの手を借りることなくマーケターや採用担当者が自由に更新できます。

まずはコーポレートサイトで実験

NotaのプロダクトであるGyazoやScrapbox、HelpfeelのLPはコンテンツ量が多く、一部はプロダクトに紐付いて動的な役割を担っています。これらをいきなりWebflowに移行するのはリスクが高いように思えました。そこでまずはコンテンツ量が少なく独立性の高いコーポレートサイトで試用し、その後イベント用のLPでもWebflowの利用を開始しました。

使ってみて感じたメリット

Webflowは想像以上に柔軟なツールでした。コーディングで制作していた内容の殆どはWebflowでも実現可能だと思います。使ってみて以下のようなメリットを感じました。

メリット1 : 作業時間が短縮できた

スタイリング担当と実装担当でのコミュケーションコストがなくなりました。制作の作業はほぼ1人で完結します。

メリット2 : 作業者のストレスが緩和された

スタイリング担当にとっては最終アウトプットまで自分で手掛けることができるため、やりがいと責任感が増したように思います。また実装を担当していたデザイナーにとっては自身の提案やタスクに集中できるようになりました。

メリット3 : 要望に対する柔軟な対応が可能になった

制作に関わる人間が少ないので、細かい調整にも柔軟に対応できます。マーケターや採用担当者から届く要望に対し、従来ならコーディングを用いてテンプレートを改修する必要があったところを、Webflowの場合は１人でサクッと更新できるようになりました。

使ってみて感じたデメリット

良いことばかりではありませんでした。困ることや疑問に感じる仕様もいくつかありました。

デメリット1 : スケールしづらい

Webflowでは複数のデザイナーによる同時作業ができません。またgitに比べればバージョン管理もかなり貧弱です。1つのプロジェクトに関わるデザイナーは3人程度が限界のように感じました。

デメリット2 : 曖昧な権限

編集者とデザイナーの権限が曖昧なため、事故が起きやすいです。編集者がデザインの変更を公開できてしまったり、逆にデザイナーが誤って記事コンテンツ公開してしまう、というような事が起きてしまいます。今はルールを用いた運用で凌いでいますが、人数が増えると厳しそうです。

デメリット3 : コーディングを好む人にはもどかしい（ただし使えないことはない）

正直なところ私自身、コーディングを好む身としてはGUIの操作に煩わしさを感じます。ただWebflowの場合、仕様はコーディングでやっていることとほぼ同じなので、HTMLやCSSの知識があれば学習無しで使えてしまいます。結果としてWebflowの方が操作できる人を選ばないことから、チームとしては効率的に動けます。

組織によってはこれらの問題を深刻に捉えるかもしれません。ただNotaの場合はまだまだ成長過程にあるスタートアップ企業です。多人数による長期的なメンテ重視のサイトではなく、目の前の成長の手助けとなるサイトを未熟ながらも素早く構築できるという点でメリットがデメリットを上回りました。

結果としては大成功

NoCodeに関しては賛否両論いろんな意見を見かけます。Webflowの場合も従来コーディングで行っていたことをGUIに置き換えただけでやってる事は同じですし、上記のように多くの問題点も感じました。

それでも1年間運用してみて今回の導入は大成功だったと思います。制作時間の短縮で事業への貢献度を上げることができたし、何よりメンバーが各々の仕事に対して自信と責任を持てるようになったと思います。

こうしたツールはメリットやデメリットを理解し、チームの状況に応じて使い分けることで大きな力になり得ることを実感できました。

常に進化し続けるNotaのワークスタイル

Notaでは皆が気持ちよく作業をできる環境を追求する文化が根づいています。フルリモートワークはコロナ以前から当たり前のように導入されていますし、働く時間や場所の自由度もかなり高いです。また新しいツールや仕組みは積極的に導入し、あらゆる業務が継続的に効率化されています。

今回のWebflowもtiroの提案で「とにかく試してみよう」と非常にスピーディーに進めることができました。導入を提案してくれたtiroに感謝です。

こんなNotaでの働き方に興味をもっていただいた方はぜひ採用ページをチェックしてみてください。Notaは今急速に成長しており、たくさんの仲間を必要としてます！ ご連絡をお待ちしています！
来週12/16（木）19時からカスタマーサクセスのミートアップもやります。

明日はエンジニアのteramotodaikiさんがHelpfeeの新機能開発の舞台裏について記事を書いてくれます。こちらもぜひ読んでください！