ブログ

脱Adobe。次世代ソフトたちでWebデザインの仕事をしてみた - ソフト篇

最近、Adobe製品を全部消してしまって仕事しています。Adobe製品ではない、次世代ソフトで仕事をしていますが、Webデザイナーがいわゆる「脱Adobe」するとどうなるかなどを書いてみたいと思います。最初は「脱Adobe」するためのラインナップしたソフトを紹介したいと思います。

「脱Adobe」っていっている人は多いけど、実際にやっている人はいるの?

Webデザイナーやコーダー・フロントエンドエンジニアなど必須なソフトといえばまず、「Adobe」社の製品が上がってくると思います。「Adobe Photoshop」や「Adobe Illustrator」を使わずに仕事している人はほとんどいないと思います。

ただ、「Adobe」社の製品は、「高い」とか「Adobe税」とか揶揄されています。
それゆえに「脱Adobe」したいデザイナーが多いと思いますが、実際に「脱Adobe」している人のレビューを見たことがないので書いてみました。

実際にAdobe製品を全部消してしまって仕事していますと、「脱Adobe」をしたことによる教訓が多く得られました。

デザイニングインブラウザ

ブラウザでデザインをする、「デザイニングインブラウザ」。
ワイヤーフレームをベースにコーディングに着手します。そこに画像素材を乗せながら調整を続けていく手法です。
デザインカンプというものは存在せず、HTMLとCSSをコーディングしながらブラウザ上でデザインをしていくのが特徴です。

できあがったのち、ほかのブラウザでチェックして問題がなければ完成です。

「デザイニングインブラウザ」に慣れてしまえば、「デザイニングインブラウザ」を中心としたワークフローが早く制作できると思います。
ただ、クライアントによっては「カンプ」が必要だ、というケースがあるかと思います。

Sketch - UI作成やワイヤー作成

デザイニングインブラウザを利用して制作を行わない案件でメインで使っているのは「Sketch」です。

お客さんによってはカンプも必要だという場合は「Sketch」を利用しています。
また、アプリのUIの作成にも利用しています。そのほか、手書きベースを作成したワイヤーを仕上げるときなどにも利用しています。

Affinity Designer - ベクター素材を扱う

「Sketch」をメインで利用しています。ただ、「Sketch」は素材を扱うソフトとしてはベストではありません。

たとえば、Adobe illustrator形式やAdobe Photoshop形式のファイルを開くと、画像として表示されてしまう、素材のサイズによってはフリーズする、などの問題に直面しました。

そのようなときには「Affinity Designer」を利用して素材をSVG形式やPDF形式に変換する、などに利用しています。ただ、日本語の扱いが完璧でないことは知っておいたほうがいいでしょう。

Affinity Photo Beta / Pixelmator - 写真素材を扱う

写真素材を扱うときに利用しているのが「Affinity Photo」です。現在はベータ版です。「Adobe Photoshop」を超える可能性を秘めた写真編集アプリという評判です。

「Affinity Photo」は写真加工では使い勝手のいいアプリです。
ただ、まだベータ版のため「Adobe Photoshop」と比べて機能が完全に実装されていません。現状、「Affinity Photo」で足りない部分は「Pixelmator」で補っています。

まとめ

今回は「脱Adobe」するために利用するソフトを紹介してみました。
実際のお仕事に使う場合、案件によっては素材を管理するためのソフトを準備する必要があると思います。

次回は、Adobe製品を使わずに仕事してみて、以外と面倒だった素材の扱いについて書いてみたいと思います。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。