BizReach Designer Blog

BIZREACH DESIGNER BLOG

Design Fetch & Pull #4 – デザインにコミットする人のためのまとめ

こんにちは、戦略人事クラウド「HRMOS(ハーモス)」でUIデザイナーを担当している丁です。

「Design Fetch & Pull」は、今回で第4弾となりました。今回もビズリーチのデザイナーの間で話題になった記事をピックアップし、ご紹介します。デザインツールや事例、トレンドなど、様々な情報を集めておりますので、インプットに活用いただけると幸いです。

Web Design Museum
#ウェブデザイン #トレンド

1995年~2005年までのWeb Designのトレンドをまとめたギャラリーサイト。年代別の検索もでき、トレンドの変遷をうかがい知ることができる。

画像引用元: https://www.webdesignmuseum.org/
Coke x Adobe x You
#グラフィック

世界中のアーティストが #cokexadobexyou のハッシュタグでSNSに投稿したグラフィックが自動で蓄積されていく、コカ・コーラとAdobeのコラボサイト。

画像引用元: https://cokexadobexyou.com/
Future UI Design Without Buttons
#UI #未来

技術の進化によってUIから「ボタン」が必要なくなるかもしれない、という話。ボタン以外のインタラクションの事例や未来の可能性が示されている。

画像引用元: https://www.toptal.com/designers/ui/future-ui-design-without-buttons
How to use SVG as a Placeholder, and Other Image Loading Techniques
#プレースホルダー #表示速度改善

Web上で画像をいかに早く読み込ませるかというテーマでプレースホルダーについて述べられている記事。元の画像から輪郭を抽出したりシンプルな図形を組み合わせたりしてSVG画像に変換するなど、軽量かつハイクオリティなプレースホルダーの表示手法を学ぶことができる。

画像引用元: https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c
UI Design in NieR:Automata
#ゲーム #UI #コンセプト

PS4向けゲーム「NieR:Automata」のUIデザインの過程。コントローラーでの操作や色使いなど、ゲームの世界観に合わせるための制約の中で、いかに工夫を凝らしてデザインが行われていったかを知ることができる。

画像引用元: https://www.platinumgames.co.jp/dev-nier-automata/article/183
Pandacolors
#UI #配色

画面のUIに配置された状態の配色を提案してくれるツール。従来の配色ツールと比べ、面積比や隣接する色のバランスなども合わせて提案してくれるため、実際のUIデザインにすぐに取り入れやすい。

画像引用元: http://www.pandacolors.com/
Design better Forms and Log-In access
#EFO

ビジネス機会の損失を防ぐための会員登録・ログインフォームのデザインについての記事。「フォームをデザインするのではなく、エンゲージメントをデザインせよ」という信念のもと、フォームに付随するエラーメッセージやオプションの最適化を行いユーザーの離脱や心理的負担を減少させている。

画像引用元: https://uxplanet.org/design-better-forms-and-log-in-access-517424119363
RememBear
#サービス

サイトやアプリのパスワードを暗号化し、安全に管理することができるサービス。 運営会社のTunnelBearは他にも広告をブロックするBlockBearも運営。会社の紹介ページでは社員がクマのイラストとなっており、遊び心も忘れていない。

画像引用元: https://www.remembear.com/
デザイナーと働くなら知っておきたい4タイプのデザイナー像
#デザイナータイプ #デザインプロセス

デザイナーを4つのタイプに分類。一緒に仕事をするデザイナーがどのタイプなのかを意識することで、その人を理解する手助けとなる。

画像引用元: https://baigie.me/sogitani/2017/11/4type-designers/
THE METHOD CASE
#デザインプロセス

プロダクトデザイン、サービスデザインの事例を見ることができるメディア。それぞれのデザインが生まれた背景やデザインプロセス、その利用シーンについて解説されている。自らデザイン事例を投稿することもできる。

画像引用元: http://www.themethodcase.com/
avataaars - Mix & Match Avatars with a Sketch library
#Sketch #プロフィール画像 #サービス

Sketch.appのオーバーライド機能を利用して、髪型や肌の色、服やアクセサリーなどを組み合わせて多種多様なアバターアイコンが作成できるライブラリ。

画像引用元: https://www.avataaars.com/
Photoshop CC Easter Eggs: Monkey, Banana, Coffee, and Toast
#Photoshop #遊び心

最新版のPhotoshopCCに隠された、遊び心あるイースターエッグ的な機能の紹介。レイヤー名を特定の名前に変更すると、アイコンが猿に変化するといった機能が紹介されている。メインの機能への影響は全くないので、Photoshopを開いた際にはぜひ試して、その遊び心を味わってみては。

画像引用元: https://petapixel.com/2017/11/22/photoshop-cc-easter-eggs-monkey-banana-coffee-toast/
COLORGLYPH
#ピクセルアート

オリジナルのピクセルアートを作成し他のユーザーと交換を行うWebサービス。それぞれの色を使える回数に制限があるが、他のユーザーの作品と交換することで、自分のコレクションを増やしたり、使用できる色を増やしてさらに良いピクセルアートを作成して楽しむことができる。

画像引用元: https://colorglyph.io/
Aqar - Design Case Study
#リデザイン #ケーススタディ

新居を探すために、アパートや別荘を検索するためのサービス「Aqar」を利用し、使いにくい部分のリデザインを提案をしている記事。

画像引用元: https://blog.prototypr.io/aqar-868448fd9a1f
FUTURA - Typeface of our Time - A collaborative documentary
#タイポグラフィ #ドキュメンタリー

1927年に最初のFuturaがリリースして今年、2017年で90年が経った。改めて、Futuraの素晴らしさを伝えるためのドキュメンタリー映像を作成するプロジェクトのWebサイト。一般の人々も映像を作成して投稿し、ドキュメンタリーに参加できるのが特徴的。

画像引用元: http://futura-documentary.org/
Finding UX in the Trash
#UX #考察

「今日のソフトウェア製品の成功の鍵はUXだ。」と語る、アメリカ在住のエンジニアが「ゴミ箱」を例に、UXに大きな影響を与える三つのルールについて言及した記事。

画像引用元: https://f2.svbtle.com/ux-in-the-trash
UberEATS - UX Case Study
#UberEATS #リデザイン #ケーススタディ

神経科学や教育を背景にもつプロダクトデザイナーが書いた、「Uber Eats」アプリにおける「ユーザーの検索体験」と「スケジュール機能」をリデザインした記事。

画像引用元: https://blog.prototypr.io/ubereats-ux-case-study-to-improve-user-search-experience-highlight-an-unused-feature-314d124cc955
3 Best Form Design Practices for your design process
#UX #デザインプロセス

いまや入力フォームを日常的によく目にするが、いつも最高の体験が決まっているわけではない。これから入力フォームをデザインする機会に参考になるであろう、「3つのベストプラクティス」の紹介。

画像引用元: https://uxplanet.org/3-best-form-design-practices-for-your-design-process-383510b31613
What Tesla’s Model 3 UI Reveals About Its Vision for the Future
#Tesla #UI分析

Tesla「モデル3」のダッシュボードとインターフェースを分析した記事。この記事からTeslaが掲げる長期戦略、そして無人運転の将来を推察することができる。

画像引用元: https://blog.figma.com/what-teslas-model-3-ui-reveals-about-its-vision-for-the-future-eb01a75ae979
How we adapted the Booking.com mobile site for the iPhone X notch
#Booking.com #iPhoneX

ホテル予約サイトで有名な「Booking.com」のデザイナーが、どのようにモバイルサイトをiPhone Xに対応させたのかについて解説した記事。

画像引用元: https://booking.design/how-we-adapted-the-booking-com-mobile-site-for-the-iphone-x-notch-e880fa00e989
Swiss in CSS
#ツール

スイスデザインをCSSとJavaScript のアニメーションで表現したサイト。静的なグラフィックとして見たことがあるスイスデザインであっても、新鮮に思える。コードやデザイナーの情報も見ることができる。

画像引用元: https://swissincss.com/
Khroma - The AI color tool for designers
#ツール #配色

50色まで色を選び、その組み合わせをもとにした文字と背景、ポスターの配色や、グラデーション、画像の配色、カラーパレットの組み合わせを見ることができる。biasの値を変更することで意外な組み合わせを試すことができる。。

画像引用元: http://khroma.co/
Beta Family - Find beta testers to your iOS or Android app beta testing
#サービス #デザインプロセス

アプリのβ版を使用し、バグやデザイン、ユーザビリティについて評価してくれるユーザーを見つけることができるサービス。アプリのターゲットになっている人からのフィードバックを得ることでよりエンゲージメントの良いアプリをリリースすることができる。

画像引用元: https://betafamily.com
The Dribbble Timeline - Button Design Over the Years
#トレンド #UI

ボタンはWebデザインにとって大事な役目を担っている。Dribbleの投稿に基づき、2009-2017年のボタンデザインに注目し、デザインのトレンドを振り返る。

画像引用元: https://www.toptal.com/designers/ui/button-design-dribbble-timeline
Improving the Way We Shop Online: A Viget Exploration
#UX #EC

なぜオンラインショッピングより店舗での買い物の方が好まれるのか?オンラインショッピングのUXの問題点を分析し、実際に改善点をどうプロダクトに落とし込んでいるかを解説している。

画像引用元: https://explorations.viget.com/onlineshopping/
Soundiiz - Music Playlist Converter
#音楽

複数の音楽サービスでプレイリストやお気に入りの曲を移動できるサービス。Apple MusicやSpotify、SoundCloudなどの主要音楽メディアはもちろん、YouTubeやDailymotionなどの動画メディアとの接続も可能。

画像引用元: https://soundiiz.com/
Incoming Feedback by Hotjar
#フィードバック

サイトにボタンを設置し、ユーザーからのフィードバックが得られるHotjarの「Incoming Feedback」という新機能の紹介ページ。文字だけではなく、具体的なページの一部を選択してフィードバックができる。

画像引用元: https://www.hotjar.com/incoming-feedback
Case Study: Binned. Brand Identity Design for Cleaning Service.
#ブランディング

ブランドアイデンティティ完成の過程を説明したケーススタディ。ロゴの案だしからグッズ展開の仕方までを見ることができ、参考にできる。

画像引用元: https://medium.com/@tubikstudio/case-study-binned-brand-identity-design-for-cleaning-service-d07672a1d2cd
HomeKitty - Browse HomeKit Accessories
#プロダクトデザイン

iOS端末から遠隔で管理できるHomekit対応の製品を集めたサイト。IoTの進化も伺うことができる。

画像引用元: https://homekitty.world/
Campaign Monitor - Email Marketing for Your Business
#マーケティングツール #効率化

電子メールマーケティングシステム。世界中の200,000社が愛用しており、ドラッグ&ドロップによるシンプルな操作とオペレーションの自動化が要因と考えられる。事前に用意された何百ものアプリケーションと連携もできる。

画像引用元: https://www.campaignmonitor.com/
Nachos - Trello
#UI #ガイドライン

プロジェクト型のタスク管理ツールである「Trello」のデザインガイドライン、デザインシステムが見ることができるサイト。非常に詳細に記されており、あなたがブランドガイドラインを作る際にも参考になるかもしれない。

画像引用元: https://design.trello.com
Interface - Product Design
#インタフェースデザイン #UI

あなたも感じたことがあるかもしれない、UIデザインをコードで再現する際の差をどう解消するかといった問題。その改善提案方法が寄せられている。

画像引用元: https://spectrum.chat/thread/ac4cba39-0582-4b73-9582-9e863ed66346
Bynder - The smart solution for creative file management is here
#ツール #デジタルファイル #効率化

ファイル検索機能と分類機能を使用して、管理しているデジタルファイルをより簡単に見つけることができるサービス。また、プロジェクト管理も可。

画像引用元: https://www.bynder.com/en/orbit/
Status - The Mobile Ethereum Client
#DApp #プラットフォーム

Statusはイーサリアム(Ethereum)の分散型アプリケーション(DApp)に、専門知識のない一般ユーザーでもスマホから簡単にアクセスできるようにする、メッセージングプラットフォーム。イーサリアムの内部通貨である「ETH」を送信することができ、更に他の分散型アプリケーションを見つけることが可能。

画像引用元: https://status.im/
Haiku - design meets production
#アニメーション #Sketch #SVG #HTML #CSS #JS

ユニークなアニメーションとインタラクションを作成できる。特徴は、スケッチからSVGをインポートし、デザインをアニメーションに起こせること。HTML、CSS、JSなどのカスタムコンテンツをインポートしたり、まとめたりすることもでき、初めてアニメーションに取り組む人でも楽しみながらチャレンジできる。

画像引用元: https://www.haiku.ai

以上、第4回Design Fetch & Pullでした!いかがでしたか?それでは、次回のまとめもお楽しみに!