見出し画像

ノーコードツールとの付き合い方

ノーコードやAIによるコード生成でも良いWebサイトが作れるようになった昨今、それらの課題や向き合い方について、BBN流の考え方をまとめてみました。
やや具体性に欠ける説明となってしまいましたが、何かの参考になりますと幸いです。

デザインツールからHTML/CSSのエクスポートが出来たり、生成AIの力を借りてコードを出力してもらったり、コーディングスキルや知識がなくても出来ることが増え続けている昨今。ドラッグ&ドロップで画面構成やUIを作成するレベルや、有料テーマや有料スキンを購入して工数を抑える以上に、ラクで便利な時代となりました。

コーディング自体もTwitter Bootstrapの時代を経て、Tailwind CSSライクなユーティリティファーストの路線が一定の支持を獲得しており、デザインパターンやナレッジベースの工数削減、省コードやローコード、生成AIを含めたノーコードも選択肢が豊富というか、栄枯盛衰かつ群雄割拠な環境でもあります。

多端末、多ブラウザ、多OS対応な端末別デザイン、もしくはレスポンシブウェブデザインも一般的となって早十年数年。表示速度の問題や、各種SNSを始めとするAPIの仕様変更など、案件の単価は上がり切らない一方、やることは増える今、それでも自分の手でコーディングする理由、ノーコードツールに全振りしない理由について、筆者なりの考えをまとめてみましょう。


ノーコードを成立させる裏側には、余計なコードがそれなりにある

ドラッグ&ドロップで画面構成、UIを制作できるツールに特に顕著ですが、ノーコードツールや購入したテーマやスキンの場合、その自由な操作性を担保するため、安定稼働させるためのコードが一定数含まれています。

普通に考えれば、ドラッグ&ドロップで要素を配置、情報を保存しただけではHTML/CSSとして成立するコードにはなりませんし、用意されたカラーパレットから色を選択し、背景色や文字の色を変更したところで、該当するコードを記述しなければブラウザは狙い通りの解釈をしてくれません。

ユーザーが自由にコネクリ回しても問題ないように、システムを支えているコードが見えない部分に含まれています。WebサイトやWebブラウザを通して使うアプリの場合、ソースを見ればどんなコードかすぐに分かりますし、Webサイトの場合、表示速度に悪影響を及ぼす可能性も否定できません。

「見えている部分が小綺麗で、思い通りのものが作れているからそれでいい」ならそれでも構いませんが、ブランドの公式サイトやコーポレートサイト、事業体の威信がかかったサービスのWebサイトやWebサービスであれば、見えない部分にも気を配りたくなってきませんか?

また、使用する上では余計なコードを認知、自覚しにくいことも気をつけたいところです。
配布されたテーマやスキン、特に有償の場合のコードへあまり疑いの目を向けたくはありませんが、無自覚な脆弱性、故意や悪意によるバックドア、何らかの不具合が含まれている可能性も捨て切れません。

自分で作ったものであっても、脆弱性や不具合は含まれてしまうというか、大小様々なミスをしてしまいますが、自分で作った場合や、認知や理解が及んでいないブラックボックスの領域が少ない場合は、問題の特定や切り分け、対処も比較的容易です。

運用や中長期のメンテナンスも考慮に入れる場合、安定性や安全性も考慮してノーコードや有償テーマ等の導入を検討したいですね。

多少の不自由、使い勝手の悪さにも付き合わされる

ノーコードに限った話ではありませんが、いわゆるXaaS系のサービスの中で許容されている限界までカスタマイズしようと思っても、それは「カスタマイズ」の範疇であり、提供者の思惑や思想を超えた改良は困難です。

その分、技術や知識がなくてもパパッと利用できて、その先にある便益や楽しさにサクサクと辿り着けるのも事実。出来ることが限定的な分、インスタントな利便性は高い傾向にあります。

「自由度はかなり高いよ?」と思われるかもしれませんが、創作やカスタマイズの部分で最大限の事由を認められていたとしても、最終的にはサービス提供者の手のひらの上なので、サービスの提供終了や特定の機能廃止や第三者ツールとの連携中止など、ユーザーがどれだけ訴えかけてもどうにもならない部分が存在します。

ユーザーが手を出せない部分のCSSが影響していたり、他では問題ない記述や機能が制限されてしまったり、多少の面倒臭いで済むレベルであればまだマシですが、やりたいことを実現させられない理不尽さ、不自由さが立ちはだかることもあり得ます。

使い慣れて勘所を掴んだ上で、提供者の思惑や思想も受け入れられる状態、マスターと言えるレベルへ辿り着ければ多少の不自由は些細な問題と化すでしょうが、そこまで到達してもアカウント削除や事業停止といった、一ユーザーだけでは何ともできない要素もあります。

Xaas系のサービスに含めるのは微妙ですし、もうかなり古い話にはなりますが、アメーバブログのアカウント凍結が盛んな時期がありましたし、2019年3月末にサービス終了となったYahoo!ジオシティーズ、かつては栄華を誇ったものの現在は見る影もない大手の無料ブログサービスや、個人サイト向けの無料スペースは多々あります。いざ終了となった時、これまでの記事やデータを移管するのが簡単なのかどうかが問題になったのも、上記のようなサービス終了やアカウント停止騒動が起こってからでした。

VUCAでベンチャーどころか、スタートアップのXaasも興盛の昨今、今まで以上に事業者都合で振り回される可能性は潜んでいます。安定稼働を求める場合や、それなりに責任を伴う事案の場合は、本当にそれで良いのかじっくり検討された方が良いでしょう。

ノーコードやドラッグ&ドロップで培ったスキル、知見は転用しにくい

ノーコードに限らず、何らかのフレームワークやライブラリに依存している場合も該当しますが、そのツール、その環境に馴染めば絶大な効力を発揮するスキルや知見というものは、その世界から一歩外に出ると使えない、転用しにくい無用の長物と化す可能性があります。

上記のサービス終了にも近いお話ですが、一時代を築きながら、直系の子孫が途絶えている要素として、Flashが挙げられます。アドビ社が「Flash Player」のサポートを終了したのは2020年末ですが、2010年代中頃にはFlashが活躍する場は減少していきました。

Flashの中で使えたAction Scriptやキーフレームを用いたアニメーションなどは、現在のJavascriptやCSS、After Effects等でも活かせますが、Flashがあって初めて可能となる表現やノウハウは、どれだけレベルが高いものであっても他で活用することは困難です。

Flashのように顕著ではありませんが、ノーコードツールやドラッグ&ドロップの機能が前提となるスキルや知見は、そのツールや環境が存在する間、そこへ注力できる間は良いですが、それらが無くなった瞬間、どれだけの時間を費やし、どれだけの研鑽を積み重ねていたとしても持ち出せません。

他にも転用可能な知識やセンスに還元されているならまだ幸いですが、おんぶに抱っこを自覚しない状態で積み重ねていた場合は、痛い目を見る可能性も出てきます。

自分が趣味や遊びとして楽しむ分なら何でも良いですが、生活や仕事の一環として力を注ぐのであれば、捨てやすい技術、転用しやすいノウハウを意識して、何を繰り返すのか、何を積み重ねるのかをよくよく考え、より良い選択肢を選ばれることをオススメします。

インスタントな利便性や、手軽さは利点

ノーコードツールや第三者が提供する有償無償のテーマやスキン、何らかのフレームワークやライブラリに則ったスターターキット等をより身近なものへ置き換えるなら、インスタント食品やレトルト食品、出汁も入った味噌や、市販のカレールウ、麻婆豆腐の素のような具材入りの調味ソースなどが該当するでしょうか。

自分でゼロからやるよりも手軽かつコストも抑え、パパッとやりたいことを実現するには便利ですし、誰がやっても同じ結果へ辿り着くようガイドしてくれるので、何から手をつければ良いのか分からない時の水先案内人、先達としても有用です。

しかしながら、原材料や成分表を見ても何がどうなっているか、全てを把握、理解することは困難ですし、卵や小麦粉などにアレルギー反応がある場合や、糖分や塩分、脂肪分、その他添加物等に注意したい場合に融通が効かない場合があります。それでも味噌汁が食べたいとか、どうしてもカレーや麻婆豆腐出ないと気が済まない場合、作り方を自分で調べて材料を調達したり、パッケージに記載されている作り方や原材料をヒントに改良したり、自分で辿り着きたい結果へ至る道を模索するなど、ブラックボックスを紐解いたり、背後にある知識やレシピに触れてみたり、ブラックボックスがある前提で創意工夫を凝らすといった向き合い方も可能です。

一味足したり、ちょっと味変する程度のワンポイントのアレンジから、全く別のものへ作り変えるレベルまで。メーカー側が提示する楽しみ方以外の活用方法を自ら試行錯誤するようになると、多少の手軽さを犠牲にしつつ、柔軟さや自由を確保できるようになります。さらに突き詰めれば、不便を受け入れ、面倒な手順を楽しむ境地にも至るかもしれません。

また、「万能調味料」や調合済みのスパイスといったものも便利ではありますが、時々その中の一部の成分、一部の効能だけが欲しくなることがあります。メーカーや商品ごとに変わる合わせ調味料のバランスが気になって厳選してみても好みに合わず、結局合わせる前の調味料や個々のスパイス、ハーブ等へ手を伸ばすこともあるでしょう。

次第に「(誰かの手によって)混ぜてあるもの」は使用頻度が減り、自分で調合したものや、バラバラのものを都度組み合わせるスタイルに落ち着く、というのもよくある話。手間はかかりますが、何が入っているのかを自分で制御しながら、経験やスキル、センスを蓄積することにも繋がります。

インスタント食品やレトルト食品、外食一辺倒は手軽で便利な一方、抜け出そうと思うと困難です。何でもできるとは言い難い包丁一本や鍋、いわゆる「さしすせそ」の基本的な調味料だけでは不便ですが、食材さえ調達できれば、何かが多少足りなくても創意工夫で何とかなります。

インスタント食品やレトルト食品のように、意外と前提となる条件や局面が限定的なことがある「何でもできる万能ツール」と、一つのことしかできない不便な道具で、どんな条件下でも頼りになるスキルや知識を身につけるか。どちらか一方ではなく、両方を上手に使い分けたり、併用できたりすると良いですね。

スピード勝負ならノーコード、それ以外も視野に入れるならハンドメイド

時間も費用も割けない案件や、とにかく試作品やモックアップを作ることが優先であるなら、ノーコードツールや第三者のテーマ、スキン、フレームワークやライブラリを使っても良いと思います。(ただし、安全性には注意した上でという条件付き)

少しでも長く使う可能性がある場合、長期運用も気にする場合は、最初はノーコードであっても徐々にハンドメイド、自作の比率を高めていくのがベターでしょう。スピードと品質の両立を追求するなら、デザインパターンやデザインシステムを導入して、自分たちだけのフレームワークやBootstrap、ボイラープレートを作り上げるのが良いと思います。パターンオーダーからフルオーダーへ移行する形であれば、ノーコードは難しくても、ローコードは実現可能でしょう。

また、生成AIを用いる場合(第三者のコードを用いる場合も含む)は、実際に生成されたコードが問題ないか、事前に確認できる環境や自分で把握、判断できる能力を用意しておきたいですね。
ノーチェックで何か問題が起こっても、最終的に責任を持つのは人間です。最終成果物に生成されたものをそのまま用いることは避け、少なくとも一手間、可能なら中間成果物としてブラッシュアップすることを前提に工程の中へ組み込むことをオススメします。

生成AIやノーコードツール、第三者のテーマやコードを教師、ガイド役として理解が及ばない部分のブラックボックスの読解、自らの血肉にして学習効率を上げる、教科書や参考資料として用いるのも、今日なら一般的な使い方でしょう。

不純物、添加物が多くても早期の満足が優先ならノーコード、自分や相手、市場に長く影響を及ぼす場合は、何が入っているかを自分でハンドリングできるハンドメイド。概ねその線引きで良いと思います。

事前の想定と仕込みを大切に

自分を含む人の手で作ることを考慮するなら、毎回ゼロイチで作るのではなく、半分ぐらい作っておいて、その準備、仕込みを活かせる型、モデルを作っておくと良いでしょう。デザインシステムというか、ボイラープレート、自分たちに適したBoostrapや開発環境を構築した上で、いつでも使えるように準備しておく。

事前に準備、仕込んでおいて、「ウチはカレー屋だよ」と看板を設定しておく。そうすると「何でもやります」よりは、質を担保した状態で早期対応が可能です。メニューに応じた即応を取りやすいよう、「何でもやらない」も一つの選択肢です。

BBNは手前味噌のお手製とスピードの両立を目指し、「何でもやらない」を選択しました。提供するものを絞ることで対応力、質を追求するというスタンスです。ノーコードの時代にわざわざパターンオーダーから始まる月額制Webサイト制作サービスを提供するのは、そういった理由もあったりします。

「コレしかやりません」の一本槍。豊富はオプションもあるにはあるので、取り止めもないお話も、遠慮なくご相談くださいませ。

今後も「お役立ち情報等」をお届けします

BLUE B NOSEでは今後も、経験を通じて得たナレッジやノウハウ、独自視点でのお役立ち情報等をお届けします。サービスの詳細や事例はHP上でも発信中なので、もしよろしければ当アカウントのフォローや、HPのチェックもお願いします。


この記事が気に入ったらサポートをしてみませんか?