【事件の表示】
　特願２０１７−１００２５５「情報表示プログラム、情報表示方法、情報表示装置、及び配信装置」拒絶査定不服審判事件〔平成３０年１２月　６日出願公開、特開２０１８−１９５１９９、請求項の数（１１）〕について、次のとおり審決する。
【結　論】
　原査定を取り消す。
　本願の発明は、特許すべきものとする。
【理　由】
 第１　手続の経緯
　本願は、平成２９年５月１９日の出願であって、平成２９年１１月２７日付けで拒絶理由通知がされ、平成３０年１月１９日付けで手続補正がされ、同年２月６日付けで拒絶査定（原査定）がされ、これに対し、同年４月１０日に拒絶査定不服審判の請求がされると同時に、手続補正がされたものである。
第２　原査定の概要
　原査定（平成３０年２月６日付け拒絶査定）の概要は次のとおりである。
（進歩性）この出願の請求項１−１１に係る発明は、その出願前に日本国内又は外国において、頒布された下記１−２の刊行物に記載された発明又は電気通信回線を通じて公衆に利用可能となった発明に基いて、その出願前にその発明の属する技術の分野における通常の知識を有する者が容易に発明をすることができたものであるから、特許法第２９条第２項の規定により特許を受けることができない。
　　　　　　　　　　　　　　　　　　　　記
引用文献１．佐藤信正，はじめて作る人のためのｉＰｈｏｎｅウェブ・アプリケーション　ｆｏｒ　Ｗｉｎｄｏｗｓ，株式会社ラトルズ，２０１１年　３月３１日，初版，第７４−８２頁
引用文献２．特開２０１２−２２１０９４号公報
第３　審判請求時の補正について
　審判請求時の補正は、特許法第１７条の２第３項から第６項までの要件に違反しているものとはいえない。
　審判請求時の補正によって請求項１を「前記第１コンテンツと前記第２コンテンツとを前記画面に平行な軸を回転軸として回転表示する」とする補正は、補正前の請求項１に記載のあった発明を特定するために必要な事項である「前記第１コンテンツと前記第２コンテンツとを回転表示する」という構成を、「前記画面に平行な軸を回転軸として回転表示する」ものに限定したものであり、かつ、補正の前後において、請求項１の産業上の利用分野及び解決しようとする課題は同一であり、また、前記追加された事項は当初明細書の段落【０１２５】等に記載されているから、特許請求の範囲の減縮を目的とするものであり、また、新規事項を追加するものではないといえる。
　そして、「第４　本願発明」から「第６　対比・判断」までに示すように、補正後の請求項１−１１に係る発明は、独立特許要件を満たすものである。
第４　本願発明
　本願請求項１−１１に係る発明（以下、それぞれ「本願発明１」−「本願発明１１」という。）は、平成３０年４月１０日付けの手続補正書で補正された特許請求の範囲の請求項１−１１に記載された事項により特定される発明であり、本願発明１は以下のとおりの発明である。
「【請求項１】
　第１コンテンツと第２コンテンツとを重ねて画面に配置する表示制御手順と、
　前記第１コンテンツと前記第２コンテンツとを前記画面に平行な軸を回転軸として回転表示するとともに、前記回転表示の間に、前記第１コンテンツの透明度を徐々に高くし、前記第２コンテンツの透明度を徐々に低くするコンテンツ変更手順と、
　をコンピュータに実行させるための情報表示プログラム。」
　なお、本願発明２−８は、本願発明１を直接又は間接的に引用し、本願発明１を減縮した発明であり、本願発明９−１１は、本願発明１を実質的に、第１，第２コンテンツの透明度の高低を入れ替えると共に、「情報表示方法」、「情報表示装置」、「配信装置」とした発明である。
第５　引用文献、引用発明等
１．引用文献１について
　引用文献１には、図面とともに次の事項が記載されている。
ａ）「２−７イベントでＣＳＳアニメーションを動かす
　イベントをＪａｖａＳｃｒｉｐｔで処理して、アニメーションが開始できる。
ＣＳＳアニメーションを制御する
　ＣＳＳを使ってアニメーションを指定できることがわかりました。イベントの使い方も２−５で理解できたはずです。そこで今度は、イベントを使って
ＣＳＳアニメーションを動か
プログラム
　作例としては、
クエスチョンマークの表示のカードをタップすると、そのイベントでカードが回転扉のように立体的に回転して、裏面からラッキーナンバーが表示されるようにし
ｂ）「裏と表で回転させる
　イベントを使ってアニメーション指定のＣＳＳを入れ替えることで、アニメーションを制御できることがわかりました。今度は裏面にラッキーナンバーが表示されるようにしましょう。
　ＨＴＭＬによる指定は少し複雑になります。解説図を見ながら理解してください。
・・・（中略）・・・
表面の要素にclass=front、裏面の要素にclass=backが付いています。指定をidにしなかったのは、同一の１枚のカードの表の状態と裏の状態を示すためです。
　同様に、数字カードもデザインは表裏なので同じということで、class=numbercardとします。しかし、裏面は数字をランダムに入れ替える都合からid=numberを指定しておきます。
　以上が横回転のための設定です。
　その他のＣＳＳは、id=main、id=settingについては先ほどの例題と同じです。class=numbercardも先ほどのid=numbercardとほとんど同じですが、背景にグラデーションが指定してあります。
・・・（中略）・・・
　表面（front）と裏面（back）には多少ややこしい工夫がしてあります。構造上は別の要素になっていますが、デザイン的には重なるようになっている点です。」（第７９−８０頁の記載。）
ｃ）「
frontクラスとbackクラス
の２つのクラスを
表の面と裏の面として重ね合わせ
　frontクラスとbackのクラス指定をしているdiv要素は、id=setting内に含まれています。そして、id=settingは絶対位置が指定されています。この状態で、そのなかに含まれる要素にも絶対位置を指定すると、これらは上位の要素の位置に重なります。つまり、ＨＴＭＬの構造上は
frontの上にbackが重なるようになり
backface-visibility:hiddenの指定は、背面を隠すということで
この指定をすると、背面が表になるときは全体が透けるようになり
　
backクラスのtransform:rotateY(180deg)は、裏面を最初から裏返しておくという指定で
backfacevisibility:hiddenで、その背面は見え
下になっているfrontの表面の？が透けて表に見えるようになり
　
１８０度回転をすると、backの背面だったnumberの値が表になり
frontはこの陰に隠れて見えなくなり
　カードを回転させる仕掛けの全体は右のような構造になっています。
　
アニメーションの指定は
animationクラスとflippedクラスを
使い
　
裏面に返すときは、animationクラスをanimation flippedという二重のクラスに入れ替え
表に戻すときは逆に、animation flippedという二重のクラスをanimationクラスに戻し
これでbackクラスのtransform:rotateY(180deg)が回転アニメーションを起こし、回転して最初の状態のクエスチョンマークの表示に戻り
　プログラムの動作としては、animationとanimation flippedをイベントごとに交互に入れ替えればよいことになります。」（第８１頁第１−２９行の記載。）
ｄ）第８１頁には、
？を表側に向けたfrontの上に、透明背面を表側に向けたbackを配置した状態から、１８０度回転させ、透明背面を表側に向けたfrontの上に、３を表側に向けたbackを配置した状態とすることにより、？が見える状態から３が見える状態に見え方が変わる
　上記下線部及び関連箇所の記載によれば、引用文献１には、入力装置として、以下の発明（以下、「引用発明」という。）が記載されている。
　「クエスチョンマークの表示のカードをタップすると、そのイベントでカードが回転扉のように立体的に回転して、裏面からラッキーナンバーが表示されるようにした、ＣＳＳアニメーションを動かすプログラムであり、
　frontクラスとbackクラスの２つのクラスを表の面と裏の面として重ね合わせ、frontの上にbackが重なるようにし、
　backface-visibility:hiddenの指定は、背面を隠すということであり、この指定をすると、背面が表になるときは全体が透けるようになり、
　backクラスのtransform:rotateY(180deg)は、裏面を最初から裏返しておくという指定で、backfacevisibility:hiddenで、その背面は見えず、下になっているfrontの表面の？が透けて表に見えるようになり、
　１８０度回転をすると、backの背面だったnumberの値が表になり、frontはこの陰に隠れて見えなくなり、
　？を表側に向けたfrontの上に、透明背面を表側に向けたbackを配置した状態から、１８０度回転させ、透明背面を表側に向けたfrontの上に、３を表側に向けたbackを配置した状態とすることにより、？が見える状態から３が見える状態に見え方が変わるようになっており、
　アニメーションの指定はanimationクラスとflippedクラスを使い、
　裏面に返すときは、animationクラスをanimation flippedという二重のクラスに入れ替え、表に戻すときは逆に、animation flippedという二重のクラスをanimationクラスに戻し、これでbackクラスのtransform:rotateY(180deg)が回転アニメーションを起こし、回転して最初の状態のクエスチョンマークの表示に戻る
　プログラム。」
２．引用文献２について
　引用文献２には、図面とともに次の事項が記載されている。
ｅ）「【００１４】
　図３（ａ）は、アニメーションを実行する処理の流れを示すフローチャートである。まず、ステップＳ３１０において、読み込み部２１２は、コンテンツデータ２１１から実行するアニメーションに必要な情報を読み込む。次に、ステップＳ３２０において、選択部２１３は、読み込まれた情報を解析して、アニメーション方法を選択する。次に、ステップＳ３３０において、実行部２１４は、選択されたアニメーション方法に従って、アニメーションを実行する。尚、ここで
アニメーションとは、時間の経過に従って表示形態の少なくとも一部が徐々に変化していく表現技法
【００１５】
　図３（ｂ）は、ステップＳ３１０の処理を詳細に示すフローチャートである。まず、ステップＳ３１１において、読み込み部２１２は、コンテンツデータ２１１から、実行するアニメーションに必要な情報を探索する。尚、コンテンツデータ２１１には、アニメーション情報（図５（ａ））、オブジェクトデータ（図５（ｂ））が含まれているものとする。
【００１６】
　本実施形態では、アニメーション情報として、図５（ａ）のアニメーション１、アニメーション２が探索されたものとする。尚、図５（ａ）のアニメーション情報に含まれる
アニメーション１の情報は、
アニメーション開始時にオブジェクト１が表示されていたものが、１２０ミリ秒かけてオブジェクト２が表示されるよう徐々に変化するアニメーションことを示す情報
アニメーション２の情報は、
アニメーション開始時にオブジェクト２が表示されていたものが、２００ミリ秒かけてオブジェクト１が表示されるよう徐々に変化するアニメーションことを示す情報
ｆ）「【００２３】
　図３（ｃ）は、ステップＳ３３０の詳細を示すフローチャートである。まず、ステップＳ３３１において、実行部２１４は、アニメーションの実行開始時点からの経過時間（現在時刻）を取得する。次に、ステップＳ３３２において、実行部２１４は、現在時刻がアニメーションの終了時点に達しているか否かを判定する。尚、ステップＳ３３２において、現在時刻がアニメーションの終了時点に達していると判定された場合、一連の処理を終了し、現在時刻がアニメーションの終了時点に達していないと判定された場合、ステップＳ３３３の処理を実行する。ステップＳ３３３において、実行部２１４は、選択されたアニメーション方法に応じて、現在時刻におけるオブジェクトの情報を決定する。次に、ステップＳ３３４において、実行部２１４は、ステップＳ３３３で決定したオブジェクトの情報に基づいて、オブジェクトを描画し、ディスプレイ２０４に出力する処理を実行する。
【００２４】
　即ち、ステップＳ３３４において、アニメーション１については、アニメーション開始時からアニメーション継続時間の中間時点である６０ミリ秒後の時点までは、オブジェクトの不透明度を１．０（不透明）となる。そして、アニメーション開始時から６０ミリ秒後の時点からアニメーション終了時までは、オブジェクトの不透明度を０．０（透明）となる。また、ステップＳ３３４において、アニメーション１については、中塗色がアニメーション開始時から６０ミリ秒かけて、緑色から緑色と青色の中間色へ変化する。また、アニメーション開始時から６０ミリ秒より後については、オブジェクトの不透明度が０．０となるため、オブジェクトは表示されない。また、ステップＳ３３４において、アニメーション１については、サイズを一定に保ったまま、表示位置がアニメーション開始時から６０ミリ秒かけて徐々に移動することになる。尚、アニメーション開始時の表示位置とは、オブジェクトの左上の端が、画面の端部（左上の端）から右方向に２０ミリメートル、下方向に２０ミリメートル離れている位置である。また、アニメーション開始時から６０ミリ秒の表示位置とは、オブジェクトの左上の端が、画面の端部（左上の端）から左方向に１５ミリメートル、上方向に１５ミリメートル離れている位置である。即ち、表示位置がアニメーション開始時から６０ミリ秒には、オブジェクトは一部だけ画面上に表示され、残りが画面外となっている。また、アニメーション開始時から６０ミリ秒より後については、オブジェクトの不透明度が０．０となるため、オブジェクトは表示されない。また、ステップＳ３３４において、アニメーション１については、オブジェクトの拡縮率、回転角も変化しない。尚、アニメーション開始時のオブジェクトとアニメーション終了時のオブジェクトとで、拡縮率、回転角が変化している場合には、拡縮率、回転角が徐々に変化するようなアニメーションとなる。
【００２５】
　また、ステップＳ３３４において、
アニメーション２については、アニメーション開始時から２００ミリ秒かけて、オブジェクトの不透明度が０．０（透明）から１．０（不透明）となるよう徐々に変化
【００２６】
　図６（ａ）は、アニメーション２について、時間の経過とともに不透明度が変化する様子を示す図である。図６（ｃ）は、アニメーション１について、アニメーションの継続時間の半分が経過した時点である６０ミリ秒後で、オブジェクトの不透明度を１．０から０．０に切り替える様子を示す図である。従って、アニメーション１については、図６（ｂ）に示すような、時間の経過とともに不透明度が変化するアニメーションは実行されない。」
第６　対比・判断
１．本願発明１について
（１）対比
　本願発明１と引用発明とを対比する。
ア．引用発明は、「クエスチョンマークの表示のカードをタップすると、そのイベントでカードが回転扉のように立体的に回転して、裏面からラッキーナンバーが表示されるように」、「frontクラスとbackクラスの２つのクラスを表の面と裏の面として重ね合わせ」たものであるから、引用発明の「クエスチョンマーク」は本願発明１の「第１コンテンツ」、引用発明の「ラッキーナンバー」は本願発明１の「第２コンテンツ」にそれぞれ相当し、引用発明の「frontクラスとbackクラスの２つのクラスを表の面と裏の面として重ね合わせ」ることは、本願発明１の「第１コンテンツと第２コンテンツとを重ねて画面に配置する表示制御手順」に相当する。
イ．引用発明の「クエスチョンマークの表示のカードをタップすると、そのイベントでカードが回転扉のように立体的に回転して、裏面からラッキーナンバーが表示されるようにした」ものであり、「frontの表面の？が透けて表に見え」る状態から、「１８０度回転をすると、backの背面だったnumberの値が表になり、frontはこの陰に隠れて見えなくな」ることは、本願発明１の「前記第１コンテンツと前記第２コンテンツとを前記画面に平行な軸を回転軸として回転表示する」「コンテンツ変更手順」に相当する。
ウ．引用発明は、「？を表側に向けたfront」を「１８０度回転させ」「透明背面を表側に向けたfront」とするものであり、「backface-visibility:hiddenの指定は、背面を隠すということであり、この指定をすると、背面が表になるときは全体が透ける」ものであるから、「透明背面を表側に向けたfront」が「？を表側に向けたfront」より透明度が高いのは明らかである。
　したがって、引用発明の「？を表側に向けたfront」を「１８０度回転させ」「透明背面を表側に向けたfront」とすることは、本願発明１の「前記回転表示の間に、前記第１コンテンツの透明度を徐々に高く」「するコンテンツ変更手順」と「前記回転表示の間に、前記第１コンテンツの透明度を高く」「するコンテンツ変更手順」である点で共通するといえる。
エ．引用発明は、「透明背面を表側に向けたback」を「１８０度回転させ」「３を表側に向けたback」とするものであり、「backface-visibility:hiddenの指定は、背面を隠すということであり、この指定をすると、背面が表になるときは全体が透ける」ものであるから、「３を表側に向けたback」が「透明背面を表側に向けたback」より透明度が低いのは明らかである。
　したがって、引用発明の「透明背面を表側に向けたback」を「１８０度回転させ」「３を表側に向けたback」とすることは、本願発明１の「前記回転表示の間に、」「前記第２コンテンツの透明度を徐々に低くするコンテンツ変更手順」と「前記回転表示の間に、」「前記第２コンテンツの透明度を低くするコンテンツ変更手順」である点で共通するといえる。
オ．引用発明の「ＣＳＳアニメーションを動かすプログラム」は、本願発明１の「コンピュータに実行させる」「情報表示プログラム」に相当する。
　したがって、本願発明１と引用発明との間には、次の一致点と相違点とがあるといえる。
〈一致点〉
　「第１コンテンツと第２コンテンツとを重ねて画面に配置する表示制御手順と、
　前記第１コンテンツと前記第２コンテンツとを前記画面に平行な軸を回転軸として回転表示するとともに、前記回転表示の間に、前記第１コンテンツの透明度を高くし、前記第２コンテンツの透明度を低くするコンテンツ変更手順と、
　をコンピュータに実行させるための情報表示プログラム。」
である点。
〈相違点〉
　本願発明１の「コンテンツ変更手順」は、「前記回転表示の間に、前記第１コンテンツの透明度を徐々に高くし、前記第２コンテンツの透明度を徐々に低くする」ものであるのに対し、引用発明は、「カードが回転扉のように立体的に回転」し「背面が表になるときは全体が透ける」ものではあるものの、「回転表示の間」に「透明度を徐々に」変化させるものではない点。
（２）相違点についての判断
　上記相違点について検討する。
　引用文献２の上記摘記事項ｅ）、ｆ）に記載されるように、アニメーションにおいて、不透明度（透明度）を徐々に変化させること自体は、本願出願前周知技術であると認められる。
　一方、引用発明は、「カードが回転扉のように立体的に回転」するアニメーションを動かすものであるから、実際のカードがカードの面内の軸を回転軸として回転する状態を模擬することを意図したものであることは明らかである。
　そして、実際のカードの当該状態を模擬する場合、カードの表面と裏面との表示の切替えに応じて、表示されるコンテンツの透明度を０％とし、非表示となるコンテンツの透明度を１００％とすることが自然であり、コンテンツの透明度を徐々に変化させるものとする動機があるとはいえない。
　したがって、本願発明１は、当業者であっても、引用発明及び上記周知技術に基づいて容易に発明できたものであるとはいえない。
２．本願発明２−８について
　本願発明２−８は、本願発明１を直接又は間接的に引用するものであり、上記「１．請求項１について」にて述べたのと同じ理由により、当業者であっても、引用発明及び上記周知技術に基づいて容易に発明できたものであるとはいえない。
３．本願発明９−１１について
　本願発明９−１１は、本願発明１を実質的に、第１，第２コンテンツの透明度の高低を入れ替えると共に、「情報表示方法」、「情報表示装置」、「配信装置」とした発明であるから、本願発明１と同様の理由により、当業者であっても、引用発明及び上記周知技術に基づいて容易に発明できたものであるとはいえない。
第７　原査定について
　本願発明１−８は、「前記回転表示の間に、前記第１コンテンツの透明度を徐々に高くし、前記第２コンテンツの透明度を徐々に低くする」との構成を、本願発明９−１１は、「前記回転表示の間に、前記第１コンテンツの透明度を徐々に低くし、前記第２コンテンツの透明度を徐々に高くする」との構成を有するものであり、当業者であっても、拒絶査定において引用された引用文献１−２に基づいて、容易に発明できたものとはいえない。
　したがって、原査定を維持することはできない。
第８　むすび
　以上のとおり、原査定の理由によっては、本願を拒絶することはできない。
　また、他に本願を拒絶すべき理由を発見しない。
　よって、結論のとおり審決する。