ブラウザ上でチラシ・フライヤー・告知画像・POP・SNS画像、デザインなどを作成できるデザインツールです。用紙サイズを選び、テンプレートや白紙からデザインを作成し、テキスト・画像・図形を配置して、完成したデザインをPNGまたはJPEG画像として保存できます。
画面上部の「サイズ」から、作成したいデザインのサイズを選びます。
A4縦、A4横、A3縦、A3横、A5縦、A5横、B5縦、B4縦、正方形、自由サイズに対応しています。印刷用のチラシを作る場合はA4縦やA4横、SNS用画像やアイキャッチ画像を作る場合は正方形や自由サイズが便利です。
自由サイズを選ぶと、幅と高さをピクセル単位で入力できます。任意のサイズを入力したら「適用」を押すと、キャンバスサイズが変更されます。
画面上部のテンプレートメニューから、作りたいデザインに近いテンプレートを選びます。
セール・特売、イベント告知、スタッフ募集、和風・お品書き、白紙から作成などを選択できます。テンプレートを使うと、あらかじめ文字や図形が配置された状態から編集できるため、初心者でも短時間でチラシを作成できます。
一から自由に作りたい場合は「白紙から」を選びます。
キャンバス上で何も選択していない状態では、右側にキャンバス設定が表示されます。
背景は「単色」または「グラデーション」から選べます。単色の場合は背景色を指定します。グラデーションの場合は、色1、色2、角度を設定して、背景に自然な色の変化を付けることができます。
色はカラーピッカーから選べるほか、用意されたカラーパレットからも選択できます。
左側の「テキスト」ボタンを押すと、キャンバス上にテキストが追加されます。
追加したテキストをクリックすると、右側にテキスト編集項目が表示されます。ここで文字内容、フォント、文字サイズ、太字、斜体、縦書き、文字色、グラデーション、縁取り、影などを調整できます。
チラシのタイトルやキャッチコピーは大きめの文字にし、補足説明や日時・場所などは読みやすいサイズに調整します。文字が背景と重なって読みにくい場合は、縁取りや影を付けると視認性が高くなります。
テキストを編集したい場合は、キャンバス上のテキストを選択します。右側の編集パネルにあるテキスト入力欄から、文字内容を変更できます。
テキストをダブルクリックすると、編集欄をすぐに操作できます。縦書きにしたい場合は、テキスト設定内の縦書き項目を有効にします。和風チラシやお品書き、落ち着いた雰囲気のデザインには縦書きが便利です。
左側の「画像」ボタンを押すと、パソコン内の画像ファイルを選択して追加できます。
画像はドラッグ＆ドロップでも追加できます。また、コピーした画像を貼り付けることでも挿入できます。商品写真、店舗写真、人物写真、背景画像などを配置することで、チラシの印象を大きく高めることができます。
画像を選択すると、右側の編集パネルでサイズ、位置、回転、不透明度、明るさ、コントラスト、彩度、ぼかし、モノクロ、セピア、角丸、左右反転などを調整できます。
画像を背景として使いたい場合は、画像を追加したあと、サイズをキャンバス全体に合わせます。
画像を全面に敷いたら、レイヤーを背面に移動すると背景として使いやすくなります。背景画像を誤って動かしたくない場合は、レイヤーをロックしておくと安全です。
背景画像の上に文字を配置する場合は、文字に縁取りや影を付けると読みやすくなります。
左側の図形一覧から、使いたい図形をクリックするとキャンバスに追加されます。
四角、角丸、円、三角、星、ハート、矢印、枠、バクハツ、リボン、吹き出し、ライン、六角形、ひし形、半円、十字などを使用できます。
図形は、見出しの背景、価格表示、注目ポイント、装飾、区切り線、吹き出しコメントなどに使えます。選択した図形は、右側の編集パネルで色、グラデーション、サイズ、角丸、縁取り、影などを調整できます。
左側のレイヤー一覧では、追加したテキスト・画像・図形を管理できます。
レイヤーは上にあるものほど前面に表示され、下にあるものほど背面に表示されます。ドラッグで順番を変更できます。
レイヤー一覧では、表示・非表示の切り替え、ロック、名前変更ができます。レイヤー名はダブルクリックで変更できます。背景画像や固定したい図形はロックしておくと、誤操作を防げます。
選択中のレイヤーは、左下の操作ボタンから重ね順を変更できます。
「最前面へ」「ひとつ前面へ」「ひとつ背面へ」「最背面へ」を使うことで、文字や画像、図形の表示順を調整できます。
たとえば、文字が図形の後ろに隠れている場合は、文字レイヤーを前面へ移動します。背景にしたい画像は最背面へ移動します。
同じデザイン要素をもう一つ作りたい場合は、対象のレイヤーを選択して「複製」を押します。
不要なレイヤーは、選択した状態で「削除」を押すと消すことができます。削除前に内容を残しておきたい場合は、先にプロジェクト保存をしておくと安心です。
キャンバス上のテキスト、画像、図形は、ドラッグして自由に移動できます。
細かく位置を調整したい場合は、キーボードの矢印キーを使います。通常の矢印キーでは少しずつ移動し、Shiftキーを押しながら矢印キーを押すと10px単位で大きく移動できます。
右側の編集パネルからX座標・Y座標を直接入力して、正確に配置することもできます。
選択中のオブジェクトの角に表示されるハンドルをドラッグすると、サイズを変更できます。
画像は通常、比率を保ったまま拡大縮小できます。Altキーを押しながら操作すると、自由変形ができます。図形はShiftキーを押しながら角ハンドルを動かすと、縦横比を保ったままサイズ変更できます。
辺に表示される丸いハンドルを動かすと、幅または高さだけを個別に変更できます。
選択中のオブジェクトの上に表示される回転ハンドルをドラッグすると、角度を変更できます。
Shiftキーを押しながら回転すると、15度刻みで角度を調整できます。まっすぐな配置や斜めのアクセントを作りたいときに便利です。
右側の配置・整列メニューでは、選択中のオブジェクトを左端、左右中央、右端、上端、上下中央、下端に揃えることができます。
チラシでは、文字や画像の位置が整っているだけで見やすさが大きく変わります。タイトルを中央に配置したい場合や、複数の要素をきれいに並べたい場合は、整列ボタンを活用します。
画面上部の「ガイド」ボタンを押すと、キャンバス上に配置の目安となるガイド線が表示されます。
中央線、三分割線、安全域を確認しながら作業できるため、文字や画像をバランスよく配置できます。印刷用チラシでは、重要な文字を端に寄せすぎないように安全域を意識すると、仕上がりが安定します。
ガイド線は作業用の表示なので、画像として書き出す際には含まれません。
画面上部のズームスライダーで、キャンバスの表示倍率を変更できます。
全体のバランスを見たいときは縮小し、細かい文字や位置を調整したいときは拡大します。「フィット」ボタンを押すと、キャンバス全体が画面に収まるように表示されます。
Ctrlキーを押しながらマウスホイールを動かすことでもズームできます。
操作を間違えた場合は、画面上部の戻るボタンまたはCtrl+Zで元に戻せます。
戻した操作を再度やり直したい場合は、やり直しボタンまたはCtrl+Yを使います。文字の変更、配置変更、サイズ変更、レイヤー操作などを行ったあとでも、直前の状態に戻せるため安心して編集できます。
作成途中のデザインを後から編集したい場合は、画面上部の「保存」ボタンを押します。
プロジェクトはJSON形式で保存されます。このファイルは完成画像ではなく、再編集用のデータです。後日、文字や画像、色、配置を変更したい場合に備えて、画像書き出しとは別にプロジェクトも保存しておくことをおすすめします。
以前保存したプロジェクトを編集したい場合は、画面上部の「開く」ボタンを押します。
保存しておいたJSONファイルを選択すると、前回のデザインを読み込んで再編集できます。同じチラシの内容だけを変更したい場合や、日付・価格・キャンペーン名を差し替えたい場合に便利です。
デザインが完成したら、画面上部の「画像で書き出し」を押します。
書き出し形式はPNGまたはJPEGから選べます。PNGは高品質で保存したい場合や背景を透過したい場合に向いています。JPEGはファイルサイズを軽くしたい場合に向いています。
解像度は、標準、高画質、印刷用から選べます。Web掲載やSNS投稿には標準または高画質、印刷に使う場合は印刷用を選ぶときれいに仕上がりやすくなります。
PNGを選んだ場合は、背景透過の設定も利用できます。設定が終わったら「書き出す」を押すと、完成画像が保存されます。
Ctrl+Z：元に戻すCtrl+Y：やり直しCtrl+C：レイヤーをコピーCtrl+V：レイヤーを貼り付けCtrl+X：レイヤーを切り取りCtrl+D：レイヤーを複製Ctrl+]：ひとつ前面へ移動Ctrl+[：ひとつ背面へ移動Ctrl+Shift+]：最前面へ移動Ctrl+Shift+[：最背面へ移動Esc：選択解除矢印キー：選択中のレイヤーを微移動Shift+矢印キー：10px単位で移動Ctrl+ホイール：ズーム操作
まず、用紙サイズを選びます。次にテンプレートを選ぶか、白紙から作成を始めます。必要に応じて背景色やグラデーションを設定し、テキスト、画像、図形を追加します。
追加した要素は、キャンバス上で移動・拡大縮小・回転できます。レイヤー一覧で重ね順を調整し、必要な要素はロックします。ガイドを表示しながら位置を整えると、見やすいデザインに仕上がります。
完成したら、再編集用にプロジェクトを保存し、最後にPNGまたはJPEGで画像を書き出します。
文字は、最初に大きく配置してから細かく調整すると作業しやすくなります。背景画像の上に文字を置く場合は、縁取りや影を付けると読みやすくなります。
図形は、情報を目立たせたい場所に使うと効果的です。価格、開催日、応募条件、キャンペーン名など、重要な情報の背景に図形を配置すると視線を集めやすくなります。
レイヤーが増えてきたら、名前を変更して整理すると編集しやすくなります。背景や固定パーツはロックし、編集したい文字や画像だけを動かすようにすると、作業ミスを防げます。
画像を書き出す前に、文字の誤字脱字、日付、価格、住所、電話番号、営業時間、イベント時間、応募条件などを確認します。
文字が小さすぎないか、背景と文字のコントラストが十分か、重要な情報が端に寄りすぎていないかも確認します。印刷用の場合は、解像度を印刷用に設定して書き出すと安心です。
