Cookie規制が招くWeb体験の危機
欧州委員会はWebを破壊していると私は考えるようになりました。ユーザーのプライバシーを守ろうとする彼らの試み（GDPRやクッキー法とも呼ばれるeプライバシー指令）は、クッキー通知とプライバシーポリシーのオーバーレイの氾濫という予期せぬ結果を引き起こしました。 事実、平均的なユーザーの立場からすると、ネットワーク中立性の崩壊よりもクッキークライシスの方が、日々のWeb上での体験においてダメージが大きいと言えます。 それでも、ネットワーク中立性に関わるものと同じような組織的抵抗は、クッキー通知の異常性に対してはほとんど発生していません。私たちは、その意図が良いものであるために受け入れているのです。 誤解しないでほしいのですが、その意図自体は良いことです。どのサイトがトラッキングしてOKで、どの情報を収集しても良いかの主導権はユーザーが持つべきです。欧州委員会の取り組みは評価に値します。ただし、
複数事例から見るコンバージョンにつながるランディングページとは
PaulaはフリーのWebデザイナーです。彼女は小規模なオンラインビジネスのリブランディングなどを手掛けています。 ランディングページの指標改善に、銀の弾丸はありません。すべての状況に対して有効なアプローチはどこにもないのです。 しかしながら、適切なUX戦略があれば、優れたランディングページを簡単に構築することができます。この記事では、情報の取捨選択やメッセージの明確化を主とした４つのUXコンセプトを見ていきます。 明瞭なファーストビューが良い印象を生み出す 第一印象は非常に大切で、良い印象を与えるためには整理されたヘッダーが重要です。 私はデザインが修正されたSlackのトップページがあまり好きではありません。それというのも、たくさんの要素が一度に表示されているためです。画面上のナビゲーションや２つのCTAボタン、コピーライトなどが表示されていて見た目は美しいのですが、読みにくくなってい
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
2018年もっとも影響力のあるWebデザイントレンド６選
JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 今年も半分以上過ぎましたが、2018年はすでにWebデザインにとって特筆すべき年となっています。ここ数年におけるデザインの進化が実を結びつつあり、それはデザインシステムやタクタイルデザイン（Tactile Design）といったトレンド、レトロスタイルの復興といった楽しく精力的なスタイルから見てとれるでしょう。Webデザインで何が起きていて、将来どのようになるのかを熟慮することが、これまで以上に必要不可欠となっています。 この記事では、2018年のもっとも影響力のある６つのWebデザイントレンドを取りあげます。１つ目は、新しくデザインの必需品になりつつあるトレンドです。 １. コンポーネントベースのデザインシス
Atlassianのデザインプロセスをけん引する、自主性のあるチーム
現代のプロダクトチームが抱えるもっとも大きな課題の１つに、大規模なチームでいかにデザインを進めるか？ということがあります。 大規模チームでは、どのような活動が求められるでしょうか？ どのように協調関係を築き、意思決定をすれば良いのでしょうか？ 質の高い成果物をスケジュール通りに届けるにはどうすれば良いのでしょうか？ このスケールの問題にどのように対処しているのかを知るために、今回私たちはAtlassianのデザインチームから以下の３人に話を伺いました。 Ashleigh Sterzenbach―シニアプロダクトデザイナー Erin Howard―シニアユーザーリサーチャー Alastair Simpson―デザインチーフ、Confluence、Hipchat、プラットフォーム担当 2,200人以上の社員を抱える企業において、どのように効率よく協力しながら、プロダクトの品質を保てるデザインチ
次世代のワイヤーフレーム「マイクロフレーム」とは
Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。 ワイヤーフレームはどのように生き残ってきたのでしょうか？ 実はワイヤーフレームは進化し続けています。 ワイヤーフ
ボタンのラベルや配置順序のベストプラクティスとは | UX MILK
サイトやアプリにおける典型的なフォーム（もしくはダイアログボックス）には、通常いくつかのボタンがあります。ほとんどのケースで、ユーザーは２つの選択肢を目にします。１つはユーザーの主となるタスクを表し、一方は付随する副次的なタスク（フォームに入力した内容の取り消しやキャンセルなど）を表します。 この記事ではアクションボタンに関する基本的なUXについて概観し、デザイナーの間でよくある質問である「OKかキャンセル、どちらのボタンが最初にくるべきか」に答えます。 エラー防止 Jakob Nielsen氏のユーザビリティ・ヒューリスティックによると、「丁寧なデザインによって、最初の段階で問題が起こることを防止する」とあります。ユーザーが突発的に間違ったものを選択してしまうかもしれない状況を排除できるように努力する必要があります。 濃淡で視覚的な区別をつける ２つのボタンの違いを明確にするために、ボタ
海外の人気サービスで使われているCSSスタイルガイド８選
CSSのスタイルガイドとは、コーディングを行う際の決まりやルールのようなものです。 CSSのスタイルガイドを作成することで、一貫性のあるスタイルシートを実現しやすくなり保守性や拡張性を向上させることができます。ひとりで開発するときにも役立ちますが、特にチームで開発を進めるときに効果を発揮します。 今回は参考になる海外の有名サービスのCSSスタイルガイドをまとめてみました。CSSスタイルガイドを作成するときや、コーディングをするときにぜひ活用してみてください。 Airbnb AirbnbのCSS/Sassのスタイルガイドです。各用語のルールから始まりCSSやSassの合理的な記述方法について記載されています。こちらは日本語訳されたスタイルガイドもあります。 Airbnb Style Guide Google GoogleのHTML/CSSのスタイルガイドです。シンプルなデザインのスタイルガイ
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
コピペで使える！マテリアルデザインなUIアニメーション | UX MILK
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ
マテリアルデザインのサイトを簡単に作るためのフレームワーク８選
マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。 そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali
Webデザイナーがこの夏入れておきたいChrome拡張機能10選 | UX MILK
仕事でもプライベートでも、ブラウザを使う比重はどんどん増えていませんか？ サイト閲覧はもちろん、メールやチャットツールなど、ブラウザベースのものばかりです。Google ChromeやFirefoxの拡張機能なども日に日に進化しており、ブラウザ主体となった私たちの生活のかゆいところに手を伸ばしたアプリが次々と出ています。 今回はGoogle Chromeのおすすめ拡張機能の中でも特にこの夏話題の物を中心にご紹介していきたいと思います。Webデザインや開発などに関わるクリエイター目線で、仕事に便利なものを中心にピックアップしていきます。 Fontface Ninja Chromeに追加：Fontface Ninja Webサイトで使われているWebフォントの種類とフォントサイズなどがマウスオーバーで表示されます。日本語は表示対応していなさそうですが、かっこいい英語フォントなどの名前がすぐわか
Web制作の作業効率を格段にアップさせる便利なチートシートまとめ
HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。 チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。 HTML HTML5 Cheat Sheet ダウンロードページ HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。 The HTML 5 Mega Cheat Sheet ダウンロードページ こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタ
You Don't Need JavaScript に学ぶ CSS テクニック
さまざまな UI を JavaScript を使わずに、CSS だけで実現するデモ You Don't Need JavaScript を紹介します。 かなり煽ったタイトルのデモですが、作者も「いくつかの点で問題がある」と述べているように、これらの UI を実装するのであれば素直に JavaScript を使うことをおすすめします。あくまでデモとして「CSS の可能性」を感じることができればと思います。 ただ、実装としてはなかなか面白いので、是非ソースも含めてチェックしてみてください。今回は、いくつかあるデモから３つピックアップして簡単な解説と一緒に紹介します。 ＊ サンプルによっては、ブラウザによって正常に表示されないことがあります。最新の Chrome で動作確認をしているので、表示されない場合は Chrome で試してみてください。 アコーディオン ラジオボタンと擬似クラスの :ch
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
Adobe XDのリピートグリッドをもっと便利に扱う方法
2016年6月20日にAdobe初のプロトタイピングおよびデザインツールであるAdobe Experience Design（以下 Adobe XD）に待望の日本語UIが登場しました。同年3月の登場以来、リピートグリッドで繰り返し要素が簡単に作れることと、大量のアートボードを扱っても不便を感じない軽快な動作で一部の話題になっていましたが、UIやドキュメントが日本語化されて今こそ試してみようという方も多いのではないでしょうか？ 今回は、リピートグリッドをもっと便利にする「テキストファイルをドラッグ」機能を紹介します。 リピートグリッドは選択した要素をまとめて繰り返し表示させる機能で、横方向にも縦方向にも自由に数を増やすことができます。Finderから画像を選択してドラッグすれば画像がそこのフィットした大きさで挿入されますし、テキストは自由に手で書き換えることができます。人気のあるカード型レイ
直感的なラピッドプロトタイピングツールMockplusを使ってみた
UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 プロトタイピングはWebやアプリのデザイナーの間ではもはや無視できない工程となってきており、最近ではAdobeなどの参戦も騒がれたように、世界中で多くのツールが日々生まれています。 プロトタイピングと一言で言っても様々な開発段階や目的によって細かい用途や使用感は変わってきます。多くのツールの中でもどれが優れている、というよりも自分の用途にマッチングして、使いやすいものを選ぶのが大事です。 ということで、今回は国内ではまだあまり紹介されていないMockplusというツールをご紹介します。 Mockplusとは MockplusはJongde Softwareが提供するラピッドプロトタイ
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webページの表現を広げてくれる日本語のWebフォント10選 | UX MILK
Gitを一度はあきらめた人のためのわかりやすいスライド９選