こんにちは！デジタルハリウッドSTUDIO ネット動画クリエイター専攻トレーナーの花束莉花です。
今回は、4月17日にSTUDIO新宿で開催された『#デジハリクリエイティ部 Studio体験講座～無料テンプレートでポートフォリオサイトを作ろう！～』の様子をレポートします！
・デザインは好きだけどコーディングは苦手
・自分で更新できるポートフォリオサイトを作りたい
・既存のポートフォリオサービスではなく、オリジナリティのあるサイトを作りたい
そんな悩みを抱える方に向けて、ノーコードWeb制作プラットフォーム「Studio」の基本操作から、テンプレートを活用した実践ワークまでを体験できる、初心者にもやさしい講座となりました。
このレポートでは、講義のポイントや当日の雰囲気、参加者のリアクションなど、イベントの模様を詳しくお伝えします！
講師紹介
福井 克彦 講師
フリーランスのWEBデザイナー/ イラストレーター。神戸在住。2023年末まで東京に住んでおり、現在2拠点で活動中。
【経歴】
2010.04 新卒で営業職
2018.12 通販運営会社へ転職
2020.08 個人事業主開業&制作会社に入社
2022.12 制作会社退職。個人事業主を継続。
【Studio歴】※現在まで50サイト以上制作
2021.02 外部講座「TOOL PROJECT」にてStudioを勉強
2022.02 同講座にてStudio講師を担当
2023.09 Studio動画教材コース開発・講師担当
講座の目的と流れ
この体験講座の目的は、大きく2つ。
1. Studioの基本的な操作を理解すること
2. テンプレートを活用して、自分のポートフォリオサイトを形にすること
SNSやポートフォリオ共有の文化が一般化した今、自分の「作品」や「スキル」をオンラインで見せる場を持つことは、クリエイターにとってますます重要になっています！
しかし「Webデザインは好きだけど、コーディングに自信がない」「ノーコードツールに触れてみたけど、テンプレートの編集でつまずいた」という声も多く、ポートフォリオづくりが最初の壁になっているケースも少なくありません。
この講座では、そうした不安を払拭し「作れるかも」「やってみよう」と思える状態に導くことをゴールに置いて構成されていました◎
当日の流れは以下の4ステップ。実際に手を動かしながら、Webサイト制作の一連の流れをつかめる内容です！
Step1：Studioとは？
ノーコードツールとしての立ち位置や、他ツールとの比較を交えて解説
Step2：Studioの基本操作
UIの見方や操作の基本をハンズオンで体験
Step3：【WORK】テンプレートを活用したポートフォリオ作成
テンプレートをベースに、構成やレイアウトを編集して自分の作品サイトを構築
Step4：公開・SEO設定のポイント解説
完成後に押さえておきたい設定や、公開時のコツを伝授
1. Studioとは？ —— ノーコードツールの立ち位置と選び方
講座の最初は「Studioとは何か？」という基本の解説からスタートしました。
Studioは、Studio株式会社が提供するノーコードWeb制作ツール。コードを書かずに、ドラッグ＆ドロップで直感的にWebサイトを作ることができるのが大きな特徴です。
そもそも「ノーコードツール」とは、専門的なプログラミングスキルがなくても、誰でもアプリやWebサービスを構築できるサービスのこと。Studioのほかにも、Wix、ペライチ、Jimdoなど、さまざまなツールが存在しています。
今回の講座では、Studioの基本機能だけでなく、他のノーコードツールとの違いや、導入する際のメリット・デメリットについても丁寧に解説がありました。
たとえば──
「Studioはとても万能そうに見えるけれど、実際には“どんな人にもベストな選択肢”とは限らない」という現実的な視点。
講師の福井さんの経験をもとに「Studioを使うべきシーン」「他のツールを使ったほうがよい場面」「そもそもノーコードではなく、コーディングが向いているケース」まで具体的に教えていただきました。
このパートで特に参加者の集中度が高まったのが、StudioとWordPressの比較。WordPressは長年にわたり多くのWebサイトで使われてきた実績のあるツールとあって「あ、それ気になってた！」と頷く方や、前のめりで聞き入る方が多く見られました。
2. Studioの基本操作 —— まずは触ってみよう！
続いては、Studioの基本操作を実際に触りながら学ぶパートへ。
ここでは、ログインからプロジェクトの作成までの流れを、ひとつひとつ確認していきました。
・ログインの方法
・ダッシュボードの見方
・プロジェクト一覧画面の構成
・新しいプロジェクトの作り方
・エディター画面の使い方と基本操作
Studioは、ノーコードツールの中でも“直感的でわかりやすい”と評判のツール。この日が初めての方も多かったのですが、つまずくことなく、スムーズに操作できていたのが印象的でした◎
「なんとなく難しそう…」と思っていたツールでも、こうやって実際に触ってみると、「あれ、思ってたよりできるかも！」という実感が得られるのがいいところ。このセクションを通して、少しずつStudioの感覚に慣れていけたように感じました。
3. テンプレートを活用したポートフォリオ作成
いよいよ実践ワークへ。ここからは、Studioのテンプレート「Work」を使って、実際にポートフォリオサイトをつくっていきます。
使用したテンプレートはこちら：
そして今回、参加者が目指した完成イメージはこちら：
このポートフォリオのポイントは以下の通り。
・実績の更新機能がついていて、あとから編集しやすい！
・自己紹介やスキルを伝えるコンテンツ構成がしっかりしている！
・スクロールに応じて動くアニメーションが洗練されていて見栄え◎
テンプレートの良さを活かしつつ、画像や配色、テキストを自分らしく編集していくことで「自分だけのポートフォリオ」を制作します。
福井さんの進行はテンポよく、ポイントを押さえながら丁寧にレクチャーしてくれるスタイル。参加者のみなさんもそれにしっかりついていきながら、画面とにらめっこしつつ真剣な表情で操作に集中していました。
不要な要素の削除や、色・画像・テキストの変更といった基本的なカスタマイズはスムーズにクリア。「意外とできるかも！」「ここ変えられるんだ！」という空気が自然と広がっていたのが印象的です。
しかし、レイアウトの組み替えやパーツの配置調整になると、少し手が止まる様子もちらほら…。とはいえ、福井さんの画面共有でのサポートや、こまめなアドバイスのおかげで「なんとかできた！」という達成感を感じられる流れになっていました。
CMSの説明パートでは、最初は「……？」という反応もありましたが、いざ実装してみるとその便利さに驚きの声が。「これ、すごい！」と嬉しそうな声もあちこちから聞こえてきました。
4. 公開準備〜公開まで —— 最後の仕上げをして、いざ公開！
後半は、いよいよワークショップパートへ！席の近い人同士で3人チームを作り、配布されたワークシートをもとに、SNSに投稿する30秒のショート動画企画を立案します。
ここで登場したのが、クライアント役を務めるデジハリ新宿スタッフの矢野さん。
参加者はクライアントとしての矢野さんにヒアリングを行いながら、企画の方向性を具体化して
講座の最後は、完成したポートフォリオサイトを実際に公開するための準備へ。このパートでは、見た目だけでなく「ちゃんと機能するサイト」に仕上げるための設定を行いました。
特に丁寧に扱ったのが、お問い合わせフォームの設定。送信先のメールアドレスを登録したり、入力項目を調整したりと、実際にポートフォリオとして運用するために欠かせないステップです。
フォームの設定が完了したら、いよいよ「公開」ボタンへ。
すぐにサイトを公開した方もいれば、「もう少しデザインや内容を整えてから公開したい」という方もいて、それぞれのペースでゴールを目指す様子が見られました。
テンプレートから始めた制作でしたが、カスタマイズや設定を経て“自分だけのポートフォリオ”へと近づくにつれて、参加者のみなさんの表情にも少しずつ手応えや達成感が表れていたのが印象的でした。
次回の #デジハリクリエイティ部 もお楽しみに！
ノーコードツールは、Webデザイン専攻の方だけでなく、動画・グラフィック・CGなど他の専攻の方にとっても、表現や発信に役立つ実用的な手段のひとつです。
中でもStudioは直感的に操作ができ、初心者でも扱いやすいのが魅力です。一方で、コーディングの知識があると、より柔軟にカスタマイズできる場面も多く、既存のスキルを活かしながら効率的に制作を進めることもできます！
Studioは初心者にとっても経験者にとっても、それぞれの立場やスキルに応じた使い方ができる柔軟なツールです。実践に活かせる有益なスキルとして身につけられるという点も、大きな魅力だと感じました◎
今回の講座を通じて、Studioの魅力や活用の幅を実感してもらえたのではないかと思います！
#デジハリクリエイティ部では、これからも“やってみたいを形にできる機会”をつくっていきます。次の開催も、ぜひ楽しみにしていてくださいね！
STUDIO新宿個別説明会実施中！
１．カウンセリングで疑問を解消
２．学校・コース／カリキュラムの詳細を解説
３．卒業生作品・実績をポートフォリオでご紹介
４．あなたの目的に合った就転職プランのご提案
５．学習環境・設備のご案内
６．ご希望の方には体験もご案内
※ご予約の際、ご希望のスクールは『STUDIO新宿』をご選択ください。