USER INTERFACE — 01

Login Form
UI

Design — 木下スタジオ / 木下貴博(滋賀・琵琶湖)

感情に応答する、インターフェース

UI Design Glassmorphism Interaction Concept
木下スタジオ 制作 ログインフォーム UIデザイン:UIデザイン ログインフォーム グラスモーフィズム UXデザイン
Self — Concept Work UI Design / Interaction

— Overview

UIは画面ではなく、感情との対話だ。

ダークトーンのグラスモーフィズムを用いたログインフォームのコンセプトUI。感情状態を切り替えるトグルスイッチを中心に、ユーザーの心理状態に応じてインターフェースが変化する設計を探求した。「ログイン」という無機質な行為に、人間的な文脈を持たせる試み。

— 01   課題

認証UIの
無機質さを問い直す

ログインフォームは機能的でなければならない。しかし「機能的」と「人間的」は矛盾しない。ID・パスワード・ボタン——その三要素に縛られたUIが、なぜユーザーの感情状態を無視しているのかという問いから始まった。

ログインは儀式だ。
その瞬間をデザインする。

認証UIの定型から逸脱する理由とデザイン言語の探求

感情状態という変数をUIにどう組み込むか

グラスモーフィズムの視覚的文法をコンセプトと整合させる

— 02   設計

感情トグルを
UIの中心に据える

インターフェースの中心にトグルスイッチを配置。「今日の気分」をユーザーが選択すると、フォームの配色・タイポグラフィ・アニメーションが変化する。機能的な入力行為に感情的なコンテキストを付加し、「ログイン」を一つの小さな儀式として再定義した。

① コンセプト定義

感情×認証

感情状態を入力する行為が、ログインという儀式に意味を付加する。機能と体験の統合。

② ビジュアル言語

グラスモーフィズム

透過・ぼかし・光の屈折。現実と仮想の境界を曖昧にする視覚的文法が感情表現と共鳴する。

③ ダークトーン

光を際立たせる闇

暗い背景がグラスの透明感を最大化。集中と内省を促す環境として機能する。

④ インタラクション

変化が応答する

トグル操作に対してUIが応答する設計。静的な画面から、生きているような感覚へ。

⑤ タイポグラフィ

重さで感情を表現

感情状態に応じてウェイトが変化。文字の重さそのものが感情の重さを体現する。

— 核心

応答するUI

ユーザーがUIに合わせるのではなく、UIがユーザーに応答する。その逆転が体験を変える。

— 03   成果

機能美と感情設計の
共存を証明する

完成したコンセプトUIは、認証という極めて機能的な文脈においても感情設計が成立することを示した。Kinoshita Studioが掲げる「体験翻訳」の思想——意図した体験と届いた体験のズレを整える——を自己言及的に実装した作品。

認証UIに感情的コンテキストを持たせる設計を実証

グラスモーフィズムを装飾でなくコンセプトの表現手段として機能させた

UIデザインの思想とスキルセットを一画面で体現

— Studio

木下スタジオ(Kinoshita Studio)は、滋賀県・琵琶湖を拠点に活動するデザイナー木下貴博のスタジオです。Webデザイン・UX/UIデザイン・アートディレクション・グラフィックデザインまで、一人で設計から制作・ディレクションを一貫して担当します。
本案件は UIデザイン · インタラクション設計 の仕事です。「届けたい体験と届いている体験のズレを揃える」を核心に、地域の企業・全国のクライアントのビジョンを体験に翻訳しています。

木下スタジオのサービスを見る →

— BACK TO WORKS

UI Design 一覧 →