Focusity スクリーンショットAB

更新: 2026-10-03 10:11:56　ラウンド: 4

A 既存

B 新案

レビュー履歴

round_1

# B案 1枚目 レビュー ラウンド1（2026-10-03）

対象: `variant_b/png/slide1.png`（1284x2778）
比較: A案 `export/v1_phone/01_himeji_1284x2778.png`、2枚目以降 `export/v1_phone/02_gallery`・`02_widget`・`03_craft`・`04_collection`（いずれも 1284x2778）
確認方法: 原寸で全体と部分（カード1の上端、カード2、ステップ3）を拡大して見た。検索結果の大きさとして横130pxに縮め、A案と3枚並びで比べた。2〜5枚目と横300pxで並べた。補足文の色(205,203,201)と地(40,28,16)のコントラスト比は計算で10.3:1。

## 点数

1. 一目で伝わるか: 5/10
   横130pxに縮めると、読めるのは見出しと「決める・集中する・完成する」だけになる。画面カードは横幅の41%しかない。左の55%は暗い余白なので、A案の大きなジオラマに比べて絵の力が弱い。見出しには「タイマー」「勉強」など、何をするアプリかを表す語が無い。
2. 3ステップの分かりやすさ: 7/10
   丸数字・縦線・三角で、上から下へ読む順番は迷わない。ただし画面の数値が話とつながらない。1で 30:00 をセットしたのに、2では残り 36:47 になっている。
3. 文字の読みやすさ: 6/10
   明るさの差は十分にある。補足文は 48px で、縮めると読めない。改行も「集中する時間を／セット」「完成した名所を／集める」となり、2行目に2〜3字だけ残る。
4. 既存デザインとの一貫性: 6/10
   A案の1枚目（暗い茶の地・白＋金の見出し）とはそろっている。2〜5枚目は白地に青の見出しで、端末の枠も付いている。B案はカードに枠が無く、並べると1枚目だけ別のデッキに見える（A案にも同じ問題がある）。カード2だけ灰色の地なので、3枚の中でも1枚だけ浮いている。
5. アプリ画面の見せ方: 6/10
   実際の画面を3枚使っていて、流れは伝わる。しかしカードが小さく、画面の中の文字（タイマー、ほかの姿を見る、夕方、夜）は原寸でも小さい。縮めると読めない。どの画面も姫路城の同じ角度の絵で、「育つ」変化が見えない。
6. 仕上がり: 5/10
   切れが4か所ある（下のリストの1〜3）。
7. A案との違い: 7/10
   訴求の型は変わっている（A案は世界観の絵、B案は使い方の3手順）ので、ABテストにはなる。ただし見出しの意味は A案の「名所が育つ」「集中した分だけ名所が建つ」とほぼ同じなので、差は絵の構成だけになる。
8. 前回の指摘: 対象外（ラウンド1）

## 直すべき点（重要な順）

1. カード1の上端が切れている（仕上がり）。ホーム画面の上のジオラマ画像が、カードの上の辺で水平に切られている。左右には余白があるのに上だけ余白が無く、画像の角丸の上2つも欠けて、天守の屋根の先も切れている。切り出し位置（-194px）を上にずらし、ジオラマ画像の角丸の上に16〜24pxの余白を入れる。
2. カード2の上端で天守の頂上が切れている（仕上がり）。白い霧に溶けて途中で消えたように見える。切り出しを40〜60px上へ広げるか、カードの高さを足して頂上まで入れる。
3. 目盛りの右端の「90」が半分切れている。カード3の右端でも、3枚目の小さな絵が切れて見える（仕上がり）。アプリの横スクロールのままだが、静止画では欠けに見える。カードの左右の切り出しを狭めて、目盛りの「75」と「夜」の絵で終わるようにする。または右端を地の色へのフェードで消す。
4. 数値の矛盾。1は 30:00、2は残り 36:47（終了 18:47）なので、セットした時間より残りが長い。30:00 未満の残り時間（例 12:47）の画面に差し替えるか、1の目盛りを 45 分に合わせた画面にする。2の 3h1m/4h45m のままで3が「完成」になる流れも飛んでいる。2の進み具合は 4h 台の画面のほうがよい。
5. 画面カードを大きくする。いまは 530x720 で、横幅の41%しかない。カードを横 640〜700px に広げ、左の文字の列を狭める。または「左に文字・右に画面」をやめ、段ごとに「上に見出し、下に横長の画面」にする。どちらでも、縮めたときに 30:00・36:47・完成の絵が判別できる大きさにする。
6. カード2の地の色をそろえる。灰色(約 128,122,110)の地はカード1・3の濃紺と違い、別アプリに見える。暗い地の集中画面を撮り直すか、カード2も濃紺の枠で包む。
7. 補足文の改行を直す。「集中する時間を／セット」「完成した名所を／集める」は2行目が短すぎる。文字の列を広げて1行にするか、「時間を決めて」「集中した分だけ建つ」「完成した名所を集める」のように1行に収まる長さまで縮める。補足文は 48px から 56px 以上に上げる。
8. 見出しに、何のアプリかが分かる語を入れる。「集中で、名所が育つ」では、検索結果で集中タイマーだと読み取れない。例として、補足の1行「勉強・作業の集中タイマー」を見出しの下に 56px 以上で足す。A案と差を出すなら、見出し自体を3手順の結果に寄せる（例「25分の集中で、城が1段建つ」。数値は実装と合わせること）。
9. 左の列の余白を詰める。ステップ文字の下（1と2の間、2と3の間）に約450pxずつ何も無い。見出しと最初のカードの間にも約190pxの空きがある。カードを大きくするか、文字をカードの上端にそろえて縦線を短くする。
10. 下の余白が上より狭い。カード3の下端は約2690pxで、下の余白は約88px。上の余白（見出しの上に約160px）と釣り合っていない。全体を約40px上へ詰める。
11. 2〜5枚目との並び（範囲外の可能性あり）。2〜5枚目は白地に青の見出しなので、B案の1枚目だけが暗い。A案も同じなので今回の比較条件はそろっている。直すかどうかは人の判断として TASKS.md に書いた。

VERDICT: FAIL

round_2

# B案 1枚目 レビュー ラウンド2（2026-10-03）

対象: `variant_b/png/slide1.png`（1284x2778、09:56 書き出し。slide1.html の 09:55 より新しいので、ラウンド2の HTML から書き出された画像と判断した）
比較: A案 `export/v1_phone/01_himeji_1284x2778.png`、2〜5枚目 `export/v1_phone/02_gallery`・`02_widget`・`03_craft`・`04_collection`（ja、1284x2778）
確認方法: 原寸の全体を見たうえで、上・中・下の3分割と部分を拡大して見た。横130px（検索結果の大きさ）に縮めて A案と並べた。2〜5枚目と横300pxで並べた。コントラスト比と縮小時の文字の大きさは python で計算した。

## 点数

1. 一目で伝わるか: 6/10
   見出しと「30:00」「24:47」は130px幅でも読める。足した「勉強・作業の集中タイマー」は 58px なので、130px幅では約5.9pxになり読めない。何のアプリかを伝える語が、縮めると消える。
2. 3ステップの分かりやすさ: 7/10
   丸数字・線・三角で読む順番は迷わない。30:00→24:47 の矛盾も消えた。ただし2は「17m / 4h45m」、3は完成で、途中が飛んで見える。カード2だけ高さが倍あり、段の間隔もそろっていない。
3. 文字の読みやすさ: 6/10
   見出しと補足の明るさの差は十分ある（補足 11.5:1）。各段の説明文 56px は130px幅で約5.7pxになり読めない。カード3の「姫路城」は白文字が明るい地に重なり、コントラスト比は約2.3:1しかない。
4. 既存デザインとの一貫性: 6/10
   A案の1枚目（暗い茶の地、白＋金の見出し）とはそろっている。カード2だけ灰色の地で、3枚の中で1枚だけ浮いたまま。2〜5枚目は白地に青の見出しと金の端末枠なので、1枚目だけ別のデッキに見える（A案も同じ）。
5. アプリ画面の見せ方: 7/10
   カードは横幅の54%まで広がり、実画面の流れは伝わる。カード1はタイマーの操作部分だけで、このアプリならではの絵が無い。カード3は1棟だけなので、説明文の「集めていく」が絵で見えない。
6. 仕上がり: 4/10
   背景に英語の文字が写り込んでいる（下のリスト1）。原寸で読めるうえ、金の縦線と重なっている。「姫路城」の文字が地に溶けている（下のリスト2）。
7. A案との違い: 7/10
   訴求の型（世界観の絵か、使い方の3手順か）は変わっている。見出しは A案の「手のひらで育つ」と同じ「育つ」で、言っていることも近い。差が出るのは絵の構成だけになる。
8. 前回の指摘: 6/10
   前回の1〜5・7〜10は直っている。6（カード2の灰色の地）は直っていない。11 は範囲外のまま。そのうえで背景の画像を置き直した結果、新しい欠陥（リスト1）が入った。

## 直すべき点（重要な順）

1. 背景に「Stage 8: Completed and Crowned Temple」の英文が写っている。場所は左端の y≈1950〜1975（原寸）で、金の縦線（2→3の間）の真後ろ。原因は背景に敷いた `public/landmarks/AngkorWat.png` で、元画像の下端（y≈870〜960/1024）に英語の札が焼き込まれている。対処は2つのどちらか。AngkorWat.png を札の無いジオラマ（例: `ScreenCity/Shared/LandmarkStages/` の完成段）に替える。または画像の下から15%を切り落としてから敷く。替えたあと、3枚の背景画像すべてに文字や札が無いことを拡大して確かめる。
2. カード3の「姫路城」が読めない。白文字（255,255,255）が明るい地（中央値 168,173,170）に重なり、コントラスト比は約2.3:1しかない。完成画面の切り出しを、名前の下に暗い帯が来る位置に変える。それが無理なら、文字の下だけ地を暗くする薄い影（0 2px 12px rgba(0,0,0,0.6) 程度）を足す。実画面の文字を塗り替える形になるなら、名前の部分を切り出しから外す。
3. 「勉強・作業の集中タイマー」を大きくする。いまの 58px は130px幅で約5.9pxになり、検索結果では読めない。80px以上にするか、見出しを2行にして1行目に「集中タイマー」の語を入れる（例「勉強の集中タイマーで、／名所が育つ」）。何のアプリかは、縮めたときに残る大きさで書く。
4. カード2の灰色の地。実装メモには「アプリに暗い地の集中画面は無い」とある。それなら、カード1と3を灰色側に合わせるか、カード2の外側の黒い縁を太くして灰色の面積を減らす。どちらも合わないなら、集中中の画面を「ジオラマと進み具合だけ」に切り出し、灰色の地をタイマーの数字の周りだけに抑える。理由を書いて残すだけでは、並べたときの違和感は消えない。
5. 2→3の飛びを埋める。2の「17m / 4h45m」から3の「完成」へ一気に進むので、1回の集中で完成すると誤解される。または途中が抜けて見える。2の画面を 4h台の段に替える（TASKS.md の未解決にある撮り直し）。撮り直せないなら、3の説明文を「積み上げて／名所が完成」のように、回を重ねると読める文に変える。
6. カード1にアプリらしさを足す。タイマーの操作部分だけでは、どの集中タイマーにも見える。上に小さく建築前の更地か段1のジオラマを入れ、「ここから建つ」と分かる画面にする。前回の指摘1（上端の切れ）を再発させないよう、ジオラマの角丸の上に余白を残す。
7. 各段の説明文（56px）は縮小で読めない。130px幅で約5.7px。2行の説明文を1行の短い語（例「時間を決める」「集中で建つ」「図鑑に集まる」）に縮め、72px以上にする。題（決める・集中する・完成する）と言い換えが重なっているので、どちらかを削ってもよい。
8. 見出しの訴求を A案から離す。「名所が育つ」は A案の「手のひらで育つ」と同じ語で、ABテストで差が出ても理由を切り分けにくい。3手順の結果を数字で書く（例「30分の集中で、城が1段建つ」。数値は実装の段の時間と合わせること）か、「勉強タイマー」を主役にした見出しにする。
9. 段の間隔をそろえる。カード2が 984px、カード1が 478px、カード3が 574px で、左の文字の塊が縦中央に置かれるため、1と2の間の線だけ長い。カード2の切り出しを短くして（17m〜24:47 の帯を詰める）、3枚の高さの差を小さくする。
10. 2〜5枚目との並び（範囲外。前回の11と同じ）。2〜5枚目は白地に青の見出しと金の端末枠で、B案の1枚目だけが暗い茶の地。A案も同じなので比較の条件はそろっている。直すかどうかは人の判断に任せる。

VERDICT: FAIL

round_3

# B案 1枚目 レビュー ラウンド3（2026-10-03）

対象: `variant_b/png/slide1.png`（1284x2778、10:02:45 書き出し。slide1.html の 10:01:50 より新しいので、ラウンド3の HTML から書き出された画像と判断した）
比較: A案 `export/v1_phone/01_himeji_1284x2778.png`、2〜5枚目 `export/v1_phone/02_gallery`・`02_widget`・`03_craft`・`04_collection`（ja、1284x2778）
確認方法: 原寸の全体を見たうえで、上・カード1・カード2・カード3の4つに切って拡大して見た。横130px（検索結果の大きさ）に縮めて A案と並べた。2〜5枚目と横300pxで並べた。元の `public/appui/tiktok/timer_running.png` とも見比べた。コントラスト比、縮小時の文字の大きさ、カードの内側の余白は python で測った。

## 点数

1. 一目で伝わるか: 7/10
   見出しに「集中タイマー」が入り、130px幅でも約9.7pxで読める。ただし A案の見出し（約15.9px）より小さい。3枚の絵がほぼ同じ完成間近の城に見えるので、縮めると「城が建つ」変化が伝わらない。
2. 3ステップの分かりやすさ: 7/10
   丸数字・線・三角で順番は迷わない。説明文が題をなぞるだけになっている。「集中する／集中で城が建つ」「完成する／積み上げて完成」と同じ語が続き、2の説明は見出しの「城が建つ」とも重なる。
3. 文字の読みやすさ: 7/10
   説明文と地のコントラスト比は 13.5〜14.0:1 で十分ある。説明文 72px は130px幅で約7.3pxになり、読めるが小さい。見出し 96px も A案の 157px より4割小さい。
4. 既存デザインとの一貫性: 7/10
   A案と同じ暗い茶の地と白＋金の見出しでそろう。カードの中の余白が3枚でそろっていない（下のリスト3）。カード2下の灰色の帯も残る。2〜5枚目の白地との差は範囲外。
5. アプリ画面の見せ方: 7/10
   実画面が3枚あり、ホーム→集中→完成の流れは見える。カード1が 2h38m/4h45m（6段中5段目）なので、すでにほぼ完成した城から始まる。1と3の絵の差は天守の最上部とクレーンだけになる。カード2は天守の上半分が霧で白く飛んでいる。
6. 仕上がり: 6/10
   カード3の「姫路城」の後ろの影が、ジオラマの上に灰色のしみとして見える（下のリスト2）。カード2だけ画面が縁いっぱいまで来ていて、カード1・3と内側の余白が違う。誤字・はみ出し・文字の切れは無い。
7. A案との違い: 8/10
   見出しは「集中タイマー」を主役にした語に変わり、構成も「世界観の絵1枚」から「使い方の3手順」に変わった。ABテストで差を測れる程度には訴求が離れた。
8. 前回の指摘: 7/10
   1（背景の英文）・3・5・6・7・8・9 は直っている。2（「姫路城」のコントラスト）は比が上がったが、影がしみに見える新しい欠陥が入った。4（カード2の灰色）は灰色の帯が約120px残る。10 は範囲外。

## 直すべき点（重要な順）

1. 3枚の城の差を大きくする。カード1は 2h38m/4h45m（段5）で、絵は完成形とほとんど同じに見える。130px幅では3枚とも同じ城に見え、見出しの「城が建つ」が絵で伝わらない。カード1を、土台か足場の段（段1〜2）の姫路城が写るホーム画面に替える。手元にある `public/appui/tiktok/timer_stage1.png`（17m、土台と足場）と同じ段のホーム画面を探すか、撮り直す。そのうえでカード2を中間の段にし、「土台→建築中→完成」と3枚で形が変わるようにする。数字（1の経過時間＋30分の途中＝2の経過時間）の整合も合わせて直す。
2. カード3の「姫路城」の影を目立たなくする。いまは文字の周りの地が中央値 (77,80,78) で、すぐ右の地 (114,130,94) より暗い。ジオラマの左下の角に灰色のしみが乗っているように見える。影のぼかしを広げ、不透明度を 0.65 から 0.4 前後に下げて、しみの縁が見えないようにする。それでも消えないなら、名前を含む切り出しをやめ、名前の部分をカードから外す。
3. カードの内側の余白をそろえる。端末の縁の内側から画面の絵までの距離を測ると、カード1のジオラマは約46px内側にある。カード2は 0px で縁いっぱい、カード3の姫路城のカードは約40px内側にある。カード2だけ、ほかの2枚と同じく内側に余白を取って切り出すか、3枚とも縁いっぱいにする。
4. カード2の天守の霧を減らす。`timer_running.png` の元画像でも天守の上半分は白い霧（建築中の演出）に隠れている。縮めると天守がにじんで見え、画像の劣化と区別できない。「建つ」の主役が見えないので、霧の薄い別の時点の集中画面に替える。替えられないなら、天守の霧がかかっていない部分が中心に来るよう切り出しを下げる。
5. 説明文の重なりを消す。2の「集中で城が建つ」は見出しの「城が建つ」と同じ語で、題の「集中する」とも重なる。3の「積み上げて完成」も題の「完成する」と重なる。説明文には題に無い情報を書く。例は「30分を選ぶ」「集中した分だけ建つ」「名所を図鑑に集める」。実装の仕様（建築は乱数で決まり、選べない）に合う語を選ぶこと。文言を変えたら build_fonts.py を再実行する。
6. 見出しを大きくする。96px は130px幅で約9.7pxになり、A案の約15.9pxより小さい。見出しを2行（例「集中タイマーで、／城が建つ」）にして 130px 以上にする。ABテストでは A案と見出しの大きさの条件もそろえたほうが、訴求の差だけを測れる。
7. カード2の灰色の帯（前回の4の残り）。ジオラマの下の 3h1m と進み具合の帯は灰色の地のままで、黒い地のカード1・3と並ぶと1枚だけ明るい。帯を切り落とすと 3h1m が消えるので、1を直すときに暗い地の集中画面が撮れるなら替える。撮れないなら、ここは残してよい。
8. 見出しの「城」（TASKS.md の未解決に既出）。建築は約100種類あり、無料の建築は乱数で決まる。「城が建つ」と書くと、城を選べると受け取られるおそれがある。「名所が建つ」に戻すかどうかは人の判断に任せる。直すなら 1 と 6 と同時に行う。
9. 2〜5枚目との地の色（範囲外。前回の10と同じ）。A案も同じ条件なので、比較には影響しない。

VERDICT: FAIL

round_4

# B案 1枚目 レビュー ラウンド4・最終（2026-10-03）

対象: `variant_b/png/slide1.png`（1284x2778・RGB。10:10:32 書き出し。slide1.html の 10:09:14 と assets の 10:08:28 より新しいので、ラウンド4の HTML から書き出された画像と判断した）
比較: A案 `export/v1_phone/01_himeji_1284x2778.png`。2〜5枚目は前回と同じ v1_phone の ja。
確認方法: 原寸の全体を見たうえで、上半分・カード2・カード3を切り出して拡大して見た。横130px（検索結果の大きさ）に縮めて A案と並べた。縮小時の文字の大きさ、説明文とカードの間、説明文のコントラスト比は python で測った。

## 点数

1. 一目で伝わるか: 8/10
   130px幅で見出しは1行目 約12.6px、2行目 約15.8px で、A案（約15.9px）と同じ大きさになった。30:00 とスタートの黄色いボタンでタイマーだと分かる。
2. 3ステップの分かりやすさ: 8/10
   丸数字・線・三角で順番は迷わない。題は130px幅で約10pxで読める。1の足場の城から2・3の白い城へ形が変わる。2と3の城はほぼ同じ絵で、「集中する」の段で何が進んだかは数字（3h1m）を読まないと分からない。
3. 文字の読みやすさ: 7/10
   説明文と地のコントラスト比は約14:1 で足りている。ただし説明文 66px は130px幅で約6.7pxになり、検索結果では読めない。前回の 72px（約7.3px）より小さくなった。
4. 既存デザインとの一貫性: 7/10
   暗い茶の地、白＋金の2行見出しは A案とそろう。カード2の下の灰色の帯（約130px）が残り、黒い地のカード1と、生成りの地のカード3の間で1枚だけ浮く。3枚のカードの地の色が黒・白灰・生成りと3種類になる。
5. アプリ画面の見せ方: 7/10
   実画面3枚で ホーム→集中→完成 の流れは見える。カード2は天守の上部が霧で白く飛び、白い粒も舞う。カード3と並べると、カード2は「完成画面のにじんだ版」に見える。1h40m→3h1m の数字は1回の30分の集中ではつながらない。
6. 仕上がり: 7/10
   文字の切れ・誤字・はみ出しは無い。カード3の「姫路城」の影のしみは消えた。残る問題は3つある。カード2の説明文「続けた分だけ建つ」の右端（x=569）とカードの縁（x=600）の間が31pxしかなく、1・3の段（211px・163px）と比べて窮屈に見える。カード2の天守の霧と白い粒が、縮めると画像のにじみと区別できない。カード1は 30:00 の下の余白（約30px）が上の余白より狭く、下に詰まって見える。
7. A案との違い: 8/10
   A案の「世界観の絵1枚＋評価風バッジ」に対して、B案は「集中タイマー」を主役にした使い方の3手順になった。ABテストで訴求の差を測れる程度には離れている。
8. 前回の指摘: 7/10
   2（影のしみ）・3（内側の余白）・5（説明文の重なり）・6（見出しの大きさ）は直った。1は足場の段に替わり形の差は出たが、数字の整合は直っていない。4（カード2の霧）と7（灰色の帯）は残った。8 は人の判断、9 は範囲外。

## 直すべき点（重要な順）

1. カード2を差し替える（前回の1・4・7の残り）。いまのカード2（timer_running.png、3h1m）は、霧・白い粒・灰色の帯の3つの問題を抱え、絵もカード3とほぼ同じになる。シミュレータで、1h40m の続き（1h50m〜2h10m 前後）の集中画面を撮り直す。そうすれば 1→2 の数字が1回の30分の集中でつながり、城もカード1の足場から少し進んだ形になる。撮影はタップできないので、App Group の plist で状態を作る（メモリの focusity-sim-capture-without-tapping を参照）。
2. 説明文を大きくする。66px は130px幅で約6.7pxで読めない。カードの幅を 600px から 560px 前後に縮めて文字の列を広げ、説明文を 80px 以上にする。題（104px）と説明文の差は残す。
3. カード2の説明文とカードの間を空ける。「続けた分だけ建つ」は8字で、右端からカードまで31pxしかない。2の文字数を6字以下に減らす（例「集中で建つ」は題と重なるので避け、「1分ずつ建つ」など）か、2の項目と同時に文字の列を広げる。
4. カード1の下の余白をそろえる。30:00 の下の余白が約30pxで、カードの上の余白より狭い。切り出しの下端を 20〜30px 下げるか、30:00 の行を含めたまま上を少し詰める。
5. 3枚の地の色の差（黒・白灰・生成り）。1を撮り直すとき、カード2の帯の灰色が残るならカードの下端で切り落とし、3h1m の数字は進み具合の帯ごとジオラマの上に重ねない形で見せる。撮れないなら、この点は残してよい。
6. 見出しの「城」（前回の8、未解決に既出）。建築は約100種類で、無料の建築は乱数で決まる。「城が建つ」を選んで建てられると受け取られるおそれがある。「名所が建つ」に戻すかは人が決める。
7. 2〜5枚目との地の色（範囲外。前回の9と同じ）。

VERDICT: FAIL