V-Deco 使い方ガイド

好きなロゴタイプを選んで文字を入力して配置するだけ!
いつものサムネにリッチなロゴを追加できます✨

V-Decoでつくってみる

まずは3ステップ

  1. デザインを選ぶ

    実際のロゴタイプ選択画面。ふんわりピンクとぷっくりパープルのデザイン

    「ロゴタイプ選択」から、好きなデザインを選びます。

  2. 文字と色を変える

    実際の文字編集画面。ロゴテキスト、テーマカラー、フォントを変更できます

    「文字編集」で文字を入力し、テーマカラーを変更します。

  3. PNGでダウンロード

    実際のPNG保存ダイアログ。ファイル名を入力して保存ボタンを押します

    「ダウンロード」を押して、ファイル名を入力して保存します。

編集内容は 作ったサムネ に自動保存されます(変更の 2 秒後)。ブラウザの設定でこのサイトの保存データを削除すると、編集内容も削除されますのでご注意ください。

画面の見方

実際のV-Deco編集画面。左がロゴタイプ選択、上が文字編集、中央がプレビュー、右が全体設定。
1
ロゴタイプ選択

ロゴのデザインを選びます。カテゴリ で絞り込めます。

2
文字編集

選んでいるロゴの文字・色・装飾を調整します。画像を選んでいるときは 画像編集 に変わります。

3
プレビュー

仕上がりを確認しながら、ドラッグで移動・拡大縮小・回転します。右下に ↶ 取り消す ↷ やり直す ダウンロード があります。

4
全体設定

キャンバス設定(サイズ比率・背景)と レイヤー(ロゴ・画像の追加、並び替え)です。

V-Decoロゴの下に 作ったサムネ 使い方 エラー報告 要望 の 4 つのボタンが並んでいます。

各パネルの見出しにある を押すと、そのパネルを畳んでプレビューを広くできます。

プレビュー画面の使い方

中央のプレビューでは、置いたものを直接つかんで動かせます。

選ぶ・動かす・回す

  • 選ぶ:ロゴや画像をクリックすると、赤い枠で囲まれて選択されます。上の 文字編集/画像編集 は、選んでいるものの設定に切り替わります。
  • 動かす:選んだものをそのままドラッグします。
  • 大きさを変える:枠の四隅のハンドルをドラッグします。
  • 回す:枠の上に伸びている丸いハンドルをドラッグします。
  • 1 文字やまとめ選択をやめる:Esc を押すか、何もない所をクリックします。ロゴ全体の編集に戻ります。

拡大・縮小して見る

  • ズーム:プレビューの上でマウスホイールを回します。マウスの位置を中心に拡大・縮小します。左下の − + でも変えられ、全体表示 で元に戻ります。
  • 表示位置を動かす:プレビューの何もない所をドラッグします。

1文字ずつ調整する

選択中のロゴをもう一度クリックすると、その 1 文字だけを選べます。そのままドラッグで移動、四隅のハンドルで拡大縮小、上のハンドルで回転ができ、上の見出しが 1文字目を編集中 に変わります。1 文字だけ大きくする、傾ける、といった調整ができます。

全体の編集に戻すには、ロゴの外側をクリックするか、レイヤー でそのロゴを選び直します。

まとめて選ぶ

Ctrl(Mac は ⌘)を押しながらクリックすると、選択に足す・外すができます。ロゴの中の文字どうしと レイヤー 一覧の行どうしは、Shift + クリックでそこまでをまとめて選べます(プレビュー上のレイヤーは Shift でも足す・外すになります)。

まとめて選んでいるあいだは、上のパネルでの調整とドラッグでの移動が、選んだ全部に効きます。ロゴ・サブテキスト・画像が混ざっていても、大きさ・角度・ぼかしなど共通の項目は一緒に変わります(大きさはそれぞれの比率で)。レイヤーを複数選んでいるときは 削除(Delete)でまとめて消せます。

取り消す・やり直す

プレビュー右下の ↶ 取り消す ↷ やり直す で、直前の操作を戻したり進めたりできます。キーボードの Ctrl+Z/Ctrl+Y でも同じです。選択中のものは Delete または Backspace で消せます。

文字・フォントを変える

ロゴを選んでいるとき、プレビューの上は 文字編集 になります。左から テキスト/サイズ・配置/ぼかし・フチ・影/トッピング の順に並んでいます。

文字編集パネル全体。テキスト、サイズ・配置、ぼかし、フチ・影、トッピングのカード
テキストカード。ロゴテキスト、テーマカラー、フォントの入力欄
  • ロゴテキスト:表示したい文字を入れます。改行もできます。
  • フォント:30 種類を、雰囲気ごとに 丸ポップ/角ポップ/手書き/スタイリッシュ の 4 つにまとめてあります。
  • フォントを固定:チェックを入れると、ロゴタイプを変えてもフォントが変わらなくなります。

色・フチ・影を変える

テーマカラー の色見本をクリックして色を選ぶか、右の欄に #FF8FC7 のようなカラーコードを直接入力します。

この 1 色から、文字・グラデーション・フチ・影の色が決まります。

元の色に戻すときは、テーマカラー の横の ↺ リセット を押します。

フチと影を調整する

文字編集 の フチ・影 で、内フチ・外フチの太さと影の深さを調整できます。フチや影の色はテーマカラーに合わせて決まります。

ぼかし、フチ・影、トッピングの調整パネル

装飾する

ぼかし、フチ・影、トッピングの3つのカード
  • ぼかし:強さ を上げるとロゴ全体がぼやけます。奥に置いたロゴをぼかすときに使います。
  • フチ・影:内フチの太さ/外フチの太さ/影の深さ。内側の太い白フチ、外側の濃いフチ、立体的な影の順に重なります。
  • トッピング:キラキラ・星・お花・ハートの 4 種類です。チェックを入れて 量 と サイズ で調整します。

画像を追加する

立ち絵や写真、背景を重ねられます。追加のしかたは 3 つあります。

  • 全体設定 › レイヤー の + 画像(背景にするなら + 背景)を押して、ファイルを選びます。
  • 画像ファイルを、+ 画像/+ 背景 のボタンに直接ドラッグ&ドロップします。
  • 画像ファイルを、プレビューにドラッグ&ドロップします。画像レイヤーとして追加されます。

画像を選ぶと、上のパネルが 画像編集 に変わります。

画像編集パネル。画像、フチ、ぼかし、影、トッピングのカード
  • 画像:サイズ/角度/不透明度 を調整します。差し替え で別の画像に置き換えられます。
  • フチ:ふち1〜ふち3 の 3 重まで付けられます。立ち絵を背景から浮かせるときに使います。
  • 影:使用する にチェックを入れてから、色・ぼかし・位置を調整します。
  • トッピングの色:画像に付ける飾りの色です。ここで決めた 1 色から残りの配色が決まります。

背景

+ 背景 で入れた画像は、いちばん奥の「背景」レイヤーになります。

  • 背景を透過:全体設定 › キャンバス設定 にあります。チェックを付けたまま書き出すと、背景が透明な PNG になります。いつものサムネにロゴだけを重ねたいときはこのままにします。
  • 背景色:色を敷くときは 背景を透過 のチェックを外して選びます。

背景画像を表示したまま書き出すと、その画像も PNG に含まれます。ロゴや立ち絵だけを書き出したいときは、レイヤー 一覧で背景画像の目のマークを押して非表示にします。

レイヤー

ロゴ・サブテキスト・画像・背景は、すべてレイヤーとして重なっています。右の 全体設定 › レイヤー で管理します。

全体設定パネル。キャンバス設定とレイヤー一覧
  • + ロゴ:ロゴをもう 1 つ足します。メインの下にサブタイトルを置くときに使います。
  • + サブテキスト:装飾の少ない普通の文字を足します。
  • + 背景 / + 画像:画像を足します(画像を追加する)。
  • 前面へ / 背面へ:重なり順を入れ替えます。一覧をドラッグしても並び替えられます。
  • 複製 / 削除:選択中のレイヤーを複製・削除します。キーボードの Delete/Backspace でも消せます。
  • 目のマークを押すと、そのレイヤーを一時的に隠せます。隠したレイヤーは書き出す PNG にも入りません。

サイズ比率

同じ 全体設定 の キャンバス設定 にある サイズ比率 で、書き出す画像の縦横比(16:9 など)を選びます。すべてのレイヤーは、この比率のキャンバスの上に重なります。

PNGでダウンロード

プレビュー右下の ダウンロード を押すとファイル名を聞かれます。入れて 保存 で PNG が保存されます。

ファイル名を入力するダイアログ

背景を透明にして書き出すには、全体設定 › キャンバス設定 の 背景を透過 にチェックを入れておきます(画像を追加する › 背景)。

編集データを保存する

V-Decoロゴの下の 作ったサムネ に、これまでの作品が並びます。変更すると、その 2 秒後に自動で保存されます。保存ボタンはありません。変更した直後にタブを閉じると、最後の変更が保存されないことがあります。

作ったサムネの一覧。作品のサムネイルと開く・複製・名前変更・書き出し・削除のボタン
  • 開く:その作品の続きから編集します。
  • 複製:色や文字だけ変えた別バージョンをつくれます。
  • 新規作成:まっさらな状態で作り始めます。今の作品は保存されたまま残ります。
  • 書き出し / ファイルを読み込む:作品を .vdeco.json ファイルにして持ち出し、別の PC で読み戻せます。
作品はお使いのブラウザの中に保存されます。ブラウザの設定でこのサイトの保存データを削除すると、編集内容も削除されますのでご注意ください。

お問い合わせ

うまく動かないとき:V-Decoロゴの下の エラー報告 を押すと、お問い合わせ用の文面(サポートIDや、お使いの環境などの状況)が表示されます。「◆」の欄にご記入のうえ、全文をコピーして X のDM でお送りください。エラーのときのスクリーンショットも添えていただけると助かります。

こんな機能がほしい:要望 を押すと、フォームが開きます。

ボタン早見表

ボタンはたらき
V-Decoロゴの下
作ったサムネ保存済みの作品を開く・複製・書き出す
使い方このページを別のタブで開く
エラー報告お問い合わせ用の文面を作って表示する
要望ご要望のフォームを開く
プレビュー
↶ 取り消す / ↷ やり直す直前の操作を取り消す・やり直す(Ctrl+Z / Ctrl+Y)
ダウンロードPNG として保存する
− / + / 全体表示プレビューを拡大・縮小する / 全体を映す
文字編集
↺ リセットテーマカラーをロゴタイプの初期値に戻す
フォントを固定ロゴタイプを変えてもフォントを変えない
全体設定 › レイヤー
+ ロゴ飾り付きのロゴをもう1つ追加する
+ サブテキスト装飾の少ない普通の文字を追加する
+ 背景背景画像を設定する(ボタンへのドロップも可)
+ 画像立ち絵・写真などを追加する(ボタンへのドロップも可)
複製 / 削除選択中のレイヤーを複製・削除する
前面へ / 背面へ重なり順を入れ替える