こんばんは、オオモリです。
さて、しばらく前にHYMER PREMIUM SHOPの新しいWEBページを作成中と投稿しました。
今回はその後をお伝えします。
写真では、前回とあまり変わり映えしないような・・・・
多くのデザイン物がそうであると思われますが、
出来上がるまで非常に地味な作業が続きます。
見栄えの方向性が決まった後、
画面での見え具合を調整していきます。
1ピクセル単位で右だの左だの・・・
まぁ大体の数値は決めてあるのですが、実際画面に表示してみると、微妙な位置が気になったりします。
個人的には白銀比（１：１．４１４２）を基本にデザイン・レイアウトしています。
感覚的な部分は数値では決められませんので、そういった時は感性にｗ
画面での確認は、そんなに端末が豊富にあるわけもないので、Firefox Developer Editionを使います。
Adobeでもエミュレーションできますが、こっちのほうが使いやすいので。
他には、スタッフに声をかけて実機テストです。
ブラウザの種類やバージョンによって見え方が異なる点は今も変わっていません。
さらに、スマートフォン等の普及によって、画面サイズも豊富になって。。。。。
ある端末では意図したように、
また、その逆も然り。
全てがとはいきませんので、
現時点での主流に合わせていくしかないのが現状かと。
比較的古い端末でも想定内の表示が確認できたので、コーディングの方向性は間違っていなかったようです。
せっかくの情報も、表示されないのでは伝わりません。
最悪、レイアウトが崩れても内容だけは伝わるように設計しないといけません。
多くは、ある程度の案件に対応できるように、
テンプレート化したデータを持たれていると思います。
それが縛りになって、何を作っても同じデザインになってしまったり・・・・
なんて事に陥ります。
そんなことを先程の写真のような画面を見つめながら考え、作り上げていくのです。
ここまでは、
どちらかというと、見栄えの裏側でした。
そして、
見える側。
 |
| iPhone7で表示 |
諸元って文字量が多くて、見間違いやすいと感じます。
アクセシビリティやユーザービリティという、
利用者の観点から使いやすい・見やすいWEBページ作りをしないといけません。
そのWEBページの特性によって、使いやすさや見やすさは変わると思います。
それでも、
ボタンならボタン然とした姿。
メニューならメニューらし振る舞い。
そういった基本は守らないと迷宮のようなページになってしまいます。
そこを守りつつ独自性を出していくのが、
このお仕事です。
そして、この、諸元のページ、
文字ばっかりです、、、、、
間のとり方や文字色、フォントスタイルなどで見やすさを表現していきます。
これもピクセル単位です。。。
ミリ単位的な感覚かと。
で、画像ではよく分かりませんが、
今回、そのアクセシビリティに反する手法をとってみました。
「コントラスト差が著しく少ない行の背景」
言葉の意味もよく分かりませんね。。。。
この記事の文字量も多くなってきましたので、
続きはまた次回。
