こんにちはヒカルです。
現在デイトラでプログラミング勉強中です。プログラミングスクールのカモにならないように頑張ります。
さて前回まででデイトラWeb制作コース中級編の説明をしてきました。大きく分けると
- Figmaの使いかた
- デザインカンプからのコーディング
- よくあるアニメーションアニメメーションを作ってみる
- 実践課題
になります。
今日はその中でも「Figmaの使いかた」の講座をやってみました。
Figma（フィグマ）は、クラウドベースのデザインツールで、ユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）デザイン、プロトタイピング、共同作業が可能なプラットフォームです。難しい説明ですが簡単に言うとwebデザイナーがFigmaを使ってデザインカンプを作成してコーダーがそのデザインカンプをもとにサイトのコーディングをしていくイメージです。
デイトラWeb制作コースではwebデザイナーがどんな考え方でどんなやり方でwebページをデザインしているのか理解をするためにFigmaの操作に仕方を学習します。
今回初めてFigmaを使用してみましたが最初に思ったのは、「全然難しくない」ということです。まだ使いはじめて１日ですがFigmaの良いところを上げていきます。
- ソフトをインストールしなくてもよい: Figmaはクラウド上で動作するため、デザインやプロトタイプにどんなデバイスからでもアクセスできます。インストールが不要であり、最新のバージョンが即座に利用可能です。
- リアルタイム共同作業: 複数のユーザーが同時にプロジェクトにアクセスし、リアルタイムで編集できるため、チーム全体が協力して効率的に作業できます。デイトラWeb制作コースでは１つのデザインカンプを見るため複数でFigmaを開くことになります。
- 直感的に作業ができる: Figmaは直感的で強力なプロトタイピング機能を備えており、デザイナーが素早くインタラクティブなプロトタイプを構築できます。これにより、ユーザーフィードバックやデザインの検討がスムーズに行えます。
- 無料：Adobe社のillustratorやPhotoshopは有料ですがFigmaは無料で使用することができます。まだ稼ぐことができない初学者にとってはありがたいですね
Figamaは直感的操作ができるので覚えることはとても少ないです。（まだ操作し始めて１日目の感想です。）
- アートボード（キャンバスみたいなもの）→Aを押して範囲を指定する
- テキスト（テキストを入れる箱みたいなもの）→T を押して範囲を指定する
- 四角形（範囲を指定する箱みたいなもの）（innerやヘッダーに使える）→R を押して範囲を指定する
- 戻る→Ctrl+Z
- 戻るの戻る→Shift＋Ctrl+Z
- 比率をたもったまま拡大縮小→shiftを押しながら
- グループ化→グループ化したいパーツを選んでCtrl+G
- 距離を測る→option(Alt)を押しながら
- 複数のアイテムを均等に配置→Shift＋Ctrl+H
大体このくらいを覚えておけばデザインカンプを作れるようになりました。
次からはこのFigmaのデザインカンプをもとにしてデザインを再現していきます。
