背景

世の中にはいわゆる「AI臭いUI」というのが存在します。
絵文字が多用されている／丸すぎる角丸／中央寄せ／過度な余白／揃っていないアイテム／問題ないが、なんか臭う・・・などなど
私が以前AIで作った「ゆめぐり帳」というスタンプラリーのWebサービスも、AI臭いUIでした。

そんな中、X（Twitter）でapple-designというskillを発見しました。

「これはいい！」と、導入しようと思い、Claudeに読み込ませました。しかし、Claude曰く「モーションについての内容しか無い」とのと。あの角丸・余白・揃えに拘るAppleの魂は入っていないようでした。
ただ、Appleの静的デザインについては「Apple Human Interface Guidelines」として一般公開されているようでした。

Apple Human Interface GuidelinesをSkill化してみた

そこで、Webで公開されているガイドラインをSkill化してみました。
「Skill化してみた」といっても全く大層なことはしておらず、「読み込んでSkillにして」と言っただけです。superpowersのwriting-skillなどを使って良い感じにMarkdownにしてくれます。
できたのがこれです。

https://gist.github.com/t2murata/d61bbf6f00367732fca25eb17a5cfa27

以下のようにすると導入できます。

mkdir -p ~/.claude/skills/apple-hig
curl -o ~/.claude/skills/apple-hig/SKILL.md \
  https://gist.githubusercontent.com/t2murata/d61bbf6f00367732fca25eb17a5cfa27/raw/SKILL.md

検証：脱・AI臭いUIチャレンジ

「これで、本当にステキなUIを出せるのか？」と思い、ちょうど「AI臭いUI」のサービスがあったので（泣）、UIを書き直してみました。

before	after

どうですかね・・・なんとも言えない・・・ちょっとAppleっぽくなった気もする・・・

※本番環境の「マイページ」から「新しいUIを試す」で、新旧比較できます。

できたこと/できなかったこと

個人的には「最低限マシになった」と思います。実測で計測してくれたため、等間隔じゃない部分などが修正されました。また、角丸もAppleっぽくなりました。
ただ、まだAI臭は完全に抜けていません、「20分浸け置き洗い」といった感じです。

AIに振り返らせたら以下のような回答でした。

できたこと

Appleの公式デザインルールに沿った修正ができた（多分）
- 指示を受けたあと、「画面下のメニューバーに操作ボタンを混ぜない」というルール通りに正しく実装できた。
担当した9画面のデザイン変更は、ほぼ一発でレビューを通過した
- 9画面中5画面は修正の指摘がゼロで、残り4画面もごく軽微な直すだけで合格できた。
画面の微妙なズレを、人間に言われる前にツールで発見して直した
- 4つのボタンの間隔がズレているのを、人間の指摘より先に自動テストツール（Playwright）で実測して自力で見つけ、修正した。
修正作業で発生した「文字の折り返し問題」も、先回りして解決した
- ボタン間隔を直した副作用でラベルの文字が2行になってしまう不具合も、人間に言われる前に自力で検知して直した。
「見た目の勘ではなく、実測してから完了報告する」というルールを徹底できた
- 画面上の位置データ（座標）をきちんと計測してから「完了しました」と報告する手順を、最後まで守り抜いた。

できなかったこと

マニュアルにある基本ルールを見落とし、人間から聞かれて初めて気づいた
- メニューのアイコンに絵文字を使うのはNGというルールが書いてあったのに、確認されて初めて気づいた。
目視で勝手に勘違いし、測定結果の評価を間違えた
- 浮き上がるボタンの高さを自分の目で見ただけで「28.6%も浮いている」と判断したが、実際に測ると19.6%で問題ない数値だった。
新デザインで重要な機能を付け忘れ、人間の最終チェックで発覚した
- マイページにあった「公開URLをコピーする機能」を新デザインに移し忘れていた。何度もチェックをスルーしてしまい、人間が指摘して初めて抜け漏れに気づいた。
実機で触ったときの違和感に気づけず、的外れな修正をしてしまった
- カードデザインの枠線がつながって見える問題は、人間が実機で操作するまで気づけなかった。しかも最初は「タップ時に変な線が出る」と原因を誤診し、全く関係のない修正をしてしまった。
サーバー側のエラーを、自分のプログラムの不具合と混同しそうになった
- 「AWSの権限エラー」や「開発用サーバーが落ちている」といった環境側の問題を、自分が書いたコードのバグだと勘違いしそうになることが何度かあった。

感想

筆者はApple信者ですが、Apple信者って細かいところが気になるのでイヤになりそうになりますね。ﾄﾎﾎ