ロゴとサイトデザインで世界観のあるブランドへ／理化学研究所計算科学研究センターソフトウェアセンターサイト

キーワード：

今回のお客さまは、世界トップレベルの性能を誇るスーパーコンピュータ「京」の運用やポスト「京」の開発を行う組織であり、計算科学の分野において最先端の研究で日本の科学や産業を支える研究機関「理化学研究所計算科学研究センター(RIKEN Center for Computational Science, 略称R-CCS)」さま。人類の前に立ちはだかる難題に挑み、人々の想像を超えるような科学のブレイクスルーに果敢に挑戦される、フラッグシップインスティチュートです。

今回は、理化学研究所計算科学研究センター（R-CCS）さまで開発されているスーパーコンピュータ「京」ユーザー向けのソフトウェアの普及を支援する情報サイト「ソフトウェアセンター」の制作を入札の結果、ルート・シーで担当させていただくことになりました。

サイトデザインとロゴの提案

今回の入札ではサイトの構成や掲載情報はほぼ決まっており、サイト、ロゴ共にデザインのクオリティが重要な決定基準であったため、webデザイナーの野村が調査から提案書作成、プレゼン、制作進行をプロデューサーと協同担当しました。

審査条件として「世界最高水準のスパコン「京」を中核とする研究拠点、世界最先端の研究等により科学技術、産業、社会に貢献する理化学研究所及びスーパーコンピュータの開発利用という我が国の重要なプロジェクトとしてのイメージを損なわないか」などの基準がありました。

初回提案時には、それらの審査基準を押さえつつ最適な形を得るため、まず「ソフトウェアセンターが醸成していくべきブランドイメージ」に関連するキーワードを洗い出し、ターゲットユーザーにはどういった社会的インパクトをもたらすか、などを考えました。
そして「ユーザーに与えたい印象」として、下記の4点をまとめました。

ナノ～宇宙までシミュレーションで人類の問題解決
世界中の研究者が集まる計算科学の知の拠点
「京」および各ソフトウェアは研究者たちを支える最高のツール
世界がギクリとする成果、国民がワクワクする成果

上図左下のロゴモチーフは、ソフトウェアセンターの「SC」で、グレーと赤の図形を反転させています。これは「既存の概念が研究によりひっくり返り、未来が拓ける」ということを表現。社内レビューを行い、文字としての理解のしやすさなど多様な視点を得た結果、力強くソリッドな五角形で構成しています。

理化学研究所計算科学研究センター（R-CCS）さまへのプレゼンテーション時には、デザインについてアウトプットまでの考え方を含めた説明を行った結果、スッキリとしたデザインで機能的であると高評価をいただくことができました。

サイトデザイン～モバイル対応、多言語展開、CMS実装を見据えたサイト設計～

今回のサイトは主たる要件として

英語・日本語の多言語展開
理化学研究所計算科学研究センター（R-CCS）さまにてページ追加・更新のできるCMSの導入
レスポンシブwebデザイン

というものがあり、CMSは理化学研究所計算科学研究センター（R-CCS）さまのオフィシャルサイトにて利用されているWordPressのご指定がありました。
構成案やデザインの作成にあたっては、WordPress実装を担当するフロントエンド・エンジニアの雁金にサイトの構成とWordPressの入力画面の仕様を踏まえた、サイト構成の実現可否の助言・レビューをもらいながら詳細を詰めていきました。

日本語（左）・英語（右）それぞれで構成案のたたき台を作成し、検討漏れがないよう進行。

テキスト量や画面幅が変動しても情報が見やすい、いわゆる「耐久性の高いデザイン」を強く意識し、今回は特に英語と日本語の文字サイズ、最適な行間、単語の長さなどの違いを意識しながら、パーツを作り込みました。

個々のページデザインの前に、余白も含めたパーツリストを作成。フォント設定など、画面幅に応じて極力規則性をもたせている。

研究者の方へのインタビュー

今回各ソフトウェアの応用事例ページでは、研究者、開発関係者の方々にインタビューを実施。非常に専門的な内容になるため、テクニカル系の執筆経験を持つライターがしっかりと事前資料などを読み込みました。物理的な距離もあったので、神戸・大阪・取材対象の方の所在各地をつなぐビデオ会議にてお話を伺い、初稿を作成しました。

取材対象の方にも原稿チェックをいただき、ユーザーとなる業界内若手研究者、将来の研究者となる学生の方々にもわかりやすい表現となるよう気をつけました。

ロゴデザイン～概念の理解からアウトプットへ～

「ソフトウェアセンター」では理化学研究所計算科学研究センター（R-CCS）さまの各研究チームで開発されたソフトウェアを公開していますが、そのうちの「OACIS」「NTChem」二つのソフトウェアのロゴ制作も行いました。

「大規模シミュレーションのためのジョブ管理ソフトウェア・OACIS」と、「大規模かつ複雑な分子系に対する第一原理量子化学計算のための包括的なソフトウェア・NTChem」。

文系出身のデザイナー・野村がこれらを理解すべく、専門用語を調べながら、研究に関するドキュメントを読み込み、ソフトウェアのブランドを形作る上で重要な要素を抽出。デザインはイラストレーターの川北が担当。

野村が必要な情報を読み取り、デザインの根拠をしっかりと突き詰め、川北がイラストレーターとしての造形力・表現力を活かしてロゴ制作を行いました。

ソフトウェア「OACIS」のロゴでは、研究チームから「ヤシの木モチーフを使ったロゴ」のラフ画をいただき、ソフトウェアの特徴から、「自動、データ、効率的、洗練…」などのキーワードを抽出し、ビジュアル化。

ソフトウェア「NTChem」のロゴでは、ソフトウェアの特徴から「原子と電子のふるまい、高速計算、物性・反応性…」などのキーワードを抽出し、ビジュアル化。いずれのロゴも野村と川北による複数回のブラッシュアップを行い精度を高めています。

「NTChem」はコンセプト上配色の方向性は絞れていたのですが、「OACIS」の方はコンセプト上比較的多くのカラーアプローチが可能だったため、ルート・シー社内でターゲットに近い男性陣に人気投票を行い、ユーザーに一般的に好まれる配色を探りました。

OACISでは醸成するイメージの強さをグラフで表し、お客さまに選んでもらいやすいよう工夫した

おわりに

サイトデザインとロゴデザイン、いずれにおいてもベースとして深い顧客理解が必要であり、そこで初めて方向性を探り、あるべき姿へと構築していく必要があります。今回は双方のデザインをルート・シーが担当させていただくことによって、より統一された世界観を表現しました。

本プロジェクトを担当させていただいたことで、理化学研究所計算科学研究センター（R-CCS）さまで研究開発されているソフトウェアにより、国内外でスーパーコンピュータ「京」、そして次世代のスーパーコンピュータの新規利用が促進され、『人類レベルの課題解決』をも促す最先端の研究が進むことに結果的に微力ながら貢献できれば幸いです！