![見出し画像](https://assets.st-note.com/production/uploads/images/116204591/rectangle_large_type_2_da627486a3272b3a4086495366820a6d.jpeg?width=1200)
8月。夏の終わりに話題のサイト、11選。
こんにちは、iDID Magazine編集部です。この記事を書いているのは、9月15日、金曜の朝。関東近郊は今週いっぱい暑さがつづくみたいですが、翌週からは少し涼しく、どうやら秋らしくなっていきそうです。といっても、疲れが出やすい季節でもあるので、みなさま、お身体には、どうかご注意を(先月病院に運ばれたスタッフもいたとか…それは私です)。さて、今回は8月に話題になったサイトをまとめてみました。思いのほか、企画型サイトの紹介が多くなったような気がします。気のせいかそれとも夏のまぼろしか。
秋を迎える準備(食欲が主ですが)をはじめつつ、今回もご紹介させて頂きます、8月公開分を。それではどうぞ!
1. DRAFT Minamiaoyama
![](https://assets.st-note.com/img/1694411167160-6p2zqk6InM.png?width=1200)
まず、設計デザイン会社が「新オフィスの案内ツアーサイト」をつくるというアイディアが面白いです。そのデザイン会社、DRAFTの新オフィスはビルの7階〜11階で、「カラフルな色を取り戻す」をコンセプトに、5つのフロアのテーマカラーから決めたそう。
Webサイトでもそのテーマ性を引き継ぎ、なんと縦軸をフロアの階層、横軸を各フロア内の説明に分けることで、Webサイト内でフロアを上下・左右移動しているような(まさにオフィス探訪をしているような)つくりが再現されています。それにしても、こちらのサイト、オフィスの隅々までのこだわりのすごさに、見ているだけで楽しく、なんだかやる気までみなぎってきます。うーむ、デザイン系の会社のWebサイトを見る醍醐味ですね。
DRAFT Inc.さんのオフィスが青山に新しく移転したことに伴い制作したオフィスツアーの特設サイトをANDMADEでデザインディレクションしました。https://t.co/MRplb8Z1Oa pic.twitter.com/NjTxSJG0Id
— Hirofumi Nakagawa / ANDMADE Inc. (@_HN_) August 8, 2023
DRAFT Inc.さんの新オフィス特設サイト制作でWebGLとフロントエンド開発を担当しました。MTGで何度かオフィスに足を運びましたが、本当に素敵オフィスでした。(語彙力0)
— Masayuki Daijima (@daijimachine) August 8, 2023
また、中川さんのオシャレデザインに動きをつけていく作業ががとても楽しかったです。https://t.co/lbMJmIHFkD#webgl #threejs pic.twitter.com/COqf6WwqMz
Producer: Masaya Yamamoto (ingraft Inc.) @masayasama
Art Director / Designer: Hirofumi Nakagawa (ANDMADE Inc.) @_HN_ WebGL / Front-end Developer: Masayuki Daijima (Calmhectic inc.) @daijimachine
2. 「人間に栄養を」カロリーメイト リキッド
![](https://assets.st-note.com/img/1694674817793-RgKBUff1SF.png?width=1200)
![](https://assets.st-note.com/img/1694677607270-Q0vph0JeCe.png?width=1200)
こちらは「カロリーメイトリキッド」のキャンペーンサイトで、reCAPTCHAのbot検出システムを逆手(?)に取って「人間と認証されないとサイトに入れない仕組み」になってます。認証後のコンテンツ体験もすべてがreCAPTCHAのパロディーで、その体験を通じて商品の良い情報を知れるつくり。いつも意図せず訪れるなんだか面倒な認証フローを今度は人間として楽しく体験できる、その価値の転倒の面白さ。この体験を通じて「人間には栄養が必要」というコンセプトがはっきり伝わるところも、また気持ちいい。なお、認証に失敗すると画面右下に0101のバイナリが並び、その文字列をクリックするとロボット専用ページサイトに飛ばされる(このページ、ロボット向けに二進数で表現されており「ロボットに栄養は必要ありません。人間に教えてあげてください。」と書いてます…)。
【人間だけ参加可能】
— 企画のきっかけ アイデアの引き出し (@creative_i_p) September 2, 2023
AI時代に、人間には栄養が必要だと伝える「カロリーメイト リキッド」の企画、「私はロボットではありません」。
ロボット認証をモチーフにした特設サイトを公開し、ロボットではないことを証明しないと参加できないキャンペーンを実施しています。https://t.co/lOsk14wTVK pic.twitter.com/NuLdEdrSLF
制作:不明
3. PARTY
![](https://assets.st-note.com/img/1694411528746-Ef2peSllUk.png?width=1200)
PARTYさんが、12周年を迎えてリニューアル。実績の多さや魅力的な画像・映像もそうですが、PARTY=パーティの様子を切り取ったような構成のメンバーページは、モノクロなのに(モノクロだからか)まるでそこに「にぎやかな現場の雰囲気」が聞こえてくるような自然さ。そしてページのボリュームや各所演出があるにも関わらずスピード感も損なわない。そのスピードも見せる場所によって違いを感じるような…。また事例ページの、ワークフローや制作過程の実例の丁寧さに頷きつつ、制作クレジットの細かな掲載は以前から代表の伊藤さんのお考えがあるところだったかと思います。抜かりない設計に感嘆の声がもれます…12周年、おめでとうございます!
PARTY WEBサイトリニューアル|https://t.co/ocNWIDMFTi
— PARTY (@prty_tokyo) August 9, 2023
PARTY設立12周年を迎え、弊社のWEBサイトをフルリニューアルしました。
それに伴い、事業領域、組織編成、VMVも刷新していますので、ぜひこの機会に目を通していただけますと幸いです! pic.twitter.com/gRWE3MSmuw
segaさんの素晴らしいモーションデザインをWebGLで実装しました!
— Misaki Nakano (@misaki_mofujp) August 5, 2023
サイト全体かっこいいのでぜひ見てみてください!https://t.co/WO8OPgIjNo https://t.co/Hrjlgg59nw
Digital Artist :SeiichiSega
WebGLdeveloper:Misaki Nakano
(わかる範囲で書いてみました…どなたかわかる方教えてくださいませ!)
4. SHUTL
![](https://assets.st-note.com/img/1694411725355-on6bJVItqa.png?width=1200)
伝統と現代の新たな接続方法を生み出す実験場「SHUTL」のサイト。正統的×現代的という、ともすれば相反する要素をどのように「らしさ」に昇華していくかがテーマだったのではと推察しますが、ここではグリッドレイアウトのスタティック感に対して、画像やテキスト要素の配置でバランスを外したり、バラバラなテイストのフォントを複数使用したり、トランジション、ビビッドカラー、ふきだしなどでヒップなニュアンスを出したりすることで「SHUTLらしさ」を表現しています。それにしても、Shhhのデザイナー宇都宮さんの「日本的美意識とWeb」への指向と、SHUTLの「正統的×現代的」という指向の類似性に驚きます。これはまさにShhhさんらしいお仕事だと、思いました。
[WORKS]
— 宇都宮 勝晃 / Shhh inc. (@kUtsunomiya) August 9, 2023
松竹株式会社様による、中銀カプセルタワービルを再活用した新アート&カルチャースペース「SHUTL(シャトル)」。
2023年10月7日のグランドオープンに先立ち、ウェブサイトを株式会社マガザン様と共にShhhにて担当いたしました。
.https://t.co/KePSrx2L4G pic.twitter.com/ysnhPE5chl
Client:松竹株式会社
Creative Direction: 岩崎 達也(Magasinn, inc.)
Project Management: 武田 真彦(Magasinn, inc.)
Art Planing: 黒田 純平(http://keshik.jp)
PR Direction: 松本 花音
Logo Design: 三重野 龍
Graphic Design: 井上みなみ、古山愛子
Website:
Direction: 重松 佑(Shhh inc.)
Design: 宇都宮 勝晃(Shhh inc.)
Development: 坂田 一馬(Good rings)
5. 町の小さな百貨店 モアリブリー
![](https://assets.st-note.com/img/1694411853593-k2z4e5hVT7.png?width=1200)
ひと目見ただけで、世界観に引き込まれるのはなぜか。「百貨店」を窓から覗き込むようなMVは、”ひらけごま”で中に入れるお宝の洞窟の入り口?いやこれは、右から左へ動くアニメーションから「幕が開く演出」だと気づきました。お店にあるのであろう商品の写真が集まったり離れたり、そして右上のOnline Shopのアイコンは、戸が開いていらっしゃいとお辞儀をしているような細やかなアクションが、上品さに加えてまるでお店に招かれているような錯覚を覚えます。ADRIATICさんのX(Twitter)の広報用の動画からもWebサイトの印象がそのままのお店なんだろうと感じる…素敵です。
奈良県香芝市にあるモアリブリーさんのWebサイトを作りました。店主さんが海外で集めた雑貨類もたくさん盛り込んだデザインになっています。
— ADRIATIC (@adriatic_web) August 30, 2023
カフェや衣服・食器・雑貨の販売、イベントなど、日ごとに役割の変わる「町の小さな百貨店」是非お立ち寄りください。
https://t.co/zYM32boaNf pic.twitter.com/VjNAIsiNSi
Web Direction, Design, Photography, Movie: 鈴木人詩(ADRIATIC) Technical Direction, Development: 吉永大(ADRIATIC)@daipdaip Development: 上田真緒(ADRIATIC)@free__age
6. OND°
![](https://assets.st-note.com/img/1694412130091-htQDW6OIGd.png?width=1200)
左に大きく「OND°」の文字。右上には縦のハンバーガー。右下にはビビッドなブルーで「音頭」。中心には縦書きで6つの職種が並んでいます。コンテンツの主動線が、WORKSでもクリエイターでもなく「役職」からスタートしているところが新鮮ですね。これはごあいさつにある「クリエイティブ集団であること」を強調しているからでしょうか。シンプルながらも、ちょっとした工夫だけでかっこよく見せられる。しかも、このサイト、メンバーページやWORKSページなど、後ろには膨大なページが隠れているんです。それをシンプルなTOP画面に集約させているところ。全体の動線設計も秀逸です。ちなみに、「音頭」のトグルボタンをONにすると、どこからか祭囃子の音が。え、楽しい…。
テレビCM をはじめ映像制作全般の企画演出・編集・撮影など専門人材を束ねる東北新社様のクリエイティブユニット「OND°(オンド)」のWebサイト制作いたしました!今なら夏限定の音頭つき🎵
— 渡辺 祐樹|Re:design / HOLON (@re_d) August 25, 2023
OND°制作メンバーの皆様にこの場で改めて感謝!!https://t.co/G4ujqL3zu3 pic.twitter.com/8I1f2if3AD
Creative Direction・Direction・Design:渡辺 祐樹 (Re:design)
Art Direction:佐々木 雅美(OND°)
Develop:磯 大將 (Re:design)
7. Philosophia
![](https://assets.st-note.com/img/1694412369271-sUwdlElwUN.png?width=1200)
まずロゴマークがすばらしく。人、植物、魚、鳥、時間、命…あらゆるエレメントの集合体になっています。「善く生きる。」というワードがあるように「生きる、暮らし、生活」がロゴマークに集約されているのかな、と思いました。そのロゴマークのエレメントがスクロールによって四散し、サイトの最下部でまた再集合します。その間にあるのが、「善く生きる。」にフォーカスをあてたコンテンツ部分。ロゴマークの言語化部分がコンテンツなのかなと。採用コンテンツでの、スタッフの暮らしにフォーカスをあてたインタビューも視点が面白く、その節々に、まさに哲学を感じました。
【制作事例】 株式会社フィロソフィア様のWebサイトhttps://t.co/aRcM87ubhXおよびVIを制作しました。ロゴがサイト内で一体感を持って繋がっているような演出をしています。採用ページはスタッフのくらしと人生にフォーカスし、インタビューと撮影を行いました。 pic.twitter.com/NCu2rdRhlR
— STARRYWORKS inc. (@starryworks) August 7, 2023
Agency & Production:STARRYWORKS inc.
Creative Direction, Technical Direction, Design:Koji Kimura
VI Design:Shinsuke Kitomi
Direction:Saki Onishi
Programming:Saya Adachi
Copywriting:Chika Kozono (parks)
Photographer:Yasushi Kurihara (ICHIBIRI PICS inc.)
Assistant Photographer:Shinya Matsumoto (ICHIBIRI PICS inc)
Hair Make:Yasuharu Hino (Partner)
8. 小川ぶどう園
![](https://assets.st-note.com/img/1694412578786-uXimINRGQw.png?width=1200)
MVが、巨峰ですね。巨峰という名前は、巨峰誕生の地から見える富士山にちなんで名づけられたらしいのですが、巨峰にとことんフォーカスすることで、ぶどうでありながら山々のような趣も感じられて、そのミクロ/マクロな世界観が素敵だと思いました。品種紹介の、アニメーションからぶどう実写へのつなぎもまた、印象的です(ここの表現、難しかったのではないでしょうか)。なお、制作は小川ぶどう園と同じ愛知のデザイナー、クックドゥードゥードゥーさんが担当しており、ロゴ、ショップカードに直売所の看板やリンゴ箱(!)までDIYで制作しているそう。小川ぶどう園さんとクックドゥードゥードゥーさんの強い結びつきがサイトのところどころから見て伺えるところも、また素敵です。
【 実績 】 8月オープン、小川ぶどう園さまのwebサイトを作成しました
— クックドゥ-ドゥ-ドゥ- | design (@cddd_design) August 1, 2023
「甘くて濃厚」と既にたくさんの称賛をいただいているみたいで、すごい!
サイト以外にもロゴ・ショップカード・直売所の備品まで デザイン全般をまるっとお任せいただきました。https://t.co/OPOaWBeUdT pic.twitter.com/jm6mzk8VSs
制作:クックドゥードゥードゥー
9. PARKLET
![](https://assets.st-note.com/img/1694412726705-qSw01YQ50F.png?width=1200)
人形町駅から歩いて10分もかからないとこにあるパン屋さん(実はこのパン屋さん、過去に訪問済なのです)。MVにうつるキャラクター=パンが、スクロールに従って(SPは真ん中にどーんと配置されている)だんだんとこねられ作られしているところに惹かれるところに「見せる」より「魅せる」な潔さを感じます。その「魅せる」は、お店自体の可愛さにも、スクロールごとに切り替わる背景色にも現れていて。お店の少しヴィンテージを感じる可愛さに「今後行ってみよう」と思わせる魅力を感じます(2回目の来店)。そんななかでも、MVにオープン時間と当日と明日の天気があるのは、お客さんファーストが故の配慮なのかなと思うのです。
素敵なサイト!
— nami | フロントエンドエンジニア (@yusuke_nm) August 25, 2023
キャラクターが焼き上がったパンになっていくのをスクロールに合わせてアニメーションしていってる!
動きがスムーズやし何回でも閲覧したくなりますね!https://t.co/mTi6X75cqu pic.twitter.com/HHMd9wrLBS
制作:不明
10. ズッキュン郵便局(公開終了)
![](https://assets.st-note.com/img/1694412799411-xygv7IVhCO.png?width=1200)
なんて懐かしいコトバ…ズッキュン!!ネーミングとその手紙を送ったり受け取るドキドキ感を表した可愛いいいいい特設サイト。右が固定メニュー のスマホファーストなデザインでメニューごとの切り替えもスムーズ。
渋谷に突如現れたリアルなズッキュン郵便局で、手紙を書いて送れたり、プリクラが切手になったり、特別な封筒・便箋があったりする場所だった様子。イラストレーターとコラボレーションした限定商品のポストカードなどもキャンペーンならでは。特設サイトは期間限定が多いのですが、ずっとアーカイブされたらいいのにって思いませんか。短期的なのはキャンペーンサイトの宿命ではあるのですが。
![](https://assets.st-note.com/img/1694704101512-FeAcLIYFk2.png?width=1200)
見た瞬間に「かわいい〜!」と声が出たくらいキュートなサイト。
— Hina (@Ebidaisuki__) August 17, 2023
調べてみたら、若い世代に手紙文化を親しんでもらうことを狙った体験型のサービスらしい。
カラフルな便箋、切手プリ、ハートのグッズなどとにかく見た目がかわいいからこれはテンション上がる。https://t.co/zytHkrUu3V pic.twitter.com/wKCkQDSzXh
ズッキュン♡郵便局も残すところあと3日...!
— ぽすくま【日本郵便】 (@posukuma_yubin) August 28, 2023
連日たくさんの人に新しい手紙、贈り物体験をしてもらって嬉しいよ〜❤️🩵
いちばんドキドキする郵便局、ズッキュン♡郵便局📮をぜひ最後まで楽しんでね✨
特設サイトは👇https://t.co/xDiVLPhyre#ズッキュン郵便局 #渋谷イベント pic.twitter.com/ljVNZ5f5kS
制作:不明
11. 餃子の王将×RAGEBLUE (23SS)
![](https://assets.st-note.com/img/1694704203308-eNaFE1XYiL.png?width=1200)
おそらく4月公開のサイトなのですが、8月に少し話題になっていたので取り上げます。「店舗に行っても思い出しそうなくらいの強烈さ」「商品が1ミリも頭に入ってこなくてただただ面白い」など、話題になったサイトと言えばこのサイトでしょう。アパレルと飲食店のコラボは、近年よく見かけるようになってきましたね。この振り切り方は、どちらのブランドの後味も、うまく(美味く)ちゃんと残りますよね。それにしても撮影のアートディレクションも、サイト内に飛び交うおなじみの餃子の箱や箸袋など、どう決めたらこうなったのか、裏側を知りたいところ、です。
餃子の王将とコラボしたアパレルブランド「RAGEBLUE」のサイトデザインがポップでとても素敵だな〜
— いいの | WEBデザイナー (@iino_design) August 18, 2023
思わず餃子が食べたくなる🥟https://t.co/ni1cyIlIyv pic.twitter.com/TSARhTKYbg
制作:不明
おわりです
以上で、8月の気になったサイトまとめ、おわりです。読んで頂いているみなさま、気にかけてくれているみなさま、いつもありがとうございます!
実は今回がサイトまとめ記事、6本目です。3月スタートで8月まで、半年分のまとめを終えました。いつも楽しくやらせてもらっています。クリエイターのみなさんが責任を持って送り出されたであろうたくさんのお仕事。拝見するたびに、クリエイティブの素晴らしさに嬉しくなるとともに、その背景にあっただろう幾多のプロセスを想像し、紹介する側としても気が引き締まります。ひきつづきがんばりますので、今後も感想、いいねなどいただけるとみんなこぞって喜びます。
次は、9月サイトの更新。ささやかな目標ではありますが、年内は途切れずやっていけたらと思っております。
それでは、また。iDID Magazine編集部でした!
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?