過大宣伝または必要性?ダークモードの詳細、ユーザーにとって役立つダークモードをサポートする方法を紹介します。
はじめに
ダークモードの前にダークモード
<ph type="x-smartling-placeholder">ダークモードも使えるようになりました。 パーソナル コンピューティングが登場した当時は、ダークモードは選択的なものではありませんでした。 しかし、実際のところ、 電子ビームを発射するモノクロの CRT パソコン モニター 初期の CRT で使われていた蛍光体は緑色でした。 文字は緑色、画面の残りの部分は黒色だったため、このようなモデルは グリーン スクリーン。
<ph type="x-smartling-placeholder">その後発売されたカラー CRT は、 赤、緑、青の蛍光体を使用します。 3 つの蛍光体すべてを同時に活性化することで白色を作り出しました。 さらに洗練された WYSIWYG の登場により デスクトップ パブリッシング、 仮想ドキュメントを紙の紙によく似たものにするというアイデアが広まりました。
<ph type="x-smartling-placeholder">ここから、デザイン トレンドとしてのダーク オン ホワイトが生まれました。 このトレンドは 初期のドキュメントベースのウェブの登場です。 Google 史上初のブラウザ、 WorldWideWeb (前述のとおり、 CSS はまだ考案されていない)、 ウェブページがこのように表示されます。 豆知識: 史上第 2 のブラウザ、 Line Mode Browser(ターミナルベースのブラウザ)が廃止されました。 暗いところは緑です。 最近では、ウェブページやウェブアプリは通常、ダークテキストを使用してデザインされています ベースラインの前提条件が、ユーザー エージェント スタイルシートでもハードコードされています。 Chrome。
<ph type="x-smartling-placeholder">CRT の時代は終わりました。 コンテンツの視聴と作成はモバイル デバイスに移行している バックライト LCD を使用 または省エネ AMOLED スクリーンを採用。 パソコン、タブレット、スマートフォンが小型化され、持ち運びが容易になったことで、新たな使用パターンが生まれました。 ウェブ ブラウジング、コーディング、ハイエンド ゲームなどのレジャー タスク 薄暗い環境で勤務時間外に頻繁に発生します。 夜にはベッドの中でデバイスを楽しむ人もいます。 暗い場所でデバイスを使う人が増えるほど light-on-dark の原点に戻るアイデアは広く普及します。
ダークモードを選ぶ理由
デザイン上の理由からダークモード
質問を受けたとき ダークモードが好きまたは使いたい理由 最も人気のある回答は「目に優しい」というものでした。 その後に「エレガントで美しい」と続きます。 同業他社の Apple ダークモードに関するデベロッパー向けドキュメント 次のように明示的に書いています。「ライト表示とダーク表示のどちらを有効にするかの選択は ほとんどのユーザーにとって美しいものであり、周囲の照明条件には関係ない場合があります。」
で確認できます。 <ph type="x-smartling-placeholder">ユーザー補助ツールとしてのダークモード
実際にダークモードを必要とし、別のユーザー補助ツールとして使用する人もいます。 たとえばロービジョンのユーザーなどです このようなユーザー補助ツールが最も早く見つかったのは システム 7 の CloseView 機能。これには次の切り替えボタンがありました。 「黒地に黒」と「黒地に白」という 2 つの画像があります。 システム 7 は色をサポートしていましたが、デフォルトのユーザー インターフェースは依然としてモノクロでした。
これらの反転ベースの実装は、色が導入された後の弱点を示しました。 Szpiro 他によるユーザー調査 ロービジョンの方がコンピューティング デバイスにアクセスする方法 が、インタビューを行ったすべてのユーザーが反転した画像を好まないと回答したことが明らかになりました。 暗い背景に明るい色の文字を好む人も多くいます。 Apple は、 スマート反転 ディスプレイに表示される色が反転します。ただし、画像、メディア、 ダークカラースタイルを使用する一部のアプリです
ロービジョンの特殊な形態は、コンピュータビジョン症候群(Digital Eye Strain)です。 定義 「コンピュータの使用に関連する、目の問題と視覚の問題を組み合わせたもの」 (デスクトップ、ノートパソコン、タブレットを含む)とその他の電子ディスプレイ( スマートフォン、電子読み取りデバイスなど)。 提案されている 特に夜間に 青少年による電子機器の使用 睡眠時間が短くなるリスクが高まります。 睡眠開始遅延が長くなり、睡眠不足が悪化します。 さらに、ブルーライトにさらされる人々は、 報告済み 政府が関与する可能性がある 概日リズム 睡眠サイクル、 不規則な照明環境は、睡眠不足につながる可能性があります。 気分やタスクのパフォーマンスに影響を与える可能性 Rosenfield による調査。 こうした悪影響を抑えるため、ディスプレイの色温度を調整してブルーライトを低減します たとえば iOS、Android、iOS のナイトシフト、Android の 夜間モードを使用すると便利です。 また、ダークモードやダークモードを使用することで、明るい光や不規則な光を避けることができます。
AMOLED 画面でのダークモードの電力節約
最後に、ダークモードは電力を大量に節約できることが知られています。 AMOLED 画面 人気の Google アプリに焦点を置いた Android の事例紹介 YouTube によると、電力を最大 60% 節約できます。 以下の動画では、これらの事例とアプリごとの電力節約について詳しく説明しています。
オペレーティング システムでダークモードを有効にする
ここまで、ダークモードが多くのユーザーにとって重要である理由を説明しました。 それをサポートする方法を見ていきましょう
<ph type="x-smartling-placeholder">ダークモードまたはダークモードをサポートするオペレーティング システム 通常は、設定のいずれかの場所で有効にできます。 macOS X では、システム設定の [全般] セクションの [デザイン] にあります(スクリーンショット)。 Windows 10 では、[色] セクションの [色の選択] に表示されています(スクリーンショット)。 Android Q では、[ディスプレイ] の下に [ダークモード] 切り替えスイッチ(スクリーンショット)が表示されます。 iOS 13 では、デザインを明るさ セクション(スクリーンショット)で確認できます。
prefers-color-scheme
メディアクエリ
最後にもう一つ、理論について説明します。
メディアクエリ
作成者がユーザー エージェントやディスプレイ デバイスの値や機能をテストして照会できるようにする
関数を呼び出せます
これは、CSS の @media
ルールで、条件付きでドキュメントにスタイルを適用するために使用されます。
HTML や JavaScript など、他のさまざまなコンテキストや言語で使用できます。
メディアクエリ レベル 5
は、いわゆる「ユーザー嗜好」メディア機能を導入しています。つまり、
サイトでユーザーの表示方法を検出する仕組みです。
prefers-color-scheme
検出に使用するメディア特性を使用して、
ユーザーがページでライトモードまたはダークモードを使用するようリクエストした場合。
次の値で動作します。
light
: ユーザーが、ライトテーマのページが好まれることをシステムに通知したことを示します (明るい背景に暗い文字の色)を使用する。dark
: ユーザーが、ダークモードのページが好まれることをシステムに通知したことを示します (暗い背景に明るい文字のテキスト)。
ダークモードのサポート
ブラウザがダークモードに対応しているかどうかを確認する
ダークモードはメディアクエリを通じて報告されるため、現在のブラウザが
メディアクエリ prefers-color-scheme
と完全に一致するかどうかを確認して、ダークモードをサポートします。
ここでは、値を何も含めず、メディアクエリのみが一致するかどうかのみを純粋に確認します。
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('🎉 Dark mode is supported');
}
このドキュメントの作成時点では、prefers-color-scheme
はパソコンとモバイルの両方(利用可能な場合)でサポートされています。
Chrome と Edge(バージョン 76 以降)、Firefox(バージョン 67 以降)
および Safari(macOS ではバージョン 12.1 以降、iOS ではバージョン 13 以降)。
その他のブラウザについては、サポート テーブルを使用できるかをご確認ください。
リクエスト時にユーザーの好みを学習します。
Sec-CH-Prefers-Color-Scheme
クライアント ヒント ヘッダー
により、サイトがリクエスト時に必要に応じてユーザーのカラーパターンの設定を取得できます。
サーバーが適切な CSS をインライン化できるため、誤ったカラーテーマの点滅を回避できます。
ダークモードの活用例
最後に、ダークモードのサポートが実際にどのように行われるかを見てみましょう。 Highlanderと同じく、 ダークモードではダークとライトのどちらか一方しか存在できませんが、両方は存在できません。 ここに記載する理由これは読み込み方法に影響するはずだからです。 クリティカル レンダリング パスで CSS のダウンロードをユーザーに強制しないでください。 モードになります 読み込み速度を最適化するために、サンプルアプリの CSS を分割します。 次の推奨事項を実践的に示しています。 重要性の低い CSS を先送りするために、以下の 3 部に分けて実行します。
style.css
: サイトで普遍的に使用されているルールを含めます。- ダークモードに必要なルールのみを含む
dark.css
。 light.css
: ライトモードに必要なルールのみが含まれます。
読み込み方法
後者の 2 つの light.css
と dark.css
は、
<link media>
クエリにより条件付きで読み込まれます。
最初は
一部のブラウザでは prefers-color-scheme
がサポートされていません
(上記のパターンを使用して検出可能)、
これを動的に処理するために、デフォルトの light.css
ファイルを読み込みます。
小さなインライン スクリプトに条件付きで挿入された <link rel="stylesheet">
要素経由
(ライトは任意ですが、デフォルトのフォールバック エクスペリエンスとしてダークにすることもできます)。
スタイルが設定されていないコンテンツが大量に発生しないようにするには、
light.css
が読み込まれるまでページのコンテンツを非表示にします。
<script>
// If `prefers-color-scheme` is not supported, fall back to light mode.
// In this case, light.css will be downloaded with `highest` priority.
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
);
}
</script>
<!--
Conditionally either load the light or the dark stylesheet. The matching file
will be downloaded with `highest`, the non-matching file with `lowest`
priority. If the browser doesn't support `prefers-color-scheme`, the media
query is unknown and the files are downloaded with `lowest` priority (but
above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
rel="stylesheet"
href="/light.css"
media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />
スタイルシートのアーキテクチャ
CSS 変数を最大限に活用している
これにより、汎用の style.css
が汎用になります。
ライトモードまたはダークモードのカスタマイズはすべて、他の 2 つのファイル dark.css
と light.css
で行います。
以下は実際のスタイルの抜粋です。全体的なアイデアを伝えれば十分です。
--color
と --background-color
の 2 つの変数を宣言します。
ベースライン テーマを作成します。
/* light.css: 👉 dark-on-light */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
}
/* dark.css: 👉 light-on-dark */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
}
style.css
で、これらの変数を body { … }
ルールで使用します。
これらで定義されているとおり、
:root
CSS 疑似クラス -
HTML で <html>
要素を表すセレクタ
これはセレクタ html
と同じですが、特異性が
カスケード ダウンされるため、グローバル CSS 変数を宣言するのに便利です。
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
}
上記のコードサンプルでは、いくつかのプロパティに
color-scheme
スペース区切り値 light dark
に置き換えます。
アプリがサポートするカラーテーマをブラウザに伝えます
ユーザー エージェント スタイルシートの特殊なバリアントをアクティブ化できます。
これは、たとえば、ブラウザでフォーム フィールドをレンダリングさせる場合に便利です。
背景が暗く、テキストが明るい場合は、スクロールバーを調整します。
テーマに応じたハイライト色を設定できます
color-scheme
の正確な詳細は次の場所に記載されています。
CSS 色調整モジュール レベル 1
これ以外は CSS 変数を定義するだけで済みます。
役立つ情報を提供します。
スタイルを意味的に整理すると、ダークモードで作業しやすくなります。
たとえば、--highlight-yellow
ではなく、変数を呼び出すことを検討してください。
--accent-color
(「黄」)ダークモードでは黄色にはなりません。その逆も同様です。
この例で使用している他の変数の例を次に示します。
/* dark.css */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
--link-color: rgb(0, 188, 212);
--main-headline-color: rgb(233, 30, 99);
--accent-background-color: rgb(0, 188, 212);
--accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
--link-color: rgb(0, 0, 238);
--main-headline-color: rgb(0, 0, 192);
--accent-background-color: rgb(0, 0, 238);
--accent-color: rgb(250, 250, 250);
}
完全な例
次の Glitch の埋め込みでは、 上記のコンセプトを実践している完全な例を確認できます。 ご利用のオペレーティング システムの設定でダークモードを切り替えてみてください ページの反応を確認します
読み込みの影響
この例を試してみると、
メディアクエリで dark.css
と light.css
を読み込む理由
ダークモードを切り替えて、ページを再読み込みしてみてください。
まだ一致しない特定のスタイルシートが読み込まれますが、優先度が最も低いため、
今すぐサイトに必要なリソースと競合しないようにできます。
ダークモードの変更への対応
他のメディアクエリの変更と同様に、ダークモードの変更は JavaScript で登録できます。
この関数を使用して、たとえば、
ファビコン
ページの移動や
<meta name="theme-color">
は、Chrome の URL バーの色を決定します。
上記の完全な例は、これを実際に示しています。
テーマの色とファビコンの変更を確認するには、
別のタブでデモをご覧ください。
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
const darkModeOn = e.matches;
console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});
Chromium 93 と Safari 15 では、
meta
テーマカラー要素の media
属性を指定したメディアクエリ。「
最初に一致するものが選択されます。たとえば、1 つの色で 1 つの色で
もう 1 つはダークモードですこのドキュメントの作成時点では
マニフェストで定義します。w3c/manifest#975 GitHub を参照
確認します。
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
ダークモードのデバッグとテスト
DevTools での prefers-color-scheme
のエミュレーション
OS 全体のカラーパターンを切り替えるのは
Chrome DevTools を使用して
ユーザーが好みのカラーパターンをエミュレートできます
現在表示されているタブにのみ影響します。
コマンド メニューを開いて「Rendering
」と入力し、Show Rendering
コマンドを実行して、[Emulate CSS media featurepreferreds-color-scheme] オプションを変更します。
Puppeteer で prefers-color-scheme
のスクリーンショットを撮影しています
Puppeteer は Node.js ライブラリです。
ハイレベル API を提供し、Chrome や Chromium を
DevTools プロトコル。
dark-mode-screenshot
では、
ダークモードとライトモードの両方でページのスクリーンショットを作成できる Puppeteer スクリプト。
このスクリプトは 1 回限りの実行にすることも、構成の一部として実行することもできます。
継続的インテグレーション(CI)テストスイート。
npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
ダークモードに関するベスト プラクティス
純白を使わない
お気づきかと思いますが、純白は使用していません。
代わりに、周囲の暗いコンテンツに対する光や光漏れを防ぐため、
少し暗い白を選びます。rgb(250, 250, 250)
などが適しています。
写真画像のカラーリング(色や暗さ)を調整
以下の 2 つのスクリーンショットを比較すると、主なテーマだけでなく、 dark-on-light から light-on-dark に変更しましたが、ヒーロー画像の外観も若干異なります。 自分のユーザー調査 調査対象者の大多数が ダークモードをオンにすると、やや鮮明で明るい画像が好まれます。 これを再配色と呼びます。
再色付けは、画像の CSS フィルタで実行できます。
URL に .svg
が含まれていないすべての画像に一致する CSS セレクタを使用しています。
ベクター グラフィック(アイコン)に別の色付け処理を施すことができます。
よりも多い場合、次の段落で詳しく説明しています。
ここでも CSS 変数を使用して、
後で柔軟にフィルタを変更できます
再色付けはダークモード(dark.css
がアクティブなとき)でのみ必要となるため、
light.css
に対応するルールはありません。
/* dark.css */
--image-filter: grayscale(50%);
img:not([src*='.svg']) {
filter: var(--image-filter);
}
JavaScript を使用してダークモードの再色化強度をカスタマイズする
人によってダークモードは異なります。
上記の再配色方法を守ることで、
グレースケールの輝度は
ユーザーの好みに合わせて簡単に調整できます
JavaScript で変更する場合、
また、値を 0%
に設定することで、再配色を完全に無効にすることもできます。
なお、document.documentElement
ドキュメントのルート要素への参照を提供します。
つまり、P-MAX で参照できる
:root
CSS 疑似クラス。
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);
ベクター グラフィックとアイコンを反転する
ベクター グラフィック(このケースではアイコンとして使用)の場合、<img>
要素で参照します。
別の色付け方法を使用します。
研究によると、
写真の反転は好まれませんが、ほとんどのアイコンで効果を発揮します。
ここでも、反転量を求めるために CSS 変数を使用します。
通常の状態と :hover
状態の両方に存在する必要があります。
ここでも、dark.css
のアイコンのみを反転させ、light.css
のアイコンは反転しません。また、:hover
2 つのケースで異なる反転の強さになり、アイコンが現れます。
ユーザーが選択したモードに応じて、わずかに暗くなったり明るくなったりします。
/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);
img[src*='.svg'] {
filter: var(--icon-filter);
}
/* light.css */
--icon-filter_hover: invert(60%);
/* style.css */
img[src*='.svg']:hover {
filter: var(--icon-filter_hover);
}
インライン SVG に currentColor
を使用する
インライン SVG 画像の場合は、反転フィルタを使用するのではなく、
currentColor
を利用して
要素の color
プロパティの値を表す CSS キーワード。
これにより、デフォルトでは値を受け取らないプロパティで color
値を使用できます。
SVG の値として currentColor
が使用されていると便利です。
fill
または stroke
属性
代わりに、color プロパティの継承された値から値を取得します。
さらに良いこと: これは、
<svg><use href="…"></svg>
個別のリソースを
currentColor
は状況に応じて適用されます。
なお、この方法はインライン SVG または <use href="…">
SVG にのみ使用できます。
ただし、画像の src
として参照されている SVG や、なんらかの方法で CSS を介して参照されている SVG は対象外です。
以下のデモでこれがどのように適用されているかを確認できます。
<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
[…]
</svg>
モード間のスムーズな遷移
ダークモードからライトモード(またはその逆)への切り替えもスムーズです。
color
と background-color
の両方が
アニメーション化可能な CSS プロパティ:
2 つのプロパティに 2 つの transition
を宣言するだけで、アニメーションを簡単に作成できます。
下の例は全体的な流れを表しています。
demo。
body {
--duration: 0.5s;
--timing: ease;
color: var(--color);
background-color: var(--background-color);
transition: color var(--duration) var(--timing), background-color var(
--duration
) var(--timing);
}
ダークモードでのアート ディレクション
一般に、読み込みのパフォーマンス上の理由から、prefers-color-scheme
のみを使用することをおすすめします。
<link>
要素の media
属性内(スタイルシートでインライン化しない)
実際に HTML コード内で prefers-color-scheme
をインラインで直接操作したい場合があります。
アート ディレクションはそういう状況です。
ウェブにおけるアート ディレクションは、ページの全体的な見た目と、それがどのように視覚に訴えるかを扱うものです。
ターゲット オーディエンスの気分を刺激し、特長を際立たせ、心理的にアピールする。
ダークモードでは、特定のモードで最適な画像はデザイナーが判断します。
また、画像のカラー化が十分でないかどうかも確認します。
<picture>
要素で使用すると、表示される画像の <source>
を media
属性に依存させることができます。
下の例では、西半球をダークモード、東半球をライトモードにしています。
指定がない場合は、デフォルトで東半球に設定されます。
もちろん、これは説明のみを目的としたものです。
デバイスのダークモードを切り替えて違いを確認します。
<picture>
<source srcset="western.webp" media="(prefers-color-scheme: dark)" />
<source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
<img src="eastern.webp" />
</picture>
ダークモードにする(オプトアウトを追加する)
上述のダークモードを使用する理由で説明したように、
ダークモードは、ほとんどのユーザーにとって見た目のよい選択肢です。
そのため、実際にオペレーティング システムの UI を使いたがるユーザーもいます。
暗い場所にいるものの、それまでと同じ方法でウェブページを見たいと思っている人。
優れたパターンは、最初はブラウザから送信されたシグナルに従うことです。
prefers-color-scheme
。ただし、ユーザーがシステムレベルの設定をオーバーライドできるようにします。
<dark-mode-toggle>
カスタム要素
もちろん自分でコードを作成することもできますが、
カスタム要素(ウェブ コンポーネント)をご用意しました。
これは <dark-mode-toggle>
と呼ばれます。
切り替えボタン(ダークモード: オン/オフ)や
自由にカスタマイズできるテーマの切り替え(テーマ: ライト/ダーク)をページに追加できます。
以下のデモは、この要素の動作を示しています。
(それから、🤫? の
その他
例
上記)。
<dark-mode-toggle
legend="Theme Switcher"
appearance="switch"
dark="Dark"
light="Light"
remember="Remember this"
></dark-mode-toggle>
以下のデモで、右上のダークモード コントロールをクリックまたはタップしてみてください。 3 つ目と 4 つ目のコントロールのチェックボックスをオンにすると、 ページを再読み込みしても保持されます。 オペレーティング システムをダークモードのまま維持できます。 ライトモードではサイトを楽しむか その逆も可能です
まとめ
ダークモードの操作とサポートは楽しく、新たなデザインの道が開かれます。
サイト訪問者によっては、これがサイトを処理できないか、
そうでないかということの違いが出る可能性があります
幸せなユーザーであることです
いくつか注意点がありますので
慎重にテストする必要があります
ダークモードは、すべてのユーザーを大切にしていることをアピールする絶好の機会です。
この投稿で紹介したベスト プラクティスや
<dark-mode-toggle>
カスタム要素
素晴らしいダークモード環境を作り出す能力に自信を持てるはずです。
作成した内容と、この投稿がお役に立ったかどうか、Twitter でお知らせください
改善のヒントも得られます
最後までお読みいただきありがとうございました。🌒
関連リンク
prefers-color-scheme
メディアクエリのリソース:
color-scheme
メタタグと CSS プロパティのリソース:
color-scheme
CSS プロパティとメタタグ- Chrome プラットフォームのステータス ページ
- Chromium のバグ
- CSS 色調整モジュール レベル 1 の仕様
- メタタグと CSS プロパティに関する CSS WG GitHub の問題
- メタタグの HTML WHATWG GitHub の問題
ダークモードに関する一般的なリンク:
この投稿の背景研究記事:
謝辞
prefers-color-scheme
メディア機能(color-scheme
CSS プロパティ)
および関連するメタタグは 👏? Rune Lillesveen の実装作業です。
Rune は、CSS Color Adjust Module Level 1 仕様の共同編集者でもあります。
どうぞよろしくお願いいたします 🙏? Lukasz Zbylut、
Rowan Merewood 氏、
Chirag Desai 氏
および Rob Dodson
記事の詳細を確認しています
読み込み戦略は、Jake Archibald が考案したものです。
Emilio Cobos ロールバレスからは、正しい prefers-color-scheme
検出方法を教えてくれました。
参照先 SVG と currentColor
を使ったヒントの提供元
Timothy Hatcher。
最後に、さまざまなユーザー調査に匿名で参加していただきましたことに感謝します。
を参考にしました。
ヒーロー画像作成者: Nathan Anderson