Title2の検討20161120

Bird Galleryページの、「タイトル」について再度検討した。

通常の雑記ページと差別化しながら、シリーズごと同一デザインのタイトルに仕上げたい、このような目的に使用できるタイトルの改善を前回行ったが、使用してみてスマホで新たに不都合が見つかり再度改善した。

改善後スマホで見た「Bird Galleryタイトル部」のスクリーンショット。

画像はクリックするとLightboxで拡大表示します。

1：はじめに

通常の雑記記事と差別化したWebページへ使用するため「タイトル」について、前回の改良後様子を見てきましたが、「スマホ」での見え方で以下のような不満足な点がみつかった。
その為、前回に続きBird Galleryページのタイトルを使い、実装方法等を再度検討した。

（◆参考：）

スマホでの見え方。背景図とタイトルにずれが発生していた。

スマホで見ると（背景）画像領域から、濃い水色のタイトル文字（テキスト）がはみ出している意図しない不都合がでていた。

PC画面を500px付近まで縮小した時の見え方。設計通りの表示だった。

従来はPCの縮小画面で見え方を確認後、サーバーへアップしてGoogleのMF-Test で、RWDに設計されたページかどうか確認していた。また実機での試験はこの後続けてやっていた。

最終の判断には、GoogleのMF-Testが合格していたら全て良しと考えた部分もあり、前回見落としてしまったのか原因は不明だったが先ず対策した。

このMF-Testは、今回はページのトップに赤文字で「モバイルフレンドリーテストはまもなく新しいバージョンにアップグレードされます。新しいバージョンはこちらからお試しいただけます。」と記述・リンクがあり、以前にもあったように改良新ページの使用が可能になっていた為、この改良版を使いました。

PC画面を500pxまで縮小する見方は、実機を模擬した簡易的方法であり、実機との差は当然あると考えていた。

GoogleのMF-Testも、合格するとGoogle-Botからの見え方のスクリーンショットも表示されるが、RWDと判定されても実機との見え方に微妙な差が出ることが分かった。

前回検討の過程では、最初はページ全体でなく図とタイトルだけのユニットを作成・確認し、今までのページの中に埋め込んで、ページとしての確認をして完成後、サーバーへアップしましたが、PC内での検討結果と異なる状況になってしまい、実装方法を再度変えた経緯がありました。

CSSは従来のものを修正して使用しましたが、アップ後希望通りの表示にならず（他の設定が邪魔しているような現象）苦戦しました。

今回はCSSの中で、文字表示の位置と文字サイズの微調整を、再度やり以下のように、実機試験でも確認が出来ました。

注）確認に使用したデバイス。

PC以外の実機確認は全てAndroid系で行っているが、機種による差は当然あり得るし、iphone系については全く実施していいないため、OSによる差も当然有り得る。
今後不具合等が見つかれば、可能な限りの改善はしたいと思っています。

画像はクリックするとLightboxで拡大表示します。

図1GoogleのMF-Testの結果。「このページはモバイル端末での使い勝手に優れています」に表現が変わっていた。

図2Google-Botからの見え方。

図3タブレット（ポートレートモード）で開いた時の画面の見え方。

図4 変更後：タブレット（ランドスケープモード）で開いた時の画面の見え方。

図5 変更後：スマホ（ポートレートモード）で開いた時の画面の見え方。

図6 スマホ（ランドスケープモード）で開いた時の画面の見え方。

図7 PCを479px幅にして見た時の見え方