実際に適用している画面はこちらです。 あえてブラウザ用のルールを定義した部分 一方で、ブラウザという媒体の特性による最適化をした箇所もあります。 アプリはメインのナビゲーションやツールバーのボタンはブランドカラーの赤を使うことが多かったのですが、それをブラウザでそのまま適用するとエラーのように見えてしまいました。アプリの場合はその世界の中で完結するので、独自のデザインルールがあっても受け入れられやすいのですが、ブラウザの場合はページを行き来できるため、全く異なるデザインルールと共存していることになります。 そのため、リンクは青、エラーは赤など一般的に認知されているデザインルールと異なる使い方をする場合は、特に注意が必要になることがわかりました。 上記の点をふまえ、スマートフォン版Yahoo!メールではメインのボタンは黒としました。また、黒を使うときにはタップできることがわかるよう、ボタンの
![アクセシビリティ対応したカラー設計でもっとメールを読みやすく! Yahoo!メールのリニューアル事例](https://cdn-ak-scissors.b.st-hatena.com/image/square/10f469b6b159a4bf44922b20796b88da26a0071d/height=288;version=1;width=512/https%3A%2F%2Fs.yimg.jp%2Fimages%2Ftecblog%2F2020-H1%2Fmail%2FOGP.png)