このセクションの記事一覧はこちら

【vol.5】少しの工夫でぐっと良くなる!ボタンの実装例をご紹介します!

ボタンのデザインが物足りない…と感じたことはありませんか? ヤプリデザイナーもよく使うワンランク上の実装例をご紹介します!
top.png

 

home_03.png

 

home_06.png

 

 

【第5回 ボタンデザイン編】

 

おがちゃん:こんにちは、ヤプリデザイナーチームです!第5回目はワンランク上のボタンデザインの設定方法についてお伝えします!

 

ザッキー:デザイナーでもボタンデザインに悩むことがあります…!

 

おがちゃん:少しの工夫でアプリがぐっと良くなるポイントでもあるので、こだわりたいですよね。今回はヤプリデザイナーチームが実際によく使う設定方法を2つご紹介します!

 

 

 

home_08.png

 

 

おがちゃん:1つ目は右端にアイコン画像を設定したデザインです。

 

ザッキー:私もよくやります!詳細設定の「その他アクセサリ」「画像」「アクセサリカラー」を設定するだけで、とても簡単に実装できますよね。実際にやってみます!

 

 

home_10.png

 

 

ザッキー:本当に簡単に設定できました!

 

おがちゃん:リンク設定を行わないとアイコン画像が表示されないので、注意してくださいね!

 

 

 

home_12.png

 

 

おがちゃん:2つ目は背景に画像を敷き、その上にテキストを表示させたデザインです。

 

ザッキー:画像を入稿するだけで雰囲気がガラッと変わるので、こちらもお試しいただきたいです!

 

 

home_14.png

 

 

ザッキー:何故パディングの上下の数値を設定するんでしょうか?

 

おがちゃん:テキストを入力すると、入稿した画像の高さではなくテキストの高さで画像の表示領域(高さ)が決まるためです。

 


home_16.png

 

ザッキー:なるほど!画像の上にテキストを表示させたいときは、パディングの上下の数値を調整する必要があるんですね!

 

おがちゃん:ほかにも工夫次第で様々なデザインのボタンが実装できます!みなさまもぜひお試しください!

※ご不明点は担当のカスタマーサクセスにお問い合わせください。

  

それでは次回の更新をお楽しみに!!!!

不明点はございますか? お気軽にお問い合わせください >

不明点はございますか? お気軽にお問い合わせください >