けんじ

ゲーム会社のUX Designer / デザインからフロントエンドまで守備範囲広め。ボ…

けんじ

ゲーム会社のUX Designer / デザインからフロントエンドまで守備範囲広め。ボーダーコリーのベルがいます。

  • ゲームから学ぶUI/UX

    私の大好きな「ゲーム」から、Webデザインにも通じるUI/UXの学びを得ようというコンセプトで、ゲームの紹介をしつつ、その特徴のあるUI/UXについて語ります。

  • Adobe MAX 2019参加レポート

    2019年11月3日から3日間、ロサンゼルスで行われたAdobe MAX 2019に参加したときのレポートです。

世界一わかりやすいデザイントークンの話

UXデザイナーのけんじです。 「デザインシステム」という言葉も大分一般的に浸透してきましたが、近年では「デザイントークン」という言葉もよく耳にするようになってきたのではないでしょうか。 デザインシステムやデザイントークンの概念は、中規模以上のプロジェクト、特に一つのブランドを継続的にアップデートしていくような場合に、そのデザイン原則をより強固なものにするために、必要になってくるものと言えます。 とはいえ、「デザイントークン」という言葉は知っていても、実はよく理解できてい

けんじ

    • インタラクション型プロトタイピングツール「Origami Studio」を学ぶ 第1回

      インタラクション型プロトタイピングとはインタラクション型プロトタイピングは、アプリケーションやWebコンテンツの実装前工程において、ユーザーの行動に対する動的な反応（インタラクション）を、より実装イメージに近い状態で再現し、検証する手法です。 この記事では、インタラクション型プロトタイピングが行えるツールとして、「Origami Studio」の機能や使い方を、不定期連載形式で紹介していきたいと思います。第1回目は、Origami Studioと他のプロトタイピングツールと

      けんじ

      • 「ACE COMBAT 7: SKIES UNKNOWN」と「TOP GUN: Maverick」に学ぶ、ユーザーファーストなコラボレーション手法

        この記事は、クリエイティブコミュニティDISTが主催するイベント「ゲームから学ぶUI/UX Ⅴ Revenge」で、発表した内容になります。 はじめに最初に、今からお話しすることは、著者が特定のゲームをプレイして、１ゲームユーザーとして個人的に感じたことであり、著者の所属や肩書きとは一切関係はありません。 さて、ゲームというジャンルに限りませんが、エンタメ系のコンテンツでは、異なる立場、異なる商標などを用いた共同成果物（コラボレーション）がしばしば作り出されることがありま

        けんじ

        • Lottieアニメーションについて深堀りしてみる

          Adobe XDがアップデートして、Lottieアニメーションの再生をサポートするようになりました。 実はLottieアニメーション自体は結構昔から存在しているのですが、プロトタイピングやデザインツールとして（特に日本で）多く利用されているAdobe XDでサポートされたことにより、Lottieが再注目されているようなので、Lottieアニメーションの作り方から実装方法までを深掘りしてみたいと思います。 Lottieアニメーションとは？Lottieは、2017年にAirb

          300
          けんじ

        世界一わかりやすいデザイントークンの話

        けんじ

        • インタラクション型プロトタイピングツール「Origami Studio」を学ぶ 第1回

          けんじ

        • 「ACE COMBAT 7: SKIES UNKNOWN」と「TOP GUN: Maverick」に学ぶ、ユーザーファーストなコラボレーション手法

          けんじ

        • Lottieアニメーションについて深堀りしてみる

          けんじ

        マガジン

        • ゲームから学ぶUI/UX
          5本
        • Adobe MAX 2019参加レポート
          6本

        記事

          ゲームする人としない人がディスカッションしてみた（後編）

          ゲームする人はなんでするんだろう？しない人はなんでしないんだろう？ そこそこ歴史はあっても未だに理解しにくい（されにくい）ゲームというものについて、異なる立場の方々を集めてディスカッションしてみたら学びしかなかったので、まとめてみた後編です。 前編はこちら。 参加者 ・B1さん：ゲームする度1 （まったくしない） ・@ミケさん：ゲームする度2 （ゲームは好きだけど下手） ・@Okudaさん：ゲームする度2 （年間で総プレイ時間1日程度） ・M3さん：ゲームする度3

          けんじ

          ゲームする人としない人がディスカッションしてみた（後編）

          けんじ

          ゲームする人としない人がディスカッションしてみた（前編）

          ゲーム好き同士で集まってワイワイ話すことはあっても、ゲームをしない人とゲーム好きな人がゲームについて話すことは、あまりないんじゃないかと思います。 ゲームする人はなんでするんだろう？しない人はなんでしないんだろう？ そこそこ歴史はあっても未だに理解しにくい（されにくい）ゲームというものについて、異なる立場の方々を集めてディスカッションしてみたら学びしかなかったので、まとめてみました。 参加者・B1さん：ゲームする度1 （まったくしない） ・@ミケさん：ゲームする度2 （

          けんじ

          ゲームする人としない人がディスカッションしてみた（前編）

          けんじ

          「Fall Guys: Ultimate Knockout」に学ぶ、モチベーションを保つユニバーサルデザイン

          「ゲームから学ぶUI/UX」シリーズ第4回目でご紹介するタイトルは「Fall Guys: Ultimate Knockout」以下「Fall Guys」です。 僕がこのゲームをプレイして感じた、ユーザーがモチベーションを保ちながらゲームを繰り返し楽しめる手法を紹介しつつ、離脱させないWebコンテンツ作りのヒントを探っていきたいと思います。 （DIST.34「ゲームから学ぶUI/UX Ⅳ」にて発表した内容です） 「Fall Guys: Ultimate Knockout」

          けんじ

          「Fall Guys: Ultimate Knockout」に学ぶ、モチベーションを保つユニバーサルデザイン

          けんじ

          「アイアンマンVR」に学ぶ、現実（リアル）と非現実（アンリアル）の間のUX

          ゲームから学ぶUI/UXシリーズ第3回は、PlayStation VR専用ゲームタイトル「MARVEL アイアンマンVR」をプレイして感じた「リアルなUXとは何か？」という学びをお伝えしたいと思います。 （先日開催されたUX JAM Online 05にて発表した内容です） ちなみにすべて、個人の感想です。 「アイアンマンVR」についてアイアンマンはアメリカンコミックMARVELのキャラクターで、近年ではロバート・ダウニー・Jr主演の単独映画作品やアベンジャーズシリーズで

          けんじ

          「アイアンマンVR」に学ぶ、現実（リアル）と非現実（アンリアル）の間のUX

          けんじ

          Stay@home: 子供と一緒にゲームを楽しもう！おすすめPS4タイトル

          家族や子供と家で楽しめる、ちょっとマニアックだけどおすすめなPS4ゲームタイトル（他機種版もある場合あり）を紹介します。 はじめにこの記事の主旨は、子供たちと「一緒に」ゲームを楽しむことです。文字通り複数人でのマルチプレイができるタイトルを中心に紹介していますが、もちろん１人用でも順番に遊ぶことで楽しめるタイトルもあります。 各ゲームタイトルは、対象年齢（CERO）が決められています。全年齢対象（CERO A）のゲームも含めて、子供たちだけに渡して遊ばせるのではなく、必ず保

          けんじ

          Stay@home: 子供と一緒にゲームを楽しもう！おすすめPS4タイトル

          けんじ

          ガイドラインとデザインシステム：後編

          おさらいWeb制作において指針となる重要な要素でありながら、なかなかチーム内でも浸透させにくい各種ガイドラインを、分りやすく使いやすく共有させる手法について語ります。 （前編はこちら） ガイドラインに沿ったコンテンツを作るためには、ガイドラインそのものを常に意識しながら企画／制作する、ことが本来望ましいと言えます。しかし、ガイドラインのボリュームや判りやすさによってはなかなかヘビーなタスクとなってしまうでしょう。 そこで、各種ガイドラインの主要な要素を自然に盛り込んだデザイ

          けんじ

          ガイドラインとデザインシステム：後編

          けんじ

          ガイドラインとデザインシステム：前編

          規模の大きなプロジェクトでは、一貫したブランドデザイン、スタイル、アクセシビリティを保つために、各種ガイドラインが定義されることが多いと思います。 制作や更新の際に指針となる重要な要素でありながら、なかなかチーム内でも浸透させにくいこれらのガイドラインを、分りやすく使いやすく共有させる手法を検討していきます。 この記事は、2020年2月8日に開催されたCSS Nite LP67 「All About XD (update 2020)」で発表した内容を、一部改訂したものになり

          けんじ

          ガイドラインとデザインシステム：前編

          けんじ

          Adobe MAX 2019: Adobe Aeroハンズオンラボ

          Adobe MAX 2019参加レポート vol.6 リリースされたばかりのAR作成ツール、Adobe Aeroのハンズオンラボ(ワークショップ)に参加しました。 ARとは？ アイアンマンのトニー・スタークがいつもやってるアレです。こんなのがAdobe Aeroで手軽に作れてしまうのか？ AR認識の3つのタイプ1つ目は「顔」認識。スマホの自撮り系カメラアプリでお馴染みですね。 2つ目は「世界」。位置情報などと結び付いて、固定された場所に対するAR。 みんな大好き「

          けんじ

          Adobe MAX 2019: Adobe Aeroハンズオンラボ

          けんじ

          Adobe MAX 2019: Adobe Fresco道場

          Adobe MAX 2019参加レポート vol.5 日本の黒帯イラストレーターが登壇！日本から画家の田中ラオウさん（@raoutanaka）、漫画家の鹿島初さん（@ui1059）さん、イラストレーターの和遥キナさん（@kazuharukina）さんの３名がAdobe Frescoセッションにて登壇されました！凄い！ 田中ラオウさん軽快なトークの紹介でラオウさん登場！ 自己紹介タイム。 ラオウさんはカリカチュア（似顔絵）の世界チャンピオンでもあります。 ↑2014年

          けんじ

          Adobe MAX 2019: Adobe Fresco道場

          けんじ

          Adobe MAX 2019: 写真で見るキーノート

          Adobe MAX 2019参加レポート vol.4 Adobe MAX 2019スタートついにAdobe MAX 2019初日スタート！朝7時前に会場入りしました。 デザインウォールは隙間なくびっしり。 前日に書いた白いネコの周りも超賑やかになってました。 会場の食事フロアでアメリカンな朝ご飯 を摂取したら、初日の目玉、キーノートに向かいます。 キーノート相変わらずのド派手なムービーでスタート！ 最初にInDesignの20年の歴史から紹介。僕なんかまだまだヒヨ

          けんじ

          Adobe MAX 2019: 写真で見るキーノート

          けんじ

          Adobe MAX 2019: 前日

          Adobe MAX 2019参加レポート vol.3 ロサンゼルスにやって参りました。2019年11月3日、Adobe MAX 2019の開催前日となります。 ロサンゼルスの街並み電動キックボードがとても普及していました。日本でも乗りたい！ あとビルの広告がド派手でイカす。 そして会場となるロサンゼルスコンベンションセンターに移動します。 前日レジストレーション本番に備えて、会場で前日レジストレーション（受付）をします。 当日でもできますが、めちゃ混むので前日までに終

          けんじ

          Adobe MAX 2019: 前日

          けんじ

          写真で振り返るAdobe MAX 2018

          Adobe MAX 2019参加レポート vol.2 Adobe MAX 2019が開催される直前に書いています。ここで、Adobe MAX 2018に参加したときに、特に記憶に残っていることを写真で振り返ってみます。 Photoshop on iPadの発表 Appleとがっつり組んだ、iPad版のフル機能Photoshopが発表されたことが大きかったです。ちなみに発表では2019年配信と言っていましたが、2019年11月3日現在、まだ配信されていません。Adobe

          けんじ

          写真で振り返るAdobe MAX 2018

          けんじ