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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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