大学研究室ホームページの作り方を徹底解説 (web#009)
今回は、大学研究室のホームページを作ろうとしている皆さまに向けて、「研究室サイト制作の流れ」をわかりやすく解説します。
研究室のホームページを作りたいけど、どこから始めればよいか・・・
ホームページを作るツールは色々あるけど、何を使ったらよいのか・・・
いっそのこと制作会社に依頼した方が手っ取り早いのか・・・
研究室のホームページを作るとはいっても、スタートの時点で色々と選択肢が多く、踏み出せない場合も多いでしょう。
【 目次 】
- ０．研究室のホームページを作成するにあたって
- １．ホームページ制作の体制を考える
- ２．プランを検討する
- ３．サイト構成を決める
- ４．ワイヤフレームを作成する
- ５．素材を調達する
- ６．デザインを制作する
- ７．HTMLで各ページをコーディングする
- ８．CMSを導入する
- ９．ウェブサイトをテストする
- １０．ウェブサイトを公開する
- １１．ウェブサイトを運用する
- １２．まとめ
０．研究室のホームページを作成するあたって
共同研究者とのつながりや学生募集、企業や行政・メディアとのつながりなど、研究室ホームページの役割は多岐にわたります。
このブログでは、大学研究室ホームページ作成サービスのラボゼミCMSを運営するスパイスワークスが、実際の制作ステップを追いながら、成功する研究室HPの作り方を丁寧にご紹介します。
１．ホームページ制作の体制を考える
WEBサイトを作るといっても、企画を固め、文章や写真を用意し、デザインを制作し、 HTMLをコーディング、場合によってはシステムを開発するなど、始めてみると予想した以上に時間がかかるというのが現実ではないでしょうか。
日頃の忙しい業務の中でホームページ制作のプロジェクトを同時並行する必要がありますので、まずは体制をしっかり検討しておかないと、プロジェクトが滞ってしまう可能性があります。
【体制①：自分で作る】
最近はWixやJimdo、WordPressなど、ノーコードやローコードで使えるツールも増えています。時間に余裕があり、ある程度のITスキルがある方は、自作も可能です。
ただし、情報設計やデザイン、保守運用までを一人で対応する必要があるため、負担は大きめです。
時間のある方におすすめです。
【体制②：学生に作ってもらう】
研究室の学生に作成を依頼するのも一つの手です。
研究生の中に一人は得意な学生がいそうです。ただし、卒業後の引き継ぎやメンテナンス計画を明確にしておく必要があります。
大学研究室の実態を知るべく100件の研究室を調査しましたが、「学生が作ってくれた、思い入れのある研究室ホームページだからこのまま残したい」という学生への愛情から、ホームページを刷新することができず、スマホ対応できていないなど、時代に取り残されたホームページになっているケースも見受けられました。
【体制③：プロに依頼する】
本格的なクオリティを求める場合、やはり専門のWEB制作会社に依頼するのが早いですし、研究室側の負担も抑えられるのがメリットでしょう。
見やすさはもちろん、更新のしやすさなども配慮して、信頼感のあるサイトを作ってもらうことが可能です。
ただし費用がかかるのがデメリットです。
依頼の際は、あらかじめ予算を伝えておくとよいでしょう。
予算を明確にした方が後々もめることもありませんし、その予算内でどこまでできるかを明確に提案してもらうことができます。
大学研究室のホームページ制作に慣れた制作会社であれば、だいたいの予算感は把握しているでしょう。
２．プランを検討する
おおよその体制が決まったら、いよいよWEBサイトのプランの検討です。
【ターゲットを決める】
まずは「誰に向けたサイトなのか」を明確にしましょう。
- ・学部生（入学希望者）
- ・他大学の研究者
- ・企業の研究開発担当者
- ・メディア
- ・行政機関
ターゲットが変われば、サイトに掲載する情報や構成も変わります。
もちろん、ターゲットは複数存在してかまいません。ただし、優先順位をつけておいた方が、この先のプランを進めやすいでしょう。
【各ターゲットが必要とする情報を洗い出す】
例えば、入学希望者が知りたい情報としては「どんな研究をしているか」「どんな雰囲気の研究室か」などがあるでしょう。
企業なら「研究実績」や「共同研究の事例」などが重要です。
各ターゲットにどのようなコンテンツを用意するかを洗い出しましょう。
【研究室の特徴を明確にする】
WEBサイトは研究室からのメッセージとなりますので、何を伝えるかを明確にすることが大切です。
100のメッセージを投げても、100受け取ってくれる人はなかなかいません。
メインとして伝えたい内容を絞り込むことが大切です。
あなたの研究室ならではの「強み」「雰囲気」「メッセージ」を言語化しましょう。
研究分野だけでなく、教育方針や研究室の文化も伝えられると◎です。
どう伝えるかも大切です。たとえば「うちの研究室はこういう雰囲気です」と文章で伝えるより、ブログやフォトギャラリーなどで、研究合宿の写真を掲載した方が、説得力があります。
大学研究室のホームページ制作に慣れた制作会社であれば、アドバイスをもらえるでしょう。
【運用プランを考える】
HPは公開して終わりではありません。
ずっと固定で情報が変わらないのであれば、紙のパンフレットをpdfにして公開しているのと同じです。
「更新はどのくらいの頻度で？」「誰が情報を更新する？」「どのような情報を更新する？」といった運用計画も最初に考えておくと、更新が停滞してしまうことを避けられます。
できれば月に2回以上は、なんらかの情報を更新したいところです。
その前提で運用プランを考えてみてください。
３．サイト構成を決める
おおよそのプランが決まったら、具体的にサイトの骨格を固めていきます。
【ページ遷移図を作成する】
必要なページ（トップ、研究紹介、メンバー紹介、Newsなど）を洗い出し、ページ同士の関係を図にしましょう。
これにより、全体像が整理され、ユーザーが迷わない設計ができます。
サイトマップ（遷移図）の例
どのようなページが必要か迷われる場合は、以下の記事を参考にしてください。他の研究室がどのようなコンテンツを掲載しているのか、100件の研究室の調査結果をまとめています。
４．ワイヤフレームを作成する
全体のサイト構成が見えてきたら、各ページの内容を検討します。
いきなりデザインから入らずに、まずはワイヤフレームを作ります。
【ワイヤフレームとは】
ワイヤフレームとは、Webサイトのレイアウト（どこに何を配置するか）を決める設計図です。
紙でもOKですし、PowerPointなど、日ごろ使い慣れているアプリがあればなんでもOKです。
ワイヤフレームの例
この時点でデザインまで考えるのではなく、単純にどこにどの内容を掲載するかということだけ考えるために、通常は色を使わずにモノトーンで作成します。
【各ページの構成を考える】
ワイヤフレームを作りながら、ページごとに、「メニュー」「見出し」「本文」「写真」「ボタン」などの配置を具体的に計画します。
ワイヤフレームやサイトマップ作成の業務はUIの知見が必要な部分でもありますし、慣れないと作業時間もとられます。
サイト構成の設計からWEB制作会社に依頼すれば、研究室内の工数を削減することができます。
５．素材を調達する
ワイヤフレームで各ページの大枠が見えてきたら、その枠に入れる文章や写真を用意します。
【ホームページで使う文章を用意する】
研究紹介、メンバーのプロフィール、業績一覧など、文章を準備しましょう。過去の発表資料やパンフレットを活用すると効率的です。
大学研究室サイトの場合、内容が高度に専門的なので、文章の作成については制作会社や学生に依頼するのが難しい部分です。
大変な作業ではありますが、言語化することで研究室の特徴やビジョンをあらためて明確にすることができますので、一石二鳥と思って取り組みましょう。
【ホームページで使う写真や動画を用意する】
研究風景や集合写真、教員のポートレートなど、ビジュアルも重要です。日頃のブログ記事で使う写真はスマホ撮影でもOKですが、メインビジュアルで使う写真などは、クオリティを意識したいところです。
プロに頼めば研究関連の写真などをアレンジして、メインビジュアルとしてデザインしたり、素材集をもとに編集してそれなりのものにしてもらうことも可能です。
WEBサイトの公開以降は、イベントなどの際に写真や動画を撮影しておくことを心がけましょう。
６．デザインを制作する
ここまでの準備段階を経て、いよいよWEB制作らしい段階に入ってきました。
WEBサイトの骨格が固まり、各ページの要素が揃ったら、デザインを制作することができます。
もちろん、この時点で全ての写真や文章がある必要はありません。素材が揃った部分から進めることも可能です。
【トップページのデザインを作成する】
研究室の第一印象を左右するトップページ。
視認性と第一印象を両立させるデザインを目指しましょう。
最近はフルスクリーンビジュアル＋シンプルなナビゲーションが主流です。
デザインを誰かに依頼する場合は、お気に入りのサイトなどあれば、是非サンプルとして情報共有してあげてください。イメージをできる限り明確に共有することで、「考えたイメージとかけ離れたものが出来上がってしまった。。。」ということを避けられます。
どのようなデザインがお好みか、イメージはお持ちでしょうか？
デザイン性に優れた研究室ホームページを紹介した記事がありますので、参考になれば幸いです。
【2階層以下のページデザインを作成する】
トップページのデザインができたら、そのデザインテイストを踏襲して、第二階層以下の各ページをデザインします。
研究紹介やメンバーページなど、情報をしっかり伝えるページも整えましょう。
ワイヤフレームの項でも触れましたが、タイトル、見出しの位置、写真や文章の配置など、テンプレートを決めておくと更新が効率的になりますし、ユーザーも閲覧しやすくなります。
研究室HPのデザイン制作の依頼方法に絞って解説した記事もありますので、詳しくはこちらもご参照ください。
７．HTMLで各ページをコーディングする
WEBページはHTMLという言語でコーディングされています。デザインをもとに、WEBサイトとして閲覧できるようにコーディングを進めます。
【HTML, CSS, JavaScriptとは】
コーディングでは、主に HTML, CSS, JavaScript という言語を使用します。
それぞれ簡単に言うと以下のようなものとなります。
- HTML：ページの骨組み（文章や見出しなど）
- CSS：見た目（色・レイアウト）
- JavaScript：動き（スライドやフォームの動作など）
【HTML, CSS, JavaScriptを組み込む】
HTML, CSS, JavaScript 等を組み込むには専門知識が必要です。制作会社に依頼するか、WordPressなどのCMSを使えば、ここを簡略化できます。
HTML, CSS, JavaScriptを組み込めば（コーディングすれば）、WEBサイトの見た目を整えることができます。
なお、 コーディングをすれば見た目が整いますが、できればただ見た目が整うだけでなく、「構造化」と言われる条件を満たしたいところです。
構造化をすると、 Google の検索エンジンなど、コンピューターがその Webサイトを理解しやすくなり、検索結果の表示の仕方などに影響がでます。
構造化については、WEB制作会社の中でも、SEOの知見がある企業を選ぶ必要があります。
> 研究室ホームページのコーディングについてプロに無料で相談する
８．CMSを導入する
CMS（コンテンツ・マネジメント・システム）とはWEBサイトのコンテンツを管理・更新するシステムです。
CMSが導入されていない状態でサイトを更新するには、HTMLと呼ばれるファイルのソースコードを編集し、FTPというファイル転送用のアプリケーションでサーバーに接続し、保存したファイルをアップロードする必要があります。
CMSを利用するメリットは、ソースコードを知らなくてもサイトの情報を、アプリケーション上で簡単に更新できることです。
デメリットとしては、CMSのセッティングに専門知識が必要になることです。
とはいえCMSを導入しないと、サイトの更新に手間がかかることが原因で、情報の更新が滞ることになりがちです。
大学研究室では WordPress というCMSを利用することが多く、導入することによって更新作業が楽になります。
特に「研究業績」や「お知らせ」など、情報更新を積極的にしていこうという研究室には、CMSの導入がおすすめです。
> 研究室ホームページのCMS導入についてプロに無料相談する
９．ウェブサイトをテストする
いよいよウェブサイトが出来上がります。
ここでは公開前の最終チェックを行い、修正を依頼します。
【文字や画像を校正する】
誤字脱字、レイアウト崩れなどを細かくチェックしましょう。第三者に見てもらうと見落としが減ります。
【リンクをチェックする】
パンフレットや名刺などの紙媒体とWEBサイトの大きな違いは、「リンク」があることです。
リンク先を間違えていないかもチェックする必要があります。
【システムの動作をチェックする】
お問い合わせフォームなどは通常のページと違い、システムで開発されていますので、きちんと動作しているかの確認も必須です。メールがちゃんと届くか、入力制限が効いているかなどを確認しましょう。
１０．ウェブサイトを公開する
制作・テストが完了したら、サーバーにファイルをアップロードすることでWEBサイトが公開されます。
WordPressなら管理画面から簡単に公開できます。
手動アップロードの場合はFTPソフトなどが必要です。
１１．ウェブサイトを運用する
多くの工程を経て、ようやくWEBサイトが公開されました！
とはいえ厳しいようですが、WEBサイトは公開してからがスタートです。
一旦公開の喜びを噛みしめながら、運用の準備をしていきましょう。
【サイト運用の大切さ】
公開がゴールではなく「スタート」です。
せっかくホームページを立ち上げても、更新が少ないとなかなか人の目に触れることがなくなってしまいます。
情報の鮮度を保ち、定期的に更新しましょう。
特に研究成果や学会参加報告などは積極的に発信していただくことをおすすめします。
【システムのメンテナンス】
運用が必要なのはユーザーから目に見える部分だけではありません。
アプリケーションやサーバーのアップデート、セキュリティ対策なども運用の一部です。
SSL（通信を暗号化する仕組み）やドメイン名の有効期間が切れるなど、簡易なメンテナンスもあります。
詳しい学生に頼んでもいいのですが、卒業することを考えると、学内の情報システム部門と連携するか、もしくは企業に保守を依頼すると安心です。
【WordPress のアップデート】
WordPressを使っている場合は、プラグインや本体のアップデートを忘れないようにしてください。
古いまま利用していると、セキュリティの問題が生じることがあります。
１２．まとめ
研究室の魅力を最大限に伝えるホームページは、あなたの研究の「もう一つの顔」です。
ぜひこの記事を参考に、研究室サイトづくりに挑戦してみてください！
ラボゼミCMSでは今回ご紹介した一連の工程に伴走して、丁寧にサポートさせていただきます。
研究室のホームページ制作にご不安があれば、是非無料相談をお申込みください。
