誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
セグメントで簡単レポート設定！Googleアナリティクスをグラフで比較 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのエリカです。 Googleアナリティクスの『水色の折れ線グラフ』を、二重三重に重ねて表示できるのをご存じでしょうか？ こちらは「セグメント」というデータを抽出する機能で、設定するとグラフや数値を並べて表示することができます。 グラフを使うことで視覚的に変化が分かりやすくなり、分析にも有利ですし、説得力のあるレポートも作れるようになります。 設定も簡単で、5分もかからないと思うので、ぜひこの機会に触ってみてください！ セグメントの使い方 まずデバイス毎のアクセス推移を表示してみましょう。 「すべてのユーザー」をクリックするとセグメントの一覧が開きます。 「タブレットとPCのトラフィック」「モバイルトラフィック」にチェックを入れ、「すべてのユーザー」のチェックは外します。 2つのセグメントが選択され、グラフや集計数値が2つずつ表示されるようになりました。 セグメントを
Excelで離れた列をグラフにする方法
Excelで離れた列をグラフにする方法を紹介します。 １．はじめに Excelに次のようなデータを設定しています。 この表の棒グラフを作るには、「挿入」→「縦棒」→「2D」をクリック。 これだけで棒グラフが出来上がります。 ところが、次のようにB列とD列という離れた列でグラフを作りたい場合、方法が分かりません。 ということで、離れた列をグラフにする方法を紹介します。 ２．離れた列をグラフにする 離れた列をグラフにするには、まずグラフにしたいB列をマウスでドラッグして選択します。 続いてCtrlキーを押しながらマウスでD列をドラッグします。これでB列とD列が選択された状態になります。 この状態で、１項と同様の手順で「挿入」→「縦棒」→「2D」をクリック。 これで列の離れたデータでグラフが作成されました。 ３．グラフを作ってからデータを変更する グラフを作ってからデータを変更したい場合もあると
Excelで値をパーセントに変換してグラフにする方法
Excelで値をパーセントに変換してグラフにする方法を紹介します。 １．はじめに 世の中にタブレット端末が増えてきたので、当ブログにアクセスしてくれているデバイス別ユーザー数の年毎の比率を調べてみました。 デバイス別ユーザー数は、Google Analyticsの「ユーザー」→「モバイル」→「サマリー」の desktop（デスクトップ） mobile（モバイル） tablet（タブレット） からそれぞれ取得することができます。 で、2008年～2015年2月までのデータは下記のとおりです。 が、これをグラフにしても年毎のデバイス別ユーザー数が表示されるだけで、比率を確認することはできません。 ということで、値をパーセントに変換してグラフにする方法（というか手順）を紹介します。 よりエレガントな方法があればどこかでつぶやいてください。 ２．値をパーセントに変換してグラフにする 値をパーセント
チャートやグラフを飛躍的に分かりやすくするシンプルなポイント10個
情報を可視化すると人に伝わりやすく、また強く印象に残すことも可能です。そのためプレゼンテーションにおけるチャートやグラフは非常に重要になってきますが、一歩間違えば情報を分かりにくく、最悪の場合、間違った理解を見ている人に与えてしまいます。そこで、HubSpotがチャートやグラフのデザインなどプレゼン資料を飛躍的に見やすくするポイント10個を公開しています。 Why Most People's Charts & Graphs Look Like Crap http://blog.hubspot.com/marketing/data-visualization-mistakes Why Most People's Charts and Graphs Look Like Crap http://visage.co/peoples-charts-graphs-look-like-crap/ ◆01
Excelでセルの中にグラフを表示する方法のまとめ
Excelでセルの中にグラフを表示する方法のまとめです。 ここでは次の2種類のグラフ表示について説明します。 セルの数字に対応するグラフを同じセルに表示 複数のセルの対応するグラフを別のセルに表示 １．セルの数字に対応するグラフを同じセルに表示 B2セル～B11セルに設定された数値をグラフにします。 まず、B2セル～B11セルを選択した状態にします。 「ホーム」タブをクリック。 「条件付き書式」→「データバー」→「塗りつぶし（グラデーション）」から好きな色を選択。 これでセルにグラフが表示されました。 条件付き書式には他にもさまざまな表示方法があります。たとえば「条件付き書式」→「アイコンセット」→「方向」から好きなパターンを選択。 これでセルに矢印が表示されます。 グラフを取り消すには、「条件付き書式」→「ルールのクリア」から「選択したセルからルールをクリア」または「シート全体からルール
How to Create an Interactive Graph using CSS3 & jQuery
Step 1 – HTML Markup To start we will create our html markup for the graph. We will create a <div> with the class “graph-wrapper”. Inside of this <div> we will add two more <div>. The first one will have the “graph-info” class, this div will contain the graph legend and the buttons that will allow us to switch between graphs. The second div will contain the two graphics (lines and bars). <div id="
humble software development - finance
HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. It is similar to the Flash tool on http://finance.google.com/. The tool itself is written entirely in JavaScript, using the Prototype and Flotr libraries. It can be used to display any two 2-D data sets of real numerical data which share an axis. Demo: This demo displays historical stock
Animated wicked CSS3 3d bar chart
Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I’m proud to release the animated wicked CSS3 3d bar chart. The principle is the same as the previous version: Create a beautiful 3d bar chart. But this time, we don’t create a "sta
[CSS]グラフィカルで美しい3Dの棒グラフを実装するスタイルシート
画像を使用しないで、3Dの棒グラフをスタイルシートで実装するチュートリアルをmarco folioから紹介します。
Canvasを使用してインタラクティブで高機能なグラフを描くライブラリ -RGraph
棒グラフ 機能：ツールチップ、コンテクストメニュー、ズーム スタイルのバリエーションも豊富で、デモページには多くのグラフが掲載されています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA