SEO対策

本日人気の記事

複数画像を1枚の画像に合成できる無料WEBサービス「PhotoJoiner」

複数画像を1枚の画像に合成できる無料WEBサービス「PhotoJoiner」

あなたは画像を縦や横に並べたいと思った事はないだろうか。
複数の画像を表示させるにはimgタグも複数使って一枚ずつ表示させる事になる。
画像と画像の間隔も調整する事になるので、HTMLが苦手な方だと以外と手間取ってしまう事だろう。
そういう場面では、複数画像を1枚の画像に合成してくれるPhotoJoinerを利用したい。

例えば利用可能なクレジットカードのアイコンなどを一枚ずつ表示させたいとする。

Photoshopが使えれば合成画像はすぐに作成できるが、Photoshopを持っていなかったり、
操作が苦手という場合はとても便利なので本記事で紹介するPhotoJoinerは覚えておこう。

本記事の索引 -INDEX-

1. 複数画像を1枚にまとめる事で得られるメリット

あなたは画像を縦や横に並べたい時に、imgタグを複数連続で打ち込むだろう。
その時に画像と画像の間隔をスペースやbrタグで調整するのはあまり望ましくない。
HTMLは推奨される方法で入力するようにしよう。
とはいえHTMLが苦手な方が、毎回HTMLやCSSを打ち込むのは難しいはずだ。
今回はそんな方のために複数画像を一枚にまとめられるフリーのWEBツールをご紹介します。
画像と画像の間隔も調整できるのでうまく活用してください。

例えば、ECサイトの制作で重要な利用可能クレジットカードのロゴ画像を複数表示させたいとする。

複数画像を表示させるときはHTMLもごちゃごちゃしてしまう

利用可能なクレジット決済のロゴが4つだったと仮定してみても、
画像を表示するHTMLがごちゃごちゃしてしまうのがおわかりいただけるだろう。
HTMLが得意であればこのレベルは全く苦にならないが、HTMLが苦手な方からしたら気が重くなることだろう。

そこで、PhotoJoinerを使って4つの画像を合成すると、画像も一枚になりHTMLを非常にシンプルにする事ができる。

PhotoJoinerで画像を合成した結果、HTMLもシンプルにすっきりした!

HTMLコードがとてもスッキリし、管理する画像も1枚で良くなった。
これなら画像保存サーバーの節約にもなる。(楽天でいうR-cabinetにあたります)

2. PhotoJoinerの使い方

PhotoJoinerはWEB上で非常に簡単に画像が合成できる無料サービスだ。

以下に使用方法をまとめました。

まずはPhotoJoinerへアクセス

まずはPhotoJoinerへアクセスしよう。

上部メニューのUSE PREVIOUS VERSION をクリック

次に、上部メニューの 「USE PREVIOUS VERSION」をクリック。

PhotoJoiner、SelectPhotosボタンをクリック。

「Select Photos」をクリック。

PhotoJoiner、ファイルのアップロード画面で画像を選択しよう

画像を選択するウィンドウが開くので、アップロードするファイルを複数選択して「開く」をクリック。
ここではクレジットカードアイコンを4種選択しています。
※Macでの操作を想定していますがWindowsでもほぼ同じ操作になります。

PhotoJoiner、画像合成プレビュー画面。ここで様々な調整が可能。

画面右側に設定項目がありますので、

  • 「Style」は横並びを選択。
  • 「Resize」は「Resize to the smallest image」を選択。
  • 「Margin」にチェックを入れ、「15」と入力。
    ※ここに入れた数字分、画像と画像の間隔(隙間)が調整される。
  • 「Fill Color」は今回は背景白の画像を作りますので特に変更せず。

上記設定が完了したら「Join Photos」をクリック。
すると次の画面で画像の合成結果が確認できる。

PhotoJoiner画像合成結果画面、右クリックから画像を保存しよう。

画面が切り替わり、画像の合成イメージが表示される。
画像の上で右クリックして保存しよう。
もしも想像と違っていたら画面を戻ってやり直そう。

PhotoJoinerで画像を合成してPCに保存した

これで4つの画像が合成され、一枚の画像となって保存された。
※今回ファイル名はindex.jpgとなったが、保存するファイル名は適時自由に変更してから保存しましょう。

3. まとめ

PhotoJoinerがあればPhotoshopなどの画像加工ツールを使用せずに、
お手軽に画像の合成加工が可能だ。
今回はクレジットカードのアイコンを使用してみたが、
状況によってはカラーバリエーションのある商品画像で合成するなど、
面白い使い方もできそうだ。
是非使いこなして作業効率をあげるのに役立てて欲しい。

この記事を書いた人

Profile image
代表取締役の徳増です。
WEB制作、運営、人事など業務全般に携わっています。
中学時代から自分は社長になると思い込んでいました。現在、社長です。
元々美術関係やゲームが好きで、「ゲーム作ろっと!」と思い立ち、
高校卒業後に親の反対を振り切って単身東京のプログラミング専門学校へ。
卒業し、第一志望のSEGAは一次試験であっさり落ちてしまい、
内定していた第二志望の某ゲーム会社の通知をムシャっとしてクシャる。
情報処理の会社に入社し4年間倉庫管理システム構築業務に従事。
2007年、帰郷し独立。2013年8月法人化。

僕は最近こんな記事を書きました。是非見てください( ´,_ゝ`)♪

ブログのランキングサイトに参加中!クリックで応援お願いします!

毎日クリックして応援してください(>人<;)
ブログランキング・にほんブログ村へ
にほんブログ村

人気ブログランキングへ

コメントをお寄せください

*
*
* (公開されません)