プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.5
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第5弾は、ユーザーエクスペリンスやインタラクションに関するテクニックです。 UI & UX Micro-Tips: Volume Five. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フォントサイズやグリッドは時にはルールを曲げてもよい 2. エラーメッセージは親切で分かりやすいものにする 3. ロード中は何が起きているのか分かるようにする 4. アクションを実行した際に何が起きるのか分かるようにする 5. タブバーには重要なアイテムだけを表示する 6. ドロップダウンに重要なアクションを隠さない
2021年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
2021年のロゴデザインのトレンドは「自然とつながる必要性」が深く求められています。エコと環境は2021年の大きなテーマであり、どのジャンルのデザインでも持続可能性に向けて進んでいます。 デザインの引き出しを増やすには、人気があるトレンドを押さえておくことが大切です。ロゴにはタイポグラフィ、カラー、形など、デザインの基本となる要素が詰まっており、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 2021 Logo Trend Report 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年、ロゴデザインのトレンドの傾向 拡張性が高いロゴ「Asterisk: アスタリスク」 回転させたリボン「Off Jog: オフジョグ」 増殖を表現したデザイン「Spliced CBC: スプライスされたCBC」
CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス
カード型UIにおける５つの効果的なテクニック
「カード」とは、画像やテキストなどの情報が書かれた下図のようなデザインのことをいいます。カードは、シンプルな使いやすさとデザイン性とのバランスを重視する際にはもっともよく使われる手法となりました。PinterestやFacebookのようなサービスで使われはじめ、現在では多岐にわたる企業で使用されています。
Material Designの設計思想を探る｜usagimaru
この記事は、2018年5月25日に開催された Google I/O Extended 2018 Shibuya での講演内容を文章に起こしたものです。当時はGoogle I/O 2018の直後、Material Designガイドラインがいくらかアップデートされ、Material Themingや柔軟な基盤の構築といった新たな考え方が明示されたばかりでした。この講演は、アップデートされた内容の背景にある思想や意図を考察し、Material Designの動向を探ろうという趣旨になります。この記事では当時のスライドを交えながら内容の解説と考察を行います。 今回は、I/Oで明らかになったMaterial Designの新しい部分を中心に、iOSのデザインと比較しながらその設計の仕組みや思想を探っていきたいと思います。異なる観点から向き合うことで共通点と他との差異を見極めるという方法をとります。
Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ
こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。 今回の記事では、「なぜAtomic Designをやめたのか」という理由と、「どのようなディレクトリ構造にしたのか」を紹介します。 Atomic Designを導入したねらいと導入した結果 上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. 「ドメインが入るか／入らないか」。「抽象的か／そうでな
デザインと行動心理学｜nagaimen
情報設計やコミュニケーションに役立ちそうな、人の無意識な行動心理のキーワードをイラスト付きでまとめてみました。 視線解析 目は脳とつながっていて、視線と心理状態は結びつきやすい。記憶に関することは左に、未来に関すること右に視線が向く傾向がある。視覚に意識を集中すると上、聴覚に意識を集中すると真ん中、体全体で感じようとするときは下らしい。なので、嘘をつくときは右上をみてしまう傾向がある。ユーザーインターフェイスにおいても「戻る」ボタンが左、「進む」ボタンは右に配置されている。 アフォーダンス アフォーダンスとは、環境や形状が与える意味のこと。例えば、ドアの取っ手は前後に開けるものと認識するし、ドアにくぼみがあればスライドして開けると認識する。そういえば、線香花火はヒラヒラに火をつけたくなるので 反対かもと思い調べてみると、ひらひらを持つことで揺れを吸収し火球が落ちにくくなるらしい。線香花火の
ゲーム感覚で実践的なWebデザインの基礎を学習できる「Uxcel」で遊んでみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、さまざまなミニクイズなどのゲームで遊びながら、実践的なWebデザインを誰でも学習できるWebサービスをご紹介します。 基本的な知識だけでなく、実際のWebサイトやアプリの画面などを活用してWebデザインに必要なスキルや感覚を自然と身につけることができるようになります。 これからWebデザインの学習を検討している人も含めて、ぜひ参考にしてみてください！ 【 Uxcel 】 ■「Uxcel」の使い方 それでは、「Uxcel」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Sign Up】ボタンをクリックして無料のユーザー登録を済ませておきましょう。 メールアドレス、パスワードを設定するだけなので簡単です。 登録されたメールアドレス宛に認証用のリンクが送られてくるので、クリックして完了しておきましょう。 以
［速報］Google、新デザインフレームワーク「Material You」発表。デバイスからアプリケーションまでGoogleの製品すべてに適用へ。Google I/O 2021
Googleは、5月19日未明に開催したオンラインイベント「Google I/O 2021」で、新しいデザインフレームワーク「Material You」を発表しました。 Material Youでは、これまでデザインフレームワークによってあらかじめ指定されていたカラーパレットから色を選ぶのではなく、「あなた自身のパーソナルカラーを基に、デザイナーの視点とカラーサイエンスの組み合わせによって作られたカラーパレットを生成することで、あなたがアプリケーションのルック＆フィールのクリエイターになる」（Matias Duarte氏）と説明。 そして自動的にそのカラーパレットにUIが適合していくとのこと。
「Android 12」でUIデザインはどのように変化するのか？
Googleがオンラインイベント「Google I/O 2021」の中で、スマートフォン向けOS「Android」の時期メジャー版である「Android 12」の最初のベータ版を発表しました。Android 12はこれまでのAndroidよりも、さらに「表現力豊かで、ダイナミックで、パーソナル」だとのことです。 Android 12 Beta: Designed for you https://blog.google/products/android/android-12-beta/ Android 12ではカスタムカラーパレットと再設計されたウィジェットにより、スマートフォンを完全にユーザーごとに最適化できるようになるとのこと。たとえば、「色抽出」を使って壁紙を選択すると、システムが「どの色が優勢で、どの色が補完的で、どの色が見栄えがよいか」を自動的に判断し、ロック画面やウィジェット、通
Googleがマテリアルデザインを次の段階に進化させた「Material You(マテリアルユー)」を発表、UIデザインがユーザー好みに変幻自在に
Googleが2014年から提唱してきた新しいUXデザイン概念が「Material Design(マテリアルデザイン)」です。Googleの開発するAndroidだけでなく、テクノロジー業界全体のデザインを変革することに役立ってきたマテリアルデザインを、次の段階に進化させるための新しい概念として、Googleが「Material You(マテリアルユー)」を発表しました。 Unveiling Material You - Material Design https://material.io/blog/announcing-material-you 2014年にGoogleがマテリアルデザインを導入した際、同社のビジョンは「テクノロジーをすべての人にとって美しくシンプルなものにすることで、モバイルとウェブ全体のエクスペリエンスを合理化すること」でした。しかし、コンピューティングは成長を続け
実用性が高い配色本！カラー縛りのデザインやイラストにすごく使える -配色デザインインスピレーションブック 3
イメージはなんとなく浮かぶけど、じゃあその配色は具体的にどうすれば、、、そんなデザインやイラストの悩みに大活躍する配色本を紹介します。 本書は人気シリーズの第3弾で、今回は「カラー縛り」のデザイン案件に役立つ配色になっています。例えば、レッド系でもさまざまなトーンのレッドと色の組み合わせを写真・イラスト・パターン・キーワードなどさまざまな角度の配色が分かります。 本書は、当ブログでも好評だった「配色デザインインスピレーションブック」の第3弾（第1弾の紹介記事、第2弾の紹介記事）。第1弾も第2弾も発売後は書店でもAmazonでも売り切れ状態がずっと続いていました。 第3弾となる本書もさらに充実しており、前書を持っている人はもちろん、今回初めてという人にもお勧めです。
「センスのない私には永久保存版」 イラストレーターが伝授する“ファッションの色の合わせ方”が「勉強になる」と話題に
イラストレーターが公開したファッション情報「色の合わせ方」が、「センスのない私には永久保存版」「勉強になる」と話題を呼んでいます。 投稿者は、アパレルブランド「Annui」を運営するイラストレーター・msy.（@maru_maruer）さん。「イラストレーターが伝授！ 色の合わせ方」と題して4枚の画像をTwitterへ投稿したところ、22万7000件以上の“いいね”が寄せられている他、4万件以上拡散しています。 イラストレーターが伝授するファッション情報“色の合わせ方” msy.さんが今回指南するファッションポイントは、「類似色」「補色」「分裂補色」の3つ。カラーホイールを示すことにより、ファッション初心者でも簡単に理解できるイラストとなっています。 「類似色」は色相を広げすぎないのがポイントで、「一番手っ取り早い組み合わせ」とmsy.さん。似た色の服を集めるだけでおしゃれに見えるため「基
【無料】CSSで作る流行りのマテリアルデザインのオシャレカードコレクション
このサイトでもマテリアルデザイン風のカードをTOPページで利用していますが、最近フラットデザイン、マテリアルデザインなカードが流行っていますよね。 ブログはもちろん、各所サイトで度々目にします。 そこで今回はそんな人気なマテリアルデザイン風のカードをいくつかご紹介します。 コーディングやデザインの参考にしてみてはどうでしょうか。 マテリアルカード: Pure CSSダイアグラムSee the Pen Material Card: Pure CSS Diagram by Raymond Phair (@Befeepilf) on CodePen. マテリアルカードデザイン#2See the Pen Material Cards Design #2 by Viraj Trivedi (@inf3cti0n95) on CodePen. スキルマテリアルカード(ロールオーバーで動く)See th
UIデザイナーのためのプロトタイピングツール｜LINE CREATIVE CENTER
こんにちは。Financial Design 2チームのイ ハンソルです。 わずか数年前までは、開発が完了するまで、自分のデザインが実際にユーザーたちにどのように受け止められているか分かりづらかったと思います。 また、デザインのモーションを関係部署に説明するには口頭で「スルスルっとした感じ」とか「シュンッと出るように」などの表現を使いながらコミュニケーションをとったため時間もかかりました。 しかし、この頃はデザイン業務をより効率的に進めるための多彩なプロセスが開発されていますが、その中の一つがプロトタイピングです。 プロトタイピング(protoyping)とは？プロトタイプ(prototype)は辞書によると「本格的な商品化に先立ち、性能を検証·改善するために簡単にコア機能のみを組み込んで製作した基本モデルや 試製品」を指し、既に機械、自動車、建築、医療など様々な分野で使い勝手を検証する方
1-1. Figmaの概要 | UI/UXデザインツール『Figma』入門
1-1. Figmaの概要UIデザインUXデザインプロトタイピングデザインの共同制作から共有まで、チーム作業に強いUIデザインツール『Figma』について紹介します。実際にどんなシーンで活用されているのか、Figmaを利用するメリットとデメリットについても解説します。 公開日：2019/04/19最終更新日：2021/01/28 1.Figmaって何？Figmaは2016年9月に正式リリースされたUIデザインツールです。 リリースの時点でデスクトップアプリケーションだけではなく、ブラウザでもデザインの作成が可能な点で革新的でした。Windows, Mac, Linux やChromebookといろいろなOSに対応したアプリケーションが提供されています。 また、リアルタイムにコラボレーションできるデザインツールとして徐々に人気が出てきています。 インターフェースは全て英語ですが、徐々に日本で
インタラクションデザインのためのプロトタイピングツール「Origami Studio」｜CrowdWorks DesignDiv
はじめまして！ 今年からクラウドワークスにジョインしました、デザイナーのターナーです。 初投稿となる今回は、インタラクションデザインのためのプロトタイピングツール「Origami Studio」の表現力に心惹かれ 試しに使用してみたので、その所感をレポート致します。 （この記事はOrigami Studioの使い方ではなく、ツールの考察に関する内容です。 ） What is Origami Studio?「Origami Studio」はMacOS上で作動し、実機で画面を確認しながら、アプリのインタラクション、画面遷移を自由度高く表現することができるプロトタイプツールです。 FacebookがAppleのモーショングラフィック作成ツールQuartz Composerをベースに開発し、2016年4月にFacebookの開発者向けイベント『f8』で発表、2017年はじめにスタンドアローンアプリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ソフトウェアエンジニアのためのUIデザイン概論
The Blog | Welcome to Adobe Blog
Figmaのプロトタイプ
