見出し画像

7月。夏まっさかりのサイト12選。

iDID Magazine

こんにちは、iDID Magazine編集部です。ついに、夏到来ですね。これを書いている今は、8月上旬。お盆休み前には公開してみなさんに見て頂けたら…という算段でやっております。今回は、7月の話題になったWebサイトを12サイト、集めてみました。夏ということで、心なしか元気な、パワーあるサイトが多いような…？気がします。暑い夏に、元気なサイトで元気をもらいたいですね。もらいましょう！

心をゆるやかに、更新もゆるやかに。
今回もはじめさせて頂きます。7月公開分。どうぞ！



1. TORIKIZOKU 新卒採用サイト

あれ、メニューが…。いや、きっと気のせいだ

まず、「さて、今日も世の中を明るくしていこうか。」というコピーと、じんわりタレがたれてきそうな、黒くて強いA1ゴシック。「世の中を明るくすることがルーティーンで当たり前のこと」そんな声が聞こえてきそうです。にょっきと生える翼のイラストは、にわとりのように「飛べなくても羽ばたいていこうじゃないか」ということかも。わたしのイチオシ「TORIKI TIMES」では、サイトの全コンテンツの中でポイントだと思われる箇所を抜き出してインデックス化。世の中を元気にしたい「鳥貴族の哲学」がデザインに落とし込まれているだけでなく、サイトを見ている人（就活対象者）がまず元気をもらえる（哲学のインストールができる）ところが深いと思いました。


Client：株式会社鳥貴族ホールディングス
Agency：株式会社パラドックス
Production：MEFILAS
Direction, Planning, Project Management：原田 大地（MEFILAS）
Art Direction, Design：神杉 遥介（MEFILAS）
Technical Direction, Programing：金納 達弥（MEFILAS）
Programing：杉若 玲子（MEFILAS）

2. センダイパルコ15th

アドバルーンもクラッカーも全部でお祝い

まさにロゴが主役なサイト。色遊びと絶妙なバランスが目に入ってきたインパクトのあるロゴは、仙台生まれのAYOND/佐々木俊さんの制作。INTRODUCTION内をクリックすると本人の手書きのメッセージがどカーンと出てきます。。ロゴのビジュアルデザインを中心に、各所の動きやロ回転のバリエーションなど細かな調整が行われています。所縁のあるクリエイターさんや地元の祭りのコンテンツが盛り込まれているのも、地域キャンペーンサイトならではの面白さかも。とにもかくにも、仙台PARCOさん、15周年おめでとうございます！🎉

DIRECTION : PARCO
15th LOGO & KEY VISUAL : SHUN SASAKI (AYOND)
WEB DESIGN : RYOTA EBINA (eieio)
WEB DEVELOPMENT : YUSUKE FUKUNAGA


3. BEAMS + STARBUCKS® Find My TOGO Style

押し付けない、コーヒー × 自分スタイル

BEAMS × STARBUCKSのコラボレーションのキャンペーンサイト、8月直前に話題になりましたね。IN FOCUSさんの投稿より先にTwitter界隈で盛り上がっていました。画像の影と、切り抜きの立体感、ポイントとなる動画、縁付きの写真…。少々レトロさを感じる色味も頭に残りました。BEAMSのスタッフさんがモデルになっているようですが、Staff ProfileのFavorite Drink情報が載っているところ…細かい！ロゴ下の3つの記号がこのキャンペーンで伝えたいウラのメッセージを占めしているようにも、見えます。暑い日が続くけど外に遊びに出ちゃおっかな、ていう気持ちになったサイトでした。

WEB
WEB DIRECTION : Tatsuya Mizuguchi (IN FOCUS)
WEB DESIGN : Miho Nagatsuka, Yohei Takahashi (IN FOCUS)
PROJECT MANAGEMENT : Kento Inada (IN FOCUS)
WRITING : Hiroko Yoshii（BEAMS CREATIVE INC.）

GRAPHIC
ART DIRECTION : Manami Masuda (IN FOCUS) DESIGN：Manami Masuda (IN FOCUS) PHOTOGRAPHY : Kouhei Iizuka PROP STYLING : Nazuna HAIR&MAKE-UP : yui

MOVIE
PRODUCE：Masaki Fushimi (IN FOCUS) DIRECTION：Miho Tanaka (IN FOCUS), Masaki Fushimi (IN FOCUS)

PRODUCTION MANAGEMENT : Masaki Fushimi(IN FOCUS) CINEMATOGRAPH：Takachrome EDIT : Miho Tanaka(IN FOCUS)
SPECIAL THANKS : Yuma Sawai, Eri Sawai, Kosaku Uchino, Etsuko Meguro, Remi Suzuki, Jinichiro Suzuki
WRITING : Hiroko Yoshii(BEAMS CREATIVE INC.)
AGENCY : BEAMS CREATIVE INC.

4. インターオフィス

ナビゲーションなどの機能まわりのデザインがGood Design！

ナビゲーション、All Menu、Price List、カルーセルと、それぞれの見せ方が新鮮。にもかかわらず、それぞれが画面上でぶつからず、すっきりしているように感じます。メインビジュアルも、タイル型のマスク処理によって実績が少しずつ見えていくギミック（ランダム処理されています）により、素通りさせない。スマホだと、All Menuが上から出るのが、スクロール途中からなんと下から出てくる（！）。などなど、細かい配慮が行き届いたデザインだと思いました。なお、インターオフィスさんのコーポレートスローガンは「Good Design is Good People（良いデザインは良い人を生み出す）」なのですが、新鮮な納得感を感じられるスローガンって素敵ですよね。

Client: Inter office ltd.
Account Manager: Kazuya Okada @okadadada4 （SHIFTBRIAN Inc.）
Account Planner: Koya Sonoyama （SHIFTBRIAN Inc.）
Planner: John Nishiyama （SHIFTBRIAN Inc.）
Back-end Developer: Hiroaki Yasutomo @kaminaly （SHIFTBRIAN Inc.）
Art Director, Designer: Hidetoshi Hara(Sunny Inc.) @suuuunnnnnnny, Issei Nomura(Tyle)
Project Manager: Toshihisa Nakamizu(COMPASS INC.)
Front-end Developer: Go Nishiduka(freelance)
Interactive Developer: Ryo Ikeda(devdev Inc.) @ikeryou
Writer: Sakura Sugawara(freelance)
Photographer: Takatsugu Shimazaki(SONICJAM Inc.)
Photographer Assistant: Kiharu Anzo(SONICJAM Inc.)

5. tote inc.

作り手が一番楽しんでいらっしゃる、そう思う。

こちらのサイトも話題になっていました。音楽×インタラクティブが強いイメージのtoteさんのサイトリニューアル。今回はロバの頭の上に鳥！ロバの耳はまるで鳥の羽（!?）！タイムラインに流れてきて一旦スクロールを止めた人が多いビジュアルでしょう。ビジュアルのインパクトを裏切らないtoteさんワールドの迷路に入っていくと、途中で無造作に見つかるハンバーガーやトートバックを横目に、爆音でBQMを流しながら時間を溶かしちゃう、そんなサイトでした。ハンバーガーは最後にクリックをオススメします🍔

制作：tote inc.

6. トヨタバーチャル工場見学

効率の良いバーチャル見学ができちゃう

トヨタのバーチャル工場のサイト。PCでも効率性を感じますが、SPでもスクロールなしの画面遷移で無駄なく、スムーズな動きで、シンプルなのにわかりやすさが重視されているように思います。そして、「クルマづくり」という言葉はなく、モノづくりの集結がクルマづくりと感じるこだわりがイラスト・テキスト・動画で表現されています。

制作：分かり次第追記します！

7. STARRYWORKS inc.

実績のテキスト部分をホバーすると…

STARRYWORKSさんのロゴ＆Webサイトがリニューアルされています。アクセス時に一瞬表示されるロゴタイプがすぐ消えて、ロゴマークと実績タイトルだけが並ぶデザインで、とにかくシンプル！これだけでもかっこいいわけですが、実績テキストをホバーすると背景に現れるぼかし＆モーションブラー＆マウスインタラクションで、実績によってサイトの雰囲気が大きく変化していくのが本編。STARRYWORKSさんのモーションへのこだわりが伺えます。17周年おめでとうございます！

制作：STARRYWORKS inc.

8. 視覚伝達デザイン学科 オープンキャンパス2023

自分の視線の流れをくりかえし見てしまう

武蔵野美術大学の視覚伝達デザイン学科、通称「視デ科」のサイト。カッターマットの上に、色、サイズ、配置がバラバラの「紙」を模した情報があります。何気なく見進めていくわけですが、この情報をどう見たか。わたしの場合、青の大きいもの→小さいもの→オレンジの大きいもの→小さいものへと視線が誘導されていきました。レイアウトがバラバラで情報が分散する中で、人はどう情報を読んでいくのか。 視覚デザインの「どう見えたか」「理解できたか」をユーザー自ら試せるようなつくりで、一種の体験型サイトと言えるのではないでしょうか。あとこの紙、スクロールすると画面上部にたまっていくところも面白いです！

Design: Shunsuke Kudo (@shunsuke_kudo_)
Coding: Myojin Manabu (@myo418)

9. Shindo Tomoka - 新道トモカ

この空間に注目です

フォトグラファー新道トモカさんのポートフォリオサイト。掲載されている作品が、すべて画面右寄せで配置されています。展示作品にいたっては額装された姿で掲載されていて、作品単体ではなく展示会場のような「作品を含めた空間性」が意識されたつくりになっているようです。

Client：新道 トモカ
Development：藤本 圭
ArtDirection, Design：植木 駿（PLANT）
Design：高橋 尚吾

10. 野崎ひろこ

情報が乱雑に見えて、見せたいものはすっきり。不思議

フォトグラファーさんの次は、イラストレーターさんのポートフォリオ！このサイト、よく見ると入稿データのコーナートンボのようなものが。ポートフォリオを名刺に見立てているのかも。文字が切れていたり、同じ情報が繰り返されていたり、デザイン制作中の雰囲気がそのままデザインになっているのが好きです◎。でもそんな情報の中でも、しっかり作品が目立つ、すっきりしたつくり。STUDIO制作です！

制作：HIKARINA Inc.

11. BNN, Inc.

平面的でありながら空間性もある

BNNさんのコーポレートサイト＆ECサイト。余分な情報を削ぎ落として、本のデータベース＆検索性に特化。それはデザインにおいても同様で、グリッドをベースに、彩り鮮やかな本を引き立て、見やすくするためのデザインに特化しています。興味深いのは、出版物をシンプルにデータベース化することで出版社のカラーがより明確になること。このサイトへの感想で「デザイン本がまとまっている便利サイト」といったツイートがあり、それもまた言い得て妙だな、と（それほどサイトがシンプルであり、BNNさんのカラーが明快になったということかも）。また、サイトを見ていて思いましたが、「出版社ベースで本を探す」ニーズってあるかもですね。これから新しい潮流が生まれるかも。そういえば、幻冬舎さんも最近サイトリニューアルをされていて、こちらも素敵でした！

制作：Keita Yamada

12. くりもと眼科

一見、ん？となりませんか

こちらも話題になってましたね！「まばたき」を思わせるモーションの後に、検査中の先生が何かをのぞきこむ写真。実は、検査中の人の眼を通した写真になっているのですね。各ページ遷移のトランジションも、ページ全体がぼやけ→まばたき→ページ表示という流れで、結果的にページ表示がくっきり見えて気持ちよい。このサイトは「まばたき」の擬似モーションを見ているうちに、気づけば自分の眼球を意識するようになっているところが面白いです。

Logo&Tool Design：UMA/design farm
Web：横山 洋平（y2）

おわりです

以上で、7月のサイトまとめ、おわりです。今回も最後までご覧いただき、まことにありがとうございました。いつも温かい目でご覧いただき、編集部一同感謝しております！

これからお盆で、旅行にいかれる方、実家に帰られる方などさまざまかと思います。引き続き熱中症にはお気をつけて、水分補給をして、また次回のまとめサイトにてみなさんのお目にかかれることを願っております。

次は、8月の更新です。それでは、また。iDID Magazine編集部でした！

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

#このデザインが好き

7,224件

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