誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
図解がつくれると伝わり方が変わる！ 初心者のための図解作成ガイド【事例あり】｜鷹野 雅弘
「図解」は資料作成やプレゼンスライドの制作に欠かせません。その一方で「図解を作成してみたいけれど、経験がない」「これから図解をどんどん取り入れていきたい」という方のために、図解作成のノウハウを基本中の基本からまとめてみました。 今回の記事はアドビ社のPR企画「みんなの資料作成」に参加して執筆しています。 1 | 図解の定義まずは「図解」の定義について考えてみましょう。 たとえば、書籍『たのしいインフォグラフィック入門』の中で著者の櫻田 潤さんは次のように定義されています。 図解とは、単純な図形と短い言葉で、物事を説明するグラフィック 非常に明快ですが、人によって定義が異なりますし、また時代によって移り変わっています。 類語から「図解」の定義を探る言葉の定義を考える際に有効なのが〈類語〉を集めてみること。 そこで、日本語／英語に分けて、2つのマンダラート（9マスのメモ）をつくり、「図解」の類
わかりやすいシステム構成図の書き方 - Qiita
わかりにくいシステム構成図とは こんなシステム構成図を書いてないでしょうか？ このシステム構成図のわかりにくい点が３つあります。それは 製品名は書いてあるが「役割」が書いていない データと処理が区別できない データの流れと制御の流れが区別できない の３つです。 わかりやすいシステム構成図 これら３つのわかりにくい点を改善したわかりやすいシステム構成図が↓です ポイントを解説していきます ポイント1. 製品名称ではなく「役割」を書く システム構成図には製品名称ではなくシステムコンポーネントの「役割」を書きます。 役割とは、例えば〇〇データや〇〇処理といったことであり、それを読むだけでシステムの動きを理解できる文字列です。役割をかかずに製品名称のみを書いてしまうと、その製品を知らない人が見たときに理解できません。例えば「Cloud Pub/Sub」という製品はGCPというパブリッククラウドの分
【実例で解説】3STEPで覚える、図解の作り方｜アナグラム株式会社
図解は、情報を整理したりわかりやすく伝えたい時に便利な手段です。ビジネスにおいても、研修やセミナー、プレゼンなどあらゆるシーンで活用されています。 しかしながら、スライドや資料の一部に図解を入れようと思った時、「どうやって描き始めたらいいのかわからない……」と感じたことはありませんか？作ってみてもしっくりこなかったり、なかなか見た目が整わないこともあるのではないでしょうか。 絵心がないと難しいと思われがちな図解ですが、知識を身につけることで誰でも簡単に描けるようになります。 本コンテンツのゴールは、図を描く力＝「図解力」を習得すること。実例を間に挟みながら、図解作成のフローとコツをご紹介します。 「伝えたいこと」を明確にする まず最初に、図解を使って「誰に」「何を」伝えたいのかを明確にする必要があります。図解の役目はテキストのみでは伝わりきらないことを補強・補足したり、ビジュアル化して直感
円グラフのデザイン集 | おしゃれで伝わるグラフの作り方｜かわちゃん
円グラフについて「書くときの注意点」「円グラフの種類」「どういったデータが円グラフに向いているか」「実際の円グラフのデザイン」などを画像を使ってわかりやすくまとめました✨ note公式Twitterでも紹介された人気記事なので、よかったら見てね😊 さくっと書きたい人は「円グラフの種類」から読むことをおすすめします。いろいろな円グラフのデザインがあるので、気に入ったグラフを真似して使ってね。 しっかり考えて書きたい人は、「円グラフを書くときの注意点」を読めば、見やすい円グラフの作り方がわかるとおもいます。 円グラフを書くときの注意点・本当に円グラフでいいの？ 円グラフはわかりにくくなりやすいグラフです。 要素が3つ以上ある場合は、棒グラフを使ってみるのもおすすめです🙆 「円グラフは使うな」という方もいますが、私は使い方さえ間違えなければ円グラフも素晴らしい表現方法だと思うので、簡単にわか
『ビジネスの仕組みがわかる 図解のつくりかた』全文公開｜図解総研
「ビジネスの仕組みがわかる 図解のつくりかた」という本を全文公開します！この本は、2020年4月に出版されたスマホサイズのコンパクトな新書です。『ビジネスモデル2.0図鑑』を出版後、多くの反響をいただき、さまざまな企業でビジネスモデル図解について講演・ワークショップを開催してきたノウハウを凝縮した一冊になっています。 ※当記事の情報を転載、複製、改変等は禁止いたします それではここから全文公開をご覧ください。 第１章：ビジネスモデル図解、基本の「き」はじめに 僕たちが『ビジネスモデル2.0図鑑』を出版したのは２０１８年９月のことです。「Amazon Go」や「Spotify」など、１００の事例のビジネスモデルを同じフォーマットで図解した本は、７万部を超えるベストセラーになりました。その後さまざまな反響を得て、企業から多数の講演・ワークショップの依頼をいただきました。「ビジネスモデルを自分で
令和時代のPython作図ライブラリのデファクトスタンダードPlotlyExpressの基本的な描き方まとめ - Qiita
初めに javascriptベースで手軽に対話的な操作が可能な作図が出来るPlotly Express(公式サイト)というライブラリが少し前に公開されたのを見つけました。 今までの静的な作図とは明らかに異なる次元のポテンシャルを感じたので、備忘録を兼ねて基本的な可視化手法の描き方をまとめました。 参考までに、matplotlib+seabornで同様の図を書いたパターンと比較しています。 「基本的な可視化手法」は、以前書いた「探索的データ解析における正しい可視化手法の選び方と描き方」に準拠しています。 Plotly Expressとは Plotly Expressは2019年の3月に公開されたplotlyの高レベルAPI群です。 インタラクティブで複雑な描画を簡単に書けるのが特徴です。 公式サイト: https://plot.ly/python/plotly-express/ API re
[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
![[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2](https://cdn-ak-scissors.b.st-hatena.com/image/square/38d845daa3306af6511040b4844ec0fb7250d64c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018083111.png)
【超基本！】図解初心者のための「今すぐ使える」コツとテクニック
最近ブロガー界隈で図解が流行ってます。twitterでも「＃図解チャレンジ」というハッシュタグでたくさんの図解が投稿されています。見るだけでも楽しいですよね。 確かに文章だけではなくて、視覚的に訴求できる図解は無いよりもあった方が良いと思います。ブログ以外でもプレゼンの資料などでもこうした図を用いれば効果的です。 図解のクオリティをもっと上げるにはどうしたら良いのか。 図解チャレンジでは初めて図解を作ってみたというような方もたくさんいらっしゃいました。せっかく作るんだから「よりクオリティの高いものを作りたい」と考えるのが人の常。 デザインの仕事を長い事やっていますので、少しはお役に立てるかと思い、この記事では作り方のコツや考え方などをまとめてみたいと思います。 図解って何？という話から制作する際のテクニックまで現状思いつく限りのノウハウを詰め込みました。長いですが最後まで読んでいただけると
レスポンシブ対応！Webサイトにグラフを表示できるJavaScriptライブラリー3つ
2017年11月16日 JavaScript グラフを必要とするWebサイトは限られるかもしれませんが、いざという時に知っておくと便利なグラフ作成用JavaScriptライブラリー。意外とレスポンシブ対応のものが少なかったので、対応しているものを集めてみました。 ↑私が10年以上利用している会計ソフト！ 1. Chart.js 公式サイト｜サンプル｜ドキュメント｜GitHub Chart.jsはグラフ作成用JavaScriptライブラリーの大御所とも呼べるのではないでしょうか？手軽にアニメーションのついた美しいグラフを表示できますよ。棒グラフ、円グラフ、折れ線グラフ、極座標グラフ、バブルチャート等、様々な種類が用意されています。もちろんレスポンシブ対応！どのグラフ描画ライブラリーにするか悩んだら、ひとまずChart.jsを試してみるといいでしょう。 Chart.jsの読み込み まずはファイ
SVGのインフォグラフィックをメディアクエリーでレスポンシブ対応に
SVGを使えば、モバイルでもデスクトップでもきれいなインフォグラフィックが表示できます。でも、単に拡大縮小するだけじゃダメ。ユーザー目線でもっと見やすくするCSSのテクニック、これは押さえておきたいですね。 数週間前、Boxy SVGの無料のベクターエディターを使って、SVGで次のStar Trek vs. Star Warsチャートを作る方法について書きました。 この記事では、SVGのきれいでうまく描けるメリットについても触れました。今回の記事では、そのアイデアについてもう少し深掘りしてみます。デザインとUXのカテゴリーなのは分かっていますが、ときにはより良いデザインのためにコードレベルまでコントロールしなければなりません。これからSVGマークアップの中身をあれこれ見ていくことになりますが、きっと役に立つ何かを得られるでしょう。 SVGを使った実験をするときは、以下の方法がベストです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Charts.css
Flowchart maker