webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は

Rettyでデザイナーをしているヤマモトマユミ(@mayya)です。一緒のチームのデザイナーから「ヤマモトさんは普段デザインについて話していることを発信した方がいい！」と強く言われまして、身近な人に話したデザインについての考え方やデザインの引き出しについて、ゆるりと書いていければなと思い、今筆を取っています（正しくはPCのキーボードを叩いています） 今日は、そんな一緒のチームで働くデザイナーに話した「強弱のデザイン」について書こうと思います。 強弱のデザインパターンをつくる時の失敗例昔よくやった失敗例として、強弱を変えたパターンをデザインした時に、強いパターンに弱い要素を使ったり、逆に弱いパターンに記号を追加をしたり、最終的に強弱の差がないパターンを作ってしまった！ということがよくありました。 そんな失敗を避けるためにも、強弱を変える要素「大きさ」「太さ」「高さ」「明度」「彩度」「色相」「

最近UIトレースをしていて気になっていたことがあり、そのモヤモヤを払拭する為に自分なりに調べてみました。 普段何気なく利用している多くのアプリには、タブバーというものがあります。ただ、アプリによってアイコンの下に項目名があったりなかったり、、、 例えば、Twitterやfacebookには項目名がありません。これは、日常的に利用するようになりアイコンに普遍的な意味を持たせることに成功した為だと考えられます。しかし、この２つのアプリも昔は項目名がありました。 項目名を取り除くことでタブバーの高さを少しでも低くすることができますが、アプリ全体でいうと項目名があることが多いです。 その理由ってなんとなくでは理解しています。 アイコンの示す項目に対してユーザーの潜在的意識レベルを考えると、それなりの認知度と利用歴の長さがないと取り除くのは難しいと考えられます。 では、どのレベルであれば取り除いても

Androidエンジニア デザイン部 #1 https://nohana.connpass.com/event/80530/ 続きのwebはこちら https://qiita.com/ogapants/items/8a551ed3b16bcf0cc3ed

基本的なUIパーツの名称の違い ベースとなるUIの名称もiOSとAndroidで少し違います。 共通認識を持つためには正しく覚えておく必要がありそうです。 戻るボタン iOSとAndroidで大きく違うのは「戻るボタン」です。 iOS ナビゲーションバーの左側に配置されることが多いです。 Android OS標準の物理ボタンとして左下に置いてあります。 Androidのアクションバーの左側に配置されているのは「UPボタン」です。 動き自体は戻るボタンと似ているのですが、前のページ戻るのではなく、親のページを表示します。 ページ遷移の概念 UIではないのですが、戻るボタンやUPボタンの動きを理解する上でページ遷移の違いについて理解する必要があります。 iOS iOSのページ遷移はプッシュ遷移が基本です。 階層を掘っていくイメージになります。 Android Androidはページを積み重ねて

店舗の地図はシンプルなリスト表示より見た目は魅力的かもしれない。しかし、それによってモバイルデバイスで生じるユーザビリティ上の課題はあまりに多い。 Maps and Location Finders on Mobile Devices by Aurora Bedford on January 19, 2014 日本語版2014年2月17日公開 所在地を見つけて行き方を知るというのは、ユーザーがスマートフォンで最もよく行うタスクの1つである。モバイルのWebサイトやアプリを利用して、ユーザーがどれだけ素早く容易にあなた方の所在地を見つけられるかはあなた方のビジネスの成功に大きな影響を与えかねない。所在地を見つけるのが大変だと、モバイルユーザーがライバル企業のほうを向いてしまい、二度と戻ってこなくなってしまう可能性もあるからである。その上、たとえユーザーがあなた方の所在地をがんばって見つけてく

（編集部にて一部加筆修正しております。最終更新：2024年6月5日） こんにちは。アイスリーデザインでスマホサイトのデザインを担当している武本です。弊社では大手ECサイトのスマホサイトのデザインを作成することがもっとも多いです。 そこで重要なのが登録・入力フォーム。 登録をしてもらうのはもちろんの事、入力してもらった情報はデータとしても非常に重要。是非とも入力してもらいたい所ですよね。僕が普段、フォームページをデザインする際に「どうしたら登録してもらえるのか」、「どうしたら入力しやすいのか」を考え、気をつけている10個のポイントを紹介したいと思います。 1. 文字はできるだけ少なくする スマホ画面に同じような言葉がたくさん詰まっているのは、そのページを見るだけでページの第一印象が「入力が面倒くさそう...」となってしまいます。ユーザーに一度そう思われてしまうと、絶対といってもいいほどに、登

HTML5 Conference 2018 の登壇資料のまとめです。 資料を発見次第随時アップデートしていきます。 https://events.html5j.org/conference/2018/11/ 2018年11月25日（日） 東京電機大学 千住キャンパス 1号館 タイムテーブル https://events.html5j.org/conference/2018/11/session/ ハッシュタグ 総合: #html5j ホール（2階）: #html5j_h 各ルーム（1階:A-C/2階:D,E）: #html5j_a #html5j_b #html5j_c #html5j_d #html5j_e セッション ZOZOのグローバルECのフロントエンドアーキテクチャ設計　（権守健嗣さん） 光を超えるためのフロントエンドアーキテクチャ （mizchiさん） TypeScript E

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

公式っぽいもの Wires いい感じのワイヤフレーム Wires, free wireframe kits for Adobe XD on Behance Wires 日本語版 Wires jp on Behance iOS Apple制作 Apple Design Resources - Apple Developer Material Google制作 Sticker sheets & icons - Resources - Material Design Windows Microsoft制作 UWP アプリ用の設計ツールキットとサンプル - UWP app developer | Microsoft Docs その他 xd resources XDのリソースが揃ってます。 xd resources xdguru - XD Free UI kits Adobe XD Free UI

こんにちは、AID（Ameba innovation Designers）という社内デザインチームに所属している早坂です。突然ですが、みなさんはAtomic Designをちゃんと理解していますか？ 今回はAtomic Designの概念から学ぼうということで、『AbemaTV』エンジニアの五藤さんをお呼びして講義をしていただきました。今回はその内容を共有したいと思います。 ▼当日使用していたスライドはこちら▼ Atomic Designとは「変更しやすいデザイン整理術」 講義の中で、Atomic Designがなぜ必要なのか、『AbemaTV』の具体例を元にお話ししてくださいました。 ・デザインの引き継ぎのタイミングで引き継ぎ先のデザイナーは困っていないか ・デザインの負債を抱えていないか この視点で現状のデザイン開発に問題がないかチェックします。お話を聞くとよくある話ばかりで耳が痛い。

JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 今年も半分以上過ぎましたが、2018年はすでにWebデザインにとって特筆すべき年となっています。ここ数年におけるデザインの進化が実を結びつつあり、それはデザインシステムやタクタイルデザイン（Tactile Design）といったトレンド、レトロスタイルの復興といった楽しく精力的なスタイルから見てとれるでしょう。Webデザインで何が起きていて、将来どのようになるのかを熟慮することが、これまで以上に必要不可欠となっています。 この記事では、2018年のもっとも影響力のある６つのWebデザイントレンドを取りあげます。１つ目は、新しくデザインの必需品になりつつあるトレンドです。 １. コンポーネントベースのデザインシス

ちなみにAdeleは「The repository of publicly available design systems and pattern libraries」と書かれているようにGithubのリポジトリで管理されており、興味がある人はプロジェクトに参加できるようです。 余談ですがサイト上やGithubでも述べられているように、このプロジェクトはAwesome Design Systemsやstyleguides.ioに影響を受けていることがわかります。 本記事ではAdele上で紹介されているデザインシステム・パターンライブラリについて触れつつ、それらを理解するためにどのような項目が設定されているのかを探ってみます。 Adeleにあるのはデザインシステムだけではない ……とその前に。Adeleの説明にもありますが、サイト上にはデザインシステムの他にパターンライブラリ（スタイルガイ

グッドパッチでは、これまで多くの企業の新規事業立ち上げやWebサービス、アプリのリニューアルを支援してきました。そしてその多くは数ヶ月の期間がかかり、大規模のプロジェクトでは1年を超えることもあります。実際にサービスを運営されている方からは「UI/UXが大事なのは理解しているけど、予算的にフルリニューアルは難しい」「UI/UXといっても何をしていいのかわからない」といった声をよく聞きます。 そのようなニーズにお応えして、グッドパッチでは短期間で実施できる『Quick Design Install Projects』というサービスをご提供しています。今回はその中でも最短で実施可能な「UI/UXフィードバック」でも用いているヒューリスティック評価の手法をご紹介できればと思います。サービスのUI上の課題を短期間で、かつユーザー視点で導き出し、迅速なUI改善を実現しましょう。 ヒューリスティック評

SeanはCodal社の技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。 UXとUIの違いを知らない人に説明する最善の方法は、比喩を使って説明することです。UIが車の見た目だとすると、UXは運転の仕方です。またUIが出会い系のプロフィールだとしたら、UXは出会い方です。これらの比較は違いを上手く表している一方で、UIの複雑性を軽視していることもあります。 UIとは、単なる塗装やTinderのプロフィールではありません。UIとは全体の環境です。ピクセルひとつひとつが重要であり、多面的な構造を持っています。私たちは、サービスのプラットフォームを選ぶときは全体の体験を最適化できるよう注意深く考えます。一方で、配色理論やレイアウト、タイポグラフィ、フォントの選択などの小さな要素については、数秒以上かけて考慮されることは滅多にありません。 そのため

2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、今回は凝ったデザインのものではない、シンプルなワイヤーフレーム向けのUIキットをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ シンプルなワイヤーフレーム制作向けのUIキット Wires jp Wires jpはAdobeが公開しているUIキット。これまでは後述する英語表記のもののみでしたが、この度日本語バージョンがリリースされました！ 日本のWebサイトでよく見かけるデザイン要素がつまっています。テキストも日本のものらしく変更されていますよ。 W

Easily find the best Material color for your projects. Here is 30 color combination based on material design color palette. By clicking color sample bar, You can check usage example in material design UI. Each of color combinations consists of following three kinds of colors. (1) Main (2) Optional (3) Accent For details, see Google Guideline. Contents

4月27日にUXのグローバルカンファレンス「UXify 2018 Japan」が開催されました。 前編に引き続き、行われた５セッションのうち、残りの２セッションの内容をお送りします。 4. UIと合意形成 ４つ目のセッションはインフラジスティックス・ジャパン株式会社の東氏。UI開発にフォーカスをあて、UIのとらえ方、また内外の合意形成における考え方について語ってくれました。 まず東氏は、「UI」を突き詰めて考えて行くことで、対象が明確になり、UIを通じて提供されるよりよい「UX」をしっかり考えられるようになる、と語りました。 チームの外側への合意形成 テーマである合意形成において、チームの内外に多くのステークホルダーが存在するものですが、それぞれのUIに関する理解や知見はバラバラです。 特に外部との合意形成においては、それが顕著であり、「総論賛成・各論反対」の状態に陥りがちなので、「誰が」

モバイルアプリ領域の動きは非常に早く、UXデザインにおいて成功するためには、デザイナーは先見の明を持ち、新たな課題に備えなければなりません。 ここでは皆さんのタスクを軽減するために、2018年において影響力がもっとも大きいであろうトレンドをリストアップしました。 １. ユーザージャーニーの簡略化 アプリやWebサイトを使用する場合、ユーザーには特定の目的があります。その目的を達成するために費やす労力が少ないほど、より良い体験となるのです。 リニアユーザフロー リニアデザイン体験とは、ユーザーが各ステップを１つのアクションで完了できるようにするための開始・途中・終了があるUXのことです。タスクを完了するために必要な時間を見積もることができるため、リニアユーザーフローはユーザーのためになります。

ProtoPieとは？ インタラクションデザイン・アニメーションデザイン ProtoPieとは、インタラクションデザイン・アニメーションデザイン のためのモックアップツールで、 Sketchからインポートができ、スクロールやページングなど、細かいインタラクションを表現できる素晴らしいソフトウェアです 昨今では、技術力や表現力の向上によって、常に新たなユーザー体験届けるための試みが行われています そのため、今ではUIを考える上で、従来の静的なものでは、より良いユーザー体験が届けることができない時代になってしまいました よりリッチで、ワクワクさせるユーザー体験を作り上げるためには、デザイナーがインタラクションやアニメーションの表現にも精通していることが求められています そこで、デザイナー必見のProtoPieをここで紹介したいと思います！ ProtoPie デモ例 どんなものが作れるか？ まず