%3Cdiv%20style%3D%22padding%3A56.25%25%200%200%200%3Bposition%3Arelative%3B%22%3E%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F506988991%3Ftitle%3D0%26byline%3D0%22%20style%3D%22position%3Aabsolute%3Btop%3A0%3Bleft%3A0%3Bwidth%3A100%25%3Bheight%3A100%25%3B%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%22%20allowfullscreen%3E%3C%2Fiframe%3E%3C%2Fdiv%3E

NewsPicksの新規事業である、プロジェクト型スクール「NewSchool」の募集サイトの参加者募集サイトを担当された吉川亜香音さんに、STUDIOでの制作のお話を伺います。
まずは、NewSchool の企画概要を教えてください！

NewSchoolは、新時代の挑戦者を生み出し、事業づくり、コンテンツづくり、仲間づくりをサポートするというビジョンのもとNewsPicksが提供する、プロジェクト型のスクールです。
参加者がトップランナーの講義から「学ぶ」、実践型課題で「創る」、そして得た知識を使って実際に「稼ぐ」ところまでを支え、メンバー同士のコミュニティ形成も積極的に支援する、そんなプロジェクトとなっています。

私はNewsPicksでUIデザイナーをしていて、NewSchoolチームで唯一のデザイナーとして、今回Webを担当しました。

NewsPicks NewSchool | 学ぶ、創る、稼ぐ

条件を満たすものを最短で作る方法を考えた結果、STUDIOがベストな選択肢だった

おなじみのNewsPicksとは一味違ったサイトが印象的でした。どのような想いでデザインされたのでしょうか？

そもそもWebメディアが中心であるNewsPicks本体に対して、NewSchoolというのは実際の空間でのイベントを前提にした取り組みなので、使用するグラフィックなどもこの空間（講演などが行われる会場）に合わせて木目調や和テイストを意識しています。
このようなブランディングを引き継いで、Webサイトも通常のNewsPicksの黒と白のデザインとはまた違ったものになっているかなと思います。

ご制作いただいたサイトについて、さらに詳しく教えてください！
まず、どのようにしてSTUDIOを導入するに至りましたか？

NewSchoolは、コンテンツ作成チーム5人ほどに加えてエンジニアさん1人、デザイナー1人で運営する小規模のプロジェクトです。限られたリソースでリリースに向け準備する中で、だんだん申し込みページ作成が間に合わないんじゃないかという話になってきてしまって。

「どうする？」という状況の中で、Webの実装ができるわけではないデザイナーの私がとにかく機能をみたすものを最短でリリースできる方法を考えたときに、前々から個人で利用していたSTUDIOさんの実装のスピーディさ・柔軟さが今プロジェクトにとって必要だと考えて提案しました。

ちなみに個人的にはいつからSTUDIOを使っていただいていたのですか？

知ったのは２年くらい前で、SNSで友人がポートフォリオに使っているのをみたり、STUDIOさんの投稿を見て、こんなに使えるサービスが日本にあるんだというところから興味を持ちました。

海外でもよくノーコードサービスがあるけれど、英語がわからない人にとってはすごくハードルが高いものだったので、国産のSTUDIOを試しに使ってみたいと思い、使い始めたのを覚えています。

標準機能でサクッと、痒いところに手がとどくのが嬉しい。

今回のNewSchoolのサイトは、どういうメンバー体制で構築されたのでしょうか？

サイトの構築は、実際私1人で行いました。

今回、スクールの全体のブランドデザインは電通さんのクリエイティブチームの提案で、それをもとに私の方でwebサイトに落とし込んだ形です。

実作業期間はどのくらいでしたか？

実作業は、１ヶ月半くらいですかね。
デザインが決まってからも2〜３週間、作って、修正して、また確認をしてという形で、そのやりとりに結構時間をかけました。

制作の中で、吉川さんがこだわった部分はどんなところですか？

このサイトでは、あまり最近では見ないテクスチャを背景に使う構成をとったので、ユーザビリティを失わないために、色合いだったりフォントの使い方にはかなり注意してデザインしました。

また、ページに情報をたくさん載せなければならず、申し込みボタンをページ最下部に置くと、すごくスクロールしないとたどり着けなくなってしまうので、上の方にもボタンを配置して、アンカーリンクで下のボタンまでスクロールするようにしたり、できるだけ短い動線で目的が果たせるよう、UIでできる限りのサポートをしようというところをかなり意識しています。

こだわりを実現する中で、役に立った機能があれば教えてください！

先ほどテクスチャを使った背景っていうようなお話をしたんですが、素直にページサイズいっぱいの大きな画像を背景に敷くと、画質がどうしても荒くなってしまうんですよね。なので今回は、一画面分のサイズの背景画像を「固定配置」にして、解像度の高い背景がスクロールしても常に表示されるような作り方をしました。
こういう工夫が標準機能でパッとできるのはありがたいところです。

もう一つは、レスポンシブの確認がすごくしやすかったことですね！SPサイズ、iPadサイズ、Desktopサイズという形ですぐに確認ができるので、複雑なレイアウトを細かく調整していく中で、変更を加えてそのままプレビューを見て、リアルタイムにレスポンシブ確認しながら作業できていつもスムーズに作業できています。

公開トラブルを乗り越え、無事盛況となったプロジェクト

サイトのリリースまでに一番苦労した部分はどんなところでしたか？

実はリリースの直前に、公開・確認作業をする中で、表示・機能に不具合があって、公開予定の時間に公開ができなかったんです。その時は社内が大騒ぎになってしまって。
チームでこの現象が起きている原因を調査しながら、STUDIOさんにも問い合わせ、急ぎ対応していただいたんですけれども、そのときに代表の石井さんが「今全社員で対応中です！」とお返事をくださって、こちら側も信頼してお待ちすることになり、対応していただいて1時間遅れでなんとか公開することができました。

大変だったんですけれども、本当に会社を挙げて誠実に対応していただいて、きちんと解決・公開まで伴走していただけてよかったなと思っています。

本当にその節はご迷惑をおかけしました…！実際公開後、応募はどのくらい届いたのでしょうか？

第一期はたくさんの方からお申し込みいただいて、参加いただいたのが594名と聞いています。

2021年1月現在、第二期も終了し、第三期がスタートしたところです。累計1000人以上の方にご参加いただいております。

かなり反響があったのですね！
募集サイトはどういうチャネルを利用して拡散されましたか？

サイトの拡散は、NewsPicks内での記事や動画配信とメールマガジン、SNSが中心ですね。あとはFacebook広告を打ったり、プロジェクトリーダーの方が周りの方にシェアしてくださったりという感じです。

導入してみてこそ伝わる、STUDIOの便利さと柔軟さ

サイトの応募フォームは、当初STUDIOのものを使っていただいていましたが、今はどんなサービスを利用していますか？

確かに第一期ではSTUDIOのフォーム機能を利用していたのですが、今は自社のシステムを利用しています。

理由としては、フォームの送信が完了したあとに、送信したユーザーにした内容が自動で届く機能がSTUDIOではどうしてもカバーできなかったというところがあり、やむなく自社のシステムに切り替えました…。

フォーム機能は現在絶賛パワーアップ中です！今後も改善を続けて行きますので、是非チェックよろしくお願いします！

そうなんですね！それは個人的にもめちゃくちゃ楽しみ…！
機能が揃えば、また他のプロジェクトでもどんどん利用して行きたいです。

社内の他のプロジェクトでも、STUDIOを利用するような流れができつつあるのでしょうか？

そうですね！
今回NewSchoolの企画で初めてSTUDIOを導入したんですけれども、最初はやっぱり社内の人たちも「外部のサービスを使って大丈夫なのか？」というふうになっていたんですよ。でもそれって、ただ前例がないというだけで。エンジニアも抱えるある程度大きな会社で、「自分たちで作るのが当たり前」という慣習が自然にできていて、今まで使ったことがなかったからそういう声が出てくるんですよね。

そんな状況で今回私から提案して、実際NewSchoolで使ってみたらすごくよかったと。デザインの表現力・柔軟性にも、皆さん驚いていました。

NewSchoolが成功事例となったので、その後同じグループの新規事業でもLPにSTUDIOが活用されたり、他のデザイナーからも「使ってみたい」という声があがったりしてきていて、期待値がめちゃくちゃ高いなっていうのをすごく感じています。

法人プランに相当する機能は、STUDIOでも前向きに検討しているので、こちらも是非実現を楽しみにお待ちいただければと思います…！

「とりあえず動かす」を実現。サービスづくりに関わるデザイナーの必携ツール

今回吉川さんがきっかけで社内でも利用が広まったとのことですが、改めて言葉にするとしたら、STUDIOをお勧めしたいのはどんな人ですか？

どんな人に…。えーと、全員に！（笑）
全員にお勧めしたいサービスですね。

大きい会社であっても、何から始めていいかわからないという人が、デザインツールだけで作り始めるのではなく、実際動くプロトタイプを作ってしまうっていうのはとても大切だと思っていて、
大企業・中小企業に関わらず、特にサービス作りに関わっているデザイナーさんには是非使ってほしいなって思いますね。

コードが書けなくても動くものが作れるというのは、本当に強みになりますね！
最後になりますが、NewSchoolのこれからの展開は、どんなものになっていくのでしょうか？

NewSchool自体が、2020年5月にリリースしたばかりなので、これからきちんと卒業生が出てくる中で、彼らが今回のプロジェクトを経て、「学ぶ」「作る」「稼ぐ」の三本柱の中でも「稼ぐ」部分にチャレンジしていけて、また私たち自身が新しい挑戦をきちんとサポートしていけるようになることが理想だと思っています。

あとは、個人がうまく挑戦していくことだけじゃなくて、コミュニティとして、参加者の横の繋がりができて、もっと新しい挑戦をしたいと思える環境があることが重要で、現在Slackで活動しているコミュニティがもっと活性化していくようなサポートが私たちにとっての課題となっているので、運営チームとしても課題と向き合ってどんどん挑戦していきたいと思っています。

NewsPicksの新規事業である、プロジェクト型スクール「NewSchool」の募集サイトの参加者募集サイトを担当された吉川亜香音さんに、STUDIOでの制作のお話を伺います。まずは、NewSchool の企画概要を教えてください！