未経験から副業を目指す方へフリーランスWEBデザイナーのリアル案件
企画～修正・完成までノーカット公開！【ノーコードツール STUDIO編】セミナー開催レポート

副業やフリーランスの中では比較的人気の高い職業と言えるWEBデザイナー。今、WEBデザインの業界ではノーコードのツールが増えており、未経験でもWEBデザイナーとして仕事を始めるハードルが下がりつつあります。

Winスクールでは、未経験からWEBデザイナーを目指している方や副業・フリーランスでWEB制作のスキルを身につけたい方に向けて、「未経験から副業を目指す方へ フリーランスWEBデザイナーのリアル案件 企画～修正・完成までノーカット公開！【ノーコードツール STUDIO編】」セミナーを開催いたしました。

この記事ではその開催レポートとして、STUDIOの魅力や副業・フリーランスで活躍するための秘訣をお伝えします。

セミナーハイライト

今回のセミナーは、現役WEBデザイナーで株式会社mono design代表取締役の中澤 強氏（以下、中澤先生）が講師を務めました。中澤先生はWinスクールの卒業生でもあり、受講者に寄り添ったコンテンツをお伝えできたと思っています。

セミナーのカリキュラム

セミナーのカリキュラムは下記の3つが中心で、STUDIOの概要や機能だけでなく、実際に中澤先生が請け負った案件についても紹介していただきました。

1.STUDIOとは

STUDIOの基本的な機能や使いやすさ、料金プランについて解説。

2.STUDIOで制作した案件のリアル

実際に請け負った案件において、クライアントからの要望やクライアントとのコミュニケーションなど、制作の様子を公開。

3.STUDIOの便利機能

AIや他のソフトとの連携、カスタムコードなど、より良いデザイン作成とスムーズな制作のためのコツを紹介。

STUDIOとは

近年、ノーコードツールの代表例として頭角を表しているSTUDIOは、一体どのようなツールなのでしょうか。

STUDIOの基本情報

STUDIOは、オンライン上でWebサイトを制作できる完全ノーコードのサービスです。デザインの自由度が高く、プロのWEBデザイナーからも「おしゃれ感がある」や「使い方がわかりやすい」と支持されています。

STUDIOの主な特徴は以下の通りです。

• デザインの自由度が高い
• 初心者でも簡単に使える
• 制作にかかる時間を短縮できる
• WordPressに比べると制作や運用のコストを抑えられる
• テキストの修正や画像の差し替えなど、サイトの更新を自社で完結できる

このほかレスポンシブ対応やAI導入など、STUDIOの人気は年々高まっています。

STUDIOの料金プラン

2023年10月現在、STUDIOの料金プラン^※1は、Freeプラン（¥0）・Starterプラン（¥980/月）・CMSプラン（¥2480/月）・Businessプラン（¥4980/月）の4つに分かれています。

CMS^※2やアニメーションなど、デザインに関する機能は無料プランでも使えます。ただ無料プランは有料プランに比べると、独自ドメインや広告（STUDIOのバナー）表示・外部ツールとの連携不可など、諸々制限があります。

とはいえサイト制作の練習など、初心者の方はSTUDIOの操作に慣れることが大切なので、無料プランで十分と言えます。

実際に仕事で活用する場合は、「STUDIOを使って何を実現したいか」や「なくても不便にならない機能」など、制作するサイトの性質を整理すると適切な料金プランが見つかります。

^{※1：各プランの詳細・比較はSTUDIOの公式サイトでお確かめください。}

^{※2：CMSとはContent Management Systemの頭文字で、WEBサイトのコンテンツを管理・運営するためのシステム（またはソフトウェア）のことです。プログラミングの知識が少なくても、テキスト・画像・動画などのコンテンツを簡単に追加・編集・削除できるように設計されています。}

STUDIOで制作したリアル案件

中澤先生は実際に請け負った案件の制作状況を公開することで、副業やフリーランスとして仕事を始めるときの参考になると考えました。

制作プロセスを知る

中澤先生が事例としてお話しくださったのは菓子店（ナッツの専門店）のサイトです。
制作にあたっては、

• 最初の打ち合わせでは（お店や商品を説明する）文字数が多めだったが、文字数を減らしてシンプルで見やすいサイトに修正。
• デザインも背景色を変えたり、写真を撮り直したり、こだわりの演出で商品の魅力を訴求。
• CMS機能によるクライアント側で簡単に更新できるような設定。

…など、クライアントとのやりとりについて、公開前のデザイン案を交えて語ってくださいました。

また中澤先生はSTUDIOの制作画面を共有して各機能を紹介し、（ノーコードツールですが）コーディングするときと同じ順序で作ったことを説明。最初の提案から実際に作り込んでいく中でクライアントの要望にどう応えていくか、リアル案件のプロセスを見る機会はとても貴重でした。

仕事で使えるSTUDIOの便利機能

STUDIOにはFigma（フィグマ）と呼ばれるデザインツールとの連携やカスタムコードなど、さまざまな便利機能があり、使いこなせるようになるとクオリティや作業効率の向上が期待できます。

Figmaと連携

STUDIOはデザインツールのFigmaと連携できるのも特徴の一つです。Figmaは、ブラウザ上でデザインを作成できるツールで、主にWEBサイトやスマートフォンアプリのUIデザインに活用されています。

これまでのWEB制作はIllustrator（イラストレーター）やPhotoshop（フォトショップ）などでデザインを作り、それをコーディングするのが一般的でした。しかし、STUDIOはFigmaで作成したデザインを自動的に取り込み、制作画面に反映してくれます。

セミナーでも中澤先生がその様子を紹介し、（2023年10月時点ではまだベータ版ですが）STUDIOとFigmaを連携させることで、作業時間の短縮にもつながります。

自由なカスタマイズ

以前のSTUDIOはコードに制限がありましたが、今は機能が新しくなり、これまで表現できなかったコードを記述することが可能になりました。STUDIOはノーコードツールですが、コーディングができる方はCSSやJavaScriptを使って、よりクオリティの高いサイト制作ができるでしょう。

ノーコードツールの登場・増加によりネット上ではWEBデザイナー不要論を唱える方がいらっしゃいますが、前提となる知識（デザインやコーディングの基本）があるとないとでは、制作物のクオリティや仕事を進める上でのコミュニケーションにおいて壁にぶち当たる可能性は高いかも知れません。そのため、この先もコーディングを学ぶ意義は十分にあると言えます。

受講者のギモンを解決！WEB制作でよくある質問

セミナーの受講者から実際にあった質問を含め、WEB制作に関してよくある質問をまとめました。

セミナーを受講された方の声

セミナーにご参加いただいた方のアンケートより受講者の声（一部）をご紹介します。

※受講者からいただいた回答は原文のまま掲載しております。

おわりに〜おすすめ講座紹介

今回のセミナーでは受講者の83.7％の方から「満足した」との回答がありました。未経験の方はまだまだ学ぶことが多いと思いますが、STUDIOのようなノーコードツールを使いこなすことで、副業やフリーランスを始める道のりは着実に縮まります。理想の働き方を目指して今後もスキルアップに励んでいきましょう。

STUDIOを活用して一人でWEBサイトを制作できるようになりたい方向け

Figmaの使い方やデザイン力を身につけたい方向け

関連記事