どをご紹介いただき、大学Ｗｅｂサイトのあり方について考える機会としたい。

の背景や方針、特徴的なサイトやコンテンツ、多言語展開への対応、今後の展開な本小特集では、近年、Ｗｅｂサイトのリニューアルを行った事例を取り上げ、そ見直し、Ｗｅｂサイトのリニューアルが行われている。

といった課題を受けて、各大学において、大学Ｗｅｂサイトのあり方や位置付けのバル化に対応した英語をはじめとする多言語による発信、大学と法人サイトの連携

こうした中で、スマートフォンやＳＮＳの普及といった情報環境の変化、グロー

Ｗｅｂサイトは重要な役割を担っている。

保護者、企業や地域など）への情報発信やコミュニケーションを進める上で、大学大学における多様なステークホルダー（学生、教職員、卒業生、父母、受験生と大学Ｗｅｂサイトリニューアルの取り組み

小特集

76

2019.1 大学時報

―ターゲットに合わせた情報の切り分け―

立教大学公式サイトのリニューアル
小嶋 顕●立教大学総長室広報課

Ｗｅｂサイトで伝える「献学の理念」

橋本 明子●国際基督教大学パブリックリレーションズ オフィス室長
・大学ホームページを全面リニューアル・～大学広報 ブランディングの有力なツールとして位置付け直す～
松本 崇●神戸女学院大学 学長室 広報担当

スマホで変わるデザイン、変わらぬ役割

橋本 敏彦●㈱日経ＢＰコンサルティング ブランドコミュニケーション部

大学時報 2019.1

77

小特集 大学

サイトリニューアルの取り組み

─ 立教大学公式サイトのリニューアル─

小嶋 顕 ●立教大学総長室広報課を皮切りに、２０１７年度には外国語サイトと学校法人式サイト（以下、公式サイト）がリニューアルされたのルの真っ最中である。２０１７年３月１日に立教大学公

本稿執筆の時点で、本学ではＷｅｂサイトリニューア

年半ほどの期間をかけたこととなる。本稿ではその概要た。公開したのは２０１７年３月１日であったため、１更新体制などの根本的な部分から再構築することになっが浮き彫りとなり、結果的に情報構造やサイトのあり方、

きかったのだが、実際に手がけてみるとさまざまな課題

による閲覧環境の変化への対応という要因がもっとも大立教学院サイトをリニューアル。２０１８年度には学部・・

今回のリニューアルでは、準備段階として半年近い時

ターゲットとコンセプトをご紹介したい。

究科から順次移行することになっている。２０１９年度には小学校と二つの中学校 高等学校のサイトがリニュー
アル見込みとなっており、広報課が適宜関係部局と協力
公式サイトのリニューアルプロジェクトが学内で発足

いくつかの部門の職員と共に行った複数回のワークショッなどのリサーチだけでなく、入試やキャリア、就職など間をかけてコンセプトを練り上げていった。サイト分析

したのは、２０１５年秋のことである。その背景として、しながら進めている。

１

サイトの共通テンプレートを作成し、希望する学部 研

はじめに

スマートフォンやタブレットなどのモバイル端末の普及

ターゲットに合わせた情報の切り分け

W
e
b

78

2019.1 大学時報

小特集●大学 Web サイトリニューアルの取り組み

を「『大学を選択する』という体験の質を向上させる」こ

てのあるべき姿を探っていった。その結果、コンセプト

プなどを通じて、サイトのターゲットや大学サイトとしニュースに混じって掲載されていた。また、各部局のペー

学外者には興味が無いような学内向けのお知らせが他の業アルバム撮影日時のリマインドや健康診断の案内など、とである。当時のトップページのニュース一覧には、卒や申請上の諸注意などで占められているページが散見さとと定め、主なターゲットを「受験生を中心とした学外
このコンセプトとターゲットを基にして要件定義や情れ、奨学金にしても海外留学にしても、まず概要を知ろ

ジを見ても、在学生が事務室に提出する申請書のＰＤＦ

報設計を行ったが、そこで大きな課題となったのが、情うとサイトにアクセスしても必要な情報にたどり着きに者」と設定した。

報構造の見直しであった。当時の公式サイトは部署ごと

くい状況を引き起こしていた。

リニューアルの概要

前述のように、全ページにレスポンシブデザインを採２

問題もクリアする必要があることが分かった。

インの導入だけでなく、前記のようなサイトの構造上の覧への最適化（レスポンシブデザイン）や現代的なデザ

リニューアルに当たっては、スマートフォンによる閲のページがあり、それぞれの担当者が更新するという体制であったが、サイト全体を俯瞰してみるといくつかの改善すべき点があった。
第一に、似たような情報が点在していたことである。
卒業生を紹介するコンテンツを例に取ると、広報課やキャ
リアセンターなど複数の部局が独自に卒業生を取材し、も、複数の部局が独自に情報発信していた。主なターゲッ

用し、モバイル端末における見やすさを優先したデザイ

それぞれのページに掲載していた。また海外留学の情報トである受験生からすれば、関連性の強い情報は同じ場ンとした。２０１１年に％と急増していたが、リ％まで上昇している。

また、公式サイトをＰＲサイトと位置付け、以下のよ

ニューアル後の２０１７年には

アクセスは、２０１６年には％だったモバイル端末からの所にまとめて掲載されているほうが望ましいことは明らかだった。
第二に、教職員、在学生、受験生、保護者など、それぞれのターゲットに対する情報が混在して載っていたこ

大学時報 2019.1

79

69

71

17

大学WebサイトとSPIRITをそれぞれPRサイトと学内者向けサイトと明確に位置付ける。

リニューアル後（2017年3月1日以降）
リニューアル前

対外的な広報内容（広報室で更新）
対外的な広報内容（各自または広報室で更新）

各部局のページ（ソフトを用いて各自で更新）

新SPIRIT
→学内者向け情報を集約
各部局からのお知らせ（Web上で各自で更新）

各部局のページ
SPIRIT（spirit.rikkyo.ac.jp）

各部局からのお知らせ
一部の部局からのお知らせ（Web上で各自で更新）

うに情報を再構築した。

① 「 大学を選択する」という体験の価値を向上させるための受験生専用コンテンツを制作。

リニューアル前後の１年間を比較すると次のような変

３② 特
 集や取材系の記事はカテゴリごとに一箇所に集約し、卒業生情報や国際化の取り組みなどの関連情報をリニューアル後の Web サイトを通じた情報発信の枠組みについて

アル前に比べて約％減少した。これと入れ替わるよう

公式サイトのページビュー（以下、ＰＶ）は、リニュー化があった。

リニューアルの効果

公式サイトとの明確な住み分けを図った。

お知らせや申請書を切り分けてＳＰＩＲＩＴに移行し、れにより、それまで公式サイトに載っていた学内向けのセンター主導のもとでリニューアルすることとした。こトとして活用すべく、公式サイトと並行して、メディア

Ｗｅｂサイト「ＳＰＩＲＩＴ」を学内向けポータルサイ

さらに、リニューアル前から存在していた学内者向け③ 原則として学外向けの情報のみ掲載し、ターゲットが必要な情報に早く到達できるよう設計。

一本化。

図表１

12

大学Webサイト→対外的なPRサイトとして明確化
大学Webサイト（www.rikkyo.ac.jp）

一部の部局のページ（メディアセンターで更新）

80

2019.1 大学時報

小特集●大学 Web サイトリニューアルの取り組み％

・て基本情報である学部 研究科ページのＰＶが％増加していることも考慮すると、リニューアルに伴って回遊にして学内者向けサイトＳＰＩＲＩＴのアクセスが増えたことと合わせて考えると、学内者向けの情報をほ最も大きな効果が見られたのは資料請求である。資料

請求ページのＰＶは ％も増加し、資料請求数自体も ％伸びた。リニューアル前の公式サイトでも資料請求ペーの変動が起きたと解釈できるだろう。
一方、公式サイトの平均セッション時間（１回のサイト訪問における滞在時間の平均）はジへのリンクはヘッダーにあり、どのページからも１ク69

ＩＲＩＴを見るようになったという、こちらの意図通り性が高まったと判断できるだろう。

30

ぼ全てＳＰＩＲＩＴに移したことによって、学生がＳＰ11
図表２％長くなり、直帰66

立教大学公式サイト

22+69.3%

72,4001,999
42,757+65.9%

2016
2017
資料請求数
2016
2017
資料請求ページPV

3,317％下がった。一概にはいえないが、受験生にとっ

資料請求ページのアクセス数と資料請求数が大幅に増加

率は

大学時報 2019.1

81

2,076,993
2017+29.8%
1,600,171201610

基本情報である学部・研究科ページのアクセス数が増加

リックで行けていたことを考えると、想定以上の伸びであったといえる。
これらの指標を総合すると、メインターゲットである
受験生の満足度は高くなったと判断でき、コンセプトの「『大学を選択する』という体験の質を向上させる」に合致したリニューアルができたと考えている。

４ 学校法人サイトのリニューアル
最後に、学校法人立教学院のサイト（以下、
学院サイト）のリニューアルについても簡単にご紹介しておきたい。
以前の学院サイトもいくつかの改善点を抱えていたが、その最たるものは、学院サイトが何を発信する媒体なのかという位置付けが曖昧であったことだ。学校法人立教・

いうものなのかが分かりにくくなっていた。学院サイト

されているなど、学院サイトが最も伝えたいことがどうていた。また、さまざまな情報が強弱無く並列的に掲載いる内容を形を変えて掲載しているという二重構造になっ設置しているが、当時の学院サイトは各学校で発信してづいてリニューアルでは次のような施策を講じた。

を重点的に情報発信するサイト」と再定義し、これに基学校法人としての説明責任に基づく『情報公開』の二つを「立教学院の根底に流れる『一貫連携教育の魅力』と、そこでアクセス解析やヒアリングを行い、学院サイト

学院は小学校と二つの中学校 高等学校、および大学をも単にレスポンシブ化するだけでなく、情報構造の再構
築をも必要としていたのだ。

① トップページから「一貫連携教育の魅力」と「情報公開」に容易にたどり着きやすいように導線を設けた。

学校法人立教学院公式サイト

82

2019.1 大学時報

小特集●大学 Web サイトリニューアルの取り組み② 学
 校紹介や従来型のニュースなど、各校サイトと重複することが多かった情報や機能は思い切ってサイト

アルといっても、デザインのブラッシュアップなど単純なサイト移行のみで済ませる場合もあれば、今回のようにターゲットの再設定や情報構造の再構築、およびそれ作るようなケースもある。本学の場合は後者であったたから省いた。
③ 主
 に一貫連携教育に関する特集や取材記事を載せる「ＰＩＣＫ ＵＰ」というコンテンツを新たに設けた。

め、その難度や複雑さは当初の想定よりもかなり高いもアル前後のアクセス状況を比較すると、学院サイトに載っが出たために、担当者として胸をなでおろしている。 のであったが、資料請求数など目に見える形で良い結果に伴う業務プロセスの変更など、なかば新規のサイトを公開後、約 カ月の期間のデータではあるが、リニューていた学内者向け情報を全てＳＰＩＲＩＴに移行したりコンテンツを絞り込んだりしたため、全体のＰＶは前年に比べて３割強減少した。一方で、一貫連携教育や情報％増加した。掲載情報公開という学院サイトが強く出したい二つのコンテンツのＰＶに限って比較すると、約えるなど、これを機にＷｅｂ周りの業務プロセスも含めアルに当たっては更新作業を分散型から集中型に切り替

紙幅の都合でご紹介できなかったが、今回のリニュー

おわりにすることができるようになったと判断している。

学院ならではの一貫連携教育の魅力をより効果的に発信に優先順位をつけてリニューアルしたことにより、立教

29てゼロベースで見直した。一口にＷｅｂサイトリニュー

大学時報 2019.1

83

10

小特集 大学

サイトリニューアルの取り組み

・ツの広報の歴史である。その一環として、２０００年頃

ＩＣＵの広報の歴史は、日英両語によるリベラルアー

ニューアル前と比べて到達」を目指して構造を改善した結果、アクセス数はリした情報の見せ方の工夫 ③「３クリックで目標の情報に％増となった。

に運用を始めた大学オフィシャルＷｅｂサイトには、リベ橋本 明子 ●国際基督教大学パブリックリレーションズ オフィス室長

Ｗｅｂサイトで伝える「献学の理念」

Web

分かりやすく伝えるための技術が必要であり、これらを

ラルアーツを深く理解するためのコンテンツと、それを教育制度を利用してＷｅｂ制作の基礎を学び、開始に備改善して終える予定であった。広報職員の一人は、職員

続く後期（２０１７年度）は当初、デザインや技術を入したため、この広報に注力したし、技術面ではＣＭＳ

国内では先駆けとなる「メジャー（専修分野）制」を導

心に話し始めた。
「デザインも技術も重要だが、それにもランディング分科会に参加した帰り道、私に向かって熱

その職員が２０１６年夏、広報職員のための研修でブえていた。

を積極的に導入し、小規模で柔軟な組織に適したＷｅｂ・３年度）では、毎年行う高校生と本学新入生のヒアリン

づき、『国際的社会人としての教養を持って、神と人とに

本学は、戦後間もない１９５３年、基督教の精神に基献学の理念や沿革を語るコンテンツに乏しかった。

グ結果を踏まえて、①曖昧だった対象の絞り込み ②急増

０１７年度を前 後期に分けて実施した。前期（２０１

えなければ」と。確かに、当時の本学のＷｅｂサイトは、まして、本学がなぜ今この社会に存在しているのかを訴

今回のリニューアルは４回目となるが、２０１３～２

サイトを実現した。

例えば、２００８年度に本学は、世界では一般的だが最新のものにするため、リニューアルを繰り返してきた。

60

84

2019.1 大学時報

小特集●大学 Web サイトリニューアルの取り組み

えることこそ、社会における本学の立ち位置を明確にすてきた。これを、特に受験生や高校生に分かりやすく伝

スの隅々に至るまで独自の工夫をこらし、今日まで貫い使命」を実現するため、教育 研究の骨子からキャンパた。
「学問への使命」「キリスト教への使命」「国際性へのこと』を目的に、日米の一般市民のご寄付により生まれ奉仕する有為の人材を養成し、恒久平和の確立に資するる教員、歴史資料室の司書らの支援を得て作成した。まベテランの歴史学教員、オーラルヒストリー事業を率い

この「なぜ？」に対する回答文は、外国籍教員を含む

命に掲げたという事実が平易な言葉で説明されている。

ために貢献することのできる国際的社会人の育成」を使「日本を世界に向かって開かれた国に革新し、人類平和の８年の国連総会で採択された世界人権宣言に感銘を受け、代学長湯浅八郎ら本学関係者が、献学の４年半前、１９４

そのためのコンテンツを種々検討する中で、デザイン採用し、さらに全ての図やチャートを広報職員が作り直た、スマートフォンによる閲覧を最優先したデザインを・や広告の業界でクリエイティブディレクターとして活躍

した。

― 。

るものであるはずだ

する卒業生、福田敏也氏が参画を申し出てくださり、Ｗ

新しいＷｅｂサイトは２０１８年４月に公開され、『大９』の総合ランキングで７位に入賞した。このリニュー・

新コンテンツ「 WHY ICU ...」?
が誕生した。学内ヒアリング

アルを通して、私ども広報職員が理解したのは、本学広ｅｂサイトの中心に位置するを行い、意見交換を重ね、本報の使命であった。リベラルアーツとは、よく生きるた

ち学生生活を送ることを誓う

時に世界人権宣言の原則に立

例えば「なぜ、全員が入学ることであろう。 

学生、教職員ほか関係する全ての方々と共に思考を続けういうものか、ひいてはＩＣＵとは何者か」について、

きるとはどういうことで、そのための学びや研究とはど

サイトユーザビリティ調査２０１８ ―２０１

学の独自性を語るための質問

めの学びであるといわれる。本学広報の使命は、
「よく生

学スマホ

文を 問、作成した。

のか？」という問いには、初大学時報 2019.1

85

75

小特集 大学

サイトリニューアルの取り組み

大学ホームページを全面リニューアルWeb

リニューアルのポイント

松本 崇 ●神戸女学院大学 学長室 広報担当

・

～大学広報 ブランディングの有力なツールとして位置付け直す～

１・

リニューアルに際しては、まずＳＰへの対応がポイン

はじめにトである。アクセス履歴を見ていると、閲覧者の多数は日㈬に大学ホームページ（以下、本学ＨＰ）の全面リニューアルを行った。リニュー

ＳＰから本学ＨＰに来訪しており、ここへの対応が第一

月

アルを決めた要因としては、前回のリニューアルから数であることからして、レスポンシブ対応で実装を行った。

本学では、２０１７年年が経過しており、スマートフォン（以下、ＳＰ）の普れたビジュアルとすることによって本学らしさを打ち出

デザイン面では、本学のスクールカラーを随所に取り入え、本学ＨＰにおける情報発信力を強化し、大学広報

りである。

その他リニューアル上の大きなポイントは、以下の通すとともに、落ち着いたトーンで統一感を持たせた。

られる。

ブランディングの有力なツールとすることの２点が挙げ

及など、世の中の変化に対応する必要が生じたことに加

29

11

86

2019.1 大学時報

小特集●大学 Web サイトリニューアルの取り組み①

トップページのメインビジュアル

閲覧者がまず見るトップページのメイ

ンビジュアルには、これまでは重要文化財にも指定されている学内の建物を据えることが多かったが、今回のリニューア

ルでは敢えて建物のイメージを抑え、本学の学びが分かるものを配置することにした。また、画像ではなく、動きを表現するために動画で構成することにした。

具体的には、３学部５学科の学びを表現・する動画を撮影 編集し、メインビジュアルとした。なお、建物は正面から撮影するのではなく、ドローンを使って上空から撮ることによって、本学の学びの環

境を立体的に表現した。

大学時報 2019.1

87

② 新
」
 規コンテンツ「 Storiesなる。そうした背景が広報戦略の大きな柱にこれを発信することは多方面で活躍しており、多くの卒業生が社会のきく変わる。本学ではるとそのイメージは大が、卒業生の活躍を見遠されることもあったとの印象を持たれ、敬しては「お嬢様大学」

して理解してもらえるみについてデータを通ツを制作し、本学の強学院」というコンテン

で、「数字で見る神戸女

性を感じていた。そこな情報を発信する必要データ）を基に定量的ビデンス（例えば数量発信が多かったが、エ

教員の声など定性的なて、これまでは学生や③ 「 数字で見る神戸女学院」
本学の強みについあって、卒業生の活躍ようにした。具体的にこれまで、本学に対ぶりを発信する新たな本のストーリー

データを揃えた。

は、英語教育や情報化
投 資、 就 職 先 な ど の名の」コンテンツ「 Storiesを制作した。リニュー
アルの段階では

12

卒業生に登場してもらい、を公開した。

1288

2019.1 大学時報

小特集●大学 Web サイトリニューアルの取り組み④ 学科紹介ページ
学びの発信においては、まず３学部５学科の特長をア

も画像を多く配置した。

が負担になる場合もあの閲覧者には見ること少し興味を持っただけしく説明しているので、いて、学科の学びを詳

ジナルサイトを持って各学科はそれぞれオリ

応変、かつスピーディーにページをメンテナンスできる

時間と費用の節約につながるとともに、自分たちで臨機た。それを広報担当者が行えるようにすることによって、て作業を行ってもらっており、時間と費用が発生していまで、各ページを修正するには、そのつど業者に依頼しことを業者向けの要求仕様書に記載し、実装した。これ

Ｓ（コンテンツ マネジメント システム）を導入する

リニューアルに当たっては、基本的に全ページにＣＭ

全ページへのＣＭＳの導入り得る。少しの興味かようになった。

⑤

ら、より深い関心へとおわりにピールする必要がある。

閲覧者を導くために、の学びのポイントをシ

このページでは、学科

紹介ページを制作した。

トへの入口となる学科

大きな進歩があったが、ユーザビリティの向上という面を目指したい。また、デザインなどのビジュアル面ではの継続的な更新や追加を行い、さらに充実した本学ＨＰ報としての情報発信の基盤はできた。今後はコンテンツ

今回大規模なリニューアルを行ったことで、まずは広・ンプルにまとめるととではまだ課題があり、少しずつ改修しながら課題を克服

・

もに、ビジュアル的にしていきたい。 各学科オリジナルサイ

理解してもらうために

大学時報 2019.1

89

小特集 大学

サイトリニューアルの取り組み

橋本 敏彦 ●㈱日経ＢＰコンサルティング ブランドコミュニケーション部
・ ・

２年に大学のスマホ サイトに関する調査を始め、２０

サイトを本格的に評価する調査報告書を発行している。この時期は、まさに大学がスマホ

１５年からはスマホ

大学のサイトにアクセスする端末は、ＰＣからスマーできる絶好のチャネルでもあった。大学のサイトをスマホで見る人は、スマホを使う機会が多いハイティーンや・代が多い。つまり、受験生候補者や在学生たちだ。彼

・

・

％、２

％に達し

％だったが、２０１４年には％と増えて、２０１８年にはた（図表１）。今や大学は、ＰＣとスマホの両方を意識し０１６年には２０１２年にはサイト開設のためのリニューアルを急ピッチに進めた時％がスマホからのアクセスであトフォン（以下、スマホ）へと大きくシフトしている。
～

期だった。スマホ サイトを開設している大学の割合は、てみると、すでに％だったスマホからるという答えが返ってくる。明治学院大学のサイトは、
２０１６年度上期（４～９月）にてＷｅｂサイトを作る時代になったということだ。

ＰＣと比べて画面サイズも操作方法も異なる端末向け％に上がったという（セッション数ベース、以下同じ）。広島女学院
大学のサイトは、すでに

月）
。

10 65

％の大学がスマホ サイトを作る時代

そうだ（２０１８年４～

１めての作業ではあったが、一方で若者に大学をアピールにＷｅｂサイトを作る作業は、多くの担当者にとって初のアクセス比率が、２０１８年度上期には

50

95

17

％がスマホからのアクセスだ

62

55

84

70

ＰＣとスマホのアクセス比率をいくつかの大学に尋ねはじめにスマホで変わるデザイン、変わらぬ役割

W
e
b
50

弊社は以前からこうした動きに注目しており、２０１

20

95

90

2019.1 大学時報

小特集●大学 Web サイトリニューアルの取り組み

できれば、いつでもどこでも大学の情報に触れてもらうら彼女らに好感を持ってもらえるスマホ サイトを提供

２ スマホ サイトにはストレスがいっぱいなデータを示し、後半では主観を交えて述べてみたい。

てきた経験から、こうした点について、前半では客観的・ことができ、その結果、大学への憧れや愛着が大きくな・すれば「ストレスの少ないサイト」だ。

く」「知りたい情報がある」サイトである。別の言い方をが、前提として「見やすく」「操作感がよく」「探しやす好感を持たれるスマホ サイトは、内容はもちろんだ

・

・

2018年

・

トは好感を持たれる

設したスマホ サイ

だろうか。急いで開とはどのようなもの

作り手はいる。大学スマホ

受け手のストレスに相変わらず気付いていないサイトのトに慣れていなかったのだ。今や受け手は慣れてきたが、大きなストレスだった。作り手も受け手もスマホ サイ

数年前は、大学に限らず、スマホ サイトを見るのは・

サイトになっている

が多い。

・

・

イトとは異なるコン

どのくらいの文字サイズが見やすいのか。スマホのＯＳ

ストレスの要因はいくつもある。まずは文字の大きさ。

サイトにはそうしたサイト

セプトで作るべきなを提供している米国のグーグルやアップルの提案を見て

・

2012年

では、好感を持た

サイトの開設を急ぎ、さらに良いもる可能性もある。大学にとっては好機なのだ。だからこそ各大学はスマホ

図表１ スマホ・サイトを運用する大学はこの数年で急激に増えた※弊社調べ：対象は学部学生数上位校を中心とした国公私立大学約200校のにしようと試行錯誤をしている。

スマホ・サイトあり95%
スマホ・サイトなし
83%

れるスマホ サイトのだろうか。ＰＣサのだろうか。そうでみよう。

両社はアプリ開発者向けにデザインのガイドラインをあるとしたらどう変えるべきなのか。

ＣＳＳ

16

ＣＳＳピクセ示している。それらによると、米グーグルは、ピクセルを標準として、大きなサイズ（

大学時報 2019.1

91

この記事では長く
大学サイトを診断し20

スマホ・サイトなし
5%
スマホ・サイトあり17%ル）と小さなサイズ（

ＣＳＳピクセル）を用意する推Ｃ奨例を示していた。米アップルのガイドラインには細かな指定はないが、ユーザーが「極小」を選択しても かには視力が試されてな
いるようなサイトも高く、バックライトなどのおかげでコントラストも高い。

・・

インクがにじむ可能性のある紙に比べて、文字がくっき・イントで、それより小さくしたい場合はわざわざ数字を

かなり小さい。Ｗｏｒｄで選択できる最小サイズは８ポ

な情報はすべて ＣＳＳピクセル以上の文字であること」

さて、前置きが長くなったが、弊社の調査では「重要さくなっている。

20

りと見えるのだ。このため、文字サイズの下限が少し小Ｃ

６／６ｓ／７／８の画面で ＣＳＳピクセルの文字は５てみよう。例えば日本で最も普及しているｉＰｈｏｎｅ

Ｗｏｒｄや印刷でなじみのあるＤＴＰポイントで表現し

ホ画面上のサイズ指定単位だ。ピンとこないので、普段、ここでＣＳＳピクセルとは、アプリ側が指定するスマＳＳピクセル未満にはしないようコメントしている。

11

８ポイントの大きさで表示される。

ＣＳＳピクセルは７ ０ポイント、

12

図表２

12

Ｗｏｒｄを使っている人なら分かると思うが、これはＳＳピクセルは８３ポイント、
16

上が原則となっている。日常よく目にする紙に印刷され自主規制ルールを作った。それによると、７ポイント以

文字情報が小さく印刷されることが問題になり、業界が入れる必要がある。不動産業界ではチラシ広告で重要なて調べたところ、最新の調査（２０１８年夏）でさえ、イトはどれくらいあるのだろうか。トップページについ５ ３ポイント以上に当たる。これをクリアしているサを基準としている。ｉＰｈｏｎｅ６／６ｓ／７／８では・％が、これに満たな

88
ることになる。

い小さな文字をビジター（サイト訪問者）に読ませてい％だった。残りの実に

わずかに

12

た文字と比べると、スマホで推奨されている文字の小ささが実感できよう（図表２）。
ただし、スマホは紙に比べて表示デバイスの解像度が12

92

2019.1 大学時報

小特集●大学 Web サイトリニューアルの取り組み

３ レスポンシブの功罪
・

大学スマホ サイトの９割近くが小さな文字を使って― 。この問題には、同情すべきというか、無理かいる

画像も同様だ。ＰＣ向けに作ったリンク画像があるのだから、これを縮小してスマホ向けに使おう。こうして、それほど大きくない画像の中の文字は、さらに小さくなってビジターの目に触れることになる。

損なう。隣のリンクが近すぎるのだ。指はそれほど細か・

これまで大学もＷｅｂ制作会社もスマホ サイトのデな指示ができるポインティング デバイスではない。誤っ窮屈なデザインは読みやすさだけではなく操作性までザインに慣れていなかった。どれくらいの情報をどのよて隣のリンクをタップすることもあり、それはやはりス

らぬ面もある。

うに見せるのが適当なのか分からない中で、急いでスマ

トレスの原因となるのだ。

・・

お手本となるスマホ向けデザイン

スマホ利用者のことを考えたデザインも、もちろんあ

４

「レスポン
ホ サイトを公開しなければいけない。幸い、
シブＷｅｂデザイン」という手法があって、ＰＣ向けの情報からスマホ向けページを自動的に作れるという。Ｐ
Ｃ向け情報はすでにある。であれば、とりあえずその手・・る。福岡工業大学や明治学院大学のスマホ サイトは、― 。ここ何年

法を使ってスマホ サイトを開設しよう

２０１５年の調査時からゆとりのあるデザインを採用し・・

サイトが出色だった。メニューの文字はＣＳＳ

２０１８年調査では、国際基督教大学（ＩＣＵ）のスしている。

弊社の同年のユーザビリティ調査では１位と２位を獲得

か、そうした経緯で作られたと思われる大学のサイトがサイトをていた。文字は大きく、リンクの配置にも窮屈さはない。
％もの大学が数年の間にスマホ

実に多い。
確かに、

公開できた背景にはレスポンシブＷｅｂデザインの存在があり、その功績は大きい。一方、この手法に安易に頼っマホ

ピクセル（ｉＰｈｏｎｅ６／６ｓ／７／８の画面ではて、ＰＣ向けページにある多くの情報をそのままスマホ向けページに押し込めてしまっている事例が実に多いのポイント）と大きく、下層メニューも

ＣＳＳピクセルだ。情報が多いので、文字は小さくならざるを得ない。

大学時報 2019.1

93

13

30

95

16

（同７ ０ポイント）と見やすい（図表３）。他大学の関・係者にこのサイトを紹介したところ、「このデザインに慣れると、他大学のサイトを見る気になりませんね」と言われたことが印象に残っている（ＩＣＵのサイトについては本小特集に掲載されているので、そちらも参照していただきたい）。
見やすいデザイン、操作しやすいデザインに優位性があることは明らかだ。大学にとって、これまでの数年が・

スマホ サイトの創設時期だとすると、これからの数年
は改善の時期になると筆者は見ている。良いスマホ向け
デザインが好感度に結び付くことに関係者も気付いている。これからは、スマホ利用者の立場に立った、見やす
く操作しやすく探しやすいデザインを模索していくこと

ICU のサイトのメニュー
図表３

トップページが担う二つの役目になるだろう。

５

大学のサイトの中でアクセス数が最も多いのはトップページだ。トップページの役目は大きく二つある。一つは、ビジターの知りたい情報へ分かりやすく誘導すること、そしてもう一つが大学をアピールすることだ。前者

はデザインやサイト構造の良しあしが効いてくる。これが出来たとして、その後はアピール力がサイトの好感度を決めることになる。

ただ、アピール力の評価にはかなり主観が入る。ここでは、異論を承知の上で、筆者が「いいね！」を付けた

いサイトを紹介したい。どれもアピールすべき内容を一つの「つかみ」に集約し、それをトップページで提示している事例だ。

神田外語大学のトップページでは、「言葉は世界をつなぐ平和の礎」というコピーの下、いくつかの写真が次々と現れる（図表４）。それは他国の人と会話している場面だったり、海外の街の風景だったりする。
「もし外国語が話せたなら、自分がその場所にいるかもしれない」と思わせる写真だ。外国語で会話をしたいというモチベーショ

942019.1 大学時報

小特集●大学 Web サイトリニューアルの取り組み

る写真である。

ンを上げる写真であり、神田外語大学の学びを後押しす

興味を持ったビジターが画面をタップすると、同大学ののか？」。あるいは「なぜ、ＩＣＵは誕生したのか？」。

る（図表５）。例えば「なぜ、広大なキャンパスが必要な大学の知られざる側面をいくつか質問の形で提示していＩＣＵは「ＷＨＹ ＩＣＵ…？」というコピーの下、同引きずり込む優れた仕掛けといえる。

魅力を感じているビジターを、さらにディープな魅力に魅力につながる答えが現れるというシカケだ。ＩＣＵに大学には多くの魅力があり、どれをアピールすべきか悩んでいる大学は多いだろう。カルーセル（自動的に切り替わるスライドショー）で、あれもこれも見せている

大学サイトは多い。だが、雑多なメッセージであふれる

カルーセルは、多くのビジターに無視される傾向にあるという。

カルーセルは、大学サイトにアクセスしたときに最初に表示される場所にあることが多い。ここはビジターの目につくとても貴重な場所だ。それが「無視されるメッ

セージ」に使われているというのは、実にもったいない。

「大学をアピールする」というサイトの役目は、ＰＣサ

イトと変わらない。であれば、この貴重な場所をどのような「つかみ」にするか、じっくりと考えて情報を発信すべきではないだろうか。スマホ利用者にきちんとメッ

・

セージが伝えられる、そんな大学のスマホ サイトが増えることを願っている。

大学時報 2019.1

95

神田外語大学のトップページ
図表４
ICU のトップページ
図表５