見出し画像

3月。春うららかな。気になるサイト、12選。(2024.3)

iDID Magazine

これを書いているのは、4月15日。うららかな春ですね。今年はなんだか、桜が咲いている時間がすこし長く感じられませんか。ここ数年は卒業シーズンでの開花が常連になってきていた桜ですが、今年は入学シーズンの桜としてなんとか愛でることができました。そしてそして、春爛漫なこの時期にですね、なんとiDID magazineが一周年を迎えました！わ〜。ぱちぱちぱちぱち👏

勢いでえいやと始めたnoteでしたが、今日もなんとか続いています。これもいつも読んでくださるみなさまのおかげです…。いつも、ありがとうございます。これからもインタビューはもちろん、新しい企画もやっていけたらと思っておりますので、どうぞよろしくお願いいたします。

前置きはこれぐらいにして、今回も行ってみましょう。
春爛漫な、3月の気になるサイトです。どうぞ！


1. niko and …ブランドサイト

NEWアイコンの立体感 👀

「niko and …」ブランドサイトがリニューアル。"uni9ue senses”をキーワードに「暮らしを彩る9つのカテゴリー」をコンテンツ展開していくとのことで、サイト上を彩るコンテンツも幅が広い。でも散漫な印象を与えず、むしろ「楽しそう」と思えちゃうところがポイントですね。膨大なコンテンツを整理して、まとめあげていく力もすごいですが、ちょっとしたギミックがまた面白い。スクロールで転がるNEWアイコン、サイトが急に立体的に見えてきます。ヘッダーの遊び心も楽しい。

もうひとつ特徴的なのは「ニコブログ」「今週これ買いました!!」をはじめとした「スタッフ発信」コンテンツ。人気スタッフのインスタをまとめたコンテンツも。オシャレな消費者でもあるスタッフさんをコンテンツの軸に置くことで、ユーザー側はリアルに知りたい情報を知れますし、スタッフベースなのでコンテンツ量も担保できる。まさに定期的に遊びに来れるサイトですね。あと、忘れてはいけないのが2024 SSスペシャルサイト「であうにあう編集部」。ブランドの遊び心がしっかり「らしさ」に結実しています。

2. OLU PRODUCTS

グリッドとレトロゲームのシンプルな共振 🎮

「身につけられる軽やかなグラフィック」がコンセプトのプロダクトブランド、OLU PRODUCTS。第一弾は「GRID」シリーズとして、8種類のバッグを展開。フラットなデザインで、平面におくと一枚の紙になる…グラフィック思考が隅々まで落とし込まれていて面白いです。持ち歩くだけで変化するグラフィックなんて、平面性とフィジカルの融合ですよね。

もちろん、ウェブサイトもフラットでグラフィカルです。KVでは、GRIDシリーズのベースでもあるグリッドのグラフィックが無限にスクロール。シンプルな形で構成されていた時代のレトロゲームみたいです。ホバーで別の写真も見せちゃうところも面白い。ウェブを触りなれている人には気がつけないユニークさがあるのかもしれません。今後のプロダクト展開も楽しみです。

アートディレクション・デザイン：脇田あすか

3. あの、忘れられない日々。

エッセイをサイトにする！✍️

ZIZO DESIGNのデザイナー西村さんが、ニューヨークに留学していた頃の話をエッセイとしてまとめたサイト。当時のことに対して今も明確な答えが出せていないという西村さんが、過去の想いを消化するため、また思い出すために制作したのだとか。過去の忘れられない「大切な記憶」を駆動させ、また大切にしておくための「大事な思い出の箱」として、ウェブサイトを機能させたところに興味を持ちました。

また、今はnoteをはじめとした「文章を残せるプラットフォーム」が数多くあるわけですが、それをあえてSTUDIOで制作したところも興味深いです。思い出を大切にしておくためには、その気持ちをしまっておく箱も大事。だからこそ、全体の世界観からご自身で設計する必要があったのかもしれませんね。そのために最適なツールだったのがSTUDIOだったということで、STUDIOのポジショニングにおけるひとつの可能性を感じたサイトでした。

制作：西村沙羊子 (ZIZO DESIGN)

4. UNBOX 2nd

デジタルとフィジカルのはざま 👜

UNBOX 2ndでは、「箱と袋のはざま」をテーマに、紙袋とも箱とも言えるようなプロダクトが計7種類紹介されており、それぞれのプロダクトを「ウェブ上で物理的に触れる」といったつくりです。なのですが、物理的に触れるといってもシミュレーションできるというわけではなく、ゲームのつもりで遊んでみても、なんかうまくいかない。この「うまくいかなさ」に笑えてしまうんですが、そこがまた隠し味でありユーモアでもありますね。「UNBOX＝箱ではない」というどこか「引き算」を感じさせるコンセプトが、この遊びの部分（○○でもない）にも反映されているように思いました。「はざま」という観点も面白いですよね。

AD：坂本俊太 @sakamotoapp

5. Featured Projects 2024

自分もサイトに盛り込まれる！👨‍🦰

昨年もウェブサイトが話題になっていた、デザインフェスティバルFeatured Projectsの2024年版です。この、溢れんばかりのKVですよね。テーマは「“そうぞう”からはじまる」で、無限に溢れだす"そうぞう"をビジュアライズしているそうです。なんとCAMERAをONにすると、サイトを見ている自分自身のシルエットもKV内に盛り込まれます。すごいアイディア。また、メニューを開くたびに、広辞苑、国語辞典、Featured Projectsが出典の「そうぞう」についての説明がランダムで紹介されたり、細かいところのギミックにも創造性を拡張していこうとする勢いを感じます。『UNBOX 2nd』につづき、こちらもNEWさんが関わっているプロジェクトですね。

Art Direction: Sakamoto Shunta(NEW), Yamada Toi(NEW)
Graphic Design: Sakamoto Shunta(NEW), Ishida Iori(NEW), Sagara Sonoka
Web Direction, Design: Asano Takamasa
Development: Yamada Tetsuya
Animation: Harada Itsuki
Space Design: Nishio Takeshi
Project Management: Tanizaki Rio
designing: Koyama Kazuyuki, Koike Masaki
Staff Lead: Nishimura Riku
Party Operation: Takebe Aya, Kobayashi Takuya
Market Operation: Hirayama Tomie
Exhibition Operation: Shibuya Mai
Creative Direction, Produce: Goto Ayumi, Sagara Sonoka
CMS: Newt
Server: Vercel
Font: Neue Helvetica® Pro, New Cezanne

6. 産経デジタル採用サイト

場所の空気感🏞️

産経デジタルの採用サイト。メディア運営からゲーミング・マーケティングコンサル、空間総合プロデュースなど、意外と多岐に渡った展開をしている会社なのですが、この採用サイトではオフィスまわりの風景や、働く人の雰囲気や印象に重きを置いているようですね。コーポレートサイトとは印象が大きく変わり、「場所の空気感」を中心に作られたような印象を受けます。と思っていたら、フッターの右側にカメラアイコンがあり、それをクリックするとギャラリーページが現れます（404ページでは「すこしひとやすみしていきませんか」とも）。現場の写真がいろいろなことを映している、そんなサイトだと思いました。

direction & design：Haruka Asano @Paru__Design
photograph & develop：Taiga Narita @Garugarion

7. SLEEP SOUND LABEL ZZZN

まぶたがメニュー👁️

眠りに誘われるような心地よい音楽をバックに、大きなロゴが沈みこむように落ちていきます。睡眠アプリなどのスコア化された睡眠ではなく、情緒的な面から睡眠と音楽の可能性を探っていくレーベル「ZZZN（ズズズン）」のサイト。メニューがまぶたの開閉を表現しているのが面白いですね…。各コンテンツの黒でマスクがかった表現は、夢の中を彷彿させます。それにしても、布団の中で音楽を聴きながら寝落ちする会…。これめっちゃ参加してみたいですね…。

制作：Konel Inc. 

8. 長谷川三郎《蝶の軌跡》のイリュージョン

抽象性をサイトで表現🖼️

「絵はどっちにあるんですか。」という言葉が印象的で、導入から惹きつけられます。画面には不思議なリズムで羅列されていく画像と言葉。作品よりも「何かをしている手」が目につきます。画面をズームしていくと、言葉がどんどん増えていき、それが誰かの発言であることがわかってきます。

軸となるのは《蝶の軌跡を散策する》《蝶の軌跡を解読する》の２つ。≪散策》はキャプチャにある散策する画面。《解読》は各々のテキスト／画像の詳細画面だと言えるでしょう。しかし、詳細画面を読んでいても、何のことを言っているのかなかなか分からない、ある種の抽象性が面白い…。

答えは、展覧会情報のページに。なるほど、長谷川三郎さんの《蝶の軌跡》という作品があって、これが抽象画なんですね。だから、作品の背景にある抽象性またはイリュージョンを表現するために、サイトのコンテンツも抽象的な表現からスタートしているんですね。この展覧会が「抽象絵画の新たな鑑賞方法を探っていく」ものであることからも、ウェブサイトが「鑑賞すること」をテーマに作られていることがわかります。

制作：小林加代子（Studio Kentaro Nakamura）

9. CONTRAST

ページの概念を揺り起こす📄

IN FOCUSさんが運営しているクリエイティブスペース「CONTRAST」のウェブサイト。まずアクセスすると「えっ？」と思いませんか。なんと、トップページが透けていて、その背景に別のページが見え隠れしているんです。この薄い紙のようなトップページ、ドラッグで動かせます。もちろんリンクなども機能しています。常に次のページがうっすらと見えていて、レイヤー構造を可視化したような仕様になっているのです。デザイナーの志村さん曰く「雑誌や本を読むときに次のページがうっすらと透けて見えること、それが美しいなと思う」とのこと。なんでもできると思われるウェブの世界において、あえて制約を持たせる面白さ。今回ピックアップしたサイトの中にもいくつかありましたが、CONTRASTのサイトも、デジタルに対して一種のフィジカル性を導入することで面白い体験性を創出しているところが興味深いです。

DESIGN : Tetsuro Shimura (IN FOCUS) @tetsuroshimura
DEVELOPMENT : Junya Ohara (IN FOCUS) @jun00break

10. 株式会社SmartHR 採用サイト

誰もが心地よく💓

第一期の新卒採用も開始した、SmartHRの採用サイト。シンプルな図形を組み合わせた、7つの幾何学模様が印象的ですね。これは7つのバリューを表現しており、ひとつひとつの図形は、ミッションにある「誰もがその人らしく働ける社会をつくる」の「誰もが」に該当するのかもしれませんね。

また、目に入ったのが、ヘッダーの「モーション」ボタン。サイト内すべてのアニメーションのON/OFFができるようになっています。最初から選択肢を省かず、ユーザーが「選べる」ようになっている。これも「私たちは、誰もが心地よく、健康に、そして幸せに働ける社会」を目指すSmartHRさんならではですね。誰かを良し悪しを決めるのではなく、誰もが心地よくあること。とても考えさせられます。ウェブアクセシビリティを強みとしている株式会社トルクさんの制作。アクセシビリティとは具体的にどういうものを言うのかを教えてくれるサイトでもありました。

Client：株式会社SmartHR @SmartHR_jp
SmartHR Staff
Project Manager：南石 愛実（SmartHR）
Creative Director：名和 大気（SmartHR）
Director：今井 大介（SmartHR）／関根 裕夏（SmartHR）
Copywriter／Copy Supervisor：荒木 彰（SmartHR）
Art Director：林 遥（SmartHR）
Accessibility Advisor：桝田 草一（SmartHR）
Advisor：日永 早希（SmartHR）／瀧田 成紗（SmartHR）

Torque Staff
Director：横山 幸之輔
Copywriter：岡村 崚平
Art Director／Designer：阪口 卓也
Designer：マルシア セティアワン
Front-end Engineer／CMS：堀江 哲郎

Partner
Photographer：吉田 周平（Freelance）
Illustrator：小山 理恵（MONTAGE）

11. HYDRO NEXT GEN HIKER

演出が面白い🤩

アイディアが面白いです。画像読み込みの際に「画像が構成しているかたちや色を単純化した画像（SVGファイル）を一旦読み込ませてから、本画像（WebPファイル）を表示させる」という演出をしています（おそらく。言葉で説明するとわかりにくいですが、サイトを見ていただければわかります）。「読み込み」を使って演出を行うとは…。全体がシンプルなだけに、この方法論が効いています。また、ななめに入ってくる商品スペックやOVERVIEWの見せ方も素敵ですね。

- Visual
Starring: ARRAN, METI, YO, TROY
Photographer: Toshio Ohno
Stylist: Yuto Inagaki
HMU: Asahi Sano Retoucher: Mari Obara
Designer(Title): Emiri Nakagawa
Photographer Assistant: Mizuya Yuto
Stylist Assistant: Maki Sudo
HMU Assistant: SE-KA TAKI

- Web
Art Director, Designer: Takumi Abe
Technical Director, Front-end Engineer: Yusaku Kimura
Technical Producer: Akinori Kanai
Producer: Yohei Fujii, Shin Ohira
Production Manager: Ippei “Troy” Fukuda
Production: CEKAI

12. イーゴンお前もか

イーゴンお前もか👓

在野のWEBクリエイター・イーゴンさんの革新的ポッドキャスト番組「イーゴンお前もか」のウェブサイト。リスナーの悩みを、別のリスナーと一緒に解決する、「双方向型・お悩み解決ラジオ番組」。お悩み相談はもちろん、お悩み相談に対してアドバイス投稿ができ、解決済みのものは、ポッドキャストでその顛末が聞けるようになっています。

このサイトが面白いのは、ウェブまたはSNSを活用した「ポッドキャストへの誘致の仕方」が秀逸であることと、お悩み相談を双方向的にしているところ。インタラクティブでウェブ的。悩みを解決してくれる人だって、悩みを持っているということにも気付かされます。

NEWTOWNさんは、以前ご紹介した採用サイト、ケーキを題材にした「PLATE」、犬飼さんの弟子募集サイト「弟子ブラック」、1月からXで試験的に開始された「ニュータウンスペース」など、ウェブのフィールドを起点に、いろいろと面白いことをされている印象があって、気になっています。

クリエイティブなウェブサイトが素晴らしいのはもちろんですが、ウェブサイトや各種ツールを最大限に活用して、面白いことをやろうとしている人たちの奔放な自由さにもまた、ひとつのウェブのあり方というものを強く感じます。

制作：イーゴン @egon_tweet

おわりです

今回は、いろいろな方法論でもって「デジタルとフィジカルのミックス」をしているものが気になりました。

「CONTRAST」では「ページ」という概念に対して本のフィジカル性を導入していましたし、「Featured Projects 2024」ではユーザー自身がサイトの中のいち表現に組み込まれるという驚きの体験を見せてくれました。「OLU PRODUCTS」「UNBOX 2nd」では、まるでグラフィックやデジタルとフィジカルの「はざま」を行き交うような方法論がまさに「新感覚」でした…！

また、「あの、忘れられない日々。」や「イーゴンお前もか」では、ウェブという概念についての再発見がありました。ウェブサイトや各種サービス、ツールを固体として考えるのではなく、運動体として考える。ウェブの概念を再発見させてくれるものでした。

今月も最後まで読んでいただき、ありがとうございました！
iDID Magazine、2年目も引き続きがんばってまいります。どうぞよろしくお願いいたします。

次回は、4月のサイトの更新です。次はどんなウェブサイトが公開されるのか、わくわくしながら待ちたいと思います。
iDID Magazine編集部でした！

この記事が参加している募集

このデザインが好き

7,130件

この記事が気に入ったらサポートをしてみませんか？