Skip To Content

ストーリー マップ カスケードの作成

このレッスンでは、カリフォルニア州サンディエゴを訪れる人向けのシンプルなガイドを作成したいと考えています。読者には市内の主要エリアに関するオリエンテーションを提示し、面白い場所を見つけられるようにします。このストーリーでは、いくつかの主要地域や名所を示す、都市の既存の Web マップを使用します。また、カメラマンから提供された画像も使用します。

サンディエゴの主要地域や名所に関して、人の目を引き付ける力があるこのストーリー マップ カスケードを作成します。ストーリー マップ カスケードは、インラインのコンテンツと、マップ、画像、3D シーン、ビデオ、その他の Web コンテンツが画面いっぱいに美しく表示される没入型セクションを組み合わせて作成できます。カスケードは、詳細なストーリーをフリーフォーム構造で語る場合に最適で、読み手の移動がとても簡単です。スクロールするだけで済むからです。

カスケード ビルダーの起動

ストーリー マップ カスケード ビルダーでは、カスタマイズされたマップ、写真、テキストを含めることで、顧客に魅力的で有益なエクスペリエンスを提供できます。このレッスンでは、都市の既存の Web マップとカメラマンから提供された画像を使用します。

  1. Esri ストーリー マップ Web サイトに移動します。
  2. ページの上部にある [アプリ] をクリックします。
  3. 情報豊かなマルチメディア ストーリー」というタイトルのセクションを下へスクロールして、[ストーリー マップ カスケード] テンプレート オプションを見つけます。

    カスケードのテンプレート

  4. [ビルド] をクリックします。
    注意:

    カスケード ビルダーは Chrome、Firefox、Safari でサポートされています。カスケード ストーリーは、任意の Web ブラウザーで表示できます。

  5. プロンプトが表示されたら、ArcGIS アカウントにサイン インして、[カスケード ビルダーに進む] をクリックします。
    注意:

    ArcGIS アカウントを持っていない場合は、無料の個人向けプランのアカウントにサイン アップできます。

    カスケード ビルダーのカバー ページ

    カスケード ビルダーが開き、プレースホルダー カバー写真を含むカバー ページが表示されます。

    これでストーリー マップ カスケードの構築を開始する準備ができました。

カスケードのカバーの構成

では、カバー ページのカスタマイズを開始しましょう。カバー ページはユーザーが最初に目にするものなので、印象的なものにしたいと思います。

  1. [ストーリーのタイトルを入力] ボックスに、「Welcome to San Diego」と入力します。
  2. サブタイトルは自由につけるか、「Discover this popular Southern California beach city」というテキストを使用することができます。
  3. カスケードを保存するには、カスケード ビルダーの左側の [保存] ボタンをクリックします。
    注意:

    ストーリーのヘッダーに独自のロゴを追加して、ユーザーが作成者を確認できるようにすることをお勧めします。ロゴを追加するには、[設定] ボタンをクリックします。表示されるウィンドウで [ロゴと共有] タブをクリックします。

  4. [画像またはビデオの追加] ボタンをクリックします。

    メディア ピッカーが開き、カバー ページの画像を選択できるようになります。

    画像は自分のコンピューターからカスケード ビルダーに直接ドラッグできます。または、Flickr のような写真ホスティング サイトなど、Web 上にある画像にアクセスすることもできます (Web からの画像を使用する権限があることが重要です)。写真やその他のグラフィックスを追加する場合には、独自の画像をストーリー マップにアップロードすることをお勧めします。常に使用可能になるからです。ここでは、自分のカメラマンがすでに Flickr で写真を一般共有しているので、その写真にアクセスします。

  5. [Flickr] タブをクリックし、[Flickr アカウント] をクリックします。
  6. [アカウントの検索] ボックスに「Esri Story Maps Demo」と入力して Enter キーを押します。
  7. Welcome to San Diego アルバムを選択します。
  8. カスケードのオープニング画像にふさわしいと思う画像をこの Flickr アルバムから選択します (View over San Diego Bay など)。
    注意:

    別の画像を試してみる場合は、カバーの左下隅の鉛筆アイコンをクリックして、[管理] > [メディアの変更] の順にクリックします。カバー ページの上部のタイトルやサブタイトルの外観も変更できます。

    鉛筆アイコン

    満足のいくカバー ページができたので、ストーリー マップの概要を作成します。

概要を示すテキストと写真の追加

次に、テキストとインライン メディアを使用してストーリーの最初の部分のコンテンツを追加します。

  1. ページの下部にある矢印ボタンをクリックします。

    矢印ボタン

  2. 追加ボタン (+) をクリックします。

    [追加] ボタン

  3. 表示されたメニューで、[テキスト] を選択します。

    [テキスト]

  4. サンディエゴを紹介するテキストを入力します。独自のテキストを記載するか、以下のテキストを使用します。

    San Diego offers a near-perfect "endless summer" climate, great beaches, a lively downtown, cool neighborhoods, and a generally laid-back feel. (サンディエゴは、ほぼ完全に「終わらない夏」の気候、素晴らしいビーチ、活気あるダウンタウン、クールな近郊地域、全体にリラックスした雰囲気を備えた都市です。)

    Plus there are miles of coastline, mountains, and a desert to explore. (長く続く海岸線、山々、砂漠を探索することもできます。)

    Let us introduce you to the city and help you discover some cool places along the way that you may enjoy. (この都市を紹介しながら、皆さんが楽しめるクールな場所を見つけるお手伝いをさせていただきます。)

    ストーリー マップ カスケードのテキストには、ヘッダー、サブヘッダー、引用、配置の書式設定が可能です。

  5. パラグラフ内をクリックして、左側の書式設定ボタンをクリックして外観を変更します。
    注意:

    特定のテキストを抜粋して太字、斜体、下線、取り消し線、ハイパーリンク、または別の色に書式設定することもできます。テキストをハイライト表示すると、これらのオプションを含むメニューが表示されます。

    [テキストの書式設定] アイコン

  6. 追加したテキストの最後のパラグラフの後の追加ボタン (+) をクリックして、[メディア] を選択します。
  7. メディア ピッカーの [Flickr] タブに先ほど見たのと同じ写真アルバムが表示されるので、サンディエゴを表す別の画像 (Sunset Cliffs など) を選択します。
    注意:

    写真には独自所有のものや組織が一般共有しているものを使用することをお勧めしますが、メディア ピッカーを使用して、非商用目的または教育目的で提供されている画像を検索することもできます。Flickr だけでなく、Unsplash も無料の高品質な写真コレクションです。ただし、常に写真やその他のメディアの使用条件を確認し、所有者への適切な帰属を付与するようにしてください。

  8. 追加した画像をポイントします。

    3 つのアイコンが表示されます。鉛筆アイコンでは、写真のサイズを変更したり、入れ替えたり、削除したりできます。ごみ箱アイコンでは、写真をすばやく削除できます。プラス記号のアイコン ([別の画像を追加] ボタン) では、画像を追加できます。

    この写真の横にいくつか写真を追加して、画像のギャラリーを作成します。

  9. [別の画像を追加] ボタンをクリックします。

    [別の画像を追加]

  10. メディア ピッカーで、Downtown San Diego Children's Park を選択します。

    [別の画像を追加] ボタンがギャラリーの右側に表示されます。

  11. Balboa Park - Buildings and Gardens という画像を追加します。

    画像ギャラリー

    複数の画像を追加すると、写真のサイズが自動処理される様子を確認します。

  12. [ここにキャプションを入力] をクリックして、カメラマンの名前など (例: Rupert Essinger / Esri)、新しいギャラリーの説明を入力します。
    注意:

    別の関係者の画像を使用する場合には、謝辞、帰属、サイトへのリンクなどをここに追加するとよいでしょう。写真の出典がすべて同じ場合には、カスケードの最後のオプションの著作権セクションで著作権を追加することもできます。

  13. 追加した写真の下の追加ボタン (+) をクリックして、[テキスト] を選択します。
  14. 以下のように、サンディエゴに関する追加のテキストを入力します。

    San Diego is located on the Pacific Ocean 120 miles south of Los Angeles and 20 miles north of Tijuana on the Mexican border. (サンディエゴはロサンゼルスから 120 マイル南、メキシコ国境のティファナから 20 マイル北に位置する太平洋沿いの都市です。)

    From Los Angeles you can get to San Diego in two hours, either by car or on the popular Amtrak Pacific Surfliner train service. (ロサンゼルスからサンディエゴまでは、車または有名なアムトラックのパシフィック サーフライナーのいずれかを利用して 2 時間で到着します。)

    ここまでに素敵な写真と説明による注釈を導入しましたが、次はマップを追加します。このためにはまず、画像に表示されるランドマークに対する空間参照をユーザーに示します。

マップの追加

ランドマークの位置をユーザーが感じ取れるようにするには、インタラクティブ マップを使用するのが最適です。

  1. 追加した最後のテキスト パラグラフの下の追加ボタン (+) をクリックして、[メディア] を選択します。
  2. メディア ピッカーで、[ArcGIS] タブをクリックして、[ArcGIS Online] をクリックします。

    メディア ピッカーの [ArcGIS] タブ

  3. [検索] フィールドに「CreateCSDSanDiego owner:StoryMaps」と入力して Enter キーを押します。
    注意:

    特定の ArcGIS Web マップの URL (https://www.arcgis.com/home/item.html?id=346b76ac939f474b80795b7a3427831c) をすでに入手している場合は、直接アクセスすることもできます。URL の ID 部分を検索します (この場合は 346b76ac939f474b80795b7a3427831c)。

  4. StoryMaps チームが所有する Welcome to San Diego Web マップをクリックします。

    この Web マップは ArcGIS Online で作成されました。カスケードにマップが表示され、カリフォルニア州南部のサンディエゴの位置が表示されます。

  5. マップをポイントして、マップの左下隅にある鉛筆アイコンをクリックします。

    カスケードには、サイズ、眺望、相互作用のレベルなど、マップの外観や動作をカスタマイズするための複数のオプションがあります。

  6. マップの右下隅の青のチェック マークをクリックして、このウィンドウを閉じます。

    青のチェック マーク

  7. マップの下の追加ボタン (+) をクリックして、[テキスト] を選択します。以下のように、概要セクションの結びのテキストを入力します。

    Although probably best known for its coastline, San Diego County includes several mountain ranges. (美しい海岸線が有名なサンディエゴ郡ですが、ここには多くの山脈もあります。) The Laguna Mountains, 50 miles east of the city, are popular with visitors for their sweeping views over Anza-Borrego State Park, a huge desert preserve that is the largest State Park in California. (都市部から 50 マイル東に位置するラグーナ山地は、アンザ ボレゴ州立公園を広く見渡せることで人気があります。この公園は膨大な砂漠保護地域でカリフォルニア最大の州立公園です。)

  8. 変更を保存します。

    ストーリー マップ カスケードの最初のセクションでは、印象的なカバー ページを作成し、注釈と目的を導入し、ユーザーがその地域を詳しく理解できるように参照マップを追加しました。次に、新しいセクションを追加して、サンディエゴに関するもっと詳しい情報を提供していきます。

テキスト、タイトル、メディアを使用して新しいセクションを開始

カスケードの次の部分はダウンタウン サンディエゴに関するものなので、都市部をユーザーに紹介するためのタイトルと多少のテキストを追加します。

  1. 追加した最後のテキスト パラグラフの下の追加ボタン (+) をクリックして、[タイトル] を選択します。
  2. [タイトルを入力] で、「Downtown San Diego」と入力します。
  3. 追加したタイトル セクションの左下隅にある [メディアの追加] ボタンをクリックします。
  4. メディア ピッカーで、 [Flickr] タブをクリックして、Esri Story Maps Demo アカウントで Welcome to San Diego アルバムを開きます。
  5. タイトル セクションの背景にするダウンタウンの画像を選択します (Downtown San Diego - Children's Park など)。

    表示する画像のセクションを変更する場合は、[背景] 設定でこれを変更できます。

  6. タイトル セクションの左下隅にある鉛筆アイコンをクリックして、[背景] を選択します。
  7. 右側の画像プレビュー内で、青い円をクリックして、求める画像が表示されるまで画像の周囲を移動させます。
    注意:

    画像を変更する必要がある場合は、[管理] タブの [メディアの変更] オプションを使用できます。

    背景画像の配置

  8. 青のチェック マークをクリックして [背景] パネルを閉じます。
  9. [タイトル] セクションの下の追加ボタン (+) をクリックします。

    注釈セクションの追加

  10. [注釈] を選択して注釈セクションを追加し、さらに情報を追加できるようにします。

    [注釈] ボタン

  11. 以下のように、ダウンタウン サンディエゴを紹介するテキストを入力します。

    Start your visit to San Diego in the lively downtown. (サンディエゴに着いたら、まず賑やかなダウンタウンを訪れましょう。) Here, next to San Diego Bay, you'll find the convention center, the marina, the baseball stadium, and lots of things to do. (サンディエゴ湾に隣接するこの地域には、コンベンション センター、マリーナ、ベースボール スタジアムを始めとする数多くの施設があります。)

  12. カスケードを保存するには、カスケード ビルダーの左側の [保存] ボタンをクリックします。

    ストーリー マップ カスケードのこうしたタイトル ブレークは、コンテンツをセクションに分割するのに適した方法です。これで明らかにユーザーは、サンディエゴに関するさらに詳細な説明に没入していきます。

没入型セクションの追加

没入型セクションは全画面表示されます。ユーザーがストーリーをスクロールすると、没入型セクションで定義されたさまざまなビューが、オプションの説明テキスト パネルを伴って表示されます。たとえば、各ビューに異なる画像や、異なるマップや、同じマップ上の異なる場所を表示することができます。ビュー間のトランジション効果を定義することもできるので、一連の画像、マップ、または 3D シーンを通してユーザーを柔軟にガイドできます。

  1. 追加した最後のテキスト パラグラフの下の追加ボタン (+) をクリックして、[没入型] を選択します。

    カスケード ビルダーが変化して、没入型セクションを作成するためのコントロールが表示されます。画面の下部に、この没入型セクションのビューを定義するためのストリップが表示されます。ここには作成に取り掛かれる最初のビューが含まれています。

  2. [メディアの追加] をクリックして、最初のビューに表示するものを選択します。
  3. メディア ピッカーで、Esri Story Maps Demo Flickr アカウントの Welcome to San Diego アルバムから、ダウンタウンの画像 (Downtown San Diego USS Midway など) を 1 つ選択します。
  4. 追加した写真上に、[ここでストーリーを続行] と表示された空のテキスト パネルが表示されます。

    [ここでストーリーを続行] のテキスト パネル

  5. 以下のように、この写真の横に表示するテキストを入力します。

    USS Midway Aircraft Carrier Museum (USS ミッドウェイ海軍航空博物館)

    In Downtown San Diego, don't miss the chance to go on the cavernous Midway! (ダウンタウン サンディエゴでは巨大なミッドウェイに乗船するチャンスを逃すわけにはいきません。) On the ship's huge flight deck there's a large collection of aircraft along with sweeping views of San Diego Bay, the downtown skyline, and Coronado Island. (この空母の巨大な甲板上には航空機の膨大なコレクションがあり、サンディエゴ湾、ダウンタウン スカイライン、コロナド島も見渡せます。) And you'll want to see the bridge and captain's chair! (ブリッジや艦長席も見学できますよ!) Photo: Rupert Essinger / Esri (写真: Rupert Essinger / Esri)

    注意:

    入力用の空のテキスト パネルが写真上にフロート表示されない場合は、上向き、またはわずかに下向きにスクロールすると表示されます。

  6. タイトルが説明テキストよりも大きく表示されるように書式設定します。
  7. テキスト パネルの右上隅にある鉛筆アイコンをクリックします。

    USS Midway の鉛筆アイコン

    テキスト パネルの外観と位置を制御するためのオプションのリストが表示されます。たとえば、写真の右側にフロート表示されるように、テキスト ブロックの位置を変更することができます。

    今までのところ、没入型セクションには 1 つのビューが含まれています。次に、別のビューを追加して別の写真を表示させます。

  8. 画面下部のストリップで、1 つのビュー (そこに別のビューを追加する) の横の追加ボタン (+) をクリックし、[メディアの追加] をクリックして、このビュー用の写真 (Downtown San Diego - Pantoja Park など) を選択します。以下のように、この写真を説明するテキストをテキスト ボックスに入力します。

    Pantoja Park (パントハ パーク)

    This peaceful park is a little oasis in downtown's Marina District. (この静かな公園は、ダウンタウンのマリーナ地区の小さなオアシスです。) The park is surprisingly old: it was laid out in 1850. (この公園は驚くほど古く、1850 年に作られました。) The statue of Benito Juarez was a gift from the Mexican government. (ベニート フアレスの像はメキシコ政府から寄贈されたものです。) ブロードウェイの高層ビルがその向こうに見えます。Photo: Rupert Essinger / Esri (写真: Rupert Essinger / Esri)

  9. テキストとテキスト パネルを書式設定して、最初のビューのパネルと矛盾しない表示にします。
  10. カスケード ビルダーの左側の [保存] ボタンをクリックします。
  11. [ストーリーの表示] ボタンをクリックします。

    [ストーリーの表示] ボタン

    カスケードのプレビューが新しいタブに表示されます。

  12. ストーリー マップを操作してみます。
  13. このタブを閉じて、カスケード ビルダーに戻ります。

マップの没入型セクションへの追加

概要セクションと同様に、対話型のマップによってユーザーはサンディエゴと、特定の注目すべきランドマークの空間分布をよく理解できるようになります。

  1. 新しいビューを追加するには、画面下部のストリップにある追加ボタン (+) をクリックします。

    [追加] ボタン

  2. 新しいビューが表示されるので、[メディアの追加] をクリックします。
  3. メディア ピッカーで [ArcGIS] タブを選択します。
  4. このタブで、[このストーリー] がまだ選択されていない場合はこれを選択します。

    カスケードにすでに追加済みの Web マップが表示されます。

  5. この Web マップを再び選択して、ビューの中で使用します。

    このビューでは、このマップをそのまま表示するのではなく、ダウンタウン サンディエゴを表示させることにします。

  6. マップの左下隅にある鉛筆アイコンをクリックして、このビューでの表示方法を構成します。
  7. サンディエゴのラベルをマップの中心に配置したまま、マップの右下隅の拡大コントロールを使用して (または Shift キーを押しながらマップ上のボックスをドラッグして)、マップにダウンタウン サンディエゴ地域が表示されるようにします。

    サンディエゴにズームしたマップ

    この Web マップの範囲には、サンディエゴを訪れる人向けのいくつかの主要地域や名所と、フェリーやトロリーの路線が含まれています。対象ポイントは Microsoft Excel スプレッドシートにまとめられ、CSV ファイルとして Web マップにアップロードされました。その他のレイヤーは ArcGIS Desktop で作成され、シェープファイルとして Web マップにアップロードされました。

  8. 青のチェック マークをクリックして、このマップ構成を保持します。

    次に、このマップの横のパネルにテキストと写真を追加します。

  9. マップ上には [ここでストーリーを続行] と表示された空のテキスト パネルがフロート表示されます。
    注意:

    空のテキスト パネルが表示されない場合は、上向き、またはわずかに下向きにスクロールすると表示されます。

  10. このテキスト パネルをクリックして、以下のように、このマップの横に表示するテキストを入力します。

    Downtown San Diego (ダウンタウン サンディエゴ)

    Located on San Diego Bay, downtown is thriving. (サンディエゴ湾に面するダウンタウンはとても賑やかな場所です。) It's just a few minutes away from the airport. (空港からわずか数分のところにあります。) And beautiful Balboa Park is close by. (美しいバルボア パークもすぐ近くにあります。) Click the green points to discover some fun places, or keep scrolling down and we'll tour you around some of them. (緑のポイントをクリックすると楽しめる場所が見つかります。また、下向きにスクロールしていくと、いくつかの場所を見て回れます。)

    注意:

    上記のように、クリックできる緑のポイントに関する説明のテキストを含める場合には、green (緑) という単語を緑色に書式設定してマップと一致させることもできます。

  11. 追加した最後のテキスト パラグラフの下の追加ボタン (+) をクリックして、[メディア] を選択し、テキスト パネルに画像を追加します。

    マップへの画像の追加

  12. メディア ピッカーで、Esri Story Maps Demo アカウントの Welcome to San Diego Flickr アルバムから、ダウンタウンの画像 (Downtown San Diego - Children's Park など) を 1 つ選択します。
  13. 写真の下の [ここにキャプションを入力] をクリックして、キャプションを入力します。

    Children's Park, adjacent to the Convention Center (コンベンション センターに隣接するチルドレンズ パーク)

別のビューの追加

ユーザーが下向きにスクロールし続けた場合に、ダウンタウン サンディエゴのビューが自動的に拡大され、ガスランプ クォーターが表示されるようにします。このために、同じマップが表示された別のビューを追加して、その場所が表示されるようにこのビューを構成します。

  1. 画面下部のストリップで、最後に追加したビューをポイントして、[複製] ボタンをクリックします。

    [複製] ボタン

    マップの複製によりマップの正確なレプリカ (ビューやレイヤーを含む) が作成されるので、ユーザーがマップ上のさまざまな場所を見て回れるような一連のビューを簡単に構築できるようになります。 メディア ピッカーでマップをビューに追加した場合には、そのマップに対する必要な構成をもう一度指定する必要があるかもしれません。

  2. マップの左下隅にある鉛筆アイコンをクリックして、このビューでの表示方法を構成します。
  3. ガスランプ クォーターを拡大表示します。ズームするには、マップをダブルクリックして、マップの右下隅にある拡大コントロールを使用するか、Shift キーを押しながらマップ上のボックスをドラッグします。

    ガスランプ クォーターにズームしたマップ

    この縮尺でマップに表示される対象の緑のポイントに加えて、このマップには、面白そうなレストランや路面電車などの、追加のレイヤーがいくつか含まれています。必要に応じて、これらの追加レイヤーを 1 つ以上オンにすることもできます。

  4. 右上隅にあるレイヤーのリストで、この縮尺で表示する追加レイヤー ([Food] など) をオンにします。
  5. 青のチェック マークをクリックして、このマップ構成を保持します。

    これで、このビューでのマップの表示方法に関する構成が完了しました。次に、このビューのテキスト パネルを作成します。

  6. このビューのテキスト パネルには、このビューに関するテキストを入力します。

    The Gaslamp Quarter (ガスランプ クォーター)

    Welcome to San Diego's entertainment, dining, and partying hub. (サンディエゴの娯楽、食、宴の中心地へようこそ。) This is the most popular evening destination in downtown. (ここはダウンタウンで最も人気のある歓楽街です。)

    注意:

    [Food] などの追加レイヤーをオンにした場合、クリックできる青のポイントを説明するテキストも含めることができます。このときに blue (青) という単語を青色に書式設定することもできます。

  7. 最後に追加したテキスト パラグラフの下の追加ボタン (+) をクリックし、次に [メディア] をクリックして、この場所を表す Downtown San Diego - Gaslamp などの画像を選択します。
  8. 写真の下の [ここにキャプションを入力] をクリックして、以下のようにキャプションを入力します。

    You'll find bustling restaurants, bars, and shops along Fifth Avenue immediately north of the convention center, starting at the Gaslamp Quarter sign. (コンベンション センターのすぐ北側、ガスランプ クォーターの標識で始まる 5 番街沿いには、賑やかなレストラン、バー、ショップが並んでいます。)

  9. ステップ 1 ~ 8 を繰り返して、リトル イタリーにズームした別のビューを追加します。リトル イタリーは、ピックアップしたい別の繁華街地区です。ガスランプ クォーターの北西、およそ 10 ブロックの位置にあります。
  10. テキスト パネルに、以下のテキストを入力します。

    Little Italy (リトル イタリー)

    This neighborhood is a quieter, hipper alternative to the hectic Gaslamp Quarter, combining its Italian roots with some cool modern design and great restaurants. (あわただしいガスランプ クォーターに代わり、この地区は静かで洗練されています。イタリア発祥の雰囲気と、クールで現代的なデザインや素晴らしいレストランが融合しています。) There's a large open-air market every Saturday morning. (毎週土曜日の朝には大規模で開放的なマーケットが開催されます。)

  11. Welcome to San Diego アルバムからリトル イタリーの写真を見つけて追加します。
  12. 写真に以下のキャプションを追加します。

    Little Italy is centered along India Street, between Ash to the south and Hawthorn to the north. (リトル イタリーの中心は、インディアナ ストリートに沿う南側のアッシュと北側のホーソンの間の地域です。)

    次に、さらに 2 つのビューを追加して画像を表示して、これらの間に低速のフェード トランジションをかけます。

  13. 画面下部のストリップで、新しいビューを追加する最後のビューの後にある追加ボタン (+) をクリックし、[メディアの追加] をクリックして、Welcome to San Diego Flickr アルバムからダウンタウン サンディエゴの好みの写真を選択します。
  14. 画像のテキスト パネルに場所の名前を追加します。
  15. ステップ 11 とステップ 12 を繰り返し、別の画像を追加します。

    ビューのペア間にはさまざまなトランジションを選択できます (どちらのビューにもマップが表示されている場合を除く)。

  16. 画面下部のストリップで、最後に追加したビューに対して [トランジションの選択] ボタンをクリックします。
  17. [低速でフェード] トランジションを選択します。

    低速でフェード

  18. カスケード ビルダーの左側の [保存] ボタンをクリックします。
  19. [ストーリーの表示] ボタン ([保存] ボタンの上) をクリックします。
  20. ストーリー マップを操作してみてから、タブを閉じてカスケード ビルダーに戻ります。

    お疲れ様でした。これで、サンディエゴのダウンタウン地区に関する 2 つのセクションを含むストーリー マップ カスケードが出来上がりました。一般的には、サンディエゴで注目すべきその他の地区 (ミッション湾、パシフィック ビーチ、ラ ホヤなど) に関するストーリーに対するセクションを引き続き追加していくことになります。これらのセクションを追加するには、適切な写真を使用し、これらの場所にズームしたマップを表示しながら、上記の手順を繰り返します。オプションで、ストーリーの最後に著作権セクションを追加して、写真の著作権やその他の情報を記載することもできます。

ストーリーの共有

ストーリー マップの完成後は、自分の組織や一般ユーザーと共有できます。

  1. カスケード ビルダーの上部には 3 つの共有オプションが配置されています。
  2. ストーリー マップを一般公開する場合は、[パブリック] ボタンをクリックします。

    [パブリック] ボタン

    自分のストーリー マップを宣伝する前に、ストーリー マップ Web サイトの [マイ ストーリー] セクションをご覧ください。[マイ ストーリー] では、ストーリーのサムネイルをアップロードして、1 行にまとめた説明と検索タグを追加できます。これらのエレメントによって、ストーリーが見つけてもらいやすくなり、ソーシャルな共有 (ツイートなど) や検索結果での見栄えが良くなります。

インスピレーションを得るには、ストーリー マップ カスケード ギャラリーにあるいくつかのサンプルをご覧になってください。このギャラリーには、ストーリー マップ カスケード アプリの使用方法や、効果的なデザイン パターンやベスト プラクティスの作成例が示されています。ギャラリーは題材や業界によってフィルターをかけたり、キーワードで検索したりできます。自分の関心や題材とする領域と一致するサンプルが見つかるかどうか確認してみてください。そして、カスケードで情報を伝達する方法や、このアプリで効果的にストーリーを伝えるために最適なアプローチ方法に関する感覚を身に付けてください。

次のレッスンでは、サンディエゴを紹介するストーリー マップ ジャーナルを構築します。