こんにちは！サービスデザイン部、シニアデザイナーの烏丸です。子ども向けプログラミング教育に関するポータルサイト「コエテコbyGMO」のデザインを担当しています。

コエテコでは、2022年10月に、第1回目となるプログラミング事業者向けオンラインセミナー「コエテコEXPO」を開催しました！

今回は、イベントに向けた制作物の1つである「コエテコEXPO特設サイト」の、制作のプロセスやポイントをご紹介します！制作にあたり、STUDIOというツールを初めて使用してみたので、その感想などもお伝えできればと思います。

民間プログラミング教育展示会｜コエテコEXPO2022

コエテコEXPOとは？
民間プログラミング教育サービスの新しい価値を生み出し、業界発展を目指す！
プログラミング教育サービスと課題解決などのノウハウが集結するオンライン展示会。
プログラミング関連新規サービスを立ち上げる際にかかる開発時間・コストの削減、テスト検証の精度向上などの課題を持つ企業のため、民間プログラミング関連サービスを提供する企業が集まります。また民間プログラミング関連サービス関連に立ち、プログラミング教育関連での有識者の方たちの講演の配信や最新プログラミング関連サービスのピッチを配信します。

STUDIOを使用してノンコーディングで実装した特設サイト

登壇者に関する情報提供や集客、またセミナーへの参加者の募集などを目的として、イベントの特設サイトを制作しました。

サイト制作には、「STUDIO」というノーコードでWebサイトを制作することができるツールを活用しました。

結論からお伝えすると、STUDIOを使用して大正解だったと感じています！私自身STUDIOの使用は初めてでしたが、シンプルな操作感と充実した公式ガイドのおかげで、とてもスムーズに使いこなすことができました。

また、エンジニアの手を借りることなく一貫して制作を行うことができたというのも、STUDIOだからこそ実現した新しい形だと思います。

なぜSTUDIOを使用したのか？

コエテコbyGMOなど普段運営しているサービスは、私たちデザイナーがHTMLやCSSで実装を行なっているのですが、今回STUDIOを使用したのにはいくつか理由があります。

STUDIOを使用した理由
・複数のセミナーとそれに紐づく情報を管理するのに、CMS機能(※1)が便利だと思ったから
・情報の更新が頻繁に発生するため、迅速に且つ誰でも（デザイナー以外でも）編集を行えることが求められたから
・フォーム機能(※2)を使用して、参加者募集などもSTUDIO内で行えるから
※1…公開サイトに掲載する情報（特に定期的に追加・更新したいコンテンツ）を、専用画面で効率よく運用・管理できる機能
※2…公開サイトにフォームを設置し、送信されたデータを集計・管理できる機能

サイト構築のプロセス

実際にどのようなプロセスでサイトを構築したのかを、簡単にご紹介したいと思います。

1. サイトの構成を決める

UIデザインツール「Figma」を使用して、サイトの構成と、ラフデザイン（どこに何が入るか程度のざっくりしたもの）を作成します。

2. デザインを作成

Figmaで、ページのデザインを詰めていきます。

今回は、ロゴやOGP画像などのクリエイティブもFigmaのみで作成しました。
素材をすべてFigma内に集約させることで、ツールを行ったり来たりする手間を省くことができます！

3. STUDIOでページ作成

デザインの通りに画像やテキストを配置していきます。
ビジュアルエディターで、簡単にフォントの装飾やレイアウトの調整を行うことができます。

アニメーションの追加や画面サイズに応じたレイアウト調整なども、複雑なコードなしで実現できるので、挑戦しやすかったです。

4. サイト公開

サイトの公開はとても簡単でした！
エディターの右上にある公開ボタンから、ドメインを設定して公開・更新をすると、無事にサイト公開の完了です。
（※独自ドメインで公開する場合には事前に設定が必要です）

CMSを活用して運用コストを削減

「登壇者の情報」や、「スポンサー企業の情報」は、STUDIOのCMS機能を活用して管理するようにしました。

そうすることで、複数ページで表示している情報も一括で更新できるようになり、また、デザイナー以外でも簡単に情報の更新ができるようになりました。運用業務の属人化を防ぎながら、作業時間の短縮も実現させることができるので、とても便利です！

どんな時にCMSを活用すると良いのか

CMSを活用するとよさそうな条件
・1要素に紐づく情報が複数ある場合
・複数ページに掲載する要素の場合
・編集・追加作業が頻繁に発生する可能性がある場合

上記のようなシーンでは、STUDIOのCMS機能が特に有効ではないかと思いました！

同じ情報を異なるレイアウトで表現することができる

情報のみを管理しているため、共通の情報を異なるレイアウトで表示することも可能です！
コエテコEXPOの場合は、同じ「セミナー情報」をページによって異なるレイアウトで表示させることで、ユーザーが目的に合わせて閲覧しやすいようにしました。

タイムテーブルページ → 縦並びのタイムテーブル形式
セミナー一覧ページ → カード型で横並び

運用のしやすさや今後の展開を見据えた仕組みづくり

STUDIOを活用したサイト制作によって、

制作時間の削減
運用の効率化

が実現し、結果的に、デザイナーがサービスのデザインについて「考える時間」を増やすことができました。
また、SNSやダイレクトメールなどを活用した、他の集客施策もたくさん実施することができました。

コエテコEXPO当日はというと、目標を大きく上回る、約700名のスクール運営者様や民間教育関係者様にご参加いただきました！たくさんの反響をいただき、2023年春には第2回の開催も決定しています！

今後も、さまざまな業務の「効率化」に取り組み、各職種のメンバーが、それぞれの本質の物事に時間を取れることを目指していけたらと思います！