シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
注目記事ピックアップ
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
share0
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
share0
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2017/10/30 18:30

1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!

pictogon-01 どうも、まさとらん(@0310lan)です!

今回は、ごく普通の画像にさまざまな情報を埋め込んで、好きな範囲内にマッピングできるWebサービスのご紹介です!

画像内に「テキスト」「リンク」「HTML」…など、多彩な情報を埋め込めるので新しい画像の活用法として以前から注目されています。

【 pictogon 】
pictogon-02

「Pictogon」とは?

まず最初に、「Pictogon」を使ったらどんな画像を生成できるのかをご紹介しておきます!

公式サイトにいくつかサンプル例が公開されているので、コレを使って簡単に解説したいと思います。


例えば、地図や航空写真などの画像に「物件情報」を埋め込んでマッピングすると、以下のようになります。

マウスを住宅の近くに近づけると、物件の情報が表示されるのが分かります。

元々はごく普通の1枚の画像ですが、情報をマッピングするだけでインタラクティブなWebコンテンツに早変わりするというわけです。


さらに応用次第では、ネットショップみたいな画像も作れます!

画像に写っている洋服やカバン・靴などに、商品情報やリンクを埋め込んでマッピングするわけです。

商品をクリックすると、自分で用意した決済ページに遷移するような動作も作れます。


また、プレゼンなどの資料に情報を埋め込んでも良いでしょう。

1枚の画像だけでは伝えにくい情報をマッピングすることで、さらに詳しい内容を知ることができるようになります。

このように「PIctogon」を使って画像に情報を埋め込めば、アイデア次第でいろいろな活用法を見つけられるでしょう!


「Pictogon」の基本的な使い方!

それでは、実際に「Pictogon」を使いながらどのようなサービスなのかを見ていきましょう!


まずは、サイトにアクセスして画面右上にある「Sign up」からユーザー登録を済ませておきましょう!
pictogon-03 「メルアド&パスワード」だけで簡単に登録できるので便利です。


次に、マッピングしたいと思う画像のURLを入力ボックスに貼り付けます!
pictogon-04 自分のブログやサイトなど、ネット上の画像URLを貼り付けてみましょう。


すぐに、画像を編集するためのエディタがブラウザ上に表示されます。
pictogon-05 この画面上で、さまざまな情報を埋め込んだりマッピングすることが出来るようになっています。


画面左側にあるアイコンをクリックしましょう。
pictogon-06 あとは、画像内の好きな箇所にマウスでクリックしながら、マッピングする範囲を決めます。


試しにiPhoneの範囲を選択してみましょう!
pictogon-07 ポチポチとクリックするごとに、小さな「円」が描画されていきますので、どんどん形状に合わせて範囲を作成していきます。


これで、iPhoneの範囲がだいたい選択されましたね!
pictogon-08

次に、画面左側を見ると設定パネルが表示されているのが分かります。
pictogon-09
そこで…

①:範囲選択部分のカラーリングを決める
②:選択部分のタイトルを入力
③:リンクを挿入(無くてもOK)


上記3つのポイントを設定してみましょう!

たったこれだけの作業で、画像内に情報を埋め込んでマッピングすることが出来るのです!


画像を公開してみよう!

さて、マッピングが出来たので実際にどのように表示されるのかを見てみましょう!

画面右下にある「Save」ボタンをクリックして作業内容を保存します。
pictogon-10

すると、埋め込み用のタグが表示されて、同時にSVGへの変換ボタンと「シェア」用のボタンが表示されます。
pictogon-11 プレビューを見たいので、「Share」ボタンをクリックしましょう。


先ほどマッピングした画像が別タブで開きます!
pictogon-12 早速、iPhone部分にマウスを近づけてみましょう。


見事に「タイトル」が表示されましたね!
pictogon-13 あとは、このプレビューURLをメールやSNSで友人・知人に教えてあげれば、誰でも閲覧することが出来るわけです。

もちろん、「埋め込みタグ」を使って自分のブログやサイトに挿入することも可能です!


他にもある、こんな便利機能!

「Pictogon」には、他にもまだまだ便利な機能が搭載されているので、いくつかピックアップしてご紹介します!


例えば、先ほど「タイトル」や「カラーリング」を設定したパネルには、他にも「Hover」「Click」というタブがあります。
pictogon-14 この設定を行うことで、クリックした際に別のWebサイトへ画面遷移するような動作を実現することが出来るので便利です。


また、下段にある「最大化」アイコンをクリックしてみてください。
pictogon-15

すると、まるでブログを書くような「テキストエディタ」が表示されます!
pictogon-16 ここへ自由にテキストや画像・リンクなどを作成することができます!


もちろん、クリック一発で「HTMLモード」に変えることもできます。
pictogon-17 HTMLタグで入力したい場合はこちらが最適でしょう。


そして、記述した内容を表示することもできるわけです!
pictogon-18 このように、テキストエディタを活用することで、複雑な内容を画像に埋め込めるので応用範囲がとても広くなるでしょう。


さらに、範囲を指定するだけでなく、多彩なシンボルマークを画像に加えることも可能です!
pictogon-19 こちらも同じように「テキストエディタ」で情報を埋め込んで表示することができます。

このように、1枚の画像では表現が難しい場合でも、「Pictogon」を活用することで新しい表現手段を利用することができるのは非常に便利ですね。


おまけ

最後に、今回ご紹介した「Pictogon」とよく似たWebサービスを合わせてご紹介しておきます!

【 たった1枚の画像に、SNS、動画、音楽など埋め込み可能な「ThingLink」が人気急上昇! 】
pictogon-20 こちらのサービスも画像にさまざまな情報を埋め込めるのですが、特筆すべきはTwitter / Facebook / Wikipedia / Soundcloud…など、さまざまなサービスと連携できるのが特徴です。

「Pictogon」よりもさらに高度な使い方をしたい方には最適なので、ご興味ある方はぜひチェックしてみてください!


まとめ

今回は、「Pictogon」の基本的な使い方について駆け足でご紹介しました。

今回のように既存の画像に対して、何か新しい付加価値を加えるサービスというのは意外に少ないです。

なかでも、「Pictogon」はシンプルなUIと自由にマッピングできる特徴を持っている珍しいサービスなので、ぜひみなさんもオリジナルの画像作りに挑戦してみてください!


<参考>
「Pictogon」公式サイト


written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る