写真の置場ページをRWD化する20150322

このページの内容

以前に作成し毎年更新して使用している、「写真の置場」ページをrwd化して見た。テキスト文章の無いCMのみの段組み構造では、PC内にあるローカル・ファイルと、サーバーへアップしたファイルの表示に大差があり、デザインを整えるのに苦労した。

しかし、苦労の甲斐がありGoogleのモバイルフレンドリーテストには合格しました。
今までの経緯を自分自身の覚書のつもりで残した記録です。

2015年03月22日

「問題ありません。このページはモバイルフレンドリーです。」

モバイルフレンドリー

◆「RWD化」で体験した事と経緯

過去に作成した「写真の置場」ページは、otosan pageの大切な写真ページへの入り口であり、これからも更新しながら毎年使用し続ける予定です。その為このページもRWD化すべくトライした。

しかし、今回のようなデザインは初めての体験であり、従来の表組みのデザインを踏襲した、単純な構造の割に少々手こずった事もあり、備忘録で残すことにしたものです。

ページそのものは、簡単な2段組み構造のありふれたものですが、2段目の内容は縦型のCM(GoogleとAmazon)2本のみであり、細長い縦のエリアへ2個並べていれた単純なものだった。

PCがローカル状態で、スマートフォンサイズの横幅、次にタブレット端末サイズでの横幅、最後にPCサイズの横幅と画面を可変(以前書いた方法で行う)させ表示確認し、rwdにもなっているからこれでいいやと言う状態で、サーバーへアップした途端丸っきり予期していなかったデザイン崩れを起こしていた。

ページに背景色を指定しないと透明(色)になり、指定した壁紙が透けて見えるため、テキスト文章が読めなくなってしまう恐れがある為白色を指定した。しかし、それだけでは2段組みが希望通り正しく出来上がったか分からないため、1段目は薄いピンクの背景に、2段目は薄い水色に、又、下の段組みしないtwiter関連部分はふじ色と差し分けした。すると1段と2段の境界に出来た白い隙間が目立ってしまったり、2段目の下部にも白い部分が出来たり、又、twitter用のふじ色部分が一部上へはみ出し伸びて来たりした。このようなことは初めてで有り、全く予期していなかったため、始めはどう修正して良いのか分からなかった。

最後に分かったがテキストの記事が全く無いデザインでは、CMのようにWeb上で配信され初めて表示が決まる様なものは、PC内のローカルファイルを開いただけでは確認が出来ず、ファイルをアップした状態で表示を見ながら、デザイン上の補正を必要とした。今回は最初は一見デザイン崩れしたように見えていても、サーバーへアップしたら、設計通りの寸法で良い方向へ変わってしまったと言う体験をした。

最後にGoogleのモバイルフレンドリーテスト(※1)をやったが、何時も自信なくドキドキして数秒間待つが、「問題ありません」と表示されるのはとてもいい気分です。

(※1)

google「モバイルフレンドリーテスト」のサイト 外部リンク

使い方:ウエブページのURLを入力又はコピペし、分析ボタンを押す。

◆「RWD化」で体験した事・図

画像1

画像1 サーバーへUP後
下に白い隙間ができた

画像2

画像2 PC内表示
右側隙間は残ったまま

画像3

画像3 PC内の表示
紫が伸びて来た。

画像4

画像4 PC内の表示
背景画が透けて見える

画像5

画像5 PC内の表示
右は紫が更に伸びた。

画像6

画像6 PC内の表示
メインサブ間の隙間。

画像7

画像7 PC内の表示
サブと同じ背景色。

画像8

画像8 PC内の表示
この状態でUPした。

画像9

画像9 サーバーUP後の表示
紫は押し下げられた。

Λ