もうデザインに困らない!創造性あふれるイベントサイト10選

2016年10月13日(木)
TechAcademy

本稿は、WebDesignerdepotのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また、本記事はEventCreateの共同創業者でありWebデザイナーでもあるMark Bushy氏によって投稿されました。

私はイベントのWebサイトをデザインするのが好きです。

期間限定だけど、シンプルで美しくできるからです(複雑なユーザーインターフェイスはここには存在しません)。

この2つの融合はクリエイティブなナビゲーションパターンや、特殊なレイアウトを試す場として、または面白いアニメーションで遊んでみる場として、もしくはFlashやActionScriptを懐かしむ場としても最適で、Webデザインの新たな限界を試す特別な機会なのです。

クリエイティブで刺激的で眺めていて美しいイベントサイト10つを集めてみました。

Epicurrence

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-13-11-41-30

このWebサイトは4日間、ウタのモアブでデザイナーと開発者のみが招待されたものですが、本当にすごいです。

写真は綺麗だし、レイアウトも刺激的です。

よく「これはすごい!」と思っていたWebサイトでもフォームだけ普通、というのはありがちですが、些細なところまで目を配っていて登録フォームも綺麗です。

Sonny’s Smokin’ Showdown

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-13-11-42-40

このBBQコンペは伝統的なイベントかもしれませんが、Webサイトは本当にハイテクなのです。

スクロールしてイベント会場を3次元で探検することができるのです。テキストが上にオーバーしますが、ほとんど必要ありません。

複合的に織り成されたビジュアルが文字を読まなくてもこのイベントの全てを物語ってくれます。

Sonny’s Smokin’ Showdownのサイト、ぜひチェックしてみてください!

Global Wave Conference

2015-global-wave-conference-1

制約事項の中でこそ本当に良いクリエイティビティが発揮されて、そこに哲学が生まれると思います。

Global Wave Conferenceはその良い例ではないでしょうか。

ちょっとクリックしてみるととアニメーションされたロゴ(GIF)とハンバーガーのメニュー(SVG)でこのサイトをのどかな写真やタイポグラフィーでごまかすことなく高級に仕上げているのが見てとれます。

クリアで、簡潔なイベント記述は前から好きなのですが、それは今も昔も変わらないと思います。

Festibiere

festibiere-d-hiver-january-29-30-2016-5pm-2am-canadian-museum-of-history-1

Festibiere

この中でいうと目新しくはないかもしれませんが、ナビゲーションが良いですね。

イベントサイトに典型的なのですが、ひっつくヘッダー(クリアで、対照的なRegister nowのボタン)は、コンバージョン率とチケットの売り上げを上げるのに適しています。

このイベントは夏と冬の年2回行われるのですが、それぞれで違うサイトが作られていて、デザイナーの手腕が見て取れます。

どちらも似たようなインターフェイスですが、よく違いが出ていてそれぞれにあった季節感があります。

LOOP

home-loop-2016-1

大きなフォントが印象的なFturaはフォルクスワーゲンの宣伝の印象がありますが、そうならない見せ方もあります。

LoopのWebサイトはまさにそれに当たるでしょう。

Loopは音楽とテクノロジーにフォーカスした3日間のカンファレンスです。

サイトはシンプルですが本当に綺麗です。

サイトを覆うボディーにある背景のグラデーションも良いですね。(テキストグラデーションはCSSで、バックグラウンドWebkitのclip prooertyが使われました。)

Structure

structure-norwegian-contemporary-crafts-and-design-1

クリエイティブなデザイナーのおかげで(そしてJQuery UI draggable ライブラリのおかげで)、

このノルウェーのイベントWebサイトはこのイベントのどちらかというとアナログなコンセプト「空間における並べられた形」、を

デジタルに表した形となりました。

私の意見では 、ここをブラウジングしたあと何かすることが欲しいです。

登録を勧めるなり、Eメールを捕まえるなり、リダイレクトするなり、これ以上私がなにか要求しないような何かが欲しいです。

Valio Con 2016

valio-con-2016-1

イベントから写真を集める時、主催者は間違いなく大量の異なるサイズやスタイルの写真をあなたに送ってくることでしょう。

大写し、暗かったり、明るかったり、溺愛する飼い猫を抱いていたり。しかし、これではまとまりがありません。

幸い、サンディエゴのデザイナーとMakerの年次カンファレンスであるValioConのデザイナーは、ポートレートを均一化するクリエイティブな写真のフィルターでこの課題に応えて、全体的なデザインとして実に整然とされた印象があります(そして素晴らしいです)。

Bloomberg BusinessWeek Design 2016

bloomberg-businessweek-design-2016-1

このサイトを最初にみた時、色盲でないことに感謝しました。

というのも、もしすべてのリンクが同じ色だったら、一体どこをクリックしたらいいかわからないからです。

Bloomberg BusinessWeekデザインカンファレンスのサイトの特徴は、bold体で力強く、教科書通りのレイアウトを激しく無視していて、しかもなんと使いやすいのです。

Elevate Summit

elevate-summit-a-conference-about-customers-1

The Elevate Summit(全身はUserConf)はカスタマーサポートとコミュニティーマネージャーのコンファレンスで

今年の10月に開催予定です。イベントサイトとしては、ずば抜けて綺麗で美しいです。

「5 reasons to attend」というリストが好き(異論はもちろんありますが)で埋め込まれた登録フォームも好きです。

チャットボタンも良いです。イベントサイトで頻繁にはお目にかからりませんが、出席者のふれあいにとてもいい方法です。

Hashtags Unplugged

hashtags-unplugged-1

このニューヨークの展示イベントのWebサイトはクリーンなデザインで、かつ素晴らしいタイポグラフィーです。

しかし私が一番気に入っているのはこのサイトのナビゲーションです。

「the artists」 を選ぶと、下にハッシュタグが出て来て、ページが全部アーティストのリストになります。

ページの移行は精巧で現代的、どこにいるかわからなくなった!ということにはなりません。

(ユーザーに新しいナビゲーションパターンを提供する際にすべてとても大事なことです)。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。


TechAcademyマガジンは、オンラインのプログラミングスクールTechAcademyが運営する教育×ITに関するWebメディアです。トレンドや最新情報など役に立つ記事を発信しています。
https://techacademy.jp/magazine/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています