データ分析&データ視覚化のコンサルティングをしております、永田ゆかりと申します。 これまで2000人以上の方にデータ分析や活用の研修・トレーニング講師、企業への分析コンサルティングをさせていただいており、仕事をさせていただく中で必要な本を読み続けているうちに、気がついたらデータ分析領域の本を200冊以上読んでいました。 中でもデータビジュアライゼーション・視覚化の領域に関しては私自身の得意領域ということもあり、数多く読み込んでいます。 本記事では数多くのクライアントの方々との問題解決に役立った知識・ノウハウが書かれている良書をご紹介させていただきますので、是非最後までご覧ください。 データ可視化そのものについて知りたいたは、こちらの記事からどうぞ。 データ可視化とは?その重要性や手法、よくある課題と解決策を解説 データ分析における視覚化(ビジュアライゼーション)系のおすすめの本17選1 S
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上(2019年12月現在)ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
ReactJS の案件に携わってから1年近く経ったので 今までに出会ったライブラリの中で便利だったものを自作の DEMO とコード付きで紹介していきます。 CSSは頑張りません。ださくてもしょうがない。 infoこの記事のデモとコードは2021/09のブログ引っ越しに合わせて codesandbox に変更しました。 それに合わせて一部のコードを書き換えたり、他のサンプルに(forkして)置き換えたりしてます。バージョンは 修正時点の最新だったり、サンプルが使っているバージョンだったりでバラバラ なのであくまで参考程度に御覧ください。詳しいオプションは公式ドキュメントを参照してください。間違っていたり、もっといいやり方がある場合は優しめに教えてください。いろいろ動作検証しながらやったので不要なコードが多少残っているかもしれませんが気にしないでください。react-notification-
アーキテクチャ(Architecture)とは一般には建築や建築学を指しますが、コンピューターの世界ではあるシステムの概念や設計思想を「アーキテクチャ」という言葉で分類することがあります。中でもソフトウェアの領域では実装モデルの設計指針や分類、コンポーネントの相互関係、ソフトウェアの構築方法などを定めた一連の構造をそう呼ぶことがあります。 アーキテクト(Architect)とは建築家や(建築)設計士、技術者といった職種を指しますが、コンピューターの世界では「アーキテクト(仕組士): システムのアーキテクチャを設計する責任がある、人、チーム、あるいは組織」(IEEE 1471)と規定されます。要するに、システムの構造設計に関して責任を持つ役割です。「構造設計の指針を示し、実行する人」と言った方がわかりやすいでしょうか。 このような、構造設計やそれを担う設計士の役割は、当然のようにUIデザイン
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか? 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか? タスクを素早く完了することで、より満足のいくエ
概要 LazyDockerは、DockerおよびDocker ComposeをTUIで操作できるツールです。 docker、docker-composeコンテナ環境の状態の表示、ログの表示、コンテナまたはサービスの再起動/削除/再構築などが1つのウインドゥで実行できます。 Githubでソースは公開されておりGoで実装されているようです。 jesseduffield/lazydocker 公開されたばかりですがスター数の伸びがとてもすごいです(7/5現在で7000ほど) 実行環境 macOS Mojave $ docker version Client: Docker Engine - Community Version: 18.09.2 API version: 1.39 Go version: go1.10.8 Git commit: 6247962 Built: Sun Feb 10
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 1、進めそう感 2、戻れそう感 3、進めそう&戻れそう感 4、開きそう感(ドロップダウン) 5、開きそう感(アコーディオン) 6、開きそう感(モーダル1) 7、開きそう感(モーダル2) 8、カレンダーが開きそう感 9、メニューが開きそう感(ハンバーガー) 10、検索できそう感 11、入力できそう感 12、検索できそう + 入力できそう感 13、パスワード入力できそう感 14、パスワード感(強め) 15、間違えた感(エラー) 16、合ってる感(OK) 17、電話かかる感
「デザインスプリント」と呼ばれるプログラムを試したことはありますか? 具体的なプロセスやアイデアの生み出し方、注意点などを初めて実践する人向けにまとめました。疑問や不安を解消し、チームでデザインスプリントを導入するきっかけとして、ぜひご覧ください! そもそもデザインスプリントとは? デザインスプリントは、GV(旧 Google Ventures)によって開発されたもので、高速でプロセスを回し、アイデアの価値を検証するプログラムです。 企業がデザインスプリントを導入する理由としては、プロジェクトの早い段階で、提供するサービスの価値を確認できるという点があります。また、このプログラムは企業の規模感に合わせて柔軟に対応させ、活用することができます。 プログラムは基本的に5日間で構成されており、フェーズごとにサービス開発のための様々な手法を使います。 デザインスプリントのプロセス 【Day 1:
I Wanted To Type a Number Posted by Zach Leatherman 07/13/2016 Forms are the bedrock upon which users interact with the web. For a long time, forms controls were stagnant and reliable. HTML5 brought us updates, specifying new <input> types linked with new interface controls, progressively enhancing from the vanilla text inputs of yesteryear. The battle tested truth of new web features and standard
この記事ではブラウザの仕組みを図解を用いてわかりやすくご説明します。 最近のブラウザは優秀なので、ブラウザの仕組みを理解していなくても、パフォーマンスの問題が発生することは少ないかもしれません。 しかし、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合、パフォーマンスの問題はとてもシビアです。 ブラウザの仕組みを知ることで、ブラウザのパフォーマンスを最大限に引き出す実装を行うことができます。 画面がなめらかに表示されないのはなぜ?スクロールをしていてカクつく。またはアニメーションがカクカクしている時というのはブラウザがどういう状態なのでしょうか? まずは、この状態を定量的に説明するためFPS(フレームレート)から説明します。 FPSとはFrame Per Secondの略で1秒ごとの画面(フレーム)の切り替わる回数を表しています。 ブラウザでサイトを見た際には最高で6
ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に!便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの3Dモックアップを数秒で作
There are so many ways to visualise data – how do we know which one to pick? Click on the coloured categories below to decide which data relationship is most important in your story, then look at the different types of chart within the category to form some initial ideas about what might work best. This list is not meant to be exhaustive, nor a wizard, but is a useful starting point for making inf
この記事は、とある高齢者がメインターゲットのアプリケーションを制作するに当たって、私がデザインを行うために留意していたアクセシビリティデザインに関するポイントや得た学びをまとめています。 これからアプリケーションデザインを行う際に、アクセシビリティについて参考にしていただければ嬉しいです。 今回アクセシビリティデザインをするために行ったことは以下です。 高齢者がスマホを使いこなせるのかを検証する 色のコントラスト比と余白の確保 色覚異常を考慮したカラー選定 数字を考慮したフォント選定 まずは順を追ってそれぞれのフェーズで何をしたのかについて説明したいと思います。 高齢者がスマホを使いこなせるのかを検証する 今回は高齢者向けのアプリだったため、最初に高齢者がスマートフォンを正確に使えるかを検証する必要がありました。そのため、デザイン性を高めることをあえて我慢しました。なぜならフェーズとして「
平日の早朝に道玄坂を下るアベックに破滅と滅亡を。どうも、@neer_chanです。 皆さん、仮想スクロールしてますか? 概要 仮想スクロールとは 仮想スクロールの仕組み 仮想スクロールの魅力 前提として、縦スクロールの話をします。 仮想スクロールとは GIFの通り、見えている範囲(+α)のみレンダリングするもの。 要は、ロケット鉛筆みたいなものです。(絶対に違う) 仮想スクロールの仕組み イカれたメンバーを紹介するぜ! 見える範囲を指定するためのDiv スクロールする高さを指定するDiv ListItemを置くUnorderdList いつかの、いくつかのきみとListItem 以上の4つが登場するメンバーだ! ちなみに、通常のスクロールの場合は2の役割を3が行う感じになります。 また、以下の要素をあらかじめ指定する必要があります。 見える範囲に表示する4のListItemの個数(あるいは
yum-yum COLOR is a web service that can intuitively select color combinations.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く