目次
1. コクヨ｜好奇心を人生に
コクヨが創業120周年にともないコーポレートリブランディングを実施、サイトリニューアルをmountさんが担当されました。文具メーカーとしてのイメージがあるコクヨですが、今回のリニューアルでは「好奇心を人生に」というコクヨ初のコーポレートメッセージとともに、全体の事業を可視化。統合されたひとつの世界観を通じてコクヨのこれまでの歴史、全体像、未来が分かるサイトになっています。
まさに世界観の表現である特設サイトでは一冊のキャンパスノートが3Dアニメーションで「飛び出す絵本」のように展開。ドラッグすることで「ノート」と「豊かな世界」というリンク付けを損なうことなく「好奇心を人生に」をビジュアルで表現しています。
興味深かったのがトップでのコーポレートメッセージやCI/VIの開発ストーリーと並列に「キャンパスについて」というコンテンツがあり、この「キャンパスノート」という「ミクロな世界」とコクヨの未来としての「マクロな世界」が並列にかつ地続きに存在しているところ。「好奇心とはちょっとしたころから始まる。その出発点にノートがある」ということに何よりも好奇心を触発されました。
もうひとつ注目したいのが「コクヨを知る」において、いわゆる「企業情報」を「エモーショナル」に再編集しているところです。各種コンテンツも、テンプレート化されることなく、それぞれの領域らしさに重点をおいたビジュアル表現なところにも驚きます。でも、そんなところにこそ好奇心やワクワクが内包されているんですよね。
コクヨという会社を知る手段を「情報」だけではなく「体験性」に重きを置いているんですよね。かといって体験だけに終始しているわけではない、このバランス感。このサイトのあり方にはひとつの可能性を感じさせられる、コクヨのウェブサイトリニューアルでした。アクセシビリティ面でトルクさんが、韓国のクリエイティブエージェンシーDFYさんがデザインで関わっていることにも注目です。
【KOKUYO Vol.1】イメージを刷新し、コクヨの真価を宿す。複雑な大組織を「人への想い」で繋いだサイト制作
Client：コクヨ株式会社
Executive Creative Direction：イム ジョンホ（mount inc.）
Creative Direction, Art Direction, Planning, Design：米道 昌弘（mount inc.）
@masalive
Technical Direction, Development：梅津 岳城（mount inc.）
Edit, Information Architect：堀江 由利子（mount inc.）
Produce：吉田 耕（mount inc.）
Project Management, Information Architect：楠本 莉沙（mount inc.）
special thanks：岡部 健二（mount inc.）、山下 亜加里（mount inc.）、ハン ユジュン（mount inc.）
Development：小林 信次（まぼろし）、大出 直樹（ファクトリアル）
Project Management / Planning：ハン・ジュホ（DFY）、ソク・ミス（DFY）
Design：イ・ウンビ（DFY）、キム・ヒョンモ（DFY）、
ユン・アミ（DFY）、キム・ソヨン（DFY）
Development： キム・チョルジュン（DFY）、オ・ハヌル（DFY）、
イ・ジンジェ（DFY）、ペク・ミンギョン（DFY）、キム・ジェリム（DFY）
Accessibility Supervision：
堀江 哲郎（Torque inc.） 、阪口 卓也（Torque inc.） 、小島 準矢（Torque inc.） 、上瀧 悠平（Torque inc.） 、本田 一幸（Torque inc.）
Illustration（History）：小林 千秋
Copy Writing（corporate site, special site）：小藥 元
Photography_Produce：有馬 知良（JXL）、市川 悠（JXL）
Photography：福岡 秀敏、中村 実琴、堀 陽真
Hair makeup：加古 高規、亀島 チカ、迫田 美沙希、笹原 彩珠夏
Interior Styling：酒井 翼、牧野 梨沙
Photography（interview）：小山 奈那子
Photography（products）：タカハシ トミユキ
assistant：瀧川 やよい、佐藤 萌、鎌田 采花、高橋 識如
SPECIAL SITE＿
CG animation MORIE Inc.
Illustration：髙橋 あゆみ
Music：有村 崚
Copy Writing：小山 佳奈（株式会社 上田家）
Translation シルバ・リリア（LATINA FORTIS）
MAGAZINE＿
Direction / Planning ：伊藤 総研
Edit, Planning：山﨑 若菜 (itskn) 、森木 友香 (itskn)
Produce, Project Management：山田 理沙 (itskn)、天本 季恵 (itskn)
Writing：船橋 麻貴、大芦 実穂
Photography：井上 昌明、浦 将志、嶋崎 征弘、柿崎 豪
Interior Styling：竹内 優介
Design ：井出 裕太（mount inc.）@YutaIdemsd1
Design, Information Architect：タイ トウオン（mount inc.）@tai_t_
Design Assistant：劉 逸葳（mount inc.）
Development：寺田 奈々（mount inc.）、須多 望（mount inc.） @soundmuta
Project Management：津留 正和（ingraft）
2. 土とデジタル – Biophilic Studio
バイオフィリックスタジオ「土とデジタル」のコーポレートサイト。自然とテクノロジーなど「一見相反するものを相互補完するものと捉える」ことをテーマとしているそうで、MVは「自然的モチーフ」を「デジタル」で再現したビジュアルになっています。面白いのはこの極めて「自然に近い動き」をデジタルで捉え直すことで、なんとも言い難い独特な郷愁感にかられるところです。デジタルの中に存在する情緒。このあたり、土とデジタルが考えていることとつながっていそうですね。ヘッダー部の「自然」にまつわる詩人、作家、哲学者の言葉や、ホバーアクションで変容するロゴも面白い。
また、もうひとつ驚愕なのは「土語」なるフォントを50音を開発しているところです！BIOモードをONにするとサイト内のひらがなが「土語」に変化するのですが、この文字の絶妙な”読めなさ”が面白い。まるで「自然とは分かりやすく整頓されたものではない」と言われているかのようで興味深いですし、これこそまさに自然とデジタルのあわいの追求ですよね。
Client：土とデジタル
Direction, Design：Yuka Kanno @yukalqqqozlz
Development：Tomoyuki Nakata @yukiloz7
3. 人生に「キク」ラジオ – 日暮里ゼミナール
「発見」をテーマに作られた日暮里ゼミナールのサイト。自由に設計された、ワクワクするようなデザインで、まるで頭の体操をしているような快楽性のあるサイトですね。HIGHLIGHTのエリアで、マウスストーカーで現れるラジオの内容に関連するモチーフや、カルタみたいに積まれた過去アーカイブが動かせるところも発見していく楽しさですね。
また、驚くべきは画面上を浮遊する”EXPLORE”をクリックするとサイトの様相が一変するところ。それだけではなく、コンテンツもドラスティックに変化します。まるで秘密の「裏面」を探っていくような喜びがありますね。あらゆる遊び心がすべて「逸れても道はある」につながっていて、そこから日暮里ゼミナールの哲学が滲み出てくる、そんなサイトでした。
Creative Direction : Kota Futamura @LammTokyo
Art Direction & Design: Shun Kudo
Development：Sora Shimada @sora1406
4. GYOKURO STUDIO
「ミニマルなリズム」が印象的なGYOKUROのサイト。マウスオンしないと表示されないロゴが印象的で、ロゴの「かたち」がアイデンティティのひとつであることが示唆されているのかもしれません。このロゴをはじめ、やや無秩序な「配置のズレ」をモチーフとし、それらがサイト全体に音楽的なリズムをつくっているように思いました（音楽的といえばこのサイト、中野さんのデザインじゃないですか！）。
MVにおいて右から左にデジタルに動く緑のテキストモーションや、”What Is GYOKURO”の文字をホバーすると出るGIFアニメーションも、大々的に使うのではなく、小さく扱うことでミニマルな面白さを生み出しています。余計なモーションを使わないニュースエリアなどの「押し」と「引き」のバランスにもデザインの肝があるように思いました。
WORK詳細のサムネイルUIや、クレジットの入れ方ひとつとっても、ひとつひとつにアイディアと実験的精神がありながら、デザインの繊細さも持ち合わせているところにワクワクしてしまうサイトでした。
Creative Direction & Web Design: Hiroaki Nakano（@HiroakiNakano）
Art Direction & Design: Takumi Saito（@takumi_3110）
Logo Motion: Toshiki Okamoto（@TSKOKMT）
Sound design: Shuta Hasunuma（@Shuta_Hasunuma）
Photo/Video : Rintaro Kanemoto（@torintaro）
Web Front-End Developer: Keita Yamada（@P5_keita）
5. FRONT FLIP PORTFOLIO
全体を覆う赤の鮮烈さが目を惹く、Hironao Tsukakiさんのポートフォリオサイト（VER.02）。ビジュアルは前回から大きく変化しましたが、隅々までとことん尖りきっているところは変わっておらず、このサイトそのものがポートフォリオとして成立していますね。
このサイトは赤を背景に、ほとんど「文字」と「モーション」で表現されており、ポイントはすべての情報をそれぞれ「どのタイミングで」「効果的に伝えていくか」に重きが置かれているところ。一見サイトのインパクトが目を惹くかもしれませんが、ここにTsukakiさんのストイックで挑戦的なところが現れているのではないかと思います。
制作：Hironao Tsukaki
6. RYDEN
モノクロ＋ネオンイエローのコントラストが印象的な、RYDENさんのサイト。このネオンイエローのアクセントカラーが、サイトの中を「閃光」や「雷」のように駆け抜けていくような表現になっている。これがサイト全体のトーンを印象づけていますね！そのネオンイエローにポジ・ネガ的な役割を持たせた企業スローガンや、CONTACTの天から何かが落ちていくような表現。ネオンイエロー表現のひとつひとつがRYDEN的で、決して主軸ではない「アクセントカラー」や「モーション」でアイデンティティを表現している（ように見える）ところに驚きます。
また、コンテンツとして興味深いのが、”OUR VISION IN ART”。なんと、ライデンの哲学やビジネスへの姿勢をデザイナーがアートを通じて表現するというもので、コンテンツアイディアも秀逸。それぞれのアイディアもすごいですが、そのアイディアが、デザインとして鮮やかに落とし込まれているところ、匠の技です。
Producer：井上雄一郎（RYDEN）
Art Director / Designer：岡野真也（RYDEN）
Designer：松野寛太（RYDEN）
Frontend Developer：三井ソウ（元gaz Inc.）
Photographer： 中田 昌志
Hair & Make：上地 可紗
7. iro Inc.
130枚のモニター画面がグリッド状に、大型ビジョンのように並んだ大画面。これらを「単位を自由に増減できるキャンバス」として最大限に表現しているのがiro incのコーポレートサイトです。この都度都度切り替わる自由な表現に驚かされますね。
トップでは実績をランダム表示し、表示ごとにキーカラーを変えていくことで「iro＝色＝いろいろ」であることを示唆。この大型ビジョン的インターフェースは全ページで統一されており、一覧画面、詳細画面など各種ページそれぞれで、グリッドを活かした独自表現になっていて、どのページにいっても自由なキャンバス表現を楽しめるサイトですね。
制作：STAND FOUNDATION co.,ltd.
8. 清水建設株式会社｜採用特設サイト
本棚のインターフェースが目を引く清水建設の採用サイト。「こう働きたい」「こういう仕事がしたい」など、仕事をするにあたっての「想い」から清水建設のビジョン、仕事、制度などを知ることができる構成になっており、その仕組みを「本棚」としてインターフェース化。清水建設という一見「お堅く」感じられてしまう会社を「人の想い」ベースで分解し、「本棚」という親しみやすいインターフェースに落とし込んだアイディアが秀逸で、それは「シミズは、意外とあなたに近い？」というサイトコンセプトにも直結していますね。
また、このサイトで面白いと思ったのが「想い」を本として棚に並べた時に、シンプルでストレートに「気持ちがポジティブになる」ところなんですよね。アクセスするユーザーの気持ちをシンプルに高めながら、コンテンツを見ていけるようになっているところも、人の想いを丁寧に汲みとるspicatoさんならではのサイトと言えるのではないでしょうか。
Agency / 株式会社ワークス・ジャパン
Art Director, Designer / 細尾正行 @MasayukiHosoo
Front-end Developer / 金山裕紀 @spicato_kana
9. 「解体を主張する」｜渋谷PARCO
KVの動画をずっと見ていられる渋谷パルコ「解体を主張する」特設サイト。セメントを塗り重ねていくような、豪快だけど繊細な手触りのKV＆アニメーションが印象的です。創業者の増田通二さんの言葉「解体を主張する」というメッセージを再解釈した、2019年の開業以来初の大型リニューアルだそうです。面白いのは、大型リニューアルを「解体を主張する」に価値観を転換している（価値観をもとにしたリニューアルなのかもしれませんが）ところで、そこがパルコの面白さであり、そのコンセプトを「セメント表現」にすることで、「解体」という言葉だけではない「重み」やリアリティを感じさせてくれるところにも惹きつけられました。
Graphic Design：Tezzo SUZUKI
Movie：Taihei Takei
Web Design & Development：maam.inc
Produced by PARCO, RCKT/Rocket Company*
10. 福永あずさウェブサイト 踊
10月に話題になったサイトのひとつ、福永あずささんのポートフォリオサイト。2023年公開のサイトだと思うのですが、Xのひとつのポストにより、すさまじい勢いで広まっていったサイトですね。トレンドの移り変わりが激しいウェブの世界ですが、2年経った今でもこのように話題になるということは、このサイトには技術だけではない何かがある、ということではないでしょうか。「踊る」がコンセプトになっており、福永さんの書き留めてきた言葉の数々が踊るように、または湯気のように揺れています。横スクロールでパンフレットを見ていくような感じもいいし、福永さんの「サイト」というよりは福永さんの「お店」にやってきたような感覚があって、そこが面白いと感じたサイトでした。
クライアント：福永あずさ
制作：モンブラン
ディレクション：竹田京司
コピーライティング・文章編集：福永あずさ
イラスト制作：アプアロット
WEBデザイン：亀山真櫻
サイト構築・CMS構築：松髙泰市
おわりです！
2025年10月のまとめサイト、いかがでしたでしょうか。今月も、どのサイトも面白かったですね！
今回のサイトの中でいくつか印象的だったものをピックアップしてみますと、
「企業情報」をエモーショナルに再編集することで、好奇心とワクワクを体感させた「コクヨコーポレート」。土語をはじめ自然とデジタルのあわいを追求した「土とデジタル」。ある要素をクリックすることサイトの様相が一変する「日暮里ゼミナール」。アイディアと実験精神と繊細なデザインが合致した「GYOKURO STUDIO」。「アクセントカラー」や「モーション」でアイデンティティを表現している「RYDENコーポレートサイト」。などが印象に残りました。みなさんはどうでしたか？
今回も最後までお読みいただき、ありがとうございました！
また、来月お目にかかりましょう。もうすぐ楽しい年末ですよ！
iDIDメディア編集部でした！
