《あのWebサイトの裏側 Vol.3｜MEJINAVI 2024》ビジュアルと世界観が支える「楽しさ」と「わかりやすさ」の体験

「MEJINAVI（メジナビ）」は、目白大学による入学希望者に向けた情報提供を目的とするサイトです。株式会社トライモアが2020年度より制作を担当し、今年で5年目を迎えました。「楽しさ」と「わかりやすさ」を両立させる体験づくりと、オリジナリティーあるビジュアルづくりのノウハウを、同社代表の島尻智章さんに聞きました。

話してくれた人

プロジェクト概要

「MEJINAVI」は、目白大学が入学希望者向けに学校の情報を提供するWebサイトです。大学での学びやキャンパスライフが、豊富なビジュアルとともに学生の視点で紹介されています。

リニューアル前のMEJINAVIは、情報量が非常に多く、通読性が高いとは言えない状態でした。その結果、離脱の多さが課題となっていました。リニューアル以降は訪問者数が毎年増加中。受験生に限らず、学校内外から好評を得ています。

POINT①｜読みやすく興味を持てるユーザー体験

目白大学様からのご依頼に際し、私たちに期待されていたのは、イラストを用いた親しみやすいビジュアル設計でした。それに応えることはもちろんですが、単にビジュアル要素としてイラストを用いるだけでなく、膨大な情報量をわかりやすく、かつ楽しく読めるユーザー体験にシフトすることを提案しました。

このコンセプトが採用され、初回から現在まで継続して企画の軸になっています。具体的には、サイト全体にわたってファッション雑誌のようなスタイルで構成し、インフォグラフィックスを取り入れたり、学生の写真を明るく動きのあるものにしたり、といった見せ方で無理なく読み通せる表現を形にしています。

日頃あまりWebサイトを意識的に見ることのない高校生世代が主な対象となることから、どのコンテンツにおいても「高校生の視点で楽しそうに見えること」を重視する必要があると考えています。そこで留意しているのが、“楽しさ”をフックに情報を伝えることです。この点については、一定のレベルで狙って織り込むことができていると思います。

“楽しさ”にはもちろん遊びの楽しさもありますが、学校側として伝えたいのは学びの楽しさであり、知的好奇心を満たすような表現が求められます。そうした遊び心と真面目さのバランスの取り方については、これまで4年間続けてきたことの経験がさまざまな面で機能していると思います。

POINT②｜トレンドを取り入れたデザイン

最初に手がけた「MEJINAVI 2020」以降、デザインには毎年異なるテーマを設けています。その年のテーマとビジュアルを複数ご提案し、クライアント側で選んでいただく形です。例えば、2022年は「未来志向とポジティブさ」、2023年は「アクティブ＆フレンドリー」でした。2024年のテーマに選ばれたのは「リラックス＆クレバー」です。

「MEJINAVI 2024」の制作が始まったのは2023年の初夏、コロナ禍が落ち着き社会に日常が戻ってきたタイミングでした。あえてアグレッシブさを強調していた前年までから一転し、日常の些細なことが楽しく見えるような表現をしたいと考えたのです。ビジュアル面でも、宇宙や自然をテーマに日常を少し離れた世界観が続いていましたが、2024年はより学生生活の具象度を高めて、学生がさまざまな形で知識や文化に触れる様子をイラストで表現しています。

このプロジェクトでは毎回、アートディレクターが先にデザインの方向性を固め、それにあわせたテイストのイラストをイラストレーターにオーダーしています。当社は社内にイラストレーターが所属していることから、案件にあわせて描き下ろしのイラストを用いた個性的なビジュアル開発を得意としています。デザイナーとイラストレーターがコミュニケーションを重ねることで、デザインとイラストが一体になった世界観の表現を実現しているのです。

POINT③｜情報を受け止めやすい順序立て

MEJINAVIのトップページには、以下の内容が順に並んでいます。

❶ メインビジュアル
❷ 学科ごとの学びの紹介
❸ 成果と特徴の紹介
❹ プライベートを含めた学生生活
❺ 入学者選抜の情報
❻ 大学のPRコンテンツ

読み手が知りたいことを自然に理解していけるよう、情報の順序立てを考えて組み立てたもので、項目は毎年共通です。

❷「学科ごとの学びの紹介」は、日頃学んでいることについて話してもらう、いわゆる在学生インタビューですが、読ませる記事というよりは、興味を持ってもらえる部分を膨らませてビジュアルとセットで見せる形にしています。

❸「成果と特徴の紹介」は、学生の満足度や就職率など学校の特徴を表す“数字”を、イラストを使って視覚的に表現しています。情報量をコントロールしながら要点を伝える手法のひとつです。

❹「プライベートを含めた学生生活」は、学業だけでなくプライベートな楽しみや生活感も伝える内容になっています。複数のページを含む❷と❹は、上の階層に戻ることなく、次のコンテンツを続けて読み進められるナビゲーションを設計しました。

❺❻は、大学公式サイトや受験生応援サイト、公式動画、SNSアカウントなどと連携したものです。MEJINAVIだけで受験は完結しないので、大学が持つ情報との連携も意識しています。

POINT④｜世界観の演出は細部にこそ

コンセプトに沿って世界観を表現するには、細部の演出が重要です。今回も、ファッション雑誌らしさや、イラストと組み合わせることで生まれる世界観を補強する演出を細かい部分まで加えています。

例えば❹「プライベートを含めた学生生活」では、学生生活のさまざまなシチュエーションを表現した写真に「#デニム」 「#おしゃれカフェ」 「#就職活動」といったタグをつけました。機能的なものではなく、あくまで演出としてのデザインです。

また、写真にイラストを取り入れたり、逆にメインビジュアルのイラストに小さな学生の写真を紛れ込ませたのも演出の一つです。スクロールして読み進むにつれ、その世界観に深く潜っていく流れを意識して、こうした演出を加えています。

POINT⑤｜読みやすさを妨げないインタラクション

アニメーションやインタラクションの演出は、読みやすさを妨げない範囲に留めています。まず静止画の状態でしっかりデザインを整えてから、部分的に動きを加えていくのが私たちの通常のやり方です。

若い世代を対象としたサイトなので、やはりスマートフォンからのアクセスが圧倒的に多いのですが、PCからの訪問者も毎年一定数います。そのため、特にスマートフォンを優先するのではなく両方のデザインを並行して進めています。

ここまで5年間続けてきたことで、提案の難易度も上がっていますが、2025年度の制作も決まりましたので、来年も公開を楽しみにしていただければと思います。

取材・文：栗原亮（Arkhē）
※本記事は「Web Designing 2024年12月号」に掲載された内容を一部修正・再編集して公開しています。