00.選んだサイトはこちら！

02.このサイトを選んだ理由

• 単純に好み

• なんかよいを言語化したい

• 今時なんだけどきちんと整理されているうえ、ワクワクさせるのは何でなのか気になる

02.概要

学芸大学の高架下がリニューアルすることを知らせる

03.目的

多くの人にリニューアルする学芸大の高架下を知ってもらう。訪れてもらう。取り組みを通じて「学芸大」のことも知ってもらう、PRする。

04.ターゲット予想

学芸大の高架下をよく通る人たち（住んでいる人、通学通勤、よく訪れる人）。老若男女。学芸大に関係のある人たち（学生や入学希望者、教授、勤務者、ほかの大学や高校などの学校関係者）

05.ファーストビュー

写真のみ、よく見たら右上にハンバーガーメニューがあるのみ。
写真は、ざらざらに見えるような加工がされている（これ最近いろんなサイトで見かける）。そこに懐かしさ？エモさ？を感じる。トーンもおしゃれ、洗練のような写真ではなく、暗い部分が多く写ルンですで撮ったような写真。

06.ナビゲーションメニュー

ナビゲーションは、ハンバーガーに収納されていてすっきりしている。
メニューからタップしても別ページに行くのではなく、スクロールしてその項目に行くという感じ。１枚のLP型になっている。

07.フォント

FV、縦書き部分、明朝体部分：画像埋め込み？
中見出し20px：Noto Sans JP　Color#f6ebe1
本文15px：YakuHanJP　Color#3e322e
※なぜか他にもうれしいリニューアルポイントのところだけフォントがバラバラ？
中見出しがYakuHanJPの19px、17px13pxもそれぞれ使用している
テキストで行けそうな部分がごっそりイラスト埋め込みになっていたりしたので、レスポンシブの都合かな？と思った。

08.配色

地色：Color#f6ebe1（中見出しもこれ）　薄い赤
地色2：Color#fdfbf6　さらに薄い赤
MENUボタンや中見出し囲み、ロゴ：Color#f04d2f　赤
アクセント（話が他と違うとき？）：Color#ffd265　黄
文字など：Color#3e322e　茶

09.考察

• 読ませるような読み物のようなところは明朝で雰囲気づくりをしている。そこに高架下の歴史を感じる。タイトルだけ明朝になっているところもあってひっかかりを作ってくれて、読むきっかけになっている。ゴシックの感じは説明だとか現状の状況で、物語は明朝にしているのかな？と思った

• 写真や項目すべてに囲みいれていて、統一感があった。ポップな印象になっていて学芸大をほうふつとさせる。ポップで新しい価値や物を作り上げる若者が感じられる。

• 項目が箱につまっているため、スマホ版にした時もきれいにレスポンシブしている。

• 言語で表すのではなく、図やイラストに翻訳（変換）されているので、パッと見てわかりやすいのが、ターゲットが幅広いのでとても分かりやすいように感じた。なるほどデザインに書かれている内容だ。

• 箱にきちんと詰めてばかりだと、まとまりがあるが面白みに欠けるレイアウトで飽きてしまいそうだが、このサイトは箱に詰めつつも、縦書きを入れたり、横に自動スライドする説明が差し込まれていたり、漫画風にした画像が差し込まれていたりで、飽きることが全くない。すごい！

• サイト自体には、「イラスト」と「写真」両方が挿入されているが、変な印象になっていない。ベースは写真とし、ポイントでイラストを使っている（リニューアルの項目でしか使っていない）。それに、ボタンや写真、箱に罫線があることでイラストが入ってきてもおかしくならない雰囲気作りがされている。

10.まとめ

これはとても参考になった。
見せて飽きさせないレイアウトは、きちんと整理されていつつ、目的に合ったデザインとして挑戦されている。

サイトを選んだ理由の一つ、「今時なんだけどきちんと整理されているうえ、ワクワクさせるのは何でなのか気になる」の訳が分かったような気がします。