ノーコードデザイナーでもFigmaガチ勢なら今日からWebサイト実装できるSTUDIO
こんにちは、VoicyでUI/UXデザイナーをしているスタミです。
VoicyではLPやキャンペーンサイトなどをノーコードツールの「STUDIO」で実装、公開しているのですが、今回自分が初めてやってみて思っていたよりもずっとハードル低いし、Webサイト制作の方法の選択肢として常に持っておくべきと思ったので、その辺を深掘りして書きます。
なぜノーコードツールを使うのか
Voicyのデザインチームは3人中3人、すなわち全員がいわゆる"ノーコードデザイナー"で、ほとんどWebやアプリ等の実装経験がありません。
だからと言って毎回社内のエンジニアと分業したり、外注してLPやキャンペーンサイトを作るのは目的とのバランスを考えるとかなり過多…。
ということで、そのようなケースではデザインチームで積極的にノーコードツールでの実装を担当することにしています。
これだけツールが進化しているなら上手く活用する方が今からコーディングを習得するより断然早くてクオリティも高いですし、逆にコーディングが出来てもそんなに活かせるシーンが多くないというのもあります。
ここ7、8年くらいの間にモバイルアプリファーストのサービスを作っている会社ではデザイナーの役割がかなり大きく変化して、いよいよコーディングは求められなくなってきているなと感じますね。時代は変わりました。
余談ですが、今Voicyで必要とされているデザイナー像はパーソナリティやリスナーにとってどのような体験を提供すれば良いのかを調査、議論しながら具現化していける人です。
「ノーコードツール」って何？どんなツールがあるの？
この記事で紹介するノーコードツールは、一言で言うと「コーディング無しでWebサイトを作って公開できるツール」です。
それだけ聞くと「そもそもデザインや開発に全く携わったことのない人でも使えて当たり前なんじゃないの？」と思う人も多いと思いますし、私もTwitterで「ノーコードツールだけでWeb制作してます！」みたいなデザイナーの制作事例などをチラッと見かけたりして、
「どうせ完全ノーコードの場合、カスタマイズ性が低いんじゃないの？それじゃニーズに応えられないよ…」
「ノーコードと言っても完全オリジナルのサイトを作る場合は結局HTMLとかCSSの知識自体は必要なんでしょう…？」
「ツールの使い方を覚えるのに時間かかりそう」
と、勝手に思い込んでいる節があったのですよね。
それが今回良い意味で裏切られました。
使う人や現場毎にニーズが全然違うと思うので、もし導入を検討する場合は、「どこのフェーズをノーコードで実現したいのか」を基準にしてツールを選定すると今回の私のように満足度が上がると思います。
デザイナーだけでサイトを作って公開したい→STUDIO
テンプレートもありますが、コーディング無しで完全オリジナルのデザインを作ることも可能。
Voicyの状況にはこれがピッタリで、普段からUIデザイン慣れしているデザイナーがFigmaなどでデザインを作ってから、実装〜公開のところだけをノーコードで実現したいというニーズにしっかり応えてくれています。
ただし、あまりリッチな表現はできなかったりもするのであらかじめ事例をたくさん見るなどしてできることとできないことを調査しておくと良いと思います。（クライアントワークで使う場合は特に！）
他にも以下のようなケースが考えられるかなと思います。
デザインもコーディングも無しでサクッとサイトを公開したい→Wix
用途に合ったテンプレート選定とカスタマイズがベースです。
やりたいことが明確にあるけど実際に作る方法についてはあまり知識がない…という場合にしっくりくると思います。コードも編集可能だったりプランを選んだりすれば、状況が変わってきた場合にも柔軟に対応してくれそう。
とにかく運用のハードルが低いサイトを作りたい→Notion+Wraptas
デザインはテンプレートのカスタマイズがベースで、NotionをCMSとして使えるということで、チームで日々更新していくサイトを作る場合にしっくり来ます。
初めはメモアプリのような感じで登場したNotionですが進化が凄まじすぎる…！（私がメンバーの1人として運営しているVoicyの「プロダクトハック」という番組でNotionの創業ストーリーについて語っている放送があるのでよかったら聞いてやってくださいw）
普段からFigmaをゴリゴリに使っているデザイナーなら、STUDIOのレイアウト作業もスッと受け入れられる
主にアプリやWebサイトのデザインに使われているデザインツールのFigmaには「オートレイアウト」という機能があります。実装上でやっているようなレスポンシブ設定をデザインの中で設定できる便利な機能です。
私は普段からこれを使い慣れている状況で今回初めてSTUDIOでのレイアウトやレスポンシブ設定をしたのですが、テンプレートやこれまで社内のデザイナーが作ってきたサイトでどういう指定になっているか見ただけでも割とスッと使えるようになる感覚がありました。
Youtubeに解説動画もたくさんあるので、この辺↓を一回見れば余裕で作業開始できます。
上の動画を一部見ていただいただけでもわかると思いますが、エディタ自体もかなりデザインツールに近い感覚で使えますし、HTMLの知識がなくてもFigmaガチ勢であればSTUDIOを使うハードルはだいぶ低めと考えて良いのではないでしょうか。
「スマホサイズの表示内で変更したことが他のサイズで見た時の状態に反映される/されない」などの仕様に慣れるのに多少苦戦するところもありましたが、サイトを作って公開するだけならSTUDIO自体の使い方やHTMLの基礎を勉強するステップは仰々しく設ける必要は無いです。
（あくまで普段からWebサイトやアプリのデザインをしている人の場合ですが）
実際に作ったサイトと運用ハードルの低さ
Voicyを利用したtoBサービス「声の社内報」のサービスサイトを作って公開しました。
これまでサイトをデザインすることはあっても、公開まで自分の手で完遂したことはなかったので、なんだか感慨深いです。
ペライチ+お問合せフォームだけの簡単な構成ですが、お問合せフォームもformrunの埋め込みに対応していてとても助かりました。柔軟！
サービスの担当者と「定期的に見直して改善していこう」という話になっていて、以前なら多少重く捉えているところだと思いますが、アップデートを自分だけでもできるようになったことで「やりましょう」と言い切れるようになりました。
それに、簡単な文字変更や画像の差し替えくらいであれば例えばサービス担当者にも入ってもらって編集してもらえる状況って熱くないですか…。最近ではデザインや開発に関係ない職種の人でもFigma使ってるなんて話も聞くので、そういうチームメンバーとなら運用のハードルはさらに下がるのではないでしょうか。
ノーコードデザイナーこそSTUDIOを使ったWebサイト実装の柔軟性を知るべき
今回初めてSTUIDOでノーコード実装してみてわかったこと
ノーコード実装でも完全にオリジナルデザインのサイトを柔軟に作れる
ノーコード実装はやろうと思えばできるからいつも選択肢として持っておくべき
別ポジションの領域で出来ることが一つ増えるとアイディアも柔軟に出てくるようになるし、色々なフォーメーションでチームワークできるようになるのをすでに実感できているので、私のようなノーコードデザイナーこそSTUDIOでの実装に一度は挑戦すべきと思いました。
Voicyでは一緒に働くメンバーを募集しています！
Voicyではデザイナーを含めた全職種で積極的に採用活動をしています！
この記事をここまで読んでVoicyの仕事に興味が湧いた方、応募フォームやMeetyからのご連絡ください！
ちなみにVoicyの採用向けメンバー&カルチャーまとめページはSTUDIOではないのですが、先ほどご紹介したNotion+Wraptasを使って採用チームが立ち上げから運用まで完全に自走しています↓
この記事が気に入ったらサポートをしてみませんか？