LoginSignup
7

More than 5 years have passed since last update.

画面設計で使用したツール比較メモ

Last updated at Posted at 2017-06-27

画面仕様書作成に使用したツール

  • markdown
  • gitbook-cli (※1)
  • Inkscape (※2)

gitbook-cli, markdownとExcelの比較(所感)

gitbook-cli, markdown

メリット

  • gitで管理することができる。
  • 仕上がりがまとまっていて見やすい。

デメリット

  • 表の一部を結合することができない。
  • 表で番号を振っている場合、1つずらすと全て手動で直さなければならない。
  • 表が表示できる横幅が狭く、見にくくなってしまう。

Excel

メリット

・複雑な表を作成することができる。
・関数を使ってスピード感な作成ができる。
・学習コストがかからない。

デメリット

・gitで管理することができない。
・gitbookに比べると見づらい。

各ツールのインストールと、簡単な操作手順メモ

(※1) gitbook-cli : ドキュメントを冊子形式にまとめることができるツール
$ npm install -g gitbook-cli
$ gitbook init
生成されたSUMMARY.mdに、画面仕様書のmd名を記載すると、html化、ブック化が行われる。

$ gitbook build→ローカル上で、index.htmlからドキュメントを確認することができる
$ gitbook serve →localhost:4000サーバーでドキュメントを確認することができる

ちなみに、、、
$ gitbook ls #gitbookのバージョンを確認
 → バージョンが3以上だとページ遷移がうまくいかないバグがあるようなので、
gitbook buildから確認をするときは以下のコマンドで、バージョンを下げてからbuildすること。
$ gitbook fetch 2.6.7
$ gitbook build --gitbook=2.6.7

(※2)Inkscape : svgファイルの編集ができるツール
インストール先:https://inkscape.org/ja/
  1. ctrl + shift + L でレイヤーの操作画面を出し、[+]マークでレイヤーを追加する。
  2. 作成したレイヤーが選択されていることを確認し、画面を加工する。
  3. 名前を付けて保存で、ファイルの形式がsvgとなっていることを確認する。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7