![Amazon.co.jp: SF映画で学ぶインタフェースデザイン アイデアと想像力を鍛え上げるための141のレッスン: Nathan Shedroff (著), Christopher Noessel (著), 安藤幸央 (翻訳), 赤羽太郎 (翻訳), 飯塚重善 (翻訳), 飯尾淳 (翻訳), 安藤幸央 (監修): 本](https://cdn-ak-scissors.b.st-hatena.com/image/square/d18acb4082d7688856b9ff590237e9e2eda4435e/height=288;version=1;width=512/https%3A%2F%2Fm.media-amazon.com%2Fimages%2FI%2F51KugPLO3qL._SL500_.jpg)
プログラマー、絵が描けないじゃないですか(偏見) こんなじゃないですか。 なので描けるようになりたいなとずっと思っていて、ベジェ曲線って滑らかでナンカヨサソウ、とチャレンジしました。 「ベジェ曲線」習熟ドリル 7,8年前に買ったのがこれ。そう、チャレンジは2回目なのです。前回は3ページぐらいで挫折してました。んで、最近急に暇になったのをキッカケに「よしやろう」という気になり始めたのです。 改訂二版〈Illustratorで学ぶ〉「ベジェ曲線」習熟ドリル 作者: 中村高之出版社/メーカー: ラピュータ発売日: 2005/04メディア: 単行本購入: 2人 クリック: 8回この商品を含むブログ (4件) を見る (2014.1.10追記) なんと、長らく手に入りにくかったこちらの書籍が新装改訂版で再登場とのこと。 表紙が若干、損していた分、今回はスタイリッシュで内容と合っていてヨサソウです。
学ぼうよ、と思っていて、 新人デザイナーのための色彩デザイン・配色のルールを学べる本 作者: 柘植ヒロポン出版社/メーカー: ソシム発売日: 2011/10/01メディア: 単行本 クリック: 1回この商品を含むブログを見る を読んでいました。 @ken_c_lo氏が以下のスライドで触れていますが、エンジニアがデザイン学ぶのマジオススメとのことです。よっしゃ、学ぼう。 新人デザイナーのための色彩デザイン・配色のルールを学べる本 新人デザイナーのための色彩デザイン・配色のルールを学べる本 作者: 柘植ヒロポン出版社/メーカー: ソシム発売日: 2011/10/01メディア: 単行本 クリック: 1回この商品を含むブログを見る WEBというより印刷のデザイナー向けの本なのかな?という印象なのですが色の使い方という意味では勉強になりました。 特色の話やCMYKプロセスカラーの話は一旦無視しながら
UIには本来のサービスが成り立つ上で必要な機能に基づいた必須UIの他に、その必要機能についてユーザーに学んでもらうための学習用UIというものが存在します。本来であればサービスに必要なのは必須UIのみだったはずですが、リリース後やリリース前の段階においてユーザビリティテストを行なった結果があまり良くないのであれば改善をすることになります。しかし、UIのどこに課題があるのかの分析と改善には時間がかかり、実装などでも工数が発生することも考えると、より少ない手間で解決する方法が望まれます。今回は、このようなユーザビリティ上の課題を解決するために生まれた学習用UIのパターンをご紹介します。 参考:モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 使い方を学習するためのUIパターン もし新規のユーザーがサービスのコア機能の使い方がわからなければ、サービス自体を利用してくれな
「Empty Data(またはEmpty Status)」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります(Webでの404に近いですが、少し違います)。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考:モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
剣道の達人は剣が身体の一部になっています。 まるで、剣の先にまで神経が生えているように、剣で感じ、剣を操ります。 もはや、道具を使っているという意識はなく、剣も含めて身体意識が形成されているのです。 同じように、一流のレーサーは身体がマシンと一体化していますし、 一流のバスケットボールプレーヤーはボールが手に吸い付いています。 そういう風にパソコンを身体化したいと思い、キーカスタマイズなど、いろいろと試行錯誤してみました。 その結果わかったのは、もちろん、便利なキーカスタマイズソフトを使うことは重要なのですが、それ以上に重要なのは、「どのような戦略に基づいてキーカスタマイズを行うか」ということでした。 そして、それを突き詰めていったら、結局、スポーツや格闘技と同様、次の3つを徹底追求するべきだという結論に至りました。 とりあえず、ここではそれを「パソコンの身体化技法」と呼んでみることにしま
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ!これでUIデザイン説明の説得力をあげよう! 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事? 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか?」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ(サイズ)を指します。 【第1部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
ライフハッカーのナイトスクール開講。IDEOのデザインシンキングを学ぶ。 優れたデザインとは、グラフィックや造形だけでなく、世の中の問題点や課題を明確にして、解決策を導きだすこと。ある意味では医者やコンサルの仕事にも近いのだと思います。近年、そのアプローチは「デザインシンキング(思考)」と呼ばれています。グラフィックデザイナーやクリエイティブディレクターが広告や雑誌にとどまらず幅広い分野で活躍できるのはそのスキルで社会を豊かにできるから。アップル社の初期マウスやPalmをはじめ、数々の世界的企業との仕事で知られる、デザインコンサルティングファーム IDEO(アイデオ) 。彼らが世界的に活躍しているのもデザインが社会に与える影響力の強さを物語っているのではないでしょうか。 『ライフハッカー[日本版]』が主催するナイトスクールは、いまの世の中のキーパーソンに登場いただき、その仕事術を共有する学
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー(ディレクター、Web担当者、エンジニアなど)向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1:ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
「ファミコン『ドラゴンクエストIV』のパッケージイラストの主役が、一番小さく描かれているのに、最初に目に入ってくるのはなぜか」 これについて、中村佑介氏の解説が目鱗だ→【イラストの見栄えが良くなる】中村佑介先生の公開講座が凄い!。本来は目立たせたいもの(主役)を大きく描くのが原則だが、彩度とコントラストを増やすことで、見やすい画面作りをしているという。 だが、もう一つ、このデザインには「主役」を主役たらしめるテクニックがある。それは以下の通り。 1. 人は、人の顔に一番興味を持つ 2. 人は、画面の中で、顔を最初に見る 3. 人は、画面の顔の視線の先に注意を向ける この原則を知ったのが、本書だ。人はどのように認知し、判断し、行動し、そしてエラーを引き起こすのかについて、ウェブやアプリのデザイナー向けに、「100の指針」という形でまとめたもの。 「嘘のレベルは伝達手段で変わる」や、「読むと理
武蔵野美術大学・デザイン情報学科の学生だった時、「デザインの解剖」というカリキュラムがあった。 デザインの解剖とは、グラフィックデザイナーの佐藤卓さんが独自に行ったプロジェクトで、コンビニやスーパーで売っているような日用品を題材に、ひとつの商品の構成要素を約20項目に分解、それぞれの項目で「どうしてこの部分はこうなっているのか」を、企業の担当者に直接取材して調査するというもの。この基本フォーマットを崩さぬまま、大学の授業としてアレンジしたのが、ムサビ版「デザインの解剖」だった。もちろん客員教授として佐藤卓さんを招いている。 今までに佐藤卓さんが「解剖」した商品は、ロッテ・キシリトールガム、富士フイルム・写ルンです、タカラ・リカちゃん、明治乳業・明治おいしい牛乳など、馴染みのある商品ばかりだ。このプロジェクトは、普段私達が「よく知っている」と思っているものが、実は「よく知らない」ことに気づく
【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく! 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く