iPhoneノッチ対策のテンプレートアップデートをします、いや、するかも

2024.11.8 加筆
フォントサイズの説明が不明瞭に感じましたので追加説明を入れました。

はじめに

やらなきゃなぁ、いやどうしようかなぁ、とズルズル引き伸ばしてきましたが、ここでみなさんのご意見を伺うのも良いのではないかと。お尋ねしたいのは以下の点です。

• iPhoneノッチ対策 有りか無しか
• fluidフォント導入 有りか無しか

それぞれ順を追って説明します。

iPhoneノッチ対策とは

iPhoneデバイスには ノッチ (notch) と呼ばれる特殊な部位が存在します。

赤い部分、カメラの丸いのとかついてる部位。少し古い型だと上のスクリーンショットのような形状で、最近はもう少し控えめなデザインに変わっています。ダイナミックアイランド型 (dynamic island) という名称らしいです。

ブラウザだと表示面ではあまり変化ありません。場所取ってることに変わりはない。そしてスクリーンショットは ポートレートモード (portrait mode, 縦向き) ですが、ランドスケープモード (landscape mode, 横向き) だとこのノッチがすこぶる邪魔。

ノッチの部分が使えていない、という状態です。これがデフォルト。表示領域がノッチの幅のサイズ分削られています。これを

こんな風にめいっぱい使わせてくれよ、というのが対策です。

で、デバイス幅いっぱい使いきる設定にするのは至極簡単です。HTMLに一部追加するだけ。弊テンプレートの場合は

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

という箇所がありますので、以下のようにするだけです。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, viewport-fit=cover">

ただ、それだけではいけない。ノッチ部分に配慮せず幅を使ってしまうと

ノッチを計算しないと『操作しづらい』『読みづらい』といった事態になってしまいます。本当は記事を書いて「必要だと思う方はご自身で対処を」としたかったんですが、いやこれ無理筋だわ、と。どのテンプレートでどの部位にノッチに対する計算を入れるか、それぞれの計算式は、とか説明してユーザーに一任するというのはあまりにも不親切だと思った ^^;

そうは言っても、そもそもランドスケープの状態を気にする方がどのくらい居るのか、というのもあります。それよりもテンプレートをアップデートする方が面倒なんじゃないかなー、とか。どうしようかこれ(笑)

いずれにしろ火急の要件というわけではないでしょうから、時間があればやる、という感じで良いでしょうか。来年になること確定なんだけれども (∵`)
本件と併せて悩んでる別件があるので次章で説明します。

fluidフォントについて

日本語だと『流動サイズフォント』とかかな、と思うんですが、フォントサイズ指定というのはこれまでの感覚だと、12pxと指定すればパソコンでもスマホでも12pxのまま。emでもremでも指定したサイズそのまま、というのが普通だと思います。

少し考え方を変えてみると、「パソコンはとても大きい。そしてスマホはとても小さい。ならば文字もデバイスの画面に合わせて変化させた方が良いのでは？」と。例えば以下のサンプルのような場合。

パソコンでは 100px で表示されますが、スマホでは 38px まで小さくなります。スマホで 100px を維持してしまえば

こんな感じに。…これはこれでデザインとして成り立ってる感じするけれども気のせいです。

OATH - FC2ブログテンプレート

OATHテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。 設定ページ...

vanillaice000.blog.fc2.com

これをやるのにいわゆる『fluidフォント』の考え方で実装しています。メディアクエリでの「パソコンならこのサイズ、スマホならこのサイズ」という切り分けではなく、デバイス幅に応じて徐々に大きく、徐々に小さく、という形です。

Wordpressなんかは結構大きな変革があり、現在は ブロックテーマ と呼ばれるテーマ構成の時代に入っています。そしてfluidフォントの概念も取り入れられているので、個人的にWordpressテーマには当たり前に利用、というか導入しています。けれどもFC2ブログではまた事情が違うというか。

Wordpressは今 jsonファイル を利用でき、そこにfluidフォントの設定もできるので良いんですが、FC2ブログにはブログを書く際のツールに対しテンプレート制作者が、あるいはユーザーが機能を追加したり削除したりなどはできないわけです。下準備が無い状態でfluidを導入するとなると…。

えっと、みなさんエディター(投稿画面)のツールから フォントサイズを変更したりなどしますよね。HTMLモード利用者ならフォント指定を直接HTMLで書いている場合も。fluidの考え方・有効性をユーザーが把握していない状況下、テンプレート側でfluidを採用してしまうと恐らく「フォントの大きさがパソコンとスマホで変わってしまいます」「* 自分が指定したフォントサイズとテンプレートのフォントサイズが合致しません」といったクレームが出てくると思います。するとfluidの概念から説明しなければいけなくなって私が自分の首を締めることに繋がる(笑)

自分が指定したフォントサイズとテンプレートのフォントサイズが合致しない、というのはですね、例えばテンプレート内で、あるテキストに font-size: clamp(20px,5vw,80px) とかなんとか指定されたいたとします。それをパソコンで見て、自身が追加したテキストに font-size: 24px と指定したとします。パっと見て「テンプレートの文字より自分で書いた文字の方を小さくしたい」と思ったわけです。ところがスマホから見てみると、テンプレートのテキストよりも自身のテキストの方が大きい、逆転してしまっている、といったことも起こり得ます。なぜなら clamp によるフォント指定は「最小で20px、最大で80px、中間は5vw(画面幅参照)」という流動性を持った指定だからです。24pxという指定は絶対数値ですから、パソコンでもスマホでも変わることなく24pxです。

なのでfluidを使うならば 全てのフォントサイズが流動 という状況を作ってやらないと厳しい。そしてそれはFC2ブログの現時点の特徴を見ても難しい、と。

Wordpressの編集画面です。フォントサイズの選択肢がズラッと並んでいます。これらは テーマ制作者があらかじめ設定しておくことがほとんど なので、制作者がfluidフォントを採用していれば ユーザーによって書かれた文章も自動的にfluidになる という仕組み。そしてその仕組みはFC2ブログには無いよ、ということです。

なのでWordpressではテーマ間で差異が生じるんですよね。テーマ変えたらなんかフォントが… となった際に一括で修正しようと思ったらjsonファイルを修正しないといけない。簡単レイアウト、簡単カスタマイズ志向とはいえ、想定外の変更についてはかなり敷居が高くなった気はします。これはブロックテーマの弊害やなぁ、と思う。

話を戻して、もしFC2でもfluidを導入するとしたら 1rem = 10px はやめたい というのもあります。多くのテンプレートが rem という単位を利用しており、これも恐らくほぼ全てで html{font-size: 62.5%} という指定が行われいるかと思います。『1remを10pxとする』という操作なんですが、本来の1remは16pxなんですね。けれども10pxを基準にするとわかりやすく、小数点なんかも扱わなくて済むので便利だということで、わざわざ10px基準に設定しています。それがfluidだとちょっとなぁ…うーん、直したい(笑)

でもみなさん「1remは10px」って思ってるでしょう。たぶん。今更デフォルトに戻したら混乱しますよね。きっと。

fluidは今後当たり前になっていくのではないかと思っています。なのでどこかのタイミングで切り替えをしたいところです。

さいごに

Wordpressの例を少し出しましたが、今は 誰でも簡単にレイアウトができる、できなきゃだめ という時代にはいっています。とはいえ、テーマ制作者があらかじめ準備したレイアウトあるいはデザインを簡単に設置できる、という意味です。好きなように配置をする、ということですね。ユーザーはカスタマイズが簡単になりましたけれど、制作者側は、これがもう、ホント嫌(笑)

これまでのテーマ作成の下地(古い方式は クラシックテーマ と呼ばれるようになりました)があるからできるやろ、と思っていましたが、これが一筋縄ではいかない。コメント方式のHTMLとかまじで意味わかんない。頭の中がグッチャグチャです。そしてデザイン実現までの道のりが遠いこと(笑)
これまでなら好き勝手にJS組んでHTML書いて、で良かったのに、ブロックテーマだと ユーザーが好きな場所で好きなように配置すること が前提ですし、Wordpressが自動で出力する内容を活かさないといけないしで。

先回のアップデートで カスタマイズファースト を目指してコード内容を刷新したのですが、今後はその方向で合ってると思います。Wordpress界隈ではブロックテーマの登場によって、昔みたいに「Wordpressのヘッダー画像変えるだけで5000円請求された」とかぼったくり案件も減るんじゃないかな。FC2ブログの弊テンプレートも「誰かにお金を払ってカスタマイズしてもらう」という事態にならないよう、カスタマイズ便宜を図っているつもりなので、これからも維持していきたいな、と。

FC2ブログでのiPhoneノッチ対策、fluidフォントについてご意見のある方はコメント頂ければ幸いです(論争はしませんのでご容赦ください)

最後の最後に。ここのところWordpress, Shopify, スマホアプリ 等々にかかりきりの状態で、そんな中私は思いました。FC2ブログ、めちゃくちゃ使いやすいと思う。初級から上級まで幅広い層で楽しめる良いサービスだと。FC2を持ち上げるわけじゃないけど、ホントそう感じます。「Wordpressならなんでもできる」とよく言われるんだけども、YES, 何でもできる能力があるならね ってことなので。