前回の記事では、ノーコード開発ツールSTUDIOの魅力と可能性を深掘りし、その使いやすさや多機能性について解説しました。今回は、その続編として、STUDIOで作成可能なUIボタンにスポットを当て、どのようにしてより魅力的でユーザーフレンドリーなインターフェースをデザインできるのかを紐解いていきます。前回の内容を基に、より深い知識と具体的なテクニックを共有し、あなたのウェブサイトを次のレベルへと導きます。
UIボタンとは？
UIボタンはユーザーがWEBサイトを操作する上で最も基本的な要素の一つであり、サイトの使い勝手や見栄えと直接関係しています。適切なデザインと配置は、ユーザー体験や満足度を大きく向上させます。
【基礎】STUDIOでボタンを作成する方法
STUDIOでは、テキスト、色、形状など、様々なカスタマイズが可能です。初心者でも簡単にUIボタンを作成できるような基本的な手順を紹介します。
ページを遷移する機能を持つボタン作成
①Boxを追加して、お好みのボタンっぽい形や色に編集します。
②Textを追加して、前に作成したBoxの中に入れます。このTextもBoxと同じように形や色をお好みで編集します。
③ボタンが押された時の動作を設定します。ボタンにどのような機能を付与するかによって、設定の仕方は異なりますが、今回は最も基本的で、ほとんどの人が使う「ページを遷移する機能」を実装します。作業としては、Textの入ったBoxを選択した状態で、リンクの設定から、遷移したいページを選択するだけです。
以上で、最もシンプルな「ページを遷移する機能を持つボタン」を作成することができました。実際にライブプレビュー画面で確認してみます。
かなりシンプルですが、ボタンを押すことで別の画面（※今回はホーム画面）に遷移することを確認しました。
ボタン上をホバー中のアニメーション設定
ただ、このようなシンプルなボタンだと、WEBサイトを訪れたユーザーは、ボタンがあることにも気づかないかもしれません。そこで先ほど作成した最低限のボタンに一手間加えます。
④マウスカーソルをボタン上に持って行った時（ホバー時）、ボタンの表示が変わるようなアニメーションを追加します。
アニメーションを追加してライブプレビューを確認すると、WEBサイトに動きがあり、ユーザーはボタンがあることを多少認識しやすくなったのではないでしょうか？
【応用】いろいろなデザインのUIボタンの紹介
ここからは、さらに一歩進んだUIボタンのカスタマイズ方法をご紹介します。ホバーエフェクトやアニメーションなどのエフェクトを加えることで、より洗練されたUIボタンを設計できます。
今回の記事では、僕がココナラでフリーランスとしてSTUDIOを使ったWEBサイト制作をしている中で、作成したUIボタンのデザインをご紹介します。その他にも、僕がいろいろなWEBサイトを見てきた中で、個人的にオシャレだと感じたものをSTUDIOで作成してみました。
これらのUIボタンを実際に触ってみたい人はこちら。
※1.上記のURLのページでは、どのボタンを押しても、別の画面へ遷移しないようにしています。
※2.上記のURLのページでは、レスポンシブを設定はしていないので、スマホの画面で見ると、上の動画とは少し違った見え方になるかもしれません。
【宣伝】ココナラで出品中のサービス紹介
私はココナラで、STUDIOを使ったウェブデザインから実装までを手掛けるフリーランスとして活動しています。STUDIOでのデザインが難しい場合や、もっと専門的なサポートが必要な場合は、ぜひ私のサービス「STUDIOを使ったWEBサイト制作」をご利用ください。
STUDIOでオリジナルWEBサイト作成します 修正制限無し！デザイン/画像/文章丸投げOK!【２名様限定】自分自身を表す手段の一つとして個人が所有するポートフォリオや、自社のWEBサイトをできるだけ安く品質の良いものを作りたいと思っている方、一緒に素敵なWEBサイトを作成しましょう！
以前作成したWEBサイトの参考例です。
①https://simple-template1.studio.site
②https://simple-template2.studio.site
まとめ
STUDIOを使って、簡単に美しいUIボタンを作成する方法を解説しました。次回は更に別のデザイン要素に焦点を当てて解説していきますので、お楽しみに。また、より専門的なサポートが必要な場合は、ココナラからぜひ「WEBサイト作成サービス」をご検討ください。
コメント