【中級者〜上級者】STUDIOの応用テクニック4選｜活用してWebサイト制作を魅力的に
株式会社caroaでインターンをしている松本です。caroaではSTUDIOを活用したWebサイト制作を行っています。
今回は表現の幅が広がり、他のSTUDIO製サイトと差別化を図れる応用テクニックをまとめました！
STUDIOを使って作り込んだポートフォリオサイトや、お客さんの要望に応えられる機能的なサイトを作りたいと思っている方にぜひ読んでいただきたい内容となっています。
caroaではSTUDIOを使用してノーコードWeb制作を学ぶオンラインスクールをやっています。もしSTUDIOを勉強したい方はぜひ参加してみてください。
1. ハンバーガーメニュー
ハンバーガーメニューとは
スマホやタブレットなどで使われているナビゲーションメニューのことです。
クリックすると中に隠れている情報が表示されるようになっています。
ハンバーガーメニューのメリット
情報を隠すことでスペースを確保
スマホやタブレットはパソコンと比べて画面サイズが狭いため、ハンバーガメニューの中に情報を隠すことで、ヘッダーにスペースができます。それにより、ファーストビューの表示領域を確保できます。
メニュー追加時にデザインへの影響が少ない
新たにメニューを追加しても、ハンバーガーメニュー内の情報が増えるだけなので、デザインへの影響が少ないです。
作り方
①ヘッダーを作成します。この時、ヘッダー内の「メニュー1」「メニュー2」「ボタン1」は必ず一つにグループ化します。
②①でグループ化したボックスを「タブレット」「スマホ」サイズで非表示にします。その後、レスポンシブでタブレットを選択し、ハンバーガーメニューのアイコンを配置します。
③②で配置したアイコンを「基準」サイズで非表示にします。レスポンシブで「基準」サイズに戻した時に、アイコンが見えなくなり、「メニュー1」「メニュー2」「ボタン1」が表示されていればOKです。
④新規のモーダルページを作成します。ModalBaseというレイヤーは以下のGIF動画のように、横幅と縦幅を100%にしておきます。
⑤④で作成したモーダルページに、「メニュー1」「メニュー2」「ボタン1」を配置します。
⑥④で作成したモーダルページに「×」ボタンを絶対配置で作成します。
⑦「×」ボタンのリンクでモーダルを閉じるを選択します。その後、作成したモーダルをヘッダーのアイコンにひも付けます。
プレビューでアイコンを押して、モーダルが開けばOKです！
<作り方の流れはこちら>
STUDIO公式の解説はこちら
2. プルダウンメニュー
プルダウンメニューとは
カーソルを合わせた時に、メニューが下に降りてくる「プルダウンメニュー」もSTUDIOで実装できます！
プルダウンメニューのメリット
情報を隠すことでスペースを確保
ヘッダーでメニューが多くなってしまう時、プルダウンメニューの中に項目をまとめると、ヘッダーがスッキリして見やすくなります。ハンバーガーメニューと異なる点として、プルダウンメニューはPCで活躍することが挙げられます。
メニュー追加時にデザインへの影響が少ない
新たにメニューを追加しても、プルダウンメニュー内の情報が増えるだけなので、デザインへの影響が少ないです。
作り方
①ヘッダーを作成します。今回は「サービス1」の下にプルダウンメニューが出るようにするので、「サービス1」のテキストをグループ化しておきます（詳しくはGIF動画を参考）。
②①でグループ化した「サービス」というテキストを囲っているボックスの中に新しくボックスを作り、「サービス1」「サービス2」というテキストを配置します。
③②で作成したボックスを絶対配置に変換し、位置を調整します。
④「サービス」を囲っているボックスに、透明度1のホバーをつけます。この時、誤ってinホバーで設定しないように気をつけてください。
この時注意したいのが、「サービス」のテキストボックスではなく、「サービス」を囲っているボックスに設定することです。
⑤③で絶対配置に変換したボックスのスケールのY軸を0に、原点を真ん中の上に設定します。こちらはモーションというタブから設定できます。
この時、誤ってinホバーで設定しないように気をつけてください。
⑥③で絶対配置に変換したボックスでinホバーを選択してから、スケールのY軸を1に設定します。
プレビューで「サービス」にカーソルを合わせた時、メニューが降りて来たらOKです！
<作り方の流れはこちら>
3. ヘッダーの背景をファーストビューとそれ以降で切り替える
ファーストビューではヘッダーの背景が必要ないけれど、ファーストビュー以降では背景をつけたい！という時はありませんか？
ファーストビューの配色によっては、ファーストビュー以降の背景色次第でヘッダーの文字が埋まってしまったりします。こちらはそういった時に活用できるテクニックです。
重ね順を利用することで、実現できます。
作り方
①ヘッダーを作成し、ヘッダーとは別で背景となるボックスを新しく作ります。サイズはヘッダーと全く同じにしてください。
ヘッダーとこちらのボックスは両方とも絶対配置にしてください。
②次にそれぞれのレイヤーの重ね順を、以下の通りに変更します。
ファーストビュー以降の要素：0
①で作成したヘッダーの背景：1
ファーストビューの背景：2
ヘッダー：3
プレビューでスクロールした時に、ヘッダーの背景がファーストビュー以降でパッと切り替わればOKです！
<作り方の流れはこちら>
4.タブ切り替え
サイトのスクロールが長くなりすぎてしまう時などに、一部をタブ切り替えにしてコンパクトにできたらいいなと思うことってありますよね。
少し複雑な方法になってしまいますが、STUDIOでもタブ切り替えを実装できます！
タブ切り替えのメリット
スペースを有効活用できる
たくさんの情報を狭い領域に掲載できるため、空きスペースができやすいです。
情報の関係性が一目でわかる
タブとして並列にある項目は、重要度が同じ情報であることがユーザーに伝わりやすいです。
操作後の動作が予測しやすい
ユーザーが直感的に、どこを押せば違う情報が表示されるかを理解できます。
色も自由に変更できるので、コンパクトで個性のあるページが作成できますよ。
作り方
今回はタブを二つで作るため、わかりやすく「タブ1」（赤）と「タブ2」（青）で色分けしています。
①「タブ1」のベースとなるボックスを配置し、グループ化します。
②①で作った「タブ1」のベースをコピー＆ペーストして、「タブ2」のベースを作成します。
③それぞれのタブのグループ化したボックスに、IDを設定します。今回は「tab1」「tab2」です。
④③で設定したIDをそれぞれのタブのボタン部分にリンクさせます。
⑤「タブ1」と「タブ2」をグループ化します。
⑥⑤でグループ化したボックスの配置方向を右（→）にして、左揃えにします。そして、はみ出しを切り取りで設定します。
プレビューでうまく切り替わっていたら成功です！
<作り方の流れはこちら>
まとめ
今回は、STUDIOでの制作の幅をもっと広げてみたい方に向けて、ヒントになりそうなテクニックを紹介してみました！
私は紹介した4つのテクニックを使ってコーポレートサイトの実装やLPページを作成してきました。どれも少し複雑で、慣れるまでは難しいと感じてしまうかもしれませんが、一度作ればすごく便利で使いやすいサイトができますよ！
ぜひこれらのテクニックを駆使して素敵なサイトを作ってください。
こちらから初級編の記事もご覧いただけます。