Visional Designer Blog

Design Fetch & Pull #2 – デザインにコミットする人のためのまとめ
こんにちは、戦略人事クラウド「HRMOS(ハーモス)」でUIデザイナー&フロントエンドエンジニアを担当している熊谷です。 前回好評頂いた「Design Fetch & Pull」の第二弾となります! 今月も多くのサービスや記事が、ビズリーチのデザイナーで話題となりました。その中でも特に話題となった選りすぐりのトピックをご紹介します!第二回も、トピックは盛り盛りでお送りしますので、どうぞ楽しんでご一読ください。
リニューアルした SmartHR ロゴの作り方
#ロゴ #デザインプロセス

SmartHRのロゴがリニューアル。ロゴデザインを生み出すまでにのプロセスが紹介されている。

画像引用元: http://tech.smarthr.jp/tech/751
Chain
#ツール

Sketch上で複数のレイヤー配色をまとめて変更したいときに便利なプラグイン。

画像引用元: https://lalomrtnz.github.io/Chain/
Dangerous Design trends 2017
#トレンド #UI

2017年のデザイントレンドについてまとめてある。見映えよりユーザーエクスペリエンスを優先すべきと言及されている。

画像引用元: https://medium.muz.li/dangerous-design-trends-2017-c388ce9e735a
How do you draw a circle? We analyzed 100,000 drawings to show how culture shapes our instincts
#解析 #データビジュアライゼーション

Quick, Draw!の公開データベースを使用して、基本的な形の描画において世界中の人々がどのように描くのかを解析。描画の開始位置や描画時の手の運動方向に文化の差異が見られる。

画像引用元: https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/
Discover DesignBetter.Co
#サービス

世界のデザイン界のリーダーからベストプラクティスと洞察が紹介されている。

画像引用元: https://www.designbetter.co/
History of Icons – a visual brief on icon history by FUTURAMO
#アイコン

デザイナー必見!Mac OSやWindowsなどで使用されているアイコンデザインの歴史を閲覧者の視覚に訴える手法で紹介されている。

画像引用元: https://historyoficons.com/
Motion Design Thinking
#モーションデザイン

モーションデザインとアニメーションの違いに言及。デジタル製品のモーションデザインを私たちがどのように認識して適用するかについて説明されている。

画像引用元: https://blog.prototypr.io/motion-design-thinking-d9c3b23df221
How to Write a Perfect Error Message
#エラーメッセージ

どのサービスでも欠かせないエラーメッセージの正しい処理の仕方を紹介。エラーメッセージはユーザーを誘導し、ユーザーエクスペリエンスを向上させることが書かれている。

画像引用元: https://uxplanet.org/how-to-write-a-perfect-error-message-da1ca65a8f36
Great Design Thinkers: Frank Chimero on The Shape Of Design
#デザイン思考

「『なぜ』と『どのように』は同じく重要」や、「美しいことは機能すること」など、デザインに関わる人が読むべき『The Shape of Design』の著者であるFrank Chimeroが提唱する4つの重要なデザイン思考を紹介。

画像引用元: http://trydesignlab.com/blog/frank-chimero-design-thinkers-shape-of-design/
Really Good UX
#UX

本当にいいUXの理由とスクリーンショットのまとめサイト。早速ストックして行きましょう。

画像引用元: https://www.reallygoodux.io/
Responsive Logos
#レスポンシブ #ロゴ

スケーラブルに変化するロゴがまとまっている。様々な状況に応じて、有名ブランドのロゴはどのように変化するかを見てみましょう。

画像引用元: http://responsivelogos.co.uk/
Offline Only
#オフラインページ

オフラインでもページが表示され閲覧することができる。この技術を使えば、ネット環境がないときも良いユーザー体験を作れるかもしれない。

画像引用元: https://chris.bolin.co/offline/
Contrast for UI
#コントラスト #Macアプリ

ウェブコンテンツおよびアクセシビリティのガイドラインであるWCAGのスコアを基準として、コントラストを確認できるMacアプリケーション。

画像引用元: https://usecontrast.com/
Getting Typography Right in Digital Design
#タイポグラフィ

タイポグラフィを使用する上での10の推奨事項とヒントがまとめられている。

画像引用元: https://medium.springboard.com/the-guide-to-getting-typography-right-in-digital-design-bb61214ff3ad
Hologram
#VR

制作から共有までできる、3Dビジュアルインターフェイスツール。ボタン一つで簡単に作品をシェアをすることができる。

画像引用元: https://hologram.cool/
Web fonts: when you need them, when you don’t
#ウェブフォント

ウェブフォントを本当に使うべきか?という立ち位置から、システムフォントとウェブフォントの違いがまとめられている記事。またウェブフォントの正しい使い方も書いてあり、ウェブフォントの使用を考えている人はきっと参考になるはず。

画像引用元: https://hackernoon.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae
Building for China
#Airbnb

Airbnbが中国で展開するにあたって4つ戦略課題を紹介。現地の文化を元に新しいアイディアを進める。

画像引用元: https://airbnb.design/building-for-china/
Humanscale
#クイックリファレンス

1974年から1981年にかけて発行されていた Humanscale が復刻され、kickstarter で入手可能に。人間の身体の大きさからテキストの可読性に至るまで、人間の様々な数値がまとめられており、プロダクトデザイナーには貴重なツールとなるでしょう。

画像引用元: https://humanscalemanual.com/
Silk – Interactive Generative Art
#イラスト #アート

SilkというiOSアプリのティザーサイト。アプリ内で出来ることをウェブ上で体験することができ、なぞるだけでシルクのような線を描き、幻想的な美しいインタラクティブアートが創れる。

画像引用元: http://weavesilk.com/
The reduced motion query at a glance
#モーションクエリ

モーションに敏感なユーザーに対しても、より安全で快適な体験を提供するためのアプローチについてCSSを用いた実際的な方法にも触れている記事。

Muzzle – silence embarrassing notifications
#スクリーンシェア #Macアプリ

スクリーンシェア中の通知を止める、シンプルで便利なMacアプリケーション。LPにはアプリケーションの魅力と遊び心が溢れている。

画像引用元: https://muzzleapp.com/
Booking.com — UX Analysis and Responsive Redesign
#UX #ユーザーインタビュー

Booking.com  のユーザーである Renee Lin がサイトのUXを再設計していく記事。情報設計から見直し、ユーザーインタビューを実施するデザインプロセスは参考になるはず。

画像引用元: https://uxdesign.cc/booking-com-ux-analysis-and-responsive-redesign-5854d616c0b8
BotEngine.ai
#ChatBot

チャットボットを作成することができるサービス。よくある対応は自動化し、本当に必要なことに集中することでユーザーに合わせた適切な応答を行う時間を作ることができる。また、slackやTwitter、Facebookメッセンジャーとの連携もワンクリックで可能。

画像引用元: https://www.botengine.ai/
Operator Bot
#ChatBot

従来のボットの課題として挙げられる対話の不成立を解消したチャットボットサービス。より複雑な人が行うべきタスクに集中できるよう設計されている。また、ユーザーにチャット対応の評価の入力を促すことでパフォーマンスの計測も可能。

画像引用元: https://www.intercom.com/operator-bot
Four Questions Towards Understanding User Adoption of Your Product
#プロダクト開発 #ヒアリング

プロダクト開発の初期における重要なことは実際のユーザーとの対話であるという視点から、ユーザーにするべき4つの質問とその背景について述べられている記事。

Speed Matters: Designing for mobile performance
#モバイル #パフォーマンス最適化

モバイル端末を通じてユーザーは時間や場所を問わずあらゆるコンテンツやサービスにアクセスが可能となった。そのような背景を踏まえGoogleの調査結果からわかったモバイルにおけるパフォーマンスの最適化に関するティップスを解説しているeBook。

画像引用元: https://www.awwwards.com/brain-food-perceived-performance/
Roadmap
#コミュニティ

他のユーザーとプロジェクトやプロダクトのロードマップをシェアし合うことで、お互いに作り続けていくことを促すコミュニティサービス。

画像引用元: https://rdmap.co/
Beamer
#リリース通知

新機能や最新のリリース、変更等のニュースを素早く簡単にユーザーに通知することができるサービス。

画像引用元: https://www.getbeamer.com/
以上、第二回Design Fetch & Pullでした!気になる内容はありましたか?それでは次回のまとめもお楽しみに!

おすすめ記事