Codebot でのデザインソフトウェアについて

Codebot でのデザインソフトウェアについて

free developer handoff in the browser.

理想

Developer (コーディングする人) は、デザイン用ソフトウェアをインストールせず、WEBブラウザでデザインスペック(メジャー)をみれば、コーディングできる。

理由としては下記。

  • デザインソフトウェアは原則有料であり、比較的高額である
  • 使っている PC の OS によって、制約がある (Sketch は macOS でしか利用できない)

また、ソフトウェアのメインユースケースに従う。 テキスト編集、スライド作成、写真加工をメインユースケースにしたソフトウェアでUIデザインをしない。

要件

  • サイズの計測、余白の計測 (margin, padding)
  • テキストのクリップボードへのコピー
  • 画像 (アセット) の切り出し
  • プログラムからの操作 (Plugin, API)

コラボレーション

基本的には、1人のデザイナーが作成し、1人のデベロッパーがコーディングします。
なので、コラボレーション機能はあまり重要視していません。
ただ、デザイン納品後に、発注者からデザイナーへの変更指示としてコメント機能は利用します。

以下が、典型的なコラボレーション機能

  • リアルタイムでの共同編集 (デザイナー間)
  • コメント管理 (アノテーション、フィードバック、タスク管理)
  • バージョン管理
  • クラウドでのファイル管理 (ストレージ)

sketch, xd, figma, invision

Sketch, XD, Figma, InVision はデフォルト機能として提供されています (プラグインなし)

ai, psd, pdf, png

Codebot では、ロゴデザインで Illustrator を利用し、写真加工で Photoshop を利用していますが、UIデザインとしての利用は推奨していません。

また、PDF や 各種画像ファイル での入稿も非推奨です。 理由は上記で書いている要件を部分的であれ満たしていないからです。

ただし、まったく受け付けていないわけではないので、どうしても下記のファイルで入稿したい場合はご相談ください。割高になる可能性はありますが、制作可能です。

  • .ai : Adobe Illustrator, ベクターイメージ編集ソフトウェア
  • .psd : Adobe Photoshop, ビットマップ画像編集ソフトウェア
  • .pdf : 文書に関するファイルフォーマット
  • .png : ビットマップ画像を扱うファイルフォーマット

Photoshopは主に写真を補正・加工するためのアプリで、画像の微妙な色味や質感の調整を得意とします。 Illustratorは、線や色のはっきりとしたイラストの作成やテキストの編集に最適なアプリです。

ポスターやチラシを作成する場合、 Photoshopで写真などの素材を加工し、 Illustratorでレイアウトを仕上げるといったように 2つのツールを組み合わせるとよいでしょう。

Adobe Illustrator

その他のツール (補助ツール)

運営者
Codebot (コードボット)
WEB開発、お任せください
コードボットは、ホームページ・WEBサービス・スマホアプリの開発サービスです。
お気軽にお問い合わせ・ご相談ください!
詳しくはこちら