necco Note
龍神 菜緒
necco Note
デザイナーがStudio実装に参加して感じたメリットとおすすめの学習方法
- Uncategorized
デザイナー・エディターの龍神です。
Studioは、ノーコードでウェブサイトが作れるクラウドベースのサービスです。
neccoでは、現状Studioでの実装はエンジニアチームが多くを担当しています。
ただ、以前Studioを使った経験があるということもあり、いくつかのプロジェクトでStudio実装に参加しました。
エンジニアチームと一緒にStudioでの実装を進める中で感じた「デザイナーがStudio実装するメリット」についてお話しします。
実際に、これまでneccoがStudioで実装したウェブサイトもいくつかご紹介します。
Studio実装のメリット
Studio実装で感じたメリットを3つ紹介します。
細かい調整をすぐに反映できる
通常、実装後に発生する調整はFigmaでデザイナーが調整→エンジニアが実装上で反映という流れで進めています。
ただStudioの場合、デザイナーがFigmaとStudioどちらにも調整を反映することができるため非常にスムーズです。
また、情報の入れ込みや更新なども通常の実装だと、どうしてもエンジニアチームに頼ってしまう部分が多いのですが「私やっておきますよー」と気軽に声をかけて分担できるのもメリットだと感じています。
neccoで制作した「CMC_Central 2024」のイベントサイトでは、タイムテーブルや登壇者などの情報入れ込みや情報の更新などをデザイナーとエンジニアで分担して進めていました。
動きのイメージ共有がスムーズ
neccoでは、ホバーなどの動きをFigmaのプロトタイプで作成してエンジニアに共有することが多いです。ただ、Studioでの実装ではデザイナーが直接Studioでアニメーションを付与することで、通常の実装に比べてスムーズに動きやスピード感をすり合わせることができます。。
もちろんStudioのデフォルト機能で再現が難しいものに関しては、エンジニアチームと相談しながらカスタムコードでアニメーションを付与することもあります。
実際、Awarefyさまのウェブサイトではホバーアニメーション用のテストページを作成して検証をしていました。
プレビューページを他メンバーに確認してもらいながら、「少しゆっくりにしようか」「もっと変化つけてみよう」とその場で調整できてとても便利です。
サイトの構造やレスポンシブを意識する視点が身に付く
直接的なメリットとは少し違いますが、Studio実装に関わることでウェブサイトの構造やレスポンシブでの動きを意識するようになったと感じています。
当初、h2などの見出しタグや画像へのaltについてはざっくり知っている程度だったため、Studio実装に参加するにあたり、CTOの佐藤さんにウェブサイトの構造の基礎についての説明やレスポンシブする際の注意点などを教えてもらいました。
構造を理解することでよりスムーズにStudioの実装に入れるだけでなく、Studioではないウェブサイトのデザインの際にも「ここは同じ見出し（h2やh3）だから、同じくらいの優先度に見えた方がいいな」など今まであまり意識できていなかった視点を身につけることができました。
番外編：Studioの学習方法
今までStudioを触ったことのない方に向けて、おすすめのStudio学習方法をいくつかご紹介します。
まずは実際に触ってみる！
新しいツールに触れる前に事前に書籍や動画で学習してから始める方も多いかと思います。ただ、私の場合まずStudioに登録し触ってみることから始めました。
Studioは画面も非常にわかりやすく、操作も簡単です。
まずは、自分が作りたいものを決めてStudioを操作→わからないことがあれば都度調べるという方法で進めると「お〜できてる！！」と楽しみながら学べるかなと思います。
困った時は書籍・サイトで確認
分からないことがあった時は書籍やサイト、動画などで解消していました。
Studio公式ガイド
Studioには、使い方や仕様について掲載している公式ガイドがあります。
記事数も多く、画像つきで丁寧に解説してくれるので重宝しています。
書籍『ノーコードでつくるWebサイト ツール選定・デザイン・制作・運用が全部わかる！』
necco CTOの佐藤さんの書籍です。
Studioでできること・できないこと、基本的な操作方法などが丁寧に紹介されています。
実際にStudioで実装する際はずっとデスクに置いておいて、何かわからないことがあればまずこの書籍で確認することが多かったです。
お守り代わりに、いつでも確認できるよう今もデスクにおいています。
書籍『ノーコードでつくるWebサイト ツール選定・デザイン・制作・運用が全部わかる！』を出版します | necco note
Studio実装に関わった制作事例
実際にStudio実装に関わった制作事例を3つ紹介します。
心の問題に取り組む企業「Awarefy」ブランドデザイン・コーポレートサイト
日常生活でおきているさまざまな「心の問題」を解決し、「大切にしたいこと」に向かって進みやすくするためのサービスを展開する株式会社Awarefyさま。スマートフォンアプリ「AIメンタルパートナー アウェアファイ」の提供を通して、いつでも、誰にとってもメンタルケアが当たり前になる未来を目指しています。
neccoでは、Awarefyさまの想いをより広く届けるためのリブランディング（ロゴデザイン、コーポレートサイトのリニューアル）および、会社資料作成、新コーポレートキャラクター「AIメンタルパートナー ファイさん」作成のお手伝いをしました。
心の問題に取り組む企業「Awarefy」ブランドデザイン・コーポレートサイト
コミュニティマーケティングの祭典「CMC_Central 2024」イベントサイト
全国のコミュニティマーケティング実践者が集まり、人・知見・ノウハウを発信するイベント「CMC_Central 2024」。これまで9都市、120回以上開催実績のある「CMC_Meetup」初の全国版として、2024年6月29日に名古屋にて開催されました。
neccoはデザインサポーターとして、イベントロゴやウェブサイトのデザイン・Studio実装をお手伝いしました。
コミュニティマーケティングの祭典「CMC_Central 2024」イベントサイト
「こども家庭ソーシャルワーカー認定資格」特設サイト
こども家庭福祉実務者の専門性向上を目的に設立された認定資格「こども家庭ソーシャルワーカー」。
一般財団法人 日本ソーシャルワークセンターさまは、資格の認定機関として研修認定、試験、資格者登録などを行なっています。
neccoでは、認定資格「こども家庭ソーシャルワーカー」の特設サイトのデザイン・Studio実装を行いました。
まとめ
Studioにチャレンジしてみてよかったと感じています。
何よりデザインしたものを自分の手で実装していくことがとても楽しいです！
個人的には、普段以上にエンジニアチームのメンバーと頻繁にコミュニケーションをすることができて、嬉しかったです。
ノーコードで直感的に操作できるため、まずは気軽に触ってみてもらえると嬉しいです！
neccoは、Studioを使用したウェブサイトの制作、承ります。
株式会社neccoは、ノーコードでウェブサイトを制作できるサービス「Studio（スタジオ）」のStudio Pro エキスパート（Experts）です。
「Studioに興味があるけど、導入すべきかどうかわからない」
「Studio導入後のサポートもお願いしたい」
そんなお悩みやご要望がある場合も、まずはお問い合わせの上ご相談ください。お客さまの目的や課題に応じた最適な方法を検討し、ご提案させていただきます。
Studio関連記事
これまでに公開したStudioに関する記事です。
書籍『ノーコードでつくるWebサイト ツール選定・デザイン・制作・運用が全部わかる！』を出版します
STUDIOのAPI連携を使って、特定アカウントの最新Instagram投稿一覧を表示してみよう
龍神 菜緒
Nao Ryujin
神奈川県生まれ。大学卒業後は損害保険会社に入社し、官公庁や企業の従業員向け商品をメインに担当。休職をきっかけにデザインと出会い、個人事業主としての活動を開始。デザインを始めた当初からneccoがつくるものに魅力を感じており、秋田への転居もあり思い切って応募。2022年12月より参画。好きなものはデザイン、犬猫、ジンベエザメ、コーヒー、ビール、辛いもの、旅行。蒙古タンメンの秋田出店を切望している。
