HiÐΞClassic

ユーザーやトピックのアイコンは100x100で作ると荒れない!

好永アカネ
2 years ago
検証したきっかけ50x50の画像を設定してみた100x100の画像を設定してみた

どうも、前にトピックのカバー画像の推奨サイズを調べたことがある アカネです(・ω・)ノ
(以下、サイズの単位は全てピクセルのため省略しています)

今回はアイコンです。

ここHiÐΞのユーザーやトピックのアイコンは、大きくて 100x100、小さい時は 40x40 や 50x50 のサイズで表示されます。
小さく表示されるときに使われるのは、オリジナルを 50x50 以内に縮小した画像なので、あまり大きい画像を使用すると潰れちゃってちょっと悲しいことになります。

なので、アイコンに使用する画像は 100x100 がおすすめです。
ユーザーやトピックの一覧画面・コメント欄・投稿時のトピック選択欄での見栄えを優先するなら、小さければ小さい方が良いです。

検証の流れが気になる方は続きをどうぞ!
  ↓↓↓


検証したきっかけ

そもそも私が「アイコンの推奨サイズちゃんと知りたいな(´・ω・`)」と思ったのは、自分で立てたトピック用に一時凌ぎに設定したアイコンが残念なことになってたためです。

上はトピック一覧のキャプチャです。
「NOW PRINTING」って書いてあるんですけど……拡大してやっと読めるかなってかんじでしょ?

たしかオリジナルサイズは 400x400 だったと思うのですが、アイコンが表示される時はたいてい 50x50 以下に縮小した画像が使われるため、元の画像が大きかったり50の倍数ではなかった場合、見栄えがしなくなってしまうのです。


(50x50に縮小された画像が40x40で表示されてるのがわかる図)

なお、トピックのホームやユーザーのホーム(呼び方これで合ってるかな?)でのアイコンは、表示サイズ 100x100 で 256程度では画像縮小がされないことを確認しました。

目にする機会が多いのは 50x50 に縮小された画像だとすでにわかっていますので、「100x100で表示するための画像も、元がでかければ縮小されるんじゃないか?」というのは検証しませんでした。
「どれくらい大きくできるか」を調べてもあんまり意味ないかなぁと思ったので🤔

50x50の画像を設定してみた

もともと50以内なら縮小されても荒れない or 縮小されないから荒れないのでは?」と仮説を立てて、実際に試してみることにしました。

とはいえそんな小さい画像、普通のイラストではありえないし手元で縮小した時点でぼやけちゃうので、昔描いたドット絵を引っ張り出すことに。

短期間ですがALISのロゴとして公式に使われてたこともある、思い出深いイラストです👍
これの一部(億ラビ陛下のとこ)を切り取って検証に使用しました。

↓こんなかんじになりました。

小さいところではかなり原型を保てていますが、大きく表示される時は引き伸ばされちゃってイマイチですね。

100x100の画像を設定してみた

大きく表示される時を基準にしたらどうなるのかやってみました。
画像は、先ほど使ったドット絵を200%表示した状態でキャプチャを撮って作成しました。

(背面白くしとくの忘れてた。。。)

かなりいいかんじじゃないですか?

HiÐΞで使うアイコンサイズの最適解は 100x100 なんじゃないかと思いました。
使いたい画像が高解像度でそんなに小さくできない場合は、200x200 とか 400x400 にすれば多少はマシになると思います。

もし、自分のユーザーアイコンやトピックのアイコンが荒れてて気になっている方いらっしゃいましたら、100x100で作り直してみてください。
このように↓ ちょっとキレイにできますよ!

閲覧ありがとうございました!

アカネのいろいろ

イラストのリクエスト受け付けます。

アカネが投稿した記事に 1,000JPYC以上を投げ銭してくださった方、コメントでリクエストいただければなんか頑張って描きます👍 (金額に応じて、らくがきレベルから徐々にアカネの本気度が上がっていきます)

(→過去にリクエストいただいて描いたイラストはこちら

注意事項
  • スケブだと思ってご利用いただけると幸いです
  • 出来上がったら個人利用の範疇でご使用ください
  • 過激なやつは描きません
  • 複数記事の投げ銭額を合算するのは大変なので1つの記事に1,000以上とさせてください
  • リクエスト受付中かどうかは、アカネの最新の記事で確認してください
  • この注意事項は、なんか思い出した時に適宜調整します

お気軽にどうぞ(・ω・)ノ


コメント
いいね
投げ銭
最新順
人気順
好永アカネ
2 years ago
コメント
いいね
投げ銭
最新順
人気順
トピック
アプリ

Astar Network

DFINITY / ICP

NFT

DAO

DeFi

L2

メタバース

BCG

仮想通貨 / クリプト

ブロックチェーン別

プロジェクト

目次
Tweet
ログイン