インフォグラフィックの製作の裏側 - SmartHR Tech Blog

ユーザーエクスペリエンス (UX) デザインを少しでもかじったことのある人であれば、ヒットするプロダクトやビジネスの成功におけるユーザー体験の重要さが理解できると思う。 「これからの企業に不可欠な三種の神器とは」でも説明されている通り、グローバル規模で成功している企業が提供する商品やサービスの裏には、優れたユーザー体験がその成功の秘密として隠されている。 また「ユーザー体験こそがマーケティング戦略の主流になる ~UX for Marketing~」でも語られている通り、現在話題になっているスタートアップ企業やユニコーン企業も正しいユーザー体験を通じて多くのユーザー獲得につなげている。 UXにおいて何が優れているのか?そもそもUXにおいて「優れた」とか「正しい」とされる要素は何であろうか？一般的にはユーザー側から見ると、利用していて”心地良い”とか”楽しい”などの要素。そして提供側から考える

TOP  >  Design , WebDesign  >  食べ物を中心にまとめられた可愛らしいデザインアイコンまとめ「100 Free Food and Party Icons」 UI面の向上に一役買ってくれるアイコン。視覚的サポートとして非常に役立つ存在であり、特に食べ物だったりアクションを表現する際には効果的で直感的な理解につながります。今回ご紹介する「100 Free Food and Party Icons」は食べ物やパーティーシーンなどを表現したアイコンがを中心にまとめられたアイコンセットです。 カラフルでポップなアイコンが全部で100個種類まとめられています。収録されているアイコンは下記よりご覧下さい。 詳しくは以下 はっきりとした線に、少し色を混ぜた色味のデザインはPOPという印象にとどまらず、スタイリッシュな印象を与えてくれます。食材からキッチン用品など、食に関するアイ

初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。 すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。 また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベースにさらに手を加えてユニークなエフェクトにしたりもできると思います。 紹介しているのは基本的にオーバーレイ要素として下記HTMLのようなdiv要素をひとつ用意し、それに対してCSSでエフェクトを付けたものになります。 複数の疑似要素を組み合わせているものは無理だと思いますが、簡易的なエフェクトによっては例えばbody要素の疑似要素をdiv要素の代用にした形に書き換えれば実装できると思います。

「複雑！すべての機能をとても使いこなせない」 数多くボタンが並んだAV機器のリモコンを見て、過去に思ったことがある人も多いでしょう。 しかし、いざ自分がWebサイトを企画する側になると、複雑なリモコンと同じものをつくってしまいがちです。 誰もが、シンプルで使いやすいWebサイトをつくりたいと思っているはずなのに、なぜ、そのようなことになってしまうのでしょうか。 順に考えていきます。 小さな労力で大きな価値を Webサイトを開発するリソース（お金、時間、人）は、どのような企業でも有限です。 そのため、なんでもかんでも思いついたものを、つくるわけにはいきません。 小さな労力でWebサイトをつくり、大きな価値を生み出す努力が必要です。 そのためには、当然ながらWebサイトの開発スコープを絞ります。 顧客の対象を絞る スコープを絞るには、顧客の対象を絞るのが１番手っ取り早い方法です。 たとえば、顧

サービスデザインで陥りやすい３つの落とし穴｜クックパッド ※2017年6月に開催された「UX Failcon 〜先人たちの偉大な失敗と成功〜」よりレポート記事をお届けします。 271万品のレシピが投稿され、月間6000万人以上に利用されている料理レシピサービス「クックパッド」。同サービスのデザイナーとして、iOS/Androidのアプリの改善や新機能の開発を行っている倉光美和氏からは「サービスデザインでハマりやすい落とし穴」について語られた。 クックパッドにおけるサービスデザインは、“仮説を立てて、開発を実行し、ユーザー検証を行う”というサイクルで行っていく。倉光氏によれば、「仮説・実行・検証」という3つのフェーズごとに、それぞれ落とし穴が存在するという。 ※（レシピ数は2017年7月時点、利用者数は2017年3月時点の数字） 1. 理想の体験がユーザー視点でうまく定義できていない 仮説を

2016年1月20日 Webデザイン テキストを四角で囲ったシンプルな枠。もちろんWebだけでなく、印刷物でも多く使われていますよね。今回は、デザインをする上では欠かせないと言っても過言ではないこの囲み枠にフォーカスしてみようと思います。新米デザイナーさんや、デザイナーじゃないけど資料作成をする機会の多い営業さんの参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ 呼び方は「囲み枠」で正しいのか…謎ですが、テキストを囲んでいるボックスのことです。海外では「パネル」「テキストボックス」等と呼ばれています。 こんな時に使うと◎ 強調する時 「今なら20％オフ！」「期間限定！」等、注目して欲しい要素に利用されます。Webサイト上ではアラートメッセージでよくみかけますね。図はBootstrapのアラート要素。 要素の差別化 補足や注意書きなど、メインのコンテンツと区別して表示したい時

AbemaTVの松本俊介氏が登場。多くのアプリ開発者が一度は直面したことがあるだろう「アプリの文言がなかなか決まらない」問題。AbemaTV開発チームでも同様の問題を抱えていたという。その原因はなんだったのか。どうすれば文言は決められるの？ アプリの文言が決まらない問題｜AbemaTV ※2017年6月に開催された「UX Failcon 〜先人たちの偉大な失敗と成功〜」よりレポート記事をお届けします。 インターネットテレビ局「AbemaTV」。2016年4月の本開局から約1年4ヶ月で2000万ダウンロードに到達しようとしている。 まさに飛ぶ鳥を落とす勢いで成長を続けているAbemaTVだが、同アプリのUI/UXデザイナーを務める松本俊介氏、とある問題を抱えているという。 「アプリ内の文言が全然決まらないんです……。UI/UXの観点で見れば、すごく瑣末なことに思えるかもしれませんが、個人的に

ここ2, 3年、CSSアニメーションの進化がすごいですね！ 次のプロジェクトにさっそく使ってみたくなるようなものから、こんなことも出来るのか！という驚きのテクニックまで、CSSアニメーションのスゴ技・小技を紹介します。 Animated Gameboy in CSSのデモのアニメーションGIF まずは、CSSで作られたゲームボーイ。 上はデモをアニメーションGIFにしたものですが、下は生HTMLと生CSSです。 そのままのアニメーションでも驚きですが、ホバー時にはスケルトンになります。

gridfolio.jsはグリッドレイアウトのポートフォリオサイトを手軽に作成できるJavaScript製のジェネレーターです。gridfolio.jsにコンテナのタイトルやアイキャッチ、リンク先、スタイルやラベルを設定すれば上図のようなレイアウトで実装される、というシンプルなもの。手軽で非依存型と、なかなかよさ気でした。ライセンスはMIT。 gridfolio.js

2017-08-03デザイン言語システムを入れたらコミュニケーションコストがぐっと下がった話〜メドレー TechLunch〜ビールが美味しい季節ですね！ 最近飲みすぎて嫁に叱られて、飲み会自粛中のデザイナー・マエダです。 メドレーでは TechLunch という社内勉強会を実施しているのですが、デザインについて私も発表する機会をいただきましたので、その内容を紹介させていただきます。テーマは「DLS の導入について」です。発表資料は記事の最後をご覧ください。 DLS（デザイン言語システム）とはDLS とは DesignLanguageSystem の略で、すごい単純にいえばデザインガイドラインみたいにUI に一貫性をもたせるため、配色やレイアウト、タイポグラフィやマージンなどのルールを策定するものです。 私が主に担当しているオンライン診療アプリ「CLINICS」は、iOS、Android、W

読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方