こんにちは、Studio公式アンバサダーの長谷川麻子です！デザイン会社経営しています。今日は最近案件が増えているStudioについて書いていこうと思います。（最近リブランディングでSTUDIOからStudioに変わったんですよね。）
Studioはノーコードでサイトを実装でき、プロフェッショナルからデザイン初心者まで幅広いユーザーに人気のツールです。ウェブデザインやUI/UXデザインの制作において、その直感的な操作性と豊富な機能が支持されています。
そんなStudioですが、最近案件としてもよく使っているのでどのようなサイトが作れるのか、特徴を踏まえながら実例を紹介したいと思います。
1.Studioの強み
まず、Studioの主な特徴からみていきましょう。
1-1 ドラッグ&ドロップなどの簡単な操作で実際可能
通常、デザインをwebに反映させるにはコーディングという作業が必要で、そのためにはHTMLタグやCSSプロパティを覚える必要があります。文字列だけの画面を見ながらデザインを組み立てて行く作業はとても大変ですが、Studioは、まるでPhotoshopやFigmaなどのデザインツールのようにドラッグ&ドロップでデザインを組み立てることが可能です。コードの知識がなくても簡単に使用できます。初心者でも直感的に操作でき、スムーズにデザインを構築できます。
1.2 素早いレスポンシブ対応
デザインの中で重要とされるのが、どのデバイスでも適切に表示されること(＝レスポンスデザイン)です。Studioは、レスポンシブデザインを自動で適用する機能があるため、通常のコーディングに比べて調整がとても簡単です。モバイル、タブレット、デスクトップなど異なるデバイスに対応したデザインを効率よく作成できます。
1-3.多彩なアニメーション機能
フワッと文字が出現したり、要素にカーソルを合わせた時に色が変わるようなアニメーションをwebデザインに適用させるには、CSSのアニメーションプロパティや、Javascriptという言語の理解が必要です。Studioでは、複雑な知識なしでアニメーションを簡単に追加できる機能が備わっており、ユーザー体験を向上させる動的なデザインの実装が可能です。
2.Studioの弱点
Studioは弱点もあります。
2-1.月額料金がかかる
Studioは、独自ドメイン(http://から始まるサイトのリンク名を好きに設定すること)だと月額料金がかかります。また、記事などを簡単に入稿できるCMS機能をつけるとさらに料金がかかってくるので通常のコーディングに比べランニングコストは高めになってしまいます。
2-2.カスタマイズ性が低い
アニメーションやホバーは用意されていて簡単に実装できますが、決められたアニメーションになるので、より複雑な動的な処理を入れるには一手間かかったり、通常のコードのような自由度は低いです。
Studioの弱点で「カスタマイズ性が弱い」とお伝えしましたが、例えばボタンのホバーってPCの時にしか使わないじゃないですか。（ホバーというのはPCで見てる時にカーソルを合わせると色が変わったり、動いたりなどアニメーションするアクションのことです）今ってスマホで閲覧する人が大半ですよね。だからスマホで見たときのことを優先に考えるべきなんですよね。そうなった時にホバーアニメーションよりももっと効果的なアニメーションがあるんですよね。
それが左右に動いたり、サイズが変わるアニメーションだと思うんです。これらを効果的に使うことでLPの成果に貢献してくれます。
別の記事でボタンの作り方については解説していますので併せて読んでみてください
Studioを使って1日でサイト実装した話
こんな特徴を持つStudioですが、最近の制作案件で、3日でLP作って！と言われ、えーっと思いつつ、Studioでデザインから実装したら1日で作れました。笑
というのもデザイン的に完成されたテンプレートが豊富なのでそこから調整を加えてカスタマイズしていくとかなり時短になります。
レスポンシブ対応が素早くできるのでスピードアップにもなりますし、アニメーションもつけることができるのでリッチなサイトを瞬時に作ることができます。Studioで作ったサイトは急いでLPやHPを作りたいクライアントさんに喜ばれますね。
過去Studioを使って作ったサイト事例
StudioでLP、HP、ポートフォリオサイト、など様々なタイプのサイトを表現することが可能です。CMS機能を使えば記事制作もできますのでメディアサイトも素早く立ち上げることができます。
Studioを使ったコーポレートサイト
Studioを使ったランディングページ
CMS機能も操作性がよくコーディング知識がなくても作れてしまいます。ただ少しメニューの位置などをしっかり把握する必要があります。操作のコツを掴んでおきましょう。
Studioでは他にこんなことも
StuidoはAI機能が搭載されており、Figmaで作ったデザインをコピペでStudioに反映することも可能です。今はシンプルなデザインで反映可能ですが今後更なる改善で複雑なデザインもそのまままるっとコピペで実装できちゃうのはかなり夢がありますね。
Studioをお得に始める方法
よし！Studioで作ってみよう！新しくアカウントを発行しよう！って方はちょっと待って！！こちらのコードを入力してからstudioを使うと月額料金20％OFFで使えるのでお得です！アカウント発行時にクーポンコードを入力してくださいね。
最後に
私の会社momocriではデザイン制作を承っております。Studioを使ったサイト制作、他デザイン制作のご相談があればXのDMや会社HPからご連絡ください。
Xはこちら
当サイトからのお問い合わせはこちら
