より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
【2020年版】プロジェクト進行管理に便利なガントチャートツール20選
プロジェクトの進行においてスケジュール管理というのはとても重要になります。スケジュールをしっかりと把握しておかなければ効率よく業務を進めることもできなくなってしまいます。このスケジュール管理をするために使うと便利なのが「ガントチャート」です。 ガントチャートとは ガントチャートは横軸に日付、縦軸にタスクを並べ、各タスクごとに予定を記入したり進捗を記入することで、プロジェクト全体のスケジュール管理ができる表のことを指します。１つのプロジェクトを進める上で多くの作業（タスク）がありますので、ひと目でスケジュールの進捗を把握し、各タスクのスケジュール調整を適宜行うことができるのが利点です。 エクセルなどでも作ることは可能ですが、一からガントチャートを作るのはなかなか骨が折れる作業になります。そこでおすすめなのがガントチャート専用のツールやサービスです。 以下に、国内外のガントチャート管理ツールを
ユーザー体験の質を左右するナビゲーションのパターン６選
アプリはアイデアから生まれ、目的によって具体化されます。私たち起業家やデザイナー、開発者の関心は、最初から最後までスムーズな行程に沿ってユーザーを誘導して、有益な体験を与えることにあります。 あるリサーチによれば、65％近くのユーザーは、アプリ体験が好ましくないブランドを否定的に感じています。したがって決定的に重要なのは、ユーザーが労力を使わずに自分たちの課題の解決策にたどり着けるよう、インターフェイスのデザインをシンプルにすることです。 Gerry McGovern氏は『Usability: Navigation is More Important than Search』という記事の中で、機械に詳しい70％のユーザーはリンクをクリックすることからタスクを始めている一方で、残りの30％は検索から始めていることを明らかにしました。 これを踏まえると、ナビゲーションがユーザー体験でとても重要
コードを最適化するためのフロントエンドフレームワーク10選
UIデザインとWeb開発に関するトピックのライター。個人ポートフォリオやWeb上のいたるところで彼の記事を見つけることができます。最新のアップデートなどを見るにはTwitterをフォローしてください。 Googleで検索すると、Webサイトのパフォーマンス改善のための便利なツールが数多く見つかります。 サイトの画像最適化から独自のCDN設定にいたるまで、さまざまです。 しかし、デザイナーの中でコード最適化について考える人はほとんどいません。 コード最適化とは、総HTTPリクエスト数を減らしたり、ファイルを軽量化したり、表示スピードアップのために最適なカスタムフレームワークに切り替えることを意味します。 最新のBootstrap v4は素晴らしいデザインですが、残念ながら最も重いフレームワークの１つです。 そこで今回の記事では、重いBootstrapの代わりに軽いWebフレームワークを厳選し
魅力的なマテリアルデザインのコードスニペット10選
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 マテリアルデザインがWebの世界で大流行しています。フレームワークやカスタムUIキットを使ったマテリアルスタイルの新しいサイトが毎月いくつも登場しています。 しかし、これは悪いことではありません。むしろその逆です。Googleが自ら好ましいデザイン言語であると認めた、お墨付きのトレンドを用いることによって、デザインプロセスを簡略化できるからです。 もしマテリアルデザインに関心があるのならば、これから紹介するコードスニペットはうってつけです。私のお気に入りの中から、10のスニペットを紹介していきます。 レスポンシブテーブル See the Pen Material Desig
文字や背景にピュアブラックを使ってはいけない理由
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を
【2018年版】アプリUXデザインのトレンド12選
モバイルアプリ領域の動きは非常に早く、UXデザインにおいて成功するためには、デザイナーは先見の明を持ち、新たな課題に備えなければなりません。 ここでは皆さんのタスクを軽減するために、2018年において影響力がもっとも大きいであろうトレンドをリストアップしました。 １. ユーザージャーニーの簡略化 アプリやWebサイトを使用する場合、ユーザーには特定の目的があります。その目的を達成するために費やす労力が少ないほど、より良い体験となるのです。 リニアユーザフロー リニアデザイン体験とは、ユーザーが各ステップを１つのアクションで完了できるようにするための開始・途中・終了があるUXのことです。タスクを完了するために必要な時間を見積もることができるため、リニアユーザーフローはユーザーのためになります。
ダッシュボードで上手に情報を可視化するためのガイドライン
JustinはUsabilityGeekの創始者であり、使いやすい記憶に残るオンライン体験の創出において15年以上もの実績があります。 システムが完全なものになるにつれ、定性的なデータや定量的なデータもまたさまざまな頻度・複雑さでを取得できるようになります。このような状況では、情報の可視化がさらに重要になります。 端的に言うと、情報の可視化（information visualisation）とは、抽象的なデータをユーザーが理解できるように可視化し、さらにデータ間の関係性を理解できるようにすることです。 デザイナーの役割と情報の可視化 デザイナーの役割は、ユーザーにとってわかりやすい方法でデータを表現することです。これには、課題や制約、データを表現するために利用できるスクリーンサイズという制限が伴います。 もしデザイナーがユーザーが理解しやすいデータを作成できないと、ユーザーがデータを利用
【2018年春】今チェックしておきたいデザインツール12選
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 デザイン業界の流れは速く、絶えず新しいツールが誕生しています。そのため、デザイナーとして最先端を走り続けるには、世の中の動向につねに注意する必要があります。 そこで今回は2018年現在、チェックしておきたいデザインツールを厳選してまとめました。これらのツールにはデスクトップのプログラムもありますし、SaaSのアプリやブラウザツールもあります。 いずれにせよ、このリストにはみなさんがチェックしたいと思うものが必ずあるはずです。詰まるところ、素晴らしいデジタルコンテンツを作ることにおいて、あなたのデザインスキルはさまざまな手段の一部に過ぎないのです。 Adobe XD Adob
見落とされがちなアカウント概念のデザイン
わりかん・決済アプリ「paymo」を運営する AnyPay, Inc.のPM & UI/UX Designer。技術とデザインの力をプロダクトに結集させるプロセスがとても好き。Twitterは@ikutani41。 WebサービスやiOS/Androidアプリのデザインをするとき、どのようなアカウント概念を採用するか検討したことはあるでしょうか？ ほとんどのアプリは、ユーザーごとにアカウントを作って情報やログを紐づけたり、機密情報を扱う場合は認証機構を設けたりする必要があります。また、どのようなタイミングで、どのような操作でアカウントを作ってもらうかはとても重要で、さまざまな選択肢があります。 一般的なデザイン アプリをインストールして初めて開いたとき、下図のような画面をよく見るかと思います。 こういったデザインが採用される背景には、理由があります。 ユーザが慣れているため操作に迷いにくい
フォームをより使いやすくするためのJavaScript/CSSツール10選
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ
UIデザインに関する10のガイドライン
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 Jakob Nielsen氏とRolf Molich氏による10のユーザーインターフェースガイドラインに従い、ユーザーのニーズと期待に見合ったデザイン方法を学びましょう。これらのヒューリスティックスは、AppleやGoogle、Adobeのように大成功した企業の多くの製品に反映されています。このような企業のデザインチームが、これらのルールをデザインプロセスにどのように適応しているかは、公開されているユーザーインターフェイスのガイドラインから見てとることができます。 この記事では、ユーザビリティ（Usability）、ユーティリティ（Utility）、デザイラビリティ（Desirability）を改善するための10のルールを紹介します。 理解するべきユーザビリ
見た目が悪くても人気なサービスから学ぶユーザビリティ設計
まるで90年代かのような、見た目は良くないけれども人気のあるWebサイトは、今現在でも多く存在しています。 上記のWebサイトは、お世辞にも良いデザインとはいえないですが、それにもかかわらず人気があります。なぜ人気があるのか、それはユーザーがもっとも必要としているものを確実に提供しているWebサイトであるからです。 たとえば、各Webサイトにはこのような特徴があります。 ・Redditは、ユニークユーザーが2億3,400万人、月間ページビュー数が81.9億、日間投票数が2,500万（2016年時点の統計）にもかかわらず、表示速度が非常に速いサイトです。 ・Hacker Newsは最新のスタートアップ関連のニュースを掲載するだけのサイトです。しかし、この「コンテンツを目立たせる」ことこそが、ユーザーからもっとも評価されている点です。 ・Wikipediaは情報がとてもよく整理されていて、ユー
Atlassianのデザインプロセスをけん引する、自主性のあるチーム
現代のプロダクトチームが抱えるもっとも大きな課題の１つに、大規模なチームでいかにデザインを進めるか？ということがあります。 大規模チームでは、どのような活動が求められるでしょうか？ どのように協調関係を築き、意思決定をすれば良いのでしょうか？ 質の高い成果物をスケジュール通りに届けるにはどうすれば良いのでしょうか？ このスケールの問題にどのように対処しているのかを知るために、今回私たちはAtlassianのデザインチームから以下の３人に話を伺いました。 Ashleigh Sterzenbach―シニアプロダクトデザイナー Erin Howard―シニアユーザーリサーチャー Alastair Simpson―デザインチーフ、Confluence、Hipchat、プラットフォーム担当 2,200人以上の社員を抱える企業において、どのように効率よく協力しながら、プロダクトの品質を保てるデザインチ
Webデザインにおけるスクローリングの新しいルール
かつてWebデザインでタブーとされていたものが、近年もっとも人気がある手法の１つとして完全復活しました。ユーザーはスクロールが必要なサイトを好み、評価するようになったのです。スクローリングは過去の汚名を捨て去り、主要なインタラクションデザインの要素として新たに生まれ変わろうとしています。つまり、デザイナーは新たなルールを学ぶ必要があるということです。 この記事では、スクローリングの復活について探ります。この手法の長所と短所を説明し、ちょっとしたヒントも紹介します。 スクローリングが再評価された理由 簡潔に言えば、答えはモバイルデバイスにあります。 モバイルユーザーの数がデスクトップユーザーの数を上回って以来、UIデザイナーの誰もがこの流れに適応してきました。小さな画面を利用するユーザーが多くなったことで、スクローリングの必要性が増しました。画面が小さくなるほど、スクロールは長くなります。
使いやすいフォームデザインのための新しい４つのルール
大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。「使える」ものではあったものの、「使いやすい」ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか 「フォー
UIデザインにユーザーストーリーが必要な理由
Tom Brinton氏はBYUを2012年に卒業した後、CitrusBits、Wallaroo Media、CustodyXChangeでUI/UX設計者として働いてきました。彼は優雅なインターフェースをデザインすることが好きです。 あるデザインチームが、クライアントの新しいアプリのモックアップについて話し合っているとします。すると、アプリがどのようにあるべきかついて、チームメンバーはそれぞれ 違う考えを持っているということが明らかになります。こうなると、ミーティングはすぐに、「何が正しいか」というよりも、「誰が正しいか」という議論になってしまいます。 誰もが自分のデザインを守ろうとしますが、誰もユーザーを守ろうとはしません。ひょっとしてあなたにも思い当たる節がありませんか？ このようなときにこそ、ユーザーストーリーを導入する必要があります。 最近では、UI/UXのプロがアジャイル開発で
【UXの迷信】ユーザビリティさえ良ければ、サイトの見た目は関係ない？
ZoltánはCentralway（チューリッヒのソフトウェア企業）のUXデザイナー長で、Ustreamの元UXディレクターです。美しく、かつ使えるプロダクトを作ることに情熱を燃やしています。 あなたは「ユーザビリティが担保されていれば、Webサイトのビジュアルは美しくなくてもいい」と思いますか？ Craigslistのように、見た目は味気なくても人気があるWebサイトもあるので、サイトのビジュアルデザインを重視せずにユーザビリティだけに重きを置く人がいます。 魅力的なビジュアルが果たす役割 しかし、「美しさ」も大事な役目を果たしているのです。ビジュアルが魅力的であればあるほど、Webサイトはより効果を発揮します。また、UXはユーザーの感情によって大きく左右されます。ビジュアルに好感を持てた方が、ユーザーはリラックスしてサイトを見ることができるうえに、「このサイトは信用できて使いやすい」と
工数見積もりやスケジュール管理で参考になる記事10選
プロジェクトを遂行するためには、工数の見積もりやスケジュール管理が必要になります。正確な見積もりは難しく納期に間に合わなかったり、残業や休日出勤で埋め合わせたりした経験はありませんか？ 今回は、より正確に工数の見積もるための手法や、差し込み作業を考慮したスケジュール手法などについて解説されている記事をまとめました。 マネージャー、エンジニア、デザイナーなどすべての方に参考なる内容だと思います。 開発の見積もりとスケジュール管理 クックパッド株式会社の方が実践している見積もりとスケジュール管理方法について紹介されています。工数を見積もるステップや、スケジュールを立てるときの注意点、スケジュール管理の方法について学びたい方におすすめの記事です。 開発の見積もりとスケジュール管理 不安とストレスから解放される見積りとスケジュール方法 開発をしているとき、納期に間に合わなかったらどうしようと不安に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UX MILK
