古民家喫茶 あおき

基軸に選んだ実在サイトのCSSを静的に解析したところ、格子がpx固定ではなく画面幅を34で割った可変値であること、区切り記号が存在しないこと、本文が1行ずつ迫り上がる演出こそが特徴であることが分かり、目視で立てた初版の設計を作り直した。可変の格子はそのまま真似るとiOSで横あふれを起こすため、レイアウトからは可変単位を排してCSSグリッドの34分割に翻訳し、文字サイズにだけ上限付きで残している。地図の埋め込みは実在の場所を指してしまうため使わず、駅から店までの道順を直線と小さな矩形と漢数字だけのインラインSVGで描いた。3つの描画エンジン×8ページの実測では、写真がiOSでだけ高さ0に潰れる不具合を検出して修正している。