実例から学ぶ Studio研修 ノーコードをWeb制作業務に活かすコツ｜Studio Talk #02

Webサイト制作事業にStudioを活用いただいている方々をゲストにお招きして、Web制作現場におけるStudio活用のヒントを紐解く「Studio Talk」。

今回は2024年5月にStudio Communityで実施したStudio Talk vol.2「実例から学ぶ Studio研修 ノーコードをWeb制作業務に活かすコツ」のイベントレポートをお届けします。

講師は、のべ3,000名以上が受講した「非デザイナーのための勉強会」の主催・講師を務める株式会社カワッタデザインの代表取締役・河田悠輝さん。

Webデザイン未経験だったという当時の自社スタッフがゼロからStudioを学んで実案件の制作に携わるまでの事例をもとに、Studioの効率的な学習方法をわかりやすく解説します。

＞株式会社カワッタデザインの詳細はこちら

StudioをWeb制作業務に取り入れるためのポイントまとめ

Studio Talk vol.2「実例から学ぶ Studio研修 ノーコードをWeb制作業務に活かすコツ」にて河田さんからご紹介いただいた内容をポイントとしてまとめました。詳しい内容はこのあとのレポートをご覧ください。

＜カワッタデザイン社のスタッフがStudioを実務に活かすまでの3ステップ＞

• STEP1. 基礎知識のインプット

• STEP2. 基礎知識のアウトプット

• STEP3. 実務で応用

もっとも重要なことは「Studioが使える1人目のスタッフを育てる」

本題である「Studioを学び、業務に落とし込む流れ」についてご説明します。

まず重要なのは「Studioが使える1人目のスタッフを育てる」ということ。なぜかというと、2人目以降に何かわからないことがあったときには、この1人目がサポートすることで解決できることも多くあるからです。

私たちがStudioを導入し、1人目を育成し始めた2〜3年前は、Studioに関するナレッジや学習コンテンツも今ほど多くありませんでした。しかし、創業期で外部講師を使った研修などの投資も難しかったので、自分たちでできることをコツコツ積み上げていった形です。

Studioを学び、業務に落とし込む3ステップ

私たちがどのようにStudioを学習してきたかを3つのステップに分けてみると、ステップ1として「基礎知識のインプット」、インプットしたら次にステップ2「基礎知識のアウトプット」で実際に作ってみて、そしてステップ3の「実務で応用」という流れになります。

Studioはとにかく触ってみることが大事です。ここではそれぞれのステップで何をやるべきか、またそれぞれのステップでつまずいたときの対処法も弊社の経験を元にお話しします。

STEP1. 公式YouTubeチャンネルで学びながら、小さな成功体験を積み重ねる

ステップ1「基礎知識のインプット」について、0からStudioを学んでいくときに最適なのが「Studioの公式YouTubeチャンネル」。

その中でも「Studioの基礎編 | ポートフォリオサイトを１から作ろう」から順番に、チュートリアルコースの動画を観るのがおすすめです。

例えば「paddingとマージンの違い」「要素同士をどう並べるか」など、Studioの基本中の基本から解説してくれるため、動画を見進めることでStudioの世界観を学べるようになっています。

また動画も「シンプルなポートフォリオサイトを作ってみよう」といったテーマで取り組みやすい内容になっています。この取り組みやすさが大事で、こうした小さな成功体験を積み重ねることで、Studioを使いこなす自信が徐々についてくると思います。

ただ、Studioはアップデートのスピードが非常に早いです。動画を撮影した当時からUIや機能が変わっている場合があることは注意しておきましょう。

作業する中でつまづいたときには「Studio公式ガイド」が便利です。このサイトはStudioのアップデートがあるたびに情報が更新される、公式の取扱説明書のようなもの。動画を観ていて分からないことがあれば、この公式ガイドで調べましょう。

特にボックスの配置方法については、紹介した動画から大幅なアップデートがあったので、Studio公式ガイドに一度目を通しておくと、動画で分からない部分も理解できるようになります。

もう一つの注意点として、Studioで作るときは必ずPCを基準にデザインすること。YouTubeの動画ではアートボードが縮小表示されているので、モバイルで作っていると勘違いしてしまうケースがあります。

PCから作ってタブレットやモバイルと順に小さく調整していくという流れは、Studioを使う際に必ず覚えておきましょう。

STEP2. 「2ページのトレース」でStudioの構造を理解する

基礎知識のインプットが終わったら、ステップ2「基礎知識のアウトプット」に進みます。実際にStudioを使って既存のページを2ページほどトレースすることで、Studioの構造や機能がおおまかに理解できるようになります。

理由はトレース元の見た目（デザイン）から判断して、これまで学んだStudioのやり方でデザインを再現するという一連の訓練になるから。

まずトレースの1ページ目としておすすめなのが、基本的なボックス&カラム構造で構成されたサイトで、2カラムや3カラムの構造も含まれるページです。基本的な実践をする上で良い練習になります。

例えば、弊社では過去の自社コーポレートサイトをトレースしました。縦に積み上がっていてシンプルでかつカラム構造のページであれば、どんなページでも良いと思います。

もし課題が思いつかない場合は、Studioの採用サイトが非常にシンプルで練習に適しているので、参考にしてください。

1ページ目をやってみたら、2ページ目は少しレイアウトが複雑なLP（ランディングページ）にチャレンジしましょう。

例えば、要素同士が重なっているページや、マージンをマイナスで指定して要素同士を重ねるようなページを作ることで、Studioの応用的な使い方を学びます。

弊社の場合は某カード会社のサービスLPをトレースしましたが、もし課題が思いつかない場合は、Studioのエージェンシー向けページだと構造が複雑で取り組み甲斐があると思います。

ここでのちょっとしたポイントが、あまり長すぎるページを課題に選ばないこと。ここではデザインを学ぶよりもStudioの使い方を学ぶことが重要です。長いページにチャレンジする場合は、途中まででも良いですし、セクションごとに作ってみると良いと思います。これも小さな成功体験を積み重ねるためです。

ステップ2でつまずいたときも、ステップ1と同じくStudio公式ガイドが活用できます。それでもわからない場合は、GoogleやYouTubeで調べると解決策が見つかることが多いです。

また、Studioのデザインテンプレートが販売されている「Studio Store」には様々なテンプレートが並んでいて、各詳細ページの「エディターで試す」ボタンを押すとプロが作った生データを覗き見ることができます。

例えば「アコーディオンの構造をどう実装するか」など実装につまづいたときに、テンプレートを見てうまく実装しているページを参考にすると良い勉強になります。

STEP3. とにかく実践第一！ 恐れず実務にチャレンジしてみよう

最後はステップ3「実務で応用」です。いきなりクライアントワークはハードルが高いと感じる場合は、自社サイトや研修用のLPなどを作ってみると良いでしょう。

クライアントワークの実務でStudioを使用していると、当然ながらお客様からさまざまな要望が上がってきます。そこで尻込みせず「やってみます」と答えることが大事です。

実務に取り組む中で、どうしても解決策がわからない場合は「Studioコミュニティ」を頼りましょう。

「Studioコミュニティ」にはStudioに関する疑問を投稿できるQ&Aが設けられており、困ったときに質問をすると経験者の方々が答えてくれる場合があります。過去の投稿がStudioの知識としてたくさん蓄積されているので、まずはいきなり質問を投げかけるのではなく、過去に解決策が示されていないか探してみましょう。

難易度の高い実装方法や、うまくいかなかったことに対しても解決策や代替策が示されている場合も多いです。

※Studioコミュニティの「疑問解決のコツ」はこちら

Studio導入は、デザイナー採用の幅を広げる観点でもメリットがある

最後に、Studio導入による制作会社にとってのメリットを3つお伝えします。

一つ目は、修正対応がとにかくスピーディーにできること。弊社のように、もともと紙媒体を基本としていたデザイン事務所の場合は、コーディングを外注するケースが多いかもしれません。

お客様から修正依頼が来たときも、Studioの場合なら社内で対応できるので、コーディングの知識がない制作会社にとっても、迅速に修正対応ができるのは大きなメリットです。

プレビューのURLをお客様に共有するだけで、実際に画面上でどのように変わるかを確認できる点も便利ですね。

二つ目は、採用面で幅が広がること。コーディングの基礎知識がない人を雇うことにハードルを感じる制作会社の方も、Studioを導入することでWebデザイン未経験者でも採用しやすくなります。

弊社の場合も、Webデザインは未経験であっても紙媒体は経験している人はウェルカムです。ビジュアルデザインができる人であれば、Studioを学んでもらうだけでWebサイト構築までできるようになります。

三つ目は、コーディングの工数を削減して、新たな表現に挑戦できることです。

弊社の場合、同じ予算の中でも外注していたコーディング費用を別の予算に回して、CG作成、撮影などプラスアルファの提案ができるようになりました。

導入検討企業が知りたい、Web制作におけるStudio活用のリアル

セッションの後半は、Studio導入を検討する制作会社からの質疑応答を行いました。

質問：ワイヤーフレームやデザインカンプはStudioで制作しますか？ それともfigmaやXDなど別のデザインソフトを使用しますか？

河田：弊社はFigmaで用意しています。ちなみに3年前はXDを使っていましたが、昨年あたりからFigmaに完全移行しました。

現在はFigmaでワイヤーフレームとトップページ、代表的なページテンプレートを制作し、トンマナをお客様に確認いただいてからStudioで展開しています。

質問：ノーコードを勧めるべきクライアントとそうではないクライアントの違いは何ですか？

河田：クライアントさんの違いというよりは、運用や保守が煩雑になっているページやサイトに対してStudioをおすすめしています。

Studioのよさは、サーバーの保守管理業務の手間も削減できること。オープンソース型CMSのようなプラグイン更新時のトラブルもないので、セキュリティ対策の面でもメリットがあるとお伝えしています。

質問：お問い合わせフォームのカスタマイズはどのようにしていますか？

河田：現時点ではStudioのデフォルトのフォームを使っていますが、お客様が求める機能によって外部サービスも組み合わせて使用しています。例えば自動返信メール機能はZapiarなどの外部サービスを使って対応しています。

質問：ドメインを独自のものに切り替えた場合、メールサーバーはどうしたらいいですか？

河田：メールサーバは外部で用意する必要があるので、新規でサイトを作る場合は追加で契約が必要です。リニューアルの場合は、もともとあったメールサーバーをそのまま継続して利用します。

Studio公式ガイドに独自ドメインのメールアカウントの設定方法が掲載されていますので、そちらを参考にしてみてください。

質問：今までCSSで一括変更できたところなどは、Studioで実装しようとすると時間がかかりませんか？

河田：たしかに、例えばボタンの色などを一括で変更することは、今のデフォルト機能ではできません。しかしCMS機能やコンポーネント機能を活用するなど、工夫次第で運用をラクにできますよ。

質問：Studioを選ぶ理由、選ばない理由を河田さんの視点から教えてください。

河田：リニューアル案件で、ECサイトなどの複雑な機能があったり、別のCMSでしっかりカスタマイズが行われていたりする場合など、Studioに載せ替えるリスクが伴う案件ではおすすめしません。

質問：Studioを導入したことがない企業に対して、運用面でのサポートはどのようにしていますか？

河田：弊社ではマニュアルの配布や勉強会の実施、YouTubeでの限定公開動画を使ってサポートしています。

質問：Studioのカスタムブレイクポイントについて、何種類ぐらい設定していますか？

河田：サイトによりますが、弊社の場合は最大で4種類のブレイクポイントを設定しています。小さい画面のスマホデバイスでも綺麗に表示できるよう、320pxも設定することがあります。