従来のHP作りは「読み易さを優先」した結果、ページ幅は750px（ピクセル）を標準に決め維持してきました。
しかし、内容の増加に伴いボタン（タブ）を使用し、内容を畳み込んだ状態が増加すると、閲覧し難くなる事が予測されます。
現在作成しているHPは、「画面幅に応じてページ幅が可変されるRWD特性を持たせている為、この特性をフルに生かすなら、出来る限り大画面で中身が一目瞭然になる方が良いと言う考えに基づき、「新聞やチラシ」の様に内容を展開し、見易く・読み易いものを目指しデザイン変更しました。
画像はクリックするとLightboxで拡大表示します。
otosan page のインデックス・ページは、先月から大幅にデザイン変更しました。実用化後の試用期間中は微々たる調整等は、ランニング・チェンジしてまいりました。
これはPCの中でチェックしても分からず、Webへアップした状態でないと確認できない要素が多い為です。
従来型のHPでは出来なかった（必要もなかった）、画面幅の異なるデバイス（PC～タブレット端末～スマホ）用を、一つのHTMLソース（HPの作成規格）に共通化できるRWD技術が開発された結果、検索大手のGoogleが推奨するMF-Testに合格する事が、検索結果を上位に表示させる為の必須条件になった。
otosan pageは昨年度から新規に作成した全てのページに於いて、MF-Testに合格すべく取り組んでいました。
その特性を利用して、HPの目的から本来あるべき姿を検討し、今回のデザインまで辿り着きました。
その結果、ユーザビリティは従来の750px幅よりも、はるかに向上したデザインを実現させたつもりです。
しかし、こればかりは記事の性格上、読んで貰えるかは別問題ですが(^_^;)
情報の見え方 特に日常親しんでいる「新聞」は、小型サイズである「週刊紙」より、一瞬で情報内容が見れます。そして興味があり読みたい記事のみが、優先順序通り読めます。
週刊紙の情報量はページを増加すれば解決しますが、目次（入口）部分の工夫が特に重要になると思います。
この事をHPに当てはめてみると、大画面のPCユーザには「一目瞭然」で判って貰える作り方が必要だと思います。
だからと言って、画面幅全部までに1行が繋がったものでは、人間の目が追い付かず生理的に読むのに苦痛を伴います。
そこで考え出されたものに、「段組みする技術」があります。従来はみ出し防止には表を駆使しましたが、今回は「マルチカラム」で対応しました。
通常新聞は縦文字であったり学校の教科書は横文字であるが、どちらも読み易く出来ています。しかも共に「一行又は一列当たりの文字数」がコントロールされ作られています。
デジタルの世界では、電子メールの文字数が一つのヒントになると思います。
そこで従来のotosan pageでは、幅を750px（ピクセル：デジカメと同様にサイズを表す単位です）に決め、記事は画面中央へ固定（HP作成以来十数年）してきました。
しかし、欠点は情報量の増加に伴い、ページが縦方向に長くなってしまい、下に何が書かれているか、全く分からなくなってしまいました。
世の中のHP作成傾向はカテゴリで分類したボタンを並べ、ハイパーリンク機能を付けた形式のものが増加しています。
タブレットやスマホの様な操作ボタンの多機能化も進み、ボタンに隠されている情報量の多さから、開かなければ中身が分り難くなってしまっている傾向は進んでいます。
将来は記載内容を分からせる技術が開発されると思いますが、今回は開かないと何が入っているボタンか分からないものは出来るだけ少なく（心がけたが多くなってしまった）して、内容物（コンテンツ）が一目瞭然になる、新聞や折り込みチラシの様なアナログ的な利便性を目指しました。
カラムの作り方も幾つかモデルが公開されている中で、過去ページでは2段組みまで経験しましたが、今回はマルチカラム化に挑戦しました。
今までの試作品では表こそ使わなかったが、3つの方式を混ぜ込んで評価した結果（図参照）、今回の改良は一番安定していると思われる方式に統一して、概ね作成し直ししました。
特に表示等は予期していた設計通りに仕上がったと感じています。
otosan pageは「ハウツウもの」ではありませんから、詳細記事は書きませんのであしからず。
タグ打ちによる手作り品ですから、専門家の方がソースを見れば笑われるレベルだと思います(^_^;)
今後、トレンドを見極めながら更に改良を進めたいと思います。
「otosan page」サイト・ホームへ