デザイン原則がどの現場でも必要な理由
大企業だけのものではないデザイン原則は、ひとりのデザイナーがマニフェストとして明示することもありますが、最近は多くの企業がスタイルガイドと一緒に作られることが多くなりました。ここで言うデザイン原則とは、タイポグラフィや配置といったデザインするためのノウハウではなく、「我々が考える良いデザイン」が文章として表されたものを指します。つまり、自分たちのスタンス（立ち位置）を示したものです。 Material Design だと、以下の 3 つの原則があります : 実世界にも通じる空間と動きをメタファとして扱う力強く、視覚的であると同時に意図的動きを通して操作や表示の意味を伝えるまた、Facebook のデザイン原則だと、「ユニバーサル」「一貫性」「使いやすさ」など１単語でシンプルに表現されています。もちろんこれだけだと分かり難いので解説が添えられています。例えば「一貫性」であれば、再利用できるも
スマホでの商品表示はグリッドビューとリストビューどちらが最適？ | UX MILK
グリッドビューはEC系のアプリでよく使われる手法ですが、これには何か理由があるのでしょうか？ シンプルなリストビューよりグリッドビューの方が成果が上がるのは、どのような場合でしょうか？ この記事では、グリッドビューについて細かく見ていきつつ、双方の問いに対しての答えも探っていきたいと思います。 グリッドビューとは グリッドビューとは、標準のリストビューに代わる、コンテンツの表示手法です。グリッドビューは水平方向と垂直方向の両方に、２つ以上のセルを配列することで成立します。
『行為のデザイン』に書かれている8つの"バグ"の分類がUXデザインの参考になる
以前、以下の記事で「UXバグ」という言葉を聞いてなるほど！と思っていたのですが、『行為のデザイン』の提唱者であるデザイナーの村田智明氏も日常における問題点を「バグ」と表現しています。 参考：「ユーザー体験の品質を見える化」する「UXバグ」の考え方とは？／HCD-Net通信 #29 | HCD-Net通信 | Web担当者Forum （ちなみに、IDEOトム・ケリー氏の著書『発想する会社！』でも、「バグ・リストをつくる」ということがイノベーションのためのインスピレーションにつながると書かれています。） さて、『行為のデザイン』ではそのバグを8つに分類しており、「UXバグを考える際のフレームワークになる」と感じました。 個人的なトレーニングも兼ねて、８つのバグの分類を紹介しつつ書籍には載っていないバグの例を挙げてみます。 ※8つのバグについては、こちらの記事にもまとめられています。 参考：人の
誰のためのUI？ Dropboxのデザイナーが語るUXライティング
Windowsに「My Computer」のアイコンがあった時代を覚えていますか？ あなたのコンピュータ上にある、すべてのアプリケーション、ファイルやその他のデジタルコンテンツを詰め込んである、小さなアイコンのことです。 後のバージョンのWindowsでは、Microsoftはこのアイコン名を「Computer」へと変更、さらには「This PC」へと変更しました。その理由は何だったのでしょうか？ 「my」が何を指すのか曖昧だからでしょうか？ どこか矛盾しているからでしょうか？ それとも必要なかったからなのでしょうか？ このアイコン名の変更は、私に大きな疑問を抱かせました。なぜこのような製品は時として、「私のもの（my〜）」や「あなたのもの（your〜）」という言い方をするのでしょうか？ 「あなたのもの」を何と呼ぶか？ 様々なアプリを見ていくと、UI上であなたの所有かどうかを表す基準は存在
UI考：なぜそのセルには押せる感があるのか - Qiita
この記事の目的 セル（UITableViewCell）は iOS においてもっとも一般的なビューのひとつです。セルを利用することで、コンテンツの表示、選択、スイッチやボタンの配置、テキストフィールド、ナビゲーションを実装することができます。この辺りの具体的な実装例は『設定』や『Apple Store』が参考になるでしょう。セルにはさまざまな役割を与えられますが、どのような作法に従ってデザインされているのかよく理解する必要があります。 セルの一般的な利用作法は iOS Human Interface Guidelines で解説されていますが、私はこれを読んだだけでは十分に理解が及ばなかったため、iOS 標準アプリの事例からセルのデザインについて考察したものをまとめました。この記事では iOS の標準的なセルのデザインパターンを探り、自身のアプリにどう活かせるのかの土台となるよう考察してみま
アラートのOK、Cancelボタンは右と左、どちらにおくべきか？ - Qiita
はじめに 皆様は、アラートのOKボタンとCancelボタンの配置は どういった基準で決めていますか？ (右か、左か？） 勿論、スマートフォンを右手で操作する人、 左手で操作する人で、変わってくると思いますが、、、 基準はどうすべきか？ ちなみに、押しやすいのは、右か、左か？ 右手で操作する人を想定した場合 押しやすいのは、右側だと思います。 単純に親指からの距離が近いためです。 逆に左側は、親指からの距離が遠いため、 押しにくいです。 （当たり前ですね。） こういうときは、各プラットフォームのガイドラインに準拠するのがベターだと思います。 「郷に入っては郷に従え」ではないですが、 iOSの場合はヒューマンインタフェースガイドライン、 Androidの場合は、Google Material designに準拠すべきだと思います。 iOSヒューマンインタフェースガイドラインの存在 存在を知って
スマートフォンアプリ開発における共創的な開発チーム
複雑かつリッチな体験を提供するスマートフォンアプリを開発するためのチームワーク、その中でのエンジニアの役割について
Hatena Design Hour #3 を開催しました - Hatena Design Group
6月3日（金）に、はてな東京オフィスにて、デザイナーイベント『Hatena Design Hour #3』を開催いたしました。 Hatena Design Hourは、Webサービスの開発に関わっている、Webサービスに興味がある、そんな、Webサービスが大好きなデザイナーのためのイベントです。弊社デザイナーによる各担当サービスのデザイン業務をバックグラウンドとした、デザインに対する考え方を紹介しました。 ありがたいことに、今回も定員を大きく上回るご応募をいただきました。抽選に漏れた方、申し訳ございません。次回のイベント開催時にも、このブログで告知しますので、ぜひご応募ください。 イベントで行った各プレゼンテーションの概要をご紹介します。 はてなブックマークエリアガイドのデザイン（百合佐織） はてなブックマークの新機能「エリアガイド」を作るときに考えたコンセプトやデザインを自分の体験を交え
Activity/Fragmentの再生成と画面回転に関するまとめ - Qiita
本ドキュメントについて Activity/Fragmentの再生成に関しての挙動と、画面回転の挙動をまとめ、それらを統一的に処理するためのクラスを提示する。 画面回転などのconfigChangeにどう対処するか 公式ドキュメントのHandling Runtime Changesでは、以下の二つの対処方法が紹介されている。 configChanges属性を使い、Activity/Fragmentの再生成をさせない setRetainInstance(true)を使い、Fragmentの再生成をさせない。再生成前後で使いたいオブジェクトはそのFragmentに格納しておく。 これらの方法はいずれも、問題点がある。 ActivityのconfigChangesで再生成をさせない場合の問題点 Acdtivityの属性に のようにconfigChangesを指定してActivityの再生成をさせな
Androidの新しいLayout、ConstraintLayoutことはじめ - Qiita
Android Studio 2.2 previewより、ConstraintLayoutという新しいLayoutが導入されました。本稿では実際に触ってみた操作感や実装方法などについて紹介します。 ConstraintLayoutとは ConstraintLayoutは自動的にレイアウトの位置をマテリアルデザインに沿った最適な位置に調整してくれます。iOSでいうところのStoryboardのAutoLayoutのような機能をもったレイアウトです。 具体的な特徴として AutoConnectという機能を使って最適なレイアウトを調整できる Android Studioが自動的に一番フラットなxmlを生成してくれる Inferenceという機能で全体の整合性も調整できる API 9 までのバックポート対応 同梱ライブラリではなく、導入してもサイズが小さい (100kb) ということが挙げられます
ViewPagerを使った読書画面の基本的な実装 - Islands in the byte stream
電子書籍関係者で勉強会をやったので資料を公開します*1。 speakerdeck.com 追記: Fragmentの状態の復帰はFragment#onViewStateRestred(Bundle)) でできるのではという指摘をいただきました。試したところ想定通り動いたのでコードの方は修正済みです。 デモ実装は https://github.com/gfx/TinyPdfReader で、以下のようなことが実装されています。詳細は資料をご覧ください。 ピンチイン・ピンチアウトでのズーム（PhotoViewを使用） 画面の左右タップでの移動 Landscape時の見開き（1画面2ページ） 見開きでも表紙は1ページだけでセンタリングする 画面回転時の読書位置の保存 ページロード時の非同期画像読み込み ＋ふわっと表示 全画面表示（immersive mode） & 画面中央タップでトグル その他
RecyclerViewのDataBinding - Qiita
Observableクラスの作成 BaseObservableを継承したBind対象にするクラスを作成する。これがレイアウトファイルに紐づく。 public class User extends BaseObservable { // 名前 private String firstName; // 名字 private String lastName; // アイコン(どこかのurlから取得できることとする) private String iconUrl; // ゲッターに@Bindableをつける。変数につけてゲッター書かなくてもよい？ @Bindable public String getFirstName() { return this.firstName; } @Bindable public String getLastName() { return this.lastName;
A Guide to Android RecyclerView and CardView
The new support library in Android L introduced two new UI widgets: RecyclerView and CardView. The RecyclerView is a more advanced and more flexible version of the ListView. This new component is a big step because the ListView is one of the most used UI widgets. The CardView widget, on the other hand, is a new component that does not “upgrade” an existing component. In this tutorial, I’ll explain
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
君たちはそんなにハンバーガーメニューが好きなのかね？
はじめに 本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三本線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像で探すView系Androidライブラリまとめ(2016/08) - Qiita
Adjust icon size of Floating action button (fab)
Using CoordinatorLayout in fragments with ActionBar in Activity