yawning-proの画面作成

## ほしい機能の概要
こんな感じのやーつ
![image](https://user-images.githubusercontent.com/49768768/156930335-2d2af926-2da6-408e-9780-e69e5571ca1c.png)

## 機能追加の理由


## 想定される実装方法


## 参考URL/資料
