ストーリーのスタイル設定

マップはビジュアル コミュニケーションの一形態です。 画像を追加し、テーマをカスタマイズすることで、ArcGIS StoryMaps ストーリーのビジュアルを洗練させます。

カバー画像の追加

マップの目的は、レイク・ディストリクト国立公園に国外からの観光客を惹きつけることです。 そのために、荒涼とした険しい景観の美しさを表す写真でストーリーを開始します。

  1. LakeDistrictPhotos.zip 圧縮フォルダーをダウンロードして展開します。
  2. ArcGIS Online アカウントで ArcGIS StoryMaps にサイン インするか、ArcGIS Enterprise ポータルにサイン インしてアプリ ランチャー ボタンをクリックし、[ArcGIS StoryMaps] をクリックします。
    注意:

    ArcGIS アカウントがない場合は、ソフトウェア アクセスのオプションをご参照ください。

  3. 前のチュートリアル「カートグラフィックの作成 ー マップ操作の案内」を完了している場合は、再度 [Lake District Fells] を開きます。
  4. 前のチュートリアルを完了していない場合は、「Lake District Fells 5」ストーリーを開きます。 リボンで、[その他のアクション] ボタンをクリックし、[ストーリーの複製] をクリックします。 [はい、複製します] をクリックします。 タイトルからテキスト [(コピー)] および [5] を削除します。

    その他のアクション メニューでのストーリーの複製

  5. 必要な場合は、ストーリーの一番上までスクロールします。 [カバー画像またはビデオの追加] をクリックします。
  6. [ファイルの参照] をクリックします。 展開した [LakeDistrictPhotos] フォルダーを参照し、[CoverImage.jpg] を選択します。

    画像またはビデオの追加ウィンドウ

  7. [追加] をクリックします。

    使用可能な湖水地方の美しい画像が多数あります。 マップのテーマである山頂が映っており、マップの色とも合うため、この画像を選びました。

    しかし、トリミングの仕方のために、画像が最も引き立つようになっていません。 これを変更するために別のカバー デザインを選択します。

  8. リボンの [デザイン] をクリックします。

    リボンのデザイン ボタン

  9. [デザイン] ウィンドウで、[カバー] 下の中央のオプション [並べて表示] をクリックします。

    カバーの並べて表示オプション

  10. [デザイン] ウィンドウを閉じます。

    カバー写真がストーリーのタイトルの上部ではなく、隣に配置されました。

    写真つきのストーリー カバー

    写真の帰属と代替テキストを追加します。

  11. 写真のツールバーの [オプション] ボタンをクリックします。

    写真のツールバーのオプション ボタン

  12. [プロパティ] タブをクリックします。 [帰属] に 「Damien Platt, iStock」と入力します。 [代替テキスト] に「Lake District mountains」と入力します。

    写真のプロパティ

  13. [保存] をクリックします。

スライドに画像を追加

画像をスライドにも追加します。 別の写真とダイアグラムを追加します。

  1. 下にスクロールします。 マップの下にある 3 枚目のスライドをクリックします。

    スライド 3

    このスライドはマップのシンボルを示していますが、高さと突出度の違いは説明されていません。 先ほどマップのポップアップに使用したものと同じダイアグラム画像を追加します。

  2. カード上でテキストにポインターを合わせます。 最後の段落の下にある [コンテンツ ブロックの追加] ボタンをクリックします。

    コンテンツ ブロックの追加ボタン

  3. [画像] をクリックします。 [画像の追加] ウィンドウで [リンク] をクリックします。

    画像の追加ウィンドウのリンク ボタン

    注意:

    [リンク] オプションが使用できない場合は、画像をダウンロードします。 [ファイルの参照] をクリックし、画像をアップロードします。

  4. 「https://www.arcgis.com/sharing/rest/content/items/5172c58b3caf4361b612878d5f5da9e2/data」を貼り付け、[追加] をクリックします。

    ダイアグラムがテキストの下に表示されます。

  5. ダイアグラムの下にある [キャプションの追加 (オプション)] をクリックし、「Height (h) and prominence (p)」と入力します。

    カードに追加されたダイアグラム

  6. 画像にポインターを合わせます。 [オプション] ボタンと [プロパティ] タブをクリックします。
  7. [帰属] に 「Esri」と入力します。 [代替テキスト] に「Diagram describing height and prominence」と入力します。 [保存] をクリックします。
  8. 4 枚目のスライドにスクロールします。

    このスライドでは、Scafell Pike という特定の山を取り上げます。 その山の写真をスライドに追加します。

  9. カードの 2 つ目の段落の下にある [コンテンツ ブロックの追加] ボタンをクリックし、[画像] をクリックします。
  10. [ファイルの参照] をクリックします。 展開した [LakeDistrictPhotos] フォルダーを参照し、[ScafellPike.jpg] を選択します。
  11. [追加] をクリックします。

    カードに追加された写真

  12. 画像にポインターを合わせます。 [オプション] ボタンと [プロパティ] タブをクリックします。
  13. [帰属] に 「WhitecombeRD, iStock」と入力します。 [代替テキスト] に 「The peak of Scafell Pike」と入力します。 [保存] をクリックします。

ストーリー テーマの設定

マップの設計においては、一貫性と調和性を考慮して色を選択しました。 同様の方針をレイアウトにも適用しましょう。 ユーザーに、マップとレイアウトが 2 つの別々のものではなく、1 つのプロダクトとして見なされるようにします。 そのために、ストーリーのテーマをカスタマイズします。 マップで使用したものと合う色やフォントを選択します。

  1. リボンの [設計] タブをクリックします。
  2. [テーマ] で、[Ridgeline] をクリックします。

    Ridgeline テーマ

  3. ストーリーをスクロールします。

    [Ridgeline] テーマの薄い緑の背景色がマップの色に合っています。 次に、フォント フェイスおよび色も変更して合わせます。

  4. [テーマの管理] をクリックします。

    テーマの管理リンク

  5. [新しいテーマ] をクリックします。
  6. [始点の選択] ウィンドウで [Ridgeline] をクリックし、[選択] をクリックします。
    注意:

    [始点の選択] ウィンドウが表示されない場合は、テーマのブラウザー タブを閉じてストーリーに戻ります。 [デザイン] ウィンドウを閉じて、次のセクションに進みます。

    [Ridgeline] のデザイン要素を変更し、カスタム テーマを作成できるようになりました。

  7. [無題のテーマ] をクリックして「Fells」と入力します。

    Fells に変更されたテーマ名

  8. [色] を展開します。 [強調色] を「#879906」に変更します。

    #879906 (黄緑色) に設定された強調色

    ストーリーのリンクはこの色で下線が引かれます。 ストーリーのカバー写真に合っています。

  9. [タイポグラフィ] を展開します。
  10. [タイトルと見出し] および [段落] の両方に、[Noto Sans] を選択し、色を「#202E03」に設定します。

    Noto Sans と濃い緑色に設定されたタイポグラフィ

    これはマップのラベルで使用しているフォントや色と同じものです。

  11. リボンで [公開] をクリックします。

    リボンの公開ボタン

  12. [共有レベルの設定] で、[すべての人に公開 (パブリック)] を選択します。 [公開] をクリックします。
  13. テーマ ビルダーのブラウザー タブを閉じて、ストーリー タブに戻ります。
  14. [デザイン] ウィンドウで、[テーマの参照] をクリックします。
  15. [Fells] テーマを選択します。

    Fells テーマ

  16. [デザイン] ウィンドウを閉じてストーリーをスクロールし、適用した新しいテーマを確認します。

    薄い緑色の背景と濃い緑色のテキストがあるスライド カード

    写真を追加することで、マップに面白みを持たせることができます。 カスタム テーマにより、マップとレイアウト (ストーリー) に一体感を持たせることができます。 これらの視覚的変化を組み合わせることで、よりプロフェッショナル仕様で魅力あるマップを作ることができます。

データの帰属の記述

ストーリーがほぼ完成しました。残りはデータ ソースに著作権を追加するだけです。 マップに著作権を追加するのは面倒な作業かもしれませんが、無視してはいけません。 多くの場合、データ ソースへの著作権の追加は法的に義務付けられていますが、たとえ義務でなくとも、優れたマップなら著作権を記載します。 著作権があることでマップは信頼できるものになり、データの詳細を知りたい、または自らのプロジェクトに活用したいと考えるユーザーのために役立ちます。

データ著作権の追加

最初に [Fells] レイヤーから始めて、マップの各レイヤーに著作権文を追加します。 同時に、元のデータ ソースへのリンクも含めます。

  1. ストーリーの一番下までスクロールします。
  2. [著作権の見出しを追加 (オプション)] をクリックして「Data sources」と入力します。

    [著作権の説明を追加 (オプション)] をクリックして、「This story and web map were created by Your Name in Year by following the tutorial series Cartographic creations with web maps.」をコピーして貼り付けます。

    著作権の見出しと説明

  3. [Your Name] を自分の名前に、[Year] を現在の年に置き換えてください。
  4. [コンテンツ] をクリックして「Fells」と入力します。
  5. [帰属] には、「Adapted from The Database of British and Irish Hills v18.」をコピーして貼り付けます。

    テキストと一緒にハイパーリンクをコピーして貼り付けたため、一部のテキストに下線が引かれています。

    注意:

    テキストに下線が引かれていない場合、[The Database of British and Irish Hills] をハイライトします。 表示されたツールバーの [リンク] ボタンをクリックし、[Web ページ] をクリックします。 「https://www.hills-database.co.uk/downloads.html」をコピーして貼り付け、[適用] をクリックします。

マップ データの著作権の確認

マップ データに正しく著作権を追加するために必要な情報を見つけるには時間がかかる場合があります。 カートグラフィック プロセスの早い段階で最初にデータを見つけたときにデータ ソースを記録しておくのが理想的です。 ただし、忘れたりレイヤーを見失ったりすることがよくあります。 次は、Web マップからデータ レイヤーの著作権情報を見つける方法について学習します。

  1. [著作権の追加] ボタンをクリックして「National Parks」と入力します。

    著作権リストに追加された National Parks

    Web マップから National Parks レイヤーの URL と帰属テキストを見つけます。

  2. [Lake District National Park] Web マップを再度開きます。
    注意:

    Web マップが見つけられない場合、または ArcGIS Enterprise を使用している場合は、Lake District National Park 5 を開きます。

  3. 必要に応じ、[コンテンツ] (暗い背景の) ツールバーにある [レイヤー] をクリックして [レイヤー] ウィンドウを開きます。
  4. [レイヤー] ウィンドウで、[Lake District National Park] レイヤーをクリックして選択します。

    レイヤーが選択されると、そのレイヤーの横に青いバーが表示されます。

    レイヤー ウィンドウで Lake District National Park レイヤーが選択済み

    [プロパティ] ウィンドウでフィーチャ レイヤーのアイテム ページを確認できます。

  5. 必要に応じ、[設定] (明るい背景の) ツールバーの [プロパティ] ボタンをクリックして [プロパティ] ウィンドウを開きます。
  6. [プロパティ] ウィンドウで [情報] セクションを展開します。 [ソース レイヤー] の下の [National Parks (England) / Lake District National Park] をクリックします。

    プロパティ ウィンドウのソース レイヤー リンク

    フィーチャ レイヤーのアイテム ページが新しいブラウザー タブに表示されます。

  7. 青いリボンの矢印をクリックしてアイテム ページのルートに移動します。

    青いリボンの矢印ボタン

    フィーチャ レイヤーのアイテム ページが表示されます。

  8. ページの下までスクロールして [著作権 (帰属)] セクションを確認します。

    National Parks (England) フィーチャ レイヤーの著作権 (帰属) テキスト

    多くの場合、このテキストはコピーして、マップまたはアプリで帰属として再利用できます。

  9. ブラウザーのアドレス バーから Web ページの URL をコピーします。

    ブラウザーのアドレス バーの URL

  10. [Lake District Fells] ストーリーのブラウザー タブに戻ります。
  11. テキスト [National Parks] をハイライトします。 表示されたツールバーの [リンク] ボタンをクリックします。

    ハイライトされたテキストのリンク ボタン

  12. [Web ページ] をクリックします。 コピーした URL を貼り付けます。

    URL にはおそらく ArcGIS Online 組織の名前が含まれています。 その場合、組織外の人がリンクを利用できない場合があります。 URL を修正して公開バージョンを作成します。

  13. URL の [https://] と [.arcgis.com] の間のテキストを削除します。
  14. テキストを消去した場所に「www」と入力します。

    更新された URL

    最終的に、URL は [https://www.arcgis.com/home/item.html?id=d333c7529754444894e2d7f5044d1bbf] となります。

  15. [適用] をクリックします。

    アイテム ページで先ほど確認した帰属テキストも追加します。

  16. [帰属] をクリックします。 以下をコピーして貼り付けます。© Natural England copyright. Contains Ordnance Survey data © Crown copyright and database right 2024.

    National Parks の帰属テキスト

データ著作権の完成

次に、マップの残りのデータについてリンクと帰属テキストを追加します。

  1. [著作権の追加] ボタンをクリックして、「Lakes」と入力します。
  2. テキスト [Lakes] をハイライトし、以下のリンクを追加します。「https://www.arcgis.com/home/item.html?id=c9fc4b95456e4b22ad162f91a453c0eb」
  3. [帰属] には以下をコピーして貼り付けます。This resource is made available under the Open Government Licence v3 (OGL) © Contains data supplied by UK Centre for Ecology & Hydrology. © Contains Ordnance Survey Data. Acknowledgement: Taylor, P.J. (2021). Spatial inventory of UK waterbodies. NERC EDS Environmental Information Data Centre (Dataset). https://doi.org/10.5285/b6b92ce3-dcd7-4f0b-8e43-e937ddf1d4eb.

    湖の帰属テキスト

  4. [著作権の追加] ボタンをクリックして、「Rivers」と入力します。
  5. テキスト [Rivers] をハイライトし、以下のリンクを追加します。「https://www.arcgis.com/home/item.html?id=6048e8a5e29b49b093e79f08c732f109」
  6. [帰属] には、「Contains Ordnance Survey data © Crown copyright and database right 2024」をコピーして貼り付けます。
  7. [著作権の追加] ボタンをクリックして、「Basemap」と入力します。

    ベースマップ レイヤーは 3 つすべてデータ ソースが同じで、スタイル設定が異なるだけなので、帰属は 1 文にまとめます。

  8. [帰属] には、「GB Light Grey, GB Hillshade, and GB Cartographic: Contains OS data © Crown Copyright and database right 2023 Contains data from OS Zoomstack」をコピーして貼り付けます。

    ベースマップの帰属テキスト

ストーリーの公開

ストーリーは完成です。 完了するために、プレビューして公開します。

  1. リボンの [プレビュー] をクリックします。

    リボンのプレビュー ボタン

  2. 表示されるウィンドウで、[はい。続行します] をクリックします。
  3. ストーリーをスクロールして確認してください。

    ストーリーのプレビュー

    ストーリーの編集中は、ミスや不整合が発生しやすくなります。 公開前に完成したプロダクトをレビューすることが重要です。

  4. プレビュー ツールバーで、[プレビューを閉じる] ボタンをクリックします。

    プレビュー ツールバーのプレビューを閉じるボタン

  5. レビュー中にエラーを見つけた場合はその場で修正します。
  6. リボンで [公開] をクリックします。
  7. [共有レベルの設定] で、[すべての人に公開 (パブリック)] を選択します。

    すべての人 (パブリック) に設定されている共有レベル

  8. [公開] をクリックします。

    ストーリーのコンテンツの一部について、権限の更新が必要であることを警告するウィンドウが表示されます。 ストーリーを全員と共有するだけでなく、ストーリー内のマップとレイヤーも同様に共有する必要があります。

    注意:

    独自のストーリーではなく、用意されたストーリーを使用している場合、警告は表示されない可能性があります。

  9. [はい、公開します] をクリックします。

    別のウィンドウが表示されます。

  10. [はい。これらのアイテムを共有します。] をクリックします。

このチュートリアルでは、画像と、マップに合ったカスタム テーマを追加することでストーリーの外観を向上させました。

このチュートリアル シリーズでは、プロフェッショナル品質のインタラクティブなマップを構築しました。 Map Viewer で、.csv ファイル、ArcGIS Living Atlas、ArcGIS Online のデータを使用してマップを作成しました。 多変量主題シンボル、効果、表示範囲、ポップアップ、ラベルを構成しました。 フィルター、属性式、ブレンド モードを使用しました。 マップの投影法を変更し、複数のレイヤーを組み合わせてカスタマイズされた統一感のあるベースマップを作成しました。 ArcGIS StoryMaps で、マップ全体をガイドするインタラクティブなレイアウトを作成しました。 マップの説明に便利なテキスト、画像、凡例を追加しました。 外観をカスタマイズし、データ ソースの著作権を追加しました。

カートグラフィはクリエイティブな作業です。 このチュートリアル シリーズでは、ソフトフェアにデザインを適用する方法を学習する手助けとなるよう、デザインの選択はすべて用意されていました。 ただし、独自のマップを作成するときには、自らデザインを決定する必要があり、選択は容易ではないかもしれません。 多くのオプションを積極的に試すとともに、常にマップの目的を心に留めておいてください。 学習を継続するために、自分でデザインを選択して Lake District Fells のマップをもう 1 つ作ってみましょう。 以下に、このマップをデザインし直す方法をいくつか紹介します。

  • ArcGIS StoryMaps の代わりに ArcGIS Dashboards を使用してレイアウトを構築します。
  • マップの色、フォント、他のデザイン要素を変更することで、奇抜または派手な雰囲気にします。
  • オリジナル データを使用して、別のエリアの丘陵や山のマップを作ります。
  • それぞれがデータを異なる方法で表す一連のマップを作ります。
  • ストーリーを書き直して Lake District の地質に焦点を当てます。
  • 暗いベースマップを使用します。

このシリーズのすべてのチュートリアルは、「Web マップを使用したカートグラフィックの作成」にあります。 カートグラフィのその他のチュートリアルについては、カートグラフィの概要ページをご参照ください。