Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@xrxoxcxox

デザインに関する業務をする人のためのBrewfile

これは何

  • デザイナーはもちろん、デザイナーと関わりの多いエンジニアや、デザインエンジニアと呼ばれるような人向けに、いくつかFormulaeを紹介した記事です
  • 無料でも十分に使えるものだけを紹介しています

Formulae一覧

  • FFmpeg
  • ImageMagick
  • Blender
  • Figma
  • FontBase
  • ImageOptim

これらについて、筆者がよく使う用途とともに簡単に紹介します。

FFmpeg

インストール
brew install ffmpeg

以下のようなシーンで使うことが多いです。

  • フォーマットの変換
  • 容量を軽くするためにサイズやビットレートを変更する
  • 連番で書き出した画像を繋げて動画にする

(仕組みを分かっていれば「それはそう」な話ですが)動画ファイルをPremiereやAfter Effects経由で出力すると、矩形を小さくしたにも関わらず容量が増える場合すらあり、地味に大変です。
FFmpeg経由で実行した方が色々と楽だと感じています。

参考記事:

ImageMagick

インストール
brew install imagemagick
  • フォーマットの変換
  • 2枚の画像の差分を出す
  • gifのループ回数変更

Photoshopのバッチを作っても良いのですが、設定が意外と面倒なので、ImageMagickから実行した方が楽だと思います。
あとはgifのループ回数変更は細かい話ながらかなり重宝しています。

参考記事:

Blender

インストール
brew install --cask blender
  • 立体のアタリをとるための下書き
  • ちょっとしたグラフィックを作る際、画面の情報量を増やす手段

フォトリアルな3DCGを作ろうと思うと一朝一夕には扱えませんが、レイアウトを考えるとかで幾何図形だけ使って下書きをするような場面では結構有効だと思います。
(あまりそういう使い方をしている人はみませんが……)
例えば、立体的に見えるロゴを作ろうと思った際にBlenderで下書きをしてからIllustratorでの作業に移る、といったフローは実際に行ったことがあります。

また、幾何図形のみの組み合わせでも平面のパスだけで作るより表情豊かに見えます。
以前私が作ったものを載せますが、PhotoshopやIllustratorで同等の情報量を出すのは結構大変だと思います。

Figma

インストール
brew install --cask figma
  • UIデザイン・プロトタイピング
  • ブレインストーミング
  • スライド作成
  • CATAN

SketchもHomebrewからインストールできますが、基本的には有料なソフトなのでFigmaを紹介します。
一番の目的であるUIデザインやプロトタイピングはもちろん、ブレインストーミングのような用途にも使えますし、発表用スライドをFigmaだけで完結させることも可能なんですね。
また、PluginやWebhookなども魅力の1つです。

参考記事:(3つ目は自分の記事ですが……)

ちなみにCATANと書いたのはネタで、Figma上で遊べるCATANが公開されています。

FontBase

インストール
brew install --cask fontbase
  • フォントのベンダーやライセンスごとにグループ分けをする
  • 使わないフォントはオフにしておく
  • Googleフォントをダウンロードせずに使う

最近はフリーフォントでも質の良いものが増えているので、気軽に色々なものを試せる世の中になっていると思います。
ですが、フリーの中でも商用利用の可否や、改変してロゴにして良いかどうかなど、ライセンスの違いは結構あります。

Macなら標準でもFont Bookというフォント管理アプリが入っていますが、これだけで様々な管理の仕方をするのは無理がありますよね。
というわけでフォント管理のためにソフトを入れておこう、というお話です。

ImageOptim

インストール
brew install --cask imageoptim
  • 画像を圧縮する

使いどころが若干ImageMagickと被っていますが、ImageOptimはドラッグ&ドロップするだけで複数ファイルを一気に処理してくれるのと、(非可逆圧縮含めて)圧縮の度合いを選べるのでシーンに合わせて使い分けています。

ちなみにCLI版のImageOptimもあります。
自分はGUIの方が気軽に使えたのでこちらを選んでいますが、もしCLIが良い場合は以下のコマンドでインストールできます。

インストール
brew install imageoptim-cli

まとめ

主に画像や動画に関わるものを紹介しました。
Photoshopでやるまでもないなあ……みたいな場面で活躍するものが多いかと思います。

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
xrxoxcxox
デザイナーです。HTMLとCSS、少しだけJavaScriptも書きます。
increments
「エンジニアを最高に幸せにする」ために Qiita、Qiita Team、Qiita Jobs を開発・運営しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?