見出し画像

はじめてのFigma

分析屋

はじめに

こんにちは！分析屋のNです！
いつもはExcel記事を書いているのですが、前回は生成AI、そして今回はFigmaと寄り道しまくりの今日この頃です。

現在私はWebアプリケーション開発の案件に少し携わる機会をいただき、Figmaを触っています。
そもそもWeb系には全く縁がない私ですが、Figmaを3日ぐらいで操作を覚えてなんとか使っています。
初めて触ったことで、気づいたことなどを今回まとめていきますのでご興味ある方は是非ご覧ください！




Figmaとは

Figma は、Webにおけるデザインやプロトタイピングを行うためのオンラインツールです。

特徴は以下になります。

  1. リアルタイムのコラボレーション
    複数人が同時にデザイン作業を行えるため、チームでの共同作業がスムーズに進められます。変更がリアルタイムで反映され、全員が最新の状態を確認できます。

  2. ブラウザベース
    インターネットがあればどこでも利用でき、特別なソフトウェアをインストールする必要がありません。PCやMacのブラウザで直接作業できます。

  3. プロトタイピング機能
    デザインの完成度を高めるために、インタラクションや遷移を追加して、実際のアプリケーションやウェブサイトの動作をシミュレーションできます。

  4. デザインツール
    UI/UXデザイン、アイコン作成、レイアウト作成など、さまざまなデザイン作業が可能です。直感的な操作で、効率的にデザインを作成できます。

  5. デザインのバージョン管理
    デザインの過去のバージョンを簡単に確認したり、復元したりすることができます。

FigmaはWebでもアプリでも使えますが、個人的にはアプリの方が動作的に利用しやすいと感じました。


基礎情報

基礎情報として今までの私のスキルセットをご紹介します！
ExcelVBA：2年半程度
illustrator：2年程度
Photoshop：半年程度
Lightroom：半年程度


Figma習得で役に立ったスキル

イラレがダントツで役に立ちました！！！
元々会社のパンフレットやチラシ、クリアファイルなどのデザインをイラレで行っていたので、レイヤーの考え方やフレーム、オブジェクトの概念はすんなり理解できました💡
位置やレイアウトもイラレに近い形だったので、個人的には非常に入り口は易しかったです！


Figmaの便利だったところ

無料でいろんなことができる

Figmaは基本的には無料で利用できます。
いくつか制約があるものの、3ファイルまでは無料で作成出来たり必要な機能も揃っているので、簡単なWebサイトなら課金しなくても十分に使えます！

色の変更が簡単

サイドバーにて「選択範囲の色」を一括で表示してくれるので、選択範囲全てに色変更を一括で行えるのは非常に便利でした！

プロトタイププレビュー

作成したファイルのプレビューが実際のWebのように動かすことができ、Figmaを所持していない方にもURLで共有できる点は非常に便利でした！
Figmaはインタラクション（ページ移動などの動作）もつけることができるのですが、インタラクションも反映されているので、実際の導線を考えながら使える点はチーム内でも好評でした🙆

コンポーネント

Webのヘッダーなど、どのページでも共通する部分にはコンポーネントという機能が便利でした！
コンポーネントとは1つ親となるデザインを作成し、親デザインにコンポーネントを作成すると、親デザインを複製したものはデザインが連動されます。
なので、ヘッダーのタイトルや色に変更があった際、親のデザインを「青色→赤色」に変えるだけで、複製したものも赤色に変更されます。


逆に難しかった点

フレームの概念

初めて触ったとき、「Figma：フレーム＝イラレ：アートボード」だと思っていましたが、実際は「Figma：フレーム＝イラレ：アートボード兼オブジェクト」であり、その点の理解に若干時間がかかりました。

インタラクションの設定

まず、インタラクションがフレームにしか設定できないという事実にたどり着くにも時間がかかりました。なので、オブジェクトに一生懸命インタラクションをつけようと、無駄な時間を過ごしていたのは後悔しています…😞


今後の課題

必要な要素かどうかの判断

使いやすいUIUXにするために、以下に必要なもの、そうでないものを取捨選択や重複するものの集約を行っていく必要があると分かりました。お客様すべてがUIUXの知識があるとは限らないので、可能な限り可視化しながらすり合わせを行い、お客様のベストを見つける作業をスムーズに進めていきたいです。

導線の意識

日々何気なく利用しているWebサイトでもカーソルや目線の流れを意識して、タイトルやボタンなどを配置していると知りました。「なんとなく」「おしゃれっぽい気がする」ではなく、すべてのものに「なぜその場所にしたのか」という根拠を持って話せるようにしなければなりません。

フロントエンド開発とFigmaの知識

これが一番課題に感じている部分です。
私にはHTMLやCSS、JavaScriptのスキルが無いので、開発自体はフロントエンドの担当者にお願いすることになってしまいます。また、Figma自体ものすごく知識があるわけではないので、フロントエンドの知識をもとに既存の機能を活用できたら開発タスク工数削減にも繋がったはずです。


さいごに

初めての経験なので正直トライアンドエラーの繰り返しなのですが、それ以上に学びも多いので非常に良い機会をいただけたと思っております。
今後、スキルセットを強化していくためにも、今後の課題と向き合い自己学習を進めていきます。



ここまでお読みいただき、ありがとうございました！
この記事が少しでも参考になりましたら「スキ」を押していただけると幸いです！

株式会社分析屋について

弊社が作成を行いました分析レポートを、鎌倉市観光協会様HPに掲載いただきました。

ホームページはこちら。

noteでの会社紹介記事はこちら。

【データ分析で日本を豊かに】
分析屋はシステム分野・ライフサイエンス分野・マーケティング分野の知見を生かし、多種多様な分野の企業様のデータ分析のご支援をさせていただいております。 「あなたの問題解決をする」をモットーに、お客様の抱える課題にあわせた解析・分析手法を用いて、問題解決へのお手伝いをいたします！
【マーケティング】
マーケティング戦略上の目的に向けて、各種のデータ統合及び加工ならびにPDCAサイクル運用全般を支援や高度なデータ分析技術により複雑な課題解決に向けての分析サービスを提供いたします。
【システム】
アプリケーション開発やデータベース構築、WEBサイト構築、運用保守業務などお客様の問題やご要望に沿ってご支援いたします。
【ライフサイエンス】
機械学習や各種アルゴリズムなどの解析アルゴリズム開発サービスを提供いたします。過去には医療系のバイタルデータを扱った解析が主でしたが、今後はそれらで培った経験・技術を工業など他の分野の企業様の問題解決にも役立てていく方針です。
【SES】
SESサービスも行っております。



この記事が参加している募集

#仕事について話そう

118,883件