どうもこんばんは、ついさきほど大福との戦いに勝利したさいほうへいきです。
前回の記事では、Heiki’s Boardに使用されるバッジシステムについてざっと解説をさせていただきました。
今回は、スマートフォンのブラウザからHeiki’s Boardを訪れた時に、UIが見づらいという問題を解決するアップデートを行いました！
この更新で、スマートフォンからでも非常に見やすくなったと思いますよ。
更新内容
内容はあるよう（面白くない）
まず、こちらの画面を見ていただきたいのですが、画面上部にはヘッダー（アドレス入力欄やバナー広告、リンクなど）がありますよね。
実はこれまでだと、スマートフォン表示ではさまざまな問題が発生していました。たとえば……
- Heiki’s Boardロゴ横の説明文が長すぎて、数行をガバッと埋めてしまっていた
- アドレス入力バーのサイズがおかしく、登録ボタンを押すために横にスクロールする必要があった
- バナー広告の上下に謎の空白があり、掲示板に登録された動画が一目では見れなかった
という風に、かなりビジュアル面で問題が起きていました。
もともとはPCで製作してPCで利用していたので、スマホからの使用は後手後手に回ってしまっていた感じです。
しかし、友人にして気をもらって、実際にスマホから見て個人的にも見づらいなと感じたので改善。思い立ったが吉日！
上記の問題点は、それぞれ次のように解決しました！
- スマホからだと、長い説明文をすべてカット！
- アドレス入力バーのサイズを画面サイズに会わせて調節！
- バナー広告上下の空白を取り除きスッキリした見た目に！
なお、これらの改善はスマホ表示をターゲットにしたものなので、パソコンから見てみると今までと変化はありません。
今後の予定
基本的にHeiki’s Boardのメンテナンスは必要が出たら対処する、という感じなので、現状のTODOはありません。
現在進行形で長期的に進めているものは、バッジと特典の整備でしょうか。
空き時間を見つけたら、ピクセルアートをたまに描いて登録していこうと思います。
ちなみに、そこそこ関連記事が増えてきたので『Heiki’s Board』タグを新設して記事をまとめました。
これまでの更新や解説などが一気に見れますので、ぜひご覧ください。
まとめ
というわけで、今回は『スマホ表示のHeiki’s Boardの画面デザインを大きく修正したよ』という記事でした！
Heiki’s Boardを使ってみたい方は、ぜひこちらからどうぞ！
また、以前に投稿した簡単な説明記事はこちらから！
では、今回はこのへんで。
さいほうへいきでした！
またね～。
コメント