アクセシビリティからデザインを学ぼう
福岡のWebアクセシビリティ/フロントエンドエンジニア。株式会社ディーゼロ所属。Webにインクルーシブな未来を夢見てる人。よりセマンティックでアクセシブルなHTMLをマークアップできるように開発者を手助けするmarkuplintというオープンソースツールを個人の活動として開発しています。 これはエンジニアである僕がアクセシビリティを学ぶことによりデザインの知識と理解が深まったという経験談です。もしも今、あなたがデザインに関わっていく上で物足りなさやスキルの向上に伸び悩んでいるのであれば、アクセシビリティの知識がその助けになるかもしれません。広範囲でしかも大袈裟な話に聞こえるかもしれませんが、気になったところからちょっとずつ覗いてみるだけでもいいと思います。 アクセシビリティとは Accessibilityは英語なので人によって訳や解釈が若干異なりますが、これから話すアクセシビリティは、一般
良質なデザインのための10の原則＆10のチェックリスト
Murielは熱心なユーザーリサーチャーであり、デザインの編集者。ユーザーのニーズや要望を見つけ出し、そこにある「ギャップ」を埋める解決策を見出すことをやりがいにしている。加えて遠隔教育やeラーニング分野など学習のデザインにも関わっている。 あなたはどんなタイプのデザイナーでしょうか？ デザインをあなたのものたらしめる、原則やチェックリストやメソッドはありますか？ または、０から創作を始めた後でチェックリストを使って分析する方がお好みですか？ あなたが安心するのは、未来を見据えるときか、過去を振り返るときか、それとも完璧主義なため過去も未来もどちらも見据えるときでしょうか。どちらに当てはまるとしても、この記事はあなたに役立つでしょう。 自分らしくあれ。自分以外は皆に取られてしまっているから ―Oscar Wilde 制約を設けてデザインするタイプか？ 多くの人は、制約は創造性の邪魔をすると
無料のマテリアルデザインフレームワーク10選
ライターであり、Sufism:A Brief Historyの著者。メインの分野はオープンソース、モバイル開発、WebCMS、ベクターアートなど。電子ジャーナルのBrave New Worldのチーフ＆エディター。 デザイン原則に科学と技術のイノベーションを組み合わせたら、なにが起こるでしょうか？ まさにGoogleが実践し作りあげた、マテリアルデザインのコンセプトが創られるのです。 マテリアルデザインとは、クラシックデザインの原理やルールと、サイエンスやテクノロジーの可能性やきまりを結びつけたビジュアルデザインコンセプトです。マテリアルデザインだけでなく、関連するツールやリソースも同様に人気があります。 この記事では、マテリアルデザインスタイルを採用するWebやモバイルプロジェクトに最適なフレームワークをまとめました。 マテリアルデザインUIキットとマテリアルデザイン活用の実例もまとめて
３C分析とは？マーケティングで実践する方法
３C分析は、ビジネス現場でよく使われるフレームワークのひとつですが、分析してはみたけれど、これで何がわかるの？と悩むことが少なくありません。 そこで、３C分析をマーケティング活動で実践する方法を考えてみましょう。 ３C分析の３つのＣは、 Customer：市場・顧客 Competitor：競合 Company：自社 の頭文字を取ったものです。 ミクロな経営環境を構成する「市場（顧客）」「競合」「自社」の観点から、ビジネスをヌケ・モレ・ダブリなく状況を整理できるのが、３C分析の特長です。 ３C分析の活用方法 ３C分析は、市場に対する自社の戦略を再定義するだけでなく、新たな市場への参入や撤退の検討にも使われます。また、３C分析は、企業レベル、事業部レベル、製品やサービス単位など、大小さまざまなレベルで活用できます。 ３C分析は、利用範囲が広く使い勝手が良いのが特長ですが、反面、分析が曖昧になっ
プロトタイプを使って要件をまとめるときに気をつけるべきこと
JoeはUX/CXコンサルタントとして長年のキャリアがあり、現在はUXに関する書籍、講演などを多数手がけるUXの伝道師です。 「要件を決めた時に想像していた仕様と違う」 開発チームのほとんどが、プロジェクトの中でも最悪のタイミングで、このような発言を聞くはめになります。大抵、このようなことが起きると、開発者は自分を正当化しようと怒り出します。正確に要件を定義していなかったとステークホルダーを叱責するのです。 これはもっともな怒りではあります。しかし、同時にこの状況の責任は私たち開発側にもあることも事実です。 私たちは認識のズレを埋めるため、要件に必要なことをステークホルダーに伝えてきれていません。この記事では、開発の現場で起きがちなことについて話していきます。 要件をまとめることの背景にある厳しい事実 要件が決められるのは、大抵ステークホルダーとのミーティングのときです。ステークホルダーは
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
グラフィックデザイナーからUXデザイナーに転向するには
この記事はInteraction Design Foundationからの翻訳転載です。配信元または著者の許可を得て配信しています。 How to Change Your Career from Graphic Design to UX Design 編集部より：この記事では米国におけるUXデザイナー事情を取り上げています。後半、教育環境などの紹介も米国のものになりますので予めご了承ください。 世間のデザインに対するイメージと100％一致する職業があるとすれば、それはグラフィックデザインに関する職業です。グラフィックデザイナーは、皆さんにも馴染みのあるマクドナルドの金色のアーチから、映画のポスターのタイポグラフィや色使いに至るまで、幅広くさまざまなもののデザインをしています。また、私たちの身の周りにあるアイコニックで普遍的なデザインの数々を作り出しています。 では、なぜグラフィックデザイナ
次世代のワイヤーフレーム「マイクロフレーム」とは
Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。 ワイヤーフレームはどのように生き残ってきたのでしょうか？ 実はワイヤーフレームは進化し続けています。 ワイヤーフ
イラストレーターでWebデザインをするときにしておきたい初期設定
この記事では、Adobe Illustrator CCでWebデザインを行う時に必要な設定の解説をしています。単位や表示の変更を行う方法を詳しくお伝えします。 また、次回作成時にも設定を流用できるように、プリセットに保存する方法も紹介しています。 STEP１: 作業環境の変更 単位をピクセルに変更 上部メニューの「編集」＞「環境設定」＞「単位」を選択します。 →ショートカットキーは「Shift+Ctrl+U」（macはshift+command+U） 環境設定ダイアログの単位メニューが表示されます。 一般・線・文字・東アジア言語のオプションの単位を全て、「ピクセル」に変更します。 次に、一度OKをクリックして、設定を保存します。 もう一度環境設定ダイアログを開き、一般メニューを選択してキー入力項目を「１px」と入力します。 ガイド・グリッドの変更 次に、ガイド・グリッドメニューを選択します
InstagramやAirbnbなどのUIデザインに見る新しいトレンド
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？ 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti
WebデザイナーがフォローすべきTumblrアカウント10選 | UX MILK
TumblrでWebデザイナーがフォローすべきアカウントを10個厳選してご紹介します。 Tumblrは画像や動画、文章など、様々なメディア形態で投稿できることから、グラフィックだけに留まらず様々な方法でデザインのインスピレーションを得ることができます。英語・日本語アカウントを織り交ぜて取り上げていますので気になるアカウントはぜひフォローしてみてください。※括弧内にアカウント名を表示しています。 １. All The Style Guides（allthestyleguides） 様々なサイトのスタイルガイドとパターンライブラリを紹介している、非常に勉強になるアカウントです。どうしても自分が知っているスタイルガイドばかりを参考にしてしまいがちですが、こうやってまとめてあると新たなスタイルガイド、パターンライブラリに出会うことができてとてもありがたいですね。 ２. House of Butto
IAとUXデザインの違い
私の職業を「UXアーキテクト」と説明すると、必ず次に「IA（情報アーキテクチャ）とUXの違いは何？」と尋ねられます。両者には明らかな違いがあるにも関わらず、その境界線は不明確です。どのように説明するべきでしょう？ Wikipediaによると、IAは「ユーザビリティを支えるために、ウェブサイトを体系化し、分類するための技術と科学」です。同じソースによると、UXは「人々が製品やシステム、サービスを利用する際の感じ方。利便性、使ったときの心地よさ、システムの効率性（を含む）」とあります。 これらの定義によると、UXはIAを基礎として、これを次のレベルへと押し上げるものと言えます。 IAは構造に関与する IAは比較的古い用語です。ウェブにおいても古くから使われ、技術全般の進歩においても古くから使われ、主にユーザーを案内していくコンテンツの構成や構造に焦点を当てます。デジタルの観点からは、単純なパン
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
サイトの利用規約に要約をつけてUXを向上する
サイトなどに登録するとき、利用規約を読んだことがありますか？ 調査によると、オンラインの商品やサービスのために契約するとき、たった7％のユーザーしかその全文を読まないとのことです。利用規約はとても文字数が多く、堅苦しいので、ユーザーが読まないのは無理もありません。 ある調査によれば、ほとんどの利用規約は1,000～8,000語から成るそうです。そのうえ、それを理解するには、少なくとも大学２年生レベルの読解力を要します。関連する調査によると、平均的なユーザーは１年に1,462のプライバシーポリシーを見ると推測されます。 もしユーザーが、自分が訪れた新しいサイトのすべてのプライバシーポリシーを読んだとすると、それらを読むのに１年間で244時間かかることになります。 こうなっているのも、すべてサイトのせいです。サイトの利用規約は、もっと理解しやすくあるべきです。そうしなければ、ユーザーがサイトを
英語を教えてくれるお友だちロボット「Musio」とは | UX MILK
IT会社の企画職。The Tofu Projectにも所属している。 大学在学時から、街コンからカンファレンスまで幅広くイベント運営を行う。 幼少期はタイのチェンマイで育つ。旅をすることを好み、現在35ヶ国目。 昨年末に、人工知能開発のスタートアップであるAKA社が開発した「Musio」というロボットの製品発表会に出席しました。 2015年6月にはクラウドファンディングサービスである「Indiegogo」で目標金額の201%を達成しています。 Musioは顔認識機能やウェブ検索機能の他にも会話内容の記憶及び推測機能などが搭載されており、会話をすればするほどパーソナライズ化されていきます。非常に優れた人工知能を搭載しているため、ユーザーの好き嫌いを覚えますし、冗談も言うことができます。Siriのように分からないことも検索してくれます。 ユーザーの情報を蓄積していき、それらを踏まえた上で会話を
アプリのUIデザイナー必見！ 参考になる海外ギャラリーサイト9選
アプリのUIデザインをまとめたギャラリーサイトを紹介します。デザインのアイデアが思いつかないときや、アプリのUIをさらに改善したいときに参考になりますので、ぜひチェックしてみてください。 CAPPTIVATE.co http://capptivate.co/ アプリのUIを動画で見ることができるサイトで、画像をマウスオーバーすることで自動的に動画が再生されます。UIのパターンやバウンド、イージングなどアニメーションの効果でも探すことができ非常に便利です。「Capptivate.co」のiOSアプリも配信されているので、こちらもおすすめです。 UX Archive http://uxarchive.com/ 「ログイン」や「商品の購入」などユーザーの各行動フローに注目したギャラリーです。ひとつの行動フローが複数枚の画像で表現されています。アプリの機能を考えるとき、どのような画面・項目が必要な
もしiPhoneの「3D Touch」がUIのスタンダードになったら
Rianは皆が使いたがる高品質のソフトウェアをデザイン・作成しています。『Making It Right：スタートアップのプロダクトマネージメント』という著作もあります。シリコンバレーと南アフリカのケープタウンで数年働き、現在はオレゴン州ポートランドのJive Softwareでプロダクトデザイン・ディレクターをしています。 テクノロジーのこととなると、皆が賛同できそうなことがひとつだけあります。Louis C.K.の言葉を借りれば、「何もかもが素晴らしいのに誰もハッピーじゃない」。だから、iPhone ６sや６s Plusの3D Touchという機能が常に好評なのを見て、ちょっとした驚きを感じました。発売直後のiPhoneのレビューのほとんどが、生産性の上昇や機能の優れた実装に言及し、開発者はそれを使ってどうするかといった話に皆夢中です。 3D Touchをリサーチし、遊んでみて最初に思
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
