更新日: 2022 / 09 / 05

初心者のためのSTUDIOの使い方 超入門ガイド

カテゴリー: studio

STUDIOの基本的な機能の使い方からリアルな実装についてのTipsなどをまとめていきます。

このページの最後のリソースリンクにもまとめていますが、公式チャンネルでSTUDIOの使い方動画がアップされてるのでそちらもどうぞ。

  1. STUDIOとは?

    1. STUDIOでできること
    2. STUDIOでできないこと
  2. STUDIOの使い方

    1. ページエディターの使い方
    2. 作成したページをスマホ対応させる
    3. 塗りやフォントスタイルの設定方法
    4. 綺麗なアニメーションを追加する
    5. 下層ページの作り方
    6. ブログの作成方法
  3. STUDIOのリソース

    1. 公式の使い方ドキュメント
    2. 出版されてるSTUDIOの本
    3. STUDIOで作られたサイトの事例
    4. STUDIOで使えるテンプレート

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の使い方 ページエディターの使い方 STUDIOではドラッグ&ドロップでボックスやテキストを配置するページエディターを使ってWebサイトを作成します。

FigmaやXDのようなデザインツールとは少し使い勝手が違うのですが一応自由配置にも対応しているのでデザイン通りのレイアウトを作ることが可能です。

ボックスの配置方法やレイアウト設定について詳しくはこちらの記事をご覧ください。

作成したページをスマホ対応させる

STUDIOの使い方 作成したページをスマホ対応させる

作成したホームページをタブレットやスマホモードに切り替えてレイアウトを調整していくだけで簡単にスマートフォン対応させることができます。

-> 参考記事: 「STUDIOで作ったWebサイトをレスポンシブ化する方法

塗りやフォントスタイルの設定方法

STUDIOの使い方 塗りやフォントスタイルの設定方法

配置したボックスやテキストは普段使っているデザインツールと同じようにスタイリングすることができます。

設定方法はエディターページの上にまとまっていて

-> 参考記事: 「STUDIOでおしゃれなWebサイトを作るためのデザインのやり方

綺麗なアニメーションを追加する

STUDIOの使い方 綺麗なアニメーションを追加する

STUDIOには「モーション」というタブでボックスやテキストにアニメーションエフェクトを追加することができます。

マウスオーバーや画面に表示されたタイミングで色を変えたり、フェードインさせたりすることができます。

どれもCSSのtransitionなどで設定できるものなので迷うことなくエフェクトを追加できると思います。

-> 参考記事: 「STUDIOでアニメーションを作成する方法

下層ページの作り方

STUDIOの使い方 下層ページの作り方

STUDIOでは下層ページの追加ができるので複数の下層ページを実装したコーポレートサイトの作成も可能です。

ページの追加方法はページ管理パネルで新規追加のアイコンをクリックするだけでOK。

STUDIOのフォームやGoogleフォームを設置して問い合わせページを作成することもできます。

-> 参考記事: 「STUDIOで問い合わせページを作る方法

ブログの作成方法

STUDIOの使い方 ブログの作成方法

STUDIOにはCMS機能があるのでWordpressのようなブログの作成もできます(しかもフリープラン対応!)。

こちらも操作は非常に簡単で、ブログの作成ボタンを押して機能を有効化したらWordpressと同じように記事を書くだけ。

記事一覧ページと記事ページは自動で作成され、トップページにブログやお知らせ一覧を表示することもできます。

-> 参考記事: 「STUDIOでブログ記事一覧をホームページに表示する方法

STUDIOのリソース

STUDIOを使いこなすための便利なリソースを紹介します。

公式の使い方ドキュメント

STUDIOの使い方はYoutubeチャンネルで動画でまとめられています。テキストドキュメントはないですね。

Youtube動画一覧

出版されてるSTUDIOの本

現在のところありません。

STUDIOで作られたサイトの事例

STUDIOで作られたサイトの事例がいくつか掲載されています。作り方やデザインの参考になります。

Showcase

STUDIOで使えるテンプレート

テンプレート一覧