【STUDIO初心者必見！】知ってたらすごい便利なのに誰も教えてくれなかったこと３選

こんにちは！ Shinobuです。

普段はグラフィックデザイナーや講師として、大阪を中心に活動をしています。

STUDIOを使い始めて少し経つと、「もっと効率のいい方法はないのかな…？」「もっとやりやすい方法はないのかな…？」と、疑問を持つようになります。

言葉だけは知っているけれど、聞きなれない横文字だしなんだか使うのが怖いな…という機能もたくさん！
どれから調べたらいいのかわかんなーい！
と、爆発しそうになる前に！
ぜひ今回の記事を読んでみてください。

使い始めてしばらくしたあなたが、知るべき便利な機能は以下の３つです！

要素をラクに選択したい！

ボックスの中のテキストを触りたいのに、全然触れないっ…！　いつまで経ってもたどりつかない…！
…という経験はありませんか？
STUDIOで要素を選択するには、ちょっとしたコツを知っておく必要があります。
３つ方法をご紹介しますので、シーンに応じて、使い分けてみてくださいね。

ゆっくりクリックして選択

選択したい要素をめがけて、何度かゆっくりクリックしていきます。
選択したい要素が選択されるまで繰り返しクリックしましょう。
ここでは、白い文字の「いますぐ送信」を選択しています。

レイヤーから選択

どのソフトでもそうですが、レイヤーパネルを有効活用していきましょう。
左側のレイヤーパネルから、該当の要素をクリックするだけです。
パネルから選択すれば、うっかり意図せぬ操作でミスすることもないので安心ですね！

一発で狙い撃ち選択

一発で狙い撃って選択することもできます。
まず、【Ctrl】キー（【Command】キー）を押します。
押下した状態で選択したい要素にカーソルを当てると、枠が表示されます。
そのままクリックしましょう。
すると、一発で要素を選択することができましたね！

STUDIOでホバーができるの？

「ノーコードツールでも、ホバーってできるのでしょうか？」というご質問を、セミナーでお受けしたことがあります。
ホバーボタンは以下のようなものですね。
カーソルを要素上に当てた際に、ボタンが変化します。

これ、STUDIOで作ったんですよ。本当に簡単にできちゃうので、ぜひ試してみてください。
それでは、設定手順です。

（１）ホバーさせたい要素を選択します。
ここではグレーのボックスを選択しました（あらかじめ<button>タグを設定しています）。

（２）右上の「条件付きスタイル」にカーソルを当てると、以下のようなリストが出てくるので、[ホバー]をクリックします。

（３）「条件付きスタイル」モードに切り替わります。
ここで注意点。
今ほど選択した要素以外の場所をクリックすると、「条件付きスタイル」モードが解除されてしまいます。
ここからは不用意にデザインレイアウト内を触らないようにしましょう。

（４）ホバーした際にオレンジ色になってほしいので、ボックスパネルの中の[塗り]をオレンジ色に変更します。

（５）オレンジ色にした要素以外の部分（ここでは「いますぐ送信」ボタン以外のこと）をクリックし、「条件付きスタイル」モードを解除します。

（６）「ライブプレビュー」で確認をしてみましょう。うまくホバーされましたか？
「条件付きスタイル」モードで影をつけたり大きさを変えたり、「モーション」タブで動きを制御することもできるので、他にも様々なバリエーションを表現することができますよ！

条件付きスタイルをやめたいときは、解除したい要素を選択し、「条件付きスタイル」モードにします。
もう一度「条件付きスタイル」-[ホバー]にカーソルを当てると、「×」ボタンが表示されますので、選択すると解除することができます。

コ、コンポーネント…？

「コンポーネント」という便利な仕組みがあるので、ぜひ使ってください。
コンポーネントは、STUDIOだけに特化したものではありません。
ほかのソフトやプログラムを行う上で、よく耳にするキーワードになりますので、ここでコンポーネントがどんなものなのかを理解しておけば、STUDIO外でも役に立ちます。

コンポーネントは、ボックスをまとめて小さなひな形を作るようなイメージです。
複数ページあるWEBサイトのヘッダーやフッターは、そのデザインを統一する必要がありますが、毎回コピペしたりするのは非効率です。
ヘッダーを作った後にコンポーネント化をし、他のページで登録したコンポーネントを呼び出して使うことができます。
また、コピペと大きく違うのは、変更した内容は連動する、ということです。
どういうことなのか、実際に手を動かして確認してみましょう。