見出し画像

#1 「ぶんこも」


第一印象

・サイト上に散らばっている緩いキャラクターが目に留まる、他にどんなキャラクターがいるのか見たくなる
→独特のキャラクターで回遊率が上がる。キャラクターで気楽にサイトを見れる(堅い印象でない)印象になるので大学関連のサイトだけども、見るハードルが下がる

・「ぶんこも」というサイト名と大学のサイトから、文系向けの内容だと推察できる
→文系らしく、ベースカラーベージュで本のよう。コンテンツごとの切り替えも黒線で縁取られており、アナログの雰囲気が感じられる。しかし、ところどころグラデーションのあしらいもあり、無機質過ぎない柔らかさを感じる。

TOPページ

想定コンセプト

・午後のレコードを聴いている時間
→タイトルの「ぶんこも」の円がレコードのようで、ファーストビューの右半分が半円で、上の部分のベージュのテキストが右から左に流れているのと相まって、レコードプレーヤーで音楽を聴いているかのよう

円の部分がレコードのよう
上部のテキストが音楽を流れている様子と、
左下のイラストがそれを聞きながら読書しているように感じる

ターゲット

  • 大学選びをしている高校生

  • 京都大学に興味ある高校生

  • 在学生・教職員

フォント

日本語:Noto Sans JP
英数字:Be Vietnam Pro
→読みやすいベーシックなフォントでよく見るフォントだからこそ、読みやすい。また、大学の情報の為信用できるサイトである必要があり、それを叶えている。

印象的表現

・タイトルに絵文字使用
→視覚的にどんなカテゴリ分けなのかや情緒面がわかりやすい
→高校生になじみのある絵文字の使用で親近感を持たせている?

ぶんこもってなに…?という気持ちが絵文字があることで共感しやすい
カテゴリ分けに使うことで楽しげな印象にもなる

・イラストの印象が強い
→キャラクターのちょっと抜けた雰囲気の為、ゆっくりサイト回遊できる。
→大学生新生活!成長!という勢いがあるのとは全く真逆なので、大学のサイトでがあるが、入学することでどれぐらい成長ができるかという訴求でなく、等身大でどんなことをやっているのかというフラットな情報提供サイトに思える。
→何より楽しく見れる、イラストを見つけたくなるのでページ遷移のきっかけにもなる

目が特徴的で、他のイラストも同じようなので統一感がある
本がめっちゃダッシュしているのがシュールで面白い
瞬きするのが可愛い

・グラデーションの玉の散らばり
→暖色・寒色それぞれのグラデーションのあしらいがある。
ベースカラー:ベージュ、メインカラー黒・白とかなり落ち着きのあるサイトだからこそ、グラデーションが映える。
また、学生向けのサイトの為、シンプルすぎると飽きてしまう問題を解消いている。
→荒いグラデーションで本のようなアナログさが出ている

ピクセルの荒いグラデーション

・コンテンツの区切り線の活用
→区切り線を道やデスクなどに見立てて、イラストの配置をしている。
・#の部分が右から左へのアニメーション
→#の数が多いため、流して見せることで複数のことをやっていることと、アイキャッチになり、コンテンツが切り替わったことが分かる

線の上を走ったり、PCを置いたり

・コンテンツとその紹介の配置
→視覚のコンテンツ2つを少しずらして、そのずれを活かし左上に日付を配置。ずらしているもののまとまりがある。
→上のメインビジュアルがレイヤー下になっている。ビジュアル部分なので文字情報よりは最初に目線が行くが、説明部分がレイヤー上なので、自然に説明文にも視線が誘導される。

2つの資格の重なり
ただ、説明文の方がレイヤーが上

いいなと思ったら応援しよう!