ムードボード作成ツールとは？
Mood Board Creator は画像、カラースウォッチ、テキスト、シェイプを自由に配置してビジュアルボードに仕上げるキャンバスです。動かし、重ね、回し、最後に鮮明な PNG か軽量な JPEG として書き出して、クライアント宛のメールや Notion ページにそのまま貼れます。
キャンバスは5サイズ(1080x1080、1200x800、1920x1080、800x600、印刷向け A4)から選べ、背景色はクリームやセージ、夕暮れ、漆黒など10色を用意。ファッション、インテリア、ブランドパレット、フィルム調のテンプレートから始めることも、JPEG と PNG の画像を端末から直接ドロップしてゼロから組み立てることもできます。丸いカラースウォッチ、自由テキスト、長方形・円・三角形を追加でき、シェイプの塗り色・枠線色・枠線の太さはいつでも変更可能。各要素は個別に回転・拡大縮小・前後の入れ替えができます。仕上げはくっきり PNG か、画質スライダー付き JPEG として書き出してすぐ共有できます。
使い方
- キャンバスサイズ(SNS なら 1080×1080、印刷なら A4)と背景色を選び、ツールバーから画像・カラースウォッチ・テキスト・基本図形を追加します。
- 要素をドラッグして配置し、四隅のハンドルでサイズを、回転ハンドルで角度を調整します。右側のコントロールで前後のレイヤー順を入れ替えます。
- ボードのタイトルを入力し、鮮明さ重視なら PNG、ファイルを軽くしたいなら画質スライダー付き JPEG を選び、ダウンロード。ファイル名はタイトルから付くので、複数のドラフトを残したい場合は書き出し前にタイトルを変更しておきましょう。
使用するタイミング
- カラーパレット、タイポグラフィサンプル、ロゴ方向性を 1 ページにまとめてブランドアイデンティティを提案するとき。
- 発注前に布地・塗装・家具のリファレンスを集めて部屋のリノベ計画を作るとき。
- 撮影、動画編集、結婚式などのプロジェクトでチーム全員が同じトーンを共有するためのビジュアル参照を作るとき。
結果
インテリアデザイナーがリビングのコンセプトを組み立てるとき、ファブリックの写真を 3 枚アップロードし、Pantone カードから 4 色を採取してスウォッチにし、Vitra のラウンジチェアを中央に配置。「アクセントウォール - clay 1825」「ソファ生地 - リネン織り」「ペンダント - スモークガラス」とラベルを書き、PNG に書き出して打ち合わせ前にクライアントへ送ります。
よくある質問
- ボードにドロップできる画像形式は?
- JPEG、PNG、GIF、WebP はそのまま使えます。約 1200 万画素を超える元画像はキャンバスが重くならないよう自動で縮小されます。SVG は PNG 書き出しがラスター情報を必要とするため、本バージョンでは未対応です。
- 別ツールでコピーした HEX 値をスウォッチとして使えますか?
- 使えます。Add Color パネルのカラーピッカーを開き、HEX 値(#A3B18A でも A3B18A でも可)を貼り付けるだけ。円形スウォッチがそのままの色で生成され、他の要素と同じようにリサイズできます。
- ドロップしたばかりの写真をトリミングするには?
- キャンバスでは画像 1 枚が 1 オブジェクト扱いなので、ここでのトリミングは「隠したい部分を背景色の矩形で覆う」方法になります。本格的に切り抜きたい場合は、先に Image Cropper で処理した上でアップロードし直してください。
- A4 用紙に印刷したときの解像度は十分ですか?
- A4 プリセット(2480×3508 ピクセル、A4 で 300 DPI)を使えば十分です。他のプリセットは画面向けで、1080×1080 だと幅 9 cm くらいまで印刷したらドットが見え始めます。紙に出すときは必ず A4 プリセットを選んでください。
- アップロードした画像はどこかへ送信されますか?
- 送信されません。画像は FileReader API でページに読み込まれ Fabric.js キャンバスに置かれ、書き出しもローカルで動きます。ボードはあなた自身のデバイスに自動保存されるので次に開いたときも残っており、データが端末の外に出ることは一切ありません。消したいときは「クリア」を使ってください。