えっと、『いつまでに』と言えなくてすみません。余暇を見つけて少しづつ進めます。本記事は『何故修正するのか』そして『記事を書く際あるいはテンプレートカスタマイズの際に注意すべき点』さらに『カスタマイズのコツ』について。
2023.5.30
IEに関することなど不足していた内容を追加しました。
修正の意義
大モバイル時代 ( ﾟДﾟ)ﾉ
FC2ブロガーさんの場合は『記事を書くのはパソコン』という方がまだ圧倒的に多い気がしますが、『記事を読む』側に回ればその使用デバイスは『パソコン』と『スマホ or タブレット』が半々あるいはモバイルが優勢かもしれません。
要するに昨今のテンプレートは スマホ至上主義 でなければいけない。もちろんパソコンをおろそかにして良いわけではないですが、『スマホで見やすい・使いやすい』を第一に考えなければいけない時代になっています。
過去作の修正は主に以下の点に留意して行います。
- 小さすぎるフォントが存在していないか
- タップ範囲が小さすぎないか
- 薄すぎるフォント色が存在していないか
- 背景と文字のコントラスト比が適切か
- カスタマイズしやすさに配慮できているか
- idへのスタイル指定を極力避ける
- Chromiumグリッチ対策
- Internet Explorer 完全非対応
- カテゴリ階層を正しく表記
- Font Awesomeの排除
など。他にも各テンプレート、気になる点があれば変更するつもりです。次章からそれぞれ理由や詳細などを説明します。
小さすぎるフォントの排除
フォントサイズは最小で12px を厳守します。10px, 11pxといったフォントサイズはGoogleやWHATWGがはっきり ダメ！ と言ってますので、わざわざそれに逆らう必要は無い(笑)
タグなんかはブログ歴が長くなると数が蓄積しますので、リスト表示など列挙の際はフォントを小さくしたくなりますけどね。でもダメってことなので最小でも12pxです。みなさんも記事を書かれる際に極小フォントを利用しないよう注意しましょう。
記事本文についても比較的古い時期にリリースされたテンプレートというのは総じてフォントサイズが小さいです。平均で13〜14pxといったところ。今それではやはり小さすぎると思いますので、標準を 16px と定めて修正するつもりでいます。日本語は小さめの方がおしゃれな感じになるんですが、野暮ったくとも16pxで。これが企業のページで、例えば『ネイルサロン』『美容室』といった場合、おしゃれなサイトにしないと訴求力に欠けるといったこともありますが、ブログの場合は記事を読んでもらってなんぼ。洒落感が落ちようとも基本は16pxで行きます。個人的には14pxぐらいが見やすいんですけどね ^^;
タップ範囲は最小でも34px、余白は最小8px
この要件については現実的な話しなかなか厳しい。タップ範囲とはつまり何らかのボタンだけでなく リンクの範囲 のことも含みます。リンクはテキスト形式で表示されることもあればボタン形状で表示されることも。いずれにしろ最小でも短辺 34px を守れ、というお達しです。
実際には 最小48dp という表現で推奨されています。dpというのはCSSでは利用できない単位ですし見慣れないと思いますのでGoogle, WHATWGによる他の表現を探すと 9mm を確保しなさい、とあります。9mmとは 34px です。あくまでも最小なのであって、推奨は 44px 以上です。
28px四方
34px四方
44px四方
ボタン類に関しては『メイン』『サブ』といった優先度に関する概念もありますので、適宜大きさを変えなさいとも言われています。もちろん『最小』『推奨』などに配慮しつつです。
全て44px四方
メイン44px四方, サブ38px四方
また、タップ要素が隣接している場合には少なくとも 8px の余白が必要です。そしてタップ範囲が小さければ小さいほど『押しづらい』ものになりますので、小さいものほど距離を取れ、と。
全て8px余白
サイズ34は15px余白, サイズ44は8px余白
結局なんでこういうことをうるさく言うかというと、誤タップの可能性を低くするため です。私たちでも広告なんかに対して「誤タップがー！クソがー！」とか言っている身なわけですから、自分が管理するページや記事でも同じように他者が誤タップしないよう配慮が必要だよね、ということです。
ただFC2ブログ上で難しいのはやっぱりテキストリンクです。例えばタグ名が『料理』『愛』みたいな短い文言だったりすると、タップ範囲を十分に取れないことも。テンプレートではそのあたりも極力調整したいと思っています。ただ皆さんが書く『記事』に関してはテンプレート制作者の手の及ばぬところにありますので、各自気をつけて頂く、ということになります。
薄い色のフォントを排除
『おしゃれだな』と感じさせるテンプレートというのはフォントサイズが小さくまたフォントカラーが薄いことが多いという事実。かつては『余白が多ければ多いほどおしゃれ』といったデザイン傾向が流行ったこともあります。まぁ実際余白はちょっと大きめの方がシャレオツな感じはする。
特にリンクの色が薄いと感じたものについては修正していきます。
上記は2015年にリリースしたもので既に配布を終了していますが、今となっては色々ダメ(笑)
自分で自分にダメ出しするのは心苦しいというかなんというか… グゥ (;`ｰ´)o
背景と文字のコントラスト比を確保
WCAGの1.4.3 Contrast(Minimum)に合格するよう修正します。
colorにredとgreenはだめなのよねぇ… 文字の色、文章の色づけ についての啓蒙を何度か行っております。私的には コロコロと色を変えるべきではない という結論なんですが、それでも『利用されるべくして利用される』色というのはあるわけで。ズバリ『赤』と『緑』です。...
vanillaice000.blog.fc2.com
個人カスタマイズへの配慮
比較的最近リリースしたテンプレートはスタイルシート内の 注)主要カスタマイズ(variables) と注釈がある部分で色やサイズといったものを簡単に変更できるようにしてあります。予想されるほとんどのカスタマイズをほぼその部位の変更だけで済むように計算しようと思っています。
とはいえHTMLの修正はそういうわけにはいきませんので、あくまでもCSS(スタイルシート)の方です。従来のような「xxxのフォントサイズを大きくするには.yyyで検索してその中のzzzの…」といった指南をしなくて済むよう、できるだけ自力解決ができるよう整えたいと考えています。注釈が多いとどうしてもファイルサイズが大きくなりますが、利便性と天秤にかけてもその方が良いと判断しました。
例えば
--align-read-more: right;/* 続きを読む の位置(left or right) */こんな風にあったとしますね。構造は以下の通りです。
--不特定文字列: 値(指定内容, フォントサイズやカラーなど);/* 説明 *//* と */ に囲まれた文章が『何を指定しているか』『用途はなにか』の説明です。みなさんが変更するのは : の記号の 右側、緑の部分 だけです。この場合は right ですね。これを left に変更すれば『続きを読む』のリンクが左寄せになりますよ、と。やり方さえ覚えれば簡単で、コツらしいコツもこれだけです。対象HTMLを部位特定し対象セレクタを探す、といった従来の手間を省くことができて時短に貢献。
そのため、多少トリッキーな方法でCSS指定をすることがあるかもしれません。「なんでわざわざこんな書き方を？」と思われるような指定の仕方ですね。それは「カスタマイズの利便を優先させているのだ」と思って頂ければ間違いではありません。
idへのスタイル指定を極力避ける
CSSの仕組みを考えると idセレクタ を利用するのが最も効率が良いのですが、みなさんがそれらを流用したり、複製したりといった過程で構文エラーを発生させているケースを結構目にしています。なのでidへのスタイリングは今後極力避けたいと思います。
既存テンプレートで既にidを利用して個人カスタマイズを行っているケースも考慮し、idをclassに書き換えるのはできるだけ控えて、classを『追加する』という形を取りたいと思います。
Chromiumグリッチ対策
Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処
表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか？」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...
ブラウザ独自グリッチ(バグ)への対策は修正が行われた際には取り除かなければいけなくなりますが、状況が好転しないようなので導入に踏み切りたいと思います。作業中にベンダー側の抜本的修正が入って無駄になる可能性もあります (* _ω_)
Internet Explorer 非対応へ
公式サポートがこの度めでたく(?)終了しましたので、これをもって 完全非対応 とします。セキュリティサポートの終了したOSやブラウザについてはいかなる理由に於いても便宜・対応措置などは取りませんのでご理解をお願いします。IEのために含めていたハックやフォールバック(広報互換)など全て取り除きますので、個人的事由でIE対応が必要な方は旧テンプレート内容を保をしてください。
カテゴリ階層を正しく表記
FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト
FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...
こちらについては構造上無理な場合もある「かも」しれませんが、全テンプレートで反映できるよう努めます。
Font Awesomeの排除
久々に公式サイトを見てみたら、かつては無料だったアイコンの多くが有料化されている ことに気づきました。これこのまま使っていては危険だな、と思いましたので、インラインSVGに変更しようと思います。
記事内でテンプレートに依存したFont Awesome利用を行っている方は、内容が消失してしまいますのでお手元のテンプレートファイルを無くさないよう気をつけてください。
まとめ
フォントが小さくてお洒落だな、フォントカラーが薄くてほんわかして可愛いな、等が通じなくなってきている次第。デザインもその時々の流行りというのがありますが、ユーザービリティについては流行り廃りとは分離して考えなければいけないな、と改めて感じています。
流行りといえば一時期アイコンなどは角を削った『丸み』を帯びた『ベタ塗り(fill, solid)』が主流になっていましたが、2023年現在ではまた『角張り』『線画(stroke, line)』ブーム再来のもよう。YouTubeアイコンも軒並み角ばったものに変更されています。デザインの流行って結局は繰り返すものなんですが、UI, UXはある意味不動というか、流行り廃りの概念ではなく進化の一点というか。新しい技術・デバイスが登場すればそれにふさわしいUIが生まれる、みたいな。
というわけで、鈍足ではありますが地道に修正を行っていきます。今の状態を保持したいという方はお手元にあるデータファイルを消失させないようお気をつけくださいね。
There are no comments yet.