Webデザインで使っているツール・素材 フォント等

Figma

• Webサイト＆アプリ　ワイヤーフレーム

• デザインカンプ

• デザインシステム構築

Figma: コラボレーションインターフェースデザインツール

Photoshop

• バナー、メインビジュアル、図解（写真利用多めな場合）

• 写真加工

Adobe Photoshop公式アプリ - 最先端のAI写真＆デザインソフトウェア

illustrator

• バナー、メインビジュアル、図解（イラスト利用多めな場合）

• アイコン

• ロゴ

• グラフや表

• 紙媒体（チラシ）

【公式】Adobe Illustrator グラフィックデザインの定番ソフト

Webフォント

• Google Font （CSSへimport）
  ※サイト表示速度の観点から使用しないケースもある。
  和文 Noto Sans JP → 相性のいい欧文組み合わせ Roboto

Noto Sans Japanese - Google Fonts

Roboto - Google Fonts

アイコンフォント（HTML・CSSへimport）

• Font Awesome

• Bootstrap Icons

• Material Symbols

Font Awesome

Bootstrap Icons

Material Symbols and Icons - Google Fonts

iOSアプリデザイン（開発時期により異なる）

• ヒラギノフォント（iOSアプリ和文）

• SF Pro（iOSアプリ 欧文）

角ゴシック | ヒラギノフォント | SCREEN

Fonts - Apple Developer

グラフィックデザイン フォント

※文字をはっきり読ませたい場合は、UDフォント優先。

• モリサワフォント

• Adobeフォント

Morisawa Fonts

フォントを検索 | Adobe Fonts

写真・ベクター素材

• Adobe Stock

他のストックサービスも選択肢も多くあるが、著作権や使用許諾に神経を使う事と、特にフリー素材は他のサイトと被る率が高い為、商用利用には殆ど利用しない。

画像素材は「Adobe Stock」数億点の画像から無料ダウンロード | Adobe Stock

思い出したら追記予定