-
WebTraining.jpにてFigma基礎講座をスタート
FukuokaMiyako が運営する学習サイト WebTraining.jp にて、このたび新しく Figma 基礎講座 を公開しました。 WebTraining はこれまで、HTML / CSS / JavaScript / PHP を中心とした「コードに強いオンライン学習サイト」として運営してきました。訓練や企業研修の教材としても利用されており、実践的なコーディングスキルを身につけたい方に... -
Figmaで作ろう！バナー講座 入門編
Figmaを使って、実際のバナー制作と同じ流れで進めていきましょう。今回は、よくある ECサイトのセール告知バナー を題材に、次のステップで解説します。 依頼文から必要な情報を整理する バナーの文言を最適化する（短く・伝わりやすく） ガイド（グリッド）を引く 文字のレイアウト・書体選び 配色・コントラストの調整 情報の優先度に合わ... -
Figma基礎 Figmaをインタラクティブに！プロトタイプ設定
Figmaのプロトタイピングとは？ Figmaのプロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、デザインがどのように反応するかを再現することが可能です。これにより、実際のアプリやウェブサイトの操作感をシミュレーションできます。また... -
Figma基礎 コンポーネントとインスタンス
Figmaのコンポーネントは、Figmaで使われる再利用可能なデザイン要素です。デザインにおいて、同じパーツを繰り返し使用する場合に便利で、一括更新や統一感のあるデザインを実現するための機能です。 コンポーネントの特徴は、元となる「親コンポーネント」があり、これがデザインの基となるオリジナル要素になります。親を修正すると、その... -
Figma基礎 スマートフォン対応のワイヤーフレームの作成
初心者さんでも大丈夫！ レイアウトグリッド、長方形ツール、テキストツール、プラグイン、オートレイアウトを使って、スマホで見やすいネットショップの骨組み＝ワイヤーフレームを作ってみましょう。使う機能は、 レイアウトグリッド: ページ全体のバランスを整える 長方形ツール: ボタンや画像などの領域を作る テキストツール: 文字を入... -
Figmaを知ろう！入門講座 基本操作と概要
Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操作について詳しく解説します。これからFigmaを始める方に向けた内容です！ Figmaとは何ができるツールなのか？ Figmaの特徴と得意なこと Figmaは、クラウドベースのデザイ...
1