こんにちは！ 株式会社GIG広報の北村（ゆうゆう）です。

GIGでは毎月さまざまなテーマで勉強会を開催しています。今回はクリエイティブ事業部の千田崇史さんに、「ノーコード開発ツール」をテーマにお話いただきました。以下でその内容をくわしくご紹介します。

※この記事に記載されている内容は、2023年4月現在の情報となります。今後のアップデートでサービス内容が変更になる可能性がありますので、詳細は公式の最新情報をご確認ください。

■登壇者プロフィール

千田 崇史（せんだ たかふみ）：大学時代はメディアデザインを学ぶ傍ら、デザイン制作会社でアルバイトをして下積みの経験を積む。その後、印刷会社とWeb制作会社にて、主にWebデザイン・写真・動画・チラシ・名刺など、幅広い媒体のデザイン制作を経験した後、2021年10月 GIGにジョイン。現在はクリエイティブ事業部のデザイナーとして、クライアントワークを行なっている。

ノーコード開発ツールとは？

ノーコード開発ツールとは、コーディング不要で、Webサイトやアプリケーションを制作できるツールのことを指します。

たとえば、Webサイトを作るためには、本来HTMLやCSS、JavaScriptなどの言語を習得する必要がありました。しかしノーコード開発ツールを使用することで、それらの専門知識がない人でも、Webサイトやアプリケーションが制作できます。

この記事ではWeb制作に使えるツールに限定してお話しします。

Web制作向けノーコード開発ツールとして、たとえば『WiX』『STUDIO』『Shopify』『BASE』などが近年注目されていますが、このようなツール自体は以前から存在していました。しかし現在はアップデートによって格段に使いやすくなっており、そこまで複雑なWebサイトでなければ、デザイナーだけでも実装や公開が可能です。その実態をご紹介します。

ノーコード開発ツール『STUDIO』の注目ポイント

さまざまなノーコード開発ツールがありますが、なかでもUIが綺麗で使いやすく、テンプレートも豊富な『STUDIO』を例に、注目ポイントを挙げます。

【『STUDIO』の個人的注目ポイント】

•  CMSを搭載できる
•  Webフォントが使える（タイプスクエア）
• FigmaやXDと似たような操作感
• 複数ページで構成されたサイトも作れる
• フォームを簡単に作成可能
• モーダルウィンドウを簡単に使える
• レスポンシブに対応可能
• クロスブラウザチェックが基本的に不要
• 公開前プレビューも実装ページそっくりのデザインで確認可能

さまざまな特徴がありますが、とくに注目したいのは「CMSを搭載できる」「Webフォントが使える」の2点です。

1. CMSを搭載できる

これまではWordPressの組み込みなど一手間かかっていたCMS搭載ですが、『STUDIO』には標準機能として用意されているため、簡単に組み込めます。2023年4月現在では、有料プランで10,000件まで公開できるので、大規模なWebサイトでも構築可能です。

2. Webフォントが使える

これまでは、Webフォントの使用を提案する場合、運用コストの関係で無料で使えるGoogleフォントに限られる場合が多くありました。欧文フォントであれば無料の中でも種類が豊富にあるのですが、和文フォントになると選択肢が少なく、NotoSansくらいしか選べない状況でした。

しかし『STUDIO』なら、株式会社モリサワが提供しているWebフォント配信サービス『TypeSquare』

を利用することができ、500種類以上のフォントから選択することができます。

標準機能として搭載されているため、実質無料で提案できることから、クライアントへの提案も通りやすくなるはずです。

この中には欧文フォントはもちろん、数多くの和文フォントも含まれている為、今まで表現しづらかったデザインも検討していくことができるようになります。

ノーコード開発ツール『STUDIO』のメリット

【『STUDIO』の使いやすいポイント】

• デザインをそのまま公開できる
• 操作が比較的簡単
• 日本語のWebフォントが気軽に使える
• デザインの更新がしやすい
• CMSが簡単に使える
• アニメーションがデザインの段階で確認できる

『STUDIO』のメリットとして、「デザインをそのまま公開できる」点が挙げられます。コーディングをする必要がないため、実装後のチェックやエンジニアに対してのアニメーションのコミュニケーションコストなどが大幅に削減できます。

また、デザイン制作におけるフィードバック収集に長けたツール『Figma』と操作感が似ているため、このようなデザインツールを利用している方であれば、早く習得できると感じました。マージンとパディングの違いなど、実装のための基本的な知見があるほうがベターですが、『Figma』のオートレイアウトが理解できれば使いこなせるレベルです。

コストがかかるため敬遠されがちな日本語のWebフォントがTypeSquareの中から選択できること、また静止画では伝わりにくいアニメーションありきのデザイン設定ができることも、表現の幅を広げてくれるはず。

Webサイト公開後の調整や文言変更も直感的にできるため、ノンデザイナーでも簡単に修正でき、人件費のコストカットにも繋がると思います。

ノーコード開発ツール『STUDIO』のデメリット

【『STUDIO』のデメリット】

• 若干クセのある操作感
• 全ページのデザインを一覧にして表示できない
• コメントをピンで打てない
• 実装を強く意識したデザインパーツの作成が必要
• SEO的なところが少し気になる

『STUDIO』のデメリットとして、慣れないうちはデザインの組み上げやイメージを形にするのに、少し時間がかかるかもしれません。たとえるなら常に『Figma』のオートレイアウトがかかっている状態で作業をしなければいけないため、自由な場所にダイレクトに要素を置けず、効率が悪くなる可能性があります。

また『Figma』のように、デザインに直接、ピン機能でコメントを打つことができないため、クライアントからのフィードバックを理解するのに少し時間がかかりそうです。『STUDIO』のようなノーコード開発ツールは、デザインツールというよりかは、コーディングの知識がない人でも扱える実装ツールと考えるほうがよいでしょう。

結論として、ノーコード開発ツールのみでデザイン提案からWebサイト制作→公開・実装までを進めるのは少し難しいと感じました。『Figma』のように、デザインについてコミュニケーションがとれるツールを別途挟む必要があると思います。

Webサイトの全ページが一覧化でき、かつコメントをピンで打てる機能があれば、クライアントワークにおいても十分使えるツールです。今後のアップデートに期待しましょう。

STUDIOは今後もアップデートされ、より使いやすくなる

STUDIOはコーディングせずにデザインの状態から一気にサイト公開まで持っていくことができるという点が革命的で、今後のアップデートで更に使いやすくなっていくことを考えても、需要は更に増していくと考えています。

個人的にもかなり期待しているサービスなので、プライベートの自主制作等で積極的に活用していきたいです。

ただ現状の仕様としては、FigmaやXDのように、デザイン上に直接コメントのピンを追加したりできないので、クライアントとコミュニケーションが取りづらいという点と、大きな修正対応や複数案のデザイン提案がしづらい所があります。

なので、クライアントワークで活用する場合、修正が多く発生する序盤フェーズではFigmaなどのコミュニケーションがとりやすいツールを活用して、方向性が固まってきた段階でSTUDIOに切り替えて制作を進めていくやり方が現実的なのかなと思いました。

Web制作なら株式会社GIG

今回の勉強会では「ノーコード開発ツール」の『STUDIO』について、クリエイティブ事業部の千田崇史さんに詳しくお話いただきました。

株式会社GIGは、Web制作、Webマーケティング、コンテンツ制作、サービス開発など、Web戦略をトータルで支援するデジタルコンサルティング企業です。ノーコードで使える・マーケティングに強いWeb制作ツール『LeadGrid』も展開中です。Web制作のご相談はお気軽にお問い合わせください。

■株式会社GIG
お仕事のお問い合わせはこちら
採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

■Webサイト制作事例
Chatwork - サービスサイト制作 / マーケティング支援
ミクシィ - コーポレートサイト制作 / デザイン・保守運用
SmartNews - サービスサイト制作 / マーケティング支援

北村 有（ゆうゆう）

フリーライター。株式会社GIG メディア事業部所属、広報担当。 休日は映画やドラマを見たり、美味しいスイーツを求めて街をさまよったりしています。