GAKUDAI KOUKASHITA＃１日１サイトレビュー

GAKUDAI KOUKASHITA （学大高架下）

【概要】

学芸大高架下リニューアルプロジェクトのサイト

【印象】

• フィルムカメラの雰囲気と背景のくすんだ白がサイト全体の温かみを感じる。

• アクセントカラーのオレンジが東急電鉄のロゴカラーから引用されていて、コーポレートサイトとの統一感も感じる。

【メインビジュアル】

• 学芸大高架下のお店で撮ったフィルム写真をスライドショーで流している。出てくる写真がどれも温かみがある。特に飲食店の写真はおしゃれで行ってみたくなる写真が並べられている。（Meetsみたい…。）

• 真ん中に今回のプロジェクトのロゴが記載。

• メニューはハンバーガメニューでまとめられて、あえて文字情報を少なくし、「スライドショーを全て見て」というメッセージを感じる。

【コンテンツ】

ABOUT

• 学大高架下プロジェクトの説明

• 学芸大駅の写真にスクリーンをかけて背景の白に馴染むようにグラデーションになっている。aboutに相応しい写真。

リニューアルの経緯

• リニューアルに至った原因や問題点を写真とコメントで説明し、現在の工事状況も掲載しているので、何も知らなかった人にも理解いやすくコンパクトにまとめられている。

リニューアルのコンセプト

• サイト全体的にもですが、全体の余白の使い方がうまく、とても見やすいです。

• このセクションはほとんど文字でシンプルなセクションですが、文字のサイズを調節し、セクション内のサブタイトルが一番大きいフォントで目立たせることで、読みやすくさせている。

リニューアルエリア

今回のプロジェクトのエリアをイラストで表現して、各エリアに番号を振り、その下の各エリアの説明の番号と連動しており、カルーセルで全ての説明を見やすくしている。UIに優れたデザインだなと思いました。
また、各エリアの説明も可愛いイラストをカードデザインのような形でついつい全て読んでしまいます。
リニューアルポイントのセクションもアイコンとサイトのカラーやデザインと馴染んでいる。

これまでの取り組みについて

これまでの４つの取り組みをセクション上部に四角いデザインで情報をまとめているので、それを押せば各コンテンツに飛べるようにCSSを組んでもよかったのかなと思いました。
各コンテンツの写真をコマ分けして漫画のように吹き出しコメントをつけ楽しい雰囲気がとても伝わりました。

【カラー】

白とオレンジでシンプルでメリハリのある色の組み合わせ。

【フォント】

YakuHanJP、Noto Sans JP

【レスポンシブ】