Nick氏はロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 モバイルアプリをデザインする際、最も心に留めておきたいことは、ユーザーにとって便利で直感的なデザインにするということです。 デザインしたアプリがユーザーの役に立たなければ、実用価値がありませんし、誰も使ってくれません。便利なアプリだとしてもユーザーの時間と労力を必要とするものであれば、その使い方を学ぶことさえしてくれないでしょう。 良いUIデザインはこの両方のポイントをおさえています： 便利なモバイルアプリはユーザー中心である。ユーザーは差し迫った問題を解決するために、あなたのアプリをインストールします。アプリにはハッキリとした「目的」が必要です。あなたのユーザーが何を達成しようとしているのかを考え、その目的に焦点を当て、必要ないものは全て取り除きます。 UI

現在、HTMLやCSSの標準仕様を策定するW3Cでは、いくつかの新しいモジュール（Level1）と既存モジュールのCSS4（Level4）が策定中となっています。今回はこれらの新しい仕様の中から、特に便利そうなものを紹介します。 また正確には、CSS4は存在しないとされていますが、便宜上わかりやすくするためにLevel4のモジュールをCSS4とここでは呼称しています。 ※ 以下の情報は「CSS Working Group Editor Drafts」を参考にしています。また、草案段階なので仕様が変更・削除される可能性があります。 カスタムプロパティ（Level 1） カスタムプロパティは、CSSにおけるユーザー定義変数です。SassなどのCSSプリプロセッサを使えば変数が使えますが、これによってCSSネイティブで変数を扱えるようになります。 変数の宣言 変数の宣言は、 --変数名 : 値と

ユーザーを知ることは重要なことの一つですが、ユーザーの文化背景を知るとなるとそれはまた別の問題です。文化を考慮したとき、ペルソナ作りはまた違ったものとなってきます。 ペルソナは心象、言語、人種、そしてその周囲の人間によって変わっていきます。インターフェイスなどをデザインするときは、これらのすべての文化的要素が考慮されている必要があります。 この記事では、ペルソナにおいてどのように文化を考慮すればよいのかみていきましょう。 ペルソナとは？ ユーザーペルソナは特定のユーザー層の代表となりうる、理想的な人物像をつくり出すためのツールです。ペルソナは実世界のリアルな要素を含めることで、潜在的な顧客を理解するための重要な役割を果たします。 しかしペルソナはすべての潜在的なユーザーを代表するものではありません。ペルソナは、そのユーザー層の中でも中心となる（そしてもっとも割合の大きい）人たちとの強い関係

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 近年のUIデザインでは、不必要な要素を省き、機能性に焦点を当てるのがトレンドになってきています。デザインの機能面はプロダクトの成功への鍵である一方、その機能面をサポートするという意味で、ビジュアルへの細かい配慮も同じくらい重要です。 この記事では、シャドウなどの視覚的な要素がどのように処理された情報を伝達するものなのかを見ていきましょう。 UIの進化 : 疑似3Dからウルトラフラットデザイン インターフェイスにおける奥行きの幻覚 ユーザーの見るスクリーンは平らですが、デザイナーやエンジニアたちはスクリーン上の全ての物が3Dにみえるように多大など労力を割きました。疑似3D効果（シャドウ、グラデーション、ハイライト）は、ユーザーが操作可能な動作をひと目でわかるように

ウェブやモバイルアプリのナビゲーションは、直感的で予測できるべきです。新しいユーザーとリピーターの両方が、どのようにアプリが操作するのか理解できるべきなのです。 しかしモバイルの小さな画面上では、分かりやすくアクセスしやすいナビゲーションメニューを作成するのは大変な作業で、コンテンツの優先順位に応じてUI要素が必要になります。異なるナビゲーションメニュー・パターンを利用し、他の解決方法を試みても、他のさまざまなユーザビリティーの問題点が出てきてしまいます。 この記事では、ハンバーガーメニューとタブメニュー、ジェスチャー型ナビゲーションといった、モバイルアプリの基本的な3つのナビゲーションパターンのメリットやデメリット、デザインの解決方法について詳しく見ていきましょう。 コンテンツ目次 1. ハンバーガーメニュー 概要 メリット デメリット デザインの解決方法 2. タブメニュー 概要 メリ

Photoshop の便利なデザインツールの中で、デザインをガラリと変えることができる機能のひとつが、パターン素材です。選択した範囲を、手軽に継ぎ目なく塗りつぶすことができ、ウェブデザインや広告バナー、プレゼン資料など、さまざまなデザインの背景にも利用されています。 今回は、デザインですぐに使えるパターンテクスチャ素材をまとめてご紹介します。どんなデザインにも合わせやすいシンプルな素材から、人気の和柄パターン、水彩ペイントや手描きなナチュラル系アイテムなどかわいい素材が豊富に揃います。どれも無料ダウンロード可能となっているので、今後のデザイン制作に活用してみましょう。 詳細は以下から。 デザインの現場ですぐ使える、おしゃれな無料パターン素材まとめ Free Photoshop Halftone Patterns 用意したアートワークや写真にパターン素材を重ねるだけで、質感をグッとアップでき

オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov

Pokémon GO（ポケモンGO）、みなさんはまだプレイしていますか。私はまったりと続けています（初代ポケモン赤緑にどっぷりとハマった世代です）。 日本では7月22日に配信されたポケモンGOは瞬く間にユーザー数を増やし、各種メディアに取り上げられ社会現象にまでなりました。 配信から約２ヶ月経った今、「中期的な目標の欠如」「同じことの繰り返し」といったUX的な課題は残存するものの、連携デバイス”ポケモンGO Plus”の発売や、相棒ポケモン機能のアップデート、新ポケモン追加の噂など、未だに話題を提供し続けています。 そんなポケモンGOで今回取り上げたいのは、「拡散性」についてです。ポケモンGOは友達紹介機能やSNS投稿機能といったいわゆる「拡散」のための機能がないにも関わらず、「最初の1カ月で最もダウンロードされたモバイルゲーム」としてギネス記録を打ち立てました。 では、なぜこれほどまでに

デザイン思考というのは、スタンフォード大学教授でありIDEOの創業者であるデイビッド・ケリーが提唱し始めてからかなり流行した言葉となった。しかし、一般的なデザイン思考の定義は一つではないため、これをどう活用できるのかはっきりとした理解を持っていない人が多いのではないだろうか。 Idea CoutureのCEOであるアイドリス・モーティーは彼の著書「戦略的イノベーションのためのデザイン思考(Design Thinking for Strategic Innovation)」で、デザイン思考のプロセスを非常にわかりやすく説明している。彼は、革新的なパフォーマンスを求めている現代の企業に対し、デザイン思考の実用的な応用方法を紹介している。 イノベーションのスタートは組織変革からデザイン的アプローチからコンサルティングを提供するbtrax社では、クライアントの戦略をどう改善するかというプロセスにお

最近のWEBデザインの主流として背景に大きな動画を流すというものがありますが、なかなかイメージに合う動画を撮影するのは難しいものです。今日紹介するのは背景用の動画を探す時に便利な、300以上の背景用フリー動画素材を集めた「Coverr」です。 都会の雑踏から、料理しているシーン、大自然、買い物をしてるシーンなど様々な背景用の動画が無料で配信されています。 詳しくは以下 どれも背景用となっていますので、主張しすぎず、人は映ってはいるものの、小さかったり、ボケていたりと比較的背景動画としての役割を考えられており、利用しやすいものとなっています。またサイト上でそれぞれのジャンルに絞り込んで探し出すことも可能です。 動画素材はすべて無料で提供されており、さらにライセンスは「CC0 1.0 Universal (CC0 1.0) Public Domain Dedication – パブリックドメイ