あいうえお作文RAPプロジェクト(http://aiueo-rap.com/

① ファーストビューと同時に流れ出すラップBGMがサイト全体のコンセプトを一番最初に印象づけてくれます。(PC版)

② ダーッと一覧表示されるGIFアニメーション画像(ラップに乗ってる素人)がサイト全体の雰囲気を良い意味で素人っぽくて素朴で粗削りな印象を形作ってくれています。(PC版)

③ 画質を落としたGIF画像とはいえ、一覧で表示されるとさすがに挙動がもたつきます。(PC版)

④ ヘッダー画像のロゴが原稿用紙のマス目を基準にいろんなフォントを使ってうまく崩したものになっている。背景のぼかし画像に白抜きロゴというのが、また今風で格好良い。(スマホ版)

⑤ ヘッダー画像のすぐ下にプロジェクトの概要をあいうえお作文形式で配置しているのがニクい。ここでも原稿用紙のマス目のデザインに対して、あえて崩した文字組がしてあって、ラップの雰囲気を良く表現していると感じます。(スマホ版)

⑥ 各セクションの見出し画像のデザインも原稿用紙のマス目にあえて崩した文字組と手描き風フォントがあしらってあって、サイト全体の雰囲気をつくっています。

⑦ 「PICK UP」セクションは、よくある左上の「PICK UP」リボンがあしらってあります。リボン色が青いことと、GIF画像が目立つこともあって視認性は低いが、一度気づくとすぐにわかるようになりました。(PC版)

⑧ ナビゲーションメニューをマウスホバーすると、メニューアイテムの説明をあいうえお作文形式で出してくるところがニクいし、思わず読んでしまう。(PC版)

⑨ ラップ動画コンテンツでは、前奏部分でプロジェクトタイトル・あいうえお作文のお題・演者の名前が出て、本編であいうえお作文のラップを演者が歌いながらその歌詞が表示され、最後に必ず「We Love Music, We Love Peace.」の手描きロゴが表示される。という形式に則っているので、とても映像が作りやすそう。

⑩ GIF動画をマウスホバーをすると、GIF動画が黒落ちしてラップ演者の名前・肩書・国籍が右下にまとめて表示されていてとても格好良い。(PC版)

⑪ 「アバウト」ページではプロジェクトのコンセプトとプロジェクトのクレジット、最後にプロジェクトの主催と協力のロゴが表示されていて、とてもシンプルだけど格好良く感じました。(PC版)

⑫ 「投稿」ページでは、ハッシュタグ「#あいうえお作文ラップ」で投稿されたツイートが集められていた。それなりの数が集められていてSNSの力を感じることができる。

⑬ ページのレイアウトとして、上下左右の端にそれぞれ「サイト名ロゴ」、「ナビゲーションメニュー」、「コピーライト」、「プロジェクト母体のロゴ」が上手に配置されていて、とても潔くてシンプルなデザインに思えました。(PC版)

あいうえお作文RAPプロジェクト

情報ソース:あいうえお作文RAPプロジェクト|WD ONLINE

カテゴリー: WEB