クリエイターが語る「Photoshopと私」 (5) Gunosy UIデザイナー・樋口剛さん

Illustrator側のものはSvg/Png/WebFontとして書き出せるようにしていますので、Photoshopは主にスタティックなプロトタイプ作成のためのツールとして使用しています。

また、最近ではレイヤーグループをDOMやネイティブアプリのElementに見立て、グループやスマートオブジェクトごとに書き出し、JavascriptのVue.jsやReact.jsなどのComponentに落とし込んでモックアップを作る使い方をすることもあります。 面倒な時はInvisonなどのプロトタイピングサービスを活用することもあります。

そのほか、グラフィックデザインやスタティックなWebサイトのデザインを行うこともあるので、その際は従来のフォトレタッチツールとしても利用しています。

――最もよく使う/気に入っているPhotoshopの機能は?

良く使う機能はシェイプとパス、あとは前述したスマートオブジェクトなどのファイル間のリンケージです。UIデザインの場合、ページ単位ではなくコンポーネント単位でデザインを行う事が多いので、UIパーツ類を共用できるようにしています。

これは要望になりますが、UIデザインは画面ごとではなくコンポーネントごとでデザインする方が機能的に整合性がとりやすいので、リキッドレイアウトモード(Elementを差し込んだら自動で下にあるオブジェクトがその分ズレて配置されるとか、ウィンドウサイズで可変するとか)