その状態のデザイン考えてなかった！ UI Stackってナニ｜kana
アプリの画面をデザインする際、エンジニアさんに 「なにも登録データがない場合、どう表示しますか」「選択したときの状態ってどんなデザインですか」などと聞かれて 「ｳﾜｱ考えてなかったすみません、今作ります。。」 （なんて自分はポンコツなんだ、、ｳｳｳ） と、なりたくないですよね。 UI Stackは👆のような状況を回避するのに便利で大事な考え方だと思ったので、言葉の意味を知らない方はぜひ読んでってください！ UI Stack アメリカのプロダクトデザイナー Scott Hurff さんが世に出した 「UIの考慮すべき5つの状態」という考え方です 5つの状態 ・Blank State（空っぽの状態） ・Loading State（ローディング状態） ・Partial State（部分達成状態） ・Error State（エラー状態） ・Ideal State（理想状態） 一つ一つ参考を交えな
４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
選択式フォームをより使いやすくするポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
ラジオボタン、チェックボックス、ドロップダウンリスト、コンボボックスなどは、ユーザーの入力負荷を軽減させるために使用される選択型のUI要素です。これらは見た目や機能が似通っていることもあり、なんとなく使い分けている場合も多いのではないでしょうか。 しかしながら、状況と目的にあったUIを採用しなければ、入力負荷の軽減どころか逆にユーザビリティが低下し、入力エラーの原因になってしまうことさえあります。 選択式フォームを正しく設定すれば、ユーザーの入力の手間を省き、タイプミスから生じるエラーの防止が可能になります。選択肢がリストに格納されるタイプのUIは画面スペースの節約になり、よりシンプルで情報負荷の少ないレイアウトを可能にします。 業務システムのUIをより良くするためには、選択式フォームそれぞれの特性を理解し、状況に応じて適切にデザインしていきましょう。 選択式フォームの種類 ラジオボタン
Lunacy – Win、Mac、Linux用の無料デザインソフトウェア
エレメントに制約とルールを定義することで、フレキシブルでレスポンシブなデザインを簡単に作成できます。デザイナーの仕事が変わります。
CVRを上げるためのバナー制作4つのポイント～Yahoo!ニュースアプリA/Bテスト事例からみえた「都道府県ニュース」の隠れた需要
CVRを上げるためのバナー制作4つのポイント～Yahoo!ニュースアプリA/Bテスト事例からみえた「都道府県ニュース」の隠れた需要 世のアプリ運営者なら誰でも抱えている課題の一つに、「どう集客するか（＝ダウンロードしてもらうか）」ということが挙げられると思います。Yahoo!ニュースはブラウザ、アプリの両方で展開しておりますが、もちろんYahoo!ニュースのアプリ担当者らもそのような課題を抱えており、日々研究・試行錯誤を続けています。今回は、Yahoo!ニュースアプリにおけるバナー集客の事例と、そこから見えてきたポイントをご紹介したいと思います。 効果的なバナーをつくる4つのポイント アプリの集客方法には様々な方法がありますが、今回はYahoo!ニュースのブラウザ版の利用者に向けたバナー集客例を取り上げたいと思います。 Yahoo!ニュースは、ご存知の方も多いと思いますが、アプリ版が登場す
今さら聞けないマテリアルデザインとは？5分でわかる解説 | SONICMOOV LAB
2014年6月にGoogleマテリアルデザインガイドラインが公開されてから、AndroidはもとよりiOSのアプリでも、このガイドラインを取り入れたUI/UXの優れた作品が多数出てきました。 今回はそんな相変わらずトレンディなマテリアルデザインのガイドラインをわかりやすく、ポイントを絞ってお伝えします。 目次 マテリアルデザインとは？ 平面なのに3D 紙とインク マテリアルデザインのカラー グリッドシステム アニメーション 心地の良い動き タッチフィードバック 意味を持ったアニメーション まとめ マテリアルデザインとは？ マテリアルデザインを直訳すると「物質的なデザイン」という意味です。 デジタルのデザインなのにどの辺が「物質的」なのか、それは次の2つの概念で表現されています。 平面なのに3D マテリアルデザインでは、要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持たせていま
ご利用について
あいまい検索（英語検索） あいまいな日本語で（英語でも）検索できます。上手く動くか分からないのでお試しです。 検索の仕方については「検索のコツ」をご覧ください。 AIを使っていらすとや風の画像が生成できるサービスです。 Eテレのショートアニメです。 いらすとやが更新されたらお知らせするX（ツイッター）アカウントです。 いらすとやのLINEスタンプに関する情報をお知らせするLINEアカウントです。 ▼ 2024 (46) ▼ 7月 (2) いろいろな濡れて細くなった猫のイラスト いろいろな新紙幣のイラスト ► 6月 (14) ► 5月 (6) ► 4月 (11) ► 3月 (12) ► 1月 (1) ► 2023 (24) ► 12月 (1) ► 10月 (11) ► 7月 (1) ► 6月 (3) ► 4月 (4) ► 1月 (4) ► 2022 (65) ► 10月 (9) ► 7月 (
Googleはなぜモバイルに力を入れるのか？これからのWebパフォーマンスで注力すべきポイント
こんにちは、川田です。Googleはここ最近、デスクトップ向けWebに対して、ほとんどの関心を失っているように見えます。HTML5ブームも過ぎて、やることがなくなってしまったのでしょうか？……いえいえ、そうでもありません。昨今の待ったなしで進む技術革新の中で、彼らは「ある問題」と戦っているようです。 Webは「モバイル」中心の時代へ移っていく すでにご存知の方も多いと思いますが、GoogleのビジネスモデルはWebに強く依存しています。2014年1Qの決算で、Googleは全売上の約68%が自社のWeb系サービスの広告収入であり、約22%はAdsenseなどの他のWebサイト向けの広告であると報告しました。Webに依存したビジネスが実に9割を占め、1日に約120億円の収入をWebから得ています。もっと簡単に言えば、Webだけで、タイの国民全員の給料分ぐらい稼いじゃってます。当然、Webの進
開発者は必見? GoogleがAndroidアプリのUXアンチパターン動画を公開 - すまほん!!
数多のアプリが氾濫する Android アプリですが、過去に開発の経験がある方・現在進行形で開発中の方……数多くいらっしゃるかと思います。 そんな方に是非、ご覧頂きたいのが Google が Youtube にて公開している ANDROID DESING in ACTION UX アンチパターンです。ご存じの通りアンチパターンとは「べからず集」のことで「これは駄目だからこうして欲しい」といったことがわかりやすく紹介されています。 動画の内容としては、ダイアログの表示方法、ボタンの位置、タッチフィードバック……etc 開発者の方はそのまま知識を吸収することができますし、開発者ではない方も「へー」と思えること間違いなしです。
Androidアプリーリソース画像サイズ＆種類ー | Excite Designer's Blog
iPhone・iPadアプリを制作する時、リソース画像は ① 従来のディスプレイ用 ② Retina ディスプレイ用 上記の2種類が必要ですね。 Androidアプリも同じようにdpiごとにリソース画像を用意する必要があります。 今回は 1. 必要となるリソース画像サイズの種類 2. デザインする時の画面サイズ 3. アイコンサイズのガイドライン などAndroidアプリのリソース画像を作る時に役に立つ情報をまとめてみました。 必要となるリソース画像サイズの種類 Androidアプリのリソース画像は対応するdpiによって用意する画像サイズが変わります。 まず、dpiって何でしょう。 dpiは『Dot Per Inch』、1インチ辺りのピクセル数を意味します。つまりdpi数値が高くなるとディスプレイが鮮明できれいになります。 dpiは主にldpi(低解像度)、mdpi(中解像度)、hdpi(
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
第1回 デザイナーがこだわりたいAndroidアプリのデザインとは？
現在Androidマーケットにあるアプリで「このデザインなら使いたい！」と思えるようなものは、残念ながら多くありません。デザイナーがそもそもプロジェクトにかかわっていないと思われるものもあれば、デザイナーはいるけれども全体として統率がとれていないものも多くあります。 すぐれた機能のアプリであっても、ユーザーの満足度はデザインのクオリティによってかなり左右されてしまいます。この連載では、Androidアプリデザインのクオリティ向上を願い、実装のノウハウとともにデザイナーのこだわりと気持ちをお伝えしていきたいと思います。 アプリの実際のXMLコーディングを通し、デザイナーがこだわるAndroidアプリのデザインを、いかにXMLで表現するかを突き詰めて考え、実装していきます。
Android 2.0のアイコンを描くには | dotproof
先日発売されたXperiaに続いて、4月末には最新のAndroid OS2.1を採用したHTCのDesireも発売開始され、いよいよ日本でもAndroidを採用した端末が普及する予感がします。Android OS 2.0以上では様々な新機能がサポートされているのですが、デザイナーの立場からいうとランチャーのアイコンが大きく変わっています。詳しい内容はAndroidデベロッパーサイトの「Icon Design Guidelines, Android 2.0」を見ていただくとして、旧ガイドラインではアイコンは斜めから見た立体表現だったものが、2.0からは（iPhoneのような）正面から見た半立体風の表現に改められています。もちろんこの変更は描きやすさを考慮したものだと思います。旧ガイドラインのような3D風のアイコンは描きにくいですからね。 ただiPhoneの場合はただの四角いグラフィックを用意
はじめまして。Androidアプリ開発＆デザイン（1/3） - ＠IT
＠ITスマソ開設記念！ 女子部部長に聞くAndroidアプリ制作のコツ 面白法人カヤック 意匠部 林真由美 2010/12/7 これから大注目のAndroidアプリ制作。どうやったら作れるのか。何に気を付ければいいのか。どのような視点が必要なのかを、Android女子部部長である矢野りんさんに、カヤックのデザイナばりみちゃんが教えてもらいました（編集部） 売れるAndroidアプリ作りのためのコツを探る いま、GoogleのモバイルOS「Android」の対応機種が増えて、盛り上がっている。 ものの作り手としては、この波に乗っかりたい！ でも、「Androidで動くアプリを作るには、どんなノウハウが必要なのか？」「どんなことが表現できるのか？」「何を作ったら面白いのか？ 」わたし同様、こんな、人に聞いたら恥ずかしそうな基本が、分からない人も多いはず。 Android女子部部長であり、デザイ
モバイルサイトにおける魅せ方[絵文字編] : LINE Corporation ディレクターブログ
こんにちは、『livedoor 歌詞』や『livedoor グリーティング』を担当している吉沢です。今回は、モバイルサイトの装飾に欠かせない、絵文字の効果的な使い方をご紹介したいと思います。 “装飾”と聞くとデザイナーの仕事のように思いますが、モバイルディレクターは、新規サイト立ち上げやサイトリニューアル以外は、UIやデザインを考えながらコーディングしていくため、絵文字を効果的に使えるセンスが必要になります。絵文字を効果的に使えると、少ないリソースで画面を装飾することができ、ユーザーにはテキストが直感的に理解されやすくなります。 それでは絵文字の効果的な使い方についてご紹介していきましょう。 こちらは装飾前のテキストになります。
CSSレイアウト時のよくやる失敗と対処法｜WEB制作（html,css(スタイルシート) )｜プログラムメモ
■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する（top 又は bottom） ■ <td>内のフォントが正しく指定したとおりでない（Win IE Mac IE） →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホアプリの作り方【超まとめ】UI編：スマホアプリのデザイン／グラフィック描画に役立つ記事39選 - ＠IT
よく使われているCSSハック12選（＋おまけ） | IDEA*IDEA