BIZREACH DESIGNER BLOG

こんにちは、戦略人事クラウド「HRMOS(ハーモス)」でUIデザイナー&フロントエンドエンジニアを担当している庄です。

ビズリーチのデザイナーは、面白いと思ったサービスや新しいデザイントレンドなどを、社内で積極的に共有したり、ディスカッションしたりしています。その中の一部をこちらのデザイナーブログでシリーズ化して、今回からご紹介したいと思います。

「Design Fetch & Pull」というこのシリーズのタイトルは、たくさんFetch(取得)し、良いものをPull(更新)してデザインにコミットしたい、そんな意味を込めました。そして、その記念すべき第一回は、特盛りでお送りしますので、どうぞ楽しんでご一読ください。

FullStory
#サービス #解析

まるでユーザーの画面を録画したようなアクセス解析サービス。マウスの細かい動きまで再現され、設定はGoogle Tag Managerと連携するだけ。マウスの動きをみるだけでも、ユーザーが何を考えているのかがなんとなく想像できて仮説立案に役立ちそう。

画像引用元: https://www.fullstory.com/
Top Emoji Trends on Facebook
#トレンド #データビジュアライゼーション

Facebookで最も多く使われている絵文字及び、地域別の集計結果。意外とばらつきがある。

画像引用元: https://www.theverge.com/2017/7/17/15984204/facebooks-most-used-emoji-hearts-tears
macOS Icon Gallery
#アイコン

Macのアプリアイコン集。最近はiOS11のApp Storeアイコン変更が話題になっており、このサイトに載っているアイコンは拡大しないと気づかないようなディテールまでこだわってデザインされているものが多い。

画像引用元: http://macosicongallery.com/
Amazon Alexa Voice Design Guide
#ガイドライン #ノーインターフェイス

Amazonが公開しているボイスデザインのガイドライン。スピーカーデバイスの普及をみこして、知っておきたいところ。

画像引用元: https://developer.amazon.com/designing-for-voice/
Looper 2.0: Duplicate, Rotate and Scale the smart way.
#イラストレーション #ツール

色んなパターンが簡単に作れるSketchプラグイン。設定がかなり自由にできるのででアイディア次第で面白いものが作れそう。

画像引用元: http://www.sureskumar.com/looper/
Design Versioning — It’s true, it’s here, let’s talk and learn more about it.
#ツール

Abstract betaリリースと共に再び議論され始めたデザインファイルのバーション管理。実はAbstract以外にも選択肢が多く、あなたに合ったツールを見つけてみましょう。

画像引用元: https://blog.prototypr.io/design-versioning-its-true-it-s-here-let-s-talk-and-learn-more-about-it-9fef5d7cb517
How we designed Foursquare Swarm 5.0
#リニューアル #デザインプロセス

最近、Swarm 5.0アップデートでアプリ全体の構造大きく変わったのに伴い、今回の変更の意図からデザインプロセスまで一通り記述されている。

画像引用元: https://medium.com/foursquare-direct/how-we-designed-foursquare-swarm-5-0-d774b3164f3f
オカキン
#コピー #インタラクション

コピーライター岡本欣也さんの個人サイト。モーションタイポグラフィなど、文字デザインがぎっしり詰まっていてコピーやデザインワークがより魅力的に表現されている。

画像引用元: http://okakin.jp/
Arrange icons in phyllotaxis pattern with IconFlower Sketch App plugin
#ツール

Sketch上で大量のアイコンを花模様に配置する面白いプラグイン。

画像引用元: https://medium.com/sketch-app-sources/sketch-app-plugin-iconflower-8fc84eef53d6
Don’t Use Split Buttons for Navigation Menus
#UI

サイトのメニューにホバーすると、メガメニューが出て来るケースがほとんどだが、タッチスクリーンの場合はどうデザインすべきなのかについて議論している記事。

画像引用元: https://www.nngroup.com/articles/split-buttons-navigation/
Format – The online portfolio you deserve
#サービス

個性あふれるデザインテンプレートでポートフォリオが作れる、オンラインサービス。

画像引用元: https://www.format.com/
Adobe Just Built The Prettiest UI Ever
#UI

パレットでの調色をメタファーにしたUI。絵の具を混ぜるのと同じように使え、直感的で学習コストが低い。はやくAdobeの製品に実装してほしい。

画像引用元: https://www.fastcodesign.com/90133924/adobe-just-built-the-prettiest-ui-ever
VirtOcean
#仕事効率化

海のホワイトノイズを再生できるサイト。作業に集中したい時におすすめ。

画像引用元: http://virtocean.com/
Be Internet Awesome
#サービス

Googleの子供向けのインターネットの安全について学ぶカリキュラム。ゲームについて、「Smart、Alert、Strong、Kind、Brave」の5つのテーマで勉強できる。大人も改めて知っておきたい。

画像引用元: https://beinternetawesome.withgoogle.com/
Building design process within teams
#デザインプロセス

ZapLabsのデザイナーによるチームデザインプロセスのシェア

画像引用元: https://uxdesign.cc/building-design-process-within-teams-f197786c41be
BotList
#サービス

各プラットフォームのボットのまとめサイト。

画像引用元: https://botlist.co/
iPhone — Why Switch
#CM

シンプルな画面でiPhoneの魅力をプロモーションするシリーズCM。

画像引用元: https://www.youtube.com/playlist?list=PLHFlHpPjgk70W5LbPJOfpec8WJo2fEoB7
WebVR Showroom by Little Workshop
#サービス

WebVR(Three.js)を使ったショールームサイト。

画像引用元: http://showroom.littleworkshop.fr/
オラファー・エリアソン 視覚と知覚
#映画

『21世紀の現代アートに最も影響をおよぼす一人』デンマークの現代美術家オラファー・エリアソンの2年間を密着したドキュメンタリー映画。金沢21世紀美術館『あなたが出会うとき』展の作品の制作過程や、ベルリンのスタジオ内での実験につぐ実験、アイスランドへの撮影旅行など、まさに芸術と共に生きる彼の日々をカメラが追う。

画像引用元: http://www.ficka.jp/olafur/
Made With ARKit
#AR

ARKit使ったアイディア、アプリデモのショーケース。事例を見れば見るほど9月のiOS11のリリースが待ち遠しくなる。

画像引用元: http://www.madewitharkit.com/
Every Second
#データビジュアライゼーション

1秒の中に世界中で何が起きているかをビジュアライズしたサイト。

画像引用元: http://www.everysecond.io/
Designing Adaptive Icons
#Android #アイコン

Android Oに新たに追加されたAdaptive Iconの仕組み&作り方の紹介。

画像引用元: https://medium.com/google-design/designing-adaptive-icons-515af294c783
How Google Designers Adapt Material
#UI #Material Design

Googleのデザイナーが、どうやってマテリアルデザインを各製品に取り込んだのかについての記事。マテリアルデザインを導入する際に参考になりそう。

画像引用元: https://medium.com/google-design/how-google-designers-adapt-material-e2818ad09d7d
Animated Icons
#SVG

オープンソースのアイコンアニメーション。

画像引用元: https://icons8.com/c/animated-icons
コネクテッド ウォッチ「タンブール ホライゾン」
#ウェアラブル

LOUIS VUITTIONのコネクテッドウォッチ。おそらく現在最も高価なAndroid Wear。何よりウェアラブルデバイスとしてのUIが洗練されており、ページ中部の動画は必見。

画像引用元: http://jp.louisvuitton.com/jpn-jp/stories/tambour-horizon
Fontstore: A font subscription service for designers
#サービス

Font版Netflix。

画像引用元: https://www.fontstore.com/
Illustration UI
#インスピレーション

色々なサービスのUIやLPの中で使用した、イラストのまとめサイト。

画像引用元: https://www.illustrationui.com/
Flow
#フォント

プロトタイピング専用フォント。仕組みとしては、普通の文字をワイヤ風の線で表示するだけ。他にBLOKK(http://www.blokkfont.com/)というフォントもある。

画像引用元: http://danross.co/flow/
#170 フォントの話 その1
#フォント

タイプフェイスデザイナーの西塚涼子さんによるフォントデザインの意図や制作の裏話。

画像引用元: https://blogs.adobe.com/creativestation/ccdojo-170-font
Spectrum
#サービス

新しい形のコミュニティ専用サービス。普段使っているSNSサイトよりも、情報ががコミュニティ向けにデザインされている。

画像引用元: https://spectrum.chat/

以上、第一回Design Fetch & Pullでした!気になる内容はありましたか?それでは次回のまとめもお楽しみに!