Skip to content

2. 塗り絵とカスタマイズ

地図を読み込んだら、次はそれを生き生きとさせる番です!このセクションでは、PaintMyMapを強力にする塗り絵とカスタマイズの基本機能について説明します。これらはエディタで目にする内容と完全に一致します。

塗り絵の仕組み

PaintMyMapでの塗り絵は、地図の特徴(国、地域など)を凡例グループに割り当てることで行われます。各グループには独自の色、オプションのパターン、およびラベルがあります。

塗り、消去、ブラシサイズの変更

基本的な塗り絵

  1. 凡例グループを選択: 凡例内のグループをクリック(その色がアクティブな塗り色になります)
  2. ブラシを選択: シングルまたは円形サイズ(S/M/L/XL)を選択
  3. 塗り絵: 地図の特徴をクリックまたはドラッグして選択したグループに割り当て
  4. 消しゴム: 消しゴムに切り替えて特徴から塗りを削除

ショートカット: B(ブラシ)、E(消しゴム)、⌘/Ctrl+Z(元に戻す)、⇧+⌘/Ctrl+Z(やり直し)

凡例の管理

凡例は、地図の視覚的な整理の中心です。地図上で使用したい各色は、グループ(凡例項目)に割り当てる必要があります。

凡例項目の選択、並べ替え、表示/非表示、凡例タイトルの追加、サイズ変更、移動

凡例グループの作成

  • グループを追加: + 項目を追加をクリックして新しいグループを作成
  • グループの色とパターン: 色見本をクリックして色/パターンメニューを開く
  • グループラベル: 各グループのラベルフィールドに直接入力
  • 凡例での表示/非表示: 任意のグループの表示を切り替え
  • 並べ替え: ハンドルをドラッグするか、上下ボタンを使用
  • 削除: グループを削除(これにより塗られた領域は削除されず、未塗装に戻ります)
  • 凡例タイトル: オプションで「凡例タイトルを表示」を切り替え、タイトルテキストを編集

凡例の位置調整

  • ドラッグして移動: 凡例を地図上の任意の場所にドラッグ(プレビュー モードで最も簡単)
  • サイズ変更: コーナーハンドルを使用して凡例ブロックをスケーリング
  • 背景: オプションで凡例の背景色と透明度を設定

階層的な地図 - カラーグラデーションの生成

Choroplethジェネレーターを使用すると、わずか1クリックで完璧なカラーグラデーションを作成できます!開始色と終了色、ステップ数を選択すれば完了です。

Choroplethジェネレーターでカラーグラデーションを生成

ブラシツール

ブラシを選択するには、ブラシツールをクリックします。サイズを変更するには、その隣のドロップダウンを使用します。色を変更するには、凡例から新しいグループを作成または選択します。

ブラシツールとそのサイズを選択

ブラシの種類

  • シングル: クリックごとに1つの特徴を塗る(正確なコントロール)
  • 円形: ブラシ半径内のすべての特徴を塗る
    • S/M/L/XLサイズで高速塗り

ブラシコントロール

  • アクティブグループ: 現在選択されている凡例グループ
  • ブラシサイズ: S/M/L/XLを選択;プレビュー円が正確な半径を表示
  • 色プレビュー: アクティブなグループの色/パターンを表示
  • 消しゴム: 特徴から塗りを削除(E)

ヒント: サイズを試しながら自由に元に戻す/やり直しを使用してください。

ブラシの色

単色で塗ることも、2色または3色のパターンを選択することもできます。

ブラシの単色または2色/3色パターンを選択

シェイプツール

シェイプツールを使用して、注釈を追加したり、強調したり、塗られた領域に追加の意味を重ねたりします。

シェイプを描画、色変更、テキスト追加、回転、編集

使用可能なシェイプの種類

シェイプ用途
シンプルなポインター/下線;クリック&ドラッグで描画
矢印方向性のあるコールアウト(自動矢印ヘッド)
長方形標準的なボックスハイライト
角丸長方形柔らかいハイライト/ラベルコンテナ(角が丸い)
強調リングまたはマーカー
コメント丸みを帯びた吹き出しスタイルの注釈(楕円形の本体+尾)
コメントボックス四角い吹き出し(箱型バリアント)で移動可能な尾付き
コールアウトボックス+矢印の尾(尾はターゲットを指す三角形/矢印)

シェイプの描画

  1. シェイプツールを選択(ショートカット: S)。
  2. ミニパレットからシェイプタイプを選択。
  3. 地図上でクリック&ドラッグして描画。
  4. ドラッグ中にShiftを押し続けると制約: 完全な円、正方形、または45°の増分で線/矢印を描画。
  5. Option/Altを押しながら描画すると、クリックした中心から外側に描画。

シェイプのスタイリングとオプション

  • ストローク幅と色: 輪郭の太さと色を調整。
  • ズームに合わせてスケール: ズーム時にストローク/テキストがスケールするかどうかを切り替え(相対的なサイズの場合は有効、一定の視覚的重みの場合は無効)。
  • 塗りつぶし: 塗りつぶしを有効にし、単色またはパターンを選択;スライダーで透明度を調整。
  • パターン: 凡例グループと同じパターンライブラリ(線、点、ストライプ、3色パターン)。
  • テキスト: テキストオーバーレイを有効にし、フォントファミリー、サイズ、色、およびオプションのシャドウ+シャドウ色を設定。
  • ドロップシャドウ: (シェイプごとに)シャドウを有効にし、ぼかし、不透明度、オフセット、色を調整して深み/コントラストを追加。

シェイプの編集

  • 選択ツール(V)を使用してシェイプを選択。
  • ドラッグして移動;ハンドルが表示され、サイズ変更(コーナー)と回転(回転コントロール/Rキー選択中)が可能。
  • シェイプテキストをダブルクリックして編集。
  • Delete / Backspace(または削除アイコン)を押して削除。
  • コメント/コメントボックス/コールアウトの尾: 丸い尾のハンドルをドラッグしてバブル/ボックス本体とは独立してポインターを再配置。

SVGツール(インポート/配置)

SVGツールを使用して、再利用可能なベクターグラフィックをインポートするためのSVGライブラリダイアログを開きます。

SVGを読み込み、配置、色変更、サイズ変更、回転、編集

ワークフロー

  1. **SVG(インポート/配置)**をクリックしてダイアログを開く。
  2. 生のSVGマークアップを貼り付けるまたは1つ以上の.svgファイルを選択。テーマドロップダウンの組み込みSVGも探索可能。
  3. リストに追加を押して、解析済みバージョンを「あなたのSVG」にキャッシュ(ローカルストレージに保存され、クリアされるまで保持)。
  4. エントリを選択して配置を押し、地図上でクリック&ドラッグして位置とスケールを一度に調整。
  5. その後、選択(V)を使用して微調整: 移動、回転、サイズ変更、削除。

動作と注意点

  • ダイアログの切り替え: 開いている間にSVGツールを再度クリックすると閉じ、選択に戻ります。
  • サニタイズ: スクリプト、イベントハンドラ、foreignObjectノードは安全のため削除されます。
  • 配置中にアスペクト比が自動的に保持されます。
  • ライブラリの永続性: 「すべてクリア」ボタンで全体をクリア;個別の項目は削除可能。
  • パフォーマンス: 非常に複雑なSVG(数千のパス)は、操作性とエクスポート時間に影響を与える可能性があります。

使用例

ロゴ、バッジ、ピクトグラム(人口、気候アイコン)、インセットマーカー、コンパスローズ、装飾フレーム。

選択ツール

選択ツール(V)は、描画されたシェイプや配置されたSVGを操作するためのものです。

選択ツール

選択と複数選択

  • シェイプ/SVGをクリックして選択;ドラッグして移動。

変形ハンドル

  • コーナーハンドル: サイズ変更(Shiftを押し続けて正方形/円を制約)。
  • 回転ハンドルまたは選択中にRを押して回転。
  • コメント/コメントボックスの尾ハンドル: 吹き出しの尾のアンカーを再配置。

テキスト編集

  • シェイプテキスト(コメント/コメントボックス/テキスト対応シェイプ)をダブルクリックしてインライン編集。
  • スタイルコントロール(フォント、サイズ、色、シャドウ)を使用して微調整。

削除

  • Backspace / DeleteまたはUIの削除アイコンで選択したシェイプを削除。

高度なカスタマイズ

これらの機能を使用して地図を次のレベルに引き上げましょう。オプションを開いてアクセスします。

ラベルと地図タイトルをカスタマイズ

凡例設定

  • 凡例: 地図上で凡例を表示/非表示
  • 凡例背景: 凡例の背景色と透明度設定
  • 凡例タイトルを設定: 凡例タイトルを設定または完全に非表示

地図

  • 塗られた領域のみ: クリーンなエクスポートのために未塗装の領域を非表示
  • 緯度/経度線を表示
  • 地理的な線を表示
  • タイムゾーン線をラベル付きまたはラベルなしで表示

ラベルとタイトル

  • 地図タイトル: タイトルを切り替え、テキストを編集、ドラッグして位置を調整、コーナーハンドルでサイズ変更
  • 国ラベル: 国ラベルを表示、省略形を選択、フォント、色、オプションのシャドウを変更。塗られた国のみに表示するか、国名を凡例グループの値に置き換える

視覚的な強化

  • 地図背景色: キャンバスの背景を設定

  • 境界線の色: 国境の色を設定

  • 地図テーマ: インスピレーションが必要ですか?組み込みのカラーパレットから地図テーマを選択

  • 緯度/経度線: 緯度/経度グリッドを表示

  • 地理的な線: 赤道、回帰線、極圏、子午線を表示

  • タイムゾーン: オプションのタイムゾーンポリゴンとラベル(対応する地図の場合)

カラー戦略

  • カテゴリカル: 異なるカテゴリに異なる色を使用
  • シーケンシャル: データ範囲にカラーグラデーションを使用
  • 発散: 極値を強調するカラースキームを使用

パターン塗り

内蔵のSVGパターンで微妙なテクスチャを追加:

  • 線/ストライプ: 水平、垂直、斜め;三重線バリアント
  • 点/クロスハッチ: 点グリッドとクロスハッチスタイル
  • 三重ストライプ: 主色/副色/三次色を組み合わせる

方法: グループの色見本をクリックし、パターンを有効にしてタイプを選択。主色、副色、および(利用可能な場合)三次色をカスタマイズ。カスタムパターン画像のアップロードは現在サポートされていません。

元に戻す&やり直す

包括的な履歴コントロールで作業を失うことはありません:

履歴コントロール

  • 元に戻す/やり直す: 変更をステップごとに戻す(⌘/Ctrl+Z、⇧+⌘/Ctrl+Z)
  • すべてクリア: すべての塗りを削除(確認付き)

コピー&ペースト

SVGやシェイプで動作するコピー/ペースト機能で作業をスピードアップ(⌘/Ctrl+C、⌘/Ctrl+V)

自動保存

作業内容はブラウザのローカルストレージに保存され、戻ってきたときに復元するよう促されます。

インタラクティブ機能

ズーム&パン

  • マウスホイール: カーソル位置でズームイン/アウト
  • ズームボタン: 正確なズームコントロール(+/-)
  • パン: 地図ビューをドラッグして移動

回転&方向

  • 地球回転: 地球を回転(回転コントロールをドラッグ)
  • 2D回転: 平面地図を回転(回転コントロールをドラッグ)
  • 反転: 水平方向および垂直方向のミラー効果

シェイプ&注釈

シェイプツールを使用して視覚的なコールアウトを追加:

  • 種類: 線、矢印、長方形、角丸長方形、円、コメント、コメントボックス、コールアウト
  • スタイル: ストローク幅/色と塗り色/透明度を設定
  • テキスト: シェイプにテキストを追加(フォント、サイズ、色、オプションのシャドウ)
  • ズームに合わせてスケール: ズーム時にシェイプがスケールするかどうかを選択

プロジェクトの保存&読み込み

状態のエクスポート(プロジェクトの保存)

  • 進行状況を保存: プロジェクト全体をJSONファイルとしてエクスポート
  • 含まれる内容: すべての塗り、色、設定、カスタマイズ
  • ファイル形式: .jsonファイルで、いつでも再開可能
  • 用途: 作業のバックアップや後での続行

状態のインポート(プロジェクトの読み込み)

  • 作業を復元: 以前に保存したJSONファイルをインポート
  • 保持される内容: すべての塗りとカスタマイズ設定
  • デバイス間: 異なるブラウザやデバイス間で動作

自動保存

  • 自動的に: 作業内容がブラウザのローカルストレージに保存
  • 復元: 最後のセッションを自動的に復元
  • 操作不要: バックグラウンドで実行

プレビュー モード

エクスポート前に、プレビューモードを使用して最終的な地図を確認:

  • すべての編集コントロールとUIを非表示
  • 地図、凡例、カスタム要素のみを表示
  • 凡例とタイトルをドラッグして微調整
  • 最終的な構図チェックに最適

次のステップ

地図が完璧に仕上がったら、エクスポートの準備をしましょう!最終セクションに進んで、作成物の保存と共有について学びましょう。