ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザイン - ドローの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2020/11/06

Diagram Maker - AWS製。ノードベースのドローツール

テキストで説明するよりも、グラフや図を使った方が分かりやすいという場面は多いです。しかし、ちょっとした図であっても編集が面倒だったり、ソフトウェアをインストールするのが面倒で控えてしまいがちです。その結果、テキストで説明して認識違いが起こったりします。今回紹介するDiagram MakerはAWSが作成したソフトウェア...

List

  • 2020/10/24

Go-Diagrams - Goを使ってネットワーク図を描く

システム用の図を書く場面はよくあります。特にプロジェクトでのネットワーク図であったり、アーキテクチャをまとめたりするのによく書くことでしょう。ドロー用のソフトウェアを使ってビジュアルで描くこともできますが、メンテナンスが面倒だったり、専用のソフトウェアをインストールしないといけません。そこで使ってみたいのがGo-Dia...

List

  • 2020/10/18

Online GitHub Contributor Graph Generator - GitHubのアクティビティグラフで自由に絵を描く

GitHubでは日々の活動(Gitログ)によってアクティビティグラフが描かれます。それによって毎日開発を続けようと思いますし、モチベーションにしている人も多いでしょう。あのグラフはサーバ側で制御しているものではないので、Online GitHub Contributor Graph Generatorのような仕組みを使...

List

  • 2020/10/16

Pikchr - Markdownの中にSVGで図を埋め込む

開発用のドキュメントでMarkdownがよく使われるようになっていますが、足りない機能が多いのも確かです。HTMLも埋め込んで使えますが、それではMarkdownを使っている意味がないと思ってしまうでしょう。Markdownの中にドローイングを埋め込みたい時にはPikchrを使ってみるのを検討しましょう。## Pikc...

List

  • 2020/09/11

ditaa - アスキーアートを図(SVG)に変換

システムの処理フローなどはチャートで書いた方が分かりやすい場面が多いですが、ドローイングツールを使って書くのは意外と面倒です。一度書くのはいいとしても、後で変更する手間は大きかったりします。そこで使いたいのがditaaです。アスキーアートから画像の図を生成してくれます。## ditaaの使い方例です。アスキーアート版は...

List

  • 2020/07/07

Excalidraw Claymate - Excalidrawを使ったアニメーション作成ソフトウェア

教科書や書籍の端っこでパラパラ漫画を書いた経験は多くの人があるはずです。その際には前の絵とちょっとだけずらして書いていくのがポイントになります。ちょっとずつずらして書くのを繰り返すことで、一気にページをめくると動いて見えるようになります。そんなパラパラ漫画風のアニメーションGIFを作れるのがExcalidraw Cla...

List

  • 2020/03/09

Diagrams - システム構成図をコードで書く

開発者であっても図を描く機会は多いです。仕様書のようなドキュメントであったり、システム構成図の中に書いたりといった具合です。ドローソフトウェアを使ったり、スライド作成ソフトウェアを使ったりしまうが、操作やメンテナンスが面倒でストレスです。そこで使ってみたいのがDiagramsです。開発者らしく、コードで図を描けます。#...

List

  • 2020/03/04

Core2D - マルチプラットフォームで動作するダイアログエディタ

開発用途で図を描くソフトウェアで、いいものにはなかなか巡り会えません。商用ソフトウェアであればすでにいいソフトウェアもありますが、ちょっとしか使わない時に高価なソフトウェアを購入するのはつい躊躇してしまいます。そこでオープンソース・ソフトウェアに注目しましょう。今回はCore2D、.NET製でマルチプラットフォームで動...

List

  • 2020/02/08

DiagramFlowJS - Web上でフローチャートを描くJavaScriptライブラリ

Web上でフローチャートを描いたり、図を描く際にはどんなツールを使っているでしょうか。各ノードを連結させたり、連結後に動かしてもちゃんと線が繋がったままになっているツールを選ぶのがいいでしょう。今回紹介するDiagramFlowJSはそんな図を作るのに使えるソフトウェアです。## DiagramFlowJSの使い方多く...

List

  • 2020/02/04

Excalidraw - プロトタイプに。ラフな線が書けるドローツール

きっちりした、正確な図を書くと、ほんの少しの乱れが気になって修正に時間がかかってしまったりします。それは些細な問題で、本質的な問題ではないにも関わらずです。特にプロトタイプなどではラフさを残した方がはやく作れます。今回紹介するExcalidrawは手書き風の図を書けるソフトウェアです。乱れている分、細かな点は気にせず作...

List

  • 2019/12/21

UXBOX - プロトタイプをさくさく作るためのWebアプリケーション

Webサイトやアプリなど、プロトタイプをさくっと作ってUIを検討するというのはよくある進め方です。そんな時にはデザイナーしか使えないソフトウェアよりも、誰でも編集できるものを使った方が素早く進められるでしょう。今回紹介するUXBOXはオープンソースのプロトタイピングソフトウェアです。## UXBOXの使い方まずプロジェ...

List

  • 2019/12/19

LegraJS - レゴ風ブリックを使ってドローイング

レゴはみんなが好きなおもちゃでしょう。一つ一つは小さなブリックですが、それを組み合わせることで何でも自分が好きなものを作り上げられます。最近ではIoTとも組み合わせて使われています。そんなレゴ風のブロックを使ってドローするライブラリがLegraJSです。## LegraJSの使い方スマイルマークのアニメーション。!

List

  • 2019/12/07

drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる

開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。## drawthe....

List

  • 2019/07/31

Moveable - マウスでドラッグ/リサイズ/回転を実現

Webアプリケーションとしてドローアプリを作りたい、または一部の機能としてDOMを移動したりサイズ変更するような機能を設けたいと思うことがあります。しかし、DOMをインタラクティブに操作するのは困難です。そこで使ってみたいのがMoveableです。マウスでDOMを簡単に操作できるようになります。## Moveableの...

List

  • 2019/07/24

Pinker - 文字で定義して図に変換

Webが不得意としているものの一つが図(ダイアグラム)でしょう。Canvasを駆使すればできなくもないですが、画像編集ソフトウェアを使って画像として埋め込んでしまう人の方が多そうです。今回紹介するPinkerはJavaScriptのコードからダイアグラムを生成するソフトウェアです。## Pinkerの使い方レイアウトと...

List

  • 2019/06/15

Zdog - SVGやCanvasにドロー

Illustratorなどで描いたキャラクターも、そのままでは単なる絵と変わりません。SVGであれば、JavaScriptを使ってインタラクティブな操作が実現します。そうすれば、画像とは違った楽しみ方が生まれるでしょう。今回紹介するZdogはJavaScriptでイラストを描き、3Dのように回転もできるライブラリです。...

List

  • 2019/06/09

drawgon - Web上でドロー

Web上で絵を描こうと思うとCanvasタグを使って行います。そして、そこに描かれた情報は画像としてダウンロード可能です。しかし、ベクターデータとして(SVGとして)欲しい場合もあるでしょう。そこで使ってみたいのがdrawgonです。Web上で使えるドローイングアプリケーションです。## drawgonの使い方最初にサ...

List

  • 2019/04/18

Kroki - テキストからドローに変換するWeb APIサーバ

プログラマーは図を書くのが嫌いです(たぶん)。少なくともドローソフトウェアを使って書くのは嫌がるでしょう。メンテナンスしづらいですし、コードと図の乖離が発生しがちです。せめてテキストで書いて、自動的に図にしてくれるものであれば、元のテキストを自動生成する方法が選べたり、バージョン管理で差分が取れるようになります。そんな...

List

  • 2019/03/07

Tart - なんと!ターミナル上で動作するドローアプリ

開発に関わる多くのことがCUIでできます。ただ開発するだけであればGUIは不要かも知れません。Webブラウザだけあれば十分という人は多いのではないでしょうか。GUIでないとできなさそうな、ドローアプリケーションですらCUIでできます。それがTartです。## Tartの使い方メイン画面です。!