テーマの作成
まず既存のストーリーを複製し、スタイル設定する新しいテーマを作成します。
- ArcGIS 組織アカウントを使用して ArcGIS StoryMaps にサイン インします。
注意:
組織アカウントがない場合は、ソフトウェア アクセスのオプションをご参照ください。
- Smoke on the Horizon ストーリーを開きます。
- スクロールして内容を読んでください。
ストーリーには、マップ、写真、テキスト、ボタン、データ ソースへのリンクが含まれます。 自分が所有し、編集できるコピーを作成します。
- リボンで、[その他のアクション] ボタンをクリックし、[ストーリーの複製] をクリックします。
- [このストーリーを複製] ウィンドウで、[はい、複製します] をクリックします。
- タイトルからテキスト [(コピー)] を削除して、[Smoke on the Horizon] だけが残るようにします。
このストーリーでは現在、白い背景、濃い灰色のテキスト、青のアクセントが付いたデフォルトのテーマが使用されています。 これらの色はこのストーリーに合いません。 山火事の煙は暗く、霞んで不吉な雰囲気を作り出します。 ストーリー内のマップや写真はこの雰囲気に合っていますが、テーマは合っていません。 別のテーマを探します。
- リボンの [デザイン] をクリックします。
- [デザイン] ウィンドウの [テーマ] で、[Mesa] をクリックします。
- ストーリーをスクロールして変化を確認します。
[Mesa] テーマは、デフォルトの [Summit] テーマよりもストーリーの色によくマッチしていますが、作り出す雰囲気は明るく透明な感じがします。 ストーリーをより煙っぽく、陰鬱で、少し不吉なものにするために、カスタム テーマを作成します。
- [テーマの管理] リンクをクリックします。
- [新しいテーマ] ボタンをクリックします。
- [開始点の選択] ウィンドウで [Obsidian] をクリックした後、[選択] をクリックします。
テーマを開始点として選択すると、テーマの色やフォントなどの特性がエディターに開始点として読み込まれます。 ストーリーに、より暗く、スモーキーな感じを選んだため、Obsidian の暗い背景と赤い強調色は作業の良い出発点になるでしょう。
- サイド ウィンドウで、[無題のテーマ] を削除し、「Smoke」と入力します。
フォントと色の選択
次に、深刻な雰囲気を演出するフォントと色を選択します。 ストーリーにすでに存在する地図や写真から色を借用し、これらの色がコントラスト比のアクセシビリティ ガイドラインを満たしていることを確認します。
- サイド ウィンドウで、[色] セクションを展開し、[背景色] メニューをクリックします。
- [#0e1116] を削除し、「#272520」と入力します。
ページの背景色が濃い茶色に変わります。 この色は煙予報マップの背景色 (海の色) と同じです。
ヒント:
地図、写真、その他のグラフィックスの色の 16 進数値を見つけることができるエクステンションを Web ブラウザーにインストールできます。 Eye Dropper はそのようなエクステンションの一例です。
- [ヘッダーの色] で、[テーマ色の使用] をオンにします。
このプロパティは、後に [タイポロジー] セクションで設定します。 このオプションをオンにすると、そのセクションでさらに色をカスタマイズできるようになります。
- [強調色] メニューをクリックします。 [基本色] リストからオレンジ色のオプションを選択するか、「#C86624」と入力します。
- サンプル ストーリーをスクロールして、オレンジ色の強調がどこに使われているかを確認します。
[強調色] は、ボタン、リンク、区切り線、引用符に影響します。 オレンジは火を連想させるので、このストーリーのトピックに合います。
- [タイポグラフィ] セクションを展開します。
フォントには個性があります。 このテーマでは深刻な雰囲気を演出しようとしているので、カジュアルすぎたり、遊び心があったり、装飾的すぎたりする見た目のフォントは避けるべきです。 [Charter BT] フォントはフォーマルな個性を持っているため、このテーマによく合います。 このメニューで利用できるフォントの多くもまた、適切である可能性があるため、フォントの選択は主に好みになります。 フォントを選択するときは、それぞれのフォントが何を連想させるかを考えます。 結婚式の招待状、児童書、オンライン ゲームを連想させるフォントは、山火事の煙に関するストーリーには最適な選択ではないかもしれません。 公式文書を連想させるフォントの方が適切です。
現在タイトルに使用している [Charter BT] フォントはオフィシャルな印象のフォントとして適しているので、このままにしておきます。
- [タイトルと見出し] で、色メニューをクリックします。 「#A6671B」と入力します。
タイトル テキストが、ストーリーの写真の 1 つから借用した黄色がかったオレンジ色に変わります。
色メニューの横に警告シンボルが表示されます。 これは、テキストと背景色のコントラストが低く、テキストが読みにくいことを示しています。
- カラー ピッカー ウィンドウで、[読みにくい] の横にある矢印をクリックします。
このセクションの情報は、テキストの色と背景のコントラストがどの程度適切であるかを示します。 記載されている数字はコントラスト比です。 コントラスト比は、WCAG 2.1 AA ガイドラインで設定された閾値を満たしている場合に読みやすいとみなされます。 この場合、オレンジ色は背景とコントラストがとれていますが、セカンダリ背景とのコントラストがよくありません。
セカンダリ背景色は、茶色の背景色の明るいバージョンです。 これは自動的に生成され、設定できません。 どちらの背景でも読みやすいように、オレンジ色を明るくします。
- カラー ピッカー ボックスで、円を少し上方かつ左方に移動します。 あるいは「#BC7F38」と入力します。
コントラスト比の数値が緑色に変わり、両方の背景色とのコントラストが適切であることを示しています。
コントラストの警告は、無視すべきではありません。 自分は、自分が選んだ色のタイトルを問題なく読めるかもしれませんが、他の人はそうでないかもしれません。 警告に従うことで、アクセシビリティに優れたストーリーを作成できます。
段落テキストには、タイトルや見出しと同じフォントを選択します。 カートグラフィ (地図調製) では、多くの要素を使用するよりも、少ない要素を使用する方が魅力的で効果的なマップをデザインしやすいため、多くの場合、1 つまたは 2 つのフォントのみを使用することが推奨されます。 この助言をテーマのデザインに適用し、ストーリー全体で 1 つのフォントのみを使用することにします。
- [段落] で、[Charter BT] を選択します。
テーマを 1 つのフォントだけに制限すると、色のバリエーションを増やす余地が生まれます。
- [段落] で、色を「#C8BEA4」に変更します。
この色はタイトル色の淡いバージョンです。 彩度が低いため、よりスモーキーな感じになり、ストーリーのテーマにマッチします。 また、より明るくなるため、背景とのコントラストが高まります。 テキストが小さくなるほど、読みやすさではコントラストが重要になります。
- [キャプション] では、淡く彩度が低い紫色の「#B5ADB7」に色を設定します。
3 つのテキスト色は、ストーリーで紹介されている写真の 1 つからインスピレーションを得たものです。
写真やグラフィックスから色を借りるのは、配色を考案する方法として信頼できるものです。 これらの色は、写真のトーンに基づいてストーリーのトーンを設定するのに役立ちます。 オレンジと黄色のテキスト色もマップのシンボルと合います。
まったく同じ色ではありませんが、ストーリーに一貫性を感じさせるという点では十分似ています。
淡い紫色は茶色の背景によく映えますが、使われる場所は限られています。 この色を他の場所でも再利用したい場合があるかもしれません。 後でアクセスできるように、オプションの強調色として設定します。
- サイド ウィンドウで上にスクロールします。 [色] セクションの [オプションの強調色] で、最初の色メニューをクリックし、「#B5ADB7」に設定します。
この色はストーリー要素にすぐには適用されませんが、後でストーリー ビルダーで使用できるようになります。
その他のデザイン要素の設定
次に、テーマ内のボタンとリンクの外観を変更します。
- [色] セクションと [タイポグラフィ] セクションを折りたたみ、[ボタン] セクションを展開します。
サンプル ストーリーは、サンプル ボタンの場所にジャンプします。
ボタンはオレンジ色で非常に目立って見えます。 一部のストーリーでは、目立つボタンが適切です。 たとえば、行動喚起のボタンは非常に目立つようにする必要があります。 ただしこのストーリーでは、ボタンが段落のテキストの邪魔にならないようにしたいので、ボタンを目立たない鈍い色に変更します。
- サイド ウィンドウで、[カスタム色を使用する] ボックスをオンにします。
- 色を「#776f5b」に設定します。
この灰褐色は、ストーリーの本文テキストと似た色です。 テキストから気を逸らすことのないくすんだ色調で、背景に対して、アクセシビリティ テストをパスできる程度の明るさがあります。
ボタンのテキストも黒から白に変更され、読みやすい色のコントラストが確保されています。 ボタンの四角形を、テーマが引用ブロックに使用している直線により合うようにします。
- [ボタン] で、角が直角の最初のボタン タイプをクリックします。
- [リンク] セクションを展開し、2 番目のオプションを選択します。
強調色のオレンジはボタンには派手すぎましたが、リンクの下線には適していると思われるため、カスタム色には変更しません。
- [区切り線] セクションを展開します。 [位置] の下で、最後のオプションを選択します。
サンプルの区切り線はストーリーの全幅にわたって伸びています。
引用符とベースマップにはさらにオプションがあります。 どちらも今回のストーリーでは使用されていないため、調整はしません。
テーマの公開
ストーリーに適用できるようにテーマを公開して共有します。
- サンプル ストーリーをスクロールしてデザインを確認します。
深刻かつフォーマルな見た目であり、色彩も山火事や煙というテーマにマッチしています。
- リボンで [公開] をクリックします。
[Smoke on the Horizon] のストーリーを一般公開する予定なので、テーマも一般公開する必要があります。 そうしないと、テーマにアクセスできないユーザーは、デフォルトのテーマが適用されたストーリーしか閲覧することができません。
- [共有レベルの設定] で、[すべての人に公開 (パブリック)] を選択します。
- [高度なオプション] で、[複製を許可します] ボックスをオンにします。
このオプションを使用すると、テーマのコピーを作成し、後で変更できます。
- [公開] をクリックします。
ストーリーへのテーマの適用
次に、テーマを適用し、ストーリーの外観と雰囲気がどのように変化するかを確認します。 テーマの色の 1 つをオーバーライドします。
- ストーリーのブラウザー タブに戻ります。 必要に応じて、テーマのタブを閉じます。
注意:
以前にストーリーのタブを閉じた場合は、ArcGIS アカウントにサインインします。 [コンテンツ] タブをクリックし、[Smoke on the Horizon] ArcGIS StoryMaps アイテムをクリックします。 [ストーリーの編集] をクリックします。
- リボンの [デザイン] をクリックします。
- [デザイン] ウィンドウの一番下までスクロールし、[テーマの参照] をクリックします。
- テーマ ギャラリーで、[Smoke] カードをクリックします。
テーマがストーリーに適用されます。
- [デザイン] ウィンドウを閉じてストーリーをスクロールし、新しいテーマでどのように表示されるかを確認します。
マップの背景がストーリーの背景とシームレスに融合し、テキストと強調色が写真とマップに合っています。
- ストーリーの最後までスクロールします。
クレジット セクションの最初の行で、オレンジ色のタイトルと見出しの色が使用されています。
大きいテキストを念頭に置いてこの色を選択したのであり、この小さいフォントにはもっとコントラストの高い色の方がよいと思われるでしょう。 テーマをオーバーライドして別の色を選択します。
- [This story was created for] で始まるテキスト行を強調表示します。
- 表示されるメニューで、[色] ボタンをクリックします。
[推奨] の下に 4 つの色が一覧表示されています。 これらには、テーマで設定したタイトル色と強調色が含まれます。
- [推奨] の下で、淡い紫色をクリックします。 色のコントラストが [読みやすい] と表示されていることを確認します。
テキストの色が紫色に変わります。
ストーリーの公開
最後に、ストーリーを公開して一般の人々と共有します。
- リボンの [プレビュー] をクリックします。
- [はい。続行します] をクリックします。
- ストーリーをスクロールして確認してください。
- プレビュー ツールバーで、[プレビューを閉じる] ボタンをクリックします。
- リボンで [公開] をクリックします。
- [共有レベルの設定] で、[すべての人に公開 (パブリック)] を選択します。
- [公開] をクリックします。
これでストーリーは完成です。 カスタム テーマのおかげで、トピックに合ったトーンと雰囲気が生まれます。 このチュートリアルでは、次のスキルを習得しました。
- ストーリーに適切なトーンを与えるカスタム テーマを作成する方法
- ストーリーにすでに存在する色を借りて、一貫性とまとまりのある雰囲気を作り出す方法
- アクセシビリティ ガイドラインに適合する色を選択する方法
他のチュートリアルについては、チュートリアル ギャラリーをご覧ください。