UIとUXデザインについて基礎からしっかり学べる解説書 -現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
WebサイトとスマホアプリのUIデザイン、UXデザインのさまざまな手法やプロセスを網羅的に幅広く、分かりやすく解説した解説書を紹介します。 UI/UXデザインを一通り学んでおきたい人にお勧めで、実際の現場や最近の流れを受けて必要となる知識を身につけることができます。さらに、UI/UXデザイナーのキャリアにも触れられており、会社選びや働き方について参考になります。 本書はUI/UXデザインの初学者向けの解説書です。一つひとつの項目について深掘りはされていませんが、幅広くUI/UXデザイナーとして必要になる知識を得ることができます。手法やプロセスなどはそれだけで一冊の書籍になることもあるので、まずは一通り知っておくことが大事です。 全ページカラーで、キャプチャや図も豊富なので、楽しく学ぶことができます。
UIデザインの小さな工夫がよく分かる良書！ 実践的なテクニックを詳しく解説したデザイン書 -縁の下のUIデザイン
WebサイトやスマホアプリのUIデザインには、小さな工夫がたくさん詰まっています。「なぜボタンがここにあるのか」「なぜその要素に赤を使用し、または避けなければいけないのか」などUIデザインに施された工夫の意味と意図を具体的な事例で詳しく解説したデザイン書を紹介します。 UIデザインの実践的な知識やテクニックを深めたい人、デザインの視野を広げたい人に特にオススメします！ 本書は「WEB+DB PRESS」に掲載された著者の連載記事を最近のUIデザインに合わせて大幅に加筆修正し、新規の書き下ろしも加えられた解説書です。 WebサイトやスマホアプリのUIデザインに関するノウハウがさまざまな角度からまとめられており、具体的なUIデザインのテクニックも豊富に解説されています。
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
Figmaでよく使う機能を詳しく解説！ 短期間で使いこなせるようになりたい人にぴったりな解説書 -Figmaデザイン入門
ここ1, 2年でFigmaが急速に浸透しました。日本でも最近はFigmaだけでUIを制作しているところも増え、仕様やサイトマップの設計、さらにはチームでのコミュニケーションツールとしてもFigmaが使用されています。 Figmaの使い方をひと通り学びたい人に、短期間で使えるようになりたい人に、使用頻度の高い機能を優先的に解説した実用性の高い解説書を紹介します。 著者はQiitaのUIデザイナーである綿貫氏、Figmaを中心にして社内のデザインシステムを整備し、現在も拡張され続けているとのことです。 本書ではFigmaによるUIデザインはもちろん、その前段階であるWebサイトの設計図をはじめ、プロトタイプの作成、デベロッパーへのハンドオフ、さらにチームでFigmaを使用する便利機能まで解説されています。
「使える」Webアプリにするには、アクセシブルなUI設計を学びたいデザイナー・デベロッパーにお勧めの良書 -Webアプリケーションアクセシビリティ
アクセシビリティに興味があるけど、何から始めればよいのか分からない、勉強するならしっかり学びたい、そんな人にお勧めの解説書を紹介します。 アクセシビリティに取り組むときに大事なのは、できるところから始めること。本書を読んで、アクセシビリティの本質を正しく理解し、自分のWebアプリやサイトにおける課題をひとつずつ改善できます。 本書は、先月発売されたばかり！ 著者の一人伊原氏は、元BAで私の同僚でした。退社後には東京都新型コロナウイルス感染症対策サイトのアクセシビリティ改善をサポートするなどで活躍しています。本書でもそういった経験を元にしたUIデザインの具体的な事例も非常に多く、制作現場の生きた言葉での解説は分かりやすいと思います。 Amazonでもさっそく、オール5の高評価レビューがたくさんついています。
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォー
UIデザイナーは要チェック！ 2023年、WebデザインのUIにお勧めの配色トップ7
ネオンカラーの大胆な配色、柔らかい色合いのパステルな配色、信頼感を与えるアースカラーの配色、UIのまとまりを与えるモノクロームの配色など、WebサイトのUIにお勧めの配色トップ7を紹介します。 Top 7 Colour Schemes that Will Make Your Website Stand Out in 2023 by Mohsen Kamrani 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Webサイトを際立たせる色の組み合わせトップ7 終わりに はじめに Webデザインにおいて、競合他社のWebサイトから際立たせるための重要な要素の一つが「色」です。慎重に選ばれた配色はビジターを惹きつけ、ブランドのメッセージを伝え、さらには購買意欲にも影響を与えることができます。 この記事では、2023年にあなたの
UIデザイナーは読んでおかないと後悔する良書！ 大規模サイト・アプリのUI/UXを作り込むテクニックや裏側まで詳しく解説 -銀行とデザイン
3人のWebデザイナーがインハウスデザイナーとして、三井住友銀行のスマホアプリやWebサイトのリニューアルを通してデザインによるDXをどのように浸透させたのか、その経験が惜しみなく明かされた良書を紹介します。 「銀行」は自分とは関係ないやと思った人は間違いです。スマホアプリやWebサイトのUI/UXをユーザー目線で使いやすく洗練されたデザインにするテクニックなども詳しくていねいに解説されており、UIデザインの学びがたくさんあります。 一読するだけでなく、何度も繰り返し読みたくなる優れたデザインの解説書です。 3人の経歴は、金澤氏はフリーのWebデザイナーを経て制作会社に入社、金子氏は知人とWeb企画・制作、堀氏は企業でUIデザインを担当、そして三井住友銀行のインハウスデザイナーとしてUI/UXデザインを担当しています。 デザインの必要性や重要性を社内からどのように理解してもらったのか、スマ
便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
UIデザイン用のシンプルにデザインされた高品質なSVGアイコンが2000種類以上！ 改変・再配布も可の太っ腹ライセンス -Atlas Icons
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるAtlas Iconsを紹介します。 UIデザインをはじめ、ビジネス、ソーシャル、ハンドジェスチャー、ガジェット、エコロジー、フィットネス、食べ物・飲食物、医療など、33種類のカテゴリに2,000種類以上のアイコンがセットになっており、個人でも商用プロジェクトでも完全に無料で使用できます。 SVGアイコンだけでなく、Webフォント、Figma用なども揃っているので、使い勝手もよく、非常に便利です。 Atlas Icons Atlas Icons -GitHub Atlas Iconsの特徴 Atlas Iconsのダウンロード Atlas Iconsのアイコン Atlas Iconsの特徴 Atlas Iconsは、WebサイトやスマホアプリのUI用にシンプルにデザインされた
2022年、Web制作・デザインに役立つ記事の総まとめ
2022年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figmaなどの使いこなし術 フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2022年のもっとも大きなニュースは、IEのサポートが終了したことではないでしょうか。IEに苦しめられていたWeb制作者は非常に多いと思いま
もっと早く読んでおけばよかった！ Figmaの一歩踏み込んだ実践的な使い方まで、詳しくていねいに解説された良書 -Figma for UIデザイン
Web制作やUIデザインの必須ツール「Figma」は2022年7月に日本語版がリリースされ、9月にはAdobeの傘下になることが発表され、今後もますます必須ツールとして欠かせないものなるでしょう。 Figmaの基本的な使い方をはじめ、実践的なUIデザインの制作、Figmaならではの生産性を上げ効率的なテクニックなどを詳しく解説した解説書を紹介します。 本書はリファレンスとプラクティス両方の側面があり、Figmaをこれから始める人にも、Figmaをもっと使いこなしたい人にもお勧めの一冊です。 本書は、Figma日本語版に対応した解説書です。インストール・セットアップをはじめ、基本的な使い方、Figmaならではの生産性を上げる機能の解説だけでなく、ワイヤーフレームやプロトタイプや詳細デザインの作成など実践的な作業フローまで学べます。チュートリアルに使用されるファイルは、サポートサイトからダウン
2022年のUIデザインツールのまとめ、注目されているプロトタイプ・デザインシステム・リモートワーク・ユーザーテストなど
2022年現在、UIデザインツールの使用状況を調査した「2022 Design Tools Survey」を紹介します。 急いでいる人用に一言でいうと、Figmaがっょぃ。 2022 Design Tools Survey 2022 Design Tools SurveryはUX Toolsでおこなわれたアンケートの調査結果（4,260人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、10年以上の経験者がもっとも多く、次いで3-5年、6-10年となっています。今年はリモートワークの人がもっとも多く、次いでハイブリッド、オフィス勤務となっています。
2022年、もっとも注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 興味がある方は、過去分もどうぞ。 2021年、最も注目されたUIデザインのテクニックのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な
Web制作者はブックマークしておくと便利！ ランディングページ500種類以上のデザインのまとめ -Landings
先日ローンチされたばかり、500種類以上のランディングページのデザインをまとめたLandingsを紹介します。 ランディングページのデザインは、テーマやカラーでフィルタリングができ、アイデアを膨らませるのに役立つと思います。 Landings Landingsは今月の初めにローンチされたばかりのランディングページのまとめサイトです。現在のところ、500種類以上のランディングページのデザインがまとめられており、これからも定期的に追加していくとのことです。 Landings Landingsの利用は簡単で、登録など面倒なことは一切不要。 ページは無限スクロールに対応しているので、そのままスクロールしてもよし、上部でテーマやカラーでフィルタリングすることもできます。 フィルタリングを見てましょう、まずはライトテーマ。 各サムネイルをクリックすると、ページ全体のキャプチャ画像とランディングページの
Web制作者はブックマークしておくと便利！ 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery
Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。 コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの特徴 The Component Galleryの利用方法 各UIコンポーネントのまとめ The Component Galleryの特徴 The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。 The Component Gallery コンポーネントや要素に名前を付けるの
なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design
WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力するだけでFigmaに変換 html.to.designの利用方法 html.to.designの使い方 URLを入力するだけでFigmaに変換 html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン
これがユーザーの信頼を失うデザインだ！ 最近のUIで見かけるダークパターンのしっかりとした知識が身につくデザイン書 -ザ・ダークパターン
ダークパターンとは、WebサイトやスマホアプリのUIをユーザーに惑わせるデザインにし、ユーザーの個人情報や時間やお金をかすめ取る手法です。 たとえば、知らない間にメール配信が登録されていたり、料金に手数料が加えられていたり、登録は簡単なのに退会が難しかったり、キャンセルがクリックしにくいようにデザインされてたり、さまざまなダークパターンが存在します。 最近のダークパターンをはじめ、さまざまなダークパターンを反面教師として学び、制作側として気をつけたいポイントが解説されたデザイン書を紹介します。 ユーザーとして騙されないように知識を増やしておくのにも有用です。 著者は「UXライティングの教科書（紹介記事）」や「ザ・マイクロコピー（紹介記事」などでお馴染みの仲野 佑希氏。これまではライティング主体の解説書を紹介してきましたが、本書はダークパターンの解説書です。デザインによるダークパターンだけで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者は要チェック！ Figmaで無料利用できるUI用のデザインシステムのまとめ -Design Systems for Figma
