画面デザインpart1: 画面UIの解剖 -- 構成要素と操作（翻訳）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。本シリーズ（全3回）は主にデザイナーを想定していますが、フロントエンド開発者、フルスタック開発者、HTMLコーダーにも有用な内容です。 概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The Anatomy of all Interfaces -- Part I. A quick overview of how all digital things you interact with are constructed. 著者: Oscar Gonzalez 本記事は、「デザインシステム」および画面UIのデザインや開発におけるデザインシステムの重要性について解説するシリーズ記事のpart 1です。 解剖学（anatomy）は、生き物を部分に切り分けて構造を記述する学問です。画面UIも生き物と同じように、誕生（プロジェクト発足）、成長（UIデザイナ
UXデザイナー深津貴之が語る身も蓋もない組織論!? 「ユーザー目線のない会社からは逃げるしかない」「それでもそこでがんばりたいなら……」 | HRナビ by リクルート
PCやスマートフォンを開けば、そこには不愉快なUIが至るところにあふれている。さして文章が長くもないのにページが4分割されているニュース記事（腹立たしいことに4ページ目はたった1行だったりする）、サッカーのハイライト動画でシュートの行方をカメラが追い始めた瞬間に始まる動画広告、場面転換をするたびにCMが挟み込まれ、もはやCMを見ているのかゲームをしているのかわからなくなるアドベンチャーゲームアプリなど……。 さらに不幸なことは、ウェブメディアの編集部や動画配信者、ゲーム制作会社の制作現場にいる人たちにとっても、これは決して愉快な状況ではないということだ。罵詈雑言混じりの苦情が書かれたユーザー評価欄やSNSを見ながら彼らは言うだろう。「誰が好き好んでこんなUIを作るものか」と。 関わる誰から見てもおかしなUIは、それでもなぜ量産され世の中のストレスを増幅させ続けているのだろうか？ その負のス
Sketchでデザインしながらガイドラインを作ろう｜Chizuru Kamisono
はじめまして。UIデザイナーのカミソルです。 わたしはOHAKO.incの受託事業の部署でサービスの体験設計からUIデザインをしています。 今回はSketchのSymbol機能を使って、デザインしながら効率よくガイドラインを作る方法について書きたいと思います！ ※この記事はSketch Advent Calendar 2017 19日目の記事です。 なぜデザインしながらガイドライン化したいのかガイドラインを作る目的は2つあります。 1. エンジニアとの連携のため "カラーの種類"、"テキストスタイルの種類"、"画像として書き出すもの"、"コンポーネント"の4つがはっきり伝わるSketchデータにしたい。 2. デザイン運用のため デザインを運用をするとき、誰でも追加や変更がしやすいようにしたい。「デザインしながら」とつけた理由は、デザインしていたら自然にガイドラインが出来ていた。という
チームの課題から考える、Adobe XDとSketchの導入メリット | PSYENCE:MEDIA
この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2017 の投稿記事です。 こんにちは！現在キッズリーのデザインを担当しているデザイナーの町田（@macheri_me）です。 今年で中途入社３年目となりました。本日は弊社の制作事例をもとに、AdobeXD・Sketchの活用法についてご紹介します。 【この記事を読んでもらいたい人】 これからAdobe XD、Sketchどちらを導入しようか悩んでいる人 デザイン制作フローの中で課題を抱えており、解決したい人 Adobe XDとSketch。自分のチームにはどちらが最適か サービスのデザインを制作する際、何のツールを使っていますか？少し前だと Adobe Illustrator、Photoshop、Fireworksといったグラフィックツールが多かったかと思います。しかしながら、これらはUIデ
デザイン作業のイライラ解消！効果的なデザインフレームワークの作り方【2017年版】
もしあなたがウェブデザインに携わっていれば、「デザイン・フレームワーク」や「UIフレームワーク」、「UIキット」、「パターンライブラリ」などの言葉を聞いたことがあるかもしれません。これらはどれも、商品やサービスに利用される設計基準やテンプレート、UIパターン、コンポーネントとそのデザイン言語全般を指します。 これまでデザイン・フレームワークを作成したことがない人は、時間のかかる作業に見えるかもしれませんが、一度作成してしまえばデザイン制作をスピードアップさせ、全体的な作業の効率化を実現できます。 まず、デザインフレームワークが解決できる問題点や、デザインフレームワークが必要な理由、そしてデザイン制作時に必要なコンポーネント素材について詳しく見ていきましょう。 デザイン・フレームワークとは？ すべてのユーザーインターフェース・デザインは、真っ白のアートボードからはじまり、デザイナーはそこに機
現場で必要なデザインツールの見つけ方
ツールは表現から連携の時代へ 制作プロセスは、設計→デザイン→実装という真っ直ぐな線になっているように思われがちですが、あちこちに『溝』があります。関わる人が増えたり、心理的・身体的距離があれば、それだけ溝を埋めるための作業が増えていきます。 決裁者の意図・ビジネスの目的を読み取って具体的な要件にするための溝 要件を伝え、画面設計に落とし込むときの溝 画面設計から適切だと考えられるビジュアル言語を作るときの溝 ビジュアルデザインから人々が見て、触れるような状態にするための溝 デザインツールはデザイナーの都合で選べば良いわけではなく、ツールによってはプロセスの溝を深いものにしてしまう場合があります。 Photoshop や Illustrator のような従来のデザインツールと、過去 5 年くらいに登場したデザインツールの大きな違いは、デザインプロセスにおいて解決したい課題が違うところです。
デザイン言語システムを入れたらコミュニケーションコストがぐっと下がった話〜メドレー TechLunch〜 | MEDLEY Developer Portal
2017-08-03デザイン言語システムを入れたらコミュニケーションコストがぐっと下がった話〜メドレー TechLunch〜ビールが美味しい季節ですね！ 最近飲みすぎて嫁に叱られて、飲み会自粛中のデザイナー・マエダです。 メドレーでは TechLunch という社内勉強会を実施しているのですが、デザインについて私も発表する機会をいただきましたので、その内容を紹介させていただきます。テーマは「DLS の導入について」です。発表資料は記事の最後をご覧ください。 DLS（デザイン言語システム）とはDLS とは DesignLanguageSystem の略で、すごい単純にいえばデザインガイドラインみたいにUI に一貫性をもたせるため、配色やレイアウト、タイポグラフィやマージンなどのルールを策定するものです。 私が主に担当しているオンライン診療アプリ「CLINICS」は、iOS、Android、W
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
重要視されるためのデザイナーの条件 : could
内輪受けは止めにしようではないか LSD LAB で公開されている UIデザイナー不要説は、テクノロジーと付き合うデザイナーであれば一読しておきたい記事のひとつです。私が記事を読んで感じた課題は、 UI デザインが重要視されているかどうかということではなく、果たしてデザイナーは デザインを営業できているかどうかというところです。 たとえビジネスゴールが共有されていたとしても、デザイナーが考える UI デザインの価値と、それ以外の方が考える UI デザインの価値が異なることがあります。特にデザイナーが考える価値は、内輪受けになりやすいことが多々あるように思えます。デザイナーが「すごく良いよね」「イケてるね」というものは、ほとんどの場合デザイナー以外には理解されません。内輪で分かりやすい言葉や感覚で語りかけても、聞き手は「？」（価値を感じない）になってしまいます。 今でもデザイナーのなかでは「
グリッドシステムベースのデザインをするときに気をつけること | バニデザノート
グリッドシステムのフレームワークでデザインを作成する際、コーディングの時点で困らないデザイン方法です。 完全に順守すればほとんどカラム落ちやブラウザのことも考えずに作れると思います。 ただ、例外の部分もあって構わないと私は思っているので、あくまでも基本ということで、拡張は自由にやってください。
期間限定無料！約50,000円分の高品質なウェブ用の有料素材・フォントがダウンロードできますよ
日本時間29日の夜まで限定で、$499分、日本円で約50,000円分の有料のウェブ用の素材やフォント計471種類が無料でダウンロードできるので、紹介します。 ※為替の変動が激しいので、これを書いている現在$499は48,432円です。 使い道が限定されたような素材なんでしょ？と思う人もいるかもしれませんが、いやいやこれがなかなかの素材が揃っていました。 素材の提供元は、下記のサイトやクリエイティブ集団です。 素材の提供元 当ブログでも紹介したことのあるDesignModo, sitepoint, vandelayなども含まれています。 ダウンロードしたので素材をキャプチャで紹介する、、、前に、ダウンロード方法から紹介します。 素材のダウンロード ダウンロードは、下記サイトにアクセスします。
プログラミングとデザインを続けている理由 - つきあたりを右に
最近になって、ひとつ気付いた事がある。 僕は仕事としてプログラミングやデザインをするのに向いていない。 一応、職業としてはソフトウェア・エンジニアという肩書きを持っており、 UI と UX を専門とする研究職という立場にはなっている。 プロジェクトの進行や状況に応じてプログラマー役、デザイナー役、ビジネスプランナー役をバタバタと切り替えているので、最近は「必要に応じてなんでもやってる感あるので、あんまり自分を専門家的に思えなくなってきたっていうかタダの小間使いでは」としか思えないのではあるが。 ”何か”を作りたい、成し遂げたいと思ってものづくりに取り組んでいない 他のプログラマー、エンジニアやデザイナーが、実際どうなのかは知らないけれど自身がプログラミングを独学で始めた時によく言われた事が 「何かやりたいこととか、作りたいものが無いのに覚えたり学ぼうとしても、効果は低く、あまり意味が無い」
オライリーさんから発売の「モバイル デザインパターン」監訳いたしました | fladdict
オライリーさんからでる、「モバイル デザインパターン」という本の監訳いたしました。まさかの動物本デビュー。9月24日発売ですが、Amazonの在庫は少なめと思われるのでご予約をおすすめしたり。 本書は、iPhone/Androidの定番インターフェースを分類した、インターフェース図鑑。 「このUIには、こういう意図があって、こんなシチュエーションで使うといいですよ！！」というのが、ざっと100パターンほど紹介されています。 企画を考える時、ワイヤーフレームを作る時、あるいは直面している問題の先行事例がないか調べるとき、この本はとっても大活躍。パラパラめくって気になるパターンを読むだけでも、色々と新発見ができます。 営業的に、カンペや目録っぽい売り方がされると予想される本書ですが、実際はどちらかというと、将棋の定石や空手の型に近い感じの本。 まずは型を覚え、自然に繰り出せるようになる為の本で
様々なイケてるUIを参考にできるサイト | バシャログ。
足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト
UIデザイナーが知っておくべきエンドユーザーの10の特徴
ユーザーの視点に立ってデザインされていないインターフェースは、エンドユーザーに受け入れてもらえないはずだ。そこで本記事では、UIデザイナーが念頭に置いておくべきユーザーの習慣や考え方について焦点を当てる。 つい最近、「Ubuntu Unity」はUbuntuに正式搭載されてから1周年を迎えた。また、「Windows 8」はリリースを間近に控えている。こういった状況のなか、すべてのユーザーインターフェース（UI）は同じように作られていないという事実が明らかになってきている。実際のところ、コンピュータの使い方に革命的な変化をもたらすような素晴らしいUIデザインもあり得るだろうが、エンドユーザーを念頭に置いていないものは、その素晴らしさを証明する間もなく失敗作という烙印を押されてしまうはずだ。 筆者は長年に渡るコンピュータ経験のなかで、ほとんどすべてのLinuxデスクトップと、あらゆるバージョン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
frasco.io
ページネーションのベストプラクティス | POSTD
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Webデザイナーが知っておきたいアプリの知識〜もしもアプリのデザインを頼まれたら？〜
