astamuse Lab

astamuse Labとは、アスタミューゼのエンジニアとデザイナーのブログです。アスタミューゼの事業・サービスを支えている知識と舞台裏の今を発信しています。

【モバイルフレンドリー対応:実例紹介】デザイナーが最低限考慮するべき3つのポイント

f:id:astamuse:20170801184442p:plain

アスタミューゼデザイン部のMatsumotoです。
早いもので2017年も折り返し。
弊社では、半年に1回人事考課があり、ちょうど先日2017年上期プロジェクトの振り返りを行っていました。

今回のエントリーでは、その考課期間に行ったastamuse.comのモバイルフレンドリー対応の一部を紹介したいと思います。

プロジェクト概要

astamuse.com 「モバイルフレンドリー対応」プロジェクト

現在8月9日時点の対応範囲

  • 技術一覧
  • ヘッダー&フッター
  • 技術詳細ページ
  • キーワード詳細ページ

背景

年々増えてくるモバイルからのトラフィックと、Googleがスマホ対応が不適切なサイトの検索順位引下げ発表により、リリース当初(2012年)はPC環境で使われることを想定してデザインしたastamuse.comもその状況を無視できなくなり、アクセス数が多いコンテンツからモバイルフレンドリー対応を行うことになりました。

年々増えていくモバイルトラフィック (astamuse.com全体の割合)

2012年 15%
2013年 15%
2014年 22%
2015年 27%
2016年 32%

目標

  • Googleのモバイルフレンドリーテストのアラートすべてクリアして、モバイルフレンドリーの基準を満たす。
  • 社内でユーザビリティーテストを行い、UXの向上を確かめる評価をもらう。

効果

  • モバイルフレンドリー対応により、各数値(滞在時間、直帰率、離脱率)の改善。
  • 検索順位UPにより、モバイルからのトラフィック増加。

はじめに

デザインをスタートさせる前に、まずは、Google Search Consoleのモバイルフレンドリーテストで現状把握。
みごと、モバイルフレンドリーテストで失格。

f:id:astamuse:20170727145353p:plain

エラー項目
  • テキストが小さすぎて読めません
  • コンテンツの幅が画面の幅を超えています
  • クリック可能な要素同士が近すぎます

上記エラーをひとつひとつクリアにしていくために実践した、最低限考慮すべき3つのポイントを紹介していきます。

ポイント1:ベストなフォントサイズにする

まずは、エラー項目「テキストが小さすぎて読めません」の対処。モバイルフレンドリーにおけるベストなフォントサイズを調べることからスタートしました。

技術詳細ページ(公開公報本文)の文章は長い、長い。
同じようにコンテンツのテキストが長いサイトといえば、ニュースサイト。参考にさせていただきました。 結果、長文が読みやすいなと感じたサイトの多くは基本フォントサイズは16pxでした。

ちなみにGoogleが推奨するフォントサイズも16px。
一番小さいサイズの推奨は12pxです。

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

引用/参考: 読みやすいフォント サイズを使用する  |  PageSpeed Insights  |  Google Developers

弊社も世の中の読みやすいとされるフォントサイズに習い、本文のフォントサイズは最適とされる16pxにしました。
行の高さ1.75、1行の文字数は21文字に。(こちらも、他サイトを参考にベストな値で調整)

f:id:astamuse:20170727152416p:plain

ポイント2:リンク範囲と間隔のベストバランスを見つける

次に、エラー項目「クリック可能な要素同士が近すぎます」の対処。
スマートフォンは画面が小さいため、設置したリンクとリンクの間隔が十分にないと、指でタップする際に、うまく押せないことが多々あります。

具体的には、ページ上に密接して配置されている「ブックマーク」と「PDF」のボタンの箇所が、エラーを引き起こしていたと思われます。 ということで、クリックしやすいように、下記2点を考慮してデザインしていきました。

  • リンク範囲は大きくとる
  • リンク同士を近づけすぎず、十分な間隔を確保して、押し間違えを防止する(水平方向と垂直方向で5ミリ(32CSS ピクセル)以内に他のタップターゲットを配置しない)

f:id:astamuse:20170727124529p:plain

参考: Size Tap Targets Appropriately  |  PageSpeed Insights  |  Google Developers

ポイント3:コンテンツの幅に要注意

次に、エラー項目「クリック可能な要素同士が近すぎます」の対処。
スマートフォンの画面からはみ出している場合、このようなエラーがでます。 左右にスクロールしなければならない状態は、モバイルフレンドリーではないと評価されてしまうので、要注意。

さて、問題の箇所はどこだったかというと、ドロップダウンメニューの箇所。 タップのしやすさとタップゲートの間隔を十分にとったモバイルフレンドリーなUIに変更しました。

f:id:astamuse:20170727122724p:plain

参考: Size Content to Viewport  |  PageSpeed Insights  |  Google Developers

結果

  • Googleモバイルフレンドリーテストのエラーすべてクリア。モバイルフレンドリーの基準満たす。
  • 直帰率改善(3.17%減)
  • 離脱率改善(1.63%減)

※技術ページ・モバイルトラフィックのみに絞って計測(リリース前後1ヶ月で比較)
※直帰率、離脱率の数値については、非公開とさせていただきます。

数値の結果は、なんとも微妙でわずか数パーセントの改善のみ。 引き続き定点観測していき、継続して改善していく必要がありそうです。

ただ、目標の一つであった、Googleモバイルフレンドリーの基準はひとまず満たすことができたので、最低限の課題はクリアできたと思っています。

f:id:astamuse:20170727154928p:plain

また、社内のレビューは好評でしたので、実際のユーザーさまの声もぜひ聞かせていただけると嬉しいです。

日頃アスタミューゼをお使いのユーザーの皆さまへ

スマートフォン向けに新しくなったastamuseの技術ページをご覧いただき、読みやすさ、使い心地などのご意見・ご感想などTwitter@astamuseLabにお寄せいただけると嬉しいです。

先月世の中で話題となった特許より、astamuse.com技術ページのリンクをご紹介させていただきます。 ぜひスマートフォンにてご覧ください。

バーチャルホームロボット「Gatebox」

21世紀の“2次元の嫁?”として注目のバーチャルホームロボット。

参考: 【特許取得のお知らせ】Gatebox、「キャラクターとの対話関連技術」に関する特許を取得|Gateboxのプレスリリース

特許のたまご

卵かけご飯に合う卵として7年かけて開発。

参考: 開発7年「卵かけご飯に合う卵」、東日本で先行発売 - ITmedia ビジネスオンライン

特許とその制度について 出願時に申請できる特例と特殊な出願

お久しぶりです。主に特許関連のデータ処理を担当しているBTと申します。 今回は、出願時に申請できる特例と特殊な出願についてご説明いたします。 宜しくお願いいたします。

出願時に申請できる特例

出願時に申請できる様々な特例について説明します。

新規性喪失の例外

出願する内容についてすでに学会で発表しているあるいは論文誌に載せているといった場合には、新規性の喪失の例外の適用を受ける必要があります。そのためには、特許出願と同時にその旨を記載した書面を提出します。さらに出願から30日以内に証明書の提出を行う場合もあります。これらを行わないと、出願の内容を一般に公開したというこれらの事実を理由に拒絶査定となってしまうためです。

新規性の喪失の例外の適用は、出願の内容を第三者に知られる状態となってしまってから6月以内に出願した場合のみに申請することが可能であるため注意が必要です。また、異なる別個の事象や理由で出願の内容が第三者に知られる状態となっている場合は、その事象や理由毎に申請が必要な点にも注意が必要です。

申請が認められると、出願の内容が出願前に第三者に知られる状態となった事実は無かったものとして扱われます。

かっては新規性の喪失の例外は適用条件がもっと厳しかったため、同じ研究内容について論文の投稿と特許出願または実用新案登録出願をする場合は、必ず論文の投稿より先に特許出願または実用新案登録出願を済ませてしまうようにと言われて苦労したものですが、現在は新規性の喪失の例外の適用条件がかなり緩和されたため使いやすい制度になっています。

優先権主張(パリ優先権主張)

パリ条約の日本以外の同盟国においてにすでに出願済みの内容と同じ内容について出願する場合は、優先権(後述する国内優先権とは別物で、区別するために以下パリ優先権とする)を主張することができます。そのためには、その旨と同盟国の国名と同盟国における出願日を記載した書面を出願から一定期間に提出します。

日本以外の同盟国における出願日から1年以内に同一内容または一部の内容について出願を行う必要があります。

優先権の適用が認められた場合は、同盟国における出願日を基準として判断されるようになります。

国内のみに出願する場合には意味の無い特例ですが、広く海外に事業を展開している企業で海外の国に先に出願したり海外の国において国際出願したりする場合に有効に利用できる特例です。

外国語書面出願

出願内容の記載は日本語で行うのが原則ですが、海外の企業などの場合日本語に翻訳するのにどうしても時間がかかる場合があります。そのような場合に利用できるのが外国語書面出願です。出願で提出するべき書類のうち願書のみ日本語で作成(外国語書面出願であることを願書に明記)して、他の書類は英語をはじめとする外国語で出願することができます。

ただし、出願から1年4月以内に日本語による翻訳文を提出する必要があります。翻訳文の提出をしない場合は出願人に通知がなされますが、それでも翻訳文の提出が無い場合は取り下げという扱いになります。 また、翻訳文は出願時に英語をはじめとする外国語で記載されたもとの内容を超えるものであってはなりません。もとの内容を超えた場合は誤訳訂正書を提出して補正しない限り、拒絶査定となります。

外国語書面出願は以前は英語でしか受け付けてもらえませんでしたが、今では英語以外の外国語でも受け付けてもらえるようになり、英語圏以外の国の出願人にとって便利なものになりました。

参照出願

国内または他の国ですでに特許出願した内容と同じ内容について特許出願する場合に、これを参照するように主張して特許出願することができます。この場合、特許請求の範囲や明細書、図面の提出は省力することができます。参照先が外国語でなされた特許出願の場合は、出願日から4月以内に翻訳文を提出する必要があります。 しかし、この制度は最近になって特許法条約を批准するために設けられた規定で、すでに上記の外国語書面出願や下記で説明する分割出願、変更出願等様々な制度が整っている我が国ではほとんど意味の無い規定となっています。他にもっと有利な条件で出願できる制度がいろいろとあることから、実際にこの方法で出願する人はいないのではないかと思われます。

特殊な出願

通常の出願とは異なる特殊な出願について説明します。ここでいう特殊な出願とは、すでに国内においてなされた何らかの出願をベースとして行う出願のことです。

国内優先権主張を伴う出願

国内ですでに出願(以下、先の出願)済みで、先の出願の内容をさらに発展させた発明や不十分な部分を補った発明について新たな出願を行いたい場合は、国内優先権主張を伴う出願(以下、後の出願)を行うことができます。 国内優先権主張を伴う出願では、後の出願に含まれる内容のうち先の出願に記載されている内容については先の出願の出願日を基準として判断されます(下記に記載する他の特殊な出願と異なり、後の出願の出願日が先の出願の出願日に遡及するわけではありません)。

国内優先権主張を伴う出願、先の出願から1年以内に出願する必要があり、国内優先権主張を伴う出願を行った場合、先の出願はその出願から1年3月経過した後に取り下げという扱いになります。また、先の出願がさらに前の出願に対する国内優先権主張を伴う出願であってはなりません(このような場合は、後の出願の国内優先権主張は無効となって後の出願の出願日で判断されることになります)。

国内優先権主張を伴う出願の目的は、最初に出願した発明や考案を出発点として、この発明や考案をを基本としつつ、その後の改良発明や考案等を取り込んだ十分な内容の出願へと発展させることです。

通常出願とは異なる特殊な出願の中で最も利用されている出願形態だと思われます。この出願制度の表向きの趣旨は出願の内容を充実させることなのですが、権利化された場合は後の出願の出願日を基準として存続期間が発生するため、存続期間を最大で1年延ばす効果を持っていることがよく利用される理由の一つでしょう。

分割出願

2以上の発明や考案を包含する出願(以下、もとの出願)の一部について、1又は2以上の新たな出願(以下、新たな出願)をして、もとの出願を複数の出願に分割することができます。その新たな出願は、分割前のもとの出願の時にしたものと見なされて出願日が遡及し、新たな出願は審査等においてもとの出願の日を基準に判断されることになります。

分割出願はいつでもできるわけではなく、先の出願について補正ができる期間、先の出願について特許査定・登録査定又は最初の拒絶査定の謄本の送達があった日から3月以内に限られ、もとの出願について登録または拒絶が確定している場合も分割出願をすることはできません。 新たな出願において、もとの出願に記載されていない内容が追加されていると認められた場合は、出願日が遡及せず新たな出願を実際に出願した日が出願日として扱われますので注意が必要です。 また、分割出願を行うともとの出願と新たな出願で同じ内容が記載されている状態になりますので、もとの出願については新たな出願に記載した内容を削除する補正を行う必要があります。これを行わないと、もとの出願と新たな出願でそれぞれを引用されて拒絶査定となってしまいます。

分割出願の目的は、大きく2つあります。もとの出願において、全ての請求項で同一の特別な技術的特徴を持たない(単一性を満たさない)と審査で判断された場合、拒絶査定となります。これを避けるため、もとの出願および新たな出願のそれぞれで単一性を満たすようにもとの出願から分割出願を行うことにより単一性を理由とした拒絶査定を回避することができます。さらに、もとの出願に含まれている複数の請求項のうち、一部についてはすぐに特許査定となりそうだが、他については補正や審判等で時間がかかりそうな場合があります。このような場合に分割出願を行ってすぐに特許査定となりそうな発明については早期に権利化を行い、残りについてはじっくりと対応を検討するといったことが可能になります。

分割出願は、特殊な出願の中で国内優先権主張を伴う出願に次いで多く利用される出願形態だと思います。審査の過程で補正をくりかえすことで分割出願する必要が生じたり、さまざまな効果を狙って分割出願をしたりする場合が多いと思われます。

変更出願

すでに行った実用新案登録出願又は意匠登録出願(以下、もとの出願)を特許出願(以下、新たな出願)に、またはすでに行った特許出願と意匠登録出願(以下、もとの出願)を実用新案登録出願(以下、新たな出願)に、それぞれ変更することができます。これを変更出願といいます。変更された新たな出願は、もとの出願の時にしたものと見なされて出願日が遡及し、新たな出願は審査等においてもとの出願の日を基準に判断されることになります。

変更前の変更出願ができるのは、特許出願に変更する場合はもとの出願が特許出願実用登録新案出願又は意匠登録出願の場合と、実用新案登録出願に変更する場合はもとの出願が特許出願又は意匠登録出願の場合のみであり、元の出願が商標登録出願の場合は変更出願することはできません。変更出願は、もとの出願がその出願日から3年を経過するまでに限られ、もとの出願が意匠登録出願である場合はその最初の拒絶査定の謄本の送達があった日から30日以内である場合も変更出願ができます。 新たな出願において、もとの出願に記載されていない内容が追加されていると認められた場合は、出願日が遡及せず新たな出願を実際に出願した日が出願日として扱われますので注意が必要です。 また、変更出願を行うともとの出願は取り下げという扱いになりますので、注意が必要です。もとの出願の一部について変更出願をしたい場合は、先に分割出願をしてその後変更出願するという手順が必要になります。

変更出願の目的は、はじめに特許出願をしたが実用新案登録で十分と判断した場合や、はじめに意匠登録出願をしたが意匠での権利取得が難しそうなので特許出願や実用新案登録出願に変更する場合などが挙げられます。

なお、もとの出願が実用新案登録出願である場合、形式的・基礎的な要件を満たすかどうかチェックする(方式審査)だけで、無審査(実体審査無し)で登録(出願から1月)となるため、通常は分割出願ができる期間はほとんどありません。しかし、仮に実用新案として登録された後であっても次に説明する実用新案登録に基づく特許出願の制度を利用することで特許出願に変更することができます。

特許出願とと実用新案登録出願と意匠登録出願で、出願内容の記載が似通っているのかといわれると、特許と実用新案はその通りなのですが、意匠についてはピンとこないかもしれません。形状が特別なこれまでにない技術的特徴と新規のデザイン性の両方を有している場合ということになるでしょうが、現実にはレアケースだと思われます。

実用新案登録に基づく特許出願

すでに実用新案登録出願を行って実用新案登録を受けている場合に、その実用新案登録の内容と同じか範囲内に含まれる内容について特許出願を行うことができます。その新たな特許出願は、実用新案登録出願のの時にしたものと見なされて出願日が遡及し、新たな特許出願は審査等においてもとの実用新案登録出願の日を基準に判断されることになります。

実用新案登録に基づく特許出願はもとの実用新案登録出願の出願日から3年を経過するまでに限られ、実用新案登録技術評価請求がなされてない(他人から請求された場合で、その旨の通知を受けた場合日から30日以内の場合は除く)など様々な制約があります。ここで、実用新案登録技術評価とは、無審査で登録される実用新案について特許庁がその登録内容について権利が有効か否か客観的な判断資料を提供する制度で、特許における実体審査にかわるものです。実用新案登録技術評価請求がなされているにもかかわらず特許出願を認めてしまうと、同一の内容についてまた特許審査することになってしまうためにこのような制約がかされています。 また、もとの実用新案登録は特許出願時に放棄する必要がありますので、特許出願の後の特許審査で拒絶査定となってしまった場合には一切権利が残らないことを注意する必要があります。

実用新案登録に基づく特許出願の目的は、実用新案権と比較してより強い権利である特許権を取得する手段の提供にあります。実用新案登録は無審査で行われる関係上どうしても弱い権利(権利の行使に上記の実用新案技術評価請求する必要があるなどの制約あり)であり、権利の存続期間も特許の半分の10年と短くなってしまいます。そのため、当初実用新案で十分として、実用新案登録出願をして実用新案登録を受けたが、その後思いのほか有用な技術であることが判明して存続期間を特許と同じように長くしたい、あるいはもっと強い権利にしたいといった場合に対応できるようにするために設けられている出願制度になります。

まとめ

以上、出願時に申請できる特例と特殊な出願について説明をしてきました。次回は、出願公開や審査について見ていきたいと思います。

最後になりましたが、 アスタミューゼでは現在、エンジニア・デザイナーを募集中です。 興味のある方はぜひ 採用サイト からご応募ください。

参考にした資料など

特許とその制度について 特許出願および実用新案登録出願

お久しぶりです。主に特許関連のデータ処理を担当しているBTと申します。 前回、特許及び実用新案の概要についてご説明させて頂きましたが、今回は日本国内における「特許出願」および「実用新案登録出願」についてご説明いたします。 宜しくお願いいたします。

特許出願

まずは、出願から特許をうけるまでの基本的な流れは、以下の図のようになります。

f:id:astamuse:20170118114118j:plain

このうち、「特許出願」について説明します。

発明に対して日本国で特許を受けるためには、特許庁に「特許出願」をする必要があります。その際に以下の書類をそろえて提出する必要があります。

f:id:astamuse:20170118114126j:plain

それぞれの書類について説明していきます。

「願書」

「願書」には発明の内容そのものではなく、発明者の住所と氏名、出願人の住所又は居所と氏名又は名称、添付物件の目録(この「願書」以外の書類の一覧)などを記載します。さらに出願人が外国人や日本に営業所を持たない外国の企業の場合は、代理人(要は日本の弁理士)の住所と氏名も記載することが必要です。

「明細書」

「明細書」には、「発明の詳細な説明」をもうけて、特許を受けようとする発明やその他の発明(特許を受けるまでは考えていないが、特許を受けようとする発明と同時にした関連する発明など)について説明を記載します。その発明の属する技術分野における通常の知識を有する者(つまり、その分野に従事している技術者など)が「明細書」を読んで発明を実施(発明品の製造など)出来る程度に明確かつ十分な内容を記載することが必要とされ、読んでも理解不能であるとか、発明を再現できないような曖昧な記載は認められません。記載する内容としては、発明に到る課題、課題を解決するための手段、発明の効果、発明の具体例である実施例、関連発明(「特許出願」の時に把握している関連する他の発明)などがあり、後で述べる「特許請求の範囲」とは異なり一般的な文章で記載します。

「特許請求の範囲」

「特許請求の範囲」には、特許を受けたい発明について、その発明を特定する為に必要な全ての事項を記載する必要があります。発明が複数ある場合は、「請求項1、請求項2、・・・」のように発明ごとに分けて記載することができますが、一つの「特許出願」の「特許請求の範囲」に含まれる複数の発明は、一定の技術的関係を有する必要があります。これは一つの出願にのなかに無関係な発明が複数含まれていると、その出願の審査や第三者が出願内容を参照する際に混乱をきたすためです。

「特許請求の範囲」は、独特の文体で書かれます(中にはそうなっていない出願もありますが、それは弁理士や特許事務所を代理人とせずに直接出願しているか、弁理士や特許事務所のチェックを受けていない場合が多いようです)。一つの請求項は一つの文で記載するため、構成要素が多い発明や手順などが多い発明の場合、一つの請求項が延々と数ページにわたって続くこともあります。一般的にはとても読みにくい文体のために、特許に関する文書を読んだり書いたりするのが苦手という人も多いと思います。「特許請求の範囲」は、もし特許を受けた場合にその特許の権利範囲を決めるための法的文書としての性質を持つことから、曖昧さを排除して権利範囲を明確にする法律的に有効な文章であることが望ましく、このような文体にせざるおえないという事情があります。

また、「特許請求の範囲」はの記載には、以下の点を守る必要があります。 * 請求項に記載した特許を受けようとする発明が「明細書」の「発明の詳細な説明」に記載されている必要があります。発明について「特許請求の範囲」に記載するだけではなく、「明細書」に方にも記載(通常はより詳細な説明と共に)すること * 特許を受けようとする発明が明確に記載されていること * 請求項ごとの特許を受けようとする発明の記載が簡潔であること * その他経済産業省令で定めるところにより記載されていること

「図面」

「図面」は、「特許出願」における他の出願書類と違って必ず必要というわけではありません。図がないと説明が難しい物の発明では無く図がなくても説明が可能な方法の発明や、化学など発明の分野によっては図をそれほど必要としない分野などで、「図面」を添付しない出願が多いことがありますが、特許を受けようする発明について解りやすく(特に「特許出願」を審査する審査官により深く理解してもらうために)図を用いることが望ましいため、一般的には「図面」が無い出願はほとんどありません。

「要約書」

「要約書」は、「明細書」、「特許請求の範囲」、「図面」に記載した発明の概要を記載したものです。これは、「特許出願」の数の増大や技術の高度化・複雑化によって情報へのアクセスが困難になっている状況から、出願した内容へのアクセスを容易にして利便性を高めるために必要とされているものです。その性質上、「要約書」の記載内容が「明細書」、「特許請求の範囲」、「図面」に記載した発明とかけ離れていたり、不明瞭である場合は、特許庁によって内容が書き換えられることがあります。

その他の申請書など

その他「特許出願」にあたり特例を受けたい場合は、それぞれの特例の申請書を提出する必要があります。特例の内容については次回に説明したいと思います。

実用新案登録出願

まずは、出願から実用新案登録をうけるまでの基本的な流れは、以下の図のようになります。

f:id:astamuse:20170118114131j:plain

このうち、「実用新案登録出願」について説明します。

発明に対して日本国で特許を受けるためには、特許庁に「実用新案登録出願」をする必要があります。その際に以下の書類をそろえて提出する必要があります。

f:id:astamuse:20170118114135j:plain

「実用新案登録出願」の場合に特許庁に提出する書類は、上記の「特許出願」とほとんど(但し、「特許請求の範囲」は「実用新案登録請求の範囲」という書類名に変わります)同じですが、「実用新案登録出願」の場合は「特許出願」で提出が必須では無かった「図面」が必須となっています。これは、実用新案ではその保護対象が物品の形状、構造又は組合せに限定されており、考案(特許における発明に該当)の説明に「図面」が必要とされているためです。

まとめ

以上、特許と実用新案の出願について説明をしてきました。次回は、出願において申請することが出来る特例や通常出願とは違う特殊な出願について見ていきたいと思います。

最後になりましたが、 アスタミューゼでは現在、エンジニア・デザイナーを募集中です。 興味のある方はぜひ 採用サイト からご応募ください。

参考にした資料など

Copyright © astamuse company, ltd. all rights reserved.