こんにちは。

今年ももう少しで終わろうとしています。しかし不思議と、そんなに季節が巡った気が筆者にはしていません。今年は特にコロナ禍によって特殊な過ごし方になったことが影響しているのでしょうか？

多くのイベントが縮小したり、別の形態へ移行したりしました。ライブ等では人の声の代わりに拍手が活躍するなど、代替案でもって進行することもありました。

さて、今回はそこから話を広げ、「伝える」をテーマにいくつかWEBメディアをご紹介します。
（※　紹介しているデザインは執筆時から変更されている可能性もあります。）

目次

1: お知らせを伝える
　　1-1: PLAY! MUSEUM
　　1-2: DESIGN SCRAMBLE 2019
　　1-3: SHIBUYA TSUTAYA magazine
2: リアルタイムを伝える
　　2-1: ハタフェス
　　2-2: 島フェス
3: 未来に伝えるために
　　3-1: 君二問フ
　　3-2: NIKKEI INNOVATIVE SOUNA
　

1: お知らせを伝える

1-1: PLAY! MUSEUM　[https://play2020.jp]

「PLAY!」は立川の新街区にある美術館です。
ニュースが一番上にきている構成です。
全体を通してすっきりとワントーンに作成されており美しいサイトです。

こちらでは少し捻って、「PLAY! MUSEUM 来て楽しんで帰るまで」という見出しでコロナ対策の対応ページへリンクしています。イラストつきのストーリー調でコロナ後の対応や鑑賞の仕方まで丁寧に説明しており、子供と楽しく閲覧できるサイトとなっています。

フッターの気温表示もさりげなくありがたいです。

1-2: DESIGN SCRAMBLE 2019　[https://designscramble.jp/]

コロナに関する重要なお知らせがポップアップとして固定表示される構成です。
ポップが、世界観を壊すことなく、またどんな人でも読める配色で表示されています。
一番上の青背景部分には液晶のモアレのようなテクスチャがかかっており、激しめの色使いではありますが、すっきりと情報を閲覧することができます。

イベント系ということで、かなり沢山の情報が詰め込まれていますが、要素がふわっと優しくフェードインするため、圧迫感を感じさせません。フェードインは情報量が多く、コンテンツ間を省略してスクロール量を減らしたいときにも効果的に使用できます。

全体を通してレトロ寄りで、カジュアルな雑誌を思わせるようなデザイン・配色が素敵です。

1-3: SHIBUYA TSUTAYA magazine　[https://shibuyatsutayamagazine.com/]

ニュースがラベルとして画面下に固定されています。
タイトルをクリックするとスライドに誘導され端的に中身を見ることができます。

同じ情報が並ぶニュースラベルは、情報量が少なめだからこそ、並んだときにより強い印象を私たちに与えます。そうしてじっくりとスクロールの手をとめていると、別のスライダー写真が自動でスライドして表示され、ついつい次の要素を見てしまいます。

ページ下部のMAPもモバイルファーストの設計になっており、美しいデザインです。

2: リアルタイムを伝える

2-1: ハタフェス　[https://hatafes.jp]

ハタフェスは、山梨県富士吉田市で開催されているマーケット型のリアルイベントです。
今年はコロナ禍の影響で開催せず、webメディアで展開しています。

去年までは店舗についての簡単な紹介記事と公式HP等へのリンクという構成でしたが、今年は別コラムへのリンクが更に用意されているなど、紹介に特化したページ構成から読み物としてのwebメディアに変化しています。
こちらのメディアサイトも大変美しく、落ち着いた配色が日本らしさを感じさせます。

ハタ印（http://hatajirushi.jp）

2-2: 島フェス　[https://shimafes.jp]

『島フェス』は香川県小豆郡小豆島町で開催されている野外音楽イベントです。
先に紹介した「ハタフェス」と同様に、今年の開催はYoutubeでのライブ配信のみとなりました。

Youtubeへの誘導のアイコンは携帯表示でみてもわかりやすく、簡潔なメディアサイトです。
通常のリアルイベントでは物品を扱ったりもしますが、こちらでは、専用にショップを設置するのではなくクラウドファンディングを使用しています。クラウドファンディングは今年開催できなかったことへの支援と来年以降の存続のためにも行っています。

3: 未来に伝えるために

3-1: 君二問フ　[https://kiminitou.com/]

アート・音楽・社会問題をテーマに扱うwebメディアサイトです。
現在は「コロナ禍と表現者たち」という特集を連載しています。

彩度を抑えた色彩やゆらゆらと揺れる円が詩的な雰囲気をはらんでいます。
メニューの、画面全体を使って変化する演出の緩急も素敵です。

記事詳細ではコントラストを上げる配色の切り替えボタンもあり、読み物として読みやすい設計となっています。
まるで折り畳まれていた新聞を開くような記事展開の表示も、世界観を作り上げています。

3-2: NIKKEI INNOVATIVE SOUNA　[https://adweb.nikkei.co.jp/innovativesauna/]

『NIKKEI INNOVATIVE SOUNA』はサウナで行うワークショップのLPです。

幾何学図形で構成されたデザインがバウハウスやマンダラ図を想起させます。（バウハウスはドイツにある学校で、機能的・合理的な設計・デザインを追求していました。転じて、ここではその代名詞として用いています。）
写真をサイケデリックに加工をしていたりと、「エネルギーや、思考の壁を壊して考えよう」といった気概が伝わってくる気もします。

本文のコントラストを抑えた青色は、サイト内の様々な彩度の高い色をまとめあげています。最近はまたパーツの輪郭をはっきりと描写するテプラのようなデザインも増えてきていますが、こちらのサイトでもそれに通ずるデザインが印象的に私たちの目に映ってきます。

いかがだったでしょうか。
今回は「伝える」をテーマに、構成やデザインが美しいwebメディアを数点ご紹介しました。

慣れ親しんだwebサイトもあったと思いますが、改めてテーマを持って別の視点でみつめるきっかけになりましたら幸いです。

インタラクション に関する記事

インタラクションに関する記事