- STUDIOのアニメーション機能と、アニメイトによるGIFデータを組み合わせて、ノーコードで動きのあるメインビジュアルを実現。
こんにちは。代表の伏見です。
今回ご紹介する制作物は、ランディングページです。
＜サイトURL＞ https://preview.studio.site/live/BmqM6D5MaX/
クライアントは株式会社 DoM&A（ドマンダ）様。 シンガポールを拠点に、M&A 事業を展開されている会社です。 ※M&A とは、「Mergers and Acquisitions」の略で、企業の買収や合併に関する事業となります。
ちなみにこの案件は、株式会社博報堂の新規事業開発組織「ミライの事業室」が発足した 「TOOL PROJECT」という事業に参画する中、 そのプロジェクトの一環として作成したランディングページとなります。
この「TOOL PROJECT」に参画することでノーコードツール「STUDIO」を 短期間で習得することができ、これを実践したカタチです。
最近よく聞くようになった“ノーコード”。このノーコードによるWEBサイト制作を実際にやってみて、実案件で採用した場合のメリットになりそうな要素がそれなりにあったので、 今回はそれをご紹介したいと思います。
＜STUDIO によるサイト制作のメリット＞
1.アニメーションが付けやすい
WEBサイトにとって、今や必ず考えないといけないのがアニメーション。さりげなくサイトに高級感や信頼性を加えたり、ユーザーの視線を誘導することで情報を伝えやすくしたり することでコンバージョンを高める効果もあります。 WEB サイトがどんどん進化する昨今、今や動きがまったくないサイトはどこかチープに感じてしまう状況です。ですがこのアニメーション、けっこうコードを書かないといけなくてそれなりに工数がかかるんです。
また、デザイナーによっては動きの計算をせずにサイトのデザインをして、アニメーションに関しては コーダーに丸投げという方もけっこういます。 しかし、理想はデザイナーがアニメーションも含めて考えること。
STUDIO では、デザイナーでも簡単にアニメーションを付けられるので自分の理想の動きを反映できます。また、STUDIOでのアニメーション実装に加えてGIFアニメーションをプラスするとさらなる相乗効果も生み出せます。当案件においてもいくつかAdobe Animateで制作したGIFアニメーションをプラスし、サイトをリッチにしています。特にメインビジュアルのアメーバの動きとGIFアニメーションの相乗演出は、クライアントにも大変好評をいただき、自分自身も手応えを得ているので、STUDIOでの制作をさせていただく際には、絶対におすすめしたいプラスアルファです。
2.コンタクトフォームが作りやすい
コンタクトフォームは、入力内容にもよるのですが実装にけっこう工数がかかります。 それでけで別途費用がそこそこかかったりもするケースが多いのですが、STUDIO では簡単に作成できます。 個人的にはけっこう大きなメリットのひとつだと思います。
3.デザイン性の高いサイトが作りやすい
デザイナー視点でお話させていただくと、デザインを作成する際に 文字はできるだけ読みやすくするため、文字間・行間の微調整を、 写真やイラストもできるだけ見やすくするために大きさや周りの余白（マージン）量を微調整します。 各要素をレイアウトする際の、それぞれの大きさやバランスは、かなり計算を重ねて決定しています。
しかし、コーディング部分を外部のパートナーに委託させていただいた際など、どうしてもそのあたりに細かい誤差が出てしまい、調整に手間がかかるケースが多いです。
これまで多くのコーダーさんとお仕事をさせていただいていますが、 かなり細かく説明をした上でお願いしたとしても、 完全にデザインを再現（ピクセルパーフェクトと言われる状態）してもらえたことはありません。
STUDIO を使えば、こういったところにおいて、デザイナー自身で調整することによって 完全にかなり近い形でデザインを再現することができ、 これによって分業による制作体制で作るよりも、デザイン性の高いサイトを作り出すことができます。
納期を短縮できる
コードを書くのに比べてSTUDIOによる実装は、個人的には半分ぐらいの負担に感じます。また、デザイナーとコーダーの分業でサイトを制作する場合、当然ですが各々のスケジュールを調整しなくてはいけなかったり、デザイナーがコーダーにデザインの説明や指示をする必要があるので、その分制作に日数がかかってしまいます。そういう意味でSTUDIOでの制作は、コードを書くよりも短い納期でサイトを作成することが可能です。また、これによって「コストカット優先」や「品質優先」など、お客様のご希望に応じて作業させていただきますので 付加価値のあるメリットを享受していただけます。
お客様の方でもデザインをカスタマイズしていただける
通常のWEB サイトは、CMSを導入して自由に記事を投稿していただくことができるのですが、 デザインのカスタマイズは専門知識が必要になるため、けっこうハードルがあがります。しかしSTUDIOの場合、直感的にデザインを変更していただくことができます。ご希望の方には簡単なレクチャーをさせていただくことで、デザインのカスタマイズまで自由におこなっていただくことが可能です。
＜STUDIO によるサイト制作のデメリット＞
ここまで STUDIO によるサイト制作のメリットを語ってきました。 まとめると、個人的には案件の内容にもよりますが、それなりにおすすめできる方法です。
ただ、注意点もあります。 まず、前提として STUDIO はページ数の多いサイトには向いておらず、 10 ページを超える中規模以上のサイトになると、おすすめできません。
またSTUDIOで付けるアニメーションには向き不向きがあり、例えばスライドショーの実装になると限られた仕様でないと実現できないなど、多くの制限もあります。 ※2021 年現在。アップデートにより可能になる可能性もあります。
それから通常のWEBサイトでは保守・運営費をある程度抑えながらサイトを運営していくことが可能ですが、STUDIOの場合は、お客様の方でもSTUDIOのプランをご契約していただく必要がありますので 基本的に月額費用が発生します。
月額費用を払いたくない場合、STUDIOのバナー広告が入ってはしまいますが無料で運営いただくこともできるプランもあります。（ただ、SEO的には強くなさそうです。）
最後に、STUDIO での WEB 制作に向いている方と向いていない方をまとめました。
＜STUDIO での WEB 制作に向いている方＞
・アニメーションを活かしたサイトを希望される方
・デザイン性にこだわったサイトを希望される方
・比較的スピーディな納品を求められる方
・自分で後からデザインや機能をカスタマイズしたい方
＜STUDIO での WEB 制作に向いていない方＞
・こだわりたい仕様のある方
・広告バナーがあるのはNGかつ、ランニングコストを払いたくない方（バナーなしのサイトにしたい場合、月額費用 980 円∼が発生する）
・コードでの納品を希望される方
以上、STUDIO での WEB 制作のまとめでした。 ノーコードによるサイト制作は、お客様のご希望される WEB サイトのタイプがマッチすれば、 とてもメリットの大きい制作プランです。 STUDIO でのサイト制作をご希望のお客様は、ぜひアドラクションにご相談ください。 （当記事だけでは分からないことも多いかもしれませんので、なにか疑問点などありましたらお気軽にご相談ください。）
