🌈

セルフリフォーム - 作り方

〜目次〜
 

Figmaでの編集前の事前準備

  1. 以下のページで編集対象のスペースを選択する。
 
  1. URLの「Click」リンクをクリックする。
 
  1. 画面右上の「Open in Figma」をクリックする。
 
  1. Figmaのアカウントにログインする。
    1. googleアカウントをお持ちの方は、googleのアカウント情報でもログイン可能。
[Sign up]の場合
[Log in]の場合
 
  1. 左の「Pages」のタブより、(Guidの下の)ワークスペースを選択する。
    1. ※ 選択肢がいくつかある場合は、ご希望のサイズの画像をお選びください。
      A:Basicサイズの画像
      B:Standardの画像
      C:Organizationの画像
 
 
  1. 編集したい画像を選び、編集を開始します。
A:既存のレイアウト(編集不可)
※1倍サイズの黒い縁のアバターを動かし、オブジェクトの距離感を確認することができます。
B:既存のレイアウト、一部のパーツを動かしたり配置を変えたい方向け
C:背景のみ、一からレイアウトを作成したい方向け
D:使用可能なパーツ
 

[00:52] ①パーツを動かす方法

  1. オブジェクト一覧から使用したいものを選択する。
 
 
  1. 配置したい場所で右クリックし、「paste here」をクリックする。
 
  1. オブジェクトをドラッグすると移動することが可能です。
 

[01:52] ②パーツを反転する方法

  1. 反転させたい画像を右クリックする
  1. 「Flip horizonal」もしくは「Flip vertical」を選択する。
    1.   *Flip horizonal:左右反転
        *Flip vertical:上下反転
 

[02:23] ③パーツの大きさを変更する方法

  1. オブジェクを選択する。
  1. 4隅の◯のどちらかを選択し、ドラッグするとオブジェクトのサイズを変更することが可能です。
 

[02:47] ④パーツを配置する方法(配置変更)

  1. 画像を重ねて配置したい場合、上に配置したい画像を右クリックする。
  1. 「Bring to front」を選択する。
 

[03:11] ⑤テキストを追加する方法

  1. 左上のツールバーから「T(テキスト)」を選択する。
  1. スペース上の好きな場所をクリックし、文字を入力する。
 
  1. 文字を選択すると右のタブに「Text」編集ツールが出現
    1. 文字のフォント、サイズ、配置などを編集することが可能です。
 

[04:09] ⑥テキストの向きを変更する方法

  1. レイアウト下にある「Textサンプル」をコピーして使用します。
  1. スペース上の好きな場所で右クリックし、「paste」を選択
  1. 「text」の文字を削除して、好きな文字を入力する

[05:13] ⑦好きな形に切り抜く(クリッピングマスク)

  1. 編集したい画像を選択し、左上のツールバーからペンを選択する。
 
  1. クリックで点を描きながら、切り抜きたい部分でオブジェクトを囲む。
  1. 囲み作業が完了したら、右のツールバーの「Fill」をクリックする。
  そうすると、選択した部分がグレーに反転します。
  1. 左上のツールバーの「Done」をクリックする。
 
  1. 切り抜きたい画像を右クリックし、「Bring to front」を選択する。
 
  1. 「Shiftキー」を押しながら、背景のグレーの画像と切り取りをしたい画像の両方を選択する。
 
  1. 上のツールバーの丸いマークをクリックすると、画像が切り取られます。
 

※切り取りを解除する方法※

  1. 元に戻したい画像をクリックする。
  1. ツールバーにある「Group」の左にある三角をクリックする。
  1. 下に出てきた「Victor」をクリックする。
  1. 上の黒いツールバーにある四角いマークをクリックすると、元の画像に戻すことができます。
 

会議室の作成方法

  1. ギャラリーのAsset - Accessoryページより会議室のサンプルページのコピーを作成する。
 
  1. 「pages」タブより「private meeting room」を選択する。
 
  1. 使いたい会議室を選択し、右クリック→「copy」でコピーする。
 
  1. 貼り付けしたいスペースの画像に戻り、スペース画像をクリックして全体を選択。
  右側のタブに出現する「Layout grid」横の「+」をクリックする。
 
  1. 文字左の点々マークをクリックし、出てくるポップアップの「size」の数字を「80」に変更する。
 
  1. コピーしていた会議室の画像を、右クリック→「paste here」で貼り付け、赤いグリッド線に合わせて配置する。
  ※グリッド線からずれてしまうと、スペース設定の際に会議室と背景にずれが生じてしまうので注意。
  ※目のマークを押すとグリッド線を非表示にすることもできます。
※グリッド線を表示したまま保存しても、保存した画像にはグリッド線は表示されません。
 

[06:53] ⑧完成したレイアウトを書き出す方法

  1. レイアウトの編集が完了したら、背景を含めてレイアウト全体をドラッグして選択します。
  1. 右クリックをして、「Group selection」をクリックすると、選択したオブジェクトがグループ化され、全てが1枚の画像になります。
 
  1. グループ化した画像を選択し、「+」から「JPG」を選択する。
 
  1. 「Export Group」をクリックすると画像が保存されます。
 

※グループ化を解除する方法※

グループ化した後に、再度画像を編集する際にお使いいただけます。
  1. グループ化を解除したい画像を選択し、右クリックします。
  1. 「Ungroup」を押すと、グループ化を解除することができます。
 

画像の圧縮

JPGで書き出しをした後、画像の容量が3MB以上になるものは圧縮する必要があります。
 
  1. Figmaの「Guide」ページにある説明欄に、圧縮サイトを記載しております。
 
  1. 2に記載のあるリンクをクリックすると圧縮サイトが開きますので、赤枠の「Select images」から該当のレイアウトを選します。
 
  1. 画像がアップロードされたら、右下にある「Compress IMAGES」をクリックし、画像を圧縮します。
 
  1. 画像の圧縮が完了したら、以下のボタンからダウンロードします。
 
  1. ダウンロードした画像をoViceの設定画面よりアップロードすると、オリジナルの背景としてお使いいただけます。
 

Figma上で画像を3D背景に合わせる方法

💡
Figmaの「Ease Isometric」というプラグインを利用して対応可能です。
【Figma上での操作説明】
  1. Figma画面左上の赤枠のボタンをクリックする
  1. 「Plugins」ボタンをクリックする
  1. 検索窓に「Ease Isometric」と入力して、「Ease Isometric」にマウスを移して右側の「Run」ボタンをクリックする
  1. 「Run」ボタンをクリックすると下記の画面となります。 これでプラグインの導入は完了しました。
  1. あとは、画像を選択して右クリック→Pulugin (赤枠)を選択→Ease Isometric (オレンジ枠)を選択する
  1. 以下の赤枠で囲んだ部分で出ている選択肢を選択すると画像が3D背景に合わせる形で調整可能です。

レイアウトアップロード時の縦横比について

アップロードの際、作成したレイアウト画像の縦横比を入れていただく必要がございます。
縦横比とは?
作成いただいたレイアウトのピクセル数を80で割った数値でございます。
【例】
■Basicプラン
ピクセル数:1200 × 640px / 縦横比:15 × 8
■Standardプラン
ピクセル数:2400 × 1280x / 縦横比:30 × 16
 
■Organizationプラン
ピクセル数:4800 × 2560px / 縦横比:60 × 32
 
ピクセル数の確認方法
①figmaから確認する
  1. 作成したレイアウトをクリックして選択いただき、レイアウトの下部に表示された数値11
  1. figma内右側のプロパティから確認する Inspect>Properties項目のWidth(横)、Height(縦)
②ダウンロードしたレイアウトから確認する
 

オリジナルレイアウトのアップロード方法

該当スペースの管理画面>スペース>レイアウトのアップロードする の手順でアップロードが可能でございます。
詳細は下記をヘルプセンターをご参照くださいませ。 ⭐️オリジナルレイアウトのアップロード

🌟Figmaを日本語で使用したい場合は、拡張機能でご利用いただけます。