情報処理学会 インタラクション 2020
IPSJ Interaction 2020

3P-75
2020/3/9

記憶に残りやすいブログカードのデザインに関する考察
小池雄一†1小宮山摂†1

概要：本研究では、近年テキストリンクの代替として登場してきたブログカードと呼ばれるカード形式の埋め込みリンクに関して、ユーザの記憶に残すという観点で最適なものを考える。具体的にはブログカードの基本要素であるサムネイル画像、タイトル、概要説明欄に関してそれぞれ配置、チャンク量、文字の大きさを因子として変動させたものをユーザに提示する実験を行いその結果を分析することで、カードの最適な様式を模索する。

1. はじめにクトに関する研究はまだほとんど行われていない。しかしながら、本研究テーマを文字や画像といった情報が人間の近年 Web 上ではアンカーリンク （テキストリンク）の記憶に与える影響というより抽象的な視点で広義に捉えな代替としてブログカードと呼ばれるカード形式の埋め込みおしてみると過去に多くの関連研究が行われていることがリンクを使用するケースが増えてきた。CTR（クリック率）わかった。それらについて以下に記す。

や 記憶率を上昇させ、Web ページのアクセス数や再訪問数を増やしてマーケティング効果を向上させるためであろうと推測される。
ブログカードの基本的な構成要素はリンク先の記事のサムネイル画像・タイトル・概要説明の 3 つである。ただし実際に運用されているブログカードにはこれら 3 要素以

2.1 文字の大きさと記憶の関係性読むのに支障がなく、また主観的にも「読みやすい」と感じる文字の大きさはフォントサイズにして 12～20pt の範囲である[1]。また、12pt のイタリック体の字句の方が 16ptのローマン体の字句よりも記憶成績が良かったという実験外にも、サイト名やサイトアイコン、URL、SNS 共有ボタ結果が得られていることから、小さく読みづらい文字や単ンなどの要素がプラスアルファで加えられることが多い。

語の方がそうでないものと比べて記憶に残りやすいというブログカード自体は大きく 2 種類に分けられる。1 つはことが明らかになっている[2]。

ソースコードから手動で生成したもの、もう一つはツールやプラグインなどにより自動で生成されたものである。前者はカスタマイズ性が高いためオリジナルの Web サイト（オウンドメディア）で多く見られ、後者は twitter などのSNS プラットフォームに URL を貼り付けた際に見られる。

2.2 短期記憶に貯蔵できる記憶情報量
2000 年に Cowan は、マジカルナンバーは 1956 年にMillar が発表した 7±2 ではなく 4±1 であると主張する論文[3]を出している。

今回の研究では主に前者をターゲットにする。
前述の通りブログカードはマーケティング効果やユー

2.3

画像優位効果ザビリティを向上させる狙いで登場したとされているが、一般に文字情報よりも画像情報の方が記憶に残りやすそのような効果を向上させるための理論的なアプローチにいという理論がある。Paivio と Csapo は言葉や単語としてついてはほとんど議論されていない。そのため現在は個々提示された刺激よりも写真や絵画といった刺激の方が想起

人が経験則や直観に基づき作成、もしくは第三者がそのよ率が高いことを説明している[4]。この事実は、Paivio 自身うにして作成したもの （ソースコード） をそのままコピが提唱した記憶の二重符号化説により裏付けられ、現在でーして使いまわしている状況である。質という観点でみれも画像優位効果を支える基礎的な理論となっている。

ば現状のブログカードは改善の余地があるといえる。
そこで、今回の研究ではマーケティング効果の向上の観点から、記憶に残りやすいデザインに焦点を当てて、ブログカードの最適な様式を提案する。

2. 関連研究3. 提案手法
本研究では、どのよう様式のブログカードが記憶に残りやすいのかを明らかにするために基本となる 3 つの因子（①タイトルのチャンク量、②説明欄の文字の大きさ、③

前項で記した通り、ブログカードという具体的なプロダ†1 青山学院大学理工学部© 2020 Information Processing Society of Japan1053

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

画像の配置）をそれぞれ変化させたカードを作成し、それらを被験者にスマートフォンで一定時間閲覧してもらった

3P-75
2020/3/9

コーディングに関しては HTML+CSS で行った。以下に
図 1 のカードの実際のソースを示す。

上で、事後アンケートを行いそれぞれの再認率を測定、分析する。各因子の水準は以下の通りである。
①タイトルのチャンク量：4,7,10 の 3 値②説明欄の文字の大きさ：9pt,12pt の 2 値③画像の配置：左または右の 2 値①では基本的に 1 単語を 1 チャンクとみなしている。ただし、接続助詞に関しては直前の自立語との連語で 1 チャンクとしてカウントしている。
分析の対象として作成したカードは 3×2×2 の計 12 枚である。12 枚のカードの内容は全て異なる比較的簡単な英単語に関するものであり、単語の重複は一切ない。図 1,2 に実例を示す。

図1: 作成したブログカードの実例1<div class="blogcardfu" style="background:#ffffff; border-radius: 3px; border: 1px solid#e0e0e0; line-height: 1.4; margin: 10px 0; maxwidth: 9999px; padding: 15px; text-align: left;
width: auto;"><span class="blogcardfu-image"style="float: right; margin: 0 0 5px 5px;
padding: 0 0 0 10px; width: 100px;"><imgstyle="border: 0 none; height: auto; margin: 0;
max-height: 100px; min-width: 0; width: 100%;"
src="https://ninchi-shinri.xyz/wpcontent/uploads/2019/10/time21.jpg" width="100"/></span><br style="display: none;" /><spanclass="blogcardfu-title" style="color: #333333;
font-size: 112.5%; font-weight: bold; margin: 0 05px 0;">英単語 time の意味に関して解説</span><span class="blogcardfu-content" style="color:#666666; font-size: 75%; font-weight: 400;">time
は時、時間、時刻、期間、時代などを意味する英単語です。通常不可算名詞扱いですが、歴史上の特定の年代を指す場合は可算名詞扱いとなります。
また、掛け算や倍数表記においては times という形で使われます。</span></div>

本研究ではオープンソース WordPress を使ってサイトを制作し、そこに上記のブログカードを掲載するという手法
図 2: 作成したブログカードの実例 2をとった。あくまで上記のコードは WordPress 上で綺麗に表示されるコードであり、WordPress 以外のものを使ったタイトルと説明欄の字体はゴシック体とした。説明欄は最大でも 120 字以内に留めたほか、画像に関しては全て背場合はレイアウトが崩れる可能性がある。

景青色で外枠が黒色のピンク色文字画像（字体 Times New

4. 実験Roman）で統一した。文字画像としたのは画像そのものの4.1 実験環境内容で差が出るのをできる限り防ぐためである。

各ページにブログカードを埋め込んだ実験専用のサイトを、オープンソース WordPress を利用して作成した。ブログカードは 1 ページにつき 1 枚埋め込まれており、各ページでは 16 秒が経過すると自動的に次のカードが埋め込まれたページに遷移するような仕組みになっている。ページの自動遷移は JavaScript により実装した。以下にサイトのページ例を示す。

図 3: 実験用サイトのページ例© 2020 Information Processing Society of Japan1054

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

3P-75
2020/3/9

前項で記した通り、実験で分析の対象となるカードは 12

散分析（三要因対応あり）を行うと、画像配置の要因での枚であるが、加えて冒頭と末尾にそれぞれ初頭効果、親近み 1%有意水準で帰無仮説が棄却（p=0.0041）され、主効果効果の対策用のダミーカードを 2 枚設置し、さらに予備実が認められた（図 4）。他の要因については 5%有意水準で験の段階で想定以上に高い再認率が出たことから、全体の帰無仮説は棄却されず、交互作用についても同様であった。

値を下げる目的で 12 枚の間にさらに 2 枚のダミーカードを配置した。被験者が見るのは計 16 枚である。

単純主効果に関してはタイトルのチャンク量が 10 の場
合と説明欄の文字の大きさが 12 の場合に限り、画像配置

また、カードの具体的な内容 （英単語そのもの）が記憶の要因において認められた。前者は 1%有意水準で帰無仮の再認率に影響を与える恐れがあることから、同じ水準の説が棄却（p=0.0046）され、後者は 5%有意水準で帰無仮説組合せに関して、単語内容を入れ替えたカードを 3 種類作が棄却（p=0.012）されている（図 5,6）。

成し、3 セット（1 セット 16 枚）の刺激を用意した。英単

また、画像配置が右の場合において、タイトルのチャン語は 12 個の単語をランダムに入れ替えており、新たに英ク量の各水準を比較すると 4 と 10 及び 7 と 10 で p 値が共単語を加えてはいない。実験用サイトには 3 個のリンクに 0.0144（scheffe）となり、有意差が認められた（図 7）

A,B,C を作成し、それぞれのリンク先に異なるセットのカ他、説明欄の文字の大きさが 9 の場合のタイトルのチャンード群を配置した。

ク量 7 と 10 の比較でも p 値が 0.0303（scheffe）と、有意差が認められた（図 8）。

4.2 実験方法

なお、被験者のうちアンケートで英検準 2 級以上を保持被験者は 20 代大学生約 110 名を対象とし、定員約 150 名もしくは TOEIC（IP 含む）の点数が 500 点以上と回答したの大教室において、約 15 分の時間を使って実施した。全体

27 人のデータを母比率の差の検定で 99 人全体のデータとをほぼ同人数の 3 つのグループ A,B,C に分割した。

比較してみると、1%有意水準で帰無仮説が棄却された（27実験では個人の所有するスマートフォンで本実験用のサ人の方が成績が良かった）ので、27 人のデータも全体と同イトにアクセスさせ、そこに記された説明と注意事項を熟様に分散分析を行ったところ、主効果、単純主効果ともに読するよう指示した。口頭による補足説明をした後、各グ全ての因子で認められなかった。多重比較ではタイトルのループに対応するリンクからスタートページに移動させた。

チャンク量が 7 の場合の文字の大きさと文字の大きさが 9

実験者が実験を開始するためのパスワードを伝え、被験者の場合のチャンク量 7 と 10 で有意差が出たものの、99 人はパスワードを入力して、実験を開始した。開始後は 16 秒

全体のデータと比べると英語の成績が優秀な 27 人のデー経過毎にカードが表示され、最後まで進むと終了画面が表タではあまり因子による差が見られなかった。

示されるようにした。
全員の終了を確認後アンケート用紙を配布し、英単語の再認テストを実施した。再認テストは合図があるまで裏返しにさせ、フライングする者が出ないよう留意した。
なお、配布したアンケートは無記名とし（グループ名は記入）、再認テストの他に後の分析で参考とするため英語力に関する質問に回答させた。

5. 結果
アンケートを回収後、白紙など無効なものを除いたところ、グループ A が 33 人、グループ B が 35 人、グループ Cが 31 人であった。
まず、グループ A と B、グループ B と C、グループ A とC の対応する各カード間で母比率の差の検定を行った。その結果、帰無仮説が 5%有意水準で棄却されたペアは 1 つ

図 4

画像配置の各水準の平均再認率もなかった。また、グループ全体でも同様の検定を行った
ところ帰無仮説は 5%有意水準で棄却されなかった。このことから、カードの中身 （英単語） の違いによる再認率の有意差は認められないとして、これ以降の分析は A,B,C全てひとくくりにして実施した。
被験者 99 人全体のデータでエクセル統計を使用して分© 2020 Information Processing Society of Japan1055

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

3P-75
2020/3/9

図 5 タイトルのチャンク量の各水準における画像配置の

図 8 説明欄の文字の大きさの各水準におけるタイトルの各水準の平均再認率

チャンク量の各水準の平均再認率

6. 考察
全体のデータでは主効果及び単純主効果として画像配置の因子での有意差が認められ、左配置の方が右配置に比べて高い再認率となっていることからブログカードでは画像は左に置くべきといえる。もともとユーザが Web 上でサイトなどを閲覧する際、視線は基本的にまず左上を捉えてその後徐々に右もしくは下へ移っていくという性質（F の法則）があるので、右に置かれた画像には注意が向かない可能性が高く、それゆえこのような結果につながったと考えられる。画像が左にある場合ももちろん F の法則により、右側にあるタイトルや説明欄は読まれにくくなることにな
図 6 説明欄の文字の大きさの各水準における画像配置のるが、テキストと画像では画像の方が記憶に残りやすいの各水準の平均再認率で、相対的には左配置の方が高くなったのだと思われる。
また、多重比較検定を行った結果、画像配置が右のときと説明欄の文字の大きさが 9pt のときに、タイトルのチャンク量 7 と 10 で有意差が認められ、7 の方で再認率が高くなっていることからブログカードのタイトルではマジカルナンバーを超えるチャンク量にしない方が良いと考えられる。主効果としてタイトルのチャンク量で有意差が認められたわけではないので一概には言えないが、一部の条件でチャンク量 4 と 7 の場合に比べると 10 の時に再認率が明らかに落ちていることから、ブログカードにおいても記憶に残すという意味でミラーのマジカルナンバー7 が一つの指標となる可能性が高い。コーワンのマジカルナンバー4

図 7 画像配置の各水準におけるタイトルのチャンク量の各水準の平均再認率が境目にならなかったのは、ブログカード自体が領域の中で同じ情報を画像、タイトル、説明の 3 要素で繰り返し提示して被験者に記憶のリハーサルを半ば強要するようなデザインになっているからと考えられる。
文字の大きさの因子に関しては主効果・単純主効果のいずれも認められず、多重比較でタイトルのチャンク量が 7の場合でのみ p 値が 0.0478 と有意差が出た（9pt の方が高再認率）ものの、これだけで 9pt の方が記憶に残す上で有効だったとは少々言い難い。文字の大きさについては少な© 2020 Information Processing Society of Japan1056

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

3P-75
2020/3/9

くとも 9pt や 12pt 程度の変化ではユーザの記憶に与える影響はほとんどないといえる。
なお、英語の成績が優秀な人のみを対象にすると、因子による再認率の有意差はほとんど認められなかったという結果からは、ユーザがブログカードの内容に対してすでに深い知識がある場合、物理的なパラメータは記憶に残すという点ではあまり意味をなさないということが伺える。
以上まとめると、ブログカードをユーザの記憶に残るようにするためには、サムネイルとなる画像を左に配置すること、タイトルのチャンク量を最大でもマジカルナンバー7 前後に収めることが大切である。ただし、ユーザがカードの内容そのものに深い知識がある場合は、記憶率はそれらの外観にあまり影響を受けない可能性がある。

7. おわりに本研究では記憶に残る最適なブログカードを検討するために、基本となる 3 要素を因子として心理実験を行った。
分析の結果、ある程度最適な様式を明らかにできたと考えるが、今回の実験はスマートフォンのみで行っているため、今後はタブレットや PC でも同様の実験と分析を行う必要性がある。

参考文献[1] 阿久津洋巳,近藤雄希: 文字の読みやすさ 2：読みやすさと読みの速さの比較,日本官能評価学会誌 Vol. 14 No. 1,
p26-33, 2010[2] Diemand-Yauman,C., Oppenheimer,D.M., and Vaughan,E.B.,
Fortune favors the bold （ and the Italicized ） effects ofdisfluency on educational outcomes, Cognition, 118, p111-115,
2011[3] Cowan N., The magical number 4 in short-term memory: A
reconsideration of mental storage capacity, BEHAVIORALAND BRAIN SCIENCES24, p87, 2000
[4] Paivio, A., & Csapo, K., Picture superiority in free recall:
Imagery or dual coding? Cognitive Psychology, 5（2）, 176–206, 1973

© 2020 Information Processing Society of Japan1057