デザインステップアップ Figma編

初めに

どもどもこんにちは！最近は、同い年の先輩社員と一緒にお酒を飲んで、なんだか悲しい気持ちになった龍ちゃんです。同い年の先輩という存在は、不思議な存在ですよね。ポジショニングが難しいので、プライベートと仕事を頑張って分けていこうかと考えたりしています。と言いつつも、お酒を飲んだら関係なくなっちゃうんですけども…

さてさて、今回はたびたび僕の記事にも出てくる「Figma」を推していこうかと思います。と言いましても、まだFigma歴が四か月目です。その辺を考慮して閲覧してください。そして、フロントエンドに関わる人は、ぜひ使ってみてください。

正直に言いますと、僕がFigmaにできることを書くのはどうかと思いますので、大手のサイトで紹介されている紹介文を置いておきますね。できることに関しては、外部のサイトに任せることとして、僕がどんな時に使っているかを書いていこうと思います。

ワイヤーフレーム

入社してから学んだことの一つにTailwindというCSSフレームワークにがあります。これもFigmaと同時期に勉強しましたね。今まで、デザインを形にする際の方法としては、HTMLとCSSを書いて動かしてみての確認しか方法がありませんでした。それがFigmaを学んだあとでは、半分以下の時間でサイトの感じを確認できるようになりましたね。作ってみてからなんか違うなというのがなくなったので、高効率で作品を作れるようになりました。

ブログ用コンテンツ

これは、サムネイルだったりブログの中で説明に使うための資料は全てFigmaで作っていますね。単純なサムネイルからちょっと凝ったサムネイルまで、あらゆるコンテンツに対応ができるので重宝しています。今回のサムネイルは、白黒スタイルから若干頑張りを見せて見たのですが、配色がすごく難しいですね。シンプルなサムネイルもいいですけど、ちょっと凝ったサムネイルも作っていきたいのでサムネイル候補でも作ったらそれも記事にしていこうかなと思います。今までのサムネイルを置いておきますね。

パワーポイント用コンテンツ

これは、ブログ用でFigmaを使っていたら、Figmaになれるためにパワーポイントで使う資料もFigmaで作り出しちゃったという側面があります。パワーポイントで素材作ることもやっていたのですが、そのファイルを違うパソコンで使う際にデータを移行しないといけないですよね。Figmaだと自分のアカウントで入りさえすれば、素材をダウンロードすることができるので重宝しています。最近仕事で作った資料を置いてみますね。商用利用可能なアイコンを提供しているサイトは、神サイトなので即ブックマークしましょう。適宜紹介するのも面倒なので、そのうちまとめて記事にしますね。

ちょっとしたロゴ

これは最近はまっていることですね。今までロゴを作ったことはなかったので、これから頑張っていきたいことではありますね。最近作ったロゴといえば、これですね。ピクトグラムというジャンルのロゴなら作れそうですね。吹き出しなどもデコレーションできるので、可能性の塊だと思っています。現状はまだまだデザインレベルが低いので、吹き出しを提供してくれる有料サイトの紹介を載せておきます。「フキダシデザイン」では、様々な吹き出しを提供してもらえます。