デザイナー向けに行なったHTML勉強会の資料を公開します｜sakito

2023/08/08 394 users

今回はChatwork株式会社のデザイナー向けに行なったHTML勉強会で使用した解説資料をお伝えします。私は3年ほど前からChatwork株式会社の開発のサポートやデザイン基盤活動のアドバイザーとして参画しており、その活動の一環で会を開催しました。 開催の意図と目的開催概要は@emimさんが、UI設計はHTMLの理解からというタ... 続きを読む

高速周回が迷わずできる！ 「ウマ娘」UI設計の根幹とは 大量の情報でも「整理とルール化」でわかりやすい画面を作る

2021/11/13 176 users

続きを読む

Amebaのデザインシステム「Spindle」の全貌公開 | CyberAgent Developers Blog

2021/09/17 150 users

メディア統括本部・技術横断室の谷です。組織横断の活動しながら、AmebaやAmebaマンガという事業に関わっています。実務としては、コード実装をメインに、UI設計やUX設計、最近ではユーザーインタビュー等のリサーチ業務をおこなっています。 この記事では私が立ち上げから2年くらいかけて関わってきたAmebaのデザインシ... 続きを読む

Twitterにはリプライ欄を返信ではなく『コメント欄』と思っている人間がいる説「ツイッターへのコメント欄は自分のツイートなんだよ」 - Togetter

2021/09/04 194 users

Melville @MelvilleTw Twitterにはリプライ欄をリプライ欄だと思っている人間と、リプライ欄をコメント欄だと思っている人間がいることを理解しなければならない 2021-09-03 08:47:55 Melville @MelvilleTw これに対する僕の見解ですが、機能に対する理解が人によって違うのはUI設計が悪いです(つまり悪いのはTwitter) ... 続きを読む

フロントエンドエンジニアがUI設計〜実装で考えていること - Medley Developer Blog

2019/03/27 111 users

おはこんばんちは、開発本部エンジニアの大岡です。 先日、TechLunchという社内勉強会で「フロントエンジニアがUI設計〜実装で考えていること」という内容で発表しました。UI設計から実装の細かい話ではなくどういう気持ちで望んでるかという話で、基本的なことしか書いていませんが紹介させていただければと思います。 ... 続きを読む

デザイナーが応用情報技術者の試験を受けて感じた3つのこと - ペパボテックブログ

2018/07/04 81 users

はじめまして。てっちゃん @outskirtsHinode と申します。 カラーミーリピートというサービスでデザイナーをしています。 主に管理画面のUI設計や検証といった作業を行っています。 今回、ひょんなことから応用情報技術者試験という資格試験を受けてみました。 その時感じたことをまとめてみようと思います。 応用情報技... 続きを読む

フロントエンドの制作者が知っておきたい、Atomic Designを使用したコンポーネントベースのUI設計が分かる良書 | コリス

2018/05/11 52 users

ここ数年で、WebページやスマホアプリのUIを開発する際に、コンポーネントベースの実装が増えてきました。元々はソフトウェア開発で一般的な考え方でしたが、メンテナンス性に優れ、再利用性も高く、UIもより効率的に実装できます。 Atomic Designを使用したコンポーネントベースのUI設計が実務レベルで詳しく解説されたオススメの本を紹介します。 今よりもっと効率的にUIに取り組みたい、メンテナンス... 続きを読む

モバイルアプリのUI設計に大切な、7つの基本アニメーションまとめ - PhotoshopVIP

2016/03/21 639 users

「良いデザインは明きらかで、偉大なデザインは目に見えない。（英: Good design is obvious and great design is invisible.）」ということばを聞いたことがあるかもしれませんが、モバイルアプリの開発にアニメーションを利用するときも、同じ基本原則が適用できます。 うまく適用されたアニメーションは、ユーザーフレンドリーで魅力的にアプリを仕上げるだけでなく、... 続きを読む

デザイン性の高いUIデザインを100日紹介するサイト「100 Days UI」 | DesignDevelop

2015/10/12 75 users

デザインベースを作り上げるのに必要なUI設計。またその先の設計に基づいたデザイン性のあるクリエイティブも重要となってきます。今回はそんなシーンで参考にしたい、デザイン性の高いUIデザインを100日紹介するサイト「100 Days UI」を紹介したいと思います。 いろいろな種類のデザインUIがピックアップされリストギャラリーとなり紹介されています。 詳しくは以下 グラフやチャート、カウントダウン、プ... 続きを読む

アプリ開発をしたい方、必見！　UI設計から公開までを押さえた『ほんきで学ぶAndroidアプリ開発入門』刊行：CodeZine

2015/07/13 79 users

翔泳社では7月13日（月）、知識ゼロからAndroidアプリを開発できる『ほんきで学ぶAndroidアプリ開発入門』を刊行しました。手軽で敷居が低いAndroidアプリですが、何からやればいいのか分からず手をつけていない方もいらっしゃるはず。ぜひ本書で「入門」してみてください。 本日刊行された『ほんきで学ぶAndroidアプリ開発入門 Android Studio、Android SDK 5対応』... 続きを読む

こんなやり方があったとは！IllustratorやSketchでWebデザインをはじめる前に必ず読んでおきたい -ベクターデータの教科書 | コリス

2015/06/03 175 users

最近のWebデザインに、ベクターデータの存在は欠かせないものになってきました。 アイコンやロゴなどをSVGで使用したり、Webページやアプリのデザイン・UI設計といった制作のワークフローをベクターで作業している人も増えてきました。 今までPhotoshopでデザインをしていた人には、IllustratorやSketchを使うとそんな事もできるのか！ と目からウロコかもしれません。 Illustra... 続きを読む

ユーザーインターフェースの質を高める手法「ユーザーはヨッパライ法」とは - GIGAZINE

2014/04/30 142 users

PCを操作するキーボードやタッチパネル、自動車を運転する時のハンドルやペダル類、あるいはウェブページの操作画面など、ユーザーが何かを操作したり情報をやりとりする際に触れる部分は総称してユーザインタフェース(UI)と呼ばれており、その仕上がり具合によっては製品の評価が大きく左右されることもあります。製品企画をおこなう際には重要な項目の1つとなっているUI設計ですが、特にウェブサイトにおけるUI品質を... 続きを読む

AppleがiOS 7のUIデザイン向けのマイクロサイトを提供

2014/03/19 73 users

AppleがiOS 7のUIデザイン向けのマイクロサイトを提供 作者： Sergio De Simone , 翻訳者 徳武 聡 投稿日 2014年3月19日 | 共有 |  後で読む マイリーディングリスト Appleは登録済みのiOS開発者向けに新しいマイクロサイトを提供し、iOS 7のUI設計に関する動画やドキュメントやホワイトペーパーを公開している。サイトの目的は開発者に"iOS 7向けに洗... 続きを読む

iOSヒューマンインターフェイスガイドライン: UI設計の基本事項

2013/10/03 579 users

続きを読む

クックパッドのUI設計の秘訣は仮説思考にあった！ - UX-design

2013/04/11 311 users

2013-04-11 クックパッドのUI設計の秘訣は仮説思考にあった！ クックパッドと言えばRubyの匠として有名ですが、どうやらUX / UI に関してもめちゃくちゃ力を入れているようで、「こりゃ調べるっきゃねぇ！」と思い立ったが吉日。ググってるとこんな記事（【インタビュー】クックパッドのUIデザイナー：「エンジニアの仕事が0を1にする仕事なら、デザインは1を100にする仕事 」）に出会うことが... 続きを読む

Dropbox が Mailbox を買収、アプリ公開から一か月あまり - Engadget Japanese

2013/03/16 70 users

Dropbox が Mailbox を買収、アプリ公開から一か月あまり By Ittousai posted 2013年03月16日 14時51分 0 Dropbox がメールアプリ Mailbox の開発元 Orchestra社を買収しました。Mailbox は今年の2月にリリースされたばかりのiOS用メールクライアント。 「メールとはタスク管理である」という見切りに基づくUI設計と、スワイプを... 続きを読む

Webとは一味違うスマホアプリの動的UI設計は、「脱・ワイヤーフレーム思考」で【連載:えふしん⑫】 - エンジニアtype

2013/03/01 120 users

「取り扱う情報量が多いものをどう整理するか？」ということを考えると、確かにFacebookをマネするのは合理的だ。しかし、なぜか“流行っているから使ってみました”感は否めない。 もし、そのUIデザインをマネする場合は、コンテンツの粒度や理由が、元の情報構造に合ってないと、サイズの合わないスーツを着ているようにどこか気持ちが悪いものに感じる。 「えっ、そのUIを採用する理由ってあるの？」と違和感を感... 続きを読む

主要SNS網羅。カスタマイズ、UI設計の参考に。画面サイズ早見表

2013/01/09 157 users

Facebook、Twitterなどソーシャルメディアでは個人やブランドで開設したページのデザインを多少カスタマイズできます。 可能な限り、イメージに合うものにしたいところ。 でも、サービスごとにプロフィール画像やカバー画像のサイズが違ったりして、いちいち調べたりするわけです。 そんなときに、このチートシートは活躍しそう。 と思ったけど、むしろUIデザイナーの参考になる！？ 次のソーシャルメディア... 続きを読む

【UI設計】シンプルに「見せる」ための、3つの簡単なテクニック [ITL]

2012/10/02 63 users

photo by Julio Ignacio Olivares Soto シンプルに作るのが苦手な日本人 最近はネットサービスを作る上でも「シンプルがいい」と言われることが多いと思いますが、基本的に日本人はシンプルに作ることが苦手です。この状況を打破するために、まず僕は「過剰は離脱を生み、不足は要望を生む」という考え方を提唱したいです。 過剰に与えすぎればサービスのアイデンティティは薄くなり、また... 続きを読む

スマートフォンアプリやスマホサイトのUI設計をする際に参考になる記事まとめ7つ - W3Q

2012/03/23 176 users

【スマートフォンのユーザビリティチェックリスト】 1.小さくし過ぎない、詰め込み過ぎない 2.バラつきを無くす 3.タップしたオブジェクトは反応させる 4.画面遷移アニメーションを設定する 5.画像の解像度はきちんと合わせる 6.実装側でもデザインする 7.ローディング中も画面操作できるようにする 8.真っ白なローディング画面を避ける 9.更新頻度の低いコンテンツはローカルで保持する 続きを読む

エンジニアにもわかる「ユーザーインターフェース設計」 (Yahoo! JAPAN Tech Blog)

2009/04/06 779 users

はじめに 島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース（以下UI）設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。 エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい……、そんな印象を持っておら... 続きを読む

ウノウラボ Unoh Labs: 「視線を導く」方法あれこれ

2007/09/07 290 users

yamazakiです。毎度毎度技術系なこのウノウラボには馴染まない話題を振りまいているわけですが、さてはてどの程度お役に立てているものか…。 今回のテーマは「視線」です。例えばWebサイトは「見てもらう」ことが大事ですし、また、UI設計の場面などでも、「視線をうまく導いてやる」のは使い勝手をよくする上でも大切なことだと思います。といったわけで、ユーザの視線をうまく捕まえてみたり導いてみたりする上で... 続きを読む

ソシオメディア | UIデザインパターン

2007/05/28 1721 users

ソシオメディアでは、これまでのUI設計・評価・標準化サービスの経験に基づき、様々なUIデザインのベストプラクティスをパターン化しています。各種アプリケーションのUI設計効率とユーザビリティの向上に役立つノウハウとして、その一部を公開していきます。 続きを読む

FPN-団塊〜シニア層向けのWeb設計　やっちゃいけない10のＵＩ

2006/11/16 313 users

■ネットとライフスタイル 団塊〜シニア層向けのWeb設計　やっちゃいけない10のＵＩ 2006-11-17 8:10:00 by wa-ren 一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみた... 続きを読む