タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
【イカしたUIを見る】Vol.2 これは発明だ！と思ったUIパーツ10選｜Goodpatch Blog グッドパッチブログ
知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポイン
UIパーツにメイリオを指定しないほうがいい理由
はじめに 前提として本記事は特定のフォントを貶める意図はなく役割として使い分けることを推奨する記事です。 フォントにあるのは役割であり、優劣ではないということを念頭にご一読いただけると幸いです。 注意事項 メイリオという特殊なフォント まず具体的な問題点を挙げる前にメイリオというフォントについて軽く紹介させていただきます。 といってもWeb開発者にとっては馴染み深いフォントでありご存じの方が大半だと思います。 Windows Vistaより搭載されたこのフォントは未だに根強い人気があります。 記事にもあるように、このフォントは和文と英文の調和を重視して作られ英文のベースラインという考え方を取り込んでいます。 そこでメイリオでは和文を縦方向に95％に圧縮した形にして下部にスペースを開けた。こうすることで和文・欧文が混じったときに、それぞれのベースラインを合わせつつ、文字が上下に踊って見えると
【2024年最新】良質で参考になるWebデザインを、UIコンポーネント別にまとめたギャラリーサイト、UI LIBRARYです。ヘッダー、スライダー、お問い合わせフォームなど、Webサイトデザインのアイデアに繋がる事例をUIパーツごとに紹介しています。
「ドールズフロントライン」フラットデザインでもUIパーツのアニメーションによって質感の情報は付与できそう - ゲームアプリのUIデザイン
こんにちは、ちょこです！ 「ドールズフロントライン」のホーム画面に遷移した直後のアニメーションが良かった。 具体的には以下のようなアニメーションでした。 画面全体はこんな感じです。 メインコンテンツのボタンを大きく表示してみます。 サブコンテンツの部分はこんな感じです。 アニメーションのおかげで、フラットながら奥行きが感じられる ボタンのUIパーツ一つにしても多階層的な構造で作られています。 なぜこのアニメーションがあるのか、という理由を推測してみました。 「ドールズフロントライン」UIパーツはフラットなデザインで構成されています。 フラットデザインは情報の整理が重要です。 なるべくなら、UIのパーツ単位ではなく、画面全体の情報量をコントロールする必要があります。 したがって、ある程度はキャラクターのグラフィックや背景との連携が求められるデザインです。 その連携が出来ないままイラストや背景
「永遠の7日-終わりなき始まり」グリッチフィルタの表現をUIパーツにも取り入れたデザイン - ゲームアプリのUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」通称「とわなな」の会話パートのグリッチフィルタについて紹介します。 該当の画面はこちらです。 キャラクターのグリッチ表現以上に、UIのデザインも変えているのが大きな特徴と言えます。 左右に並べて比較してみます。 左側が通常時のUIです。右側がグリッチフィルタ適用時のUIです。 心情描写を表わす時や大声で叫ぶ時など、キャラクターの声色やトーンによってメッセージウィンドウのデザインを変えるゲームはしばしば見かけます。 その一環であると考えると、デザインの工夫の痕跡が感じられるかと思います。 アニメーションで見ると以下のように動いています。 登場時の演出もかなり凝っているように見えます。
世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。
「ゴーストトリック」会話シーンのメッセージ送りのUIパーツの不統一。一貫性は至上命令じゃないという仮説。 - ゲームアプリのUIデザイン
こんにちは、ちょこです。 「ゴーストトリック」の会話シーンにおけるメッセージ送りのUIが気になりました。 結構前のゲームなんですけどね。SEが所々逆転裁判なのでちょっとコラボっぽい。 さて、会話シーンはこちらです。 ▲このシーンでの吹き出しの右側にある記号は「▶︎」です モノローグ演出はこちら。 ▲こちらの画面のテキスト送りのUIパーツは「▼」になっています このように、メッセージ送りのUIパーツが異なっています。 なぜデザインに差異があるのか なんでデザインに差異があるんだろう…？ 正直好みとか気分などとすることも簡単ですが、それ以前に「無頓着」「無関心」というのが先にある気がします。 なので、仮説を考えてみます。 ２つのシーンを比べるとアニメーションが違うことがあげられます。 会話シーンでは左から右にテキストが流れます。 モノローグのシーンではテキストが塊でフェードインしてきます。 こ
「NieR Re[in]carnation / ニーア リィンカーネーション」世界観を構成するUIパーツのデザイン事例。幾何学の紋様を利用することで無機質でソリッドな印象 - ゲームアプリのUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィンカネ」から、世界観が表現されているUIパーツデザインの事例をご紹介します。 UIパーツをデザインする際に、どのようなビジュアルにするか迷うことがあるかと思います。 ストーリーを象徴するモチーフなど、何かしらの意匠を拠り所にすることが一般的かなと思いますが「NieR Re[in]carnation / ニーア リィンカーネーション」では幾何学的な紋様を基本とし、展開していました。 世界観を構成するUIパーツをデザインする際のヒントになるかもしれません。 実際の画面に使われているUIパーツを紹介していきます。 まずは画面上部の
![「NieR Re[in]carnation / ニーア リィンカーネーション」世界観を構成するUIパーツのデザイン事例。幾何学の紋様を利用することで無機質でソリッドな印象 - ゲームアプリのUIデザイン](https://cdn-ak-scissors.b.st-hatena.com/image/square/20d26b92f47bcefc975040384d33f3257b6cc22f/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Fappgameui%2F20220707%2F20220707224151.png)
「歌マクロス スマホDeカルチャー」プッシュ通知で珍しいUIパーツが採用されていたので紹介。 - ゲームアプリのUIデザイン
こんにちは、ちょこです。 「歌マクロス」にてプッシュ通知を送る時間を設定できるUIがユニークだったので紹介します。 こんな感じで操作します。gif。 挙動としてはチェックボックスですね。 こんなUI初めて見た！ このUI、ゲームアプリでは見たことがないUIだったのですが興味深い…。 今まではラジオボタンで任意の時間帯を選択するか、ドラムロールで時間帯を決めるか、というデザインしか見たことありませんでした。 このUIの場合、時間帯を跨いだ設定ができるのが特徴です。 「任意の時間選べないじゃん」とか「9時～18時以外は通知ONにしたいのにできなくて不便」という意見もあるかもですが、それは一旦脇に置いてください。 ここでは斜に構えずに、新しいUIパーツだけど直感的に理解、操作できる、という特性に注目するのが良いです。 UIデザイナーの多くはメンタルモデルを利用しつつ、既存のUIパーツやルールに則
「アークナイツ」UIパーツの一貫性や統一性に関して再認識した話。見た目が不統一でも世界観が破綻していないのが凄い - ゲームアプリのUIデザイン
こんにちは、ちょこです。 「アークナイツ」のタブデザインですが、かなり多種多様。 UIが不統一というより各々の画面で好きに作っている感じが凄い。 しかしながら、混沌とならずに全体でのデザインや世界観は壊していないように見えます。 その点を中心に紹介していきます。 こちらは「プロフィール画面」のタブです。 「ゲームオプション」 上の二つは同じ規則性でデザインされていますね。 「基地の加工所」アイテムの交換を行う画面です。 こっちは上のものと比較して情報量が増えています。 アイコンに色が加えられたり、ディティールが加えられたりしています。 「ショップ画面のおすすめ商品タブ」こっちは上部タブと左タブが存在しているパターンです。 「ショップ画面の資格交換所」こっちも上部と左側のタブ。 「倉庫」こっちは上部タブ。デザインはシンプルにアイコンと文字です。 「キャンペーンページ」これは左タブ。 「お知ら
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【総数725件】UI LIBRARY | Webデザインの参考に！UIパーツごとにまとめたギャラリーサイト
あらゆるUIパーツ、レイアウトの実装法を学べるcsslayout.ioがすごい
anond.hatelabo.jp
emi10.ue.bulog.jp
www.nikkei.com
otona-life.com
www.zakzak.co.jp
www.nikkei.com