ページレイアウトツールを作ってみました



スタッフのワタベです。

突然ですが、
みなさんは複数の画像を1ページにレイアウトする時、どうしていますか?

画像編集ソフトやアプリを使って・・・というのが多いのでしょうか。
私もその1人ではあるのですが、もっと手軽にレイアウトを楽しめないかと思っていました。
そこで簡易的ではありますが、ブラウザで出来るページレイアウトツールを作ってみました。
ちなみにレイアウトの参考元は、こちらです。

使い方は3ステップ

  1. 下記の色分けされたエリアそれぞれに、配置したいJPEG画像をドラッグ&ドロップしてください。
  2. レイアウトし終わったら、[画像を作成]ボタンをクリックしてください。
  3. ボタンの下に表示された画像をマウスの右クリックから保存してください。

それではどうぞ


  • ここに画像をドロップ
  • ここに画像をドロップ
  • ここに画像をドロップ
  • ここに画像をドロップ

できあがり


写真は分割されたエリアに合わせて縮小・拡大され、余白ができないように配置、かつ、そのエリアの中央に配置されます。

参考元のブログ記事にあるような、分割されたエリアの複数箇所にまたがるレイアウトをするには画像編集ソフト等を使う必要が出てきてしまいますが、1つのエリアを「縦1061px × 横765px」(推奨画像サイズの4分割)として、各エリアに表示する画像を用意出来れば可能です。

こちらが作成した画像を印刷したフォトブック。
よかったら使ってみてください。みなさまのTOLOTライフのお役に立てれば幸いです。

補足

  • ※利用した画像がサーバなどに送信されたりすることはありません。
  • ※ブラウザの機能を利用しているため、一部のブラウザで動作をいたしません。
  • ※JavaScriptを利用して動作しています。ご利用頂く場合はブラウザのJavaScriptの動作をONにしていただく必要があります。
  • ※個人で作ったものなので、TOLOTサポートへのお問い合わせはご遠慮ください。
Update:2013/03/12

TOLOTをご存知ですか?

スマホやパソコンでオリジナルのフォトブックを作れるアプリです。