- Photoshopの最新便利機能!生成AIが自動で削除?! 画像に写り込んだ電線やケーブル、人物を自動で検出し、ワンクリックで削除する方法
初心者でも簡単!Figma(フィグマ)で3Dモックアップを作ってみよう
初心者でも簡単!Figma(フィグマ)で3Dモックアップを作ってみよう
この記事は公開から2年以上経過しています。
こんにちは、WebデザイナーのAYAです!
前回、Figmaの特徴についての記事を書きましたが、今回も引き続きFigmaネタでいきます!!
\ この記事はこんな人におすすめです /
・簡単にモックアップを作ってみたい人
・モックアップの角度を自由に調整したい人
・Photoshopは起動が重たいので、他のデザインツールでしてみたい人
では、早速作っていきましょう!
- \\ 目 次 //
- ①Figmaのサインアップ
- ②プラグインのインストール
- ③モックアップの作成
- あとがき
①Figmaのサインアップ
Figmaを使ったことがない人は、『Get started』からGoogleアカウントで入るのがサクッとできるので個人的におすすめです。もちろん新しくメールアドレスとパスワードを入力してアカウントを作成することもできます。
②プラグインのインストール
そして、下記URLから、プラグインをインストールしましょう。
■Vectary 3D Elementsのインストールはこちら
https://www.figma.com/community/plugin/769588393361258724/Vectary-3D-Elements
URLからプラグインのページに飛ぶとこのページになるので、赤枠をクリックします。
③モックアップの作成
次に『Run』をクリックします。
右側にデバイスが表示させるので好みのデバイスを選択します。
今回はMacBookにします。
次に、Figmaに画像を配置したいので、ショートカットキー『Shift + command + K』で好きな画像を開きます。そして画像を選択した状態で、『Apply Frame』をクリックします。
すると数秒待つと自動で配置されます。
カーソルを画像のところに移動し、少し動かすと、それに合わせて画像も動きます。
360度自由に好きに動かせるので、初めてのときは格好良くて驚きました!
最後に『Finish』をクリックしたら完成です。
あとがき
いかがでしたか。
Photoshopでモックアップを作るとなると工程がかさむので、サクッと作ってみたい人におすすめでした!是非試してみてくださいね。
[Webの豆知識]関連記事
- 【YouTube新機能】3分間のショート動画でタブが変わらない件やリーチについて
- Google Analytics(GA4)で時間帯別のアクセス状況を確認する方法
- Illustratorのパスから3Dデザインを作る!イラレで簡単3Dモデリング
- Google Chromeリーディングモードの使い方とその便利な機能を紹介
- Google Chromeでタブを整理!タブのグループ化機能の使い方ガイド
Service
Contact
インフォコネクトに相談してみませんか?
経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。