デザイン

デザインはどう機能するかだ

魅力的に伝えるデザイン

数百人、数千人の研究成果を広く、魅力的に伝えるのが学会情報システムの絶対的な使命です。

文字を漫然と並べているだけではダメです。

伝えるためのデザインが必要です。

  1. 全貌がすぐにのみ込める
  2. 読みやすい
  3. 雑音がなく、集中できる
  4. 読んでいて興味が湧く

このすべてを実現するために、Castle104はデザインとナビゲーションに試行錯誤を重ね、こだわり尽くしました。

魅力が一望できるトップページ

すべての企画の魅力を伝えたい

学会はもちろんサイエンティフィック・プログラムが中心です。しかしそれ以外にも様々な工夫や新企画があります。その企画の一つ一つに「学会を盛り上げたい」、「この分野の課題に正面からぶつかりたい」という組織委員会の熱い想いがあったりします。

すべての企画を魅力的に、確実に伝えるにはどうすれば良いか。企画を広く知ってもらい、多くの人に参加してもらうために、Ponzuはどう伝えればよいのか。

トップページにアイコンを飾る

一番重要なポイントはトップページです。

Castle104では試行錯誤を重ね、リストにしてみたり、テキストボタンを並べたり、アニメーションで動くメニューにしてみたり、いくつものバージョンを作りました。しかしどれも納得のいくものにはなりませんでした。

たどり着いたのはiPhone, iPad様の鮮やかでおなじみのアイコンのグリッドでした。

個性豊かなアイコンたちは見る人の好奇心をかき立て、各企画の中にみんなを誘い込むことでしょう。

斜め読み

何百、何千もの演題がある学会では、斜め読みのしやすさは重要課題です。これはデザインで克服します。

各要素にメリハリを付ける

Ponzuでは演題番号、発表時刻、タイトル、著者、所属をそれぞれ個別の色もしくは個別の書体にし、すぐにわかるようにしました。

スペースを作る

スペースが十分にとれないとデザインが窮屈になり、判読が困難になります。そこでPonzuではスペースを確保するための工夫をしています。

  1. ナビゲーションやボタンなどのコントロールを最小化しました。その代わり、必要に応じて出現するようにしました。
  2. 英語と日本語を完全に分離しました。その代わりボタン一発で言語を切り替えられるようにしました。

演題が読みやすいように、読みたくなるように

プログラマー志向デザインからの脱却

いままでの学会情報システムは、各演題をデータベースの単なる1エントリーとして表示していました。表形式をベースとした列挙型のディスプレイは、データベース管理者やプログラマーには便利です。しかし長時間かけた積み重ねた研究成果に対しては、若干失礼なデザインでした。

高級ジャーナルのように

Ponzuでは高級科学ジャーナルに劣らないデザインを心がけ、各発表が魅力的なものに見えるように工夫しました。各フォントスタイルのバランス、テキストレイアウト、ハイフネーションなどに配慮し、さらに雑音を排除するため本文周辺のナビゲーションメニューなどを最小化しました。

PDF

読みやすさが最重要

PDFを紙に印刷するのは、どちらかというと中高年世代です。視力が気になる世代です。ですから大きめのフォントを使い、十分に余白をとり、読みやすいデザインを心がけなければ、PDFの存在意義がそもそもありません。

PDFだけでも結構高額

ウェブに比べるとPDF制作は自動化が困難です。マニュアル作業が必要となることが多く、組版だけでも高額になりがちです。昔は印刷のおまけで付いてきたPDFですが、印刷をしないと単体のPDF制作費は高くなりがちです。

一方で安易な自動化をすると、PDFの品質、読みやすさが大幅に低下することがあります。

ワークフローをゼロから見直し

Castle104では組版のワークフローや使用するソフトウェアをすべてゼロから考え直しました。そしてPonzuによるXML書き出し、Adobe InDesignによる自動組版とPDF出力、マニュアル修正、独自スクリプトによるPDFの統合・管理を組み合わせたフローを確立しました。このワークフローは高品質の読みやすい日本語PDFを、迅速に作れるものです。

コンテンツ重視のデザイン

Ponzuではコンテンツを魅力的に見せるために、通常のウェブサイトとは異なるナビゲーションを採用しています。

ボタンなどを目立たないように

例えばトップのメニューバーは半透明にし、演題などのコンテンツが透けて見えるようにしています。また配置するボタンの数は最小にし、かつ出しゃばらないようにデザインしています。これは読者がUIコントロールに気を取られることなく、コンテンツに集中できるようにする工夫です。

ダイナミックなオーバーレイ

最高の操作性を実現するために、大型のオーバーレイを使用しています。必要なときだけに出てきて、不要なときには引っ込んでいるオーバーレイには、大きくて操作しやすいボタンをたくさん配置できます。