今回はphotoshopを使い５分でローディングGIFを作成する。ローディングGIFとは画像の読込時間での離脱を防ぐ。UXを研究しつくした先人の知恵である。グルグル回る画像を見るだけで数秒の時を忘れることができる。
今回はあえて読込時間をイライラさせるローディングGIFを作成する。時代逆行の革新的なUXである。挑戦的なその試みは新たな芸術を確立する人間の営みのそれと何ら変わりはないのである。時代が早すぎてついていけない挑戦的なその試みは死んでから認められる芸術家さながらである。近代芸術家に入るゴッホはきっと、評価されようがされまいが関係なかったのである。「芸術家」は自分が描きたいから、自分のために描く。貴族や教会に評価されることが至高ではない。高尚で利己的な精神がそこにある。他人の評価は副産物でしかない。そんな深い意味がこのGIFにあったかは定かではない。
【使用した素材】
以前、ぜんぶ雪のせいだ。Photoshopで10分、簡単GIFアニメの作り方【位置&透明度テクニック】こちらの記事で使用したバカ猫を用いる。
これでもかとイライラさせる表情である。
【作成手順】
１．「ファイル」「新規作成」でキャンパスサイズを2000px * 2000pxで作成した。そう、サイズがでかいのである。読込時間をあえてたっぷりとる。それがイライラの源泉である。
２．キャンバスにバカ猫をドロップする。むき出しの白目。すでにイラっとしたのではなかろうか。
３．レイヤーをコピーした。２匹のバカ猫が見つめるその先は……白目だから見つめてはいないのである。
４．下側のバカ猫を「編集」「変形」「１８０°回転」で回転させる。そう、仮に逆立ちをして閲覧するユーザーのため、きちんと逆さまにも対応するのである。素晴らしきUXである。
５．２つのレイヤーを結合する。そう、バカ猫２匹を融合するのである。
６．結合完了である。
７．バカ猫×２レイヤーを３回コピーする。
８．移動ツール(v)でレイヤーの角をつかんで回転させる。さながら分身の術である。伊賀の忍者気取りだ。
９．コピーしたレイヤーを全て回転させて、８方向全てにバカ猫を配置した。どこから来ても安心のイライラ度である。
１０．背景を削除した。この作業は単純に忘れていただけである。
１１．全てのバカ猫レイヤーを結合する。魔法陣の完成である。
１２．「レイヤー効果」をクリックする。
１３．「グラデーションオーバーレイ」「グラデーション」をクリックする。バカ猫が見えなくなるひとときである。
１４．「描画色から透明に」をクリックする。８匹のバカ猫が見え隠れする絶妙な演出である。
１５．黒よりも白である。
１６．このバカ猫魔法陣レイヤーを７回コピーする。
１７．全てのレイヤーのグラデーションの角度を変更する。レイヤーごとに４５°ずつ角度を変えることで、全てのバカ猫に平等に閲覧者をイライラさせるのである。「０°、４５°、９０°、１３５°、１８０°、２２５°、２７０°、３１５°、３６０°」
１８．「ウィンドウ」「アニメーション」でアニメーションウィンドウを表示させる。
１９．一番下のレイヤーだけを残してそれ以外を「非表示」にする。目玉のボタンをクリックすればいい。
２０．アニメーションウィンドウでフレームをコピーする。
２１．今度は２番めのレイヤーを「表示」させ、１番目のレイヤーを「非表示」にする。
２２．それを７回繰り返す。そう７回である。
２３．これで平等にチャンスがやってくる。むき出しの白目は乾燥しっぱなしである。
２４．完成。
いかがだったろうか？今回はあえて読込時間をイライラさせるローディングGIFを作成した。読者の皆様も独自のローディングGIFの作成に勤しんでみてはいかがだろうか。さらなるイライラに今後も挑戦をしていく。ご期待を。
