プレースホルダを用いたローディングUI

ローディングのUIって、なーんかおざなりになりがちよね。

だいたいクルクル回る系のローディングインジケータを使うと思うけど、他にもいろいろ方法はあるんやでぇ。

マテリアルデザインを見ればまぁだいたい参考にはなるはず。

で、今回僕が紹介したいのは、プレースホルダを用いたローディングUI。

知ってる人は知ってるけど、知らない人もまぁそれなりにいそうなのでこの記事が役に立ったらいいな、と思っているのだよ。

ざーっとこんな感じ。

Instagram

単純に画像のローディングがグレーなやーつ。1番無難な対応。

Twitter

Pinterestとかも使ってる、画像の平均色を抽出してローディング時に表示させるやーつ。グレー一色でやるより、視覚的な演出としてよさそう。

Google

アニメーションが綺麗ですね。

画像だけじゃなく文字のプレースホルダも表現してるのでこのページの内容が想像できてよい。

Facebook

プロフィール画像は、初期設定っぽいプレースホルダを使用していて、Facebookっぽさが出てる。

YouTube

Googleアプリとほぼ同じ。プレースホルダの四角形に角丸をつけてるのがGoogleのアプリでありがち。

Jira

Atlassianのサービスは、最近ブランドデザインを刷新して、とても洗練された感じ。

プレースホルダは大きい角丸を使い、グラデーションのアニメーションの色幅も大きくて、他アプリと比べるとけっこう主張が激しい。

というような。

なんでこんな流行ってんのかっていうと、それはローディングを表現しながら、そのページを想像させることができるからだと思います。

iOSもAndroidも、起動時のローンチスクリーンでファーストビューのプレースホルダ画像を使うことがよく推奨されてることもあって、それを起動時だけじゃなくて各モジュールに使うことのイケてる感に気づいた人が何年か前にいたんでしょうな。

AbemaTVアプリでもコレやりたい箇所があるので、いずれ。