サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
はじめに 「動けばいい」で済ませがちなUI。でもそれ、ユーザーには伝わってないかもしれません。エンジニアの皆さん、機能開発に集中するあまり、UIが後回しになっていませんか？ コードとして正しく動いていても、ユーザーが使いにくいと感じたら、それは失敗です。どれだけロジックがスマートでも、UIが原因で「なんか使いづらい」と思われてしまうと、全体の評価も下がってしまいます。 この記事では、エンジニアがついやりがちなUIデザインのミスとその回避法を紹介します。共感あり、学びありで、読後すぐに「ちょっとUI直してみようかな」と思える構成を目指しました！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。UIデザインにおける「やりが
新しいコントローラーのこと。 発売当初のプロモーション番組で、芸能人たちがこぞってコントローラーから伝わってくる臨場感がすごいと言っていた。 どういう仕組なのかよくわからないけど、ゲーム内の質感や反動なんかをフィードバックしてくれるらしい。 やっとの思いで手に入れたPS5で、その部分が一番に楽しみだった。 プリインストールされてるPS5の性能紹介的なゲームをやってるときは楽しかった。 グラフィックもすごかったし、芸人のコメントはさすがに大げさすぎたけど、確かに今まで経験したことのない臨場感を楽しめた。 そうなればやっぱり新しいゲームをプレイしたくなるもので、そこそこアクションの強いゲームを買ってきた。 場面に応じて色々なフィードバックをしてくれるコントローラー。 なんというか、今まで経験したことがないというだけで楽しかった。 ところが、とあるシーンに移った時点で、それが一気に不快感に変わっ
Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。 角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。 100 ModernCSS Buttons 100 ModernCSS Buttons -GitHub 100 ModernCSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。 ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソース
私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroidAPIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman InterfaceGuidelines、Android
Dockerコンテナの起動やイメージ管理、KubernetesクラスタへのアプリケーションのデプロイなどをGUIで行えるソフトウェアが「Portainer」です。DockerやKubernetesの管理を簡単に行えそうだったので、無料のコミュニティ版を使ってみました。 Portainer | Open Source Container ManagementGUI forKubernetes,Docker, Swarm https://www.portainer.io/ Documentation https://documentation.portainer.io/ ◆Docker編 まずはDockerを利用できる環境で、以下のコマンドを実行しPortainerコンテナを起動します。今回はDocker DesktopをバックエンドとするWSL環境を利用しました。 $docker v
先日Cybozu Frontend Monthly #1 にてb4h0_c4tさんの「HTMHell special: close buttons」のお話を聴いていた中で、一つ引っかかるものがあった。 「そもそも✗(バツ)は閉じるって意味じゃないから！」 確かに。 現代、様々なUIを触ってきた中でなぜ ✕ を閉じるものと捉えているのだろうと不思議に思った。 ✕ではなくx(エックス)で表現されることも多々あるようで、こんな名言もある。 ✕とはなんなんだろう ではなぜこのクロスの記号(✕)が閉じるの意味を持ってしまったのか考えてみる。 一旦✕を見て思い出すものを上げてみようと思う。 ・◯と✕(日本の正誤表記) ・✓と✕(海外...主に欧米の正誤表記) ・プレステのコントローラー ・海外ゲームだと決定が✕、キャンセルが◯ ・宝の地図なんかで在り処を記す ・上記のツイートのようにx(エックス)とし
最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ！と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ？と思ってしまう、そんな「これはやめてほしい
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その経験
ここの画面ではメインボタンの「START」を目立たせたいのですが、右上のボタンに目がいってしまいます。 右上に目がいってしまうのは、最後に動く箇所に視線が移動するので不必要に右上に視線が誘導されます。 他にもコントラストや動き量がメインボタンよりも大きく変化しているため、いやでも目についてしまいます。 不必要に待たせている 最後に動かすところに視線が行きますが、視線をメインボタンに向けさせようと最後のアニメーションを長くしてしまった結果、ユーザーがアニメーションによって待たされている状態になってしまいました。 メインボタンはすぐに押してゲームを遊べることが大切になるので、最後にボタンを大きく動かして目立たせてもユーザーは早く押させて欲しいと思ってしまうので、アニメーションは短くサッと出して上げてユーザーが気持ちよく行動できるといいですね。 動き過ぎ、優先順位が曖昧 全てが動き過ぎてしまい、
webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は
KISS（略語: Keepitsimple, stupidのコンセプトは、US海軍が取り入れた1960年ごろにはじまっています。KISSの原則は、ほとんどのシステムが複雑ではなく、単純であればもっとも効果的であることです。デザインプロジェクトでも同じことが言えます。 多くのグラフィックデザイナーは、早い段階でKISSの原則について学びますが、では実際にどのように活用すれば良いのでしょう。作成をはじめると見た目よりもう少し複雑であることが分かると思います。 今回は、シンプルなウェブデザインを作成する7つのルールをご紹介します。これらのルールを取り入れることで、ごちゃごちゃ感を取り除き、美しくシンプルなデザインに役立てることができるでしょう。 詳細は以下から。 1ページに１つの目標を設定しよう。 シンプルなデザインは、プロジェクトの目標やウェブサイトにおける各ページのはっきりとした目標から
[fancy_box]海外デザインブログDesignModoで公開された「Lessons Learned From Analyzing Material Design Components」の著者 Paula Borowskaより許可をもらい日本語抄訳しています。Thank you so much as always![/fancy_box]Googleのデザインガイドライン「マテリアル・デザイン（英:Material Design）」に目を通したひとは、どれだけ広範囲にわたって細部まで気を配って作成されているのか気付いたのではないでしょうか。 ガイドラインに目を通してみることで、たくさんのことを学ぶことができます。その中でも、複雑なビジュアル・スタイルガイドの作成が可能だということは大きい収穫でしょう。「簡単に」という意味ではありませんが、Googleのように複雑にサービスが入り組んで
運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
UIについて徒然と考える自分用メモ、２回目はフィードバック。ユーザーに「何かがおきたよ！」と如何に明解に知らせるか？１回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは？ ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、
CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイトをご紹介。CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」です。CSSボタンに実装されているアニメーションのデモも合わせて紹介されているため、使い勝手がとてもいいサイトになっています。WEBデザインの参考にどうぞ。 「CSS Buttons」は、CSSでつくられたボタンのコードが100以上コレクションされているサイトです。 ソース元はすべてCodepenから。 ですから、ソースコードはそのままコピペして利用することが可能です。CSSボタンに実装されているアニメーションも合わせて紹介されていますので、視認性にすぐれて、使い勝手のよいとても参考になるサイトです。 具体的には以下のようなボタンが紹介されています。WEBデザイン制作で参考になる
印刷する メールで送る テキストHTML電子書籍PDF ダウンロード テキスト電子書籍PDF クリップした記事をMyページから読むことができます ここまで、ユーザーインターフェース（User Interface：UI）やユーザー体験（User eXperience：UX）を設計するにあたってのさまざまな要素について論じてきた。設計し、作ったものは、なるべく客観的に評価し改善・改良につなげたい。UIやUXの良し悪しを「何となく」語るのは誰でもできるであろうし、「デザインのセンス」という言葉だけで済ませてしまうことも簡単だが、きちんと評価するにはどうすれば良いだろうか。 今回はUIの評価方法や評価する目の養い方について論じる。 定量的評価 何らかの計測により数値化した尺度で定量的評価ができれば、それは確実に客観的な評価といえる。まずはUIを客観的に評価する方法をいくつか紹介する。
当たり前を当たり前だと思ってはいけない！スマートフォンUIデザイン Konomi Kawaharada デザイナーの川原田です。主にWebデザイン・スマフォアプリのUIやインターフェイスのデザインをしています。 スマートフォンが当たり前になってきた今、さぁスマフォ媒体の制作に入ろう！と思っても、何気なく使っていて、見落としがちなことってありますよね。 コンテンツを制作する際に、ちょっと気をつけるだけでぐんとUXがあがる方法をご紹介したいと思います！UIとは？UIとは“ユーザーインターフェース”の略です。インターフェースのグラフィックのデザインのことです。 グラフィックはもちろんですが、アクションや画面遷移などもふまえた設計のことを言います。 コンテンツ作成時に重要な5W1H コンテンツを制作する前に、ユーザーはそのコンテンツを、どのように使用するかを、5W1Hにそって具体的に想像して
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
オブジェクトのどの位置を基準にして、複数のオブジェクトを均等に配置するかを決めるボタンです。 各ボタンの名称:オブジェクトの分布 ①【垂直方向上に分布】 ②【垂直方向中央に分布】 ③【垂直方向下に分布】 ④【水平方向左に分布】 ⑤【水平方向中央に分布】 ⑥【水平方向右に分布】 こちらもチェック！：イラストレーター 整列パネルの使い方① オブジェクトの整列編 オブジェクトの分布の使い方は、[複数のオブジェクトを選択し、整列パネルの「オブジェクトの分布」の各ボタンをクリック]します。 選択した基準の位置からの間隔で、オブジェクトが均等に配置されます。両端のオブジェクトは動かずに、中間のオブジェクトが移動して間隔を均等にします。 【垂直方向に分布】 ・垂直方向上に分布:各オブジェクトの上端を基準にして、オブジェクトが均等に配置します。 ・垂直方向中央に分布:各オブジェクトの中央を基準にして、オブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
