Google chrome（グーグル ク...
続きを読む
Figma（フィグマ）は、UIデザイナーやWEBデザイナー向けのツールと思われがちですが、実は簡単に、直感的に、しかも無料で使えてブログの画像作成やアイキャッチ画像の作成にも使える便利なツールです。
weblemonも、多くの画像をFigmaを使って作成しています！
今回は、Figmaの始め方と、ブログの画像作成に応用する方法を紹介します。
↑まず初めに、Googleで「Figma」と検索します。「F」をモチーフにしたロゴが目印です。
一番上に表示されている「Figma：The Collaborative…」というサイトをクリックします。
こちらからもFigmaのサイトにアクセスできます！
↑このような画面が表示されるので、右上の「Get started for free」か、右中央の「Get started」をクリックします。どちらを押しても無料で始められます。
↑Googleアカウントでログイン、もしくは登録したいメールアドレスとパスワードを入れて、「Create account」をクリックします。
↑Googleアカウントで登録しない場合は、登録したメールアドレスに確認メールが届くので、メールを確認します。
↑Figmaから届いているメールに「Varify email」というボタンがあるので、それをクリックして登録を完了させます。
↑Figmaの画面に戻って、初めの設定を完了させます。まず初めの画面で「Nobody (just me)」を選択します。
↑画面に従って、設定を進めます。無料プランの「Starter」を選択し、次の画面で「Design with Figma」を選択します。
↑最初の設定が完了し、Figmaの編集画面が表示されました！
↑編集画面右上の部分で、編集画面の背景色を変更することができます。
↑編集画面左上の「井」のようなマークを押します。
「Frame」を選択して画像のサイズを決めていきます。
↑編集画面右側の「Frame」で、サイズを変更できます。
「W」は画像の幅を、「H」は画像の高さを表しています。ここの数字を変更することでサイズを変えることができます。
↑今回は、レモンシロップを作りましょう的なブログのアイキャッチ画像を作ります。
レモンとレモンシロップを使った飲み物の画像を用意します。それぞれサイズが違っても大丈夫です。
ドラッグ＆ドロップでエクスプローラーやFinderから直接貼り付けできます。編集画面に画像を貼り付けたら、画面左側の「Layers」に画像のファイル名が表示されます。
↑まず、レモンの画像をマウスで掴んでドラッグし、フレームの中へ引っ張ります。
そうすると、画像がフレームの中に収まるようになり、画面左側の「Layers」のところに「image 1(＝レモンの画像）」が「Frame 1」の下に入ります。
↑同様に、飲み物の画像をマウスで掴んでドラッグし、フレームの中へ引っ張ります。
初めに作ったフレームのサイズで、画像ができました！
↑最後に、編集画面左下の「Export」から画像をダウンロード（書き出し）します。
PNG、JPG、SVG、PDFの形式を選ぶことができます。
↑この画像ができました！同じフレームサイズで画像を複数作れば、画像サイズも統一でき簡単に画像が編集＆作成できます！
今回は、Figmaの始め方とセットアップ方法について、そしてブログに使える画像の簡単な作成方法について紹介しました✌️
Figmaはweblemonでもたくさん使っているので今後も応用法をたくさん書いていく予定です😆
ぜひ、Figmaを使ってみてください！！
2024-12-08
Sunday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ＆デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome（グーグル ク...
続きを読む
これからWEBマーケティングを学びたい人...
続きを読む
