コンテンツデザインとSEO：デザイナーも意識したい検索のUX
コンテンツデザインに欠けがちな要素として、検索意図（Search Intent）というものがあります。 SEOの話題に少しでも触れると、不快に感じる方もいるかもしれません。SEOばかり指摘するのは、自分のアジェンダを押し通し、うぬぼれた指標を追い、ユーザーニーズをまったく考慮しないスパムのようなものです。最悪の場合、SEOが優れたユーザー体験と完全に対立してしまうことさえあります。 しかし、必ずしもそうなるとは限りません。優れたUXは検索エンジンの段階から始まっていることも、また事実です。最近の調査によると、Webサイトトラフィックの半数以上がオーガニック検索から生まれているといいます。つまり、良いかどうかにかかわらず、SEOは体験全体の一部に過ぎません。 ユーザー重視のSEOは、優れたデザイン、コンテンツ、コード選択というそれぞれの要素が、重要な場面で相乗効果をもたらすように適切に組み合
Webサイトの専門家でもユーザーテストが必要な理由とは？
UXリサーチを専業とする株式会社ポップインサイト代表取締役および株式会社メンバーズ執行役員。2008年に株式会社ビービットに入社しユーザーテストを数百人実施、2012年に日本初のリモートユーザーテストサービスを立ち上げ5,000調査以上を実施。 UX MILK特派員のポップインサイト池田です。今回からUXの第一線で活躍されている方々へのインタビュー＆対談し、最新のノウハウをお届けする「UXリサーチ最前線」という連載企画をスタートします。 第一弾では、BtoB領域におけるWeb制作やUX改善で有名な株式会社ベイジの枌谷さんに、お話を伺ってきました。 UXアプローチやUXリサーチは課題解決の手段 枌谷：ベイジはBtoB領域に強みを持つ、現在10年目のWeb制作会社です。自社内のチームで、マーケ戦略策定からデザイン、制作までを一貫して実施できることが特長です。 BtoBサイト改善実績は多くありま
UXデザイナーのための15の配色ツール | UX MILK
色は、デザイナーが使う手段の中で、もっとも強力なツールの１つです。同時に、色という概念は習得するのが難しく、また、色の組み合わせは無限にあるため、サイトやアプリに使用する色を決めるのは難しいものです。そこで作業を簡単にするために、カラーパレットを決める際に便利なツールのリストを作成しました。これらのツールを使えば、多くの時間を節約できるでしょう。 この記事では、以下のような便利なツールを紹介します。 インスピレーションを受ける 自分だけのカラースキームを生み出す 判断できるカラースキームを作る １. インスピレーションを受ける 自然 あなたの周りには、たくさんのひらめきの種があります。インスピレーションを受けるには、周りを見回すだけでいいのです。印刷されたデザイン、インテリアデザイン、ファッションなど、魅力的なものがたくさんあります。その中でも、最高の色の組み合わせは自然にあります。美しい
Webサイトのコンテンツ制作コストを計算する方法
Robは、コンテンツコラボレーションプラットフォームであるGatherContentのコンテンツ戦略担当です。 彼はコンテンツ戦略を開発、実装、測定、改良し、GatherContentブログの編集長となっています。 コンテンツの作成は、Webサイトプロジェクトの一部に過ぎず、作成のためには、計画やワークフローの決定、適切な人材の獲得、時間、お金が必要であり、さらに異なるチームステークホルダーや分野の専門家との協力が求められます。さらに、ビジネス目標とユーザーのニーズを満たすコンテンツの必要性を加味すると、要件はさらに複雑になります。コンテンツ制作がWebサイトのプロジェクトを邪魔することがよくあるのも頷けるものです。 プロジェクトのコンテンツ制作のために、必要な時間やお金、人材に対して十分な計画を立てなければ、次のような問題が発生します。 コンテンツが予定どおりに提供されない、またはまった
レスポンシブデザインとアダプティブデザイン、それぞれの長所と短所
レスポンシブデザインとアダプティブデザインの違いに目を向けると、それはデザイナーにとって実に重要な選択肢があることに気付きます。インサイトを踏まえてこれらの選択をすることで、より目的に沿ったデザインを考えることができるでしょう。 モバイルデバイスの普及と多様化に伴い、デザイナーはさまざまな画面サイズに対応する必要が生まれました。これは現在、すべてのWebとアプリのデザイナーが直面している課題です。企業向けの巨大なモニターからスマートウォッチまで、ユーザーがオンラインで情報にアクセスする方法は数え切れないほどあります。 そのようなデバイス間の差を埋めようとするデザイナーには、２つのデザインの選択肢があります。アダプティブなサイトか、レスポンシブなサイトです。 レスポンシブデザインとアダプティブデザインの違いについて混同している人が、一定数見受けられます。どちらのデザインも経験していない人にと
ホテルのWebサイトをデザインするためのベストプラクティス
ユーザー体験があらゆるWebサイトのデザインにとって不可欠であることに、疑いの余地はありません。 しかし、ユーザー体験が何よりも重要な業界があるとすれば、それはホテルを始めとしたサービス業です。 ホスピタリティとは要するに、顧客の期待に応え、顧客の期待を超えることであり、最初のタッチポイントから最後にいたるまで、顧客に優れた体験を提供し続けることです。 また、私たちが生きるデジタル時代において、ホテルのWebサイトは、ホテルが最初に提供する顧客体験の場であることが多いです。そのため、少なくともどのホテルも、直接予約の画面には力を注いでいます。ホテルのオーナーであれば、Webサイトでのユーザー体験はホテルでの顧客体験と同等に優れたものにしたいでしょう。 そのためには、まず初めに旅行者がWebサイトを訪れる理由を理解する必要があります。 旅行者の主な目的は何でしょうか？ この問いに対する答えが
UXリサーチの知見をわかりやすく伝える方法８選
この記事はUX for the Massesからの翻訳転載です。配信元または著者の許可を得て配信しています。 8 great ways to communicate UX research insights 私は今まで不眠症の人が行うような睡眠方法を、一度も試したこともありません。たとえば、寝る前に温かいミルクを１杯飲む、羊を数える、UXリサーチのレポートを読むなどです。 リサーチチームやエージェンシーが作成する、長ったらしくて、面白味のないUXリサーチレポートですが、１つだけ役に立つことがあります。それは、人を眠りに誘うことです。読み始めれば、ものの数分で赤ちゃんのように眠り始めること間違いありません。もし夜に頑張って眠ろうとしているのであれば、UXリサーチレポートはとても役に立つでしょう。しかし、もしオフィスでよだれをたらしいびきをかいてしまうようであれば、レポートは役に立ちません。
マテリアルデザインの概念を受け継いだ、マテリアルデザインライトとは
今年のデザインのトレンドが、マテリアルデザインの表現であることは、間違いありません。 GoogleのAndroidをベースにしたデザイン手法であるマテリアルデザインは、当初モバイル端末向けのインターフェイスとしてスタートしました。しかし現在では、デバイスやプラットフォームの境界を越えて使われています。 ここ数年はフラットデザインが最大のトレンドですが、マテリアルデザインはフラットデザインにはできないユーザビリティを高めるための装飾をきちんと加えることができます。フラットデザインのように、視覚的な魅力を重視して装飾をそぎ落とすのではありません。マテリアルデザインの根幹は、ユーザビリティなのです。 マテリアルデザインライトとは？ マテリアルデザインライト（Material Design Lite : MDL）は、マテリアルデザインの次段階です。マテリアルデザインの概念を受け継ぎ、あらゆるデバイ
1日10分から学べる！デザイナー向けのUdemy動画講座７選
デザイナーが担当する領域は、近年ますます幅広くなっています。そのため、常に学び続けることが必要ですが、新しいことを学ぶのに参考書で勉強するのは退屈ですし、スクールはややハードルが高いという問題があります。 そこで今回おすすめするのがオンライン動画学習サービス「Udemy」を使った学習です。 実際、UX MILK編集部の中にもUdemyでいくつか講座を受講している人がいますが、動画なので飽きにくく仕事終わりに軽く勉強するのに丁度良いそうです。 Udemyとは Udemy（ユーデミー）は、世界で1,700万人が利用する世界最大級のオンライン学習プラットフォームで、日本ではベネッセコーポレーションが事業パートナーとして2015年から協業を開始しているサービスです。 Udemyのおすすめポイント 講座の種類が豊富でITやデザインを学べる講座が多い 一度購入したらずっと視聴ができ、30日間の返金保障
見やすいサイトを作るときに最低限チェックしたい６項目
いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0では英語などの場合は18ptまたは14ptの太字、日本語の場合はそれと同等の文字サイズが望ましいとされています。1pxは0.75ptと同等とされているので、18ptは24pxとほぼ同等です。さらに、行の高さ（line-height）は150%〜200%、段落の間隔は行送りの1.5倍以上が推奨されています。 ＊18ptは1.5emと同等、14ptは1.2emと同等 そのほか、Googleも読みやすいフォ
モバイルアプリにおけるナビゲーションUIのデザインパターン
アプリのナビゲーションは、直感的で予測ができなければいけません。新規のユーザーや再訪問したユーザーが、アプリをどのように使ったら良いか迷わないよう、理解しやすくする必要があります。 しかし小さい画面という制限の中で、コンテンツの優先順位を考慮しながら、ナビゲーションを使いやすくすることは非常に難しいです。 この問題に、様々なナビゲーションを使って異なる方法で立ち向かっていますが、多様なユーザビリティの問題に、皆悩まされています。 そこでこの記事では、モバイルアプリの基本的なナビゲーションであるハンバーガーメニュー、タブバーとジェスチャーベースのナビゲーション（タップやフリックを使用したナビゲーション）の３つについて検証し、それぞれの長所と短所を説明します。 ハンバーガーメニュー 画面のスペースは、モバイル上の貴重な商品であり、画面の節約に役立つモバイルナビゲーションのパターンのうち、ハンバ
モバイルデザインで押さえておきたい６つの基礎テクニック
最近のインタラクションデザインの成功例を調べてみると、どれも基礎をしっかりとおさえたものとなっています。これらのデザインには共通して、人間の自然な行動をもとにし、私たちが気づかないところで障壁となるものを取り除いています。ビジュアルの表現やインタラクティブな体験が重視されており、中でも読みやすさ、理解しやすさは特に重視されます。 それでは、最も重要なデザインテクニック、およびそれがどのように機能するかについて簡単に見てみましょう。 効果的なタイポグラフィ サイトまたはアプリにおけるテキストの目的は、アプリとユーザーの間に明確なつながりを確立し、ユーザーが目標を達成できるようにすることです。そして、タイポグラフィはこのインタラクションにおいて重要な役割を果たしています。 テキストのサイズとレイアウトは、画面上でものを読むときの体験に大きな影響を与えます。小さな書体や狭い行間、余白の文字を処理
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
404エラーページでユーザーの離脱をふせぐための５つの施策
Robは、新進気鋭の映画プロデューサーであり、著名な作家、ポッドキャスター兼詩人です。またごく最近では、ArbentingとDead Wings Designsにおいてクリエイティブデザインとブログ制作デュオの共同創設者兼想像力豊かな共同寄稿者として知られています。 404エラーページはあらゆるWebデザインにおいて最も軽視されがちな項目の１つです。 そうでない場合は、ユーザーの苛立ちを少しでもユーモアで軽減しようと、遊び心のある仕組みやデザインを施す傾向があります。 多くのデザイナーは、自分たちのサイトはきちんと作ってあるので404など必要ないと思い、簡素な404エラーページを用意します。一方で、一部のデザイナーは冗談を交えたり、404エラーページをちょっとした実験の場として活用しています。 もし、そのページにユーモアが必要ならあっても問題ありませんが、遊び心と機能は完全に相互排他的な関
ミニマルなモバイルアプリUIで気をつけるべき６つのこと
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザインはユーザーのエンゲージメントを高める上で、最も重要なものの一つです。ユーザーはシンプルなインターフェースを好むようになってきたので、UIを基本的で必要最低限な要素のみに残していくことが成功の鍵です。 ミニマリズムは、構造と機能の絶妙な組み合わせから成り立ちます。その最大の強味は、構造を明確化することにあります。線を整え、たっぷりと余白を残し、そして視覚的な要素を最小にすることで、最も複雑な主題（内容）でさえもシンプルになります（もちろん、効果的に使われればの話です）。 ミニマルデザインでは、簡潔さ、明確さ、そして一貫性が求められます。明確なビジュアルコミュニケーションによってユーザーの問題解決を導くべきです。ミニマルなデザインのアプリが評価されるのは、ユ
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
「プログラミングは簡単に学べる」という嘘 | UX MILK
プログラミングを学ぶことは簡単なことではありません。それは誰でも知っていることです。 ですが、残念ながら「プログラミングは簡単！」といった文句でビジネスをしようとするマーケターはたくさんいます。彼らのプロダクトを使えば、あるいはそうなるのかもしれませんが。 Hearing the WWDC keynote say coding isn't hard frustrates me. It's extremely hard. You're setting beginners up for huge disappointments. — Tyler McGinnis (@tylermcginnis33) 2016年6月13日 WWDCキーノートで「プログラミングは難しくない」と言っているのは本当に腹が立ちます。ものすごく難しいですから。初心者を騙してがっかりさせるだけです。 誰かがあなたに対してプ
UIデザインの歴史に学ぶシャドウと奥行きの使い方
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 近年のUIデザインでは、不必要な要素を省き、機能性に焦点を当てるのがトレンドになってきています。デザインの機能面はプロダクトの成功への鍵である一方、その機能面をサポートするという意味で、ビジュアルへの細かい配慮も同じくらい重要です。 この記事では、シャドウなどの視覚的な要素がどのように処理された情報を伝達するものなのかを見ていきましょう。 UIの進化 : 疑似3Dからウルトラフラットデザイン インターフェイスにおける奥行きの幻覚 ユーザーの見るスクリーンは平らですが、デザイナーやエンジニアたちはスクリーン上の全ての物が3Dにみえるように多大など労力を割きました。疑似3D効果（シャドウ、グラデーション、ハイライト）は、ユーザーが操作可能な動作をひと目でわかるように
動く写真「シネマグラフ」を活用した国内外のサイトデザイン13選
シネマグラフは、GIFアニメーションの進化した形です。画像全体ではなく一部だけが動くので、動画より派手すぎず、静止画よりも注目を集めることができます。また、注目をさせたいものを決め、動かすものを調整することで、Webサイトの雰囲気を作ったり、商品の魅力を高めることができます。 この記事では、そのシネマグラフを効果的にWebサイトに利用している、海外・国内のサイトをご紹介します。不思議な雰囲気を出すシネマグラフを眺めながら、そのサイト独特の表現をじっくり楽しみましょう。 国内サイト 東巨女子 TOKYO GIGANTIC GIRLS 文化庁メディア芸術祭にも推薦作品として取り上げられている、CMディレクター・映画監督の松宏彰さんらによるアートプロジェクトのサイトです。東京の各所に巨大な女の子が登場するという設定で、メインは動画ですが、一部のコンテンツにシネマグラフが使われています。 写真内の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
