プロフィール/雑記/記事一覧/システム構成図を書く時のTIPS

システム構成図を書く時のTIPS

2020/9/5 4:372021/12/23 8:46

システム構成図を集めた電子本?を作るということで頑張っているのですが、慣れていないとなかなか難しいですね。

それでも進めていく中でわかってきたコツ的なものもいくつかあるので、まとめていきます。

使うツールはdraw.io

Adobe XDは矢印を書くのが難しいので慣れてない場合はやめた方が良いです。

作り終わってから縦横比が合わなくて修正することになると悲しいです😭

紙に大体のラフが書けたら、必要なロゴを一気に集めましょう。白のロゴを白背景の上に設置するといい感じになります。背景が透明だと、ロゴの余白のカットがやりづらい。ロゴ以外にも人間等の画像が必要な場合、合わせて集めましょう。(いらすとやが便利ですが、この辺はお好みで)

大抵のサービスは、正方形版、長方形版、サービス名の有無など様々なタイプのロゴがあるので、スタイルを統一すると良さそうです。

余白があると、ロゴを矢印でつなげた時に、ロゴマークと矢印の間に謎の余白(しかもロゴごとに余白の大きさが違う)が生まれてきれいになりにくいです。

カットにはmac標準のプレビューアプリを使います。

先述の通り、白の長方形をバックに引けば、背景が白のロゴでも違和感なく設置できます。また背景がデフォルトの透明のままだと、背景が白以外の環境で見ると汚い感じになります。

「アップロード → 配置」を繰り返すより、一気にアップロードしてから配置した方が効率が良いです。draw.ioの管理メニューからアップロードしようとすると1枚ずつしかアップロードできないので、ドラッグ&ドロップで対応すると良さそう。

用意したロゴ画像のサイズはバラバラであることが多いので、アップロードしたらまずはサイズを揃えましょう。

6px前後が、太すぎず細すぎずいい感じだと思いました。

コピペして内容だけ差し替えるようにすると、スタイルを統一できます。

また日本語は英語より少し文字を小さくするときれいに見える気がします。今回は英語24px、日本語18pxにしました。

今作ってるやつ、0からやり直そ。むずかし〜。この辺のTIPS最初に知りたかったー！