超わかりやすい～グラフの種類と使い分け・効果的なデータ可視化を目指せ！ | FineReport
超わかりやすい～グラフの種類と使い分け・効果的なデータ可視化を目指せ！ 最終更新日:2022-6-13 皆さんはデータ分析、ビジネス統計の際、グラフを作成する経験があるでしょう。グラフ作成の目的に合わせて上手にグラフ種類を使い分けることが大事ですね。グラフの種類が実に多種多様で、目的によってグラフの選び方・使い方もそれぞれです。 分析するデータの種類や内容によって、「どの図を使用すればいいのか」迷ったこともあるかもしれません。 そこで今回は、目的別によく使われる統計チャーチ・グラフ種類を紹介します。統計図表や比較グラフ･チャートの選び方と使い分け方も説明します。キレイで効果的なグラフ作成ポイントもお伝えします。 図表・チャート・グラフの種類 比較グラフの選び方と使い分け方がよく分からない。 エクセルのグラフ種類が多くて、いつどれを使うのかが分からない。 レーダーチャートの用途は何だっけ。ツ
Webサイトのメインビジュアルの構図を集めて分析してみた。｜ameko
初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
S5-Style
宇都宮勝晃、尾花大輔、菅野友香、久野遥子、中村勇吾がウェブデザインに寄せる思いとは？発想の源も いまやウェブサイトは、私たちの暮らしに欠かせない存在になっています。インターネットの広大な海には無数のサイトが存在し、それらは、ウェブデザイナーやフォトグラファー、イラストレーターたちの手によって構築されています。そういったクリエイターたちの活動を俯瞰し、20年にわたってキュレーションしてきた「S5-Style」。ウェブデザイナーの田渕将吾さんが自身の学習の一貫として始めたそのサイトは、「すべてのクリエイティブに光を当てること」をコンセプトにリニューアルオープンしました。田渕さんは、素晴らしいデザインの集約はもちろん、それらをつくりだすデザイナーやクリエイターが交流できる場を生み出し、デザインの未来に貢献したいと語ります。さまざまなかたちでウェブサイトに携わるクリエイターたちは、何をインスピレー
Plutchik氏の「感情の輪」から学ぶエモーショナルデザイン
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 UX関係者の間で、エモーショナルデザインが注目されています。 エモーショナルデザインとは、ユーザーの感情を考慮したデザインを取り入れることによって、期待を超えたユーザー体験を提供しようとする試みです。つまり、エモーショナルデザインを提供するためには、感情に関して理解しなければなりません。そこで、感情を理解するために役立つものがPlutchik氏の「感情の輪」です。 ユーザーに愛されている製品は継続して使用されますが、好かれている程度の製品であれば、ユーザーはより良い製品を求めて心移りしてしまうものです。エモーショナルデザインの基本的な思想は、印象的なユーザー体験を提供することにより、製品に対するユーザーの愛着を生み、継続的に使用したいという思いを引き出そうと
dwango creators' blog（ドワンゴクリエイターズブログ）
Webデザイナーがコンポーネント指向な実装をはじめるなら、まずはRiotから入ってみるといいかもしれない
ボタンデザインで押さえておきたい4つのポイント【プロ直伝】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、株式会社LIGでアートディレクターをしている竹原と申します。 「デザインとは情報設計」、といわれています。例えばボタンでも、アクションやレイアウトに応じてさまざまな設計をおこなっているんです。 今回は、僕が普段ボタンデザインをする際に考えてることをまとめてみました。デザイナーの方にはWebやUIのデザインをする際の考え方の参考に、デザイナー以外の方には、デザイナーって普段こんなことを考えながらデザインしているんだな、と感じていただければ幸いです。 独学でつまずいていませんか？ Webデザインをもっと効率的に学びたい、プロの現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料を
UIデザインにおけるボタン:スタイルの進化とベストプラクティス | POSTD
ボタンはごく普通の、インタラクションデザインの日常的な要素です。ボタンはとてもシンプルなUI要素に見えますが、過去数十年間でそのデザインはかなり変わってきました。しかし今でもボタンのUXデザインは認識しやすさと明確さについて言及されています。 この記事ではボタンデザインの発展を辿りながら、有効なボタンを作るために何が最も重要で最適なのかを見つけて行きたいと思います。 スタイルの発展 3Dボタン 初期からオペレーティング用のボタンは、周りのコンテキストと区別するために、浮き彫りと影に依存していました。この設計の解決策は枠、グラデーション、ドロップシャドウを使用して、要素を背景やコンテンツから目立たせ、クリック可能な要素だと簡単に認識できるようにするといった単純な原則に基づいていました。 ボタンが浮かび上がっているように見えます。 このWindows95のダイアログボックスは、濃い影とハイライ
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
Material Design Box Shadows
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
The Digital Services Playbook — from the U.S. Digital Service
Digital Services Playbook The American people expect to interact with government through digital channels such as websites, email, and mobile applications. By building digital services that meet their needs, we can make the delivery of our policy and programs more effective. Today, too many of our digital services projects do not work well, are delivered late, or are over budget. To increase the s
ハンバーガーにフロッピー…わかりにくいアイコンはUIデザインに必要なのか？
「フロッピーが保存を示すのはわかりにくい」とはしばしば耳にする議論ですが、誰にとってもわかりやすいアイコンをデザインするためにUIデザイナーはどう行動するべきでしょうか？ 世界中で画面の小さいモバイル端末が普及するにつれて、UIのスペースを有効活用するため、頻繁にアイコンが使われるようになっています。 アイコンは、言葉、ボタン、ラベル、リンクに変わり、テーマやアクションだけでなく、アイデアさえも表現してくれるうえ、スペースを生み出し、インターフェイスをシンプルにしています。 アイコンはまた「視覚的なメタファー」を使って、ユーザーにメッセージをシンプルに伝えます。一般的な例は以下です。 ：フロッピーディスクのアイコンは保存 アイコンは、シンプルかつ実用的で日常的に使われています。そして、実際に役に立っています。もし仮に、ユーザーがアイコンに関連性を感じていなかったら、または、まったく理解でき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
19 Handy Credit Card UI/UX For Web Designers - W3tweaks
Bootstrap Expo
Sirius UI - Complete UI for Laravel applications
Behance
デザインのアイデアが豊富！最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ
Websites that build themselves with artificial intelligence - Firedrop
Framer — The web builder for stunning sites.
