カテゴリー
お知らせ コンテンツ システム 製品

【開発ストーリー】亀甲マークができるまで ― 小さくしても伝わる hsBox 1.4.1 のアイコン

紹介動画の最後に登場した亀甲マーク。hsBox 1.4.1 で新しくしたアイコンができるまでの考え方をご紹介します。

Loading

10月14日の記事でご紹介した、hsBox 1.4.1 紹介動画。その最後に登場したのが、この亀甲マークです。1.4.1 で新しくした hsBox のアイコンで、USB メモリをパソコンに挿したときのドライブの表示に使われます。この記事では、亀甲マークができるまでの考え方をご紹介します。

hsBox 1.4.1 の亀甲マーク。六角形の枠の中に、斜め上から見た立方体の箱が収まっている
亀甲マーク(六角形の枠・中央の箱・3つの面)

1.4.0 のアイコンで困っていたこと

hsBox のアイコンは、USB メモリのドライブの表示に使われます。エクスプローラーの一覧や「PC」のドライブの並びでは、アイコンはとても小さく表示されます。

ところが、1.4.0 のアイコンには、大きな絵が1枚入っているだけでした。そのため、小さく表示するときは Windows が自動で縮小します。その結果、いちばん人目に触れる場所で、何が描いてあるのか分かりにくくなっていました。

仕組みの図から、意味の形へ

1.4.1 の大きなテーマは、2台の hsBox で障害に備えるフェイルオーバークラスタです。そこで最初は、その仕組みを形にしようと考えました。たとえば、2つの箱が支え合う図です。しかし、アイコンを見る人が受け取りたいのは、内部の仕組みではありません。「長く、確かに動き続ける」という安心感のほうです。そう考え直して、仕組みの図から意味の形へと方向を切り替えました。

なぜ亀甲なのか

亀甲は、亀の甲羅を表す日本の伝統文様です。昔から、長寿と守りを表す吉祥文様として親しまれてきました。つまり、hsBox 1.4.1 が目指した「長く動き続けること」と「しっかり守ること」を、そのまま形にできます。

また、亀甲は正六角形です。形が単純なので、小さく表示しても崩れにくいという利点もあります。

中央には hsBox の「箱」

枠の中には、立方体を斜め上から見た形を置きました。hsBox の「箱」です。実は、この立方体の輪郭も正六角形になります。そのため、外の亀甲と中の箱が同じ形で入れ子になり、マーク全体がひとつの図形として読めます。

箱の3つの面は、明るさを少しずつ変えて立体に見せています。ただし、差を付けすぎると、六角形が割れているように見えてしまいます。そこで、明るさの差はわざと控えめにしました。

小さくしても、にじませない

小さいサイズの亀甲マークを拡大した図。1画素ずつ描かれていて、輪郭に中間の色がない
小さいサイズのアイコンを拡大したところ(下は実際の大きさ)

大きな絵を縮小すると、輪郭に中間の色が混ざり、ぼやけて見えます。そこで、小さく表示するためのアイコンは、縮小せずに、その大きさで1画素ずつ描きました。

アイコンのファイルには、大きさごとに別の絵を入れられます。1.4.1 では、大きさごとに描いた絵をまとめて収めました。したがって、エクスプローラーで小さく表示しても、亀甲と箱の形がはっきり見えます。

紹介動画の締めくくりにも

紹介動画「hsBox 1.4.1 — Reliability Update」の最後では、海を泳ぐ亀が、この亀甲マークに変わります。その場面は、紹介動画の 1:05 からご覧いただけます。動画のほかの場面は、「紹介動画の見どころ」で解説しております。

なお、hsBox 1.4.1 は期間限定で無料ダウンロードいただけます。登録や申し込みは必要ありません。入手方法は「hsBox 1.4.1 無料ダウンロード」のお知らせをご覧ください。


亀甲マークへのご感想も、ぜひお寄せください。コラボレーション・お問い合わせフォームより受け付けております。

関連記事

Loading

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です