Kamada.S
その他

社内勉強会 26/3 〜新しいメガネ編〜

2026.03.28
この記事は約9分で読めます。

今年度がラストスパートに入りました。

一方私はというと、メガネを破損しました。

今って45分くらいで新しいメガネが出来上がるんですね。

すっげ〜〜〜〜。

来月は新卒LTスペシャルになるかもしれません。

乞うご期待！

今回の発表内容

今回、前半の録画がありません…

ごめんなさい

今月は元から発表者が少なかったので、文量もさっぱりです。

追記：録画がない分、資料をくれました

最近あった嫌なUX

発表者：N.Aさん

※録画できていませんでしたが後から資料をもらって書きました。本来の意図とは異なる解釈があるかもしれません。

CASE1：マクドナルドの無人レジ

マクドナルドに行って無人レジで注文しようとしたら、あることに気が付きました。
なんと、一覧に値段が表記されていないんです。

使用者としては値段を確認せずに決めるのは怖いです。
値段を確認するためにアプリを開いたり、一旦値段が確認できるところまで進めたりすると時間がかかります。
他のお客さんが待っていると焦ってしまうのでプロセスを増やさないで欲しいという気持ちもあります。

企業側としては、値段よりもメニューそのものに注目してほしいという目論見があるのかもしれません。
視覚を優先させ、「食べたい」 という感情を先に確定させることで客単価を上げる狙いもあるのでしょう。

CASE2：行政のWebサイト

資格の情報を確認しようとして行政のWebサイトを閲覧したら、あることに気づきました。
なんと、一面が文字だらけでとても読みづらいんです。

すべて文字で記載されていると、どこになんの情報があるか直感的にわかりません。
また、添付されているファイルがほとんどPDFで、結局文字情報だらけです。
全体的にデザインが古く、視線がうまく進みません。

運営側としては、契約書のように参照先としての役割があり、正確性と網羅性を第一としていると考えられます。
また、あらゆる環境で利用できるよう、 あえて簡素な設計にされているとも考えられます。

CASE3：サツドラの決済

サツドラで買い物をしているとき、あることに気づきました。
なんと、支払いのときのアプリの画面切り替えがとても多いのです。

従来の決済サービスでは決済完了までの手順が少なかったのですが、手順が増えてしまい支払いにかかる時間が増えてしまいました。

企業側としてはチャージと決済の誤操作を防いだり、データマーケティングに活用したりする目的があるのかもしれません。

ITエンジニアに求められる4つのUX視点

ITエンジニアはUXに関して関心を持つべきだと思います。
まとめると以下の4つの点に注目すべきです。

  1. 「システムロジック」より「メンタルモデル」
    システムの処理を整えることに注力しすぎると、ユーザーが利用しているときに受ける印象や感情の遷移に対しておろそかになってしまいます。
  2. 「情報の網羅」より「情報の優先順位」
    理論上、すべての情報を掲載すれば知ることは可能ですが、情報を知る順位を適切に整えなければ文字を見ただけで情報を理解することはできません。
  3. 「不確実性」に対する「心理的安全性」の提供
    何かビジネス的な効果を狙った仕組みがユーザーにとっての不確実性を生んでしまうことがあります。
  4. 「ビジネス目標」と「ユーザー利益」の翻訳者
    システムはビジネス的な目標を達成するためにも存在していますが、ビジネス的な目標はユーザーの利益を実現しないと達成できません。

単に要求された機能を実現する力を持つだけではよいエンジニアにはなり得ないと思います。
ユーザーに対してもシステムに対してもフレンドリーな「価値のある最高のUX」を作ることができる、技術という名の翻訳力を持ってこそよいエンジニアとなれると考えます。

ReactNative+VoltraでAndroidのWidgetを作ってみたかった

発表者：Kamada.S

個人的に欲しいアプリを作るのにAndroid Widgetを作る必要があるのですが、ReactNativeで作れるライブラリがあったので試しに触ってみます。

Voltraについて

VoltraはReactNativeでNative Moduleを組み込んだアプリを作る際に、React ComponentでNative Moduleの構築を可能にするライブラリです。

Voltra
Build Live Activities with JSX in React Native.
use-voltra.dev

主にiOSのDynamic IslandやLive Activitiesを構築できます。
Androidへの対応は現在実験的なものです。

Examples

公式サイトに載っているサンプルを入れてみます。
以下はサンプルコードです。

import { VoltraAndroid } from 'voltra'

const MyWidget = () => (
  <VoltraAndroid.Column
    style={{
      padding: 16,
      backgroundColor: '#3DDC84',
      width: '100%',
      height: '100%'
    }}
    verticalAlignment="center-vertically"
    horizontalAlignment="center-horizontally"
  >
    <VoltraAndroid.Text
      style={{
        color: 'white',
        fontSize: 18,
        fontWeight: 'bold'
      }}
    >
      Android Widget
    </VoltraAndroid.Text>
    <VoltraAndroid.Text
      style={{
        color: 'white'
      }}
    >
      Powered by Voltra & Glance
    </VoltraAndroid.Text>
  </VoltraAndroid.Column>
)

Expoのデバッグ環境であるExpo GoではWidgetが表示できないので、VoltraWidgetPreviewを使って画面に表示させます。

import { VoltraAndroid } from 'voltra/android'
import { VoltraWidgetPreview } from 'voltra/android/client'

export function MyWidgetPreview() {
  return (
    <VoltraWidgetPreview
      family="mediumWide"
      style={{ backgroundColor: '#f0f0f0', borderRadius: 16 }}
    >
      <VoltraAndroid.Column style={{ padding: 16 }}>
        <VoltraAndroid.Text style={{ fontSize: 20, fontWeight: 'bold' }}>
          My Awesome Widget
        </VoltraAndroid.Text>
        <VoltraAndroid.Text>
          This is how it looks on the home screen!
        </VoltraAndroid.Text>
      </VoltraAndroid.Column>
    </VoltraWidgetPreview>
  )
}

次にapp.jsonでコンポーネントをWidgetとして登録します。

{
  "expo": {
    "plugins": [
      [
        "voltra",
        {
          "android": {
            "widgets": [
              {
                "id": "my_widget",
                "name": "My First Widget",
                "description": "A simple Voltra widget"
              }
            ]
          }
        }
      ]
    ]
  }
}

次にandroid向けにPrebuildを行ってNative Moduleを生成します。

npx expo prebuild --platform android

実行すると画面にWidgetと同じコンポーネントが表示されるはずです。

npx expo run:android

しかし…

試したものの、エラーが出てしまい消しきれませんでした。
ちょっと時間が足りませんでしたね。
取り掛かるのが遅かったのが原因です。

そもそもVoltra自体が新しいライブラリなので、まだエラー解決方法がすぐに出てきてくれません。

来月こそはサンプルを持ってきます。

「Geminiにさよなら」して「Claudeにこんにちは」した話

発表者：iwasaki_tさん

最近AIを使って開発をしている中で、サービスを変えてみて良かった話をします。

「Geminiにさよなら」した理由

最近、開発にGeminiを使うのをやめました。
理由としては以下の通りです。

  • 最近コーディング方面の調子が悪い：AI Proプランに加入してAntigravityを利用していましたが、利用モデルをGeminiからClaudeにしてみたところかなり感触が良かったです。
  • Antigravityの制限がキツくなった：理由はわかりませんが、Antigravity上でClaudeの使用制限が頻繁に発生しました。数日後に解消されたようですが、利用していくうえで不安材料と言わざるを得ません。

「Claudeにこんにちは」した理由

Claudeを使い始めたのは以下の通りです。

  • チャットもコーディングもイケイケ：Claudeは評判がいいですよね。MCPの設計思想と相性が良く、CLAUDE.mdやskillsと相性がよいです。読み込みや書き込みの権限管理もできて便利です。今まで使った中で一番人間フレンドリーだと感じます。
  • 設計から順を追う開発スタイルがいい：予め作った設計書ファイルに従って作ってくれるので、途中で方向修正をしたりする手間やトークンを省けてとても楽です。
  • マスコットキャラクターが可愛い：詳細が不明なのもいいです。

AIモデルをためそう

今のところClaudeがイケイケなので皆さんにもおすすめです。

モデルの契約については個人的に月払いがおすすめです。
年間払いが最も安く済みますが、今は過渡期で来月の情勢がわからないような時期なのでいつでも切り替えられるようにしておくのがよいのかなと思います。
1年くらい使って気に入ったら年間契約してもよいんじゃないでしょうか。