HPを改善する(3)20160930

「otosan page」のindexページは、今回再び、操作性向上を目指し小規模な変更をしました。

機能的に未だ十分満足したものではありませんが、操作性は従来より間違いなく改善できたと思います。

機能面等の改良は、これからも更に続けて行きます。

図1 今回操作性を改善した部分（赤色で囲んだ枠内）です。

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

1.はじめに　

個々の「otosan page」への入り口に相当するページは、「indexページ」（サイト・ホーム）と呼んでいますが、このページのデザインは、従来の作成から発想を変え、5月9日に大幅な変更を行い現在の形になりました。

但し、「参考・記録用」として以前のページは、「旧indexページ」としてオレンジ色背景で区別し、Webへ保存してありいつでも閲覧できます。
その後「小幅な変更」を、ランニングチェンジにより、繰り返して改善してきました。

今回も再び更に「小幅」な変更を実施しました。内容的にはささいな事であり、無視してしまえば済んだかも知れませんが、何をするためやったのか記録に残しておけば、次期改良時に引き継ぐのに役立つため、記事にしておいただけです。（データ等の保存は、PCとWebの2か所で行われることになります。）

改良場所は図1の赤枠で囲まれた部分(◆項目別の主要記事)の、6等分した枠内の各ボックスです。

今回は特にPCでの閲覧者を対象に、「操作性向上」のため行ったものです。ボックス内に設けたハイパーリンク（以下リンク）3ケ所へマウスを載せると、周りの枠が緑から橙色に変化します。図2,3,4参照。

スマホの様な小型サイズの画面では、自動的に改行される機能が働き、操作性の問題は特に無いと思われます。図5,6,7参照。

図2「YouTube投稿写真ページへ」にマウスを置いた時。

図3「図」へマウスを置いた時。

図4「YouTube投稿写真ページへページの入り口です」にマウスを置いた時。

図5 変更後タブレット（ランドスケープモード）での見え方。

図6 変更後タブレット（ポートレートモード）での見え方。

図7 変更後スマホでの見え方。但し、橙色の枠はスクリーンショット出来なかった。

図8 GoogleのMF-Testによる見え方。

図9（参考）変更前の見え方。

従来のリンクは左側へ埋め込んだサムネールアイコン（画像）のみだった（図8参照）ため、訪問者はリンク場所を見付け難く、不便だったと思われます。

それを

以上の改良で視認性が改良され、それに伴い操作機能も向上したと思う。
その他の細かい改善点については省略する。

今回の改良後、従来から行い確認している、RWDへ対応しているかGoogleのMF-Testを行い、問題ないかの評価を確認している。図8参照。

HP作成・改良への取組。
HPと言うものはコンテンツに関係なく、基本的に機能やデザイン等完成したから、これでおしまいということはなく、世の中の変化に合わせトレンド等もどんどん進化するから、これに合わせるべきであると思う。

otosan pageは過去にモデルチェンジを何回か重ね、現在の姿になりましたが、HPの機能やデザインは永遠にこのまま良いということはあり得ません。

今まで行ってきたモデルチェンジのおかげで、個人のささやかなサイトですが、10年を超え技術革新の波にもまれた末、本のわずかですがHP作成の技術的ノウハウが習得・蓄積できました。

単純な機能の追加等こそが、作成技術習得のチャンスと思い学習してきましたが、その成果が現在のHP作成技術のバックボーンになっているのは確かであるため、これからも新技術にはチャレンジしていくつもりでいます。

otosan page自身のコンテンツについては、他人に迷惑をかけない様に努めている「雑記帳」ですので、出来事中心の記述が全てですが、出来る限り発信し続けたいと思っています。これからも宜しくお願いします。