第1回 安定とスピードのデザイン | gihyo.jp
ビジュアルデザインと機能性 ビジュアルデザインと機能性。ウェブサイトやアプリケーションのデザインでは、この２つは密接な関わりを持っています。 多くの人は、ビジュアルデザインと聞いて、ものを美しく（もしくは格好良く、楽しく）見せるためのデザインを連想するかもしれません。まさにそれはデザイナーの仕事です。世の中をより美しく、格好よく、楽しくすることは、人が関わるものを生み出すデザイナーにとっての使命です。それをないがしろにすれば、何のためのデザインか、何のためのデザイナーか、と問われることになるでしょう。 ただし、道具の世界では、デザインが機能性に直結しています。人は道具を使うとき、はっきりした目標を持って扱います（はさみを使って紙を切る、蛇口をひねって水を出す等）。そういった目標をどれだけ達成できたか、ストレスなく達成できたかという観点＝機能性は、道具の価値に関わってきます。ウェブサイト
第1回 使いやすいメニューはどう作る？ ～水平メニュー | gihyo.jp
「使いやすいメニュー」に必要な3つのこと よく「ナビゲーションメニュー」と言われるように、Webサイトではメニューはナビゲートするためのものです。ナビゲートする対象はもちろん人（ユーザー）ですが、もっと具体的に言及すると「情報を探しているユーザー」ということになります。そして、情報を探す際には、できるだけ簡単に探せる必要があります。 使いやすいメニューには、3つのことが必要です。1つ目はアフォーダンス。言い換えると「メニューがメニューである（次の情報に導く）とすぐにわかる」ということです。2つ目はインタラクティブ性。たとえばメニューにマウスオーバーした、あるいはクリックしたことがわかることを意味します。3つ目はカレント表示。これは「現在いる場所がわかる」という意味です。 この3つを満たすため、メニューには3タイプから4タイプの画像を用意することが多くなっています。ノーマル時、マウスオーバー
スマートフォンサイト制作で「なんで拡大縮小できるようにしてるの？」と言われた時の対処法
※ この話はフィクションです。実在の人物や団体などとは関係ありません スマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自由にできる。 対処法1：話し合うそもそもブラウザにデフォルトで備わっている拡大縮小機能を無効にするのがおかしいなぜ拡大縮小を無効にするのか ネイティブアプリ感を出したい拡大縮小した時に表示が崩れるのを防ぎたい拡大した時に画像がボヤけるのが嫌例えば構成/デザインの上で小さな文字を使わなくてはならない場合、ユーザーはどうやってその文字を拡大するのかユーザーが拡大したいと思っても拡大が禁止されていたら、
切れないハサミと使えないWebデザイン | ベイジの社長ブログ
本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
デザイニング・インターフェース
TOPICS 発行年月日 2007年01月 PRINT LENGTH 360 ISBN 978-4-87311-316-6 原書 Designing Interfaces FORMAT 本書『デザイニング・インターフェース』は、ウェブアプリケーション、インタラクティブなウェブサイト、デスクトップアプリケーション、携帯電話などのインターフェースをデザインするデザイナーとプログラマーのために、デザイン上の問題に対するすぐに使える解決策を「パターン」として体系化した書籍です。各パターンは「コンテンツの整理」「ナビゲーション」「ページレイアウト」「アクションとコマンド」「インフォメーショングラフィックス」「ユーザの入力」「洗練されたルックアンドフィール」といったテーマごとに分類され、本書をリファレンスのように使うことも可能にしています。先人たちの試行錯誤の上に成り立つ“ベストプラクティス”としての
サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
ソシオメディア | あるとよい機能はない方がよい
UXデザインのコンサルティングではよく品質優先度マッピングというものを行います。これは開発プロジェクトの上流工程において、実装を検討している機能をリストアップし、そのひとつひとつについて想定する利用者の割合や利用頻度の観点からグルーピングし、実装の優先度を決める作業です。 これを行う目的は、UIをできるだけシンプルに保つことにあります。ユーザーが求める機能をすべて盛り込むと、当然UIは複雑になり、誰にとっても使いにくいものになります。また蓋然性のバランスが取れていない要件はプログラムを複雑にし、バグが増える原因になります。 UIデザインにおけるパレートの法則（結果の大部分は全体の一部によって生み出される）は、「ユーザーの80%は全機能の20%しか使わない」というものです。その20%に注力し他の優先度を下げることで、製品の利便性は向上するはずです。 Core, Important, Nice
「OK」と「キャンセル」、どちらが有効か ― ＠IT
ユーザビリティのヒント（最終回） 「OK」と「キャンセル」、どちらが有効か 「情報表現の最適化」 ソシオメディア 上野 学 2006/10/20 デスクトップのメモ帳を新規に開いて、メモを書き、ウィンドウを閉じようとすると、「変更を保存しますか？」というメッセージダイアログが表示されます。ユーザーにしてみれば、「新しいメモをいま書いたところなのに、なぜ『変更』なんだ？」と思うでしょう（本文から） 英語や、日本語の横書きでは、情報は大きく上から下に、左から右に展開していきます。ユーザーは画面（ウィンドウ内）の左上から右下に向かって意識を推移させて、そこで表現されている情報を取得していきます。 実際にはユーザーは、まず画面中央付近に視線をやり、そして全体をざっと見渡してから、重要と思われる個所に注目していくようです。ひとたび内容を読もうとか、入力フィールドを埋めていこうと決めたら、当然、上から
80年代のAppleに学ぶUIの部品化とガイドライン ― ＠IT
インタラクションデザインパターン（1） 80年代のAppleに学ぶUIの部品化とガイドライン ソシオメディア 上野 学 2007/2/7 インタラクションデザインパターンのプロローグとして、その原則や秩序の歴史を見てみよう。20年前のAppleはどのように質の高いアプリケーション開発を目指していたか デザインが優れていれば、道具はより楽しいものになり、利用者はより生産的になるはずです。道具のデザインというものは大昔から私たち人間が取り組んできたことですが、近年急激にデジタルデバイスが多様化したことによって、インタラクティブな道具をデザインするための方法論は技術の進歩に追い付くことができなくなっています。利便性を高めるはずの新技術が使い方を複雑化する要因となり、利用者の混乱は増すばかりです。 最近私は携帯電話を買い替えたのですが、同じメーカーの3年前の機種と比べて、著しく使い勝手が悪くなって
「使える、使いやすい、使いたい」と思えるUIとは？ - @IT
最新トレンドやキーワードをわかりやすく解説 WCR Watch ［15］ 「使える、使いやすい、使いたい」 と思えるUIとは？ アドビシステムズ 上条 晃宏 2006/8/31 ここ数年、リッチクライアント技術としてFlashやFlexを採用する例が急速に増加している。この状況の背景としては、アプリケーション開発における“使いやすさ”の実現が重要な要件の1つとして認知されつつあることが挙げられるだろう。 しかし、単にFlash／Flexを使ったからといって使い勝手の良いユーザーインターフェイスができるわけではない。例えば、使いにくかった画面を“そのまま”Flexで置き換えたとしたら、従来からの問題点も再現することになる。これでは改善は望めない。画面設計を行う側にも使いやすさを実現するためのアプローチが求められるだろう。 ここで注目されるのがエクスペリエンスデザイン（XD）だ。エクスペリエン
多くのユーザーは一度に1本しかジュースを買わない ― ＠IT
ユーザビリティのヒント（1） 多くのユーザーは 一度に1本しかジュースを買わない 「自動販売機での不要な動作から考える」 ソシオメディア 上野 学 2006/6/2 Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなTips集。自動販売機でジュースを買うときの不要な動作から考える。（編集部） 今回からはWebアプリケーションのユーザーインターフェイスの続編の「Tips編」として、ウェブアプリケーションのユーザーインターフェイスをデザインするうえで役立つさまざまなヒントを、少し細かな視点から具体的に見ていきます。 複雑な構成物を作り上げるには、基本となるコンセプトやアーキテクチャといった抽象度の高い部分から考えていくトップダウン式のアプローチと、構成要素の細部から考えていくボトムアップ式のアプローチの両方が必要になりますが、前回までの経験則編はどちらかといえばトップダ
母親から学ぶ使いやすいウェブサイトのインターフェース・デザイン
インターネットが苦手な母親に子どもが使い方を教えるのはほほえましい光景ですがなかなか骨が折れるものです。そんな母親が1人でもウェブサイトを使えるようにデザインすることで、誰にでも使いやすいユーザー・インターフェースを作る方法がまとめられています。 Designing User Interfaces for Your Mother — Design/UX — Medium https://medium.com/design-ux/dd45ec50f7b0 ◆母親のためのインターフェース・デザイン ウェブデザイナーであるトニー・ジャインズさんは、「ちょっとコンピューターのことを見てくれない？いろいろと大丈夫かしら？」とよく母親から不安そうに聞かれるそうです。彼女はインターネットを使いますが、全てを知っている訳ではありません。そこでジャインズさんは世界中に何百万の母親と同じレベルのユーザーがいる
リンク色の変更で年間売上高8,000万ドル増も！ Webデザインで変わるユーザビリティ向上4つのポイント
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
「進むボタン」と「戻るボタン」のちょっとした法則【ユーザビリティTips】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
なぜ、サイトにアクセスした人のほとんどが途中であきらめてしまうのか？ | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 明けましておめでとうございます。今年もよろしくお願いいたします。 私はクリスマス前にイギリスに帰り、お正月は両親と妹たちと一緒にフランスのブルターニュ地方に行きました。ブルターニュは子供の頃、毎年夏休みを過ごしていたところですが、今回の訪問は8年ぶりでした。町はずいぶん豊かになり、新しい別荘が立ち並んで、私が知っている昔のフランスの田舎の町からはずいぶん変わったなと思いました。でも、幸いに、私た
ユーザビリティやセンスの良さにグッときた8つのサイトデザイン | Web担当者Forum
就職したい企業・業種ランキング、トップ20は国内企業が独占【リスクモンスター調べ】 4月13日 6:30
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp： ヤコブ・ニールセンのAlertbox -そのデザイン、間違ってます-
ポップインサイト｜UXリサーチでユーザー視点を間近に
UI Design Dos and Don’ts - Apple Developer
