見出し画像

9月。夏の終わりに、気になるサイト11選。 / 2024

iDID Magazine

こんにちは、iDID Magazine編集部です。
これを書いている今日は10月11日（金）。おとといの出来事ですが、朝起きたらうちの猫二匹がソファの上で重なるように寝ていました。猫用のホットマットを二枚用意したところ、それぞれ別々にマットの上にとことこ歩いていき、やがて静かに眠りにつきました。そう、おとといから明らかに寒くなったんです。夏があきらかにうすーくうすーくなってきているな。と感じます。

そんな今回、少し時間を逆戻りしまして、まだ猫も暑そうにしていた9月に話題だったサイトをご紹介したいと思います。今回もあのギャラリーサイトのリニューアルにSNSでも話題の採用サイトなど、興味深いサイトが続々リリースされておりました。みなさんと9月の出来事を振り返るつもりで一緒に遡っていき、一緒に夏の終わりを迎えられたらと思っております。

9月に話題だったサイトです。それではどうぞ！


1. S5-Style

キュレーター／クリエイター／ユーザーのユーザー参加型サイトに

今月のトップトピックスは、S5-Styleのリニューアルです。サイトの位置付けが「ギャラリーサイト」から「サービスサイト」へ変わり、サイトのキュレーターがオーナー田渕さんから「すべてのユーザー」へと刷新。UGCを盛り込んだサイトとして生まれ変わりました！

サイトの位置付けが変わることにより、各種機能も刷新されているのですが、出色は「Design Sets」。好きなカテゴライズで自分好みのサイトまとめを作れるのですが、このDesign Sets、「自身のポートフォリオをまとめる」こともできます。それにより、リニューアル後は数多くの制作会社やクリエイターが自社／自身のポートフォリオDesign Setsを作り、SNSが大いに盛り上がりました。

特徴的だと感じたのは「1. オフィシャルキュレーターが感度高いサイトを選出」「2. クリエイターが自身のポートフォリオをアップできる」「3. ユーザー自身が独自視点のまとめやサイト登録ができる」の三点。このキュレーター／クリエイター／ユーザーという三つのクラスターの参加型とすることにより、UGC＋SNSでのコミュニケーションがしやすいサイトに生まれ変わったことです。

この方向性は、SNSにてサイトを紹介、分析するニーズが増えてきた流れも汲んでおり、やはりこの「誰でもキュレーションができる（＝ユーザー参加型）」という流れにシフトチェンジしたところに、田渕さんの先見の明を感じます。素晴らしいリニューアルでした。

制作：
田渕 将吾 | S5 Studios
鍛治屋敷 圭昭 | BASSDRUM
長谷川 巧 | unshift Inc.
Remy | PersonalStock
Roy | PersonalStock
なかむら しんたろう
JARRIX
小林 徹哉 | BACON inc.

2. こがしバターケーキ

パッケージそのものがMVなんです

メインビジュアルがお菓子のパッケージそのままなんです。商品認知をしてもらうにあたって抜群の見せ方ですし、「パッケージの良さが活かされたファーストビュー」でもありますね。

スクロールすると中身のケーキが袋から飛び出して、画面内を動き回り、気づけば画面右下で「ほか　ほか」言っていたり…。このケーキ、サイト最下部で「おかわり！」と言って再登場。MVのパッケージからはじまり、食べ終えるまでの一連の物語をスクロールで体験できます。このパッケージをベースにした商品訴求＋キャラクター的愛着感が楽しいです。

商品一覧のホバー時の見せ方も新鮮で、パッケージを開けるときのような、ワクワク感を感じますよね。こういう「気持ちのあがる」モーションって意外とないように思いました。

制作：spicato inc.
Direction / Masayuki Hosoo @masayukihosoo
Design / Ai Yoneda @yoneda_spicato
Coding / Mana Kasai @manaweb_

3. NEWTOWNデザイナー募集2024

NEWTOWNの魔法が拝めるサイトですよ

拝見したときから「これはnoteで紹介するぞ」と意気込んでいました。こちらはNEWTOWNさんの採用サイトで、ウェブをなんと「本のカバー」に見立てたサイトです。本のタイトル部分ではNEWTOWNが求めていることを明確に提示し、裏表紙には会社のちょっとした特徴（？）。出色の帯パートでは、帯文コメントにちなんで「NEWTOWNに近しい人たちのコメント」が読めるつくりになっているんです。

それだけではなく、この「帯部分」を依頼するのではなく「SNSで公募した」ところがNEWTOWNマジックです。この枠を募集することで、帯文を書いてみたい、面白いので参加したい、NEWTOWNを応援したいという人たちが自主的に集まりコメントを書く。自主的ゆえにその文章はどれも熱い。そして第三者の人は、その熱い帯文コメントでNEWTOWNにより興味を持つことになるのです。

このサイトの制作だけではなく「仕組みまでをつくる」ことがNEWTOWNさんらしさであり、これはやはり日常からSNSを使って遊んでいることから生まれているのではないかと思います。なんか、魔法ですよね。NEWTOWNは魔法使いですよ。

（この帯文募集、企画の面白さに惹かれiDIDも参加してしまいました…。快く受け入れてくださった犬飼さんありがとうございました！）

制作：NEWTOWN

4. 放課後バッテリー

キラーなコンテンツ＋コンバージョンへの落とし込み方がポイント

ジャンプ+で連載中の『忘却バッテリー』19巻の刊行記念に伴った特設サイト「放課後バッテリー」。こちらなんと「第19巻の発売を記念した」特設サイトなんですよね。出版社が新刊をプロモーションするにあたっての方法論が変化してきているのを感じます（昔からだったらすみません…）。

ここで読めるのは、スピンオフ・ノベライズ作品で、登場人物たちの日常の一コマが小説として読めるようになっています。読み終えた後は「ジャンプ+」のウェブサイトに遷移するようになっており、ここで『忘却バッテリー』の1巻から3巻までが無料で読める仕組みになっています。maskmanさんが制作するサイトは、このファンや潜在層が心から楽しめる「キラーなコンテンツ企画」＋「コンバージョンまでの流れ」が秀逸だといつも感じます。

制作：MASKMAN Inc. 

5. ComPotte

見た瞬間に「欲しい」と声が出ました

3DCGで制作されたかのような、回転する不思議な器。ドットをベースに有機的に動く「ComPotte」の文字。なんとも大らかに配置された各種リンク。もしかして人じゃなくてコンピュータがつくったサイトなのでは…？とすら思ってしまいます。

このブランド、ComPotte（コンポッテ）と読むらしく、コンピュータを操る数理的思考力と、それを美しく具現化するクラフトマンシップを融合させた陶磁器ブランドだそうです。この陶磁器、見た瞬間に「欲しい」と声が出ました。デジタル感とクラフト感が、うまく溶け込んでいるような、そんな様子をありありと感じませんか。

プロダクト画像のモザイクが消えていく処理も、まさにコンピュータの思考力がそうさせたのだ、と思えてきます。コンセプトと表現が見事に合致しているサイトですね。

Design: hiromasa fukaji @fukajihiromasa (DIGRAPH)
Programming: junichiro horikawa

6. enishe Inc.

独自概念をCIでシンボライズ。サイトのアイディアも斬新

とても新鮮な気持ちで拝見したサイト。この会社の特徴的なところは「オーケストレーション（＝指揮者）」という概念があること。プロデューサー、ディレクターではない、新しい概念「オーケストレーション」をCIとしてシンボライズしています。サイト内で一度「オーケストレーション」を認識さえしておけば、あとはCIを見ればいつでもその概念を引っ張り出せるように作られている、と感じました。

そして、このCI、サイトのいたるところで目にするように出来ており、CI訴求（＋オーケストレーションとの紐付け）がかなり計画的になされている。

また、体制図、図解や写真、扱うフォント、どれをとっても新鮮で、いずれもアイディアがあります。メニュー内のニュースの入れ方も新鮮。各トピックタイトルのモーションにしても、ただのアニメーションではなく「目を向けるためのモーション」として考えられている。既存の要素の組み合わせではなく、ご自身の「フレッシュなアイディアをちゃんと落とし込んでいる」と感じたサイトでした。

Producer：Keita Sato（enishe Inc.）
Art Director,Designer：Masateru Nishinaga（Havvvna）
Developer：Takuro Miyagawa, Ryo Kanazawa
Photographer：Hiroki Kato
Special Thanks：Daiki Shinohara, Kaori Uchiyama

7. 黒木テック工業株式会社

メッセージが「細部だからこそ」伝わってくる

リニューアル前のサイトも拝見したのですが、前回のサイトに感じた「ワクワク感、親しみやすさ」から今回は「未来、信頼性」へとベクトルが大きく変化。今回のリニューアルが新しいフェーズへ入ったということが伝わってきます。「受け継がれた“黒木イズム”に加え、これからの未来を築く3代目の決意を具体化する」ことが、大きくサイトの方向性も変化させていくことになったのですね。ひとつの企業が100年企業を目指すために、ウェブサイトはどうあるべきなのか。かなり大きな責任の重圧の中でプランニングをされたのではないかと推測します。

印象的だったのはフッターに「10,000 days」と表示されたカウントダウン。サイト内に「これからも愛される100年企業を目指します」というフレーズがあるのですが、この10000日後が、まさに黒木テック工業が設立100年を迎える年なんですね。企業のメッセージが決して嘘ではなく本気であることが、こういった「細部だからこそ」伝わってきますね。

また、信頼性を感じるシャープなビジュアルイメージの中で、メニューアイコンには観覧車が。これもちょっとした演出だと思うのですが、これだけで「観覧車に関係している会社」であることがわかり、演出でありながらもシンボリックですね。このフッターやメニューアイコンのちょっとした演出が、結果的に企業ミッションである「楽しさは細部に宿る。」へのまさに回答になり得ていると感じました。

Art direction：丸山享伸（mitone design.）
Engineering：ADRIATIC
Photo：濵﨑正太郎（mitone design.）

8. 赤箱のススメ

一目で赤箱のイメージが一新するサイト

約100年の歴史を持つ「赤箱」のウェブマガジン『赤箱のススメ』。歴史あるブランドであり誰でも知っている赤箱「だからこそ」、赤箱の知られざる特徴をもっと知ってもらうこと。そして新しいターゲット層を獲得するためにイメージを一新することが背景にあったのだと推察します。ちなみに、編集部のメンバーも赤箱を使っているのですが「洗顔ができること」「赤箱と青箱の違い」はこのサイトで初めて知りました（早速やってみたい）。

女性モデルの起用、各種コンテンツからも、ターゲット層と伝えたいことが明確。このサイトのメインビジュアルを見るだけで「赤箱」のイメージがドラスティックに一新されました。「つっぱらないのが好き。」この洗顔ブランドのようなイメージビジュアルも強いです。また、面白いのがハッシュタグで、全コンテンツを見ていく前にひとまずハッシュタグで気になるところをポチポチ見ていく楽しみがあって、これはメディアならではの楽しみ方なのかもしれません。

牛乳石鹸は最近niko and...とのコラボレーションをはじめ、次の100年に向けた（？）新しい展開を見せ始めており、裏側の戦略的な部分をもう少し知りたいところです！

Agency: DAIKO
Director: Hiroaki Kano @canoooe
Nagakawa Designer: Shinji Maegawa @great_maegawa
Frontend Engineer: Sayuri Hamada
Copywriter:Yoko Matsushita（Freerance）
Photographer: Makiko Takemura @takemura_photo（Freerance）
Illustrator:Mai Senoo（Freerance）

9. 黒の研究所

ロゴマークがまんまMVに配置されている

こんなにシンプルで強く印象を残すサイトがあるんですね。『黒の研究所』は、「黒の探求を楽しむ」をテーマに、あらゆる「黒」についての研究が行われているサイト。MVがまんまロゴマークなんですよね。ロゴが全てを語っているので、それをそのままMVに持ってくるという潔さ。惑星のようなテクスチャーのアニメーションも印象的です。

このアニメーション自体が「黒にはあらゆる黒が存在する」ということを示唆しており、それがそのまま『黒の研究所』を物語っています。背景色はグレーや白をベースにすることで、コンテンツとしての黒が引き立っていますね。このロゴマーク、どうもキャラクターになったり色々な展開があるようなので今後の更新が楽しみです。

ロゴマーク、アートディレクション：岡本健デザイン事務所

10. なはれ

太陽のリズムと共に動くウェブサイト

「このウェブサイトはオフラインになるかもしれません」「サーバーバッテリー残量60%」…どういうことなのでしょうか。サイト全体は白と紫の2色で構成されており、どうも、画面表示にあたって明らかに「何かが不足している」感じがしますよね。

このサイト、「太陽のリズムと共に動くウェブサイト」で、太陽光パネルから供給された「電力源」で稼働しているそうです。1日あたりの日照時間は3時間で、曇天が続くとオフラインになる。ということは、日照時は見え方が違う…！？太陽光パネルの発電量、バッテリーの消費電力量、サーバーにあるファイル総量などがリアルタイムでわかるようにもなっています。電気を量だけではなく質的な視点も持ち込むことで、都市・自然・科学技術の関係性をより広く再考することがテーマのようです。

オフグリッド（電力を自給自足する）でサイトはどこまで表現できるのかという点に着目したところも興味深いですし、もう少し根源的なところに立ち返る意味でもハッとさせられるサイトでした。

オフグリッドシステム：山見拓 @hiraku1980
ウェブデザイン：浅野隆昌 @yuranha
ウェブ実装：山田哲也 @mt_tetsuya
VIデザイン：有本玲生 @leo_arimoto
テクニカルディレクション（フロント）：伊藤友美
テクニカルディレクション（バック）：土田直矢
企画・PM：国広信哉 @pygmy06

11. 小泉進次郎　自民党総裁選特設サイト

サムネイルは小泉進次郎Official Siteより（特設サイト公開終了のため）

現在は総裁選が終わってしまったため閲覧できないのですが「ウェブの観点」からとても興味深いものでしたのでご紹介させてください。こちらは自民党総裁選挙に出馬した小泉進次郎さんの総裁選特設サイトで、ノーコードツールSTUDIOで制作されています。立ち上げまでのスピード感も話題になっていました。

また興味深かったのが、「ファクトチェックサイト」。小泉さんの発言や政策についての切り取り・風説について、事実に基づいたQ&Aを伝える目的で小泉進次郎応援団体（非公式）が制作したサイトなのですが、こちらはなんとNotionで制作されていました。

総裁選のサイトをSTUDIOで、政策についてのファクト説明をNotionで。以前も都知事選におけるTikTokやYouTubeを活用したプロモーション戦略が話題になりましたが、政治における真実を伝える上でのウェブ戦略、というものもまた興味深く、今回ご紹介させていただきました。


終わりです！

まとめサイト、9月号、いかがでしたでしょうか。面白いサイトで充実の9月。今回も少しだけ紹介したサイトのことを書かせてください。

『S5-Style』はキュレーター／クリエイター／ユーザーによる「全員がキュレーター＝ユーザー参加型」にリニューアルすることで、UGC＋SNSでのコミュニケーション型に変化。時代を見据えた田渕さんの嗅覚をここに見ました。

『NEWTOWNデザイナー募集2024』も一種のユーザー巻き込み型で、それを自社のコンテンツとして昇華させていく流れはNEWTOWNさんにしかできないですよね。

『黒木テック工業株式会社』は細部に宿る楽しさと、細部に宿る意志。細部というものから生まれるコミュニケーションの可能性を感じました。

『小泉進次郎　自民党総裁選特設サイト』はプロモーションとしてのウェブ戦略だけではなく、スピード感、真実をしっかり伝えていくためのウェブ戦略、という意味で興味深いものでした。

やっぱりやっぱり今回も面白かった…。それにしても、ウェブサイトの表現はもちろん、その背景、戦略、目的、SNSの反応などを見ていくだけでも、世の中の流れを見ていくことができますね。いつも勝手なコメントばかりしておりますが、まとめサイト研究、もうちょっと続けてみたいと思います。

ではまた。来月お目にかかりましょう。
iDID Magazine編集部でした！

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

#このデザインが好き

7,760件

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