既存フォントをIllustratorで加工するのも楽しいけれど、ときにはグラフィックデザインの楽しさを思い出してみませんか? 優れたタイポグラフィを作ろうとすると大変な作業になりますが、デザイナーはその中でも楽しむことを忘れてはいけません。細かいフォントやタイポグラフィの文字を作っていると、あまりにも緻密な作業で肩がこってくることもありますが、この記事をきっかけに、より表現力豊かで遊び心のあるタイ…

Loading...

神は細部に宿る--。たとえばBMWの「完璧なドア音」が究極のUXを生み出すように、 Webデザインではマイクロインタラクションが大切なのです。 BMWのような自動車会社がサウンドエンジニアのエリートチームを雇っていることは、驚くべきことではありません。なぜなら自動車は大きな音を出すものだからです。しかし、彼らがクルマの出す音を小さくすることよりも「チューニング」することに時間をかけていることは驚く…

Loading...

ここ数年のデザイントレンドになっている、背景に動画やアニメーションを使ったWebサイト。海外の優れたサイトから、デザインのヒントを探ります。 Jakob Nielsonが1999年に発表した『Who Commits The "Top Ten Mistakes" of Web Design?(Webデザインでありがちな10個の間違いをしているのはどのような人か)』というリストをいま振り返ってみると、…

Loading...

Webコンテンツの多くを占める「文字」にもっとこだわるために、フォントの組み合わせや最適なサイズを検討できるツール「Type Nugget」を紹介します。SitePointのUXエディター・Alexもすっかりお気に入りのようです。 控えめに言っても、現代はWebタイポグラフィの黄金期です。 Times、Helvetica、Arial、Courierといったごくごく限られたフォント環境で私たちは20…

Loading...

SVGの一部をCSSで操作してもっと効率よく使い回ししたい…そんなときは、ちょっとした発想の転換が必要です。ヒントはMediumのロゴにありました。 2016年、SVGは、ファイルサイズ、スケーラビリティ、CSSのおかげで、Webページで広く使われるようになりました。 場合によってはアイコンフォントのほうが好まれることもありますが(「Build Your Own SVG Icons」参照)、アイコ…

Loading...

UXを考え、デザインするだけで満足していませんか? なぜ評価が必要なのか? どう評価するべきなのか? ヒントを探ります。 『クリムゾン・タイド』や『レッド・オクトーバーを追え!』など潜水艦映画を見たことがあるなら、いつも聞こえてくるある音に聞き覚えがあることだと思います。そう、暗闇の中から響いてくるような、「ピン! ピン!」という警告音です。 もちろん、これはもっとも深く暗い海の中を進むときに潜水…

Loading...

「フロッピーが保存を示すのはわかりにくい」とはしばしば耳にする議論ですが、誰にとってもわかりやすいアイコンをデザインするためにUIデザイナーはどう行動するべきでしょうか? 世界中で画面の小さいモバイル端末が普及するにつれて、UIのスペースを有効活用するため、頻繁にアイコンが使われるようになっています。 アイコンは、言葉、ボタン、ラベル、リンクに変わり、テーマやアクションだけでなく、アイデアさえも表…

Loading...

WebデザインやUXデザインの話題では、アップルやグーグル、アマゾンが大人気。でも、ビジネスが成功しているからといって、常にデザインが正しいとは限りません。フォームにおける問題点と改善案を具体的に示します。 これまでに「アップルのように美しく」「グーグルのようにシンプルに」「アマゾンのように分かりやすく」デザインしてほしい、と言われた経験があるでしょうか? 優れた技術で有名な企業はクライアントから…

Loading...

Webサイトの高速化といえば、フロントエンドやバックエンドのテクニカルな改善の話になりがちですが、「体感速度」の視点で考えると、UXデザイナーにもできることがあります。 もしWebデザインの「最優先事項」がUXだったら、「スピード」が一番重要ではないでしょうか。ユーザーは素早く操作していて、ロードもすぐに終わることを期待しています。私たちはミリ秒単位の世界に身を置いているのです。 しかし、おもしろ…

Loading...

プロトタイピングツールが花盛り。アプリをインストールしなくてもブラウザー上ですぐに使えるツール「Pingendo」がおもしろそうです。 知ってのとおりプロトタイピングはとても有効な手法ですが、一歩間違えると多くの時間を取れらてしまいます。プロトタイピングのアプローチには、大きく2つあります。 1. Invision/MarvelApp/Adobe XDなどのツールを使う これらのビジュアルプロトタ…

Loading...