1月6日初公開した時のHP おうちフリーランサー(コンピュータ&ウェブ)  光ちゃ!はページも少なく、あれからページを少しずつ増やし、コロナで外出控えるようとの事で集中して、6月21日に完成したんですが、iPhoneとAndroidで自分のHPを見るとケータイを縦にした場合、左メニューの占有率が大きく、本文が少ししか見れないと指摘あったので、今日、やっと出来ました。

(1) パソコン&iPadで通常のページを見るとこんな感じになります。

スクリーンショット 2020-06-28 20.08.43
CSSでデザインしているので、ページを狭めても見にくいと言う事もないですね。

(2) パソコン&iPadで右上の「黒地」ボタンを押すと、目が悪い視覚障害者向けに見やすく表示されます。
スクリーンショット 2020-06-28 20.09.24
アクセシビリティを配慮したページに仕上がっていますね。

(3) iPhone横長で見るとこんな感じになります。
IMG_0003
パソコンで見たページから右側のアフィエイト領域が省かれた感じになるので、これも見やすいと思います。

(4) iPhone横長で右上の「黒地」ボタンを押すとこんな感じです。
IMG_0004

上の宣伝画像を除けた方がいいかな?

(5) iPhone縦長で見ると左メニューエリアを無くし、上の方に移動します。
IMG_0005
左メニューを上に移動させて、本文を100%の幅で表示したら、読みやすくなりましたね。

(6) iPhone縦長で「黒地」ボタンを押すとこれも左メニューエリアを無くし、上の方に移動します。
IMG_0006
目が悪い人もこれなら見やすく見れますね。

(7) Android横長で見るとこんな感じになります。
Screenshot_2020-06-28-20-41-48
iPhone横長と同じでいいですね。

(8) Android横長で右上の「黒地」ボタンを押すとこんな感じです。
Screenshot_2020-06-28-20-42-10

見やすいですね。

(9) Android縦長で見るとiPhoneと同じく左メニューエリアを無くし、上の方に移動します。
Screenshot_2020-06-28-20-35-09
バッチシですね!

(10) Android縦長で「黒地」ボタンを押すとこれも左メニューエリアを無くし、上の方に移動します。
Screenshot_2020-06-28-20-35-16

iPhoneとAndroidも表示が良さそうなので、HP作成はこれで打ち切ろうと思います。