検索 UI まとめてみた｜あき - 良いもの作って正しく届ける
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
初代iPhone開発秘話:Appleは"ダサい"プロトタイプをどうやって世界を変える製品に仕上げたか
Appleが10年前の2007年6月29日に販売開始したiPhoneほど世界を変えたものはあるでしょうか？なかなかすぐには思い浮かばないと思います。しかしこの究極のスマートフォンは、いくつかのCAD設計とプロトタイプの変遷を経て誕生したものです。 LEANDER KAHNEY氏が、その著書Jony Ive: The Genius Behind Apple’s Greatest Productsより、Cult of Macにその一部を披露しているので、その画像に注目しつつ要約してご紹介します。 初代iPhone-iPhone 2Gの最終に近いプロトタイプ マルチタッチデバイスに特化したデザイン 上がジョニー・アイブが初めて描いたiPhoneのデザインです。真ん中と右はほぼその後のiPhone初代機そのもののデザインとなっています。一番左だけ、ちょっと違いますね。 当時、マルチタッチインターフ
読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note
noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか？デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも
Designing for the Nintendo Switch
Nintendo released its latest console, the Switch, to critical praise this past March. I bought mine with “The Legend of Zelda: Breath of the Wild” on the release date. While I love being able to hook the Nintendo Switch up to my TV, I’ve found myself using it primarily in handheld mode. It has quickly become my favorite portable device, displacing the PlayStation VITA atop my list. However, there
【モバイル×アニメーション】デザイナー要確認！モバイルアプリにおけるアニメーション使用の基本的考え方！！
iPhoneやモバイルアプリの登場以来、「アニメーション」はすっかりインターフェイス・デザインの重要な構成要素になりました。 それは、アニメーションが、作品に「時間」というエレメントを付加することによって、人間の現実的な感覚とソフトウェアとの間にどうしても存在する大きな「ギャップ」に、「橋」をかけてくれるからです。 ユーザを喜ばせるようなエクスペリエンスのためにモーションが欠かせないのも、ここに理由があります。 この記事では、アプリに付け加えるだけでUXを向上させてくれるアニメーション使用のコツと例を5点まとめてみました。 １．ローディングの時間も視覚的に楽しめるようにする 開いたときにユーザが楽しめるようなアニメーション付きのアプリはたくさんありますが、中には下の例のようにユーザの視線まで上手に集める高度なものもあります。 ２．視覚に訴えかけるコンテンツでユーザを引き付ける 初めてアプリ
Editorial illustrations
Cover illustration for "New Scientist" magazine about people memory.
未来のアートを予感させる｢モーションデザイン｣の最前線『Motion Plus Design』
2015年にパリで開催されて以来、先進的なモーションデザイン・クリエイターたちが集まり支持されてきたイベント『Motion Plus Design』。その日本初開催が4月に決定。さまざまな領域で活動するモーションデザインアーティストたちが集結する『MOTION PLUS DESIGN'S MEETUP TOKYO 2017』が4月に東京・恵比寿で行われる。 『Motion Plus Design 2016』の様子／Motion Plus Design Japanese Version - "What is Motion Design ?" from Motion Plus Design on Vimeo. ウェブ、モバイル、広告、CGアート、ミュージックビデオ（MV）で駆使される｢モーションデザイン｣。少しづつだが確実に浸透しつつあるモーションデザインと、新しい表現方法に対する考え方。フラ
インタラクションの参考にしたいUIアニメーション５選
MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト５選 1. カ
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
【日本語フリーフォント】本当は教えたくない！デザイナーが仕事で使ってる12選【商用可】 | ベーコンさんの世界ブログ
１．うずらフォント（手書きフォント系） ▼ぜんぶうずらフォントです。 手書きフリー日本語フォントはたくさんありますが、最近はこれがお気に入りです。 ゆるい感じが可愛らしい。 ちょうど下手すぎず、上手すぎずがちょうどいいんですよね！ このフォントの使いみち ダウンロードはこちらから ２．Noto Sans Japanese /a 源ノ角ゴシック（ゴシック太さ多数） GoogleとAdobeからこのフォントが発表された時、デザイナーは沸きました。 しかし思いません？ winならメイリオとかmacヒラギノとか最初から入っているフォントでいいよ！ ぼくも、そう思います！ あーでも、しかし１つだけこのフォントが便利な点があるんです。 それは 文字の太さの種類がある これが大事なんです。デザインを作る時に便利！ OSに最初に入ってるフォントは、太さの種類が２、３種類だと思います。 ボールドボタンで太く
DTAIL - Leading digital agency for strategy, design, and growth.
Welcome to Dtail Studio We help brands & SaaS products evolve
アニメ版「シドニアの騎士」プライマリーデザイン
少々前の話になりますが、ポリゴン・ピクチュアズさまからお声掛けいただき、2014～2015年にかけてテレビ放送されたアニメ「シドニアの騎士」（原作: 弐瓶勉さん）のプライマリーデザインを弊社 三階ラボ で担当させていただきました。 プライマリーデザインの具体的な内容は以下の２つです。 モニターグラフィックメインビジュアルの開発 シドニアフォントの作成 ともに、原作の漫画にはすでにオリジナルのデザインが存在していますが、しっかりと時間をかけて目視できる静止画とは違い、アニメのような動画では、様々な要素が一瞬しか表示されないことが多くなります。 今回は、原作の素敵なテイストを維持しつつ、アニメ向けにデザインを再構築することが主な目標でした。 モニターグラフィックメインビジュアルの開発 原作の漫画から、モニター内に表示される主なグラフィックを抽出し、機能性や視認性、汎用性を高める再デザインを行い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Geometric Animation Inspiration— May 2017
Email Application Design Inspiration — December 2016
https://webdesignshare.com/2016/free-icons-vectors/
Microinteractions: The Secret of Great App Design
TechCrunch | Startup and Technology News
Material Design
CreativeApplications.Net
