大学のホームページ印象的な20サイトを比較し、制作のポイントを4つの項目で考察してみました。
これから、大学、学部、学科、研究室のホームページを新規で制作、リニューアルで制作をご検討されているご担当者さま、よろしかったらご参考にしていただけましたら幸いです。
＜目次＞
・全体のデザイン
・掲載コンテンツ
・ナビゲーション、UI
・文字サイズ
・まとめ
・全体のデザイン
PC表示、スマートフォン表示のメリハリを感じるデザインが多い傾向にありました。
具体的には、PCはハイビジョン（HD）～フルハイビジョン（フルHD／2K）幅で大き目のブロック構成、トップページには動画を大きめに配置する。高速回線、高速処理の可能なPC向けを意識した構成です。
動画には、大学、学部、学科、研究室、クラブ活動を印象的な映像にするシネマトグラフィという技法を用います。
多少ハイスペックな視聴環境を求めるようなホームページでも、先進性と斬新さを印象付けられればよいという考えがもとになっていると思います。
一方、スマートフォン表示の場合は、動画は重くなり、多くの受験候補者が使用しているであろうスマートフォンで確実に表示できる静止画をメインヴィジュアルに使う、もしくは、動画を使用する場合も自動再生にはせずに、閲覧者に再生の有無を選択していいただくというケースが多いようです。
・掲載コンテンツ
大学、学部、学科様サイトは、毎年受験シーズンに合わせて掲載されるコンテンツの更新が行われれる傾向にあります。
具体的には、ホームページの新着情報欄に受験情報、オープンキャンパスの情報を掲載するのですが、
トップページを開いたときに、前面に告知のウインドウを表示することで、閲覧者のほとんどの意識を受験情報、受験ガイドへ集中させることができるようになります。
使用するメインヴィジュアルなどのイメージ素材は、大学、学部、学科、研究室、クラブ活動などのキャンパスライフの写真をプロショットとしてオリジナルで用意する、
もしくは、やさしく、やわらかいイラストを使用する例も多くあります。
ひとつ大切なことは、大学、学部、学科ホームページと、とくに配色の整合性をとる点があり、大学、学部、学科公式ホームページと制作者が異なる場合も、
グラフィックデザインを深く理解している制作者へ依頼されることが望ましいようです。
・ナビゲーション、UI
大学、学部、学科ホームページのUIは、こちらもPC表示、スマートフォン表示のメリハリが必要になってきます。
幅の広い液晶ディスプレイを使用するPCの場合は、大き目のブロックナビゲーション。
スマートフォンは、PCに比べると狭いディスプレイですが、片手でも操作できるサイズでもありますので、ディスプレイの上下を上手く使ったナビゲーションがおすすめです。
一方、ご予算が限られている、という場合も多いと思います。PC、スマートフォンのナビゲーションを共用とすることもひとつのアイデアだと思います。
また、文字は、検索サイトやアクセシビリティを意識する場合はテキストで表現することは必須になってきます。
・文字サイズ
今回、印象的な20サイトを比較してみましたところ、本文、ナビゲーションに使われるフォントサイズは、概ね14px-16px程度でした。
これは、閲覧対象となる方の年齢層によりご判断されるとよいと思われます。40代以降の親御さんを対象とする場合は、大き目のフォントサイズを意識された方がよいでしょう。
行間については、1.4～1.8。これも文字サイズにより十分な行間をとることで、視認性が上がることになります。
・まとめ
大学ホームページ制作のポイントを印象的な20サイトを比較・考察してみましたが、いかがでしたでしょうか？
毎年新しい技術、トレンドが目白押しのホームページ制作ですが、ご面倒な場合は、制作会社へご依頼いただくとこの辺りのアップデート情報も比較的容易に手にはいります。
当方がホームページ制作を始めた25年前は、まだいわゆる素人でもホームページ制作ができる時代でした。いまは、それぞれの技術が深く、ご担当者さまおひとりでホームページ制作は難しいのが現状です。
グラフィックデザイナーによるホームページ制作、シネマトグラフィ制作は、お手伝いできるところが多いと思いますので、もしご所望ございましたら、よろしければ、ご相談ください。
その他、ご希望、ご確認点 等ございましたら、
お気軽にお問い合わせくださいませ。
今後もお客さまにより満足していただけますよう、サービス向上に努めて参ります。
どうぞよろしくお願い申し上げます。
大学・研究室・専門医・学会さまホームページ制作
大学・研究室・専門医・学会さまデータベースシステム制作
大学・研究室・専門医・学会さまホームページデザイン制作一覧
