EC studio デザインブログ » セミナー・勉強会

CSSアニメーションで一見複雑に見える動きをさせる方法

西口誠二 — Thu, 20 Oct 2011 05:59:31 +0000

Webサイトにアニメーションを取り入れる場合には、いくつか方法があると思います。代表的なところでいうと、

・JavaScript、jQuery
・Flash
・CSSアニメーション

などが挙げられます。

ただ複雑な動きとなると、高度なコードを書く必要があったりと、それなりに難しくなります。ですが、シンプルなアニメーションでも組み合わせることで、パッと見複雑に見える動きを付けることができます。
そのアニメーション手法というのは、先日、京都で開催された"Ti.Developers.meeting vol.03（Titanium mobileでのアプリ開発者が集まる関西方面のミートアップ）"でのコバヤシトールさん（@toru0325 / もぐもぐエンターテイメントアプリ - MogSnap）のセッションで紹介されていたもので、その斬新な技法に驚かされたと共に、日頃の制作に対する姿勢の面でも改めて感じる部分がありましたので、今回の記事では、そのあたりをまとめてみようと思います。（追記2011/10/21：コバヤシトールさんが紹介されていたのは、Titanium mobileでのアニメーションで、この記事でのサンプルは、その手法をCSSアニメーションにアレンジしたものとなります。）

どんな動き

パッと見複雑に見える動きってどんなものか、まずはサンプル（Chromeのみ）をご覧ください。

CSS3アニメーションサンプル1 - jsdo.it - share JavaScript, HTML5 and CSS

一見複雑な動きに見えるのですが、よくよく見てみると簡単な動きの組み合わせだというのが分かると思います。
動きだけじゃ分からないと言う方でも、次のコードで一目瞭然だと思います。
簡単に解説すると、入れ子の構造を作って、それぞれ別々にｘ・ｙ方向のアニメーションをあてているだけです。

・HTML

テキスト表示

HTML:

class="horizontal">
class="box vertical">

・CSS

テキスト表示

CSS:

.vertical {
-webkit-animation-name: verticalAnimation;
-webkit-animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
.horizontal {
-webkit-animation-name: horizontalAnimation;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes verticalAnimation {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(300px);
}
}
@-webkit-keyframes horizontalAnimation {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(400px);
}
}

もう少しパラメータを加えると、こんなアニメーション（Chromeのみ）にもなります。

CSS3アニメーションサンプル2 - jsdo.it - share JavaScript, HTML5 and CSS

先ほどのｘ・ｙのパラメータの他にスケールと色を追加しました。

使いどころ

以上のような設定だけで、簡単にアニメーションできました・・・
だけど、この動きだとサイトでは使いにくいです。
そこで、同じ動きでもパラメータを少し調整すれば、サイトのワンポイントとして使えるかも、と言うサンプル（Chromeのみ）も作って見ました。

CSS3アニメーションサンプル3 - jsdo.it - share JavaScript, HTML5 and CSS

ｘ，ｙ方向の動きの範囲を少なく、時間はゆっくりにして、さらに動きの始点と終点にイージングを設定してみました。

サンプルではいまいちわかりづらいですが、キャラクター画像などにこの動きを設定すれば、フワフワと浮いているようなアニメーションでサイトのワンポイントとして使えるかもしれません・・・

まとめ

今回まとめたアニメーションの手法は、最初に書いたようにコバヤシトールさんのセッションで学んだ方法でした。

同じような見え方・動きでも実現する方法は様々です。複雑なコードを書いてアニメーションさせる場合は、プログラミングの難しい知識を習得する必要がありますが、今回のような手法であれば、今持っている技術だけで充分実現することができます。

とは言え、この簡単なアニメーションを組み合わせる、と言う斬新な手法を思いつかなければそれもかないません。今回は勉強会でその手法を学ぶことが出来ましたが、自分自身でも、どのようにすれば実現できるのか、自分の技術を活かして実現できないか、ということを考えて制作に取り組むことが大事だなぁと、改めて感じられたイベントでした。

関連した記事：

CSS Nite LP, Disk 14にいってきました!

yoshue — Mon, 07 Mar 2011 08:58:46 +0000

3月5日（土）に、待望のFireworks特集LP14
「Photoshopper meets Fireworks」に行ってきました！

過去のブログ記事からもわかるように、弊社のメインソフトはFireworks！
入社当時はPhotoshop派で触ったこともなかったのですが、
今ではすっかりFireworksなしでは生きていけない！

このFireworks特集、たしか去年の秋ぐらい？に
開催の話があがったけれど、延期になり…
本当に開催されるの？Fireworksってそんな人気ない？

…と、余計なことを考えていましたが、当日は満席！
会場全体がFireworksへの愛にあふれてて、とても充実した１日になりました。

どのお話も面白いし、スライドもキレイでわかりやすい。
その中でも特に個人的に面白かったものをご紹介。

FireworksマニアLIVE！

スピーカーは、山口有由希さん

今回参加の決定打になったのがこちら。
Fireworksマニアというブログを運営されており、今回はそのブログの作り方を会場でしちゃうというもの。

ステートの活用

ワイヤーフレームをかいた後、「デザインする」と「ワイヤーフレームを残しておく」ステートに分けて使う。
デザインが完成になって、ワイヤーフレームが不要になったら削除する。

スタイル機能の活用

テキスト、罫線、サイトのテーマカラーを「スタイル」に保存。
同一classをあてると思うテキスト箇所を、あらかじめテキスト登録しておく。
（わたし今までシンボル化ボタンを使って似たようなことをしてましたが、スタイル機能使えば良かったんですね…恥ずかしい…）

ドロップシャドウはPhotoshopのライブ効果を使う

並べて比較するとびっくり。Fireworksデフォルトのドロップシャドウのグラデーションって荒い…
Fireworksは、オブジェクトのアウトラインの処理も汚い（特にテキスト）ので、
アウトラインはPhotoshopのライブ効果の「線」を使うようにしていますが
ドロップシャドウもここまで違うとはびっくりしました。

Fireworksでドロップシャドウとアウトラインを使うときは、Photoshopのライブ効果を使おうと思います。
（ただ、経験的にCS4以前でライブ効果を多用すると重たくて内部エラー出やすくなるので注意が必要）

Fireworksのページ機能の使いどころ

スピーカーは、柴田大樹さん

Fireworksのページ機能についてだったのですが、時間が短かったこともあり、もっと色々聞きたかったなぁ…
と思っていたところ、時間の都合上でカットされた内容がブログ記事で紹介されてました。

「Fireworksのページ機能の細かすぎて伝わりにくい使いどころ」

ページ移動のショートカットキー
PDFデータを軽くする方法

ショートカットキーしらなかった…
いつも違うアプリケーションの上下に動かすショートカットキーを
間違えて打ってしまい「あぁ、間違えた…いや、そもそもなんでショートカットないの？」
と思ってたので嬉しい！！

パワーユーザー必携の海外の拡張機能20選択＋

スピーカーは、丸山章さん

Fireworksの便利な拡張機能の紹介。
これが一番熱くなりました！
その中でも、とくに熱くなった機能をご紹介です。

Placeholder
オブジェクトの寸法を表示してくれる。
物差しツールの四角形版ですね。ワイヤー組むのにこれは便利…！！

gradient panel
グラデーションの色、位置を数字で指定できる！
細かい調整が可能になるので、他のグラデーションと統一とれるし嬉しいですね～

gradient direction editor
グラデーションの方向を数値で指定できる。
いままshift押しながら、45度ずつの調整…あとは目視…、とアバウトな設定だったので
数値でできるのは良いですね！

Smart Knife
ビットマップ画像もテキストもパスも好きなようにカットできてしまう。
ちゃんとカットした後もパスデータが残っているのがすごい！

Tables拡張機能
Fireworksで、簡単に表がつくれるようになる！！
これが一番熱かった！！

でも、近日公開でまだ使えないっていう！！
待ち遠しすぎる…

感想

今回、Fireworks特集ということではありましたが、
あらかじめ「PhotoshopユーザーにもFireworksの魅力を理解いただく」という説明があったとおり、
Fireworksのポピュラーな機能紹介もおりまぜつつ、マニアックなネタの紹介もあり
まんべんなく来場者皆様のお腹が満たされたのではないでしょうか。（本音を言えば、苦しくなるくらい満たされたかった…！）

そして、今回のセミナーって東京だけなんですよね…。
面白いセミナーはだいたい東京…。

大阪でも開催されるくらい、Fireworks人気が上がって欲しい！
そのためにも、微力ですがFireworks人気あげるべくサボりがちだった
ブログ記事（Fireworksネタ）もっと出して行こうと思います！
目指せ週１回、投稿…！

関連した記事：

聞いて学んで考えるUX（ユーザーエクスペリエンス）講座を開催します【定員あり】

谷拓樹 — Mon, 25 Oct 2010 05:18:41 +0000

運営に関わっている Re:Creator's Kansai による4回目のセミナー、
「聞いて学んで考えるUX講座」のお知らせです。

今回はWebやデザインに関する情報発信をおこなっている could の長谷川恭久さんをお招きし、ユーザーエクスペリエンス（UX）の聞いて学んで考える講座を開催します。

ユーザーの行動を意識したデザイン/設計、コンテンツを考えるためにはユーザーエクスペリエンスを理解することが必要です。
しかしユーザーエクスペリエンスとはいってもそれ自体が不明瞭でその視点・考え方をデザイン、コンテンツに取り入れられるのは容易ではありません。

今回はセミナー形式で知識を得るだけでなく、パネルディスカッション、セミナー、ワークショップの3部構成で、ユーザーエクスペリエンスの理解を深める講座となっています。

ワークショップでは実際に公開・運営されているサイトをモデルに、そのサイトの目的やビジネスゴールなどを情報を共有し、そのゴールをどうすれば達成できるのか、というのをグループで一緒に考えるセッションになります。

聞くだけでは難しいこのテーマを、実践しながら学びましょう。

■日時：11月20日（土）13:00 から 17:00 まで
■参加費：3000円
■定員：60名（定員になり次第受付を終了します）
■詳細・申し込み⇒ http://www.re-creators.jp/vol4/

＜関連リンク＞
長谷川恭久さん：http://www.yasuhisa.com/could/

主催：Re:Creator's Kansai

関連した記事：

FireworksとPhotoshopの書き出し画像を比べてみた！～ドットコーダーセッションまとめ

赤堀　巴絵 — Mon, 27 Sep 2010 05:17:50 +0000

2010年9月25日に.coder「すこーし愛して。ながーく愛して。Webパフォーマンス」でプレゼンさせていただきました。
あまりのイケてるプレゼンテーターの中にちょっと申し訳ない感じでしたが、
みなさまアットホームに迎え入れていただき、楽しい1日を過ごすことができました。

私は「みんなで使おう！Fireworks！〜Fireworksで画像最適化〜」というお題で
プレゼンしたので、簡単にその中身をここでも紹介させていただきたいと思います。

今回はFireworksとPhotoshopの画像の書き出し方を比較してみました。
ちなみに使用したアプリケーションはFireworks CS5 とPhotoshop CS5 です。

PNGの書き出しは実はFireworksのほうが軽量！？

PNGを書き出すときに画像データ以外のチャンクという必要のないデータも書き出されます。
実はそのチャンクデータがPhotoshopよりFireworksのほうが少ないのです。
なのでPNGで書き出した画像はFireworksのほうが軽くなります。


Fireworks PNG8（1.26KB）		Photoshop PNG8（2.22KB）

PhotoshopにはないPNG8アルファチャンネル書き出しで軽量化！

透過画像の場合、通常PNG32アルファチャンネルで書き出しますが、
色数が少ない場合（256色以下）はPNG8アルファチャンネルを使うことで、
画像を軽量化することができます。

PNG8アルファチャンネルはPhotoshopでは書き出しができません。
それから、IE6は透過情報を表現してくれないので、AlphaImageLoaderやjavascriptで対応が必要です。

JPEGの圧縮率はFireworksのほうが高い！？

JPEGの画質80をFireworksとPhotoshopで書き出して比較してみました。
Fireworksのほうがデフォルトの圧縮率が高いのでサイズがPhotoshopより軽くなります。
しかし、JPEGはデータを劣化させて圧縮しているので、
高画質で表示させたりしたい画像はPhotoshopで書き出したほうがオススメです。


Fireworks JPEG画質80（17.4KB）		Photoshop JPEG画質80（34.3KB）

JPEGマスクで見せたい部分だけを高画質！

JPEGマスクという機能を使って画質を落としたくない部分だけ、
高画質にして他の部分は画質を落として書き出すということができます。

ある1部分だけを高画質にしたい場合は全部画質をあげなくても書き出せるので、
画像を軽量化することができます。

また、後日Fireworksでの詳しいツールの使い方を記事にします。

まとめ

まとめとしましては、Fireworksは画像のサイズを軽量化して書き出すのには
非常に適した使いやすいアプリケーションです。

しかし、高画質の画像を使う場合にはPhotoshopには劣るので、
両方をうまく使い分けるのがベストではないでしょうか。

最後に素敵な時間を共有した.coderの参加者様、開催者様ありがとうございました。
あと、プレゼン資料が.coderのサイトでも公開されるので、もしよかったらそちらも参照してください。
.coder（ドットコーダー）のサイト

また2010年10月16日（土）に「ワイワイガヤガヤアクセシビリティ」というアクセシビリティのセミナーも開催されるそうです。
そちらも非常に楽しそうなので興味のある方はぜひチェックしてみてください。
※こちらのセミナーは定員に達しました。（2010/10/04）

関連した記事：

2009年デザイントレンド総括！CSS Nite in Ginza, Vol.43に行ってきました

新免孝紀 — Mon, 25 Jan 2010 11:43:01 +0000

2010年1月21日に開催されました、
CSS Nite in Ginza, Vol.43に行ってきました。

今回のテーマは
「2009年のデザイントレンド総括?トレンドをチェックして
2010年のデザイン業務に取り込め！」というテーマで、
原一浩（karadesign/fxb）さん、矢野りんさんによるトークセッションでした。

セッションの内容は、下記のような感じです。
・2009年のデザイントレンドを実際のサイトを用いて紹介
・矢野りんさんによる、デザイン解説を交えての紹介
・2010年のデザイントレンド大予想！

まず、お二人の自己紹介から始まり、「トレンドとはどういうことか？」という
話になったのですが、ここで原さんが考える「トレンド」という言葉の意味が
紹介されました。

“トレンドとは最先端ではない時代に最適化されつつある現象である”

この言葉はすごく納得の行く言葉で、確かにトレンドと言うのは、
最先端を追いかけるということではなく、その時代にあったデザインを
みんなが選択して使うことで発生する現象のことなんだ。
というのがすっと頭の中に入ってきました。

前置きが長くなりましたが、ここから本題の紹介に入りたいと思います。

2009年のデザイントレンド（海外）

■アイコンのシンプル化

今まではMac OS のアイコンのようなリアルなものが主流だったが、
最近は、ピクトグラム化し、単一色の物が増えてきている。

[参考サイト]
MUTANT LABS
Eastern Ranges
Mochimedia

■見立てのデザイン

見立てのデザインとは、背景を風景などに見立てたデザインのこと。
現在は増加傾向にあるので、見立てのデザインにチャレンジするのであれば
今後1～2年くらいは大丈夫だろうということです。

このデザインが流行った背景には、ディスプレイが大きくなり、
背景として見せる領域が大きくなったことも関係しているのではないか、
ということでした。

[参考サイト]
BLOSSOMES VILLAGE RESORT
Hull Digital Live hd
Blue Acorn

■流行りの色は青

様々なサイトを見ていると、青を基調色としたサイトが多く、
TwitterやFacebookといったサイトの影響も大きいのでは
というお話が出ていました。

[参考サイト]
Mobile My Site
Oyster
Unuidesign

■テクスチャ

テクスチャに使用する素材は、ステッチ、皮、紙などを
使用したサイトが多く見られるようです。

[参考サイト]
Mark Hadley
Ulredesign
Daniel Marino

■巻き込みリボン

見出しのデザインなど、背景に巻き込み立体的に見せているサイトが多く
「W3C」のサイトもこのデザインを採用しており、
「今後のデザインの標準になっていくのでは！？」との
大胆予想も飛び出しました（笑）

[参考サイト]
CuisineSaine
Open Source Design Network
World Wide Web Consortium

■テキストはシステムのアンチエイリアス前提

海外のサイトはテキストはより大きくなり、
システムフォントを使用し、アンチエイリアスをかけた
サイトが多くなっているとのことでした。

ただし、アンチエイリアスで表示可能な
OSのシェアの普及が少ないのと、
日本語のシステムフォントで表示した場合も、
見栄えがあまり良くないので、日本での実用は
まだ難しそうとのことです。

[参考サイト]
BIG SPACESHIP
Boag World
Pw Studio

■フォームは大きく、見やすく、美しく

フォームのインプット部分は、大きくすることで、
ユーザーは使いやすく、見やすくなり、
またデザインする側も、フォームが大きくなったことで、
アイコンを表示させるなどより多彩なデザインが
出来るようになりました。

[参考サイト]
Tea Round
CULINAR
Google

■メインイメージはインタラクティブに

ペラペラとページがめくれるような動きのものが多くなっています。
また、これらはFlashで開発されているのではなく、jQueryのライブラリを
使って開発されています。

[参考サイト]
THINGS THAT ARE BROWN
Point Zero
ROBERT ALAN

■吹き出し表現

ビジュアルの要素として、吹き出しを使用しているサイトも
多く見られます。こちらもTwitterの影響もあるのではないかという
お話をされていました。

[参考サイト]
Catholic Chaplaincy
Evan Bowers Design
F91W

■小さな段組

小さなボックスで区切られたレイアウトです。
ボックスで区切られているので、意外と入る情報は少なく
コピー量を極力減らすなどバランスも必要になります。

[参考サイト]
D&DEPARTMENT PROJECT
CreativeDepart
Reform&Revolution

その他、グローバル企業や、上場企業のサイトデザイン（国内）の
傾向などの紹介も有りましたが、今回はデザイントレンドの紹介ということで、
あえてここでの紹介はやめておきます。

また、このようにデザインを分析するために原さんは
独自で開発した「Vaqum」というツールを使いサイトの
キャプチャを取り分析しているようです。

昨年キャプチャしたサイトの数は約19,000サイト！
サイトを見て、分析している量が全然違います。

改めて、いろんなサイトを見て分析することは
重要なことだなと思いました。

2010年のデザイントレンド大予想

■原さん予想
・アイコン付きフォームの普及
・グレーアウトにより操作対象の明確化
・リキッド型（100%幅）のセパレートを超える何か
・アプリケーション化したデザイン
・クリック領域の拡大、文字のノングラフィック化

■矢野さん予想
・微調整しやすいデザイン
・ABテストなど、運用しながら微調整を繰り返す公開方法
・ボックスを並べたレイアウト
・ボックスを並べたレイアウトは文字情報が削られ、文章が減少する
・スマートフォンなどの小さいサイズのディスプレーに最適化されたレイアウト

以上が、お二人の2010年のデザイントレンド予想になります。
曖昧なものもありますが、今年はどのようなトレンドが生まれるのか楽しみですね。

今回のセッションのスライドと音声は下記よりダウンロード出来ます。
CSS Nite in Ginza, Vol.43フォローアップ&メッセージ

関連した記事：

HTML5だけでiPhoneアプリをつくる

谷拓樹 — Wed, 25 Nov 2009 12:48:10 +0000

間が開いてしまいましたが、CSS Nite 4周年記念イベント（Vol.40 reprise）の続きです。HTML5のメリットを活かしたコンテンツアイデア」というテーマでお話されたのはKAYACの山田敬美さん。

HTM5を取り上げたブログ記事などを多く見るようになりましたが、その多くは新要素のマークアップについてが特に目立つ気がします。
そんな中、マークアップエンジンニアでもあり、KAYACのブッコミ11メンバーでもある山田さんはWebアプリケーションとしてのHTML5を生かしたアイデアをお話されていました。

iPhoneがHTMLで使える理由

HTML5といっても現状ブラウザごとで実装が異なり、実務として使うのは非常に難しい。でもそういったブラウザの種類に左右されないデバイスがある。

それがiPhoneだということです。iPhone SafariのWebkitはHTML5を要素のいくつかに対応している上に、CSS3についても広く対応しています。個人的にはCSS3を活用できることも嬉しいですし、このアイデアには納得でした。
またできる範囲はずいぶんと狭くなりますが、Objective-Cを覚える必要もなく、
今知っているHTML+CSS+JSで作ることができるのは魅力的です。

Webアプリケーションに使える要素

セッションで取り上げられた要素・機能は下記です。

メディア要素
Flashの代替、と言い切ってしまうのは難しいかと思うのですが、iPhoneでFlashが使えない分Canvasで再現できることがあります。
またvideo要素やaudio要素はプラグイン無しでメディアファイルを再生できるという素晴らしいよう要素です。ただiPhoneではどのくらい恩恵を受けられるのかはわからないですが。

menu（ツールバーやコンテキストメニュー）
datagrid（リスト構造や表を表現）
progress（タスクの進捗を表す）
meter（認知の範囲にある数量）

入力値のバリデーションをブラウザで行う
JavaScriptでおこなうようなバリデーションをHTML5では属性値でおこなうことができます。これも対応できているブラウザは少ないのですがやはり使えると便利でしょう。

inputのtype属性（search, tel, url, email, datetime …）
required（必須項目）
pattern（正規表現）

入力補助
これもバリデーション同様、JavaScriptで実装できるものがHTML5で実装できます。

placeholder (入力例のヒント)
autofocus (自動フォーカス)
autocomplete (オートコンプリート)
datalist (補完候補のリスト)

JavaScript API
WebアプリケーションとしてHTML5を活用する上で便利なAPIです。

Web Workers (JSをバックグラウンド処理する)
Web Storage (キー/バリュー型の単純なストレージ)
Web Database (SQLを実行できるローカルDB)
Web Sockets API (サーバとの双方向通信)
Geolocations API (現在位置の座標を特定)

イケメンホイホイiPhone版を題材に

まず先に完成版を見てもらうといいかもしれません。

イケメンホイホイのiPhone版ということで、オフラインでもイケメンが見られるという配慮までされています。HTML5でここまで出来るのはおもしろいですね。

このイケメンホイホイiPhone版で使用しているHTML5の要素・機能は下記の通り。

まずinputの新しいtype属性ですね。type="number"（数字のみ）、type="email"（メールアドレス向けのバリデーション）を使われたようですが、これらはiPhone Safariのwebkitでは完全対応はされていないようです。ですが、入力を半角英数字に制限できるというのは可能で、そのために採用されたようです。ちなみにOpera 10以降ではこのform系のものに広く対応しています。
placeholderは使えるようです。これも使えるなら使う方が便利ですね。

次にCanvas。イケメンホイホイでは写真がメインコンテンツなのですが、その写真の装飾やアニメーションに採用しています。今回のように色々な制御をするためにはcanvasという要素を置くだけでなく、JavaScriptで処理をする必要があります。

ここからはオフラインでもイケメンを見られるようにするための重要な機能です。
ひとつがアプリケーションキャッシュ。画像やCSSやJavaScriptなどのリソースをオフラインで使える機能です。

manifestファイルというファイルをつくり、その中でキャッシュしたいファイルのパスなどを記述する。
manifestファイルのパスをhtml要素で属性として指定します。
MIMEタイプを"text/cache-manifest"として配信する。
例）.htacessに下記のような記述。
AddType text/cache-manifest .manifest

しかしこのアプリケーションキャッシュがくせ者らしく、これを開発段階で実装してしまうと修正後の確認などが困難になるようです。（修正しても反映されない、など）

もうひとつのオフライン対応がローカルストレージ。
アプリケーションキャッシュと違い、都度内容が変わるイケメンの写真データをクライアント側に格納してしまうというものです。ドメイン単位でのデータになるようで、別ドメインからはアクセスできないようになっているみたいです。
イケメンホイホイでのストレージ対象は画像なのですが、ローカルストレージではバイナリ形式に対応しておらず、データスキーム（base64形式）で保存する必要があります。ちょっとひと工夫必要になりますね。

HTML+CSS+JSだけで！とはいってもやはり単純に静的なサイトをつくるのとは違うので、良い勉強になりました。
ご本人の記事ではテンプレートセットも配布されているので、是非こちらをダウンロードしてソースなどを見てみるとおもしろいですよ。
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise）

関連した記事：