Factory制作メモとか、趣味とか、雑記。コピー2021.03.12自戒の念として。目次ブレイクポイントについてフォントについてフォントサイズについて個別コンテンツについてWEBサイト制作の今後を考えてみるブレイクポイントについてレスポンシブだから特定のデバイスというか画面幅を基準に、だから具体的な数値をもってデザインの最適化をやっていくわけで。いいんだけどさ、文句はないんだけどさ。気にかけるところが多すぎる。鉄板のブレイクポイントはその時々のニーズによって変化するんで、常に時流を読むっていうか新機種が出たら情報を集めるっていう難儀な必要がある。androidはまあ各社で好き勝手やるからあきらめがつくけど、iphoneが新機種で複数の画面サイズでバリエーション展開をしやがったときはしんどさしかなかった。いうことでまあ、普段から気にかける点はPCとスマホのブレイクポイントと、スマホにおいては最小幅も気にかける必要がある。iPhone12で最適化するとiPhone5の幅じゃ耐えられない。全機種対応の気構えで挑むか、古くてニーズの減ってきたものは切り捨てるか、って感じの思考が必要になる。他所がこうしてるからうちもこうしよう、っていうのもいいと思う。そのためには大量の他所をピックアップして裏付けをしっかり作らないと痛い目見ることもある。うん、取っ掛かりと手段はどうあれ情報収集と決断は欠かせないんで本当にめんどくさい。フォントについてiphoneとandroid、WindowsとMacみたいに対になる存在があって、IEの暗黒時代みたいなブラウザ間の問題はさほどなくなって、差もなくなって、HTMLとかCSSに独自の解釈を突っ込む余計なオリジナリティは無くなってきた。それでもフォント問題が残る。デバイスとかOSによって搭載されてるフォントは違うし、初期状態で設定されてるフォントも異なる。セリフなのかサンセリフなのか、ゴシックなのか明朝なのか、みたいな感じに。フォントを統一することはwebフォントが登場したおかげで可能になった。レイアウトもCSSリセットをしてしまえば統一できる。webフォントって重いから、WEBサイト表示後に切り替わるってのも往々にして起こる。それはダサいし、だからって反映後に表示させたいってことでロードを噛ませると閲覧がめんどくさくなる。すると、選択肢は増えて嬉しいんだけど、デバイスごとの自由にしてしまったほうが楽なんじゃないかなって思ったりする。ADSLが登場した頃は定額でネットが使い放題になって嬉しかったけど、スマホのプランは上限設定がある。ぶっちゃけたかがネットサーフィンってもんで回線を食い尽くすのはアホなことだと思ってるんで、極力DLする情報は抑えたい。まーでもそれって、ユーザーを優先するかクライアントを優先するかって話でもある。フォントを気にするクライアントはほぼいないけど、もしいた場合にはどうしようねっていう、問題提起の可能性を意識したほうがいい。フォントサイズについてこれについては一つこだわりがあって、フォームのテキストサイズは16pxを最小値にする。16pxを割るとiphone環境ではinputがアクティブになったらそこを中心に画面が自動的にズームされる。入力が済んでもズームされっぱなしだからユーザーはクソめんどい。ズーム対策はmetaに一行足してしまえば済むんだけどね。16pxってサイズは使ってもタイトル部くらいでほぼ見ないサイズだから、閲覧が主であるWEBサイトにおいて入力フォームはでかくしたほうがいい意味で浮いてくれるんじゃないかなって思う。通常の、閲覧のためのコンテンツについてどう考えるか。スマホの解像度は何を求めてるんだってくらいに素敵な仕上がりなんで、小さな文字でも割と読める。それは画面の精度がいいってだけで、人の視力で耐えられるのかって話で、可読性とか可視性を考えたらどうなのよって話で、注視したら読めるけどその努力がめんどくせえよってなりかねない。14pxをベースに構築するのが良いんじゃないかなって思う。12pxでも文字間を調整したらいけると思うけどね。読ませることが最優先であれば14px、表記することが最優先であれば12px、みたいな。スマホはデバイスのスペックもブラウザの性能もPCと遜色ないレベルではあるんだけど、だからってデザインに凝るんじゃなくて、言っても所詮は手のひらサイズのデバイスでしか無いんだから、読みやすさに重きをおいたほうがいいと思う。かっこいいデザインだから何だっていうのか。見づらかったらダルいでしょ。例に漏れずWEBサイトのテーマありきではあるんで、都度折衷案を探す作業をする。個別コンテンツについてレスポンシブデザインつってもPCとSPでヘッダー自体をそれぞれ用意してブレイクポイントで切り替えるってのが未だにある。useragentとかで切り替えるんじゃなくて、HTMLコード内に両方存在してるっていう、そういうのがある。いうこともあるよねってことで、個人的には嫌いだけど必要性は否めないから否定まではイカないんだけど処理が甘いやつをちょいちょい見かける。スマホ表示でメニューを表示してPC表示に変えたらスマホメニューが表示されっぱなしとか。レスポンシブのリキッドレイアウトなんだからそういう状況は起こりうるんだからちゃんと処理しとけよっていう。単一のコードで見せ方だけを変えてしまえばそういった不具合は起こり得ない。単一のコードで済むんであれば調整も1箇所で済む。レスポンシブが当たり前になってからというもの、WEBサイト構築の手間は単純に言って倍になった。ケー時代はPCとガラケーでそれぞれのサイトを作るのが当然だった。それはガラケーがあまりにも貧弱だったからで、それはそれでいい棲み分けだったと思う。スマホが登場してスマホ用のサイトを作るサービスが出てきた。PCサイトにアクセスしてもuseragentで切り替えたりして、だからガラケーと同様に、専用のサイトを作ってた。WEBサイトを作るにあたってはPCだけですか、ガラケーも作りますか、みたいな感じで言えたんだけど。今は1つのサイトでPCもスマホも両方対応してるのが当たり前になってる。手間はクソほど増えるんだけど、外野からしたらサイト1つ作るのにどんだけ時間掛かってんだよ手を抜いてんのかみたいな印象しか受けない。いうことで僕らがすべきは工数の削減と、それに耐えうるレイアウト・デザインの構築じゃないのかなって思う。そのために必要な知識は膨大になるんだけど。何がいいたいかって、自分の持ってる選択肢が少ないと自分だけじゃなくてみんなが不幸になるって話。PCならヘッダーにメニューを格納するけどスマホだったらposition:fixed;でアレしたいから、組み方違うから分けなきゃいけないとか、mouseoverで表示してた下層メニューをタップで表示するようにしなきゃいかんけどjsで切り替えるのがうまくいかんから分けるとか、そういう感じでいわゆる「逃げ」のために組むとなんかしらがどっかで不具合になることがある。無理してとりあえず作れた、クライアントはWEBのことがわからんからとりあえずフロントでそれっぽく見えたら勝ち、だけで済ませるとそのWEBサイトを運営したり更新する時、担当者に恐ろしい負荷がかかる。他社が運営するとしても同業を潰し合ってもしょうがないよね。WEBサイト制作の今後を考えてみる20年くらい前は趣味ではじめて本でも読めば一線級の戦力になれた。cssが出るか出ないか、jsだって無くたって困らなかったし、新しい機能が追加されてもそもそもブラウザが耐えられなかった。保守的な姿勢があればそれでよかった。jsいじれますとかflashが触れますとかphpが組めますよがあれば素敵な付加価値ってくらいで、一般的なWEBサイトにおいては無いと困るって場面はほぼなかった。ことで、敷居はかなり低かった。それが今ではあからさまに一転して、「HTMLはプログラムじゃない」とか言われてたのにcalcとか使えるようになったり色々の自由度が跳ね上がったおかげで、それにjsも使って当たり前になったし、wpで制作も当たり前な世の中だからphpも欠かせなくなったし、勉強しなきゃいけないことが極端に増えた。それらを修めるのだって何が必要か、最低限のラインをどこに引けばいいのかよくわからんし。覚えきれないからこのブログみたいに外部に書き出してまとめを作ったり、他所から引っ張ってくるって手段も欠かせない。後追いがどんどんきつくなる。HTMLがわからなくてもWEBサイト作れますよ、みたいなサービスもあるけどそんなもの、実際触ったらHTMLの知識がないとろくなもんにならない。ブログとかnoteとかみたいな役割を明確に絞ってるものならいいんだよね。WEBサイトなんていう自由度の高いものを作ろうとするなら、やっぱり知識は必要になる。凝り性だったり好奇心旺盛な人間性がないと結構厳しいと思う。業務外でも自発的に考える癖がないと時間がいくらあっても足りない。いえば、めんどくさがりの性分も必要。手を抜くことを考えて、どうやったら楽に済ませられるかっていう、物事を単純化したがる気持ちがないと、いくらでも凝る事ができる終わりのない作業だから、何をしたら達成になるのかっていうゴールを明確にして、その経路もクリアにしないと、ほんとに時間だけ食って、リリースまで長引いたり時給換算でめちゃめちゃ安くなってしまったりとかになる。矛盾してる気もするけど、まあうん。同業じゃないと苦労を共有できない、恐ろしくめんどくさい分野だから、人に勧めることはしないと思う。そんな感じで間口がどんどん狭くなってるんで、なるべくしてなった人間か一握りの変態だけの業界になるんじゃないかと思う。業界的には世の中にネットが存在する限り食いっぱぐれることはないと思う。WEB[wp]テスト環境から本番環境への移行メモあんまりやらないからビビるっていうね。WEB[wp]the_date()は一日一回という話たまたま気がついた。日本語サイトと英語サイトを用意したときとかにたまに発生するめんどいやつ。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。ホームWEBレスポンシブデザインにおける注意点スポンサーリンク掲載内容について内容をパクる場合は自己責任でお願いします。内容が古い場合、環境が変わって通用しないことがあります。記事の内容は最適解ではなく、作成時点においての筆者の理解の限界であることが多々あります。修正やそもそもの宗旨替えは不定期に行われるため、活用される場合はご注意ください。Highlighterがいよいよダメっぽいので、プラグインを変更しました。古い記事は表示が壊れてるものがあります。楽天Room主に釣具とか。max-age=0"),l.setRequestHeader("dlm-xhr-request","dlm_XMLHttpRequest"),l.send()}}タイトルとURLをコピーしました。