こんにちは! Shinobuです。
普段はグラフィックデザイナーや講師として、大阪を中心に活動をしています。
STUDIOを使い始めて少し経つと、「もっと効率のいい方法はないのかな…?」「もっとやりやすい方法はないのかな…?」と、疑問を持つようになります。
言葉だけは知っているけれど、聞きなれない横文字だしなんだか使うのが怖いな…という機能もたくさん!
どれから調べたらいいのかわかんなーい!
と、爆発しそうになる前に!
ぜひ今回の記事を読んでみてください。
使い始めてしばらくしたあなたが、知るべき便利な機能は以下の3つです!
目次
要素をラクに選択したい!
ボックスの中のテキストを触りたいのに、全然触れないっ…! いつまで経ってもたどりつかない…!
…という経験はありませんか?
STUDIOで要素を選択するには、ちょっとしたコツを知っておく必要があります。
3つ方法をご紹介しますので、シーンに応じて、使い分けてみてくださいね。
ゆっくりクリックして選択
選択したい要素をめがけて、何度かゆっくりクリックしていきます。
選択したい要素が選択されるまで繰り返しクリックしましょう。
ここでは、白い文字の「いますぐ送信」を選択しています。
レイヤーから選択
どのソフトでもそうですが、レイヤーパネルを有効活用していきましょう。
左側のレイヤーパネルから、該当の要素をクリックするだけです。
パネルから選択すれば、うっかり意図せぬ操作でミスすることもないので安心ですね!
一発で狙い撃ち選択
一発で狙い撃って選択することもできます。
まず、【Ctrl】キー(【Command】キー)を押します。
押下した状態で選択したい要素にカーソルを当てると、枠が表示されます。
そのままクリックしましょう。
すると、一発で要素を選択することができましたね!
STUDIOでホバーができるの?
「ノーコードツールでも、ホバーってできるのでしょうか?」というご質問を、セミナーでお受けしたことがあります。
ホバーボタンは以下のようなものですね。
カーソルを要素上に当てた際に、ボタンが変化します。
これ、STUDIOで作ったんですよ。本当に簡単にできちゃうので、ぜひ試してみてください。
それでは、設定手順です。
(1)ホバーさせたい要素を選択します。
ここではグレーのボックスを選択しました(あらかじめ<button>タグを設定しています)。
(2)右上の「条件付きスタイル」にカーソルを当てると、以下のようなリストが出てくるので、[ホバー]をクリックします。
(3)「条件付きスタイル」モードに切り替わります。
ここで注意点。
今ほど選択した要素以外の場所をクリックすると、「条件付きスタイル」モードが解除されてしまいます。
ここからは不用意にデザインレイアウト内を触らないようにしましょう。
(4)ホバーした際にオレンジ色になってほしいので、ボックスパネルの中の[塗り]をオレンジ色に変更します。
(5)オレンジ色にした要素以外の部分(ここでは「いますぐ送信」ボタン以外のこと)をクリックし、「条件付きスタイル」モードを解除します。
(6)「ライブプレビュー」で確認をしてみましょう。うまくホバーされましたか?
「条件付きスタイル」モードで影をつけたり大きさを変えたり、「モーション」タブで動きを制御することもできるので、他にも様々なバリエーションを表現することができますよ!
条件付きスタイルをやめたいときは、解除したい要素を選択し、「条件付きスタイル」モードにします。
もう一度「条件付きスタイル」-[ホバー]にカーソルを当てると、「×」ボタンが表示されますので、選択すると解除することができます。
コ、コンポーネント…?
「コンポーネント」という便利な仕組みがあるので、ぜひ使ってください。
コンポーネントは、STUDIOだけに特化したものではありません。
ほかのソフトやプログラムを行う上で、よく耳にするキーワードになりますので、ここでコンポーネントがどんなものなのかを理解しておけば、STUDIO外でも役に立ちます。
コンポーネントは、ボックスをまとめて小さなひな形を作るようなイメージです。
複数ページあるWEBサイトのヘッダーやフッターは、そのデザインを統一する必要がありますが、毎回コピペしたりするのは非効率です。
ヘッダーを作った後にコンポーネント化をし、他のページで登録したコンポーネントを呼び出して使うことができます。
また、コピペと大きく違うのは、変更した内容は連動する、ということです。
どういうことなのか、実際に手を動かして確認してみましょう。
コンポーネントを登録してみよう!
(1)まず、コンポーネント化したい部分の一番外側のボックスを選択します。
ここでは、とあるサイトのヘッダーをコンポーネントします。
すでにタグ付けしてある<header>ボックスを選択しました。
(2)右クリックして、「コンポーネント化」を選択します。
(3)コンポーネントに名前を付けます。
ここでは「ヘッダー」と名前を付けました。
「コンポーネントを作成」ボタンを押せば、登録完了です!
(4)ヘッダー部分が、紫色になりました。
コンポーネントを呼び出してみよう!
(1)登録したコンポーネントを呼び出します。
左側のパネルの[追加]タブ-[コンポーネント]を表示します。
先ほど登録した「ヘッダー」がありますね。
(2)登録されている「ヘッダー」を、レイアウト内にドラッグ&ドロップして配置します。
ここではテストで同じページにヘッダーを続けて配置しましたが、実際は他のページにレイアウトしてくださいね。
コンポーネントの連動を理解しよう!
(1)「変更した内容は連動する」と、最初にお伝えをしました。
どういう動きをするのか、実際に確認してみましょう。
ここに2つ、ヘッダーのコンポーネントがレイアウトされている状態です。
片方のヘッダーの色を変えてみます。
コンポーネントされたボックスは、ダブルクリックで中身を選択することができます。
(2)すると、選択していない方のヘッダーまで色が変わりました!
このように変更内容が連動されるため、何度も使うレイアウトで、統一したいデザインがある場合は、積極的にコンポーネント化をしていきましょう。
最後に…
今回は、使い始めてしばらくしたあなたが、知るべき便利な機能についてご紹介しました!
新しい機能に慣れるには、どんどん手を使って動かしていくのみです。
壊れたりしませんから、最初から完璧を目指さずに「失敗しても大丈夫!なんとかなる!」という気持ちでチャレンジしてみましょう。