【中級者〜上級者】Studioの応用テクニック4選｜活用してWebサイト制作を魅力的に

2022/4/19葉栗雄貴

株式会社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公式の解説はこちら

カーソルを合わせた時に、メニューが下に降りてくる「プルダウンメニュー」もStudioで実装できます！

情報を隠すことでスペースを確保
ヘッダーでメニューが多くなってしまう時、プルダウンメニューの中に項目をまとめると、ヘッダーがスッキリして見やすくなります。ハンバーガーメニューと異なる点として、プルダウンメニューはPCで活躍することが挙げられます。
メニュー追加時にデザインへの影響が少ない
新たにメニューを追加しても、プルダウンメニュー内の情報が増えるだけなので、デザインへの影響が少ないです。