Hanaでインタラクティブなキーボードをつくる

レッスン 10 / 15Hana初級9分

こんにちは!👋

このチュートリアルでは、100%Hanaでつくるインタラクティブなキーボードのつくり方を学びます。影を加えてデザインに奥行きを出す方法や、キーイベントを適用して実際のキーボードでシーンを操作する方法を解説します。このデザインはとても柔軟で、さまざまな用途に使えます。さっそくはじめましょう!

このデモをリミックス:https://app.spline.design/ui/56d99098-8346-4abe-9e0a-674fdd6dcb0c

学べること

  1. 0:00イントロ
  2. 0:22ベースのフレームを追加する
  3. 0:34キーボードのベースをつくる
  4. 1:14キーボードのベースに影を追加する
  5. 1:37文字キーと数字キーをつくる
  6. 3:31Enterキーをつくる
  7. 3:45数字と文字にドロップシャドウを追加する
  8. 4:07キー押下イベントを追加する
  9. 6:57画面のインタラクションをつくる
  10. 8:50完成したデザイン
  11. 9:04エンディング

関連リソース