デザイン - ドローの記事一覧
Diagrams - システム構成図をコードで書く
開発者であっても図を描く機会は多いです。仕様書のようなドキュメントであったり、システム構成図の中に書いたりといった具合です。ドローソフトウェアを使ったり、スライド作成ソフトウェアを使ったりしまうが、操作やメンテナンスが面倒でストレスです。そこで使ってみたいのがDiagramsです。開発者らしく、コードで図を描けます。#...
Core2D - マルチプラットフォームで動作するダイアログエディタ
開発用途で図を描くソフトウェアで、いいものにはなかなか巡り会えません。商用ソフトウェアであればすでにいいソフトウェアもありますが、ちょっとしか使わない時に高価なソフトウェアを購入するのはつい躊躇してしまいます。そこでオープンソース・ソフトウェアに注目しましょう。今回はCore2D、.NET製でマルチプラットフォームで動...
DiagramFlowJS - Web上でフローチャートを描くJavaScriptライブラリ
Web上でフローチャートを描いたり、図を描く際にはどんなツールを使っているでしょうか。各ノードを連結させたり、連結後に動かしてもちゃんと線が繋がったままになっているツールを選ぶのがいいでしょう。今回紹介するDiagramFlowJSはそんな図を作るのに使えるソフトウェアです。## DiagramFlowJSの使い方多く...
Excalidraw - プロトタイプに。ラフな線が書けるドローツール
きっちりした、正確な図を書くと、ほんの少しの乱れが気になって修正に時間がかかってしまったりします。それは些細な問題で、本質的な問題ではないにも関わらずです。特にプロトタイプなどではラフさを残した方がはやく作れます。今回紹介するExcalidrawは手書き風の図を書けるソフトウェアです。乱れている分、細かな点は気にせず作...
UXBOX - プロトタイプをさくさく作るためのWebアプリケーション
Webサイトやアプリなど、プロトタイプをさくっと作ってUIを検討するというのはよくある進め方です。そんな時にはデザイナーしか使えないソフトウェアよりも、誰でも編集できるものを使った方が素早く進められるでしょう。今回紹介するUXBOXはオープンソースのプロトタイピングソフトウェアです。## UXBOXの使い方まずプロジェ...
LegraJS - レゴ風ブリックを使ってドローイング
レゴはみんなが好きなおもちゃでしょう。一つ一つは小さなブリックですが、それを組み合わせることで何でも自分が好きなものを作り上げられます。最近ではIoTとも組み合わせて使われています。そんなレゴ風のブロックを使ってドローするライブラリがLegraJSです。## LegraJSの使い方スマイルマークのアニメーション。!
drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる
開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。## drawthe....
Moveable - マウスでドラッグ/リサイズ/回転を実現
Webアプリケーションとしてドローアプリを作りたい、または一部の機能としてDOMを移動したりサイズ変更するような機能を設けたいと思うことがあります。しかし、DOMをインタラクティブに操作するのは困難です。そこで使ってみたいのがMoveableです。マウスでDOMを簡単に操作できるようになります。## Moveableの...
Pinker - 文字で定義して図に変換
Webが不得意としているものの一つが図（ダイアグラム）でしょう。Canvasを駆使すればできなくもないですが、画像編集ソフトウェアを使って画像として埋め込んでしまう人の方が多そうです。今回紹介するPinkerはJavaScriptのコードからダイアグラムを生成するソフトウェアです。## Pinkerの使い方レイアウトと...
Zdog - SVGやCanvasにドロー
Illustratorなどで描いたキャラクターも、そのままでは単なる絵と変わりません。SVGであれば、JavaScriptを使ってインタラクティブな操作が実現します。そうすれば、画像とは違った楽しみ方が生まれるでしょう。今回紹介するZdogはJavaScriptでイラストを描き、3Dのように回転もできるライブラリです。...
drawgon - Web上でドロー
Web上で絵を描こうと思うとCanvasタグを使って行います。そして、そこに描かれた情報は画像としてダウンロード可能です。しかし、ベクターデータとして（SVGとして）欲しい場合もあるでしょう。そこで使ってみたいのがdrawgonです。Web上で使えるドローイングアプリケーションです。## drawgonの使い方最初にサ...
Kroki - テキストからドローに変換するWeb APIサーバ
プログラマーは図を書くのが嫌いです（たぶん）。少なくともドローソフトウェアを使って書くのは嫌がるでしょう。メンテナンスしづらいですし、コードと図の乖離が発生しがちです。せめてテキストで書いて、自動的に図にしてくれるものであれば、元のテキストを自動生成する方法が選べたり、バージョン管理で差分が取れるようになります。そんな...
Tart - なんと！ターミナル上で動作するドローアプリ
開発に関わる多くのことがCUIでできます。ただ開発するだけであればGUIは不要かも知れません。Webブラウザだけあれば十分という人は多いのではないでしょうか。GUIでないとできなさそうな、ドローアプリケーションですらCUIでできます。それがTartです。## Tartの使い方メイン画面です。!
JS.Sketcher - Web上で3Dモデリング
IoTや3Dプリンタと言った文脈の中でハードウェアが存在意義を増しています。ちょっとしたオリジナルの部品を3Dプリンタで作ったり、IoTプロジェクトのハードカバーを作ったりします。そんな時に必要なのが3D CADになるでしょう。今回はWebブラウザ上で3DモデリングができるJS.Sketcherを紹介します。## JS...
Whitebophir - コラボレーションできるオンラインホワイトボード
遠隔地とミーティングをする際に便利なのがチャットです。テキストや動画を介してコミュニケーションがスムーズに行えます。しかし、イラストなどを相手と共有したい時にはホワイトボードを使うのが便利です。そこで使ってみたいのがWhitebophirです。リモート同士で共有できるオンラインホワイトボードになります。## White...
Dotgrid - ドットを使ったドローアプリ
Illustratorのようなツールを使ってドローを描いてみたいと思ったことはないでしょうか。さすがにあのレベルのソフトウェアを使いこなすのは難しいですが、簡単なドローであっても使いどころは多いはずです。そこで使ってみたいのがDotgridです。ドットの上でドローするのが特徴のソフトウェアです。## Dotgridの使...
Draw2D touch - Webブラウザ上でVisio風のドローイングを実現する
開発現場においてMicrosoft Visioは人気のあるソフトウェアです。特にプロジェクトマネージャなどがアーキテクチャを図化したり、データベースのモデリングをしたりするのに使われます。しかし、その使い方に対して価格が非常に高いと感じてしまう方もいるでしょう。そこで使ってみたいのがDraw2D touchです。HTM...
jsPlumb - Web上で情報の関連性を表現
情報の関連性を表現する際にフローチャートが便利です。常に1対1の関係ではなく、分かれたり、交差したりすることもあるでしょう。情報の関連性がビジュアル化されることで、理解度が格段に増します。そこで使ってみたいのがjsPlumbです。情報を接続して表現できるソフトウェアです。## jsPlumbの使い方フローチャートの例。...
jointerJS - HTMLエレメントを線で結ぶ
Web上で図を描く際にはCanvasを使うのが一般的です。しかし、Canvasは通常のDOMとはまったく異なるコーディングが求められるので、書くのは好きではないという方もいるでしょう。そこで簡単な図、ノードを結びつけるようなものを描くならばjointerJSを使ってみましょう。## jointerJSの使い方例です。5...
DrawerJs - Web上で組み込んで使えるドロー
Webサービスの中にイラスト機能を追加したいと思ったことはないでしょうか。掲示板でも使えますし、作業内容を写真と合わせて記録するのにも向いています。テキストで書くのとはまた違った情報が入れられるでしょう。そこで使ってみたいのがDrawerJsです。Webサイトの中に組み込めるドローソフトウェアです。## DrawerJ...