チラシや、サイトにいれる地図を作りたいと思うときがあります。
Canvaでは、編集で簡単にGoogleマップをいれることができますが、もっとデザインされた地図を作る方法をお伝えします。
作っておくと、なんにでも使いまわせるのでとても便利です。
Googleマップから作る方法
Googleマップを利用して、なるべく正しい地図を作る方法です。
Canvaの編集画面から、左のアプリをクリックして、Googleマップアイコンで地図を出す方法もありますが、
今回は、別にGoogleマップを出していきましょう。
例として、下のような地図をもとに作っていきます。
![](https://aaover60.com/wp-content/uploads/2023/08/地図作成・ブログ下書き-1-1.png)
主要な道路を入れる
一番メインとなる幹線道路から入れていきます。
下のGoogleマップの地図に沿って、線の図形を作ります。
線は太めにします。
![](https://aaover60.com/wp-content/uploads/2023/04/9.png)
その他の道路を入れる
主要道路ではないけれど、目標物の近くにあって、地図にあるとわかりやすいと思う道路も、同じように書き加えます。
![](https://aaover60.com/wp-content/uploads/2023/04/8.png)
線路を作る
線路は二つの図形を組み合わせます。
![](https://aaover60.com/wp-content/uploads/2023/04/7.png)
ひとつの線は、下のように太めのドット線に変更します。
![](https://aaover60.com/wp-content/uploads/2023/04/6-1024x576.png)
![](https://aaover60.com/wp-content/uploads/2023/04/5.png)
ふたつの図をぴったりと合わせると、線路らしくなってきました。
![](https://aaover60.com/wp-content/uploads/2023/04/4.png)
目標物の目印と、その他の目印になるアイコンをいれる
Canvaの素材からみつけた、アイコンを入れてみました。(便宜上、下のGoogleマップとはちがっていますが)
主要でない、道路も細く変更しました。
![](https://aaover60.com/wp-content/uploads/2023/04/3.png)
下のGoogleマップは削除してもいい
削除したら、下図のようになります。
そのまま薄く残しておくのもよいと思います。
![](https://aaover60.com/wp-content/uploads/2023/04/2.png)
地図が完成!
下の色を変更し、
北がわかるアイコンを加えました。
道路の名称も入れて、信号機も加えました。
バス停も入れてみました。
とっても簡単にできました。
![](https://aaover60.com/wp-content/uploads/2023/04/1-1.png)
Canvaの素材や図形から作る方法
上記はGoogleマップにそった形でしたが、もっと簡略化した地図が作りたいときは、Canvaの素材や図形を使っていちからつくっていきましょう。
意外とかわいい、おしゃれな地図ができますよ。
おおまかな地図を考える
手書きでいいので、おおまかな仕上がりを考えます。
簡単でいいのです!
![](https://aaover60.com/wp-content/uploads/2023/04/段落テキスト-14-1024x516.png)
主要な道路から作成する
四角の図形で、道路を作ります。
角の丸みを50くらいにしました。
色も好きな色に変更しましょう。
![](https://aaover60.com/wp-content/uploads/2023/04/段落テキスト-15-1024x755.png)
青色で、主要な交差する道路を作りました。
![](https://aaover60.com/wp-content/uploads/2023/04/段落テキスト-13.png)
その他の道路や線路を書き加える
少し狭い道路と、線路を書き加えます。
線路の作り方は上で作ったとの同じようにします。
![](https://aaover60.com/wp-content/uploads/2023/04/段落テキスト-16.png)
目印となるアイコンを書き入れる
Canvaの素材から、アイコンやイラストを探して、目印をいれます。
![](https://aaover60.com/wp-content/uploads/2023/04/段落テキスト-19.png)
完成です!
名称をいれて、手直しして完成です!
簡単な図形と素材だけで、かわいい地図が出来上がりました。
![](https://aaover60.com/wp-content/uploads/2023/04/段落テキスト-22.png)
テンプレートの共有
デフォルメした地図をテンプレートとして共有いたします。
下のボタンから飛んでください。
まとめ
地図は一度作っておくと、使いまわしが出来るので大変便利です。
今回は、Googleマップから、正確な地図を作る方法と、デフォルメした地図の作り方を紹介いたしました。
どちらのやりかたも、Canvaを使えば、驚くほど簡単にできます。
どうぞつくってみてください!
ところで・・・。
「目下デザインを勉強中」or「始めたいな~」って思っているあなたへ
こんな気持ちになるときありませんか?
![](https://aaover60.com/wp-content/uploads/2023/08/%E3%80%8C%E3%81%8A%E5%AE%B6%E3%81%A7web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E5%AD%A6%E3%81%B3%E3%81%9F%E3%81%84%E3%80%8D-%E3%80%8C%E3%82%B3%E3%82%B9%E3%83%88%E3%82%92%E6%9C%80%E5%B0%8F%E9%99%90%E3%81%AB%E3%81%97%E3%81%A6%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%8B%89%E5%BC%B7%E3%82%92%E3%81%97%E3%81%9F%E3%81%84%E3%80%8D-%E3%80%8C%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E8%BA%AB%E3%81%AB%E7%9D%80%E3%81%91%E3%81%A6%E4%BB%95%E4%BA%8B%E3%81%AB%E3%81%97%E3%81%9F%E3%81%84%E3%80%8D-2-1024x670.png)
いまはそんな願いをかなえるためのスクールがいろいろあります。
例えば、
・子どもがいても勉強しやすいシステムがある
・技術だけではなく、学んだあとのキャリアを叶えるサポートをしてくれる
・同じような夢を目指す仲間ができる環境がある
・Webデザインだけでなく、動画編集などのカリキュラムも充実している
自分の希望の沿うようなスクールがきっと見つかるはずです。
無料で相談もできるところもあるので、実際に不安に思うことを確かめるのもひとつの方法です。
下におすすめのWebデザイナースクールのスポンサーリンクを貼っておきます!
ごらんください。
↓ ↓ ↓