再生医療のテラ株式会社

がんワクチン療法の研究開発を行っている企業のコーポレートサイトです。あるようでない、絶妙なバランス感覚のあるサイトだと思います。余白の使い方、全体的なバランスは眉唾ものです！(これは言い過ぎか)

デザイン

テラ株式会社はどこか洗練された、無駄のない印象を受ける。その秘密は何なのか自分なりに考えてみた結果、余白のたっぷり感と清涼飲料のようなサラリとした色使いにあるのだと結論した。前者は美術館や展示会などに行ったことがある方なら、展示面積を贅沢に使った作品の高級感は納得していただけると思う。それはWEBサイトでも同様で、目立たせたい要素の周囲に適切なマージンを与えることで、アイキャッチとしての効果が得られる。ただ、それだけではまだ物足りない。余白を上手く利用しているサイトは数多くあるが、テラ株式会社には他にはないものがある気がする。そこで気づいたのが、キーカラーを限りなく淡く表現した、この色使いだ。もしメインメニューや見出しが濃い配色だったら...？多くのサイトに見られるように、それぞれの要素が主張しすぎて、どこに注目すれば良いのか分かりにくいサイトになっていただろう。逆に余白が十分にとられていなければ、安っぽい印象になっていただろう。これらはフォントのバランスの関係に似ていると思う。ファッション雑誌などを見れば分かるが、ある特定の文字列を目立たせる手段は(完全なる私見であるが)、サイズを大きくする、ウエイトを変える、濃さを変える、そして余白である。重要なのは、目立たせたい、主張したい要素そのものに捕われるのではなく、それらの手段を用いて、全体を俯瞰し、最適なバランスを見いだすことだ。おそらくこの感覚を身につけるには、経験とセンスが必要になると思うが、日頃から美術館やクオリティの高い雑誌などを見ていれば自然と身に付くものだと思うので試してみては如何だろう。

アイディア

トップページのメインビジュアルでは、ロゴが表示され拡散し広がってゆくアニメーションが展開される。その後もオタマジャクシの卵のような物体がフワフワと動いているのだが、それが「お知らせ」など静的な印象を与える箇所にも反映されていて面白い。最初は全部FLASHなのかと思ったが、どうやら裏側ではしっかりとマークアップが成されているようだ。最近ではMovable Typeなどと連動したFLASHコンテンツなどが主流になっているようなので、調べてみる価値はありそうだ。

ユーザビリティ

テラ株式会社では、いわゆるダイナミックメニューを積極的に使用している。例えばメインメニューのプルダウン、ローカルナビゲーションの追従などだ。プルダウンメニューは、情報量に比例して項目或はオプションが増えてしまうナビゲーションに対して、素早いアクセスを提供する場合に利用されることが多い。デメリットとしては、情報表示のために何らかの動作を必要とすることだ。テラ株式会社の場合はコンテンツが少ないので、javascriptを無効にしてもナビゲーションは問題なく機能するし、プルダウンした範囲が透過されており、コンテンツと被った時の配慮も成されている。利用する際には用法用量を守って正しくお使いください、といったところだろうか。

アクセシビリティ

プルダウンメニューは、スクリーンリーダーが上手く処理できないことがあるらしい。正しくマークアップされていれば回避できる気もするが、実際にスクリーンリーダーを使ってテストをするのが無難だろう。また、動体視力に障害のあるユーザーは、ダイナミックメニューの操作が困難な場合があるらしいが、これはあまりピンと来ない。