dfabulich
2023 年 3 月 29 日午前 12:09
1
iOS 16.4 がリリースされたので、このフォーラム（Meta）を含むいくつかの Discourse フォーラムを iPhone のホーム画面に追加するために「ホーム画面に追加」（A2HS）を使用しました。
iOS で Meta をホーム画面に追加すると、このようになります。
よく見ると、これは実際には透明な画像で、ほぼ黒の境界線があり、黒い背景に囲まれていることがわかります。一度気づくと、もう気にならずにはいられません。
これが「apple touch icon」だと思います。
\u003chttps://d11a6trkgmumsb.cloudfront.net/optimized/3X/a/c/ac166452701ce353fa6c8865e99879e8cacfb960_2_180x180.png\u003e
Apple はこのアイコンに黒い背景を自動的に追加するため、アイコン上に 2 種類の黒色が生じます。
さらに悪いことに、アイコンをタップしてからホーム画面に戻ると、iOS は一時的に透明なアイコンを表示し、その後 1 秒後に黒い背景を描画します。
（Apple が透明なままにしておいてくれればよかったのに！このアイコンは…一瞬は pretty good です。）
Meta の「apple touch icon」を、透明度のないアイコンに置き換えるのが最善だと思います。Photoshop のスポイトツールを使用して、この画像のように、ほぼ黒の背景に一致するように正方形を塗りつぶしました。
ずっと良くなりました。私のバージョンを使ってもらっても構いませんし、お好みで自分で作成してもらっても構いません！
「いいね！」 9
dfabulich
2023 年 3 月 29 日午前 12:11
2
さらに、Discourseは設定で「apple touch icon」を黒い背景で表示することを提案します。これにより、サイト管理者は透明なアイコンを「apple touch icon」として使用した場合に何が起こるかがより明確になります。
編集：管理者の設定で「apple touch icon」が角丸 と 黒い背景で表示されると、さらに良くなります。これにより、サイト管理者は画像にApple提供の境界線半径が追加されることがわかります。私が参加している別のフォーラムでは、色付きの境界線を持つ「apple touch icon」がありましたが、Appleが角丸を追加したときに当然ひどい見た目になりました…
「いいね！」 6
Stephen
2023 年 3 月 29 日午前 2:29
3
その色の周りの領域はロゴの一部です。黒に黒はまったく正しく見えないと思います。黒にダークグレーの方が代替案よりも良く見えます。その領域はDiscourseのDを形成しており、それがないと、重なり合う吹き出ししか見えません。
ダークモードバージョンは黒を反転させます。
「いいね！」 3
dfabulich
2023 年 3 月 29 日午前 2:45
4
うーん、そうですね。これとか？
…どうでしょう。もっとちゃんとしたデザイナーにでも相談した方がいいんじゃないですか！
「いいね！」 7
メタのapple touch iconを、ロゴを前面に配した白い背景のものに更新しました。これでずっと良くなるはずです
ご指摘いただきありがとうございます。
「いいね！」 11
Stephen
2023 年 3 月 30 日午前 2:14
7
スケールは大幅に変わりましたか？間違いなく少し小さいように見え、白い海に圧倒されています。
「いいね！」 3
はい、スケールは変更されました。白い背景を持つことで、アイコンが少し縮小され、アイコンを白いスペースが囲むようになりました。
ただし、フィードバックによると、人々が望むよりも小さく見えるようですので、調整可能です。
「いいね！」 2
モバイルデバイスで使用されていた古いロゴはどうなりましたか？また、なぜ異なるデザインを使用しているのですか？
以前使用されていた透過PNGは、ホーム画面にピン留めすると透明部分が黒に置き換わり、ロゴの一部が隠れてしまうため、ロゴが変更されました。
ホーム画面にピン留めした際にロゴが正しく表示されるように、明示的な白い背景を使用したアイコンに置き換えられました。
「いいね！」 3
sam
2023 年 3 月 31 日午前 12:52
11
おっしゃることは分かりますが、もっと大きくできると思います。
現在
DiscourseHubには大きなDiscourseロゴがあります（白に囲まれています）。
Meta PWAには小さなDiscourseロゴがあります（白に囲まれています）。
DiscourseHubで以前のロゴを使用するように変更し、もう少し境界線を押し広げることはできますか？
「いいね！」 1
デザインの観点から、DiscourseHub アプリでもロゴを縮小すべきだと思います。
これらを並べて見ると、左側のアイコンの方が、右側のハブバージョンよりもロゴのバランスが良いように配置されています。
「いいね！」 4
Falco
2023 年 4 月 4 日午後 7:05
14
これが私のFirefoxの新しいタブページです。アイコンの白い背景は、見た目からすると非常に標準から外れています。
「いいね！」 3
dfabulich
2023 年 4 月 4 日午後 7:25
15
なぜFirefoxはApple Touch Iconを使用しているのでしょうか？ Firefoxは、https://meta.discourse.org/manifest.webmanifest からリンクされているアイコンのいずれかを使用すると予想していました。
実際、Discourseには「マニフェストアイコン」と「Apple Touch Icon」という2つの別々の設定があるのはそのためだと考えていました。Appleは透明度を無視して角丸のマスキングを適用するのに対し、他のブラウザは透明度を許可するWebマニフェスト標準に従うはずだからです。
「いいね！」 2
Falco
2023 年 4 月 4 日午後 7:28
16
Chrome（Androidのタブアイコン）とFirefox（タブのスタートページ）の両方が、apple-touch-iconをファビコンの高DPIバージョンとして使用しており、どちらもこの変更の影響を受けました。
私の知る限り、それはホーム画面に追加したときのアイコンのような、PWA機能にのみ使用されます。
「いいね！」 2
dfabulich
2023 年 4 月 4 日午後 7:49
17
このフォーラムのAndroid PWAアイコンも壊れていることに気づきました。
Android Studioを起動し、Android API 31を実行しているPixel 4エミュレーターを起動し、最新バージョンのGoogle Chromeをインストールして、Metaをホーム画面にインストールしました。アイコンは次のようになります。
私が読んだところ、問題は、https://meta.discourse.org/manifest.webmanifest に、目的「any」のアイコンと、目的「maskable」のアイコンの2つのアイコンを提供するスペースがあることです。「maskable」アイコンは、それから半径40％の円を切り取っても問題ないことを主張しています。
幸いなことに、すべてのプラットフォームが尊重する、よく定義された標準化された 「最小安全ゾーン」があります。ロゴなど、アイコンの重要な部分は、アイコンの幅の40％に等しい半径を持つ中央の円形領域内に配置する必要があります。外側の10％の端は切り取られる可能性があります。
Chrome DevToolsを使用して、アイコンのどの部分が安全ゾーン内に収まるかを確認できます。プログレッシブウェブアプリを開いた状態でDevToolsを起動し、「Application」パネルに移動します。「Icons」セクションで、「Show only the minimum safe area for maskable icons」を選択できます。安全ゾーンのみが表示されるようにアイコンがトリミングされます。ロゴがこの安全ゾーン内に表示されていれば、問題ありません。
Chrome Dev Toolsで「Show only the minimum safe area for maskable icons」をチェックしたときのMetaのマニフェストパネルの外観は次のとおりです。
アイコンはマスク可能であるはずなので、Android/Chromeは中央から円形の塊を切り取っており、結果は良くありません。
@Stephenが 「白い海の圧倒されている」と表現したApple Touch Iconを、Chrome Dev Toolsでマスク可能なマニフェストアイコンとしてテストしました。しかし、そのアイコンでさえ、標準のマスク可能サイズに対してわずかに大きすぎます…左下隅が切り取られます。
「いいね！」 2
dfabulich
2023 年 4 月 4 日午後 8:06
18
Chrome Androidでは、そのようには再現できません。Chrome Androidでは、新しいタブのアイコンは単なるファビコンのようです。
Firefoxがタブの開始ページに使用するアイコンに関するドキュメントを見つけることはできますか？
Firefoxがタブの開始ページにマニフェストアイコンを使用していない場合、少なくとも<link rel=icon>
おそらく、<link rel=icon>が非常に小さいため、Firefoxはapple touchアイコンにフォールバックしているのでしょうか？
複数のsizes属性を持つ複数の<link rel=icon>要素を持つことができることをご存知でしょう。最初の要素はファビコンを指し、2番目の要素はより大きなsizesを持つマニフェストアイコンを指す、2つの<link rel=icon>要素を持つのがおそらく理にかなっていると思います。そうすれば、Firefoxはより優れた、より大きなアイコンを使用するでしょう。：thinking:
より広範には、この話の教訓は次のとおりだと思います。
これは実際には一種のプロジェクトであり、どのアイコンがどこで使用されているか、そしてなぜ使用されているかを把握することです。
Discourse管理サイトは、管理者がこれを正しく行うためのガイダンスをまったく提供していません。
管理サイトは次のことを行う必要があります。
マニフェストアイコンとapple touchアイコンの透明度を禁止する
Chrome Dev Toolsが行うように、マニフェストアイコンを40％半径の円でレンダリングする
Appleが行うように、apple touchアイコンを角丸でレンダリングする
これらの機能が実装されれば、デザイナーは、次のすべてでうまく表示されるアイコンのアップロードの問題に取り組むことを試みることができるようになると思います。
iOS A2HS
Android A2HS
Firefox、Chrome、Safariのタブ開始ページ
「いいね！」 2
