ストーリーの作成と構成
注意:
このチュートリアルは、個人向けプランのアカウントでの操作に合わせて作成されました。 ArcGIS 個人向けアカウントは、個人で非営利目的で使用するために設計された、機能に制限のある無料のアカウントです。 このアカウントでは、基本マップおよびアプリの作成およびパブリックな共有を行うことができます。
最初に、プレゼンテーションに含める既存の Web マップを開きます。
- 必要に応じて、ArcGIS のアカウントにサイン インします。
注意:
ArcGIS アカウントを持っていない場合は、個人向けプランのアカウントにサイン アップできます。
- リボンの [コンテンツ] をクリックします。
- [Tree planting opportunities in Portland] Web マップのオプション ボタンをクリックし、[Map Viewer で開く] を選択します。
注意:
マップの作成チュートリアルでこの Web マップを作成していない場合、Tree planting opportunities in Portland (Final) のアイテム ページに移動してこのチュートリアルを続行します。
Web マップが Map Viewer で開きます。
- [コンテンツ] ウィンドウで [アプリの作成] をクリックし、[ArcGIS StoryMaps] を選択します。
注意:
ArcGIS 組織アカウントでは、ArcGIS Experience Builder や ArcGIS Dashboards などの Web アプリも使用できます。
ArcGIS StoryMaps によってストーリー ビルダーが起動して新しいストーリーが開きます。 ストーリーは、注釈またはプレゼンテーションを構成するマップ、テキスト、その他のメディア アイテムが含まれている単一の Web ページです。
次に、タイトルを入力し、デザイン設定を選択し、序文を追加することで、プレゼンテーションを設定します。
- [ストーリーのタイトル] に、「Climate Resilience: Street Trees」と入力します。
- 短い序文として、「Visualizing areas in the City of Portland that would benefit from additional trees」と入力します。
次に、ストーリーのカバーに背景を追加します。
- Coverr_EmptyStreetArgentina.zip をダウンロードします。
注意:
このファイルのサイズは約 13 MB です。
- お使いのコンピューター上の場所に .zip ファイルを抽出します。
- [カバー画像またはビデオの追加] をクリックします。
- [画像またはビデオの追加] ウィンドウで [ファイルの参照] をクリックします。 展開したフォルダーを参照し、[Coverr_EmptyStreetArgentina.mp4] ファイルを選択します。
- [追加] をクリックします。
ビデオがストーリーのカバーに追加されます。
次に、カバー デザインとストーリーのテーマを構成します。
- リボンの [デザイン] をクリックします。
- [デザイン] ウィンドウの [カバー] で、[全体表示] を選択します。
- [テーマ] で、[Ridgeline] を選択します。
- [デザイン] ウィンドウを閉じます。
ストーリーのタイトル、カバー デザイン、テーマを設定しました。
テキストと画像の追加
最初に、ヘッダーを作成し、このストーリーで閲覧者に伝える内容について紹介する注釈テキストの最初の段落を追加します。
- カバー ビデオとマップの間のスペースをポイントし、[コンテンツ ブロックの追加] ボタンをクリックします。
- [基本] で [テキスト] をクリックします。
- 「The benefits of urban canopy」と入力し、Enter キーを押してテキストの新しい行を開始します。
- テキストの次の行で、以下をコピーして貼り付けます。
Street trees are an effective strategy to increase tree canopy coverage across a city and mitigate the impacts of increasingly high temperatures due to climate change. Trees provide shade, lower surface and air temperatures and provide protection from direct sunglight, reducing the risk of heat-related illnesses.
- [The benefits of urban canopy] というテキストをハイライト表示します。 表示されたツールバーで、[段落] をクリックし、[見出し 1] を選択することで、このテキストを見出しとしてスタイル設定します。
このテキストが [見出し 1] スタイルに設定されました。
- テキストのこの段落の下のスペースをポイントし、[コンテンツ ブロックの追加] ボタンをクリックします。
- [メディア] で、[画像] を選択します。
注意:
この他にもさまざまなタイプのメディアをストーリーに追加できます。 一部のメディア タイプは個人アカウントでは使用できません。 組織アカウントでは ArcGIS StoryMaps のさらに多くの機能にアクセスできます。
- 画像の追加ウィンドウで、[リンク] タブをクリックして次の URL を貼り付けます。
https://images.unsplash.com/photo-1589123592035-32858c974713?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
- [追加] をクリックします。
ストーリーに画像が追加されます。
- 画像の下に、別の [テキスト] コンテンツ ブロックを追加し、次のテキストをコピーして貼り付けます。
Trees also clean the air by capturing particulate matter on their leaves and bark, and by absorbing pollutants such as nitrogen oxides, ammonia, sulfur dioxide, and ozone. They reduce and slow storm water by intercepting precipitation in their leaves and branches. They add beauty to their surroundings by injecting color and softening the harsh lines of city buildings. Finally, planting and maintaining trees requires workers, which provides jobs, contributing to the economy.
次に、心に響く引用文を追加します。
- 最後の段落の下に [テキスト] コンテンツ ブロックを追加し、次のテキストをコピーして貼り付けます。
"The best time to plant a tree is twenty years ago. The second best time is now." - Chinese proverb
- このテキストをハイライト表示し、ツールバーで [段落] をクリックして [引用] を選択します。
引用テキストであることを強調するためテキストのスタイルが変わります。
次に、ストーリーのこのセクションが完結していることを示すため、区切り線を追加します。
- 引用テキストの下をポイントし、[コンテンツ ブロックの追加] ボタンをクリックします。 [区切り文字] を選択します。
ストーリーに区切り線が追加されます。
注意:
ArcGIS 組織アカウントでは、ストーリーのテーマをカスタマイズしたり、区切り線をカスタマイズしてその色やパターンを変更したり、画像にしたりすることができます。 区切り線をカスタマイズすることで、ストーリーを個性的な外観にすることができます。 カスタム テーマを使用したストーリーの例をご覧ください。
テキスト、画像、引用文をストーリーに追加しました。 次に、プレゼンテーション用にマップに表示する情報を構成します。
マップの構成
ストーリーに追加したマップには大量の情報が含まれています。 プレゼンテーションでは、ポートランドの既存の樹木の全体図のみを表示します。 最初に、マップについて紹介する新しいヘッダーと文を追加します。
- 区切り線の下に、[テキスト] を追加し、「Existing trees in Portland」と入力します。 テキストを [見出し 1] スタイルに設定します。
ストーリーに 2 番目の見出しを作成しました。
- この見出しの下に、以下の [テキスト] ブロックを追加します。
There are currently a number of trees in Portland. Below is a map showing trees in the two census tracts with the highest scores for heat wave risk.
この文を読めば、マップに何が表示されているかがわかります。 次に、マップを構成します。
- マップの上部をポイントして、[編集] をクリックします。
- [マップ レイヤー] の下の、[Sketch] レイヤーと [Heat Severity - USA 2021] レイヤーの表示設定ボタンをクリックします。
- [オプション] タブをクリックして [凡例] と [凡例を開いたままにする] をオンにします。
ストーリー内のマップで凡例が開いて表示されたままになります。
- 必要に応じて、マップの表示範囲を調整して樹木が中央に表示されるようにします。 完了したら [保存] をクリックします。
- マップの一番下で、キャプション プレースホルダー テキストをクリックし、「Existing trees in census tracts with highest risk scores for heat waves.」と入力します。
ストーリー内のマップを共有することは、マップを使用して注釈をさらにわかりやすく示すための 1 つの手段です。 次に、サイドカー エレメントに 3D シーンを追加します。
サイドカーの追加
マップ、画像、他のメディアの間のスムーズなトランジションを作成するには、サイドカー ブロックを使用します。 一連のスライドを使用して、メディアとテキストを統合するシンプルなスクロール操作が実現できます。 サイドカーでは、他のユーザーが同時に 1 ステップずつマップ データにアクセスできます。
- マップの下に、区切り線を追加します。
- 区切り線の下に、[テキスト] ブロックを追加し、「Heat severity」と入力します。 テキストを [見出し 1] スタイルに設定します。
- ヘッダーの下に、次のセクションについて紹介する以下の文を追加します。
Trees can lower surface and air temperatures by as much as 10 degrees. The protection from direct sunlight and heat also reduces the risk of heat-related illnesses, like headaches, cramps, heatstroke that can damage internal organs, and even death. Taking into consideration where there have been high levels of heat severity will better inform where more street trees are needed the most.
- 段落テキストの下にある [コンテンツ ブロックの追加] ボタンをクリックし、[没入型] の下の [サイドカー] をクリックします。
- [レイアウトの選択] で [スライドショー] を選択し、[保存] をクリックします。
空白のサイドカーが表示されます。
サイドカーは、一方の側の注釈パネルと、もう一方の側のメディア パネルで構成された、並べて表示される没入型ブロックです。 スライドは、これらの 2 つのパネルの組み合わせで構成されます。
- サイドカーのメディア パネルの上部で、[追加] をクリックし、[マップ] を選択します。
- [マップの追加] ウィンドウで、[Tree planting opportunities in 3D] シーンを選択します。
注意:
シーンの作成チュートリアルでこのシーンを作成していない場合、Tree planting opportunities in 3D (Final) に移動します。 このシーンのアイテム ページのサムネイルの下で、[お気に入りに追加] をクリックします。 [マップの追加] ウィンドウのブラウザー タブに戻り、[お気に入り] タブをクリックします。 [Tree planting opportunities in 3D (Final)] シーンを選択します。
[マップの表示設定の調整] ウィンドウにマップが表示されます。 サイドカーの 1 つ目のスライドを設定して、市の全体図と Heat Severity レイヤーが表示されるようにします。
- [マップの表示設定の調整] ウィンドウで [スライド] タブをクリックし、[Heat Severity] スライドを選択します。
- 建物の輪郭がよく見えるようにシーンの表示範囲を調整してから、[保存] をクリックします。
サイドカーのメディア パネルにマップが追加されました。 次に、マップに付随する注釈パネルにテキストを追加します。
- サイドカーの注釈パネルに、次の文をコピーして貼り付けます。
With consideration to areas that have experienced high heat intensity, there are many areas that may benefit from additional shade trees.
サイドカーの 1 つ目のスライドが構成されました。
- [新しいスライド] ボタンをクリックします。
- これまでに学習した手順に従って、同じシーンをサイドカーに追加します。
ヒント:
サイドカーの上部で [追加] をクリックしてから、[マップ] をクリックします。 [Tree planting opportunities in 3D] シーンを選択します。
今度は、街路樹の植栽が効果的である市内のエリアを示すブックマークを選択します。
- [マップの表示設定の調整] ウィンドウで [スライド] タブをクリックし、[Additional Street Trees 1] スライドを選択します。
- 必要に応じてシーンの表示範囲を調整し、[保存] をクリックします。
- テキスト ボックスに、「This area near the Pearl District would benefit from additional trees due to the high level of heat intensity it experiences.」と入力します。
- これまでに学習した手順に従って、3 つ目のスライドをサイドカーに追加して [Additional Street Trees 2] スライドを表示します。 テキストとして、「Areas in East Portland would benefit from additional trees.」と入力します。
- これまでに学習した手順に従って、4 つ目のスライドをサイドカーに追加して [Additional Street Trees 3] スライドを表示します。 テキストとして、「The southwest side of Portland State University has areas that also experience high heat intensity and would benefit from more shade trees.」と入力します。
- サイドカーの 1 つ目のスライドをクリックし、次のスライド矢印をクリックしてサイドカーのスライドショーをプレビューします。
これで、サイドカーの構成が完了しました。 次に、ストーリーの最後のいくつかのエレメントを構成した後、公開することができます。
ストーリーの仕上げと公開
ストーリーの仕上げとして、出典を追加し、ナビゲーション バーを追加して、閲覧者がプレゼンテーションの各セクションに簡単にジャンプできるようにします。 ストーリーをプレビューし、公開してから、すべての人と共有できるように共有設定を行います。
- ストーリーの下部にスクロールし、[著作権の見出しを追加] をクリックします。 「References」と入力します。
- 1 つ目の出典を追加するため、[コンテンツ] をクリックし、次のように入力します: 「Bernstein, A. 2020, Rising temperatures: How to avoid heat-related illnesses and deaths. Harvard Health Blog」
- [帰属] をクリックし、「https://www.health.harvard.edu/blog/rising-temperatures-how-to-avoid-heat-related-illnesses-and-deaths-2020080517582」と入力します。
- この出典の下の追加ボタンをクリックします。
- 次の出典を追加します。
- Davies, C. L. 2019. Trees Play A Vital Role In Landscape Design. Texas A&M Today. https://today.tamu.edu/2019/04/25/trees-play-a-vital-role-in-landscape-design/#:~:text=The%20aesthetic%20value%20that%20a,every%20architectural%20or%20landscape%20design
- University of Wisconsin-Madison, 2019, Trees are crucial to the future of our cities. Science Daily. https://www.sciencedaily.com/releases/2019/03/190325173305.htm
- U.S. Dept of Agriculture Forest Service. 1977. How Trees Help Clean The Air. Agriculture Information Bulletin No. 412. https://naldc.nal.usda.gov/download/CAT87209983/PDF
- U.S. EPA, 2022. What is Green Infrastructure? https://www.epa.gov/green-infrastructure/what-green-infrastructure#Urbantreecanopy
プレゼンテーションで使用した 5 つの引用の出典を追加しました。 次に、ナビゲーション バーをストーリーに追加します。
- リボンの [デザイン] をクリックします。
- [デザイン] ウィンドウの [ストーリー セクション (オプション)] で、[ナビゲーション] をオンにします。
- [デザイン] ウィンドウを閉じます。
ナビゲーション バーがストーリーに追加されました。 ナビゲーション バーの各リンクはプレゼンテーションの [見出し 1] テキストに対応しています。
- いずれかの見出しタイトルをクリックします。
見出しをクリックすると、ストーリーのそのセクションにページがジャンプします。
ストーリーをプレビューできます。
- リボンの [プレビュー] をクリックします。
- [プレビューは、取り消し履歴をリセットします] ウィンドウで [はい。続行します] をクリックします。
- ストーリーを確認します。 テキストが予想どおりに表示されていることを確認し、マップとサイドカーを操作し、すべての出典が正しく記載されていることを確認します。
- 確認し終えたら、[閉じる] をクリックします。
- リボンで [公開] をクリックします。
- [公開オプション] ウィンドウの [共有レベルの設定] で、[すべてのユーザー (パブリック)] を選択して [公開] をクリックします。
公開バージョンのストーリーが表示されます。 このページのリンクを共有することで、すべての人とストーリーを共有することが可能になりました。
このチュートリアルでは、ArcGIS StoryMaps を使用して、ビデオ クリップの見出しを追加し、テキスト、画像、マップを追加することで、ストーリーを構成しました。 プレゼンテーションの注釈が具体的に伝わるようにマップを構成し、サイドカーを使用して、植林候補地のスライドショーを 3D で表示しました。 このプレゼンテーションで使用した引用の出典を記載し、ナビゲーション バーを追加して、閲覧者がストーリーの各セクションにジャンプできるようにしました。
ArcGIS 組織アカウントでは、ストーリーのテーマをカスタマイズしたり、画像ギャラリーなどの追加のタイプのコンテンツ ブロックを使用したり、他の ArcGIS アプリを埋め込んだり、タイムラインを追加したりすることができます。 組織内だけでストーリーを共有するなど、共有レベルのオプションも増えます。 新しい発想を得るため、ArcGIS StoryMaps Competition の受賞ストーリーを参考にしてください。
注意:
プライベート共有、データの公開、解析の実行などの追加機能を使用するには、ArcGIS 組織のサブスクリプションを購入して、ArcGIS Online を GIS ツールセットに組み込みます。 サブスクリプションには、さまざまなユーザー タイプを設定できます。ユーザー タイプによって、ユーザーおよびチーム メンバーとその作業に必要なツールを簡単に対応付けることができます。 ArcGIS 個人アカウントがある場合は、個人アカウントを組織アカウントに変換できます。
