appgameui https://blog.hatena.ne.jp/appgameui/ ゲームアプリのUIデザイン https://appgameui.hatenablog.com/ 010_タイトル一覧 010_タイトル一覧-永遠の7日 終わりなき始まり 018_UIパーツ 018_UIパーツ-HPゲージ こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」、通称「とわなな」のゲージのデザインが見やすくなるための工夫が取り入れられていたので紹介します。ゲージの見せ方をデザインする際の参考になればと思います。 該当のゲージデザインはこちらです。 味方が水色、敵が赤のHPゲージのデザインになっています。見やすく工夫されている点は、HPの残量部分と下地の間に白い光の筋のようなエフェクトがある点です。 アニメーションで見るとこのような感じです… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fappgameui.hatenablog.com%2Fentry%2F2021%2F10%2F05%2F002524" title="「永遠の7日-終わりなき始まり」ゲージの境界線に白い筋を表示して視線誘導をし、情報量の多い画面でも見やすくしていた - ゲームアプリのUIデザイン" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/a/appgameui/20211003/20211003131156.png Hatena Blog https://hatena.blog 2021-10-04 00:25:24 rich https://appgameui.hatenablog.com/entry/2021/10/05/002524 1.0 100%