正しい引用の書き方・表記方法。著作権法とHTML5を理解した上でblockquoteやqタグのcite属性を使用しよう。

著者:Yuichi Okita

正しい引用の書き方・表記方法。著作権法とHTML5を理解した上でblockquoteやqタグのcite属性を使用しよう。

【無料体験】
Amazon本を耳で聞ける、Audibleを無料で体験できます。

最終更新日:2019-11-12
公開日:2018-06-25
Header Image : Pixabay

2019-02-08:「文献表の書き方PDF」のリンク先(立教大学)を追加させて頂きました。
引用の出所を書く際に、著者名やURL、閲覧日などを記述する順序が分かり、大変有用に活用させて頂いております。


(▼本文はここから)
前回は著作権表示の書き方について書きました。今回の記事では正しい引用の書き方が話題となります。
引用は著作権法で認められていますので、要件を満たしていれば、無断での転載も可能となります。
ですので、「自分の文章をコピーされた」と直ぐに目くじらを立てる方もおられますが、
正しい引用の知識による対処が望まれると思います。

関連記事:条約や著作権法、各省庁、アメリカから学ぶ著作権表示の書き方

また、最近のYouTubeでは「以下引用あり」というコンテンツが多く、「引用」という言葉の使い方が間違っているものが圧倒的に多いため、警鐘をならす思いも込めて書いております。

引用の定義

引用は著作権法に従う必要がある

リンクは原則的に無断で張っても良いですが、引用は著作権法に従う必要があります
引用のルールが法律で定められていることは、特別に学んだ人を除いて、あまり知られていないと思います。

著作権法32条
公表された著作物は、引用して利用することができる。この場合において、その引用は、公正な慣行に合致するものであり、かつ、報道、批評、研究その他の引用の目的上正当な範囲内で行なわれるものでなければならない。
2 国若しくは地方公共団体の機関、独立行政法人又は地方独立行政法人が一般に周知させることを目的として作成し、その著作の名義の下に公表する広報資料、調査統計資料、報告書その他これらに類する著作物は、説明の材料として新聞紙、雑誌その他の刊行物に転載することができる。ただし、これを禁止する旨の表示がある場合は、この限りでない。
引用元:著作権法

  条文だけでは抽象的で分かりにくいので、社団法人著作権情報センター主催の弁護士の方のPDFには、下記のように引用の要件が書かれています。

引用の要件

  1. 「引用する者の著作物」が存在すること
  2. 「公正な慣行に合致する」こと
  3. 報道、批評、研究等の正当な目的があること
  4. 引用の目的にてらして必要な範囲内であること
  5. 引用される著作物が従であり、引用する側の著作物が主である「主従関係」があること
  6. 「本文」と「引用した部分」が明瞭に区分されていること
  7. 出所を明示すること

HTMLを用いて「本文」と「引用した部分」を明瞭に区分する方法

上記のうち、6と7が引用の方法論の要件なので、具体的にどのようなHTMLを用いて記述すれば良いのか、説明します。 具体的には、blockquoteタグや脚注プラグインを使って、「自分のコンテンツ」と「引用元のコンテンツ」を明瞭に区分します。

blockquoteタグを使う

1.WordPress編集画面 ビジュアルエディター

Blockquote at Visual editor on WordPress
example of blockquote on Web

WordPressのビジュアルエディターでは、下画像のマークがBlockquoteです。
1度クリックすると、少し右寄せになるのでその部分に引用コンテンツを貼り付けます。

画像をクリックすると、拡大表示されます。
画像提供:Copyright © Yuichi Okita

上の画像の赤枠部分のマークは日本ではダブルクォーテーションと呼ばれて馴染みのあるマークなのですが、
もともと「Quote」という英単語には、

  • 引用する
  • (例証・典拠として)引き合いに出す

などの意味があり、まさに上記の著作権法32条の引用部分は、定義を示すために根拠となる条文を引き合いに出しています。

Web表現上での注意 ダブルクォーテーションマークは昔から英語圏内で引用元を示すマークとして用いられてきています[1]
日本では百科事典や辞書類、大学の教科書、論述系の書籍の巻末に、鉤括弧『』を用いられるのが伝統的なので、Webでの表現では注意が必要です。 参考:引用符-Wikipedia

2.WordPress編集画面 テキストエディター

Blockquote at Text editor on WordPress.png

WordPressのテキストエディターでは、下画像の部分です。
1度クリックすると、Blockquoteの始まりのHTMLタグが挿入され、再度クリックするとHTMLタグを閉じます。

画像をクリックすると、拡大表示されます。
画像提供:Copyright © Yuichi Okita

blockquoteタグの始まり    blockquoteタグを閉じる
   ↓              ↓
<blockqote> 引用したコンテンツ </blockquote>

3.blockquoteタグを用いた結果、本文コンテンツと明瞭に区分されている

division between contents and quoted parts

blockquoteの部分は、WordPressテーマやプラグインによってデザイン表示が異なりますが、いずれの場合も記事本文コンテンツとは明瞭に区分されます。
本記事の場合は、フロントエンドは下画像のようになります。

画像をクリックすると、拡大表示されます。
画像提供:Copyright © Yuichi Okita

脚注プラグインを使う

脚注という表現方法をWebで広く広めたのがWikipediaのように私は記憶しています。
当初は「百科事典だからこその表現」と、敷居が高く感じられましたが、
自分の記事を分かりやすく表現するにはとても便利な表現手段だと知り、
WordPressを使って5年くらい経ってから、脚注プラグインを導入しました。
それまで「何というキーワードで検索すれば良いのか分からなかった」という事情もありました。

[Check]「脚注プラグイン ワードプレス」 という検索キーワードで検索すると、様々なプラグインの紹介記事が検索結果に表示されますので、お試しになってみてください。

本サイトでは、

Easy Footnotes | WordPress.org

というプラグインを使っております。 Wikipediaに近い表現にするには、

footnotes | WordPress.org

の方が注釈記号を多彩に選べるのですが、現行VersionのWordPress向けに更新されていないため、前者のプラグインを使用しております。

(2019-10-30:追記)

脚注プラグインを使った結果、引用元などが分かりやすくなる

Easy footnotes

ページの下部で引用元が分かりやすくなります。
画像では「引用元」という表記はないですが、後述のqタグによりユーザーエージェントの解釈からダブルクォーテーションマーク「” ”」が表示されているため、引用元ということは、HTML的にも英語圏のユーザーにも分かってもらえます。英語圏以外の人には分かりにくい表現になるかもしれませんので、私も今後気をつけたいと思います。

画像をクリックすると、拡大表示されます。
画像提供:Copyright © Yuichi Okita

引用の出所をHTMLタグで明示する方法

上記引用の要件7のWebで出所を明示する方法は、3つのHTMLソースの書き方があります。

HTMLによる3つの記述法

 

  1. 単純に引用元を書いて外部リンクを張る。
  2. 本文行中に、citeタグを用いて、引用の文章表現を添える。
  3. blockquoteタグやqタグの属性としてciteタグを使って、引用の出所を明示する。

単純に引用元を書いて外部リンクを張る。

引用元:<a href="https://ja.wordpress.org/">WordPress.org</a>

個人的には、現在のところこれで十分だと思っています。
引用元とはっきりと明示して、サイト名でURLのリンクを張っていますので、人間の目でも検索エンジンの解釈にも、明らかに引用元を示していることが伝わるからです。
「現在のところ」と但し書きしている理由は、HTML5でqタグやciteタグの意味が変更になった[2]以上、これらのタグを使わなければ存在意義が薄れてしまうので、積極的にこれらのタグを使っていった方が良いのかもしれません。
なぜ、こんなにあやふやな表現になるかと申しますと、仮に「HTML6で廃止」とならない可能性が無いとはいえないからです。

本文行中に、citeタグを用いて、引用の文章表現を添える。

まず例をみて頂きましょう。

<p>条文だけでは抽象的で分かりにくいので、<cite><a href="http://www.riso-ef.or.jp/law/law_3.pdf">社団法人著作権情報センター主催の弁護士の方のPDF</a></cite>には、下記のように引用の要件が書かれています。</p>
<blockquote><strong>引用の要件<a id="Requirement"></a></strong>
<ol>
  <li>「引用する者の著作物」が存在すること</li>
  <li>「公正な慣行に合致する」こと</li>
  <li>報道、批評、研究等の正当な目的があること</li>
  <li>引用の目的にてらして必要な範囲内であること</li>
  <li>引用される著作物が従であり、引用する側の著作物が主である「主従関係」があること</li>
  <li>「本文」と「引用した部分」が明瞭に区分されていること</li>
  <li>出所を明示すること</li>
</ol>
</blockquote>

本文中で著者の方をciteタグでマークアップして、「下記の内容は、citeタグで挟まれた著者から引用しました」と、本文中でインラインの形をとる引用方法です。
個人的には、次のblockquoteタグやqタグのcite属性が使いにくいときにこの表現を用いるのが望ましい、と考えています。 理由は、「読者はblockquoteの中で引用元が表記されている方が、読みやすいし理解しやすいのではないか?」と考えているからです。
仮にblockquoteをたくさん使用しているページだと、同じデザインでblockquoteが表示されますから、読者は読み飛ばしをしやすくなります。
その際、blockquote内に引用出所のタイトルなりURLが記載されていると、様式が似ているので軽快に読み飛ばせるでしょうけれども、
インラインで引用の出所が書かれていると、読者は視線をblockquote部分の上や下にずらして引用元を確認せねばならない作業が生じるため、読み飛ばしのリズムを崩してしまいます。 このような事態が考えられるため、個人的にオススメなのは次の方法です。

blockquoteタグやqタグの属性としてciteタグを使って、引用の出所を明示する。

blockquoteタグでcite属性を使って引用を示した例

blockquoteタグは段落単位で引用するときによく用いられます。
下の例、blockquoteタグの属性としてcite属性を使って、なおかつ、引用元を示した例です。

<blockquote cite="https://www.ron.gr.jp/law/law/chosaku.htm#2-3-5-seigen"><strong>著作権法32条</strong><br />
公表された著作物は、引用して利用することができる。この場合において、その引用は、公正な慣行に合致するものであり、かつ、報道、批評、研究その他の引用の目的上正当な範囲内で行なわれるものでなければならない。<br />
2 国若しくは地方公共団体の機関、独立行政法人又は地方独立行政法人が一般に周知させることを目的として作成し、その著作の名義の下に公表する広報資料、調査統計資料、報告書その他これらに類する著作物は、説明の材料として新聞紙、雑誌その他の刊行物に転載することができる。ただし、これを禁止する旨の表示がある場合は、この限りでない。<br />
<span style="color: #999999;"><span style="font-size: 8pt;">引用元:</span><span style="font-size: 8pt;"><a style="color: #999999;" href="https://www.ron.gr.jp/law/law/chosaku.htm#2-3-5-seigen">著作権法</a></span></span></blockquote>

上記のソース記述の場合、cite属性はフロントエンドに表示されませんが、blockquoteの範囲はこのURLから引用した、と明確にマークアップされています。
ここで注意点ですが、HTMLの言語的には引用している状態を認められますが、著作権法上は「引用元を明示」しなければならないので、
「引用元」と表記してサイト名を添える、そしてリンクを張るというやり方が適切だと思います。

[OKITA’s VIEW]

WordPressでの編集作業ではqタグよりもblockquoteタグを圧倒的に使用するため、上記の記述法がHTML5の定義からも著作権法からも、両側面から要件を満たし、最も適正な表現になると考えております。

qタグでcite属性を用いて、引用を示した例

qタグはblockquoteタグとは異なり、一文引用のようなblockquoteより短い文章の引用に用います。
下の例、qタグの属性としてcite属性を使って、なおかつ、引用元をaタグ示した例です。

<q cite="https://www.ron.gr.jp/law/law/chosaku.htm#2-3-5-seigen">公表された著作物は、引用して利用することができる。この場合において、その引用は、公正な慣行に合致するものであり、かつ、報道、批評、研究その他の引用の目的上正当な範囲内で行なわれるものでなければならない。</q><br />
引用元:<a href="https://www.ron.gr.jp/law/law/chosaku.htm#2-3-5-seigen">著作権法</a>

blockquoteタグのcite属性と同様に、HTML言語的には引用を表しているとしても、フロントエンドで引用元が表記されていなければ、著作権法上の引用とは認められませんので、引用の出所を表記して、aタグでリンクを張っています。

引用元の出所へ必ずリンクを張らなければならないのか?

上記の引用の要件では、「出所の明示」と書いていますが、これはWebに限らず書物など旧来の著作物も含む著作権法の解釈です。
Webでは、cite属性を用いればサイト名やタイトル名としてHTMLソースを記述できますが、やはり読者の目で確かめてもらってこそ信用度が高まりますので、
aタグでリンクを張るのが適切だと私は考えています。

  • 引用元ページタイトル
  • 引用元のURL

それぞれをリンクを張らずに両方を明示していても、著作権法上は、引用を明示していることになると思いますが、
aタグでリンクを張った方がユーザーフレンドリだと思いますし、ハイパーリンクで繋がるのは、WWWの趣旨とも言えるでしょう。

参考記事:関連性のある外部サイトへの意味のあるリンクを積極的に張るべきと考える理由

但し、下の例のように「明確にサイト名が特定できる場合」は、リンクしなくても「可」だと思います。

画像提供元:<cite><a href="https://pixabay.com/" title="画像提供元サイト"  target="_self" rel="noffolow">魅力的なフリー画像 · Pixabay</a></cite>

理由は、Pixabayは唯一無二のサイトであり、引用の出所として明確だからです。
ただ、積極的にはおすすめできませんので、引用元へリンクを張る方が適切とは思います。

Web以外で書物による引用方法

引用の要件1~5や書物による引用つきましては

 正しいレポート – 早稲田大学教育学部 金井景子研究室PDF

をご参照ください。   WebではHTMLを用いて引用句・引用文に色々な属性を付すことができるのですが、
書物の場合は細かく表示しなくてはなりません。 上記のPDF内容によれば、

脚注で書物を書く場合 著者名、書名、出版社、発行年、ページを書く

  また、こちらのサイトは平易な表現で分かりやすくまとめられています。
http://web.ydu.edu.tw/~uchiyama/ron/ron_08.htmlのサイト
育達商業科技大學人文社会學院慶用日語系 (台湾)のサイトのようです。

追補(2019-02-08):引用の出所を記述する際の文献表の書き方

上記の※部分では、紙媒体の書物が資料であるため、「自身が文献を閲覧した日付け」が項目に含まれていませんが、
インターネットでWebページが引用の出所となる場合は、

Webページが引用の出所の場合

 

著者の氏名や機関名、発行年、「文書のタイトル」、URL(アクセス年月日)[3]

という順序を立教大学では指導されています。 但し、

異なる書き方を授業で指定された場合は、それに従いましょう。
引用元:立教大学(PDF)、「文献表の書き方」

note

  と、PDF冒頭で記述されているため絶対的な書き方というものではなく、「慣行とされている並び」と捉えておくのが自然体のように思います。   参考にWikipediaでは、

画像:引用 – Wikipedia

  文書・文献・記事タイトル・PDF名にアンカーテキストリンクを張り、
順序・並びは立教大学と同じになっています。   私にとっては、大変有用なPDFとして勉強させて頂いております。
恐らく、世間一般的には、参考文献での著者名や作品名、閲覧日の順序・並びを、
あまり意識されていないと思います。 私も今回、初めて閲覧日(アクセスした年月日)を最後に書くことを知りました。
今日(2019-02-08)から積極的に意識していきたいと思います。

正しい引用の方法まとめると…

正しい引用表記法

 

  1. blockquoteや脚注・注釈を用いて、本文コンテンツと引用部分を明確に区分する(詳細はこちらの例)。
  2. 引用の出所をblockquoteのcite属性で示し、引用元と明確に記述して、リンクを張る(詳細はこちらの例)。

  今回は方法論・記述論のお話でしたが、引用で肝心なのは、 「自分がきちんと内容を咀嚼して理解したうえで自分の言葉で論述をして、どうしても必要なときに引用部分を引き合いに出す」 ということです。   主となるコンテンツ制作に努めないと、内容の薄いコンテンツになってしまうため、ご注意ください。

参考記事:アフィリエイター必読!Googleが唱える付加価値・内容の薄いサイト・検索上位の可能性の高め方、他。 | OKITA-YUICHI.NET™[4]

ご不明な点がございましたら、コメントをお待ちしております。
内容に不備な点や間違いがございましたら、下のフォームよりご指摘頂けると、ありがたく思います。

最後までお読みいただきありがとうございます。

このサイト内を検索できます。

アクセスランキング(1時間)

ご連絡ありがとうございます。

当記事へのご意見・ご感想・ご感想は、下記フォームよりお受け致しております。
今後のサイト運営に積極的に反映させて頂きます。

お客様のコメントはセキュリティで保護されて安全に届きます。

内容に不備な点もどうぞご指摘ください。
今後も品質の高い記事作成に努めてまいります。

このサイト内を検索できます。

脚注   [ + ]

1.英語圏では、書物に限らず、映画や音楽などの作品名をイタリック体で表現する伝統があります。
2, 4.リンク切れのため、リンク解除。2019-11-11
3.立教大学、文献表の書き方、https://www.rikkyo.ac.jp/about/activities/fd/qo9edr0000005dbr-att/MasterofWriting15-16p.pdf(2019-02-06閲覧)

著者について

Yuichi Okita administrator

好物は大阪名物たこ焼きと焼き鳥です。コンサルティング科目:SEO、コピーライティング、ブランディングアップ以外に、PCハード面、ソフト面、マーケティング、E-mail marketing、他。/ 好きな書籍「孫子の兵法」 / 法人のお客様は、お問合せフォームをご活用くださいませ。/ 個人のお客様は、SEOコンサルティングのみお受けしております。Twitterからのお問合せもお受けしております。

    Privacy Preference Center

    Your Privacy

    When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalised web experience.

    Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

    gravatar.com

    Strictly Necessary Cookies

    These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site may not work then.

    jsdelivr.com,wordpress.com

    Performance Cookies

    These cookies allow us to count visits and traffic sources, so we can measure and improve the performance of our site. They help us know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies, we will not know when you have visited our site.

    accaii.com

    Targeting Cookies

    These cookies are set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant ads on other sites. They work by uniquely identifying your browser and device. If you do not allow these cookies, you will not experience our targeted advertising across different websites.

    amazon.co.jp,rakuten.co.jp

    3rd-parties

    We uses cookies to help us identify and track visitors, their usage of this website, and their website access preferences.

    facebook.com,twitter.com,google.com,linkedin.com.com
    https://www.facebook.com/policies/cookies/
    https://policies.google.com/technologies/types
    https://support.google.com/analytics/answer/181881?hl=ja
    https://www.linkedin.com/legal/cookie-policy

    Major browser help page

    How to set cookies in browser.

    Google Chrome: https://support.google.com/chrome/answer/95647?hl=en Internet Explorer https://support.microsoft.com/en-us/help/260971/description-of-cookies Mozilla Firefox https://support.mozilla.org/en-US/kb/cookies-information-websites-store-on-your-computer Safari (デスクトップ) https://support.apple.com/kb/PH5042?locale=en_US Safari (モバイル) https://support.apple.com/en-us/HT201265 Androidブラウザー https://support.google.com/nexus/answer/54068?visit_id=1-636621905069450730-928182436&hl=en&rd=1 Opera https://www.opera.com/help Operaモバイル https://www.opera.com/help/mobile/android#privacy