計算・変換・診断・あそび
作品が主役、文字は最小。動きで語るポートフォリオ
既定: 動Design studio — Tokyo, Kuramae
Design for IDENTITY
アイデンティティ、モーション、ウェブ、空間。媒体を分けず、ひとつのかたちを動かしながら設計します。
クリックで詳細
自主制作と試作
ARAI Studio は、東京・蔵前の3人のデザインスタジオです。アイデンティティから空間まで、媒体を分けずにひとつのかたちを設計します。動きは飾りではなく、かたちの一部として扱います。
話しましょう。
新しい仕事、講演、協働のご相談。返信は3営業日以内に。
番号は「解説を重ねる」で画面に出る番号と同じ。各カードの見本はそのまま触れます。
現在地ハイライトScrollspy
どこで ヘッダーのナビ
1ページ完結なので、いま作品一覧のどこにいるかをナビの現在地で示す。aria-current も同期する
図鑑で見る（仕様書・コード）→縮小ヘッダーShrinking Sticky Header
どこで スクロール後のヘッダー
ヒーロー上では透明で作品を邪魔せず、作品一覧に入ったら薄い黒帯に縮んで常に戻れる道を残す
図鑑で見る（仕様書・コード）→下線スライドリンクAnimated Underline Link
どこで ナビとSNSのリンク
下線を常時出すと黒地に線が増えるので、ホバーとフォーカスのときだけ左から伸ばす
図鑑で見る（仕様書・コード）→見出し→本文→CTA の順出しSequential Entrance
どこで ヒーローの順出し
肩書き→名前→分野の語→一言→ボタンの順に80msずつ遅らせて出し、読む順と現れる順を揃える
図鑑で見る（仕様書・コード）→文字スクランブルText Scramble
どこで ヒーローの分野の語
IDENTITY／MOTION／WEB／SPACEを解読風に確定させ、スタジオが動きを扱うことを文字自身で見せる
図鑑で見る（仕様書・コード）→マグネティックボタンMagnetic Button
どこで ヒーローとContactの主ボタン
各画面にひとつしかない主ボタンだけがカーソルに吸い付く。触れる前に反応する導線にする
図鑑で見る（仕様書・コード）→カスタムカーソル追従Custom Cursor
どこで ページ全体のカーソル
黒地の没入感を保つため標準カーソルを消し、白い点と遅れて追う輪で作品の上を指す
図鑑で見る（仕様書・コード）→ロゴマーキーLogo Marquee
どこで ヒーロー直下の帯
分野名を流す一本の帯でヒーローと作品一覧を区切る。5秒以上動くので停止ボタンを常設
図鑑で見る（仕様書・コード）→スタッガー出現Staggered Reveal
どこで Selectedの4枚の出現
代表作4件が90msずつ遅れて浮かぶ。一斉に出すと壁になり、順に出すと一枚ずつ見てもらえる
図鑑で見る（仕様書・コード）→3Dチルトカード3D Tilt Card
どこで Selectedのカード
作品面がカーソルに応じて8〜10°傾き、平面の面に厚みが出る。文字は面の外に置いて歪ませない
図鑑で見る（仕様書・コード）→画像ズーム＋タイトルImage Zoom on Hover
どこで カードのホバー
面がゆっくり拡大し「View」の札が浮く。クリックできることを、文字を増やさずに伝える
図鑑で見る（仕様書・コード）→モーダルModal Dialog
どこで 作品の詳細
1ページ構成を崩さず作品の説明・クライアント・役割を読める。前後の作品へ送れる
図鑑で見る（仕様書・コード）→作品リストがインターフェースWork Index List
どこで Explorationsの一覧
自主制作は年・題・種別の一行で薄く並べ、ホバーで見本を行に追従させる。装飾を足さない
図鑑で見る（仕様書・コード）→スクロール速度スキューScroll Velocity Skew
どこで Explorationsのスクロール
勢いよく送ると一覧がわずかに傾き、止まると戻る。速度を物理量として見せる遊びを一箇所だけ
図鑑で見る（仕様書・コード）→横スクロールギャラリーHorizontal Scroll Gallery
どこで Aboutの分野カード
5つの分野を縦に積むと文章が増えるので、横に送るカードにしてスナップで一枚ずつ止める
図鑑で見る（仕様書・コード）→見た目を真似た先ではなく、型の使われ方を観察した先。コード・写真・文章は転載していません。
ポートフォリオの3秒は「どんな作品を作る人か」で決まるので、ヒーローに置いたのはスタジオ名と分野の語と主ボタンだけにし、肩書きも実績数も受賞歴も置かなかった。その代わり作品の面を大きくし、代表作4件は2列で1枚ずつ画面幅の半分を占める。見出しは13pxの英字に縮め、本文は灰にして面より前に出ないようにした。文字が最小でも成立するのは、面そのものに白と灰の構成があり、赤が一箇所ずつ視線を置く場所を作っているから。写真が使えない条件でも、面・線・一文字だけで作品らしく見えることを確かめた。
「動」の既定でも動かし続ける要素は帯のマーキー1本だけにし、それにも停止ボタンを付けた。残りは三種類。一回きりの演出（ヒーローの順出しと線が描かれる作品）、応答（吸い付くボタン・傾くカード・追いかけるカーソル）、スクロール連動（現在地のナビと一覧の傾き）。連動は2箇所に留め、傾きも最大6°に抑えた。「静」に切り替えるとこれらは全部消えるが、一覧・カード・モーダルはそのまま使えるので、作品集として欠けるものはない。動きが無いと意味が通らない構成を避けたのは、reduced-motion の端末では最初から静で出るため。
全作品を同じカードで並べると、代表作も試作も同じ重さに見えて、どれを見てほしいか伝わらない。代表作4件は面を大きく、題と種別と年を添えて厚く見せ、自主制作8件は年・題・種別の一行リストで薄く並べた。リストはホバーで見本が行に追従して浮かぶので、薄くても作品の顔は見える。どちらもクリックすれば同じモーダルが開き、前後の作品へ送れるようにして、二段の密度差が導線の分断にならないようにした。Contactは「話しましょう。」の一言とメールアドレスのボタンだけで、フォームは置いていない。
見本の写真は商用利用できるライセンス（CC0・パブリックドメイン・CC BY）の作品です。リサイズと WebP への変換を施しています。 店名・価格・文章は架空で、写真の作者とは関係ありません。
