Stroly BLOG

カスタマイズピンを作ってみよう!

PUBLISHED BY:

3 weeks ago

こんにちは!Kaoruです!

突然ですが、Strolyのパブリッシャーのみなさま、
ピンのデザインも自由にカスタマイズできるって知っていましたか?

Strolyにマップを投稿する時に「試しにランドマークを紹介するピンを立ててみたけど、わたしの地図の雰囲気にマッチしないからやっぱり外そう…」という経験をされた方もいるかもしれません。

「そもそも、ランドマークピンを立てるメリットは何かあるの?」
という声もあるかもしれませんが、ランドマークピンを立てることで、

– 紙面のデザインでは伝えきれなかった地点の詳細情報をピンとして追加することができます
– マップの中の特に注目してほしい場所に視線を誘導することができます
– マップ自体のデザインだけでは伝えきれない魅力を写真や動画を見せながら紹介ができるようになります

などなど、あなたの伝えたいメッセージをより多く伝えることができます。

その上で、「ランドマークピンをカスタマイズ」するとはどういうことか、イメージが湧きにくいと思うので、実際にカスタマイズされたピンを見てみましょう!

一つ目はこちら、「Kyoto Record Map 2019」

このマップは京都は全国でも4番目にレコードショップが多い街(引用:https://recoya.net/japan/kyoto)ということを勝手にPRするマップ。

ランドマークピンをマップのテーマに合わせてレコードを思わせるような形にしました。
マップの真ん中のあたりが京都の賑わっているエリアなのですが、いかにレコードショップが密集しているかが一目でパッとわかります。
(ちなみにこのマップ、まだ全てのレコードショップを載せきれていません。日々追加中です)

このピンのこだわりポイントは、「ON」と「OFF」で色が変わる点です。

続いてはこちら、「春のくらまえお散歩マップver.2」

このマップは東京の蔵前をお散歩した時のマップです。
お散歩した時に、特に印象深かった場所を強調するためにピンをカスタマイズしました。

このピンのこだわりポイントは2つ。
強調したい場所のピンにはそれぞれのイラストを入れたり、大きくして目を引くデザインにしました。
もう一つは、ピンをタップした時のデザインを大きく変えて、自分が今どのピンをタップしているかわかりやすくするために「ココ」という表示に変わるところです。

そして最後はこちら、「KYOTOGRAPHIE’2019 MAP なんとなく洛中」

このマップは毎年春に京都市全域で約1ヶ月に渡って開催されている写真展のフェスティバル、「KYOTOGRAPHIE」と同時期に開催されているサテライトイベントの「KG+」の会場マップの2019年版です。

わたしも趣味で写真を撮っているのですが、観ることも大好きなのでこのフェスティバルには毎年参加しています。が、なにせ会場数も多ければ市内全域での開催なので、行きたい展示の位置関係や複数の会場を回る時に現在地との位置関係がわかりにくい!

という自身の悩みを解決するために非公式で作成したマップです。

このピンのこだわりポイントも二つあります。
一つ目は、「KYOTOGRAPHIE」と「KG+」の会場の両方が見れるようにピンのデザインでは差別化を図りました。

二つ目は、特に「KG+」は会期がバラバラなため、「会期中」のピンと「会期終了」のピンの2種類作成したところです。

余談ですが、会期中は毎日手動でピンの変更をしていたので、「KG+」やギャラリーの場所に詳しくなれたので良かったなと思います。

今回ご紹介した3つの地図のカスタマイズピンでは、マップのデザインに沿わせたり、マップ中の強調したい部分に視線を誘導したり、イベントに即したデザインにしたりと3つのパターンでしたが、まだまだ色々な活かし方ができるのではないかと研究中です。

それでは具体的に、カスタマイズピンの作り方と、Stroly Editerへの追加方法をご説明します。

まずはじめに、Illustratorなどの画像作成ツールを開きます。
アートボードのサイズは100pixel × 100pixel

デザインをする時の注意点

– ピンの大きさ

あまり大きすぎるとピンをたくさん立てた時に押したいピンがタップできないということに繋がります。
アップロードするマップのサイズに合わせて適切なサイズを調整してください。

– ピンの視認性

マップのデザイン中で目立つようにするのか、馴染ませるようにするのかでマップの印象も変わってくるので、色は要検討ポイントです。
また、少し影をつけて地図の上に浮いているように見せるのも一つの方法です。

– 「ランドマークピン」だとわかるデザイン

ピンだとわかるデザインでないと、マップの一部のイラストだと思われてそもそもタップされないということが起こりかねません。
ピンには「先端」をつけることをオススメします。

– ON/OFFピンの作成

タップした時に色が変わったり、中のデザインを変えることによってユーザーがどのピンを開いているか一目でわかるようになります。
ちなみに、ピンの「ON/OFF」はランドマークピンを開いている状態の時が「ON」状態、閉じている状態が「OFF」となります。

そして、保存する際は「.PNG」で保存しましょう!

カスタマイズピンの用意ができたら次は
Stroly Editerに追加しましょう。

Step1

ランドマークピンが表示されているとこをクリック。

Step2

[ カテゴリーを追加 ]をクリック。

Step3

[ ファイルを設定 ]をクリック。この時、上がOFF時のピン、下がON時のピンなのでお間違えないように。

Step4

ピン画像のアップが完了したら、自分でわかりやすいように[ カテゴリー名 ]のところにピンの名前を設定しておきましょう。

これでカスタマイズピンの追加は完了!
もちろん追加した後は[ Save as draft ]を押して保存してくださいね。

追加したピンでランドマークピンを立てる時は、[ ピン作成 ]をクリックすると追加できるようになります。

そして[ no name ]から、先ほど設定した[ Record ]を選択。
これでカスタマイズピンでランドマークピンを立てることができます。

もしくは、[ ピン作成 ]ボタンの横にある、[ カテゴリー ]を選択し、[ Record ]に変更しておくと、続けてピンを立てることができます。

ぜひパブリッシャーのみなさまのマップでも試してみてください!

もしわからないことがあれば、FAQやZendesk(お問い合わせ)をご活用ください。
それでは、ステキな地図とステキなカスタマイズピンが見れる日を楽しみにしています!

Categories

Tags