この記事では、ウェブデザイン制作で活用したい最新UIインタラクション、アニメーションをまとめてご紹介します。Webやモバイルアプリの参考アイデアとして取り入れたい、ユニークで素敵なアニメーションを中心に揃えています。 最新ウェブデザインも一緒に確認することで、デザイントレンドや動向をうまく掴むことができます。 Webアイデアの宝庫！注目したい最新ウェブデザイン35個まとめ Web制作の参考アイデアに！いま話題の最新ウェブデザイン50個まとめ いまWebがすごい！参考にしたい話題の最新ウェブデザイン37個まとめ 【総まとめ】2019年印象に残った世界のベストWebデザイン厳選50個 新感覚の動き！Web制作で参考にしたい最新UIインタラクション、アニメーションまとめ #blacklivesmatter 世界中でムーブメントを巻き起こしている、黒人に対する暴力や構造的な人種差別の撤廃を訴える
アプリケーションをデザインする際、ほとんどのデザイナーはコンテンツページには労力を費やしますが、登録フォームは見過ごしがちです。ユーザーが辿り着くのは、視覚的に魅力がなく、無味で事務的なフォームです。白いバックグラウンド、まっさらなテキストフィールド、煩雑な文章、不快な黒のアウトラインがあちこちに散らばった、登録のモチベーションを掻き立てないフォームです。もしあなたのフォームがそんな状態であれば、改善の余地ありです。 あなたのアプリを使いたいユーザーはフォームの見た目に関わらず登録はしてくれるでしょう。しかし、まだ決めかねているユーザーは事務的なフォームを見て辞めてしまうでしょう。第一印象で多くの見込み顧客を失っている可能性があるということです。もっと機能的で魅力的なフォームにすることで、ギリギリで決めかねているユーザーの背中を押すことができます。 ビジュアルがユーザーを後押しする ある調
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
デザイナーに、構造化が求められる要件がここ数年で急増しています。また、スマホやデスクトップの両方のOSにダークモードが導入されたことで、新たなデザインの領域を増やす必要もあります。 今までのカラーシステムと一貫性を保ちつつ、ダークモードの新しい配色を簡単に適用できるようにするカラーシステムを作成する方法を紹介します。 Dark Mode — Working with Color Systems by Søren Clausen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 色に役割を割り当てる カテゴリ 1: 色合い カテゴリ 2: 背景 カテゴリ 3: 前景要素 その他の場合 色の割り当て ダークモードへの対応 Sketch用のカラーシステム 色に役割を割り当てる すべてのシステムがそうであるように、最も重要なことは根拠です
良いデザインを作るには、見た目だけでなく使いやすさ・見易さを考慮しないといけないですよね。 その中で、最近よく耳にする「UIデザイン」という言葉をご存知でしょうか？ 今回は、ユーザーが自然と目を向けるような、視覚誘導を利用した「UIデザイン」についてご紹介したいと思います。 そもそも、UIデザインとは？ UI（ユーアイ）とはUser Interface（ユーザー・インターフェイス）の略です。インターフェイスは英語では界面や接触面という意味なので、コンピュータ用語ではUSBやHDMIなど、機器と機器をつなぐ仕組みを指す言葉として使われています。 UIデザインで言う「つなぐ」は、USBのような物理的な接続だけはなく、もっと抽象的、概念的な意味合いを持っています。 機器（PC・スマホといった製品やシステム、サービス全般）とそれを使うユーザーとの”つながり”を指します。 簡単にいえば「ユーザーがw
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。
現在位置: ホーム > ブログで学ぶUX > UXセミナー・勉強会レポート > “デザイナーこそ「言葉を尽くす」ということ。” 転職サービス「doda」リブランディングにおけるUXデザイン部の姿勢 2018年11月27日、パーソルキャリア株式会社 大手町オフィスラウンジにて、ポップインサイト主催「第2回UX Potato」が開催されました。 「UX Potato」とは、「ポテトを食べながらライトにUXを学ぶ」場。UXをテーマに、いろいろな「人」や「取組み」と出会うことで、 UXをより実践していけるきっかけとして楽しんでもらうライトニングトーク会・勉強会です。 この記事では、「第2回UX Potato」の登壇内容を3回にわたってご紹介します。第1回は、パーソルキャリア株式会社様クリエイティブグループの、転職サービス「doda」リブランディングへの取り組みについてご紹介します。 パーソルキャリ
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 電話番号入力フォームは、生年月日入力フォームと並んでくせ者です。たくさんのフォーマットがあり、どの入力方法が正しいかを見分けにくいことがよくあります。国番号を入力すべきか否かさえよくわかりません。 適切な入力フォーマットを判別できないと、ユーザーは電話番号入力フォーム以外の項目も入力内容が不適切なのではと不安になります。電話番号入力フォームでエラーがでると、フォーム入力自体を放棄してしまうかもしれません。 どのフォーマットが正しく、どのフォーマットでエラーが出るのかを、ユーザーが入力時に困惑しないように伝えるべきです。もしユーザーが困惑するようあればユーザー体験が乏しいということなので、デザインし直す必要があります。入力フォーム改善のためには、
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXライティングとは、プロダクトとユーザー間のインタラクションを支援し、プロダクト内のユーザーを導くUIのコピーライティングのことを指します。UIのコピーには、ボタンやメニューラベル、エラーメッセージ、セキュリティの注意喚起、利用規約、その他のプロダクト使用に関する指示などが含まれます。 UXライティングの主な目的は、ユーザーとデジタルプロダクトのコミュニケーションを解決することです。この記事では、効果的なUXライティングに関する実践的なヒントを提供します。 ※編注：当記事はあくまで英語におけるUXライティングについての紹介になります。 なぜUIのテキストをいじることがデザインプロセスにおいて重要なのか 多くの場合、プロダクトの開発者は、UIのテキストをプロダク
PCサイトでは使用されることの多いモーダルウィンドウ。モバイルサイトにおいては最もフラストレーションのたまるUXの一つでもあるのです。 モバイルサイトで最もフラストレーションのたまるユーザー体験の一つとしてモーダルウィンドウが挙げられます。PCサイトでは画面サイズが大きいので、モーダルウィンドウの表示に問題はありませんが、モバイルの場合はウィンドウが（ほとんどの場合）、画面外にはみ出てしまいます。ユーザーはモーダルの一部しか閲覧できず、閉じるのにも一苦労です。 また、画面上にキーボードが表示されている場合、閲覧は更に困難となります。キーボードは画面上に大きな面積を占め、ユーザーは自分が何を入力しているのかを確認するために、いちいちスクロールする必要が出てきます。もし、モーダルウィンドウで表示されているコンテンツを快適に見せたいのであれば、モバイルでのモーダルの使用は控え、代わりにアコーディ
多くのデザイナーがブランドを印象づけるためにWebサイトのロゴを中央や右に配置します。しかしこれは、ブランドの印象づけに繋がらないことが調査によりわかっています。 実際、左に配置したロゴがブランドの印象を弱めたり、ナビゲーションを難しくすることはありません。 右配置のロゴはブランドリコールが弱い Nielsen Norman Groupの研究によると、ブランドロゴが右側よりも左側に置かれているときの方がユーザーはブランドをよく覚えているそうです。ロゴが左側にある場合、ブランドリコール（編注：ブランドを思い出すこと）の平均は89％になっています。 ロゴが右側にある場合、視界に入る機会が減り、ブランドリコールが弱まります ユーザーがWebサイトを見るとき、彼らの視線は左を向いています。そのため右側に配置されたロゴにはユーザーはあまり視線を向けず、ブランドリコールが弱くなります。左側に配置された
UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜな
SeanはCodal社の技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。 UXとUIの違いを知らない人に説明する最善の方法は、比喩を使って説明することです。UIが車の見た目だとすると、UXは運転の仕方です。またUIが出会い系のプロフィールだとしたら、UXは出会い方です。これらの比較は違いを上手く表している一方で、UIの複雑性を軽視していることもあります。 UIとは、単なる塗装やTinderのプロフィールではありません。UIとは全体の環境です。ピクセルひとつひとつが重要であり、多面的な構造を持っています。私たちは、サービスのプラットフォームを選ぶときは全体の体験を最適化できるよう注意深く考えます。一方で、配色理論やレイアウト、タイポグラフィ、フォントの選択などの小さな要素については、数秒以上かけて考慮されることは滅多にありません。 そのため
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
ひとつのデザインが事実上の標準となり、その後の基本パターンを変えてしまうことがあります。変わった後ではそれが当たり前となってしまい、その標準に始まりがあったことなど誰も気にしなくなるのです。また振り返ってみたとしても、それがなかった頃の感覚に立ち戻ることはできないので、もはや何がどう新しかったのかを実感することは難しいのです。 2007年に iPhone が発売され、その一年後に日本で iPhone 3G が発売されてから今日（2018年7月11日）でちょうど10年が経ちました。この10年間でスマートフォンやそのアプリを介したオンラインサービスは瞬く間に普及し、私たちのモバイルコンピューティング、コミュニケーション、ソーシャルメディア、Eコマースなどの態様が大きく変化したのは周知のとおりです。 iPhone のデザインは多くの面で新しいものでした。そしてその大部分がその後のスマートフォンの
任天堂の新人研修で語られているのは「あそび心を伝える」という大切さについて。『スーパーマリオメーカー』を例に、UI/UXデザインチーフである正木義文さんが語ってくれた。 [目次] ・「みなさんとクイズをしたいと思います」 ・任天堂流「伝え方」のこだわり ⅰ教えるよりも体験してもらう ⅱファーストインプレッションを大事にする ⅲ体験は面白く ・わかりやすさと高機能を兼ね備えた、UIのデザインプロセス ・「あそび心を伝えるUIデザイン」3つのポイント ⅰUI脳と娯楽脳の二人三脚 ⅱ短所を「娯楽脳」で長所へ変える ⅲ将棋3席 麻雀5席 「みなさんとクイズをしたいと思います」 ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「まずは、みなさんとクイズをしたいと思います」 そんな、あそび心溢れる一言で幕を開け
「UI Crunch #13 娯楽のUI - by Nintendo -」に参加しました。世界的にも注目される企業かつあまり表に出てこないデザイントークが聞けると言うことで、倍率も相当なものとなっておりました。この企画は構想から2年くらいかかったそうで、とても濃いお話を聞くことができました。めちゃ感動しました。今回は、そちらのイベントレポートです。最初の方あまり写真を撮らなかったので、後半の写真が多めになります。 1人目は、UI/UX デザイン チーフの正木さん。「娯楽UIの思考の原点」についてお話いただきました。 Nintendo流の「伝え方」Nintendoが人に何かを「伝える」時にこだわっていること。それは、以下の3つです。 ・「教える」ことよりも「体験する」ことで、より早く、的確に伝えることができる。 ・初めての体験は一度きり。新鮮な印象を大切にする。 ・体験はやっぱり面白くしよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
