Cocoda!で『Human Interface Guideline』を実践しながら学べるコンテンツがリリースされました！🚀｜グレイテストヒロキ | Cocoda!｜note
Cocoda!で『Human Interface Guideline』を実践しながら学べるコンテンツがリリースされました！🚀 Cocoda!デザイナーのグレイテストヒロキです🕺 この度、UIデザインを学習している人・もっとUIデザインのスキルを付けたいデザイナーに向けた、デザインガイドライン(Human Interface Guideline)を元にしたアプリデザインができるようになるコンテンツが追加されました！🎉 同時に、アプリデザインだけでなく「WEBデザインが作れるようになる」コンテンツも追加されているので、そちらと併せてチェックしてみてください！✨ ↓↓早速取組んで見たい方はこちらから👍👍↓↓ https://cocoda-design.com/contents ✍️Human Interface Guideline(=HIG)とは HIGとはApple社が提供するiOS
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
「OFF」とだけ書かれた1つのスイッチ「押すとどっちになるのか分からない」 投稿されたイラストが共感を呼ぶ
スイッチを押すとオンになるのか、オフになるのか分からない……そんなもどかしさを描いたイラストがTwitterに投稿され、共感を集めています。ほんとこういうデザインなんとかしてほしい。 投稿したのはTwitterユーザーのLV41（@lV41_）さん。描かれていたのは灰色の四角形に「OFF」とだけ描かれた平面のイラストでした。これだけでは“押すとオフになる”というアクションを示しているのか“今はOFFだけど、押すとオンになる”という現在のステータスを示しているのかが分からないため、LV41さんは表示方法を統一するよう提言。同時に投稿された漫画には、爆弾の起爆スイッチがこの方式で画面上に表示されたものだったため、解除できず爆発してしまう様子も描かれました。特に画面上でフラットに表示された場合、視覚的な感触が得られにくいために混乱しやすくなっているようです。 さあ、どっち？ 極限状態でこの形式の
日本製UIデザインツール「STUDIO」は従来のツールと何が違うのか - 酔いどれデザイン日誌 - Drunken Design Diary -
先日、私の古巣である株式会社オハコからスピンオフしたオハコプロダクツ社から、UIデザインツール「 STUDIO」のクローズドβ版がリリースされました。 国産のUIデザインツールといえばグッドパッチ社が提供するProttなどが有名ですが、β版を触ってみた感想と合わせて STUDIOの何がすごいのか？従来のUIデザインツールとは何が違うのか？ということを紹介してみたいと思います。 目次 これはプロトタイピングツールではない 特筆すべきはシームレスな操作感 全員がMVPまで作れる時代 まとめ これはプロトタイピングツールではない まず、最初にSTUDIOを「UIプロトタイピングツール」ではなく「UIデザインツール」と記載したのには訳があります。近年はプロトタイピングの重要性が多方面で説かれているのに呼応するように、冒頭で紹介したProttをはじめ国内外からたくさんのプロトタイピングツールが登場し
プロジェクト炎上を防ぐ魔法のアイテム、100徳ナイフを買ったお話２ | fladdict
こんにちは、日本で唯一の100徳ナイフコレクター（推定）兼、UIデザインとかしてる fladdictです。 先日、会社の機材として新しい100徳ナイフを購入しました。 via mantiquesmodern ゾーリンゲンのナイフマイスター、P.LANGが自ら研ぎあげた、最高級の一品です。重量950g、お値段なんと120万円。今年のお小遣いが全部すっ飛びました。 馬鹿と思われるこのナイフ、実はサービスの炎上やデスマーチを防ぐ神ツールだったりします。 このナイフをクライアントの偉い人に見せると、あら不思議！ 「弊社のアプリをこうしては絶対にならない！」「この状況を脱しなければならない！」という号令が、ほぼ100%トップダウンで発動します。 一目瞭然なほど馬鹿で、巨大で、非実用的で、そして無駄に高価であればあるほどに意味がある。これを見せた時、「多機能もすぎれば毒となる」という言質に説得力が生ま
UIガイドラインから学ぶライティングの基礎
言葉で決まるアプリの印象 2 年前に発表されて以来、細かな更新が続いている Material Design。最近、UI の動きに関するガイドが大幅に改変されたことで、感覚的なところも共有しやすくなってきました。Android アプリにおける UI デザインの基礎を固める上で、Material Design は非常に参考になりますが、このガイドラインは見た目のことばかり書かれているわけではありません。 Material Design の中には「Writing」と呼ばれる言葉遣いに関する項目があります。ボタンのような操作 UI のラベルはもちろん、エラーメッセージや、挨拶文など、アプリに表示されるテキストすべてに関してガイドラインが制定されています。言葉は大事なインターフェイスですから、きちんと項目をつくって紹介してあるのは素晴らしいことです。 以下、「Writing」項目で紹介されているガイ
Webブラウザはいつまで続くのか | F's Garage
セグウエイを改良したxiaomiの製品が出た。体のバランスだけでコントロールしていたものが、使いやすインターフェースに変わっていることがわかる。以下、雑多に書くので論点が散漫であるかもしれない、ことは免責事項として予め記載しておく。 つい先日やっていたNext Web Conferenceで、KotarockがモデレータをやっていたUI/UXセッションが面白かった。 その中でも興味深い話だったが、本来表に出るべきでなかったURLというものが、Webブラウザの実装の都合で、表に出てしまったまま普及してしまったという話。 もしかしたらWebブラウザは、HTTPのテスターアプリとしての存在だったかもしれない。テスターとしてのブラウザアプリならURLが露出しているのは自然だ。 しかし、その意に反してドキュメントビューワーから、ゲームプレーヤー、優れたビジュアルデザインの表示器まで進化してしまったら
Your UI isn’t a Disney Movie
My previous short article about gratuitous animation really struck a chord with people. The response has been phenomenal and it’s been awesome reading others’ frustrations with overly animated UIs. To be clear, I’m not anti motion design for UIs. Far from it. I have a problem with animation that serves only to get in the way of the end user. One of the clearest signs of a competent UI designer is
さよなら、インタフェース - Nothing ventured, nothing gained.
インタフェース*1を考える前に、本当にそれが必要なのかを考えるべきだということを、Golden Krishnaのブログを紹介する形で3年ほど前に書いた。 takoratta.hatenablog.com その後も勉強会のライトニングトーク（LT）でこの考えを面白おかしく紹介させて頂いたりした。 Step backして考えるUX from Takuya Oikawa www.slideshare.net そのオリジナルのGolden Krishnaの考えが本になった。「さよなら、インタフェース -脱「画面」の思考法」というタイトルだ。 さよなら、インタフェース -脱「画面」の思考法 作者: ゴールデン・クリシュナ,武舎るみ,武舎広幸 出版社/メーカー: ビー・エヌ・エヌ新社 発売日: 2015/09/17 メディア: 単行本（ソフトカバー） この商品を含むブログを見る 内容は以前のブログ記事
「スキュアモーフィックデザイン」の意味や使い方 わかりやすく解説 Weblio辞書
別名：スキュアモーフィックUI，スキュアモーフィックユーザーインターフェース，スキュアモーフィック，スキュアモーフィズム，スキューアモーフィックデザイン 【英】skeuomorphic design, skeuomorphic UI design, skeuomorphic UI, skeuomorphism スキュアモーフィックデザインとは、主にコンピュータシステムのユーザーインターフェース（UI）において、実物に似た質感の再現を目指したリアルなデザインのことである。 スキュアモーフィックデザインは写実性を特徴としており、立体感、奥行き、質感、光沢感の演出などの要素を取り込んで細部までデザインされている。作りこまれた華美なデザインという点でリッチデザインとも共通する部分が多い。 2013年6月現在、スキュアモーフィックデザインは「フラットデザイン」との対比において言及されることが多い。フ
フラットデザインの成り立ちとGUIへ実際にどう使うのかがものすごくよく理解できるムービー
影やテクスチャなど余計な装飾を排除したフラットデザインは、ウェブ上で使用するとユーザーがページのどこをクリックしていいかわからなくなるという欠点を持ちつつも、現在では色んな場所で使われています。なぜフラットデザインが優れているのか、そしてどうしたらフラットデザインをコンテンツに使うことができるのか、LGの公開しているムービーを見ると、非常によく分かるようになっています。 LG G3 : Graphic User Interface - YouTube これまでLGは影や光が当たったときのツヤ・テクスチャなどを使った、どちらかというと写実的なアイコンを使ってきました。 ユーザーの注意を引きやすいように、ということでさまざまな素材を追加していったわけです。しかし、レンズをつけたり…… より本格的なカメラに近づけても、ユーザーエクスペリエンスは真の意味で向上しないことに気づきます。 ガシャン、と
ユーザインタフェース - Wikipedia
ユーザインタフェース（英: User Interface、 UI）または使用者インタフェースは、機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェースである。これには長音符の有無などによる表記ゆれが見られるが、本記事では「ユーザインタフェース」で統一する。ユーザインタフェースは以下の手段を提供する。 入力 - ユーザーがシステムを操作する手段 出力 - ユーザーが操作した結果システムが生成したものを提示する手段 システムを使う場合、ユーザーはそのシステムを制御でき、システムの状態を知ることができる必要がある。例えば、自動車を運転する際、運転手はハンドルを操作して進行方向を制御し、アクセルとブレーキとシフトレバーで速度を制御する。運転手は窓を通して外界を見ることで自動車の位置を把握し、速度計で正確な速度を知ることができる。自動車のユーザインタフェ
小さい子どもにコンピュータを触らせるということ - ビスケットのあれこれ
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
ユーザーインタフェースの分解
15. • Click • Double click • Triple click • Hover • Press and hold • Drag / Drop 15 マウスを動かす クリックする/離す キーを押す/離す 画面を押す/離す 画面上で指を滑らす 複数の指で押す/滑らす ユーザーの操作 コマンド • Press • Long press • multiple press (ショートカット キー操作など) • Tap • Double tap • Press and hold • Flick • Swipe / Pan • Drag / Drop • Pinch in / Out どう操作するか － ユーザーの操作 (入力) マウス キー タッチパネル
使いやすいUIを追い続けてしまうと自己中になりやすい - WebSig24/7公式ブログ
posted on 2014.05.20 12:22 0 trackbacks 「使いやすくて目新しいUIにしてほしい」とWebやアプリのデザイン依頼で言われることがある。 よーしがんばるぞーと思って、デザインにとりかかる。 そしてデザインの第一案をだすと、もうちょっと目新しさがほしいよねーといわれ、第二案で新しい取り組みをいれると、もっと使いやすくならないかなとなり、次か次かそのまた次くらいでやっと「目新しいしく使いやすいUI」と呼ばれる何かができあがる。 順番はこの毎回この通りなわけではないし、もっと短く終わる場合もあったりするけれど、こうして「使いやすさ」を求めてデザインをリテイクしていくと、それは気づくととても自己中なデザインになっていたりする。 「〜しやすい」という言葉は、前提として比較する対象があるはずだ。 「使いやすい」というからには、使いづらい何か、もしくは普段使っているW
Why Users Aren’t Clicking Your Home Page Carousel
A website study found that out of 3 million home page visits only about 1% clicked a carousel slide. How could a large, graphical element on the home page get such few clicks? The reason most carousels do poorly might surprise you. Most carousels have multiple slides that rotate when users click the navigation arrow. The first slide always gets the most clicks. But the click-through rate for every
モバイルアプリの最小タップサイズを考える | dotproof
モバイルアプリのUIデザインで難しいのはターゲットとなるデバイスの画面サイズに様々なサイズのものがあるということです。画面の大きさにはいろいろあっても人間の手や指のサイズはほぼ誰でも同じですから、どんな画面サイズであっても確実に押せるようなUIのサイズというのを把握してデザインしないと大変使いにくいものになってしまいます。 例えばiOSの「ヒューマンユーザーインターフェースガイドライン」では「タッチ可能な領域のサイズを約44ｘ44ポイントにしなさい」とし、サンプルとして電卓アプリの画面が紹介されています。 “Give tappable elements in your app a target area of about 44 x 44 points. The iPhone Calculator app is a good example of fingertip-size control
母親から学ぶ使いやすいウェブサイトのインターフェース・デザイン
インターネットが苦手な母親に子どもが使い方を教えるのはほほえましい光景ですがなかなか骨が折れるものです。そんな母親が1人でもウェブサイトを使えるようにデザインすることで、誰にでも使いやすいユーザー・インターフェースを作る方法がまとめられています。 Designing User Interfaces for Your Mother — Design/UX — Medium https://medium.com/design-ux/dd45ec50f7b0 ◆母親のためのインターフェース・デザイン ウェブデザイナーであるトニー・ジャインズさんは、「ちょっとコンピューターのことを見てくれない？いろいろと大丈夫かしら？」とよく母親から不安そうに聞かれるそうです。彼女はインターネットを使いますが、全てを知っている訳ではありません。そこでジャインズさんは世界中に何百万の母親と同じレベルのユーザーがいる
ソシオメディア | フラットデザインはUIを進化させるか
ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用
25 Tutorials of Advanced User Interface CSS3 Effects
We all know that technology is evolving like anything and since web browsers are constantly making changes and improving their standards, web developers have to become shrewd and they, too, are constantly trying to adopt the changes. I personally believe that all these changes are positive and this will definitely lead to enhanced support and of course making frontend development time a lot more c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
