【diagrams】ブログで使える表や図の無料作成ツール

こんにちはまめさるです

今回は表や組織図なんかを簡単に作れる無料ツールの『diagrams』を紹介します

表や図を作って記事に入れるだけで、分かりやすさや伝わりやすさがグッと上がりますので、ぜひ活用していきましょう

こういった悩みもdiagramsがあればすぐに解決できますよ

【diagrams】ブログでも使える表や図の無料作成ツール

diagramsはややこしい登録や、ダウンロードなどは一切不要で、ブラウザ上で使える無料ツールです

物事を相手に分かりやすく説明するために表や図はとても有効な手段と言えます

しかし、実際にはどうやって作成したらいいのか分からない、作成する自信が無いという方も多いはず

diagramsはそんな方にもおすすめの表や図を楽ちんに作成できる便利ツールなのです

表や図を使うと分かりやすさが段違いに上がる

例えば下記の3種類の説明文でどれが一番わかりやすいでしょうか？

断トツで『その3』が分かりやすいと思います

このように、表や図を使うと、文章だけで説明するよりもより分かりやすく伝えることができるようになります

ブログや仕事などで、より相手に分かりやすく伝えたいと思う方は是非『diagram』を利用して、表や図を作ってみましょう

diagramsはブックマークして使おう

『diagrams』はダウンロードやログインなどは一切不要でブラウザ上で使用できるツールです

そのため、インターネットで『diagrams』を検索して出てくる公式ページをブックマークして使うようにしましょう

まずは『diagrams』のページに飛びます

diagramsの公式ページにいく

公式ページを開くと下のようなページにとびます

diagramsの使い方　表を作ろう

ブックマークが完了したら、さっそく表を作っていきます

今回は記事初めに紹介した『その3』の表を作成していきます

まず先ほどの画面の『新しい図を作成する』をクリックします

すると様々な表や図のテンプレートを選べる画面にうつります

一から表や図を作成しなくても、あらかじめ完成しているものに多少の手を加えるだけで簡単に作れることができます

今回は説明も兼ねて『空白の図』を選んでいきます

その名の通り白紙の方眼紙のようなものが現れます

これから作成していく図や表はこの白紙の方眼紙上に表示されます

左のバーから好きな図形をドラッグして挿入していき、思いのままに図や表を作成していけるのですが、今回は一番シンプルな表を作っていきますので

上のバーにある格子状のアイコンを選択していきます

青色の部分が表のマスの数になるので、ドラッグしてマス数を選択していきます

今回は3×3を選択したので、白紙の方眼紙上に3マス×3マスの表が表示されました

表示された表にこれから手を加えていくので、編集しやすいよう大きさを拡大していきます

表の周りに表示されている青丸をドラッグすることで任意のサイズに変更することができます

表の周りの青丸をドラッグすれば表の大きさを変えることができ

表の真ん中をドラッグすれば、表そのものを方眼紙上で自由に移動させることができます

表をドラッグして真ん中に持ってきましょう

BOX(マス内)をクリックすればテキストを入力できるようになるので、テキストを挿入していきましょう

見やすいようにテキストや表にアレンジを加えていく

テキストの挿入が完了したら、何の変哲もない寂しい表にアレンジを加えていきます

右のバーに様々なアレンジを加えることのできるツールが揃っています

まずは『テキスト』を開いていきます

『B』のアイコンをクリックすると太文字に変更でき見やすくなります

フォントの色やサイズもここで変更することができます

次に『スタイル』を選択します

ここでは背景色や表の線の太さなどを決めることができます

表を見やすくするために、色を付けてみました

できた表を保存する

表ができたらパソコンにダウンロードしていきます

1. 左上の『ファイル』を開く
2. 『としてエクスポート』クリックする
3. 保存する形式は『PNG』がオススメですのでクリックしていきます

するとこのような画面が出ますので『書き出す』をクリック

『名前を付けて保存』と出てくるのでパソコン内に保存するので『端末』を選びます

保存が完了すると、左下にバーが出現するので、そのバーをクリックして開きます

先ほど作成した表が表示されるので右上の点が3つ縦に並んだアイコンをクリックして

『名前を付けて保存』をクリックしてください

あとは任意の名前を付けて、保存したいフォルダを選択すれば完了です

作図も直感的に操作できる

diagramsにはテンプレートも多くありますが、一から図形を挿入して作成する場合も、かなり簡単に直感的に作ることができます

再び『空白の図』を選んで、左のバーから四角の図形を挿入するとします

挿入した図形をクリックすると『青い丸』や『青い矢印』が表示されます

矢印をドラッグしてもう一つの図形まで矢印を引っ張ります

図形内はダブルクリックでテキストを入力できるようになります

また、何もないところでダブルクリックすると、上記のようなウィンドウが開き『テキスト』や『図形』を挿入できるようになります

テキストを挿入した場合は表を作成したとき同様、右のバーよりフォントやサイズを変更して、見やすいようにしていきます

上の方にある矢印アイコンは間違ったときに1つ前の操作に戻ることができます

作りたい表や図に近いテンプレートを探そう

一から作図する方法も簡単ですが、テンプレートを活用すると、さらに手間をかけずに作成することができます

diagramsには本当にたくさんのテンプレートが用意されています

こんなカラフルでユニークなものから

こういった複雑なものまで、本当にたくさん揃ってます

例えば、テンプレートの一つである上の図ですが

『テキスト』『図形』『色』『配置』などは自由に変更できるので、かなり応用できます

少し編集するだけで、あっという間に上のような相対図を作ることだってできます

diagramsはより分かりやすい記事にするための必須ツール

今回は図や表を無料で作成できるツール『diagrams』を紹介してきました

これまで色んなブログ記事やサイトなどで表や図を使って説明しているのを見たことはあるけど、どうやって作成しているのかわからなかったという方も多いはず

これからは、テンプレートもたくさんあって、誰にでも簡単に表や図がつくれる『diagrams』を使って、相手が分かりやすい記事や資料を作っていきましょう

ブログで使える便利ツールをさらに知りたいという方は下の記事も是非参考にしてみてください

【ブログ初心者】ブログに使える便利ツール10選 こんにちはまめさるです 今回の記事ではブログの運営を手助けしてくれるオススメの便利ツールを紹介します 基本、無料で使えるも...

ではまた