ボタン（リンク）の実装をマスターしよう！基本〜応用的なデザイン設定方法を解説
Mari
2024.10.31
Updated:2024.12.24
Studioを活用したボタンの実装手順を紹介します。
ボタンのデザインは、Webサイトを訪れたユーザーの行動を左右する重要な要素です。ユーザーが迷わず次のページへ遷移したり、お問い合わせや資料請求などのアクションを起こしたりできるようになります。
今回はStudioを活用したボタンの実装手順をご紹介。基本編としてシンプルなボタンの設定方法と、応用編として6つのボタンデザインの設定方法を解説します。ボタンが魅力的なWebデザインのサイト事例を知りたい方は以下の記事をご参照ください。
「エディターを試す」機能から実際の設定を確認できます
本記事では、ユーザー間でStudioのデザインテンプレートを売買できるマーケットプレイス「Studio Store」で販売するテンプレートサイトをもとに解説していきます。
もし実際の編集画面を見たい場合は、各テンプレートの詳細ページにある「エディターを試す」機能をご利用ください。各テンプレートのレイヤー構造や設定を覗き見することができます！
お手元でもデザインエディタを実際に触りながら、実装にチャレンジしてみてください。
Studioの基本的なボタンの作り方
無料テンプレート「齊藤製本｜小さな企業向けサイト」で実装されている、「カーソルを乗せると色が変わる」ボタンを例に、基本的な作り方を解説します。
1.《ボタンの見た目を作る》
デザインエディタの左側のパネルからボックスを追加し、任意のマージン・パディング、横幅や縦幅、塗り、枠線などを設定します。
2.《リンクを設定する》
ボックスを選択した状態のまま、右側のボックスパネルを開きます。「＋」マークをクリックすると、ボタンをクリックしたときのリンクの設定が可能です。今回の例では「About」のページを設定しました。
ボタンを選択した状態で、Shiftキーを押しながら左側のパネルにあるテキストをクリックすると、ボックスの中にテキストボックスを追加できます。
右側のボックスパネルのテキスト欄に、遷移先の概要を表すテキストを入力します。今回の例では「私たちについて」と入力しました。Webサイトのデザインに合わせて、テキストのサイズ、行高、文字間などのテキストスタイルも整えておきましょう。
3.《アニメーションをつける》
Studioの条件付きスタイルを使用すると、ボタンにカーソルを乗せたときやボタンが出現したときのアニメーションを設定できます。今回は、カーソルを乗せたときに色が変わるアニメーションを設定します。
まず、ボックスを選択した状態で、条件付きスタイルの「ホバー」をクリックし、ボックスタブで塗りを変更します。今回の例では、黒に変更しました。
次に、テキストを選択した状態で、条件付きスタイルの「（in）ホバー」をクリックし、テキストの色を変更します。今回の例では、白に変更しました。
これで、基本的なボタンの設定が完了です。ライブプレビューを見ながら、ボタンが正しく動作するか確認してみましょう。
Studioの応用的なボタンの作り方
続いて、Studioの有料テンプレートを参考に、6つの応用的なボタンの作り方を解説します。有料テンプレートも、Studio Storeの「エディターを試す」から実際の設定を確認できますので、ぜひチェックしてみてください。
グラデーションを使ったボタン
Studioテンプレート「スタンダードLP」には、グラデーションを使ったボタンが配置されています。
Studioでは、ボックスやテキストの塗りにグラデーションの設定が可能です。
自分でグラデーションを設定するのが難しい場合は、カラーパレットから選択することもできます。150種類以上のグラデーションがあるので、いろいろなパターンを試してみてください。
アイコンを使ったボタン
Studioテンプレート「BtoB向けサービスサイト」には、アイコンを使ったボタンが配置されています。アイコンを使用すると、ユーザーがボタンの内容を視覚的に理解しやすくなる効果があります。
Studioでは、自分でアイコン素材を用意しなくても「Material Icons」と「Font Awesome」のアイコンを検索して配置できます。
ボックスやテキストと同様に、アイコンにも条件付きスタイルの「ホバー」や「（in）ホバー」を設定することも可能です。
背景が切り替わるボタン
Studioテンプレート「THEマーケティングカンパニー」では、ボタンにカーソルを乗せたときに背景が左から切り替わるアニメーションが設定されています。
アニメーションの設定方法は、以下の通りです。
1.まずテキストやアイコン、遷移先のリンクを設定した基本的なボタンを作成します。
＞Studioの基本的なボタンの作り方はこちら
2.ボタンを選択した状態のまま、Shiftキーを押しながら左パネルのボックスをクリックするとボックスの中に新たなボックスを追加できます。配置を「絶対位置」、重ね順を「0」、縦幅と横幅を「100%」、塗りを任意の色に設定しましょう。今回の例では、塗りを白に設定しました。
このボックスが、ボタンにカーソルを乗せたときの背景となるため、名称を「ホバー用背景」とします。
また、モーションタブを選択し、スケールのXを「0」、原点を任意の位置に設定します。今回の例では、背景が左から切り替わるよう原点を左の中央に設定しました。
3.ボタンの親ボックスを選択し、条件付きスタイルの「ホバー」をクリックして、不透明度を「1」に変更します。
※親ボックスにアニメーションを設定する必要はありませんが、「ホバー用背景」に「（in）ホバー」を設定するため、通常時と同じ不透明度「1」を設定しています。
4.もう一度「ホバー用背景」を選択し、「（in）ホバー」をクリックして、スケールのXを「1」に変更します。
5.ボタンの中にあるテキストとアイコンが「ホバー用背景」の下に隠れてしまわないよう、重ね順を「1」に変更します。
6.また、ボタンの中にあるテキストやアイコンにも、任意の「（in）ホバー」を設定します。今回の例では「ホバー用背景」の塗りを白に設定したため、テキストとアイコンを黒に変更しました。
これで、ボタンにカーソルを乗せたときに背景が左から切り替わるようなアニメーションの設定が完了です。
なお、原点の位置によって背景がどこから切り替わるかを変更することもできます。ライブプレビューを見ながら、理想のアニメーションに近づくよう調整してみましょう。
正円のボタン
Studioテンプレート「コーポレート｜企業向け」のトップページには、正円のボタンが配置されています。
Studioでは、縦幅と横幅が同じ正方形のボックスを作成し、角丸を50%に設定することで、正円を作成できます。
正円とテキストを組み合わせたボタンを配置すると、シンプルながらもトレンド感のあるデザインに仕上がります。条件付きスタイルの「ホバー」や「（in）ホバー」の設定で、ボタンにカーソルを乗せたときに正円が大きくなるようなアニメーションを施すことも可能です。
波紋が広がるようなボタン
Studioテンプレート「HOMELY - 不動産」では、正円のボタンにカーソルを乗せたときに波紋が広がるようなアニメーションが設定されています。
アニメーションの設定方法は、以下の通りです。
1.塗りが白、枠線がオレンジの正円のボタンを作成し、ボタンの中にアイコンを追加します。今回の例では、アイコンもオレンジに設定しました。
2.ボタンの中に新たなボックスを追加し、配置を「絶対位置」、重ね順を「-1」、縦幅と横幅を「100%」、角丸を「50%」、塗りはボタンと同じ白に設定します。
このボックスが、ボタンにカーソルを乗せたときの背景のアニメーションとなります。目印として、レイヤーパネル上で名称を「ホバー用背景」とします。
3.ボタンの親ボックスを選択し、条件付きスタイルの「ホバー」をクリックして、塗りを枠線と同じオレンジに変更します。
また、モーションタブを開いて、「ホバー」のスケールを任意の値に変更します。今回の例では、スケールを「1.1」に変更しました。
4.「ホバー用背景」を選択し、「（in）ホバー」の不透明度を「0」、塗りをアイコンと同じ色に変更します。
また、モーションタブを開いて、「（in）ホバー」の時間とスケールをボタンの親ボックスよりも大きな値に変更します。今回の例では、時間を「1200」、スケールを「1.3」に変更しました。
5.ボタンの中にあるアイコンにも、任意の「（in）ホバー」を設定します。今回の例では、アイコンが白になるよう設定しました。
これで、ボタンにカーソルを乗せたときに波紋が広がるようなアニメーションの設定が完了です。このアニメーションは正円以外にも設定できるので、ぜひいろいろなボタンに設定してみてください。
スクロール時に追従するボタン
Studioテンプレート「整骨・整体・接骨院向けサイト」では、スクロールした時に追従するボタンが設定されています。
Studioでは、ボックスの配置を「固定」に設定することで、スクロール時に追従するボタンを設定可能です。
＞ヘッダーや特定のボタンを画面上に固定（スクロール時に追従）する方法はこちら
最後に
本記事では、シンプルなボタンリンクの設定から様々なデザインのボタンの作成方法まで、具体的な手順を解説しました。Studioを活用すれば、デザイン性の高いボタンを簡単に実装し、ユーザー体験を向上させることができます。
本記事で紹介した実装手順を参考に、あなたのサイトのテーマやターゲットユーザーに合わせて、オリジナリティあふれるボタンにアレンジしてみてくださいね。
