サイトをPOSAカードと商品棚のデザインにしました

個人サイトを更新し、ヒーローはPOSAカード風、制作したアプリの一覧は商品棚風のデザインにしました。

アプリのアイコンと説明だけでも何をつくったかは伝わりますが、今回は画面の中にあるアプリを手に取れそうな商品として見せたいと考えました。

アプリをPOSAカードに

ヒーローのモチーフはコンビニなどで見かけるPOSAカードの売り場で、格子のラックにフックを付けてカードを掛けています。

アイコンをパッケージの顔に見立て、台紙に名前やカテゴリ、吊るすための穴やバーコードを加えることで、リンクにも物としての存在感を持たせています。

穴を開けた台紙、金属のフック、透明な縁、厚みのあるアイコンを3Dで組み合わせ、正面からでも反射や影で立体感がわかるようにしました。

ラックは下端を支点に起き上がり、その途中からカードが横から入って、最後に吊り下げた部分を中心に少し揺れて落ち着きます。

この揺れを加えることでフックに掛かった感じを出し、見た目のモチーフと動きが合うようにしています。

制作実績を商品棚に

アプリの一覧も売り場の続きとして考え、Wannapp、ぷくぺた、Beatypeを台紙と透明なケースに入れた商品として並べました。

パッケージにはアイコンと実際の画面を入れ、下には名前や行き先を書いた棚札を置いています。

ここでもケースの縁や光の反射、棚との接地感を大事にして、形を持たないアプリを、自分がつくった商品として展示できるようにしました。

商品は奥で少し小さく傾いた状態から手前の定位置へ出てきますが、スマホでは縦に並ぶため、それぞれが画面に入ったタイミングで登場するようにしています。

下のアプリまで見えないところで演出が終わってしまわないよう、登場するタイミングもアプリごとに分けました。

重たいUIは、動きで遅さをごまかす

こうしたUIには表示の重さもあり、画像の読み込みに加えて、3Dの立体や素材を準備する時間も必要になります。

最初は2Dの仮置きを先に見せ、準備ができたら3Dへ切り替える形にしましたが、あとから別の見た目に変わることで、表示の都合が見えてしまう感じがありました。

そこで最初に見えるものから3Dにして、準備が整ってからラックが起き上がり、カードが入ってくる流れに変えました。

商品棚のアプリも同じように、3Dの準備ができてから奥から登場するようにしています。

突然ぱっと表示されると「遅れて出てきた」と感じますが、登場する動きがあると「今ここに来た」という流れとして受け取れます。

重たいUIの遅さを、動きで少しごまかすような感覚で、表示されるまでの流れもデザインしています。

演出は3Dを描ける状態になってから始まるので、レンダリング時間を短くする工夫とは分けて、表示される瞬間を自然にする工夫として考えています。

軽量化も合わせて

動きがある前提でも待ち時間は短いほうがいいので、アイコンとアプリの画面画像6枚をWebPにして、合計約2.47MBから約224KBに軽量化しました。

また、棚に近づいた段階で3Dの準備を始めて画面に入るまでの時間を使い、登場やホバーの動きが収まったあとは毎フレーム描き続けないようにしています。

モーションを減らす設定ではラックやアプリを最初から定位置に表示し、動きを抑えています。

軽量化で実際の負担を減らし、そのうえで動きによって表示の遅さをなじませるという、両方の工夫を取り入れました。

ブログの記事一覧もチケット風にして、クリックすると半券がちぎれて本文へ進むようにしています。

商品を手に取ったり、チケットを使って中に入ったりするように、見た目だけでなく触ったときの動きもつながるサイトを目指しました。