トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"Twilight"

Index Menu
(3)<FirstTitle>:実用的なWebページ:ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点 <LastTitle>:実用的なWebページ(3) (1)<FirstTitle>:CSSデモ/Accordion001 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:Webデザイン参考書 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:CSSデモ/吹き出し <FirstUser>:amanojaku@管理人 (4)<FirstTitle>:地震・危険度 <LastTitle>:Public Relations URL (1)<FirstTitle>:「HTML5、CSS3」仕様 <FirstUser>:amanojaku@管理人 (5)<FirstTitle>:CSSデモ/Nav_Item_Arrow <LastTitle>:CSSデモ/Nav_Item_Arrow(6)、インライン SVG (2)<FirstTitle>:JavaScriptデモ/MVCデモ(1)/BMIデモ <LastTitle>:JavaScriptデモ/MVCデモ(3)/BMIデモ

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:







<Number>: [00000037]  <Date>: 2021/10/19 00:28:46
<Title>: 実用的なWebページ:ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点
<Name>: amanojaku@管理人



本当に自分の興味のあるコンテンツで(勉強のために)実用的なWebページを作ってネットで公開してみると良いでしょう(本当に自分の興味のあるコンテンツならモチベーションも上がるでしょうから)。
逆に言うと、自分が本気でネットで公開したいコンテンツでないと、それだけの学習コスト(学習の労力)を掛けて勉強するのは難しいかもしれません、(もちろん 不可能と言うことでは無いですが)自分が本気でネットで公開したい、と言うモチベーションが有った方が学習に圧倒的に有利です。
自分が本当にネットで公開したいコンテンツがあるか、どうかも重要な要素になるでしょう。
※無料レンタルWebサーバーは基本的に広告が入るので、広告がウザくない所を探して下さい。

下記はアマチュア用の注意点です、これはプロの基礎レベルに相当します(ただし、プロとアマチュアでは方向性が違いますが)。
プロではピクセル・パーフェクトを希求しますが、アマチュアはユーザー・フレンドリーを希求します。
ピクセル・パーフェクトとは固定と言うことではなく、ビューポートの横幅の解像度に比例します。
ユーザー・フレンドリーは(ビューポートではなく)ディスプレイ画面の解像度を基準とし、テキストはデフォルト・フォント・サイズを基準とします。
ユーザー・フレンドリーはSEO的な評価に顕著に寄与するでしょう(逆に言うとプロ的なピクセル・パーフェクトはSEO的な評価はイマイチです)。

「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー・フレンドリー(PCフレンドリー、タブレット・フレンドリー、スマホ・フレンドリー)なページが推奨されます。
Chromeのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみればユーザー・フレンドリーが如何に重要か解るでしょう。
(各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。
また、(ブラウザ側の設定で)フォント・サイズもイロイロ 変更してみて、イロイロなフォント・サイズに対応可能かどうかもチェックしてみると良いでしょう。

本気でやりたいなら、(本物の)4kモニターの購入を推奨します。
4kモニターを購入する場合は、当然 PC側も4kモニターに対応している必要があります。
画面はノングレア(非光沢)処理を推奨、また格安モニターだと高さ調整が出来ない場合があるようで、画面の高さが高いと非常に見づらく首が痛くなったりするそうです(格安モニターでも高さが低いなら問題ないかもしれませんが)。
TSUKUMOでは「ドット抜け交換保証(オプション)」を有償で付与可能なようです(料金は下記参照)。

とっても便利なツクモ パーツ交換保証~モニター編~
https://blog.tsukumo.co.jp/honten/2018/09/post_2155.html


レスポンシブ・デザイン:PCとスマホを同一のファイルにする手法はレスポンシブ・デザインと言われており、推奨されています。
レスポンシブ・デザインにする場合、スマホでは高度なCSSが効かないので、モバイル・ファーストで作成する事が推奨されます(折角PC用にCSSで高度な装飾を作っても、後で全面的に修正になる可能性があります)。
PC用を先に作る場合は、PC用を少し作ったら、スマホでも こまめにチェックする必要があります(とりあえずチェックするだけなのでPC用のコードのままでも良いです)。
また、(CSSで高度な装飾を使わない)パイロット版ページならPC用が先でも良いです。
また 絶えずレイアウト構成をスマホの「縦、横」画面、タブレットの「縦、横」画面、PCの画面(アスペクト比「4:3、16:9」)で表示可能か考慮しながら作る必要があります、そうしないと後で全面的に修正しなければならなくなります。

参考

Webページにおける基本的な注意点
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+00000231&tsn+00000231&bts+2019/08/12%2011%3A02%3A18&

アマチュアの場合で細かく分けたい場合は、メディアクエリで「1312px以上」、「1312px未満~992px以上」、「992px未満~688px以上」、「688px未満」に分割する4パターンのレイアウト構成が推奨されているようです(もちろん、ページのレイアウト構成によっては、それ以下のパターン数でも作成可能な場合もあります)。
※注意点としては、ユーザーが意地悪くPC用ブラウザの横幅を小さくすると、PC用ブラウザで(レスポンシブ用などの)メディアクエリが効いてしまうと言う問題があります(メディアクエリを効かせたく無い部分はJavaScriptで記述する必要があります)。

(Webページ作成の基本のキとして)ブレイク・ポイントを念頭に置き、必ずワイヤー・フレームを作成して下さい(手書きでも良いですし、単純なレイアウトなら脳内だけでも おk)。

参考

チンチロリン
http://xd305417.html.xdomain.jp/responsive/dice000/dice000.htm

このチンチロリンは、単純なレスポンシブ・デザインのデモ・ページです(PCとスマホでレイアウトが変化します)。
分かりやすく作ろうなどと一切考えずに作ってしまっているので、コードを見ても分かりずらいかもしれません。
なお、このデモは あくまでもモバイル・エミュレーター・チェック用のデモ・ページでJavaScriptでフォント・サイズを計算しており、本番用ページでは無いと言うことは、ご了承 下さい。
通常、本番用ページはJavaScriptでフォント・サイズを計算しません、つまり本番用ページで様々な解像度をチェックするとなると、解像度を変更するたびにブラウザ側でフォント・サイズを調整しなければならないので面倒になってしまいます。
このデモはセレクト・ボックスでフォント・サイズを「0,85倍~1.65倍」まで変更可能です。
フォント・サイズの変更に伴なって、ブロック要素の「"縦"サイズ」も変化していることに注意して下さい。
これは、ユーザーによるブラウザのフォント・サイズの変更に対応可能である事を示しています。

勉強の手始めとして、その(PCとスマホでレイアウトが変化する)「チンチロリン」程度のモノか、又は もっと簡単なレイアウトから初めても良いです。
例えば、「画像」と「枠の有る要素を2つ」を作って、要素内には必ずテキストを入れ、PCとスマホでレイアウトを"変化"させるモノを作ってみるのも良いでしょう(要素に枠を表示させれば、要素からテキストが溢れているか目視で確認できる)。
また、(ブラウザ側の設定で)フォント・サイズもイロイロ 変更してみて、イロイロなフォント・サイズに対応可能かどうかもチェックしてみると良いでしょう。

>実用的なWebページ

「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー・フレンドリー(PCフレンドリー、タブレット・フレンドリー、スマホ・フレンドリー)なページが推奨されます。

>レスポンシブ・デザイン

(各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。
また、(ブラウザ側の設定で)フォント・サイズもイロイロ 変更してみて、イロイロなフォント・サイズに対応可能かどうかもチェックしてみると良いでしょう。
注.フォント・サイズを固定(絶対単位の指定)してしまうと、ユーザビリティが著しく低下する可能性があるので注意が必要です。
また、デフォルト・フォント・サイズ(1rem)より小さくしてしまうと、目の悪い人にとってはユーザビリティが悪くなってしまう可能性があります(デフォルト・フォント・サイズ(1rem)以上なら問題ありません)。
ユーザビリティが悪いと、(クローラのAIは)当然 ユーザー・フレンドリーでは無いと言う判定になるので、SEO的な評価は低くなります。


PCにおいては とりあえず「1k~4k」解像度をチェックしてみると良いでしょう。
具体的には「1k」では「約1000px*750px」(アスペクト比「4:3」)を、フルHD画面 以上なら「約2000px*1120px、約4000px*2250px」(アスペクト比「16:9」)の解像度をチェックすると良いでしょう。
「タブレット、スマホ」は既に登録されているプリセットの解像度でチェックしてみると良いでしょう。

「タブレット、スマホ」の解像度のプリセットは[Responsive]コンボボックスで選択可能です(下記の解像度をチェックしてみると良いでしょう)。
タブレット:『「iPad」(768px*1024px)、「iPad Pro」(1024px*1366px)』。
スマホ:『「Galaxy Fold」(280px*635px)、「iPhone 5/SE」(320px*568px)、「Moto G4」(360px*640px)、「Pixel 2」(411px*731px)、「Surface Duo」(540px*720px)』

解像度を変更したら必ずリロードして下さい。
解像度を変更してフォント・サイズが合わなくなったら、ブラウザの設定でフォント・サイズを調整して下さい。
Webページ作成時に何度も何度も解像度をチェックするとなると、フォント・サイズの調整も面倒になります。
上記「Webページにおける基本的な注意点」内にフォント・サイズ自動調整用の「CSS、JavaScript」が記載されているので、それを使うと便利でしょう、あくまでもモバイル・エミュレーター用のコードなので、本番用Webページではコメントにするなど、無効にして下さい。


>SEO(Search Engine Optimization:検索エンジン最適化)

まず、SEOの基本のキ(常識レベル)として「description、keywords」の設定をして下さい(下記参照)。

検索結果に表示!HTMLでmetaタグを使う方法【初心者向け】
https://techacademy.jp/magazine/12701

必須レベル(最重要ファクター):「記事の質(端的に言うとアクセス数)、特定の解像度に依存しないユーザー・フレンドリーなページ」の2本柱。
※この"必須レベル(最重要ファクター)"が最高の優先順位だと言うことに注意して下さい(SEOは王道で勝負が基本です)。
つまり いくら他を頑張っても、この"必須レベル(最重要ファクター)"がグダグダだったらダメダメと言う事になりかねないです。

強く推奨レベル:「(ペライチでない場合)パン屑リスト(nav要素)、レスポンシブ・デザイン、ロボッツ・テキスト(robots.txt)の設置、サイトマップ(sitemap.xml)の設置」。

推奨レベル:「description、keywords」。

注意点としては「記事の質(端的に言うとアクセス数)」は当然として、「特定の解像度に依存しないユーザー・フレンドリーなページ」に対応できてないと、Googleクローラーでペナルティーが課されるかもしれません。


もし、プロを目指すなら、上記のアマチュア・レベルを習得してから下記のプロ・レベルを勉強すると良いでしょう。
喩えて言えばアマチュア・レベルは「四則演算、因数分解」、プロ・レベルは「微分、積分」と考えれば分かりやすいでしょう。

フロントエンド・スキル
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000036D&tsn+0000036D&bts+2020/09/15%2000%3A31%3A53&


<Number>: [00000051]  <Date>: 2021/10/24 12:12:13
<Title>: 実用的なWebページ(2)
<Name>: amanojaku@管理人



まず 絶対単位は使ってはダメです、また vh(vmin、vmaxなども)を使っている場合、「スマホ、タブレト」でソフトウェア・キーボードを表示すると、ソフトウェア・キーボードが表示された分、viewport領域が縮小されレイアウトが崩れる可能性があるので相対単位でも「vh、vmin、vmax」は非推奨です。

初心者の場合は要素の横サイズは%が推奨されます。
どうしても%が気に食わないならvwで指定すれば良いでしょうが、100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてない問題があります(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)。
スクロールバーの幅を引きたい場合は、スクロールバーを自分でカスタマイズすれば、実際の表示領域を算出できるでしょう(又はJavaScriptで算出するか)。
なお フォント・サイズはemよりもremが推奨されます。
画像の横サイズをPC版と同じ値(「%、vw」など)で指定すると、当然 縦画面(タブレット、スマホ)では画像が見づらくなってしまいます。
なお、縦サイズも確定しているならobject-fitを使うことで、柔軟な設定が可能です(下記参照)。
キッチリやりたい場合はワイヤー・フレーム(横画面、縦画面)の各レイアウトを元にサイズ(相対単位)を算出しなければなりません、通常 widthの相対単位で計算するので、そうすると当然 ブラウザのウインドウ幅に連動します。
画像のサイズの設定を簡単に対処したい場合は、(デメリットとしてフォント・サイズと連動してしまいますが)画像のサイズをremで設定すれば簡単に対処できます。
なお 画像のサイズをディスプレイ・サイズから算出したい場合は、チョッピリ JavaScriptが必要になります。

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー
https://www.webcreatorbox.com/tech/object-fit

(PC用の)ブラウザの横幅の変更に対し、レイアウトも動的に変化したり、(PC用の)ブラウザの横幅が狭くなりすぎたら、スマホ用の縦画面の配置に変更されたりする、リキッド・デザイン(リキッド・レイアウト)と言う手法も提唱されているようです。
※要素の幅が静的ならgridレイアウトの「grid-template-columns: repeat(auto-fill,~」で自動的にレイアウトが崩れるgridが可能です、「justify-content」でカラム間隔を指定できます(その場合column-gapは最小値になるようです)。

リキッドレイアウトと代替レイアウト | CC、CS6
https://helpx.adobe.com/jp/indesign/using/alternate-layouts-liquid-layouts.html

「要素、border、margin、padding」の各サイズをvwなどで設定すると、当然 ブラウザのウインドウ幅に連動します。
もし ユーザーが意地悪くブラウザのウインドウ幅を どんどん小さくしてしまうと、(レスポンシブ用などの)メディアクエリも効きますし、当然 それらも連動します。
(ユーザーの)ブラウザのウインドウ幅の変更で、当然 メディアクエリが効いて欲しい部分もあるでしょうが、メディアクエリが効いて欲しくない部分も有り得ます。
(通常 そこまで考慮しなくても良いですが)もし ブラウザのウインドウ幅に連動させたくない部分はチョッピリ JavaScriptが必要になります、ただし そうするとレイアウトが崩れる可能性があるので、想定の範囲内でレイアウトが崩れるように設計する必要があります。

CSS の値と単位
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units

remはフォント・サイズなので、解像度と(remは)因果関係が薄いので、remを使う場合はレイアウトが崩れる可能性を考慮し、想定の範囲内でレイアウトが崩れるように設計する必要があります。

HTML5ではbodyタグ直下またはbodyタグのheight値を継承している要素の子要素はheightの%指定が効かないと言う問題点があるので、%指定を使用する場合には、それを考慮して使わなければなりません(親要素にheight値が存在するなら、当然 その縦サイズは子孫要素に影響します)。
また、自要素サイズを%指定にすると、レイアウトの崩れなどで親要素がリサイズすると、自要素も それに合わせてリサイズすると言う問題があります(想定の範囲内のリサイズなら問題ないでしょうが)。
とりあえず、レイアウトが崩れても親要素の横サイズはリサイズしないように設計しておけば良いでしょう。
ただし、親要素の横サイズをリサイズしない設計にしたとしても、(レイアウトが崩れると想定した場合)親要素の縦サイズはリサイズするだろうと想定されるので、自要素の縦サイズは%指定を使用してはならない(ただし、レイアウトが崩れないと想定されるなら、自要素の縦サイズに%指定を使用しても問題は無い)。
もし、自要素の横サイズを文字列長に合わせたい場合は、%指定を使用してはならない(その場合は、通常 テキストも改行しない設定にする)。

ちなみに、「CSSフレックスボックス、CSSグリッド」では要素の横幅をブラウザ画面の割合で指定可能です。
「CSSフレックスボックス」「CSSグリッド」でググって下さい。

もし、実際にWebページを作る場合は、(いきなり難しいことを やろうとしても実現は困難なので)勉強の初めとして、その「チンチロリン」程度の単純なレイアウトか、又は もっと簡単なレイアウトから初めても良いです。
例えば、要素を2つ作って、要素内には必ずテキストを入れ、PCとスマホでレイアウトを変化させるモノを作ってみると良いでしょう。

それで各解像度に対応可能か、又 ブラウザ側でのフォント・サイズの変更に要素サイズが動的に追随可能かチェックしてみると良いでしょう。
なお デフォルトのフォント・サイズ以下にしたり、固定(絶対単位の指定)にしたりするとユーザビリティが著しく低下する可能性があるので注意が必要です(デフォルトのフォント・サイズより大きくするなら問題ない)。


<Number>: [00000058]  <Date>: 2021/08/27 15:47:42
<Title>: 実用的なWebページ(3)
<Name>: amanojaku@管理人



ユーザーは自分が見やすいように(ブラウザの設定で)フォント・サイズを設定しています(当然、目が悪い人は大きめにしています)のでデフォルトのフォント・サイズ以下にしたり、固定(絶対単位の指定)にしたりするとユーザビリティが著しく低下する可能性があるので注意が必要です(デフォルトのフォント・サイズより大きくするなら問題ない)。
ユーザビリティが悪いと、(クローラのAIは)当然 ユーザー・フレンドリーでは無いと言う判定になるので、SEO的な評価は低くなります。

注意点として、文字を囲む要素のサイズはユーザーのフォント・サイズの変更に応じて動的に変化させる必要が有ります。
例えばフォント・サイズを大きくした場合、ザックリと言うと文字列の長さに応じて横幅を伸ばすか、横幅を固定するなら文字列を改行させて (その行数が入るように)縦を伸ばすかで対応しなければなりません。

下記・画像は とある"実在"するサイトで、(ブラウザの設定の)フォント・サイズの変更に対応できていない"実例"です。
「2番目、3番目」の画像はフォント・サイズの変更に対応できておらず、フォントの表示が阻害されています(当然 SEO的な評価は低くなります)。

1番目の画像は、横幅は固定しており文字列を改行させて (その行数が入るように)縦を伸ばしています。

2番目の画像は、要素より文字列が大きいために、要素から文字がハミ出てしまっています。

3番目の画像は、要素よりフォント・サイズが大きいために、フォントの下の部分が隠れてしまっています。

Block( Address 00000215 Identity 00000037 )






ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.