Safari 15のためのデザイン

♪ ♪ ジェンです 今日は 新しいSafariがWebデザインと 開発に与える影響について説明します WebデザイナーやWebデベロッパなど WebサイトやWeb App制作に関わる方に お勧めのセッションです 今年はSafariにとって大きな年です ここでは Safariの変更による ビジュアルやインタラクションデザイン への影響に焦点を当てます Safariはデザインを一新しました あなたのWebサイトは デフォルトでも素晴らしいですが もう一歩踏み込んで さらに魅力的にする方法を紹介します macOS iOS iPadOSの素晴らしい新機能と それぞれが与える影響についてお話します 新しいアスペクト比のプロパティを含む CSSの新機能についても説明します そして新たに実装したフォームコントロールと iOSとiPadOSでの新しい外観を紹介します まずはブラウザのデザインから 紹介します ブラウザの初期段階から ほとんどのブラウザには 基本的な共通点がありました 上に長いツールバーがあり URLを表示する行があります そしてサイトはこのスペース この領域に収まります もちろん私たちはユーザーは 自分が使うサイトに慣れていますが ブラウザ自体は 視覚的には変わっていません どのようにデザインされていても ブラウザのインターフェイスが そのデザインを 枠にはめます その枠を取り払い Webサイトのデザインを ウィンドウの端まで広げることが できたらどうでしょうか それを実現したのがSafari 15です 今年 私たちはブラウザを 一新しました Webコンテンツにフォーカスしたものです 新しいSafariでは タブバーが背景色を変え 各Webサイトに溶け込むようにしました インターフェイスが一本の線になっていて 必要なときに必要なものが表示され コンテンツに広がりを感じることができます それぞれのWebページやWeb Appは ウィンドウの四隅まで広がっています ブラウザのインターフェイス はコンテンツに委ねられます ではツールバーの背景に使われる色は 何で決まるのでしょうか？ Webデザイナーやデベロッパは 色を選択し その選択を HTMLにコーディングできます 色が指定されていないサイトでは Safariが使用する色を決めます ページの背景色と合わせることもあれば ヘッダーの背景に合わせることもあります ツールバーの色を指定するには metaタグ name="theme-color"を 使ってHTMLのheadに記述し content属性で色を指定します このHTMLのheadの情報で ページの読み込み時にSafariが すぐに情報を取得します これは宣言コードでもあり 使い方もとてもシンプルです ２色を設定すれば ライトモードとダークモード 両方に対応できます そうです metaタグに メディア属性を追加できます media="(prefers-color-scheme: light)" を１つ目のmetaタグに ２つ目には "(prefers-color-scheme: dark)"を これは今春提案のHTMLの仕様に 新たに追加されたものです これにより ユーザーが要求した色スキームに 簡単かつ確実に合わせられます name="theme-color" をサポートしていても metaタグでのメディア属性の 使用をサポートしていない ブラウザでは最初の theme-color宣言を使用し 残りを無視されます CSSで行うようにフォールバックを 最後ではなく最初に置くようにします ダークモードにデザインされていなくても デバイスがダークモードの場合に備え タブバーの色を 設定しておくとよいでしょう 指定した色が薄すぎる場合は ユーザーが求めるダークモードに 合わせて Safariが調整します テーマカラーをHTMLのheadではなく マニフェストファイルで定義できます 両方で定義した場合 HTMLのheadの色が使われます 2021年6月現在 マニフェストファイルで ライトとダークモードの 複数の色を定義する方法は まだありません 現在そのための議論が 行われています ごく一部ですが Safariが適用できない色があります ユーザーの体験を妨げるような色や アクセス不能にする色などです これらの場合 Safariは別の処理を行います このサイトではタブバーを 白に変更しています 選択した色がうまく 適用されない場合 微調整を行ってください 必要に応じ テーマカラーを Webサイトの各部分で 異なる色に設定 することもできます HTMLページはそれぞれ 独自のheadがあります またJavaScriptを使って ユーザー動作に応じて テーマカラーを動的に 入れ替えることもできます サイトに溶け込むタブバーの デザインを考えてみましょう

macOSのSafari 15 iPadOSおよびiOS 15の SafariでWebサイトや Appがウィンドウを 埋め尽くす感覚を作り出す方法です 次に Webサイトをさらに進化させる ちょっとした調整を ２つ見てみましょう ブラウザでたくさんのタブを一度に 開いている人は多いでしょう 新しいSafariはタブをグループに分け 自動で整理します とても便利です 私は仕事のプロジェクトを グループに整理して それぞれに名前をつけて 使っています タブグループはmacOS iOS iPadOSで同期でき どのデバイスでも後から 再読み込みできるので 作業中でないものを片付けておけます タブグループを使うことで タブバーはすっきりしますが それでもたくさんのタブを一度に 開いていることがあります タブが多い場合 タブを識別するために ファビコンが重要になります 高解像度のデバイスに対応した 優れたアイコンの提供を推奨します 背景が透明なファビコンは 特に見栄えがします

ところで多くのチームが さまざまなデバイスに対応するために さまざまなアイコンを 自動ツールで生成します このようなツールでは HTMLヘッドのアイコンコードと テーマカラーを一緒に指定するコードが 生成されることがよくあります またはCMSやフロントエンドの フレームワークが テーマカラーを定義していて 気づかないのかもしれません 見てみましょう 色がサイトのデザインに 適しているかテストし 良い色に変更できます 多くの人は新しいタブバーを見ると タブが一列に並んで いるように見えます Webサイト制作者なら サイトを読み込むと タブにドメイン名が 表示されていることに 気づくでしょう そしてサイトが バックグラウンドのタブに あるときに表示されるのは Webページのタイトルで HTMLのheadの タイトルタグのテキストです タイトルのスペースは限られているので パターンを考えて 作ることが重要です タイトルが分かり易ければ ユーザーは必要なタブを すぐに見つけられます 先にサイト名 後にページ名を 付けているサイトもありますが コンテンツのタイトルを最初にしましょう そうすれば複数のタブを開いていても タブを簡単に見分けることができます タブバーの色やファビコン ページタイトルなどは サイトの一部として意図的に デザインされています これらはWebページ自体には現れませんが サイトやAppを見る人の体験に 深く影響します テーマカラーのmetaタグを 活用する方法について マイルスが詳しく説明します どうも マイルスです Dog Dog DCという サイトを担当しています WWDC開催中に皆さんの犬の ストリーム配信を行うサイトです これはSafariでのマギーのストリームです 嬉しそうですね！ 今 一時停止しましたが もう一度再生してみましょう

ナイスキャッチ この右側でマギーについて リアルタイムでコメントできます Safari 15が 上部の タブバーを黒に設定しています これは私のページの背景色で 中央コンテンツエリアの下部の背景として 黒が使われているのがわかります タブバーにも黒がよく合っています 全体的にまとまったデザインに見えます タブバーに"Not Secure"が 表示されていますが これは 開発環境であることによります サイト上部の青い フローティングバーは タブバーに拡張すると 見栄えが良くなります こちらのエディタで ソースコードを見ると

この美しい青に合わせ Safariが検出した ブラックカラーを 上書きすることができます

このmetaタグを追加して 青色をタブバーまで 広げることができます 再読み込みして 見てみましょう いいですね しかし上部にグレーの ニュースレターバーを 水平に配置しているので 上部のタブバーへの 色の流れを少し邪魔する 形になっています 色の流れを途切れさせないために バーを背景色ではなく 別の方法で表示してみます

うん とりあえず保留にして ニュースレターバーを外しましょう

バッチリですね 色も途切れず Safari 15ならではの見栄えです もちろん iPadOSでも 同じ効果を発揮します さて ここに１日中座って マギーを眺めていたいですが 本音を言えば マギーを前面に出して マギーとチャット以外は 非表示にしたいです 犬へのコメントは大事ですからね シアターモードボタンを タップすればこれができます

ちょっと待ってください タップしてもタブバーが カラフルなままです 背景色を更新して シアターモードの見栄えを 良くしましょう JavaScriptで変更を行えます 先ほどジェンがダークモードなど 変化に自動対応できるよう meta要素にメディアクエリを 使用する方法を紹介しました しかし 自分のページで 行う変更については より積極的に JavaScriptを使えます シアターモードでは JavaScriptを使って meta要素を簡単に変更できます

シアターモード終了時は 要素をリセットします

見てみましょう

完璧ですね とても良くなりました これでマギーを楽しめます ジェン 後はよろしく Dog Dog DCね マイルス 公開されたら 必ずチェックするわ ありがとう Webデザイナーが ユーザーの直感的な体験に インパクトをもたらす 新たな可能性が広がり 素晴らしいですね ではiOSで何が起きるのか 掘り下げてみましょう これも背景色が使われていて 上部センサーを囲むように 表示され ページやAppが 画面いっぱいに表示されます タブバーが下に移動していますね ユーザーの親指で操作しやすく 特に通話中は 片手で操作できます タブバー上で横にスワイプすると タブを切り替えできます 上にスワイプすると すべてのタブが表示され タブグループにアクセスできます ページをスクロールすると タブバーは最小化され ドメイン名だけが表示され どのサイトにいるか分かります そこから戻ると 拡大されたタブバーが再表示されます つまりサイトやAppが 主役なのです もしページ下部に重要なものがあり タブバーで隠れてしまったら どうでしょう？ そこでCSSで環境変数を 使用しpaddingやmargin gridなどを レイアウトコードで 確保できます 環境変数を使い タブバーがUIや コンテンツの邪魔に ならないようにできます 環境変数とは何でしょう？ ブラウザが提供する動的な測定値です 緑の部分がいわゆるセーフエリアです タブバーが下部で拡大されると セーフエリアはその上部に設置され タブバーが縮小されると セーフエリアの範囲が広がります env(safe-area-inset-bottom)は セーフエリアから ビューポートの下部まで 何ピクセルあるかを示す測定値です CSSのカスタムプロパティの VAR関数とよく似ています 例えばカスタム プロパティを使って 色を変数にしたことがありませんか ただし あなたが変数を 定義するのではなく ブラウザが定義します 環境に関する情報を提供し その長さの測定値は calc内を含め コードのあらゆる場所で 使用することができます この例では position: sticky ２つのリンクをフッターの 端から離すため paddingを入れています padding-bottomを 1rem + env(safe-area-inset-bottom) と定義します 多くの場合 これは 1rem + 0と定義されます iOSでは 1rem + タブバーとの距離です これはタブバーを避けるためです セーフエリアの端から ビューポートの端までの 距離を測定する環境変数として env(safe-area-inset-top) -right -bottom -leftの envが４つあります これらの環境変数は Safariだけでなく これらはCSSの仕様で 定義されており さまざまなブラウザやデバイス OSで動作します 垂直方向に調整する場合は 環境変数の使用が必要です Safariはデフォルトでは コンテンツを動かしません ですがiPhoneを横向きにした場合は 少し異なります この場合も センサーハウジングや 角の丸いスクリーンの隅を避けるため セーフエリアが定義されています デフォルトではSafariは 自動的にコンテンツを 左右の端から移動させ セーフエリアに入れます これはなぜでしょう Safariがサイトを左右の 端まで拡張してしまうと コンテンツが失われる 可能性があるのです このように文字が隠れてしまいます これでは使いづらいですね このため レスポンシブWebデザインで よく使われる meta viewportタグで width=device-widthを 指定している場合も含め Safariはコンテンツを セーフエリアに移動します でもデザインは 良くしたいので 紫のヘッダーと写真を 画面の端まで伸ばしたいのです コンテンツを左右の端 まで表示させることを Safariに伝えるには meta viewportタグを viewport-fit=coverにします レイアウトがうまくいくか 責任もって確認します 環境変数を使って コンテンツが 完全に表示 されるようにします ヘッダーとパラグラフテキストに env(safe-area-inset-left)の 左マージンを定義することができます セーフエリアインセットや 環境変数については ノートのWebKitブログ 「Designing Websites for iPhone X」 をご覧ください ではマイルスに 環境変数がどう機能するか 見せてもらいます Dog Dog DCをiPhoneの Safariで見てみましょう 私のiPhoneでは 先ほどと同じようにマギーが見えますが 今回は小さなデバイスです 待ってください 問題があるようです チャットエリアをスクロールすると 入力エリアとタブバーが 重なってしまいます Dog Dog DCは vh単位を使用して 上から下へサイズ変更しており ビューポート全体の サイズを取得しますが 現在はタブバーと重なっています ユーザーはスクロールすれば バーが小さくなるので 気にしませんが デベロッパとしては 使いづらいのではと 気になります 幸い セーフエリア インセットを使って 入力エリアを上に移動 させることができます bottom paddingを加え safe-area-inset-bottomにします

そしてページを再読み込みします

Safari 15の新機能の１つで 引っ張って更新できます うん 思っていた形には近いですが ちょっと上すぎますね なるほど bottom marginが あるところに bottom paddingを入れたからです この２つが縦に重なっています ではセーフエリア インセットを使うよう marginを変更すべきですね 今度は上手くいくでしょうか

完璧です これは環境変数のおかげですね どの部分にも適用できます borderでもmarginでも paddingでもline-heightでもです タブバーが縮小したり拡大すると 環境変数の値が自動で更新され 値が変わると Safariがレイアウトを更新します Dog Dog DCでも確認できます タブバーのサイズに合わせ チャットエリアのサイズが変わります 上の部分は同じサイズのままですが 下の部分はタブバーに合わせて変わります Flexboxレイアウトを使っているためです この手の動作を自然に 簡単に作ることができます Flexboxやgridなど 最近のレイアウトモードを 使ったことがない方は 試してみる良い機会だと思います 引き続きジェンから Safari 15の新機能の説明があります ありがとう マイルス 環境変数はデバイスに ダイナミックに対応する レイアウトを作成する ための強力なツールです サイトをホーム画面のAppとして 保存した場合も見てみます タップしてこのサイトを ホーム画面に保存すると サイトのアイコンが表示されます これをタップすると サイトを開けます 便利ですね Safari同様 背景色が 上部に使われています Appを使っている感覚です タブバーが表示されないのは Safariではないからです このサイトのAppなのです これもSafariの新しい機能です サイトをより見やすく 美しく表示できます 次に macOS iOS iPadOSの 驚くべき 新機能について説明します 新しいサイトを訪れるきっかけは リンクを受け取ったときや 誰かからそのサイトについて 聞いた場合が多いでしょう このような場合 サイトはリッチリンクとして表示されます リッチリンクは iOS iPad OSそしてmacOS どれでも同じように動作します 今年 「あなたと共有」とともに コンテンツを共有する方法が たくさん追加されました この２つはその例です リッチリンクで素敵なサイトに見えるよう 工夫するといいですね デフォルトではリッチリンクは Webページのタイトルや サイトのURLやファビコンを シンプルに表示します これはオープン･グラフ･ プロトコルで定義された 名前のmetaタグを使い HTML headで metaデータを追加して改良できます 早速 サイト内容に合うタイトルに 変更します 画像も変更します ヒーロー画像など このサイトの 内容を伝える画像に変えます 動画にもできます 許可されていれば ミュートで自動再生します タップすると音を出せます 詳細はdeveloper.apple.comの “Ensuring beautiful rich links” をご覧ください リッチリンクのカスタマイズも サイトやWeb Appを より良くする方法ですね 次は ビジュアルインテリジェンスと Webについて紹介します テキストが画像内にあることがよくあります Safari 15では ビジュアルインテリジェンス でテキストを解放します Web上の他のテキスト同様 直接操作できるようになりました これはTwitter上の画像です マウスをもっていくと ポインタがカーソルに変わります 普通のテキスト同様に選択して コピーできます macOS Montereyで表示される 画像上のポインタや iOSやiPadOS 15上でのタッチで ビジュアルインテリジェンスが 画像内のテキストを 瞬時に認識します テキストを認識すると 選択してコピーできるだけでなく 辞書で調べたり翻訳したり 検索したり共有したり 音を聞いたり普通のテキスト と同じことが可能です 検出したテキストは Webページの一部であり 一部ではないと言えます テキストはShadow DOMに抽出されるので JavaScriptの影響を受けませんが Ｚオーダーの影響は受けます 画像の上に透明な画像が 重なっている場合などは ビジュアルインテリジェンスは その下の画像内のテキストを 認識できません 上の画像が妨げになるからです VoiceOverなどの技術に ビジュアルインテリジェンスを統合し 画像内のテキストを 利用できるようにしました ですがこの機能が現在の アクセシビリティの ベストプラクティスを 変えるわけではありません ほぼテキストで構成 されているコンテンツは 本来 HTMLテキストで Webに載せるべきで Webフォントで見た目を整えても テキストコンテンツとして 載せるべきです これが最善なことに 変わりはありません 写真や絵など画像を 使用したコンテンツの場合 画像要素の属性として altテキストを含む ことがベストです 優れたaltテキストは 人間にしか理解できない 意味や文脈を持ちます ビジュアルインテリジェンス に対応していない ブラウザもあるので画像には altテキストを使うことを心がけてください とは言っても 今までは 見て読むだけやタイプし直していた テキストを使えるようになったのは 素晴らしいことですね 次に昨年 WebKitで改良された CSSを見てみましょう 最初にアスペクト比です アスペクト比は任意の要素に 好みのアスペクト比を設定できる 新しいCSSプロパティです “好みのアスペクト比を設定する”とは どういうことでしょうか？ まず Web上で自然なアスペクト比を持つ コンテンツを見てみましょう 画像が良い例です 幅が高さの２倍ある マギーの画像です つまりアスペクト比は２：１です この画像をWebページに載せ width: 100% height: autoを 追加するという定番の技術を使います 自然なアスペクト比を持つ画像なので 幅に合わせて 縦も変わるので 比率は常に幅が高さの２倍になり 常にマギーが可愛く見えます これは当然と言える状態で 特に意識もされません 動画でも同様です 映像要素を使い HTMLに入れることで 機能します 動画ファイルも自然な アスペクト比があります 映像要素がレイアウトを計算し ブラウザにアスペクト比を伝えます 自然なアスペクト比ではない コンテンツもあります ここにarticle要素があります タイトルと本文があります 初期設定ではarticle要素は widthもheightもautoです widthがautoということは 100％表示されるよう 記事を広げてください という意味です heightがautoということは それがコンテンツが 収まる高さで それ以上高くならない という意味です 文字列の幅が狭くなると テキストの折り返しが増え 縦方向にどんどん大きくなります 文字列の幅が広くなると テキストがリフローし 縦方向のスペースが狭くなります ボックスの高さは テキストに合わせて 短すぎず 高すぎず アスペクト比は気にせずに調整します Webの歴史においては このように機能してきました 正方形を使ったり ボックスを一定の形で利用する などのデザインアイデアは “Webはそうはいかない！” と破棄されていました 今まではそうでした CSSでアスペクト比を 持たない要素に 好みのアスペクト比を 定義できるのです aspect-ratio: 1 / 1 をコードに追加します 横幅がどうなっても それを１単位と考え 高さも１単位とし つまり正方形にするということです 正方形を維持するために 高さは以前よりも大きくなります では コンテンツが多く 正方形に収まらない場合は？ 初期設定では ボックスは自動的に 縦方向に伸びます １行のコードで 正方形や 任意の縦横比のボックスを 作成できます これにより いずれかのボックスで コンテンツが長くなった場合 ボックスはオーバーフロー しないよう大きくなります オーバーフローが発生しても アスペクト比を守りたい場合は min-height 0 を追加します 別の方法でもオーバー フローを処理できます overflow: scroll の追加でも可能です 値を1 / 1と書いて 正方形にしていましたが aspect-ratio: 1 とすることもできます 数字が１つの場合ブラウザは １以上と認識します 同じアスペクト比にする方法は 他にもたくさんあります 小数も使えます そのため 映画やテレビ アートやデザインなど 他の業界で使われる方法で アスペクト比を自由に 書くことができます これらの比率は建築 絵画 本の装丁 現代の印刷デザインなど 文化において深い意味を 持つにもかかわらず この10年間 Web上で 使用することは ほとんど不可能でした ではレイアウトを構築します 特にアスペクト比と CSSグリッドの組合せで 新しいデザインの 可能性が広がります 映画やビデオについて言えば アスペクト比の 一般的な使用例として サードパーティサービスから の埋め込みビデオがあります YouTubeやVimeo Wistiaなどの 動画サイトを利用している場合は 動画を埋め込むための iFrameがあります iFrame要素は 自然なアスペクト比 ではありません レスポンシブデザインが出たとき 埋め込み動画を 柔軟にしたかったのですが 問題が発生しました CSSで難解なpadding の裏技を使うか JavaScriptを使うしか 動画サイズを 変更する方法がなかったのです 今はCSSを１行加えるだけで iFrameを好みの アスペクト比に設定できます これでよくある問題を スムーズに解決できます アスペクト比は 思い通りのレイアウトを 実現する強力なツールです 次はflex gapです 今年 Safari 14.1で Flexboxのgapのサポートを 開始しました Flex gapでアイテム間の 最小スペースを定義し 常にギャップを入れる 方法があります これはFlexboxで レイアウトしたバーです メニュー同士が くっつかないようにします 1remのgapプロパティを 追加すると 常に間にスペースが 入るようになります 左右のマージンは 必要ありません マージンを取り除くことも 考えなくて良いのです とてもシンプルです 今年のWebKitで実装 されたCSSの機能は 他にもたくさんあり 海外のサポートに重要な 追加の論理的プロパティ なども含まれています 回転 平行移動 拡大縮小の 各変形プロパティ スクロールマージンと スナップの更新と改善 新しいカラースペースの対応 そして擬似要素と 離散的特性の アニメーション これらの機能の多くは 今年の春 macOSの Safari 14.1と iOSおよびiPadOSの Safari 14.5で 出荷されました 残りはこの秋 Safari 15で出荷されます 次は フォームコントロールです Safari 14.1で macOSの日付と時刻の 入力のサポートが追加されました Macユーザーは Calendarコントロールで 日付を入力したり Timeコントロールで 時間を入力できます クライアントサイドの 検証機能も内蔵しています iOSとiPadOS 15は フォームコントロールを 一新しました 全体的に使いやすくなり UIKitとの 相性も良くなります ダークモードの 見た目も良くなりました これがフォームコントロール の新しいデフォルト設定です スタイルを上書きすると そのスタイルが適用されます またiOSおよびiPadOSの input type="color “で入力する カラーピッカーに加え 色の選択や調整ができる ３つのパネルやスポイト を実装しました 以上 Safari 15と 今年のWebKitの ハイライトを紹介しました 最後にSafariと WebKitの詳細と 重要なリソースの場所 また 次に何を見たいか というフィードバックの 送信先をご案内します リソースへのリンクは ノートに記載があります 新しいJavaScript DOM API メディアフォーマットの サポートについて 詳しくは WWDC21で“Develop advanced web content”を ご覧ください “Discover Web inspector improvements”は ぜひご覧ください　CSS グリッドインスペクターなど Webデベロッパ向け新ツールが Safariに登場します 今後の展開を見逃さないために Safari Technology Preview をダウンロードしてください ２週間ごとに更新しています 特に最新のバグ修正に 対するテストや Web​インスペクタの最新技術を 利用するには最適な方法です Webkit.orgは WebKitのリリースノートや 新しいWeb技術の紹介記事や Webインスペクタの ドキュメントを提供します 皆さんからのご意見も お待ちしています Webインスペクタや Safariのインターフェイスに ご提案いただける場合は Appleのフィードバック アシスタントで受け付けます WebKitのバグ HTML CSS JavaScript DOM APIに バグを見つけた場合は bugs.webkit.orgで お知らせください Twitterは@webkitで フォローいただけます 新しいタブバーがデザインに 新たな広がりを与えることや アスペクト比による レイアウトの新しい可能性 iOSとiPad OSの新しい フォームコントロールなど Safari 15の新しいデザインを 楽しんでいただけたら 幸いです Webデザインにどんな 革新をもたらすか楽しみです ありがとうございました WWDCをお楽しみください [音楽]