制服おみくじ(制服一覧&作り方解説)

30種類の制服がGIFアニメで流れ、タップで止める【制服おみくじ(スロット?)】を作りました!
ハロウィンのコスプレに!制服イラストのアイデア出しにどうぞ〜

▼こちらのTwitterからどうぞ

遊び方

Twitterって、GIFアニメ画像をクリックすると一時停止するんですよ。
その仕様を応用して、一時停止でおみくじやスロットのような遊びができるという仕組みです。

\つまり一時停止するだけ!/

全30種!職業一覧

長いので10個区切りで表示します。

  • セーラー服
  • 学ラン
  • ブレザー
  • 幼稚園
  • 自衛官
  • カフェ店員
  • ウェイトレス
  • コック
  • 医者
  • 看護師
  • メイド
  • OL
  • スーツ
  • 警察官
  • 消防士
  • パイロット
  • 宇宙飛行士
  • 住職・神主
  • 車掌・駅員
  • 裁判官
  • バーテンダー
  • 客室乗務員
  • 大工・作業服
  • バニーガール
  • アイドル
  • 配達員
  • スポーツ選手
  • 学生服(大正)
  • 巫女
  • チアガール

【制服おみくじ】の作り方

流れとしては、
動くイラスト(GIFアニメ)の作り方→動かす速さを決める→画像作成→ループする回数を決める→書き出し!完成!という感じです。

Step1:GIFアニメとは?

【GIFアニメ】とは、動きのあるイラストを繋いで動画にするパラパラ漫画のようなものです。

(4枚だけでも結構いい動きするよ!)

Step2:動かす速さを決める

1秒間に表示させるイラストの枚数を決めます。

この画像には alt 属性が指定されておらず、ファイル名は dammy_anime4_120.gif です
枚数が少ないとゆっくり動くし
この画像には alt 属性が指定されておらず、ファイル名は dammy_anime4_60.gif です
多いと早く動きます

今回は1秒間に10枚のイラストを表示させます。
(1秒/8枚にしたら、ゆっくりすぎてスロットに向かなかったので)

Step3:画像作成

10枚で1セットの動画を描きます。

これで1秒/10枚の動きです

【1】[ウィンドウ]→[タイムライン]で画面下に動画パネルを表示させます。

【2】10枚分の画像を作成し、一枚の画像表示時間を「0.1」とします。

もちもち動く1秒/10枚動画ができました。

【3】文字を入れます。今回は30種類の制服を表示させるので、【2】のセットを×3で30枚に増やしました。

【4】書き出したら完成です。

10枚の画像を作成し、ネット上の作成ツールにアップする方法です。

オススメは「GifMaker.me」という動画変換サイト!
無料で画像をGIF動画に変換してくれます。
ブラウザを起動して、動画変換サイトにアクセスします。

【1】画像をアップロード

【2】画像サイズ指定
【3】アニメーションスピード指定

もちもち動く1秒/10枚動画ができました。

【4】この方法で、文字を入れた画像を30枚作成して動画を作成します。

と言うわけで、画像が完成しました。

Step4:ループする回数を決める

今回はTwitterに画像を載せるので、ループ回数を指定します。
6回くらいあれば十分ではないかと…

と言うわけで、Photoshopの場合こんな感じで
タイムラインの回数が書いてあるところをクリック!

「その他」→回数を指定→「OK」で指定完了です。

これで画像を書き出して、Twitterに投稿すれば完了です。

作った感想

毎年開催のオタク川柳大賞と言うのがあるんですが、そのキャラ部門の今年のテーマが【制服(ユニフォーム)】だったので、せっかくならアイデア出しに使えそうなものを作ろう!と思ったのがきっかけです。

制服って色々あるんですね。

あとTwitterのおみくじを初めて作ったのですが、これってループ回数を指定する必要ってあるんでしょうか?詳しい方いたら連絡いただけると嬉しいです。

最後に。
文字を素早く表示させる為に猫が素早い動きになってしまったので、ゆっくりバージョンも置いておきます。もちもち…

以上、作るの楽しかったです!おわり。

コメントを残す

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