デザイナーもエンジニアもノーコードで作業が激減！？活用法を現役フリーランスに聞いてみた！

「最近ノーコードが話題だけど、開発案件で役立つことあるの？」
「デザイナーの仕事、ノーコードで楽にならないかな？」

そう疑問に思ったことはありませんか？

そこで、今回はフルスタックエンジニアでノーコードでのアプリ開発も手掛けるひょうどうさん(@hyodoblog)と、デザイナーでありながら、ノーコードツールのSTUDIOでさまざまなWebサイトを制作してきた佐藤さん(@sizcome)にインタビューしてきました！

お二人が今までに受けてきたノーコード案件の内容や、メリット・デメリット、注意点などを伺っています。
「ノーコードを使ってみたいけど、イマイチ具体的な活用法がわからない」という人でも、「今日から使ってみよう！」とイメージが湧く内容になっています！

【インタビュイープロフィール】
佐藤さん（@sizcome）
Duchamp Inc.（株式会社デュシャン）の CEO・デザイナー
ノーコードツール「STUDIO」を使って、Webサイトのデザインから制作までをしている。
自社では自身の原体験をキッカケに、予約制トイレのシステムを発案し、横浜駅西口のジョイナスにて実証実験中。

【インタビュイープロフィール】
ひょうどうさん（@hyodoblog）
フリーランスのフルスタックエンジニア
ノーコードでデイトラの「Q&Abot」をはじめ、さまざまなWebアプリ開発案件を手掛ける。
現在は、佐藤さん発案の予約制トイレの開発を担当している。

【インタビュアープロフィール】
初芝賢（@hatushiba_ken）
東京フリーランス編集長。現在はシステム開発のPMや新規事業に携わる一方で、フリーランスライターとして出版・キャッチコピー・WEBメディア連載などを手掛けている。東京フリーランスではインタビュアーや司会進行を務めることが多い。

1. デザイナーとエンジニアのお二人がノーコードを使うようになったキッカケ
2. 実案件でのノーコード活用事例を紹介！
- 2.1. Webアプリ開発での事例：デモサイトでお客さんとの認識合わせに活用！
- 2.2. Web制作での事例：STUDIOだからこその高速納品！
3. ノーコードを使うときの注意点とは？
- 3.1. Webアプリ開発での注意点：プログラミング経験はあった方が強いし安心！
- 3.2. Web制作での注意点：「できる・できない」をはっきり伝える！
4. これからノーコードを使おうとしているフリーランスへ
- 4.1. Webアプリ開発をしている人へ：プログラマは武器として使おう！
- 4.2. Web制作をしている人へ：スタートアップやデザイナーこそ活用しよう！
5. 告知：予約制トイレの実証実験を横浜で実施中！
6. まとめ：ノーコードを使えばデザイナーもエンジニアも仕事の幅が広がる！

デザイナーとエンジニアのお二人がノーコードを使うようになったキッカケ

本日はよろしくお願いします！
早速ですが、お二人の経歴とノーコードを使い始めたきっかけについて教えてください！

僕はフリーランスのフルスタックエンジニアをしています。
もともと大学で情報系を専攻していて、在学中に始めたIT企業でのアルバイトでWeb制作に興味を持ったんです。
そこからアプリなども開発自分で勉強をするうちにフリーランスにも興味が出てきたんです。
学生時代からフルスタックエンジニアとしてフリーランスで活動を始めて、そのまま今も続けています。

ノーコードを触るようになったのは、簡単なデモを作るならノーコードが圧倒的に速くて作業効率がいいと考えたからです。
納品するとなると話は別ですが、完成形をイメージしてもらうためにデモサイトを見せる目的でしたら、ノーコードでいいと思います。
実際にそれで案件を獲得したこともあるので、とても便利だと思います。

開発に使うというよりも、素早く提案するためにデモサイト作成に活用されているということですね！
納品となると複雑な要件に耐えられない恐れがありますが、デモをサクッと作って受注率が上がるならコスパがいいですね！

僕は現在トイレ予約サービスの開発と運営をしているDuchamp Inc(株式会社デュシャン)の代表と、デザイナーをしています。
それまではフリーのデザイナーをしていました。

僕がノーコードに触れたきっかけは、「デザインだけでなく自分でWebサイトを作るところまでやりたい」とSTUDIOを利用してみたことでした。
これまではデザインはできてもコーディングは難しいので、エンジニアに依頼をしていました。
でも依頼してできたものを見ると数ピクセルのズレやデザインが微妙に違うことが気になって、もどかしさを感じていました。

出典：STUDIO

でもSTUDIOなら自分で好き放題デザインをいじれるのがとても魅力的でしたね。
イメージ通りのデザインを自分で再現できるので、圧倒的に速く作れるようになりました。

デザイナーだけどコーディングができなくて案件を諦める人もいますが、STUDIOを使えばデザインから制作まで自分でできてしまうのは魅力的ですね！

実案件でのノーコード活用事例を紹介！

Webアプリ開発での事例：デモサイトでお客さんとの認識合わせに活用！

ひょうどうさんがこれまでに受けてきた、Webアプリ開発でノーコードを活用した事例を教えてください！

レストラン予約アプリのデモサイトをglideで作成して、アプリの開発案件を獲得しました。
今はノーコードでデイトラのQ&Abotを作ってますが、Dialogflowやzapierを使ったりもしていますね。
いわゆる業務効率化アプリの開発も行っています。

出典：glide

僕の場合、初めから「ノーコードで開発します」という案件の受け方はしていません。
プログラミングで開発する案件をもらった上で、「ここはノーコードでもっと効率化できますよ」と提案しています。

すべてをノーコードで作るわけではなくて、さらに効率化するために部分的にノーコードを使うことを提案するのですね！

プログラマーはノーコードを知っているだけで、提案しやすくなると思います。
できることが増えるので、提案の幅が広がるのではないでしょうか。
さらに、「今使っているツールをさらに便利にできますよ」「拡張できますよ」といったような提案もできますしね。

日頃から色んなノーコードツールを使っていると、「この業務にはこのノーコードツールが使えるな」と、パズル感覚で考えられます。
それに加えてデモサイトも簡単に作れるので、ビジュアルで提案できますし。これがものすごく強いんですよね。

手札も増えるし提案のインパクトも上がるので、エンジニアならノーコードを知っておくべきだと思います。
「ここはノーコードで一発でできる！」ということがわかれば、エンジニア側も効率化できますしね。

ノーコードを知っているだけで、仕事の幅がだいぶ広がりそうですね！

Web制作での事例：STUDIOだからこその高速納品！

作成も修正も爆速に！

佐藤さんは最近STUDIOでWeb制作案件を受注することが多いのでしょうか？

自社案件も含めて3~4ヵ月で9件納品しました。

短期間に9件も！ものすごいスピードですね！
どんな案件でしたか？

たとえば、自社事業の「予約のできるトイレ」のサイトを一週間で作りました。
そのほかには、プログラミングスクールや建設会社のWebサイト、アプリのLPなどを納品してきました。

出典：予約制トイレ「QREA」

一週間で作れてしまうとは！
一般的なLP制作案件やコード制作案件などを、問題なくSTUDIOで作れたということですか？

そうですね。何も問題なく作れたと思います。

納期はどのくらいでしたか？

納期は大体、2～3週間が多いですね。最短で3日とかもありましたし(笑)
そんな短納期でもやりやすいですし、一度覚えてしまえば簡単ですよ。
コーディングしないからこそ速く作れるし、納品後の修正対応も素早く行えました。

修整内容をエンジニアに指示することなく、デザイナー自身が修整してすぐに対応できるのはいいですね！

デザインカンプを作らずにLP制作も可能！？

STUDIOでLP制作をする場合、どんな手順でされていますか？

最初はちゃんとカンプを作っていたのですが、今は2~3時間で大枠だけを作って、すぐにSTUDIOで作っています。

デザインカンプとは？
Webサイトの完成イメージを表したもの。
フォントの種類や文字の大きさ、色やレイアウトなどを詳細に記載し、Webサイト制作前にお客さんとのすり合わせやエンジニアへの依頼に用いる。
略して「カンプ」と言ったり、「モックアップ」と呼ばれることもある。

どうしてカンプを作らなくてもよくなったのですか？

エンジニアに依頼する必要がなくなったからです。
以前は「fontは何パターンです」とか「CSSはこれでくくると楽ですよ」とかまで実装を考えて指示書を作りこんでいて…。
カンプと指示書だけで平気で一週間はかかっていました(笑)

それは大変ですね…。

はい(笑)
でも今は自分で作れるのでストレスもかからないですし、速くて、利益率も高いので、昔みたいなやり方には絶対戻れないですね(笑)
今はSTUDIOでバーッと作って、ライブプレビューを見ながら修整しています。

デザインと実装が分離しない方が、スムーズですね！

デザインカンプを省いてLP制作する場合に注意したいこと

カンプにかける時間を省いた分、注意したことはありますか？

一度大枠のカンプを作った段階で、お客さんに確認を取るようにしています。
それでOKになることがほとんどですが、細かい指示があったらその時だけXDで修整して相談しています。

コミュニケーションを早めに取って、相違がないことを確認することが大切ということですね！

なるほど！
ちなみに、提案時にお客さんには「通常のコーディングではなく、STUDIOを使う」ということを伝えますか？

言いますね。
でも別にSTUDIOを使うからといって、何か言われることはないです。
アウトプットを見せれば、「このクオリティでいけるなら全然いいね」となるのがほとんどですね。

お客さんはイメージしているものができるのであれば、手段はあまり関係がないんですね！
STUDIOを使うにあたり、仕事の進め方は変えましたか？

修整が簡単になるので、修整要望に素早く応えるようにはしていますが、特に変えたところはないですね。
通常通りの進め方でやっています。

通常通りの進め方で、お客さんの依頼に簡単に素早く応えられるようになるとは、いいことづくめですね！

メリットだらけに見えるけど、デメリットも知っておくことも重要

ずばり、STUDIOを使うメリットは何でしょうか？

メリットとしては、速くできる、コミュニケーションが減るといった感じでしょうか。
それに、そんな難しいわけでもないので、メリットしかありませんね(笑)

では、あえてデメリットを挙げるとしたら、どんなところですか？

デメリットは、写真を多用すると重くなることや、SEO周りが苦手なことですかね。
このあたりはどうしてもSTUDIOだと限界があるので、コーディングが必要になります。

ではもし、「SEOで上位を狙いたい」とお客さんに言われたらどうしますか？

「できません」と言って断りますね。

コーディングで受けることもしないですか？

しませんね。
「STUDIOでOKです」「短納期です」という案件の方が僕にとって効率が良くてストレスもないので、そちらを優先すると思います。

コーディングが必要な案件を受けずにSTUDIOに特化することで、効率的に仕事を進めているんですね！

ノーコードを使うときの注意点とは？

今までノーコードにはメリットがたくさんあることがわかりましたが、ノーコードを使って仕事をするときの注意点はありますか？

Webアプリ開発での注意点：プログラミング経験はあった方が強いし安心！

ノーコードの拡張性には限界があるので、僕は自分でコードを書いて作れる案件だけを受けるようにしています。
もしノーコードでできなかった場合の保険になるからです。

デイトラのQ&Abotもノーコードでの作成を提案しましたが、もともとプログラミングでの開発経験やAIの経験があったから提案できました。

仕事を受けてから「実はノーコードで開発しているのでできません…」なんて言えないですしね。
プログラミングの経験があると”もしも”のときに安心だし、提案の幅が広がるということですね！

Web制作での注意点：「できる・できない」をはっきり伝える！

佐藤さんから見た、Web制作をする上での注意点はありますか？

Web制作でも拡張性が弱いというのは同じなので、始めの段階で「できる・できない」をはっきりすることが大切です。
そのために、ヒアリングの段階でやりたいことを聞く時間を多く取るようにしていますね。
軽いLPの場合は複雑なことは要求されにくいですが、本格的な案件だと複雑な仕様が出てきたりするので…。

「できる・できない」をはっきり伝えることは大切ですね！
ノーコードでは実現が難しいことを相談されたことはありますか？

たとえば「ブラウザバックしたら、ポップアップを出してください」みたいな相談をされたことがありましたが、それは断りました。
「ノーコードだからなんでも簡単に実装できるでしょ」と思われることが、地味に課題だったりします。

これまで色んな方に話を伺いましたが、それは「ノーコードあるある」かもしれませんね…。
ちなみにひょうどうさんもお客さんから「ノーコードなんだしこれも簡単にできますか？」と要望を言われたことはありますか？

僕の場合はノーコード前提で開発を受けることはないので、そういう経験はないですね。
僕がプログラマーだからということもありますが、あくまでノーコードは手段としているので、そういうスタンスで来るお客さんはいませんね。
でも「ノーコードの魅力を一度知ってしまうと離れられない」というのは、間違いないなと思いました(笑)

これからノーコードを使おうとしているフリーランスへ

お二人は、これからノーコードを使おうとしているフリーランスの方へアドバイスはありますか？

Webアプリ開発をしている人へ：プログラマは武器として使おう！

デモやお客さんへのすり合わせ用のモックに使うといいと思います。
ノーコードとはいえプラットフォームがしっかりしているので、セキュリティも安心ですし。
自分で堅牢なシステムを作れる自信があるならいいのですが、自信がないならむしろノーコードを使った方が安心だと思います。

セキュリティチェック診断を受けると、数百万かかることもありますし。
それなら、しっかりとしたノーコードツールというプラットフォーム上で作る方がいいと思います。

セキュリティ面も安心なんですね！
Web制作やアプリ開発の経験がまったくない人が、案件を受けることについてはどう思いますか？

Web制作ならともかく、アプリ開発案件は正直おすすめしませんね…。
アプリ開発は工数がかかりますし、考えることが多い上に知識や経験が必要なので、作れるだけでなく運用の経験が必要です。その経験なしで受託すると苦労することになるんじゃないかなと…。
プログラマが武器としてノーコードを使う分にはかなり有効活用できると思います！

Web制作をしている人へ：スタートアップやデザイナーこそ活用しよう！

Web制作にノーコードを利用する場合、佐藤さんはどんな人におすすめですか？

スタートアップの人にはおすすめですね！
STUDIOは2～3日学習すれば使えるようになるので、自社のHPやLPを外注せずにパパっと作れるようになります。

また、フリーランスデザイナーの人にも絶対おすすめです！
仕事の幅も広がりますし、速くて、楽ですし。
ちゃんとWebデザインができる人でしたら、STUDIOで作ったのか、コーディングしたのかわからないクオリティのものができるので！

僕が作った自社のWebサイトもデザインを頑張ったので、コーディングしたものと見分けが付かないくらい綺麗にできました！

出典：予約制トイレ「QREA」

デザイナーだったら「ここにこだわったら、いいのができる」というのもわかるし、本当に遜色ないものが作れますよ。

ただ一点注意が必要なのは、ノーコードだからいいものができるというわけではありません。
ノーコードで作っても、デザイン自体が微妙な場合はサイトの見た目も微妙になります…。
なのでSTUDIOのポテンシャルを引き出すにはデザインスキルや知識があることが前提になります。

デザインがきちんとできる人であれば、Web制作もノーコードで簡単に綺麗なものができるということですね！

告知：予約制トイレの実証実験を横浜で実施中！

最後に、現在お二人が取り組まれていることについて聞かせてください！

QREA(クリア)という予約制トイレの実証実験をしているのですが、日経新聞やフジテレビに取り上げられています。
僕はエンジニアの方を担当していて、佐藤さんは発案者であり、プレゼンをして資金を調達されました。

佐藤さんが発案者とのことですが、なぜ予約制トイレを作ろうと思ったのですか？

僕の原体験がキッカケになっています。
「過敏性腸症候群」というお腹がゆるくなる体質なのですが、それでトイレが空いていないとすごく困ることがあって。
それを解決したいと思って、このサービスを始めました。

佐藤さん自身の悩みがキッカケだったのですね！
過敏性腸症候群の人は、日本人に多いのでしょうか？

日本には10人に一人いると言われていて、結構な数の人が抱えている体質です。
マニアックなサービスですが、意外と登録者が多くてニーズがあると感じています。

そんなに悩まれている方が多いのですね…。
どんな仕組みでトイレを予約するのですか？

トイレの扉に鍵がついていて、予約がLINEから入ると自動的に鍵が閉まるようになっています。
現地に行ってLINEから鍵を開ける処理を行うと、鍵が自動的に開くので、通常のトイレとして利用できるようになる仕組みです。

QREAのトイレの鍵（スマートロック）

LINEで簡単に操作できるのですね！
実証実験中とのことですが、どこでされていますか？

横浜駅西口のジョイナスで実証実験を行っているので、その近辺を利用している人はぜひLINE登録して使ってみてください！

▶QREAのLINE友達追加はこちら！

過敏性腸症候群に悩まれている方に、ぜひ活用してもらいたいですね！

有料予約制トイレ「QREA（クリア）」
「漏らさずに済む世界」を目標に始めた、予約制の有料トイレ。
横浜駅西口のジョイナス(神奈川県横浜市西区南幸1-5-1)にて、2020年7月30日(木) – 8月30日(日)の間、実証実験中。
LINEでQREAを友達追加するだけで空いているトイレを検索し、予約できる。

ひょうどうさんが独自にされている取組みについても教えてください！

はい！
YouTubeでLEGOとプログラミングを組み合わせた作品を公開しているので、登録してくれたら嬉しいです(笑)