W e b 虎 の 巻V e r. 1 . 0

はじめに 01

Web サイト制作の流れ 02

1 - 事前準備 03

2 - リソースの検討　お金と人 12

3 - サーバとドメインを検討する 19

4 - コンテンツをつくる 22

5 - コンテンツを Web サイトに掲載・公開する 32

6 - 維持と管理 35

おわりに 40

付録 41

　用語集 42

　参考になるサイト集 44

　参考文献 45

目次

『Web 虎の巻』は主に「研究室（または研究者個人）の Web サイト」を制作するための初心者向けガイドです。一般的な研究室の Web サイト（ホームページ）には、研究内容の紹介や業績リストが掲載されています。美しい写真と魅力的な文章で構成されている Web サイトもあるでしょう。しかし、こういったサイトの制作方法を熟知している研究者ばかりではありません。そこで、「研究室の Web サイトを作りたいと考え始めたけれども、どこから手をつければ良いか分からない」という研究者を対象にこの『虎の巻』を制作しました。「サーバ」や「ドメイン」といった用語を聞いても、ピンとこない方にお勧めです。

現在はインターネット上に多くのサービスがあり、Social Networking Service （SNS）を活用する研究者も世界的に増えています。SNSは使い方次第で、便利なツールになりますが、『Web虎の巻』は研究室のWebサイトを想定していますので、SNSに関する記述は補足程度に留めています。

また、高度なアーカイブ機能を用いて画像などの資料（史料）を誰もが閲覧できるよう公開するサイト（いわゆるデジタルアーカイブ）を作りたいと思う方もいるかもしれません。しかし、『Web虎の巻』では高度な機能の活用は想定しておらず、あくまで基本的な「よくある研究室Webサイト」の制作をゴールとしています。

『Web 虎の巻』はサイト制作経験のあるリサーチ・アドミニストレーター（URA）が作成していますが、Web に関する技術は日々急速に発展し、様々なツールが毎日のように出てきます。記載内容が古くなったり、もっと良い制作方法をご存知だったりする方もいるでしょう。そこで『Web 虎の巻』は「制作のための全体像の把握」に用い、個々の詳しい知識はご自身で Web 検索や書籍などを参考に、情報収集することをお勧めします。『Web 虎の巻』が研究者の Web サイト制作の一助となるよう願っています。

はじめに

Web サイト制作の流れ

目的・ターゲットを考える

ツールの検討

コンテンツの検討

リソースの検討　お金と人

サーバとドメインを検討する

コンテンツをつくる

コンテンツを Web サイトに掲載・公開する

維持と管理

05 ページ

06 ページ

10 ページ

12 ページ

19 ページ

22 ページ

32 ページ

35 ページ

事 前 準 備�

03Web 虎の巻

Web サイトは使い方によって色々なことができますが、まずは自分が何を目的に Web サイトを作るのか考えてみましょう。

Web サイトでできること

04Web 虎の巻

事前準備�

研究内容を知ってもらう

学生に来てもらう

業績などの情報整理

自分のための記録・記述

インターネット上の窓口

研究分野の活性化

Web サ イ ト を 作 る に 当 た り、そ も そ も「な ぜWeb サイトが必要だと思ったか」を改めて考えます。Web サイトを作りたいと思ったときに、おそらく何か目的があったはずです。どのような目的にしろ、まずはその目的を認識し、その目的に合った方法を取ると良いでしょう。

目的を考える際には、そのターゲットを思い浮かべます。例えば、「自分の業績をアーカイブする場所がないから作りたい」場合には、業績ページに限らず、あなたの業績を見るかもしれない将来の雇用主や他の研究室主宰者、企業などを意識すれば、より良い Web サイトになるでしょう。また「学生や院生に研究内容に興味を持って欲しい」場合は、Web サイトを作るとともに

Social Networking Service（SNS）を連動させると良いかもれません。Web サイトは情報を蓄積し、発信するためのツールです。その情報が誰に、どのようなアクションを起こさせるのか、それを最初に検討してみましょう。

目的・ターゲット

05Web 虎の巻

事前準備�

「はじめに」でも述べたように、インターネットで活用できるのは Web サイトだけではありません。すでに Facebook や Twitter などの SNS を利用している人も多いでしょう。それぞれに一長一短があるので、目的に応じて使い分けましょ う。発 信 す る 情 報 を 広 く 拡 散 し た い な ら、SNS の活用も有効です。

Twitter　https://twitter.com/不特定多数とのコミュニケーションに向いており、「リツイート」機能で口コミ的に情報が多くの 人 々 の 目 に 届 く こ と も あ り ま す。す で にTwitter を活用し、ネット上で議論している研究者もいます。情報の流れが早いため、その時々のコミュニケーションに適しています。

Facebook　http://www.facebook.com/個 人 的 な 知 人・友 人 と 交 流 す る だ け で な く、

「Facebook ページ」の機能を使って、勉強会やコミュニティの情報も発信・共有できます。「顔の見えるつながり」を中心としたコミュニティのサイトを作りたいなら、Facebook ページの利用を検討してみてください。

ツールの検討

06Web 虎の巻

事前準備�

07Web 虎の巻

事前準備�

研究者に特化したサービスもあります。

ResearchMaphttps://researchmap.jp/経歴や業績の掲載だけが目的ならば、Web サイトではなく ResearchMap でも十分かもしれません。ただ、ResearchMap には SNS 機能がなく、基本的には業績等の掲載に留まります。

ResearchGatehttps://www.researchgate.net/Academia.eduhttps://www.academia.edu/Facebook と似た機能を研究者向けに最適化した海外サービスです。基本言語は英語ですが、研究活動に有用な機能を備え注目を集めています。

目的とターゲットが明確になり、Web サイトがツールとして最適だと判断すれば、この資料を読み進めてください。しかし、Web サイト制作に関する知識が多岐にわたるのも事実です。そこで、細かい話を飛ばしてひとまず作ってみたい方は、次の方法をお勧めします。

Wordpress を体験したい方本資料は Web サイトの更新に「Wordpress（ワー ド プ レ ス）」の 利 用 を 基 本 と し て い ま す

（Wordpress については後述）。サーバやドメインなどについて考えずに、無料で Wordpress を体験したい方は次の方法をお試しください。

1. 「Wordpress.com（http://wordpress.com/）」にアクセスして、アカウントを作成します。2. Wordpress.com の説明に従ってサイトを作

ります。記事を書いたり、テーマ（全体のデザイン）を変更したりしてみましょう。

なお、Wordpress.com では、記事の作成・編集、テーマの変更、SNS との連携などができますが、より高度な拡張機能であるプラグインは使えません。あくまで簡単に、無料で、ベーシックなWeb サイトの制作に適しています。

Wordpress.com の簡単なお試しではなく、最初からサーバを準備し、Wordpress についてもプラグインを含めたフル機能を試したい方は、サーバの準備から始める次の方法をお勧めします。

とにかく Web サイトを作ってみたい方へ

08Web 虎の巻

事前準備�

サーバの準備から体験したい方

1. レンタルサーバ会社で、下記の条件を満たす業者を選び、契約します。

a. 無料のお試し期間が 1-2 週間ほどあるb. Wordpress の簡単インストール機能がある

そのサーバ会社のアカウントを持っていない方は新規アカウントを作ります。クレジットカードがあれば契約できます。上の条件を満たす業者としては「さくらインターネ ッ ト（https://www.sakura. ne.jp/）」の

「スタンダードプラン」があります。2. 簡単インストール機能でサーバに Wordpressをインストールしましょう。3. あとは Wordpress の使い方を検索して調べるなどして、適宜情報を追加して Web サイトを作ります。色々試してみて、使用をやめるなら無料期間内に解約手続きをしましょう。

以上が、まずは使ってみたい方向けの非常に簡単な説明です。パソコンやインターネットサービスに慣れている方はこれで十分かもしれません。もし上記を読んでも分からない、諸条件を検討してから制作したい方は、さらに読み進めてください。

09Web 虎の巻

事前準備�

本格的に作り始める前に研究室や研究者個人のWeb サイトに掲載する内容（コンテンツ）を考えてみましょう。まずはいくつかの研究関係のWeb サイトを自分でご覧になることをお勧めします。一般的に、以下のようなコンテンツが多いのではないでしょうか。

研究内容の紹介業績・研究成果自己紹介・研究者プロフィール研究室のメンバー紹介シラバス・講義ノートニュース・日々の研究の様子リンク集

目的に応じてどのコンテンツが必要か、考えてみましょう。ひとりで研究している人はメンバー紹介は不要ですし、上記すべてが必要なわけ

ではありませんが、まずはこれらのコンテンツをベースに考えてみると整理しやすいでしょう。

なお、研究紹介では自分の研究詳細だけでなく、分野のトレンドや学術界における立ち位置など研究を俯瞰して説明すると、専門外や異分野の方にも研究の魅力が伝わりやすくなるかもしれません。

また、リンク集には研究分野の関連学会や他の研究者の Web サイトなどを掲載すると、自分にとって便利なだけではなく、Web サイトを訪問する人々にとっても、関連研究や関連学会の情報を提供できます。リンクする情報は、Web サイトだけではなく、Twitter や Facebook といった SNS でもよいでしょう。

コンテンツを検討する

10Web 虎の巻

事前準備�

更新頻度の低いコンテンツ自己紹介や研究者プロフィール、研究内容の紹介、リンク集といった情報です。Wordpress ではこのような更新頻度の低いコンテンツを「固定ページ」機能で作成します。

更新頻度の高いコンテンツ研究業績や研究成果、日々の研究の様子、ニュースといった情報は、更新頻度が高くなります。Wordpress では「投稿」機能で作成します。頻繁な更新は少しハードルが高いかもしれませんが、例えば研究室の様子やニュースを頻繁に更新すると、研究室の活発な様子を伝えられます。

コンテンツの更新頻度を考える

11Web 虎の巻

事前準備�

リ ソ ー ス の 検 討お 金 と 人

�

12Web 虎の巻

予算の原資となるファンドは、作ろうとしている Web サイトに使えるでしょうか。ある特定の研究プロジェクトに紐付く資金の場合、そのプロジェクトに関する Web サイトしか作れない場合があります。資金が使えるかどうか迷った場合は、所属部局の経理担当にご相談ください。

予算のうち、継続的に（毎月または毎年）使える金額はいくらくらいでしょう。

その予算が使えるのはいつまででしょう。特に時限付きのプロジェクトの場合、Web サイト構築段階からプロジェクト終了後までを想像しておくと良いでしょう。

公開終了の章へ（39 ページ）

その金額でできる内容を業者などに確認しましょう。

外注の章へ（16 ページ）

後の章で検討しますが、Web サイト制作を部分的にでも外注する可能性もあります。したがってすべて自分で作る場合以外は、まず使える予算を書き出してみましょう。特に、その予算に関して次の点を考えます。

予算

13Web 虎の巻

リソースの検討　お金と人�

外注費の目安： 10 万円～100 万円

外注する際に必要な金額は、どの部分を業者に任せるかによって本当にピンキリです。簡単なページ作成と設定で 10 万円くらいから可能ですが、デザインや機能などにこだわると 50～100 万円以上になることもしばしば。まずは、どれくらいの金額まで出せるか確認しましょう。使える金額を把握した上で、外注業者と打ち合わせることをお勧めします。

参考

外注では次のような作業に費用が発生します。企画・構成ヴィジュアル・デザインページ作成CMS 構築（Wordpress の構築・設定）サーバ・ドメイン設定レスポンシブ（スマートフォンなど複数デバイス）対応etc...

14Web 虎の巻

リソースの検討　お金と人�

制作・運営に携わる人

15Web 虎の巻

リソースの検討　お金と人�

Web サイトの制作・更新は、基本的に「人力」です。コンテンツの作成やページ更新などは自動ではできませんので、作業に必要な時間と人件費を考えましょう。

あなた自身が作業するか、他の人に任せるか

作業する人は、週に何時間くらい、作業ができるか

どんな作業が発生するのか○ コンテンツの作成○ ページ更新（作成したコンテンツのアップロード）○ システム対応○ 問い合わせ対応

Web サイトが存続する限り運営に携われる人はいるか

お金や人について考えた次は、外注するか内製するか検討します。

外注のメリット技術がなくとも、サイトを作りたい側の意見を伝えると、業者がいろいろとアイデアを出し、こちらの意図に沿ったものを作ってもらえます。また、デザインや技術（サーバや CMS 等）も任せらます。Web サイト構築を考え始めた時に、ぼんやりとしか思い描けていなくても、コンサルティング的な打ち合わせの積み重ねで、構築に向けて伴走してくれます。

ただし、コンサルティングはせず技術的な作業しか対応しない業者もあり、基本的に価格が安いところはその傾向が強くなります。また、コンサルティングが込み入ると費用がかさむ場合もあります。業者の選定は難しい側面もありま

すが、多くの業者はWebサイトに「制作実績」を掲載しているので参考にしましょう。

外注のデメリット外注のデメリットは「お金がかかる」点です。「作業を任せる＝人件費＋技術料＋税金など」なので、費用の発生を念頭に置いておきましょう。また、Web サイトの運用中、簡単な記事の追加や修正は自分たちで出来るとしても、「ここのデザインをちょっと変えたい」「新しいコンテンツを増やしたい」と思ったときには、その都度外注先と連絡して作業を依頼することになります。こ の 手 間（と 発 生 費 用）を ど う 捉 え る か は、Web サイト構築側の考え方によります。

以上のメリット・デメリットを勘案し、何をどこまで自分（たち）で手がけるかを考えてみましょう。

外注か内製か

16Web 虎の巻

リソースの検討　お金と人�

17Web 虎の巻

リソースの検討　お金と人�

内製のメリット自分（たち）が作業する内製のメリットは、まず第一に「自由度が高い」点です。スキルに応じて出来る範囲は変わってきますが、デザインや構成などを好きにできます。第二に、作業を他に依頼しないので、自分自身や学生の人件費は別として技術者の人件費が発生せず、費用が抑えられます。

内製のデメリット一方、内製のデメリットは、Web やサーバ、ネットワークの知識がある程度必要なことです。「ドメイン」「HTML」などが分からないと、ゼロからすべてを内製することは難しくなります※。

一度、Web サイト構築関連の Web ページや書籍などに目を通してみて、理解できる範囲での内製を検討しましょう。

※ただし、Wordpress.com など簡便なシステムを用いる場合は、この限りではありません。

参考

例えば、以下のような組み合わせで外注と内製を選ぶ方法があります。

デザイン＋CMS 構築＋写真撮影 外注

コンテンツ作成＋維持・管理 内製

Web サイトの目的とターゲット業者が構成やデザインを考えやすくなります。

リソース：お金と人作業とメインテナンスの分担：作業範囲の分担を明確にしておくことで、見積りがとりやすく発注しやすくなります。

サーバ学内、学外、どこで用意するのか検討しましょう。

ドメイン学外でサーバを借りる場合はドメインも考えることになります。

構築技術CMS の選定、採用：詳細はコンテンツを Web サイトに公開・掲載する（32 ページ）をご覧ください。

コンテンツ研究内容は出来る限り平易な言葉で伝えましょう。

（ある場合は）メインビジュアルとなる写真や画像を準備しましょう。

運営マニュアルサイト構築を外注する際は、CMSの使い方を含めた Web サイトの運営マニュアルの作成も依頼しておくとよいでしょう。

スケジュールサイトの公開日を決定し、そこから逆算して作業をスケジューリングします。ある程度のコンテンツをそろえてから業者と打ち合わせに臨むと、デザインやレイアウト、CMS 選 定 な ど が や り や す く な ります。

参考

18Web 虎の巻

リソースの検討　お金と人�

外注の場合：仕様書を作成する外注時には、「仕様書」が業者とコミュニケーションするツールとなります。基本的には 02 ページで述べた「Web サイト制作の流れ」に関する内容を盛り込みます。以下の点を考えると、「仕様書」が作りやすくなります。業者との打ち合わせで作り込んでいってもよいでしょう。

�

19Web 虎の巻

サ ー バ と ド メ イ ン を検 討 す る

サーバを手配する

20Web 虎の巻

サーバとドメインを検討する�

サーバは Web サイトを構成するファイルを置くための場所ですので必須です。ここではサーバを学内か学外のどちらで準備するのかを考えます。

学内多くの大学ではサーバを借りられますので、担当の部署に連絡して手続きしましょう。

学外レンタルサーバの提供企業は数多くあります。

「レンタルサーバ」で検索し、いくつか比較した上で選びましょう。とはいえ、選ぶ基準は難しいので、無料お試し期間のあるサービスを試してみてもよいでしょう。レンタルサーバは業者によって価格の差はありますが、年間数千円～1 万円程度で借りられます。これに追加して、設定のための初期費用（数百

～数千円）と、次に説明するドメイン登録費用がかかります。

サーバを学内・学外のどちらで用意するかは、Web サイトの住所である「ドメイン」にも関係します。

例えば、京都大学でポストを得て研究していても、任期が決まっていれば次にどの研究機関に移るかは分かりません。京都大学でサーバを借り、京都大学のドメイン「.kyoto-u.ac.jp」で構築したWebサイトは、ポストが変わるとどうなるでしょうか？

京 都 大 学 を 離 れ る と、使 っ て い た サ ー バ も「.kyoto-u.ac.jp」ドメインも使えなくなるので、

新たな所属先で手配する必要があります。Webサイトを構成するファイルはどうなるでしょうか？全データを移動すれば対応できますが、サーバが違えば環境も異なりますので、元と同じ状態の公開は保証できません。また、移行作業は自分でやるか外注するかのどちらかです。こうした移行に伴う懸念をなくすために、最初から京都大学のドメインを使わないという考え方もあります。

多くのサーバ会社はドメイン取得サービスを提供しています。（誰かが取得していなければ）自分の好きな文字列でドメインを取れるので、例えば「www.tanaka-lab.com 」といったドメインでサイト開設もできるでしょう。一方で、京都大学のドメインを使えば、掲載する情報の信用につながります。「.ac.jp」で終わるドメインは日本の教育機関を示しているため、そのドメインのページは、その教育機関の管理下にあると見なされるからです。

サーバやドメインの選び方は、まず現在の在籍期間を考え、短期間（2-3年）なら外部のレンタルサーバ会社と、そこが提供するドメインサービスの利用を検討してみましょう。

ドメインを検討する

サーバとドメインを検討する�21Web 虎の巻

コンテンツをつくる�

22Web 虎の巻

テキストとは、ここでは Web サイトに掲載する文章を指します。この資料の冒頭で Web サイトを作る目的とコンテンツを考えました。その目的に適うようにテキストを書きましょう。研究紹介など自由に記述するコンテンツの場合、目的に応じて専門外の人々が理解できるような書き方が必要です。

Web サイトは世界中に公開され、誰でも読める状態です。情報を伝えたい対象が同じ専門分野の人々だけなら、専門用語などについてはそれほど気にしなくとも構いませんが、広く研究を伝えたいなら、分かりやすく書く必要があります。特に、海外にも情報を伝えたい場合は、英語のコンテンツも検討しましょう。

このほか、組織を代表するような表現には注意しましょう。例えば、Web サイトのコメント欄などでやり取りして質問を受けた際、自身の研究に関する内容であれば正確に回答できますが、組織を代表するような対応を取ると、問題になることがあります。特に、SNS は情報発信者と受信者が手軽に、そして簡単に繋がれるツールです。ハードルが低い分、トラブルも発生しやすくなります。発信する情報については十分注意しましょう。

テキスト

23Web 虎の巻

コンテンツをつくる�

24Web 虎の巻

コンテンツをつくる�

参考

文字数のことWeb では基本的にスペースに限りがないので、1 ページ（1 ファイル）にいくらでも文字を入れられます。ただし、長文は訪問者にとって読むのも一苦労です。また、文章量が多くなると見栄えも悪くなります。読みやすい文字数の目安は 500～2,000 字程度と言われています。画像を用いたり、段落を分けたり、小見出しをつけたりすると読みやすさが向上します。ひとつの段落は400 字程度が目安です。

写真やイラストなどの画像ファイルは、使い方によっては Web サイトをとても魅力的に見せられます。インターネット上では効果的に使われている画像に出会えます。そのような使い方ができる画像を持っているか考えてみましょう。

もし、使えそうなものが手元にない場合、インターネット上で気に入った画像や写真をダウンロードして使ってはいけません。著作権への配慮が必要です。ネット上では、掲載されている画像一点ずつにどのような著作権を設定しているのか明示的ではありません。多くの Web サイトでは、「All Rights Reserved.」と記載されていますが、この記載がなくとも著作権は発生します。著作権についての一般的なルールをきちんと守るようにしましょう。

25Web 虎の巻

コンテンツをつくる�

画像

26Web 虎の巻

コンテンツをつくる�

Creative CommonsCreative Commons（CC）ライセンスとは、インターネット時代のための新しい著作権ルールで、国際的に利用されています。

CC ライセンスの種類作品を利用（再配布やリミックス作品の公開、実演等）するための条件は 4 種類です。

例

原作者のクレジット（氏名、作品タイトルなど）を表示することを主な条件とし、改変はもちろん、営利目的での二次利用も許可される最も自由度の高い CC ライセンス。

原作者のクレジット（氏名、作品タイトルなど）を表示し、かつ非営利目的に限り、また改変を行った際には元の作品と同じ組み合わせの CC ライセンスで公開することを主な条件に、改変したり再配布したりすることができる CC ライセンス。

クリエイティブ・コモンズ・ジャパン（CCJP）creativecommons. jp から抜粋

表示作品のクレジットを表示すること

非営利営利目的での利用をしないこと

改変禁止元の作品を改変しないこと

継承元の作品と同じ組み合わせの CC ライセンスで公開すること

参考

使えるフリー素材集無料で使える画像を配布するサイトがあります。ただし、無料とはいえライセンスは様々なので、使用時は著作権に注意しましょう。

いらすとや http://www.irasutoya.com/

シルエットデザイン http://kage-design.com/

Togo Picture Gallery http://togotv.dbcls.jp/pics.html※生命科学分野に特化したサイト

27Web 虎の巻

コンテンツをつくる�

著作権関連著作権に関して詳しい情報は、以下の Web サイトなどを参考にしてください。

公益社団法人著作権情報センター（CRIC）http://www.cric.or.jp/

みんなのための著作権教室 KIDS CRIChttp://kids.cric.or.jp/

著作権（文化庁）http://www.bunka.go.jp/seisaku/chosakuken/

著作権とは （ニコニコ大百科）http://dic.nicovideo.jp/a/ 著作権

コンテンツとなる文章は書けても「（ヴィジュアル）デザインはよく分からない」という方も多い の で は な い で し ょ う か。Wordpress な ど のCMS を用いる場合、もっとも手っ取り早いのは好みの「テンプレート」を選択してデザインを変更する方法です。例えるなら、中身はそのままで服だけ着替えるようなものです。各 CMS でテンプレートが配布されており、中には無料で使えるものも多くあります。「Wordpress テンプレート」といった文字列で検索してみましょう。

しかし、既存のテンプレートではあなたの好みにピッタリ合うものはなかなか無いかもしれません。その場合は自作するか、外注するか、です。とはいえ、CMS のデザインを自作するようなスキルがある人はこの資料を読んでいないはずですので、外注する場合を検討してみましょう。

デザイン

28Web 虎の巻

コンテンツをつくる�

ワイヤーフレームの例

ロゴ

研究紹介 メニュー

画像 画像 画像

研究室名

29Web 虎の巻

コンテンツをつくる�

デザインの外注デザインの外注時に依頼者として伝えるべきことは「目的」と「ターゲット」です。何のために Web サイトを作るのかを丁寧に説明することで、業者のデザイナーはその目的に最適なデザインを考えます。

たとえば「研究業績をまとめたい、ニュースの更新頻度は高くない」と伝えれば、デザイナーは研究業績を中心にし、ニュースなどは控えめに配置するでしょう。また、学生に研究内容を知って欲しい場合、Web サイトを開いて目に飛び込んでくる場所に、学生にとって魅力的な研究紹介を入れるといった提案が出てくるかもしれません。

このように「目的に応じてどの場所にどんな情報を入れるのか」が Web サイトの基本設計とな

ります。その設計図を「ワイヤーフレーム」と呼ぶことがあり、業者に外注するときには目にすることがあるでしょう。この段階できっちりと情報を整理しないと、実際の開発が始まってからでは変更が難しくなることもあります。

目的やターゲットに加えて好みの雰囲気も大切なので、「活気ある雰囲気にしたい」とか「穏やかな緑をメインカラーにしたい」などと伝えても良いでしょう。ただし、最初から細部の表現にこだわって「ここは赤色で」などと細かな見た目の指示はあまり意味がありません。見た目のデザインは、目的との関係性で考えられるべきことですから、赤色にすることとが目的とそぐわない場合には適切な指示とは言えないからです。また、Web サイトを閲覧する環境（パソコン、タブレット、スマホ等）が変われば、同じ Web ページでも見え方が変わってきます。細かな見た目は技術的な検討も必要なので、業者やデザイナーと相談して決めましょう。

業者が提案するデザインで気になる箇所がある場合は、どんどん懸念を伝えましょう。業者は、大学の慣習や雰囲気を完全に把握できるわけで

はありませんので、意図がズレてしまうこともあります。そうした場合には、適切な指摘が発注側の役割と言えます。

30Web 虎の巻

デザインの外注デザインの外注時に依頼者として伝えるべきことは「目的」と「ターゲット」です。何のために Web サイトを作るのかを丁寧に説明することで、業者のデザイナーはその目的に最適なデザインを考えます。

たとえば「研究業績をまとめたい、ニュースの更新頻度は高くない」と伝えれば、デザイナーは研究業績を中心にし、ニュースなどは控えめに配置するでしょう。また、学生に研究内容を知って欲しい場合、Web サイトを開いて目に飛び込んでくる場所に、学生にとって魅力的な研究紹介を入れるといった提案が出てくるかもしれません。

このように「目的に応じてどの場所にどんな情報を入れるのか」が Web サイトの基本設計とな

ります。その設計図を「ワイヤーフレーム」と呼ぶことがあり、業者に外注するときには目にすることがあるでしょう。この段階できっちりと情報を整理しないと、実際の開発が始まってからでは変更が難しくなることもあります。

コンテンツをつくる�

目的やターゲットに加えて好みの雰囲気も大切なので、「活気ある雰囲気にしたい」とか「穏やかな緑をメインカラーにしたい」などと伝えても良いでしょう。ただし、最初から細部の表現にこだわって「ここは赤色で」などと細かな見た目の指示はあまり意味がありません。見た目のデザインは、目的との関係性で考えられるべきことですから、赤色にすることとが目的とそぐわない場合には適切な指示とは言えないからです。また、Web サイトを閲覧する環境（パソコン、タブレット、スマホ等）が変われば、同じ Web ページでも見え方が変わってきます。細かな見た目は技術的な検討も必要なので、業者やデザイナーと相談して決めましょう。

業者が提案するデザインで気になる箇所がある場合は、どんどん懸念を伝えましょう。業者は、大学の慣習や雰囲気を完全に把握できるわけで

はありませんので、意図がズレてしまうこともあります。そうした場合には、適切な指摘が発注側の役割と言えます。

用意したテキストや画像を Web サイトで公開する シ ス テ ム が Contents Management System

（CMS） で す。CMS の 多 く は 無 料 で 利 用 で き、Web の細かい知識を必要とせず、Word と同じように、記事の作成や更新ができます。

よく使われる CMSWordpressJoomlaDrupal

2017 年現在、世界で最も使われている CMS はWordpress です。Web サイトに便利な機能を追加するプラグインも充実しています。多くの人が使っているためページ改ざんなどのセキュリ

ティリスクもありますが、特にこだわりがなければまずは Wordpress の使用をお勧めします。どの CMS を使う場合でも、セキュリティ対策の観点から「バージョンアップ」は日頃から行うようにしましょう。

CMS は、単にサーバへインストールするだけでは使えず、様々な設定が必要です。また、CMSによって操作性などが異なるので、構築するサイトの方向性や方針とあわせて適切な CMS を選ぶと、更新作業やメインテナンスの負担が小さくなります。外注する場合、業者によって導入経験が豊富な CMS と、そうでないものがあるので、複数の業者から事前に話を聞き、比較・検討することをお勧めします。

CMS の検討

31Web 虎の巻

コンテンツをつくる�

�

32Web 虎の巻

コンテンツをWebサイトに掲載・公開する

タイトル 入力モード切り替え

作成が終われば「公開」をクリック

写真の挿入 本文

CMS にコンテンツを追加する

33Web 虎の巻

コンテンツを Web サイトに掲載・公開する�

デザインが完成し、CMS の構築が終われば、コンテンツを入れていきます。

図は Wordpress の編集画面です。タイトルや本文を入れる空欄があります。本文は Word と 同 様 に 太 字 に したりリンクを入れたりできます。また「メディアを追加」から、写真などを入れることもできます。

最初は CMS の扱いに慣れないかもしれませんが、Web 検索などで調べながらコンテンツを追加していきましょう。

デフォルトの入力モードである「ビジュアル」

ではかゆいところに手が届かない場合もあります。その場合は次に述べる HTML を理解し「テキスト」モードに切り替えると、より自在に記事を作成できます。

HTML の基礎知識

34Web 虎の巻

コンテンツを Web サイトに掲載・公開する�

<a href=” http://www.kyoto-u.ac.jp” >京都大学へのリンク</a>

終了タグ開始タグ リンク先

京都大学へのリンク

Hyper Text Markup Language (HTML) は Web ページを作る言語です。ここでは、基本的な「タグ」の概念を説明します。タグを理解しておくと、Wordpress（テキストモード）での記事作成に役立ちます。

HTML は基本的に山括弧「< >」による開始タグと、スラッシュと山括弧「</>」による終了タグで構成されます。

図では、リンクを指示する<a>タグを説明しています。HTML では山括弧の中に、そのタグに

関連する仕様を記載します。<a>タグではリンク 先 を「href」で 指 定 し ま す。href の 中 身 を

「=」と「 ” （ダブルクォーテーション）」で指示します。ここに例えば京都大学の URL を入れて、

「<a href=” http://www.kyoto-u.ac.jp” >京都大学へのリンク</a>」と記述すると、「京都大学へのリンク」という文字列に、「http://www. kyoto-u.ac.jp」へのリンクを貼れます。

さらに HTML の詳細を知りたい方は、HTML に関する書籍や Web サイトなどをご覧ください。

�

35Web 虎の巻

維持と管理

目的にもよりますが、Web サイトは、「情報の更新」が期待されるメディアです。こまめな更新で、一定層の読者を獲得（＝情報の拡散）できます。

頻繁に情報を更新しない場合でも、コンテンツの内容に応じて学期や年度の変わり目の定期的な更新を心がけましょう。たとえばプロフィールやシラバスの情報を随時更新すると、読者はWeb サイトに訪問するタイミングに見当がつきます。

ユーザ目線を大切にWeb サイトの更新は、「Web サイトを利用する立 場」で 考 え る と 分 か り や す い で し ょ う。Google、Yahoo などの検索エンジンを使って見つけた Web ページが、何年も更新されていなかったり、リンク切れしたりしていたら、再訪す

るでしょうか？「お気に入り」に追加するページはどんなページでしょうか？自分自身が利用者になったつもりで Web ページを作成すると、より使いやすく魅力的なものになるでしょう。

更新

36Web 虎の巻

維持と管理�

新たな脅威が毎日のように発生しており、セキュリティ対策は非常に重要です。お使いのパソコンの対策はもちろんのこと、サーバで動いている Wordpress 等の CMS もセキュリティホールが見つかることが頻繁にありますので、普段から対策を心がけましょう。

パソコン対策ウィルスやマルウェア対策ソフトウェアを導入し、リスクを減らしましょう。不審なメールやリンク、ファイルは絶対に開かず、ネットワーク管理者に通報しましょう。ネットワークやシステム管理者から連絡があれば、迅速に指示に従い対応しましょう。個人情報の漏洩に注意しましょう。Web サイトの管理者権限に関係する ID とパスワードが漏洩した場合、Web サイトが乗っ取られる可能性があります。

CMS 対策CMS の普及に伴いその脆弱性を狙ったマルウェアが世界的に流行しています。使っている CMSのセキュリティ情報には気を配りましょう。

セキュリティ対策

37Web 虎の巻

維持と管理�

参考

Wordpress：利用者も多いがセキュリティアップデートも多い！セキュリティアップデートの自動更新は、サーバによって異なります。例えば、レンタルサーバの「さくらインターネット」は自動更新です。しかし、京都大学のサーバでは 2018 年 2 月現在、自動更新はされないため、利用者によるアップデートが必要です。自分で使うサービスが自動更新に対応しているか確認しましょう。Wordpress を手動でアップデートするには、「更新」メニューから Wordpress 本体やプラグインを最新バージョンにできます。

「炎上」とは、不祥事の発覚や失言などとネット上で判断されたことをきっかけに、非難が殺到し収拾が付かなくなっている事態または状況を指します（Wikipedia より）。炎上を回避するために意識すべき原則は次の 2 点です。

インターネット上の情報は「全世界に公開されている」

発信した情報は「受け手」が解釈する

インターネット上の情報は「全世界に公開されている」という意識が必要です。パスワード認証などで関係者しかアクセスできない設定にすることで、ある程度の悪意あるアクセスをブロックすることはできますが、これを破る手法もありますので完全な方法とは言えません。

SNS の「限定公開」も同様です。どこの誰が情報を拡散するかは分かりません。つまり、ネット上の情報を完全に非公開にすることは困難です。常に情報流出の可能性を頭の片隅に置いておきましょう。

また、発信した情報は「受け手」が解釈します。発信者にとって想定外の解釈がありますので、

「書き方」には注意が必要です。

「炎上」に注意

38Web 虎の巻

維持と管理�

Web サイトは継続的な更新が基本のメディアですが、期限のあるプロジェクトの Web サイトでは、プロジェクト終了に伴いサイトの継続が難しくなる場合もあります。Web サイトのホームページ（トップページ）に更新終了の旨を明示して公開の継続もできますが、有償サーバを用いる場合、情報公開中は費用が発生し続けます。また、無料サービスの場合は一定期間以上の更新がないと、意図しない広告が入ることがあります。Web サイトの終了があらかじめ想定される場合には、公開終了に関わる作業、手続き、コンテンツの保存について構築段階から検討しておくことで、掲載するコンテンツの形式なども選択しやすくなります。

公開終了

39Web 虎の巻

維持と管理�

Web サイトで情報を公開すると、自分の研究に興味を覚えた学生が来たり、共同研究が始まったり、思いがけない効果があるかもしれません。更新作業が手間と感じる時があるかもしれませんが、放置したり構い過ぎたりせずに「適度な水やり」で育てた Web サイトを活用し、よりよい研究生活を送られるよう願っています。

おわりに

41Web 虎の巻

付録

より詳しく知りたい場合は Web で検索してみましょう。

用語集

42Web 虎の巻

付録

ブラウザBrowserChrome、FireFox、Internet Explorer、Safari な ど、Web サ イ ト を 表 示・閲覧するソフトウェア。

CMSContents Management SystemWeb サイトを管理するツール。コンテンツ更新なども簡単にできます。

CSSCascading Style SheetWeb ページのヴィジュアルデザインを一括して管理するツール。細かく設定できるため、一般的に利用されています。

ドメインDomainサイトの「住所」を（人間が分かりやすく判別するために）表す文字列。例 え ば「www.tanaka-lab.com」がドメインに当たります。

FTPFile Transfer Protocolフ ァ イ ル を 転 送 す る プ ロ ト コ ル。HTTP よりも速度が速く、大容量ファイル（画像や動画など）の転送に使われます。業者とのデータのやり取りで FTP を使う場合があります。

HTMLHyper Text Makeup LanguageWeb ペ ー ジ を 記 述 す る 言 語。こ の

HTML に CSS や Javascrip 等の他の技術 を 用 い た コ ー ド を 組 み 合 わ せ てWeb サイトが作られます。

HTTPHyper Text Transfer ProtocolWeb ページと Web サーバの間での情報のやり取りを取り決めたプロトコル。HTML や CSS で 記 載 さ れ た ペ ージ情報を Web サーバが受け取り、人間が読みやすいレイアウトやデザインで表示させるために必要なもの。拡 張 概 念 と し て よ り セ キ ュ ア な

「 h t t p s （ H y p e r Te x t Tr a n s f e r Protocol Secure）」が あ り、こ ち らの利用が推奨されています。

JPG/PNG/GIF画像フォーマットの種類。圧縮原理が異なり、目的とする画像によって使い分けます。

プラグインPlug-in追加機能を意味し、Wordpress などの CMS において便利な機能がプラグインとして無料で数多く提供されています。プラグインはサードパーティによって作られているものが多く、便利ですが互いにコンフリクトを起こ す こ と も あ り、ま た CMS の バ ージョンアップに対応し続けられない場合もあるため、プラグインに依存した構築・運用には注意が必要です。

レスポンシブデザインResponsive DesignWeb ページを閲覧する側の環境（デスクトップ PC やタブレット、スマートフォン）に応じて、各環境で見やすくしたデザイン。一つの Web サイトのコンテンツが、内容は同じだがスマートフォンや PC で見え方を変えられます。

SEOSearch Engine OptimizationGoogle などの検索サイトで検索結果が上位に来るように、サイトのメタ情報など（キーワード等）を最適化する手法。

サーバServerインターネットを支える大事なハード的インフラ。

SNSSocial Networking Service双方向のコミュニケーションを意図した Twitter や Facebook などのサービス。

URLUniform Resource Locatorサイトに含まれる個別ページの「住所」を表す文字列。例えば

「 w w w.ta n a ka - l a b.co m /a b o u t . html」が URL に当たります。

43Web 虎の巻

付録

ブラウザBrowserChrome、FireFox、Internet Explorer、Safari な ど、Web サ イ ト を 表 示・閲覧するソフトウェア。

CMSContents Management SystemWeb サイトを管理するツール。コンテンツ更新なども簡単にできます。

CSSCascading Style SheetWeb ページのヴィジュアルデザインを一括して管理するツール。細かく設定できるため、一般的に利用されています。

ドメインDomainサイトの「住所」を（人間が分かりやすく判別するために）表す文字列。例 え ば「www.tanaka-lab.com」がドメインに当たります。

FTPFile Transfer Protocolフ ァ イ ル を 転 送 す る プ ロ ト コ ル。HTTP よりも速度が速く、大容量ファイル（画像や動画など）の転送に使われます。業者とのデータのやり取りで FTP を使う場合があります。

HTMLHyper Text Makeup LanguageWeb ペ ー ジ を 記 述 す る 言 語。こ の

HTML に CSS や Javascrip 等の他の技術 を 用 い た コ ー ド を 組 み 合 わ せ てWeb サイトが作られます。

HTTPHyper Text Transfer ProtocolWeb ページと Web サーバの間での情報のやり取りを取り決めたプロトコル。HTML や CSS で 記 載 さ れ た ペ ージ情報を Web サーバが受け取り、人間が読みやすいレイアウトやデザインで表示させるために必要なもの。拡 張 概 念 と し て よ り セ キ ュ ア な

「 h t t p s （ H y p e r Te x t Tr a n s f e r Protocol Secure）」が あ り、こ ち らの利用が推奨されています。

JPG/PNG/GIF画像フォーマットの種類。圧縮原理が異なり、目的とする画像によって使い分けます。

プラグインPlug-in追加機能を意味し、Wordpress などの CMS において便利な機能がプラグインとして無料で数多く提供されています。プラグインはサードパーティによって作られているものが多く、便利ですが互いにコンフリクトを起こ す こ と も あ り、ま た CMS の バ ージョンアップに対応し続けられない場合もあるため、プラグインに依存した構築・運用には注意が必要です。

レスポンシブデザインResponsive DesignWeb ページを閲覧する側の環境（デスクトップ PC やタブレット、スマートフォン）に応じて、各環境で見やすくしたデザイン。一つの Web サイトのコンテンツが、内容は同じだがスマートフォンや PC で見え方を変えられます。

SEOSearch Engine OptimizationGoogle などの検索サイトで検索結果が上位に来るように、サイトのメタ情報など（キーワード等）を最適化する手法。

サーバServerインターネットを支える大事なハード的インフラ。

SNSSocial Networking Service双方向のコミュニケーションを意図した Twitter や Facebook などのサービス。

URLUniform Resource Locatorサイトに含まれる個別ページの「住所」を表す文字列。例えば

「 w w w.ta n a ka - l a b.co m /a b o u t . html」が URL に当たります。

情報セキュリティ対策：IPA 独立行政法人 情報処理推進機構https://www.ipa.go.jp/security/measures/セキュリティ情報を発信しています。

デジタル・ネットワーク社会と著作権 | 著作権 Q&A | 公益社団法人著作権情報センター　CRIChttp://www.cric.or.jp/qa/multimedia/デジタル情報の著作権に関する FAQ がまとまっています。

World Wide Web Consortium (W3C)https://www.w3.org/世の中のインターネットに関する事柄などを決めているコンソーシアムです。

参考になるサイト集

44Web 虎の巻

付録

『ウェブでの＜伝わる＞文章の書き方』岡本真、2012 年、講談社現代新書、ISBN978-4-06-288187-6

『Web デザイン受発注のセオリー　デザインコントロールが身につく本』片山良平、2011 年、ワークスコーポレーション、ISBN978-4-86267-111-0

『これからホームページをつくる研究者のために』岡本真、2006 年、築地書館、ISBN4-8067-1335-X

京都大学情報環境機構http://www.iimc.kyoto-u.ac.jp/

情報通信白書http://www.soumu.go.jp/johotsusintokei/whitepaper/

参考文献

45Web 虎の巻

付録

＋

発行日　2018 年 2 月　Ver. 1.0