Usable MachineのUXデザイナー/Design Matters。デザインと技術に関して書くことが大好きなデザインオタクです。 日本人は、複雑なデジタルテクノロジーを使いこなし、伝統文化からインスピレーションを引き出すことの本当の意味を理解していると言えます。私たちは北欧のデザイナーとして、日本のデザインと文化から学ぶべきものを見つけたいと思いました。そこで私たち、Design MattersのJulieとMichaelは、デジタルデザインの新しい視点を見つけるために東京に５日間、滞在してみることにしました。 日本はデザインの文化においてクオリティの高さは良く知られていて、特にテクノロジーの分野で高い評価を得ています。しかし、日本のデジタルプロダクトと非デジタルプロダクトのデザインはまったく異なることに気が付きました。インテリアデザインを始めとした日本の非デジタルデザインについて

上記のデザインは、アイウェアデザイナーのAlfred Sung氏によるものです。デザインはミニマルで美しく見えますが、メニューバーを操作しない限り、このデザインはユーザーにWebサイトの目的を伝えることができません。このミニマルなWebデザインは、機能性ではなく、美しさを保つためだけに存在しています。 対して下の図２では、機能的なミニマリズムをWebデザインに上手く応用し、重要な情報を視覚的に楽しめるように示しています。 これはLibratonのWebデザインです。ナビゲーションが簡単で、明確で滑らかなUIをしています。後者の事例は、機能的なミニマリズムがWebデザインにおいてどのように働くのかを示す典型です。デザインに無駄なテキストやアニメーション、余分なエフェクトが含まれていません。また適切な画像とコンテンツで、Webサイトの目的をユーザーに明確に伝えています。 機能的なミニマルデザイ

あまりにも多過ぎる情報に晒されると、その先には「情報過労」が待っています。一般的に「情報過労」はコンテンツの管理者に影響を与えますが、誰もが影響を受ける可能性があります。常時インターネットを利用できることは多くの場合ありがたいかもしれませんが、同時に呪いにもなり得ます。 「情報過労（=content fried）」という用語は、トレーナー、リサーチャー、講演者、そしてモチベーターでもあるBeth Kanter氏によって定義されました。 「情報過労」は、過剰な量の情報に晒されているときに起こります。「情報過労」という用語はBeth氏が使い始めた言葉ですが、私はまさにその「情報過労」の症状を抱えています。 「情報過労」かどうかを知る方法 まず初めに、自分が情報過労の症状に当てはまるかどうか、以下のリストを参考にしてみるといいでしょう。 PCは常にオンラインの状態か？　PCの前にいないときスマー

スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ

Stephen Moyersはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。 彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 シンプルで素敵なWebデザインの体験は、シームレスです。ユーザーは自信を持って快適に１つのコンテンツから次のコンテンツに簡単に移動することができます。Webデザインにおいてシンプルで完全なユーザー体験を実現することは、デザイナーや開発者が直面するもっとも困難な課題の１つです。 ここ数年の間にモノやアイデア、コンテンツが過剰に溢れたことで、世の中のトレンドはシンプルな方へとシフトしてきています。法律の専門用語は素人向けの言葉に言い換えられ、作家は飾り立てた表現よりも簡潔なコンセプトを提供するように努め、住宅所有者は牧場のように広い家を下取りに出して小さく効率的な家を手に入れています。料理人さえも

デザイナーとしての私たちの仕事は、人々がやりたくないことをやるように強いることではありません。彼らを説得してすぐに行動させ、クライアントに競合ではなく私たちと仕事をしてもらうことです。 自分の仕事のモラルについて考えたことはありますか？　突き詰めれば、デザイナーの役割は、人々を説得して何かをさせることでしょう。つまり、私たちが得意とするのはCTA（Call to Action=行動喚起）を達成させることなのです。 使用する言葉からデザインのレイアウトまで、私たちには人々を操ることができる強い力があります。見てほしいと思うものをユーザーに見させたり、クリックしてほしいものをクリックさせたりすることが可能です。感情や心理学、デザインを駆使して、私たちが望む方向へユーザーを向かわせることができます。しかし、私たちは、そもそもユーザーをその方向に向かわせるべきなのでしょうか？ だますことの危険性

Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 あなたが書いた文章をすべてのユーザーが楽しみながら読んでいると想像するのは簡単です。しかし、現実を見てください。ユーザーはそんなことはしません。ただ斜め読みをするだけです。 ユーザーはWebページを読まず、斜め読みをします。何か目を引くものがあったときにだけ、斜め読みをやめて文章を読むのです。 デザイナーは、デザインしたWebページ上で人々がどこを見るかコントロールできます。ユーザーの目線を誘導するには、目がどのように情報を処理するのかを理解する必要があります。この記事では、Z字型パターンを使用したWebデザイン内に視覚的階層を生み出す理論と実践について説明します。 Z字型パターンとは何か、どのように作用し、なぜそうなるのか 読んで字のごとく、Z字型パターンのレ

Jess Huttonはユタ州のソルトレークシティーにあるClearlinkのUXおよびナレッジマネジメントのスペシャリストです。 最近「モバイルファースト」という言葉を聞きますか？　これは６、７年前に流行った言葉ですが、モバイルファーストという言葉は新しく生まれ変わり、一周して再び使われるようになりました。デザイントレンドは、モバイルファーストからレスポンシブWebデザインへ移り変わり、そしてまたモバイルファーストへと戻ってきました。しかし、この変遷はいかがなものでしょうか。 モバイルテクノロジーは計り知れないほどの変化を遂げたのにも関わらず、「モバイルファースト」に戻ってくるのでしょうか。むしろ、今その単語を流行語として耳にすると、モバイルデザインにおける新しい段階の呼び方として正しくないように感じます。モバイルファーストよりもユーザーファーストデザインのほうがより良い呼び方でしょう。

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 この記事ではF字型レイアウトの基本、利点、作成方法ついてわかりやすく説明します。 F字型レイアウトとその働きについて 「F字型レイアウト」はユーザーがサイトを見るときの一般的な視線の動きをあらわします。 FはFastのFでもあり、多くのユーザーはWebサイトを高速で読み流しているのです。 F字型パターンは、200人以上のユーザーが数千のWebサイトを閲覧した結果を記録したNNGroupのアイトラッキング調査によって普及されました。多様なサイトやタスクに関わらず、ユーザーの視線の動きはほぼ一定していることが調査によってわかりました。この一定な視線の動きこそがアルファベットのFの字型に類似していたのです。 F字型は以下の３つの要素によって構成されています。 ユーザー

Stephen Moyersはオンラインのマーケティング担当およびデザイナー、テクノロジーに詳しい熱心なブロガーです。彼はロサンゼルスに基点を置くSPINX Digital Agencyと契約しています。 音楽やアートなどのカルチャーと同じく、Webデザインにもその時代ごとの思潮があり、毎年新たなデザイン要素や機能、トレンドなどが発生します。また、デザインに対する考え方も、新しい技術の急速な発展に伴い急激に変化します。 Webデザインのトレンドの中には、時の試練に耐えられないものもあります。ユーザビリティを損なうトレンドやユーザーのサイト訪問を妨げるようなトレンドは避けるべきです。以下に挙げるトレンドは、ユーザーはサイトから離れてしまう可能性もあるので、これらを採用する場合は慎重にならなければなりません。 ネガティブスペース ネガティブスペースはホワイトスペースとも呼ばれ、画像やデザイン要

高画質なスクリーンが一般的になったことで、視覚的なメディアとして発展するWebデザインにおける、写真の役割が大きくなっています。美しい写真の使用は、不変のテクニックです。 この記事では、Webサイトでの写真においてもっとも人気のある６つのトレンドを紹介します。 目を引くヒーローイメージ スクロール画像上の全面を占めるヒーローイメージは、Webデザインにおいて、もっとも人気の高いトレンドの１つです。 ヒーローイメージの価値は、瞬時にユーザーを夢中にさせることです。 人間にとって、視覚はもっとも強い感覚です。そのため、高画質なヒーローイメージは、もっとも速くユーザーの関心を引く方法の１つになります。 ヒーローイメージにより、ユーザーはすぐに引き込まれ、そのサイトへ期待を持ちます。

ZoltánはCentralway（チューリッヒのソフトウェア企業）のUXデザイナー長で、Ustreamの元UXディレクターです。美しく、かつ使えるプロダクトを作ることに情熱を燃やしています。 あなたは「ユーザビリティが担保されていれば、Webサイトのビジュアルは美しくなくてもいい」と思いますか？ Craigslistのように、見た目は味気なくても人気があるWebサイトもあるので、サイトのビジュアルデザインを重視せずにユーザビリティだけに重きを置く人がいます。 魅力的なビジュアルが果たす役割 しかし、「美しさ」も大事な役目を果たしているのです。ビジュアルが魅力的であればあるほど、Webサイトはより効果を発揮します。また、UXはユーザーの感情によって大きく左右されます。ビジュアルに好感を持てた方が、ユーザーはリラックスしてサイトを見ることができるうえに、「このサイトは信用できて使いやすい」と

HTMLやCSS、JSのコードとその実行結果を共有できるサービスのCodePenは、いわばフロントエンドエンジニアの遊び場です。中にはどういったコードで動いているか見当もつかないようなものもあります。 今回はCodePenで公開されているアニメーションの中でも、思わず見入ってしまうような美しいアニメーションを10点ピックアップしてご紹介します。画像の下のCodePen埋め込み部分で「Run Pen」で実際に動かして見て下さい。 [under construction] See the Pen [under construction] by Lucas Bebber (@lbebber) on CodePen. Cloudy Spiral CSS animation See the Pen Cloudy Spiral CSS animation by Hakim El Hattab (@ha

Webデザインを考える際に、デザイナーなら誰でもおしゃれなサイトに仕上げたいものです。ですが、具体的に「おしゃれなサイト」と一言で言っても、その感覚は千差万別です。 この記事では、デザインに行き詰まったときなどに眺めたい、おしゃれなサイトを集めたギャラリーサイトをご紹介します。様々なサイトを見ることで視野を広げ、引き出しを増やし、ご自分のデザインに活かしてみて下さい。 The Best Designs シンプルで洗練された、海外のギャラリーサイトです。サイトのファーストビューをキャプチャした画像が大きく、見やすくなっています。 また、画像をクリックすると詳細ページに遷移して、トップページ以外のデザインもじっくり見ることができます。気に入ったデザインを保存できるようSNSボタンが設置してあり、PinterestのPin itボタンなどでストックしていくと良いかもしれません。 Web Desi

徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア

Webライティングを行うときには、文字数、誤字脱字、言い回し、構成、キーワードなど気を付けなければいけない点が数多く存在します。今回はWebライティングを行うときに便利なWebサービスを紹介します。 どれも無料で使用できるので、作業の効率化やより高品質な記事を作成するためにぜひ活用してみてください。 文章校正 Enno Enno タイポ、余分なスペース、誤字脱字、変換ミス、入力後の編集ミス、文字化け、スペルミスなどを自動的に判別してくれるサービスです。 使い方は画面右側のフォームに文章を入力し、フォーム下にあるボタンを押すだけです。そうするとチェックが行われ、おかしい箇所をハイライトしてくれます。さらにハイライトされた箇所がどのような間違いであるかを画面下の方で指摘してくれます。 文章校正ツール 文章校正ツール 文章を解析し、間違った表現や不適切な部分を表示してくれます。フォームでテキスト

WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン

今回はWeb制作で使える便利なブックマークレットをまとめてみました。 Webサイトのデザイン時にはデベロッパーツールや拡張機能を使っている方も多いと思います。ブックマークレットの良い点は、クリックひとつで簡単に実行できるところです。 ブックマークレットをうまく活用することでWeb制作を効率化することができます。 ブックマークレットとは ブックマークレットとはブックマークからスクリプトを起動し、ブラウザ上で処理を行う簡易的なプログラムです。ページの一部を加工したり、ページ内の情報を取得したりすることができます。 ブックマークレットの登録方法 ブックマークレットの登録方法には以下の２通りがあります。 （１）ブックマークレットのリンクをブラウザのブックマークバーにドラッグ＆ドロップ （２）ブラウザのブックマーク追加からリンク先としてブックマークレットのURLを登録 ブックマークレットを使うときは

近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ