【番外編】LINEアニメスタンプをAnimateを使って作る

f:id:AdobeAnimateFunya:20160302165254p:plain
クラゲふにゃ!AnimateでLINEアニメスタンプが作れるって本当ふにゃ!?
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…その通りだよ。 なんせアプリケーション名が「Animate」ってくらいだからね。
f:id:AdobeAnimateFunya:20160617155753p:plain:w300
前のコマを半透明に表示させて確認しながら描けたり、 アニメ作りに特化した機能がそろってるよ。
f:id:AdobeAnimateFunya:20160302184715p:plain
ふにゃもアニメスタンプを作って販売してみたいふにゃ〜! Animateを使った作り方を教えて欲しいにょ♪
f:id:AdobeAnimateFunya:20160302165304p:plain
やる気まんまんなのはいいけど作る前に ちゃんとアニメスタンプの仕様をよく確認するんだよ。 ふにゃクンはおっちょこちょいだから…

----------------------------------------------------------------------------------------

やってみよう!

歩くカメールクンだよ。 1秒4コマのアニメをループさせているよ。

1.アニメを描く準備

f:id:AdobeAnimateFunya:20160617152121p:plain

LINEアニメスタンプの仕様に沿ってステージサイズをW320xH270、フレームレート20fpsに設定しよう。

f:id:AdobeAnimateFunya:20160617152702p:plain 【選択ツール】でタイムラインの20フレーム目を選択した状態で【挿入/タイムライン/フレーム】を選択しよう。 するとタイムラインが20フレーム目まで追加されるよ。 20fps(1秒あたり20フレーム)だからこれが1秒分のタイムラインになるよ。

今回は4コマのアニメだから20フレームを4等分するよ。 6,11,16フレーム目を選択し、それぞれ【修正/タイムライン/キーフレームに変換】しよう。 f:id:AdobeAnimateFunya:20160617153151p:plain 【キーフレーム】に変換されたフレームには○がついているよ。

f:id:AdobeAnimateFunya:20160617153724p:plain この4等分したそれぞれのフレームがアニメの1コマになるよ。 ここでは「コマ」というよ。

2.下書きを描こう

f:id:AdobeAnimateFunya:20160617170942p:plain まずは下書きから描いていこう。 ツールバーから【ペンツール】を選択しよう。 下書きだから色は水色のような淡い色、線幅は1ptに設定すると描きやすいよ。

f:id:AdobeAnimateFunya:20160617155247p:plain 2コマ目のフレームを選択し、【オニオンスキン】ボタンをオンにして【オニオンスキンマーカー】を表示させよう。 すると1コマ目に描いたイラストが半透明で表示されるよ。それを元に2コマ目を描こう。 f:id:AdobeAnimateFunya:20160617155753p:plain

これを繰り返して3,4コマ目も描いていこう。

4コマ目まで描けたらアニメさせて動きを確認するよ。 f:id:AdobeAnimateFunya:20160617155819p:plain 【制御/再生】を選択するとアニメが再生されて動きが確認できるよ。 【ループ再生】にチェックを入れればループするようになるよ。

3.アニメを描こう

いよいよ清書だよ。 タイムラインの下書きレイヤーの上に新規のレイヤーを作成しよう。 下書きレイヤーと同じように20フレームにキーフレームを作って4つのコマにするよ。 f:id:AdobeAnimateFunya:20160617161519p:plain 下書きレイヤーはいじってしまわないようにロックしておこう。

f:id:AdobeAnimateFunya:20160617161701p:plain 【ペンツール】【ブラシツール】などを使って描いていこう。 Animateの詳しいペイント機能はココでは割愛するよ。

4.アニメを連番のpngファイルとして書き出そう

f:id:AdobeAnimateFunya:20160617161923p:plain 【ファイル/書き出し/ムービーの書き出し】を選択。 下書きレイヤーは非表示にしないと一緒に書き出されてしまうから注意してね。

f:id:AdobeAnimateFunya:20160617162134p:plain ファイル形式は【pngシーケンス】を選択。

f:id:AdobeAnimateFunya:20160617162415p:plain 範囲は【ムービーサイズ】を選択して書き出しボタンをクリックしよう。

f:id:AdobeAnimateFunya:20160617162601p:plain 連番のpngファイルが書き出されるよ。

このままではLINEアニメスタンプの形式になっていないから 『アニメ画像に変換する君』 ics.media

というツールを使うよ。 ここではツールについてざっくり説明するけど 詳細はサイトで確認してもらえると助かるよ。

5.APNGファイルを書き出そう

f:id:AdobeAnimateFunya:20160617162705p:plain 『アニメ画像に変換する君』をDLして起動するとこんな画面が表示されるよ。

f:id:AdobeAnimateFunya:20160617163740p:plain Animateで書き出した連番のpngファイルを読み込み、 設定はfps20,ループ回数4でアニメ画像を保存するをクリックして書き出そう。 書き出されたAPNGの見た目はpngと同じだよ。

FireFoxブラウザ(今のところこれ以外は再生できないよ)でAPNGを再生させるとアニメするよ。

LINEのシミュレーターでも動くよ。

----------------------------------------------------------------------------------------

f:id:AdobeAnimateFunya:20160302165254p:plain
パラパラまんがを描く感じで作れるふにゃね〜! イイ感じふにゃ〜!!
f:id:AdobeAnimateFunya:20160302165304p:plain
さあ残り23コのアニメもがんばっておくれよ…フフフフ…
f:id:AdobeAnimateFunya:20160307165023j:plain
!!
f:id:AdobeAnimateFunya:20160302165304p:plain
仕様はちゃんと読んでくれたよね? 1スタンプ24コのアニメが必要なんだよ…フフフフ…
f:id:AdobeAnimateFunya:20160302182108p:plain
フ…ファイトふにゃ〜〜〜〜〜〜…!

うごくLINEスタンプ販売中画像 第1弾「ふにゃもらけ」 / 第2弾「ふにゃもらけと仲間たち

3.基本のトゥイーンアニメ(移動アニメ)

f:id:AdobeAnimateFunya:20160302184715p:plain
いよいよAnimateを使ってアニメーションにゃね!! Animateって絵を自動で動かしてくれるって聞いたふにゃよ! すごいふにゃ〜!ふにゃでもカンタンに作れそうな気がするにゃ♪
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…Animateの自動で絵をアニメさせてくれる機能 [トゥイーン]を使えばカンタンにできるよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
さっそく[トゥイーン]を使って描いた絵をアニメさせるふにゃ〜!
f:id:AdobeAnimateFunya:20160302165304p:plain
そのためには絵をシンボルに変換して、フレームを増やして、 [キーフレーム]を挿入して、[トゥイーン]を作成して、 配置したシンボルの位置や大きさなどを変形させるよ。
f:id:AdobeAnimateFunya:20160302182108p:plain
にゃにゃ!?!?!?!?
f:id:AdobeAnimateFunya:20160302165304p:plain
[トゥイーン]させるためには色々設定しないといけないんだ。 ふにゃクンにはちょっと複雑かもしれないから 下のやり方に倣ってやってみるといいよ。

----------------------------------------------------------------------------------------

やってみよう!

ステージに描いたイラストが右から左へ移動するアニメを作るよ

1.ステージに絵を配置しよう

f:id:AdobeAnimateFunya:20160525231756p:plain

2.シンボルに変換しよう

f:id:AdobeAnimateFunya:20160525232056p:plain ①【選択ツール】で描いたイラストを選択

②[修正/シンボルに変換]を選択

f:id:AdobeAnimateFunya:20160525233006p:plain でてきたダイアログに名前をつけて、タイプを[ムービークリップ]にして、 基準点は真ん中を設定してOKをクリックしよう。

f:id:AdobeAnimateFunya:20160526202100p:plain 真ん中に○が現れればシンボル化されてるよ。

3.タイムラインにフレームを挿入

f:id:AdobeAnimateFunya:20160525233425p:plain

①タイムラインの30フレーム目をクリックして選択した状態にする。 ②[挿入/タイムライン/フレーム]を選択しよう。 ([右クリック/フレームから挿入]でもできるよ。) f:id:AdobeAnimateFunya:20160525234109p:plain 30フレームまでコマが増えたよ。
f:id:AdobeAnimateFunya:20160302165304p:plain
これだけじゃまだアニメはしないけど トゥイーンアニメーションの下準備が完了だよ。
4.キーフレームを挿入しよう

f:id:AdobeAnimateFunya:20160526115900p:plain

①30フレーム目をクリックし選択する。 ②[挿入/キーフレームの挿入]を選択 30フレーム目にキーフレームが出来る。
5.イラストを移動させよう

f:id:AdobeAnimateFunya:20160526120134p:plain [選択ツール]で30フレーム目のイラストを左へ移動させる。

6.トゥイーンを設定しよう

f:id:AdobeAnimateFunya:20160527111550p:plain

タイムラインの1~29フレーム上の適当な場所をクリックして選択し [挿入/クラシックトゥイーン](または右クリック/クラシックトゥイーン)を選択する f:id:AdobeAnimateFunya:20160526145123p:plain フレームの色が紫色に変わって矢印が現れたら[トゥイーン]が設定できた状態だよ。 タイムラインの1フレーム目を選択して[制御/再生]を選択するとアニメーションが確認できるよ。 f:id:AdobeAnimateFunya:20160526152719p:plain 30フレーム目を移動しても、ちゃんとその間のアニメーションも移動するよ。 1フレーム目をステージの外に出してみたり、イラストの位置を変えて動かしてみよう。
7.タイムラインを調節してみよう
イラストの位置を変えるとトゥイーンアニメの速度も変わるよ。 イメージより早かったり遅かったりする時はタイムラインの長さを調節しよう。 f:id:AdobeAnimateFunya:20160526161114p:plain トゥイーン部分の1フレームを選択した状態で[フレームを削除]を選択する f:id:AdobeAnimateFunya:20160526161659p:plain すると1フレーム減るよ。 たくさんまとめて変更したい場合は f:id:AdobeAnimateFunya:20160526162940p:plain ①クリックして1フレームを選択する。 f:id:AdobeAnimateFunya:20160526162946p:plain ②Shift+クリックで変更したい範囲を選択する。 f:id:AdobeAnimateFunya:20160526162954p:plain [フレームを削除]を選択する。 f:id:AdobeAnimateFunya:20160526162959p:plain 10フレーム削除できたよ。 フレームを追加したい場合は[フレームを追加]を選ぼう。

----------------------------------------------------------------------------------------

f:id:AdobeAnimateFunya:20160302184715p:plain
やったふにゃ〜!うごいたふにゃよ〜!!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…トゥイーンを使って移動させるのは基本だからね。 はじめて動かせた感想はどうだい?
f:id:AdobeAnimateFunya:20160302184715p:plain
ちゃんと動いてうれしいふにゃ!! 移動だけじゃなくてもっといろいろな動きを つけたくなってきたふにゃ〜!!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…その調子だよ。ふにゃクン。

2.お絵描き機能の特徴

f:id:AdobeAnimateFunya:20160302165254p:plain
AnimateはPhotoshopとは違うふにゃ?
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ… 今描いた絵の塗りを【選択ツール】でクリックしてごらんよ。
f:id:AdobeAnimateFunya:20160307165023j:plain
にゃにゃあ!? 選択した後うっかりそのままドラッグしちゃったら… 塗りつぶした面がずれちゃったふにゃよ!?
f:id:AdobeAnimateFunya:20160302165304p:plain
Animateは「ベクターデータ」という形式なんだ。 【ブラシツール】で描いた線はペイントソフトのドットのデータに見えるけど実はパスのデータなんだよ。 だから虫めがねツールで拡大してみても劣化しないよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
あー!本当ふにゃ〜なめらかなままにゃ!Photoshopならギザギザするふにゃよね。
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…ペイントソフトのようでドローソフトのようなフシギなお絵描き機能なんだよ。 じゃあAnimateの特徴的なお絵描き機能に触れてみよう。

----------------------------------------------------------------------------------------

やってみよう!

1.塗りの面を動かす

f:id:AdobeAnimateFunya:20160308115713p:plain 【選択ツール】を選ぶ f:id:AdobeAnimateFunya:20160307202241p:plain 塗りの面をクリックすると選択状態になるよ。 そのまま別の塗りの上にドラッグしてみよう。 f:id:AdobeAnimateFunya:20160307210931p:plain ステージ上の何もないところをクリックすると選択状態が解除されるよ。 f:id:AdobeAnimateFunya:20160307210914p:plain 再び同じ塗りの面を選択して移動すると… かぶさった部分がなくなってしまうんだ。

2.色を変更する

1.でやったように【選択ツール】を使って塗りの面をクリックして選択状態にしよう。

f:id:AdobeAnimateFunya:20160308141716p:plain

カラーチップから別の色を選ぶと色が変わるよ。

3.【鉛筆ツール】を使って絵を描く

線幅が自由に変えられる【鉛筆ツール】で輪郭を描いてから色を塗っていく 方法で絵を描いてみよう。

①【鉛筆ツール】で線を描く 【プロパティ】で線のサイズを3にして描いてみよう。 f:id:AdobeAnimateFunya:20160308153727p:plain f:id:AdobeAnimateFunya:20160308153753p:plain

②【バケツツール】で塗りつぶす f:id:AdobeAnimateFunya:20160308153917p:plain f:id:AdobeAnimateFunya:20160308154024p:plain クリックすると【鉛筆ツール】で描いた線に囲まれた範囲内を塗りつぶせるよ。 ③【ブラシツール】で顔のパーツを描く f:id:AdobeAnimateFunya:20160308153917p:plain f:id:AdobeAnimateFunya:20160308154125p:plain 目・くち・耳を描こう。 もう少し輪郭線を太くしたいね。

【鉛筆ツール】で描いた「線」なら太さを変えられるんだ。

④線の太さを変更する f:id:AdobeAnimateFunya:20160308115713p:plain 選択ツールを選んで f:id:AdobeAnimateFunya:20160308154349p:plain 【鉛筆ツール】で描いた線をクリックする。 一部分だけ選択されるよ。

f:id:AdobeAnimateFunya:20160308154655p:plain 選択状態の線をさらにダブルクリックするんだ。 こうするとつながった線全てを選択することが出来るよ。

f:id:AdobeAnimateFunya:20160308154817p:plain 【プロパティ】の項目から【線】の数字を5にすると太くなるよ。

4.【矩形ツール】で図形を描く

イラストとかは描かないけどボタンやバナーみたいなかっちりした図形を描きたい人も多いよね。 そういう人向けに図形の描き方をここでざっくりと教えるね。

f:id:AdobeAnimateFunya:20160308170948p:plain 【矩形ツール】を選択して f:id:AdobeAnimateFunya:20160308171037p:plain 【プロパティ】の【オブジェクトの描画モードをオン】というボタンをオンにしてステージに四角形を描いてみよう。

f:id:AdobeAnimateFunya:20160307201957p:plain f:id:AdobeAnimateFunya:20160308173837p:plain 【選択ツール】を選んで四角形をクリックしてみてよ。 【描画モード】がオンになっているシェイプを描画オブジェクトというよ。 選択するとバウンディングボックスで選択範囲が表示される。 オフになっているとクリックした部分が網がかかった状態に選択されるよ。

f:id:AdobeAnimateFunya:20160308171646p:plain 【楕円ツール】を使って四角形の上に丸を描いて 【選択ツール】でその丸を移動させてごらん。 描画モードがオンになっていると下に描いた四角が消えていないね。

オンにすると編集しやすい図形が描けるから 描きたい絵に応じてオン/オフを使い分けてね。 描画モードは【ブラシ】や【鉛筆】にも適用できるよ。

----------------------------------------------------------------------------------------

f:id:AdobeAnimateFunya:20160302165304p:plain
まずはざっくりとAnimateを使った絵の描き方をやってみたけど ふにゃクンはついてこれているかい?
f:id:AdobeAnimateFunya:20160302182108p:plain
にゃ…にゃんとかっ! PhotoshopとIllustratorを混ぜたような独特な操作感は 慣れるまでにちょっと時間がかかりそうにゃね〜
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…そうだね。 使っていくうちにきっと慣れると思うから今はがんばってよ。

1.Animateでとりあえず何か描いてみる!

f:id:AdobeAnimateFunya:20160302165304p:plain
ところで…ふにゃくんはパソコンは使ったことあるのかい?
f:id:AdobeAnimateFunya:20160302182108p:plain
も、もちろんふにゃよっ!!! お絵描きソフトだって使ったことあるふにゃよ!
f:id:AdobeAnimateFunya:20160302165304p:plain
そうなのかい?それは意外だったよ…フフフフ ではまずはAnimateを立ち上げて描いてみよう。
f:id:AdobeAnimateFunya:20160302184715p:plain
はいにゃ〜♪ こんな画面がでてきたふにゃ!

f:id:AdobeAnimateFunya:20160302184828p:plain

f:id:AdobeAnimateFunya:20160302165304p:plain
スタートページを起動できたようだね。 まずはそこの中央にある【新規作成】の 【ActionScript3.0】をクリックしてごらん。
f:id:AdobeAnimateFunya:20160302165254p:plain
お絵描きができそうなスペースとパレットやツールが表れたふにゃ!!
フフフフ…そのスペースは「ステージ」というよ。 これからAnimateを勉強していくと画面各部分の名称がでてくるよ。 使いながら覚えていけばいいから、まずは下の図にあるものを覚えるといいよ。
f:id:AdobeAnimateFunya:20160308112656p:plain ① タイムライン アニメの動きを制御するところ ②ツール 絵を描いたりするためのツールがまとめられています ③ステージ ここに絵を描いたりインスタンスを配置します ④プロパティ(プロパティインスペクタ) 選んだツールの細かい機能や設定を変更できるところ ⑤ライブラリ シンボルと呼ばれるアニメやイラストが入った場所

f:id:AdobeAnimateFunya:20160302165304p:plain
あ、もし上の画面と違う配置になっていたら右上を見てもらえるかい。 プルダウンから【アニメーター】を選んでほしいんだ。 これはアニメーションを作るときに適した画面配置なんだ。 ここではずっと【アニメーター】でやっていくよ。

f:id:AdobeAnimateFunya:20160302184949p:plain

f:id:AdobeAnimateFunya:20160302165254p:plain
まずはブラシツールでうさぎの絵を描くふにゃ〜! わー!Photoshopみたいにゃーっ!これならふにゃも得意にゃ!!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…そう見えて、実は…
f:id:AdobeAnimateFunya:20160302165254p:plain
ん?
f:id:AdobeAnimateFunya:20160302165304p:plain
あ、描けたら【ファイル/保存】を忘れずにね。 Animateは落ちることが多いからこまめな保存が大事だよ。
---------------------------------------------------------------------------------------- やってみよう! 絵を描くのに使うツールの名称だよ。使いながら覚えていこう。 f:id:AdobeAnimateFunya:20160303214444p:plain   1.【ブラシツール】を選択してステージに好きな絵を描いてみよう。カラーチップをクリックするとカラーパレットが表示されるから好きな色を選んでごらん。 f:id:AdobeAnimateFunya:20160303221813p:plain   2.まちがえたら【消しゴム】で消せるよ。 f:id:AdobeAnimateFunya:20160303222212p:plain 3.【バケツツール】を選択すれば線や別の色で囲まれた範囲の中をクリックすると塗りつぶせるよ。すでに塗った色もこれで変えることが出来るよ。 f:id:AdobeAnimateFunya:20160303222342p:plain
f:id:AdobeAnimateFunya:20160302184715p:plain
うさぎが描けたふにゃ〜! 結構なじみやすいふにゃよ! AnimateってPhotoshopに似てるにゃあ♪
f:id:AdobeAnimateFunya:20160302165304p:plain
それはどうかな…?フフフフ…

次回に続く!

はじめに。

f:id:AdobeAnimateFunya:20160302174508p:plain

登場人物紹介

f:id:AdobeAnimateFunya:20160302165254p:plain
ふにゃもらけ 遠い星 ふにゃもらプラネットからやってきたふしぎな生き物。 コンビニでバイトをするかたわら、ゲームに役者として出演している。
f:id:AdobeAnimateFunya:20160302165304p:plain
クラゲふにゃ 同じく ふにゃもらプラネットからやってきた自称セレブ。 何を考えているか謎めいている。


----------------------------------------------------------------------------------------
f:id:AdobeAnimateFunya:20160302184715p:plain
わーい、レベルアップしたのにゃ〜!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ… ふにゃクン、何をしているんだい?
f:id:AdobeAnimateFunya:20160302165254p:plain
あ、クラゲふにゃ! ふにゃ達のゲームで遊んでたのにゃ。
f:id:AdobeAnimateFunya:20160322174001p:plain 最近 Photoshopで絵を描いたりしてるけど、 こういうゲームの絵もPhotoshopで描くのかにゃあ??
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ… 気になるのかい?
そんな好奇心旺盛なふにゃクンに朗報だよ。 キミに、ボクたちのゲームのアニメを作ってもらうことになったよ。
f:id:AdobeAnimateFunya:20160302182108p:plain
え〜〜〜!! ふにゃはゲームに出演するのが仕事で、技術的な事はスタッフさんがやってくれるんじゃ…
f:id:AdobeAnimateFunya:20160302165304p:plain
実は開発予算が不足しているんだ。 アニメを作るスタッフをやとう余裕がなくてね…
f:id:AdobeAnimateFunya:20160302165254p:plain
で、でも…ふにゃはアニメなんて作ったことないから…
f:id:AdobeAnimateFunya:20160322163601p:plain
ボクたちのゲームを楽しみにしている人がたくさんいるんだよ。 キミはそんな人達の期待を裏切る気かい?
f:id:AdobeAnimateFunya:20160307165023j:plain
ハッ…! たしかに… 楽しみにしてくれている人がいるなら… どこまでできるかわからないけど、ガンバってみるふにゃ!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ… その意気だよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
それに、ゲームで使うアニメをどうやって作るかって ちょっと興味があるふにゃ。
f:id:AdobeAnimateFunya:20160302165304p:plain
ボクたちのゲームで使うアニメは、Adobe Animateというツールで作っているんだ。
f:id:AdobeAnimateFunya:20160322174334p:plain
f:id:AdobeAnimateFunya:20160302165254p:plain
あどび あにめいと…? AdobeってPhotoshopを作っている会社と同じふにゃね。
f:id:AdobeAnimateFunya:20160302165304p:plain
そうだよ。 そのAdobeだよ。
かつてはFlashという名前で呼ばれていたツールなんだけどね。
昔は、swfっていうFlash独自のファイル形式でアニメのデータを書き出すことが主だったんだけど、 最近はいろいろなファイル形式でデータを書き出すことができるようになったから、 ツールの名前もAnimateに変わったんだ。
f:id:AdobeAnimateFunya:20160322173513j:plain
あ、Flashは聞いたことあるのにゃ! 最近はあんまり使われないって話を聞いた事があるけど…

f:id:AdobeAnimateFunya:20160302165304p:plain
実は意外と使われていたりするんだよ。 HTML5でも書き出しができたり、UnityやCocos2d-xで利用できる[GAF](https://gafmedia.com/)っていう形式で書き出しもできるし、 Adobe AIRならスマホのネイティブアプリそのものも作れちゃうからね。 まだまだ可能性を秘めたツールなんだよ。フフフ…
f:id:AdobeAnimateFunya:20160322173507j:plain
えいちてぃーえむえるふぁいぶ? ゆにてぃー? うう…なんか難しそうふにゃ。
f:id:AdobeAnimateFunya:20160302165304p:plain
あくまでキミにやってもらうのは、絵を描く部分だからね。 細かい技術的な部分はボクがサポートしてあげるから安心してよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
で、でもアニメを作るツールって複雑そうだけど、ふにゃに使えるかにゃあ?
f:id:AdobeAnimateFunya:20160302165304p:plain
使い方はボクがしっかりと手ほどきをしてあげるから安心してよ。 さあ、それじゃあ早速だけど始めようか。フフフ…

次の記事へ

animate.hatenadiary.jp