5月。今月の気になるサイト、12選。
こんにちは、iDID Magazine編集部です。なかば見切り発車でスタートしたiDID Magazineですが、4月からスタートして、まる2ヶ月が経ちました。私たちの中では「がんばりすぎるときっと更新がストップしてしまうから、のんびりやろうね」と誓い合っているのですが、それでも気づけばがんばったりしてしまいますよね…。いかんいかんです。でも、毎月リリースされるたくさんのWebサイトに、興奮ぎみに画面スクロール&リロードしている自分がいたり、クリエイターの方々のリリースまでの制作過程ツイートを拝見するたびに、なぜか気持ちをグッと引き締めている自分がいたりするのも、また事実なわけで…。ゆるゆると興奮の間でうまくバランスをとりつつ、みなさんの実績をたくさん紹介できるよう、引き続きがんばっていきたいと思っております。
それでは、前置きはこれぐらいにしまして、今回もいってみたいと思います!
1. きこえるいわて
岩手町未来都市共創プロジェクトの一環として作られた『きこえるいわて』のWebサイト。興味深いのは「きこえるいわて」というネーミングでありながら、BGMが流れてくるわけではなく、MVに岩手の風景が入ってくるわけでもないこと。それは、視覚や聴覚を受動的に浴びるのではなく、サイトを見た人自身が聴覚や視覚を働かせて「能動的に感じとってもらうこと」に重きを置いているからでしょうか。それは記事にある「ざっぶーん」「サワサワ」「ほおおおん」「わァわァ」というオノマトペにも顕著かもしれません。好きな小説の一節から情景をイメージするような、そんな感覚で訪れると良いことがあるサイトですね。この『きこえるいわて』は、Shhhさんがネーミング/VI開発からWebサイト制作まで担当しています。
2. LION GOOD NEWS
この3年で起きた広告業界や通信業界の変化で顕著になった、コミュニケーションの課題。それらの課題に対して「7つの花言葉」をきっかけに、過去から現在のカンヌライオンズ作品を紹介しながら検証するサイトが『LION GOOD NEWS』です。ひとつひとつの記事を読んで感じられるのは、商品のPRだけではなく、真実を追求したり、世の風潮に疑問を呈したり、世の中を変えていくための力が広告にはあるんだ、ということ。また、疑問を持つ人、怒る人、楽しむ人、失敗する人、守る人…。どの過去事例を見ていても、その背景には「人間」がいるんだ、ということもまた、面白いです。あともうひとつ、このサイトにはスペシャルコンテンツとして「じゃない方検索」があります。ChatGPT +Google APIを活用し、検索したいこと「じゃない方の検索結果」を表示することで、検索者は予期せぬ出会いにたどり着きます。ChatGPTというテクノロジーの面白さを感じとれるだけでなく「テクノロジーに対して、どう技巧を駆使し、予期せぬ出会いにたどり着けるか」が試されていて、サイト内でちゃんとテーマの実践がなされているところが面白かったです。
3. 安倍元総理 “銃撃の記憶”
2022年7月8日に奈良市で起きた安倍晋三元総理銃撃事件。発生当時の状況記録と当時の警備態勢の検証を目的に、事件当時の空間を「元総理視点」「被告視点」「現場視点」3つの視点でCG再現したサイトです。「現場視点」では事前の全体像を鳥瞰して把握することができ、「被告視点」では、被告が事件の1分前からどのように行動していったのかを、被告の目線で追体験することになります。特に被告視点が、自分の心臓のドキドキが大きくなっているのが分かるぐらいで、CGであることを忘れさせるほどのリアリティがありました。風化してはいけないものを、どう風化させずに、この事件の重さを感じてもらえるのか。このWebサイトがそのひとつの答えを提示したように感じました。この案件のプロデュースを担当したメフィラス藤原さんのツイートも必読です。
なお、メフィラスさん関連ではこの5月、他にもあのサイトやあのサイトやあのサイトが公開されており、編集部の中でも「5月は…メフィラスさんの月やったな…」となっておりました。
4. SOPHIE.STUDIO
愛知のクリエイティブプロダクション、SOPHIE.STUDIOのWebサイト。サイトを拝見していて「本当に国内の制作会社なんだろうか…」と何度も思ってしまいました。コアコンセプトは「ゲームインターフェイス」。下スクロールを(あえて)使わない、フルスクリーン固定で展開できるサイトになっています。各コンテンツへのトランジション表現、各コンテンツ画面の斬新なレイアウト。欧文/和文フォント、縦横表示、サイズ感、装飾に頼らないシンプルな表現ながら、ディテールの表現も秀逸です。中の人の注目は、サブメニューにある「MODE」「AUDIO」「SHORTCUT」。ダークモード/ライトモードへの切り替えや、各コンテンツへシームレスに遷移できるショートカットキーまであります。このあたりにもゲームインターフェース的なコンセプトが踏襲されています。コーポレートサイトは、こういうところで、会社の本質面や姿勢、実験的精神があらわになるところが、ほんと面白いです。
5. 乗鞍高原 温泉の宿 Raicho
松本市は乗鞍高原の宿泊施設『Raicho』のWebサイト。こういうサイトを拝見すると、つくづくWebって情報の伝達だけではないのだなと感じます。現地で録音されたであろう自然の音と、岩や苔、花などの、ディテールにフォーカスをあてた映像。全体像ではなく、ディテールから見せていくことで、Raichoの「場のリアリティ」を伝えています。そして、写真がまた美しい。標高1500mから見える絶景を見たら「行きたい…」となりますよね(笑)。また、自然エネルギー、使用した電気代の寄付など、Raichoのサスティナブルな取り組みにも注目したいです。「長期滞在することで、行き来で発生するCO2削減やシーツ交換数の減少、人口減少が続く乗鞍で関係人口を増やすことに繋がる」とのことで、滞在することが、対照的に自分たちの日常の暮らしを見直すことにもつながるかもしれません。なお、サイトを制作したデザインスタジオ・エルさんはこちらのお仕事もローンチされていました。こちらも、もう少し紹介したかった(ヘッダーのロゴマークの動きに注目なのです)…。
6. aguije / アグイジェ
LogramさんとのDROP TOKYOのリニューアルも記憶に新しい、渋谷・館山・鎌倉・浦和を拠点とするデザインスタジオaguijeのWebサイト。このサイト、見れば見るほど楽しく謎なんです。急にあらわれる東京とパラグアイの時間表示(昼か夜かで時計のカラーが違う)。深夜によくみかけた、謎のカラーバー。WORKS一覧の、謎のバウンディングボックス。ページ下までスクロールした際に出てくる「Nightmare Scroll Hijacking(まさに悪夢)」。謎の呪文「マタミル」と「イッテラ」(これが一番好き)。なんというか、「深夜のひとり遊び」が隠れテーマなんじゃないか?と思いました(多分違う)。反面、独自にカスタマイズしたモジュールシステムにより、WORKSでの高度なコンテンツ更新もできたり、ライトカラー、ダークカラーの設定ができたりと、運営側やユーザーの使いやすさも配慮されているところが恐ろしい(?)。今回の記事、制作会社の自社WebサイトはSOPHIE.STUDIOとaguijeの2つなのですが、各々の自社サイトの作り方を比較してみるだけでも面白い…。
7. HAIR ICI
一見いわゆるファッション系のサイトにも見えるのですが、メインビジュアル上にマウスストーカーで (Read Column)の文字が。それをクリックすると、写真の上に写真が表示され (Next) の文字。それをクリックすると、今度は衣食住に関するコラムが表示されます。スクロールアクションや別メニューで見せるのはなく、同一画面でのクリックアクションで見てほしいもの(ここではコラム)をどんどん見せるという、予想外の展開が。このオブセッション的ともいえる導線設計には、「『衣食住美』4つの視点を軸に、より良き日常をライフスタイリングする事を目指すヘアサロン」であるHAIR ICIの、単なるヘアサロンではない意志の現れを感じました。
8. メタバースと新しい仕事と世界
世界初のメタバース・シンクタンクMetaverse Japan LabのWebサイト。メタバースで変わる仕事の未来像を提案しています。5つの提案の前にそれぞれ挿入される、イラストを使ったアニメーションがフックとして機能しています。またページ最下部にあるホワイトペーパー(提言書)は「日本社会を変えて行くための具体的なステップをメンバーおよび外部の有識者からのヒアリングを通じてまとめたもの」なのですが、これがGoogle Docs上で制作されており、なんと編集ができる仕様に。「社会が変わるためには、もっと多様な意見を伝える必要がある」ということで、意見や感想を気軽にコメントできます。Metaverse Japan Labが開かれた組織であることを伝えると同時に、Google Docs編集機能のうまい活用をされているなと思いました。
9. Aquall
「髪と心にうるおいを与える」がコンセプトのAquallのブランドサイト。このMVの切り替えアニメーションがWebGLではなくCSSで実装されていることが、SNSでも話題になっておりました。もちろんそれだけではなく、スクロールアクション、ホバーアクション、ページ遷移のアニメーションすべてが心地よいです。あくまでも「うるおい」「やわらかさ」「心地よさ」という目的のためにつくられているため、アニメーションに無駄を感じません。
10. WORLD UNIVERSITY BASKETBALL SERIES 2023
2023年8月に行われる大学バスケの国際大会の公式サイト。全体の配色はロゴマークから踏襲しつつ、NBAを彷彿とさせるフォントのかたちを最大限に活かしたデザインが特徴です。これだけでバスケだとわかってしまうところがすごいです。各チームのマウスアクションやABOUTページの3連写真のスクロールアクションなど、細かいところのギミックも素敵で、見ているだけで気持ちが盛り上がってきます。
11. おばんちゅうさぎ
ある日急に公開されたおぱんちゅうさぎの公式サイト、どこが制作されたのかなと思っていたのですが、LIGさんの制作だったようです。「なかなか恵まれないけど、ひたむきに健気に生きる」おぱんちゅうさぎの特徴が、過剰な仕掛けやユーザーアクションによってしっかり伝わる設計になっています。横スライドで連続して紹介される2コマ漫画での、おぱんちゅうさぎの健気さに惹かれてしまうこと間違いなし。私は、オンラインストアの商品枠を突き破っていくおぱんちゅうさぎの行列が好きです。
12. NEWTOWNのデザイナー採用
こちらも、話題になっていました。NEWTOWNの採用ページは、LINEやメッセンジャーを模した、対話形式で構成されていました。この形式にすることで、他社の採用ページとの差別化ならびに、NEWTOWNの少人数+ユニークさという「らしさの演出」も成立しています。また面白いと感じたのは、この対話形式にすることで、スタティックな情報だけではない、いろんな付帯的要素を盛り込めることです。それは例えば、採用に至ったきっかけやプロセス。ヘッドデザイナーの犬飼さんとデザイナーのえみおかさんの2人のやりとりによる現場の雰囲気。他社のデザイナーさんや今回の採用において参照した方のお名前まで出てきちゃいます。また、採用テーマである「共闘」が、この2人のトークによって、この場で実践されていることにも注目したいです。制作者の方の制作背景やその後の反応をツイートで見られるところもまた、楽しいですね。
これにておわりです
今回も最後までご覧いただき、ありがとうございました。少しずつではありますが、ご感想を頂けることもあり、編集部一同励みになっております。どうもありがとうございます。お仕事時間の合間や、休憩のときなどに、さらりと読んで頂けたらうれしく思います。
次は、6月の更新です。それでは、また。iDID編集部でした!