STUDIOの基本的な機能の使い方からリアルな実装についてのTipsなどをまとめていきます。
このページの最後のリソースリンクにもまとめていますが、公式チャンネルでSTUDIOの使い方動画がアップされてるのでそちらもどうぞ。
STUDIOとは？
STUDIOはAdobeのデザインツールのような見た目で、デザインしたそのままの状態でホームページをを公開できるWebサービス。
通常ホームページはデザインした後HTMLやCSSを使ってコーディングをする必要があるのですが、STUDIOを使えばブラウザ上でデザインしたものをそのままホームページとして公開できます。
STUDIOでできること
STUDIOでは次のようなことができます。
- 画面上でCSSのスタイル
- レスポンシブデザイン
- 無料画像の使用
- マテリアルアイコン、FontAwesomeアイコンの使用
- SNSやGoogleマップの埋め込み
- ブログの作成
- ドメインの接続、SSL無料
- Wordpressから引越し機能
アップデートのスピードが結構早くて新しい機能がどんどん追加されています。
初期のころはポートフォリオサイト向けかな？という印象でしたが、ブログの作成やWordpressからの引っ越し機能が追加されたことで会社のホームページやお店のサイトもかなり作りやすくなっています。
STUDIOでできないこと
逆にSTUDIOにできないこともあります。
普通のホームページとは違ってHTMLやCSSを使えないことやjQueryプラグインでスライドショーを入れることもできません。
またSEO対策についても、設定できるのはタイトルや説明文程度で構造化データのカスタマイズなど細かいセッティングはできません。
なのでSEO重視でサイト作るならWordpressの方がいいですね。
STUDIOの使い方
STUDIOは本格的なホームページを作成できる分機能が多すぎて操作が難しいかも？と思われがちですが、操作方法も画面のUIも非常にシンプルで使いやすいエディターになってます。
STUDIOの基本的な使い方についてまとめているので気になるところがあれば以下の記事を参考にしてみてください。
ページエディターの使い方
STUDIOではドラッグ＆ドロップでボックスやテキストを配置するページエディターを使ってWebサイトを作成します。
FigmaやXDのようなデザインツールとは少し使い勝手が違うのですが一応自由配置にも対応しているのでデザイン通りのレイアウトを作ることが可能です。
ボックスの配置方法やレイアウト設定について詳しくはこちらの記事をご覧ください。
作成したページをスマホ対応させる
作成したホームページをタブレットやスマホモードに切り替えてレイアウトを調整していくだけで簡単にスマートフォン対応させることができます。
-> 参考記事: 「STUDIOで作ったWebサイトをレスポンシブ化する方法」
塗りやフォントスタイルの設定方法
配置したボックスやテキストは普段使っているデザインツールと同じようにスタイリングすることができます。
設定方法はエディターページの上にまとまっていて
-> 参考記事: 「STUDIOでおしゃれなWebサイトを作るためのデザインのやり方」
綺麗なアニメーションを追加する
STUDIOには「モーション」というタブでボックスやテキストにアニメーションエフェクトを追加することができます。
マウスオーバーや画面に表示されたタイミングで色を変えたり、フェードインさせたりすることができます。
どれもCSSのtransitionなどで設定できるものなので迷うことなくエフェクトを追加できると思います。
-> 参考記事: 「STUDIOでアニメーションを作成する方法」
下層ページの作り方
STUDIOでは下層ページの追加ができるので複数の下層ページを実装したコーポレートサイトの作成も可能です。
ページの追加方法はページ管理パネルで新規追加のアイコンをクリックするだけでOK。
STUDIOのフォームやGoogleフォームを設置して問い合わせページを作成することもできます。
-> 参考記事: 「STUDIOで問い合わせページを作る方法」
ブログの作成方法
STUDIOにはCMS機能があるのでWordpressのようなブログの作成もできます（しかもフリープラン対応！）。
こちらも操作は非常に簡単で、ブログの作成ボタンを押して機能を有効化したらWordpressと同じように記事を書くだけ。
記事一覧ページと記事ページは自動で作成され、トップページにブログやお知らせ一覧を表示することもできます。
-> 参考記事: 「STUDIOでブログ記事一覧をホームページに表示する方法」
STUDIOのリソース
STUDIOを使いこなすための便利なリソースを紹介します。
公式の使い方ドキュメント
STUDIOの使い方はYoutubeチャンネルで動画でまとめられています。テキストドキュメントはないですね。
出版されてるSTUDIOの本
現在のところありません。
STUDIOで作られたサイトの事例
STUDIOで作られたサイトの事例がいくつか掲載されています。作り方やデザインの参考になります。