UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
サンプル例でわかる！注目したい2020年のWebデザイントレンド8個まとめ
2020年のメインとなるトレンドのひとつが「ダークモード（英: Dark Mode）」です。主にUIデザインに特化しており、ユーザーがダークテーマへの切り替えできるオプションが重要になるでしょう。暗い背景は、デザイン要素を際立たせ、コントラスト比もよりくっきりとなりますが、目の疲れを軽減することで視覚的な人間工学の改善を期待できます。 DarkDesign Studio ダークモードのウェブデザインはモダンな見た目だけでなく、目にやさしく、配色やデザイン要素をポップに表現できます。 ビジュアルに優れたウェブデザインのトレンドには、実用性からはじまったものがある場合があり、実際にダークモードは、OLEDスクリーンに適しています（電力を節約し、スクリーン寿命を延ばす）。また、ウェブサイトで使われている配色の視認性を改善できる点もポイント。 偶然にも、ダークモードデザインは、暗闇に輝くネオンや未
覚えておきたいUIデザインの基本！【８つの視覚誘導編】 | Webマーケティングメディア「Grab」
良いデザインを作るには、見た目だけでなく使いやすさ・見易さを考慮しないといけないですよね。 その中で、最近よく耳にする「UIデザイン」という言葉をご存知でしょうか？ 今回は、ユーザーが自然と目を向けるような、視覚誘導を利用した「UIデザイン」についてご紹介したいと思います。 そもそも、UIデザインとは？UI（ユーアイ）とはUser Interface（ユーザー・インターフェイス）の略です。インターフェイスは英語では界面や接触面という意味なので、コンピュータ用語ではUSBやHDMIなど、機器と機器をつなぐ仕組みを指す言葉として使われています。 UIデザインで言う「つなぐ」は、USBのような物理的な接続だけはなく、もっと抽象的、概念的な意味合いを持っています。 機器（PC・スマホといった製品やシステム、サービス全般）とそれを使うユーザーとの”つながり”を指します。 簡単にいえば「ユーザーがwe
ユーザー体験の質を左右するナビゲーションのパターン６選
アプリはアイデアから生まれ、目的によって具体化されます。私たち起業家やデザイナー、開発者の関心は、最初から最後までスムーズな行程に沿ってユーザーを誘導して、有益な体験を与えることにあります。 あるリサーチによれば、65％近くのユーザーは、アプリ体験が好ましくないブランドを否定的に感じています。したがって決定的に重要なのは、ユーザーが労力を使わずに自分たちの課題の解決策にたどり着けるよう、インターフェイスのデザインをシンプルにすることです。 Gerry McGovern氏は『Usability: Navigation is More Important than Search』という記事の中で、機械に詳しい70％のユーザーはリンクをクリックすることからタスクを始めている一方で、残りの30％は検索から始めていることを明らかにしました。 これを踏まえると、ナビゲーションがユーザー体験でとても重要
スマホ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネント -Cuberto
スマホアプリ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネントを紹介します。タップやスワイプなど、ユーザーの操作に反応するアニメーションは、見ているだけでも楽しめます。 GitHub Open Source Collection ここで紹介するUIコンポーネントは、ロンドンの制作会社「Cuberto」によるもので、MITライセンスで商用のプロジェクトでも無料で利用できます。 Bubble Icon Tab Bar -GitHub 現在位置のアイコンをバブル状にするタブ。 Balloon Picker -GitHub 風船がふわふわ浮かびながら追従するカスタムピッカー。 Fluid Card -GitHub タップすると、アニメーションで拡張するカード。 Liquid Swipe -GitHub 流体のアニメーションでスワイプ。 Rubber Range Pic
モバイルアプリに最適なボタンサイズと間隔とは
UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？ きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な
アプリUIデザインで使ってるツールまとめ。｜あゆみ
2月から、実践型デザイン学習サービス『Cocoda!』で、毎日1つ出されるお題に沿ってアプリUIなどのデザインをするDaily Cocoda!にチャレンジしています。（今日までで25日連続ー！） Webデザインも昨年からやっているレベルなのですが、UIデザインはまたそれとは結構別物で、初心者ながら見よう見まねで頑張っています。 さてさて、私の練習作を見てくださった方からツイッターで「スマホの枠とかアイコンはどこで手に入れられるの？」という質問をもらったりしたので、今回は私がよくお世話になっているツールやサイトをまとめようと思います。 最後のデザインツール以外は全て無料です。 追記：この記事を書いた後にデザイナーになって1年半が経ち、アップデート版のような記事を書きました↓ 主に海外のサイトで無料で配布されているので、英語で 「"mockup" + "iphone" + "(sketchやp
最近のUXデザインにおける、スマホアプリのインターフェイスに使用されているアイデアのまとめ
ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン
どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS
アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 ユニバーサル スライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。 ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。 互換性 React、VueJS、Angu
UIパーツごとに閲覧可能なスマホアプリのデザインギャラリーまとめ
2018年5月11日 スマートフォン スマートフォンアプリ用のデザインでちょっと調べ物をしたくてギャラリーサイトを巡っていたのですが、以前見ていたサイトが軒並み404で表示されなかったり、更新がとまっていてしょんぼり気分…。そこで最新のアプリが掲載されていて、且つ見やすくパーツごとに閲覧できるサイトを集めてみました。 ↑私が10年以上利用している会計ソフト！ UI Movement アプリを触った時の動きを動画で掲載しているUI Movement。見た目だけではない使い心地も伝わってきます。メール登録すると週に一度更新のお知らせも届けてくれるようです。 Pttrns PttrnsではiOSアプリだけでなく、Android、Apple Watch用のアプリも紹介しています。有料登録するとより多くのアーカイブを閲覧できたり、検索ができるようになります。 MobileMozaic MobileM
ブックマークしておきたい！WebサイトやスマホアプリのUIデザインのアイデアに困った時に、参考になるサイトのまとめ
WebサイトやスマホアプリなどのUIデザインのアイデアに困った時に、参考になる、そして勉強になるサイトを紹介します。 ランディングページ・プロダクトページのレイアウト、UIのさまざまなコンポーネント、アニメーションが気持ちいいインタラクションなど、ブックマークして定期的にチェックしておきたいサイトばかりです。 Mobbin -Latest Mobile Design Patterns デザイン面に優れた最新のスマホ向けデザインのパターンがコレクションされています。100以上のiOSアプリの主要な画面遷移と5,000以上のパターンが厳選されており、自身のライブラリを作成（要登録、無料）することもできます。
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
UIデザインパターンの参考になるサイト10選
同じようなデザインの手直しに人生の貴重な時間を費やしたいと思う人はいません。過去に別のアプリなどで解決されている問題があるのなら、その問題の解決策がテンプレートとして既に存在するはずです。それこそが、誰にでも使えるデザインパターンです。 ここでは、Web上でデザインパターンを見つけるのに最適なサイトをリストアップしました。執筆時現在、これらのリソースはすべて無料ですが、一部はプレミアム版などを支払うように求められる場合があります。なお、この記事は、これらのサイトのアフィリエイトではないことを最初に断っておきます。 UI Patterns UI Patternsでは、好みのパターンを簡単に検索でき、使えると思ったパターンをグループ化することができます。また、自分のデザインでのパターン活用に役立つ、UIデザインパターンに関する多くの興味深い記事があります。 WELIE Interaction
モバイルサイトのサブナビゲーション
モバイルサイトのサブナビゲーションの主な実装方法としては、アコーディオンやシーケンシャルメニュー、セクションメニュー、カテゴリーランディングページが挙げられる。このうちのどれがそのサイトに最適なのかは、IAにある下位カテゴリーの数やサイトでのユーザーの移動パターンによって決定される。 Mobile Subnavigation by Raluca Budiu on July 16, 2017 日本語版2017年11月16日公開 情報アーキテクチャがかなり複雑で、カテゴリーの階層が多数あるWebサイトは多い。下位のカテゴリーは、デスクトップなら、ドロップダウンメニューやメガメニューの中にあることが多いが、こうしたサブカテゴリーをモバイルデバイスで表示するのは必ずしも容易ではない。 Cisco.com：デスクトップサイトでは、水平ナビゲーションバーを利用して、メインカテゴリーを収めている。マウス
ホテルのWebサイトをデザインするためのベストプラクティス
ユーザー体験があらゆるWebサイトのデザインにとって不可欠であることに、疑いの余地はありません。 しかし、ユーザー体験が何よりも重要な業界があるとすれば、それはホテルを始めとしたサービス業です。 ホスピタリティとは要するに、顧客の期待に応え、顧客の期待を超えることであり、最初のタッチポイントから最後にいたるまで、顧客に優れた体験を提供し続けることです。 また、私たちが生きるデジタル時代において、ホテルのWebサイトは、ホテルが最初に提供する顧客体験の場であることが多いです。そのため、少なくともどのホテルも、直接予約の画面には力を注いでいます。ホテルのオーナーであれば、Webサイトでのユーザー体験はホテルでの顧客体験と同等に優れたものにしたいでしょう。 そのためには、まず初めに旅行者がWebサイトを訪れる理由を理解する必要があります。 旅行者の主な目的は何でしょうか？ この問いに対する答えが
レスポンシブ対応、縦長ページで見かけるさまざまなUIコンポーネントを備えたHTML/CSSのテンプレート -Shards
最新のBootstrap 4をベースに、ランディングページやスマホアプリのプロモーションページなど、縦長ページでよく見かけるさまざまなUIコンポーネントを備えたHTML/CSSテンプレートで構成された無料のUIキットを紹介します。 もちろんレスポンシブ対応で、非常に軽量に構築されているので、快適に利用できます。 Shards Shards -GitHub ShardsはMITライセンス、個人でも商用のプロジェクトでも無料で利用できます。 Shardsのデモ ShardsのUIコンポーネント Shardsの使い方 Shardsのデモ ダウンロードファイルには、すぐに利用できるデモページも含まれています。 まずは、プロダクト・サービス向けの縦長ランディングページ。
年々進化しているボタンをデザインするポイントを解説、デザイナーの追求に終わりの文字はない
Webデザインにおいて、ボタンの存在は欠かせません。検索する時、サイトにログインする時、ソーシャルでシェアする時、ショッピングカートに入れる時、たくさんのボタンが使用されています。 これらボタンのデザインはWeb業界と共に進化し続け、気がついたら数年前のデザインだったということもあるでしょう。 年々進化しているボタンがどのように変わってきたか、Dribbbleをベースにしてデザインするポイントを紹介します。 Button Design Over the Years 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2009年のボタンのデザイン 2010年のボタンのデザイン 2011年のボタンのデザイン 2012年のボタンのデザイン 2013年のボタンのデザイン 2014年のボタンのデザイン 2015年のボタンのデザイン 2016年
iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
ウェブサイト作成に困ったら使いたい！Photoshop無料テンプレート素材まとめ 2017年版
ウェブデザインを作成したいけど、デザインアイデアが浮かばない。そんな悩みを抱えたデザイナーは少なくはありません。世界中で公開された、ウェブサイト用テンプレート素材を利用すれば、デザイン制作時間を短縮し、より手軽にクリエイティブな作品を完成させることができます。 今回は、無料ダウンロードできるウェブサイト用PSDテンプレート素材をまとめてご紹介します。 ウェブデザイントレンドをうまく取り入れた作品が中心で、シンプルでミニマルな素材から、カード型レイアウトやマテリアルデザイン、画面を二分割したレイアウトやグラデーション、フラットスタイルなどどれも人気の高い素材ばかりが揃います。 完全無料で美しい！参考にしたいUIキット50個まとめ 2017年保存版 より手早くウェブサイトを作成したいときは、無料のHTMLテンプレートの利用も検討してみましょう。 レスポンシブ対応で無料！ウェブ制作を高速化できる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodeMyUI
