Apple WatchのUI/UXデザインでデザイナーが考えるべきことまとめ - HOME'S Designer's Blog ｜ ホームズ デザイナーズ ブログ
2015-10-05 Apple WatchのUI/UXデザインでデザイナーが考えるべきことまとめ こんにちは、HOME'Sアプリのデザインをしている、こいずみです。 HOME'Sはこの度、watchOS2発表に伴いWatchアプリをリニューアルいたしました！ Apple WatchのUI/UXデザインの経験を通して、学んだことや感じたことなどをご紹介しようと思います。 「IOS版 HOME'Sアプリ」DLはこちら Apple Watchだからこその機能 watchOS2対応アプリでできることは主に3つです。 ・新着物件の通知を受け取る ・物件を確認する ・気になる物件をお気に入りに追加する iPhoneで希望の条件を保存しておけば、その条件に合った新着物件通知を受け取ることができ、物件の概要を確認できます。 気になる物件をお気に入りに追加すると、iPhone側にその情報が引き継がれます。
Material Design を全力で取り込んだはてなブックマークリーダーを作ってみた - Qiita
はじめに はてなブックマークのカテゴリをスワイプでシュッシュッと切り替えられるアプリがあったら使いやすいかなぁ、ということで作ってみました。 Material Design のエッセンスをできる限り取り入れましたので、注意した点などを紹介します。現行のアプリに導入できる内容もあると思いますので、参考になれば幸いです。 （追記）「階層」の概念、実装コストの高いものについては、実装の対象外としております。 （再追記）タブバー、トップバーの下にスクロールに合わせてシャドーを表示する変更をしました。 アプリはこんな感じです。ご指摘やご要望などありましたらコメントいただけると嬉しいです。 https://play.google.com/store/apps/details?id=com.appspot.parisienneapps.hatebureader レイアウト、コンポーネント アップバー レ
Sketchの使い方: 初心者がマスターしておきたいSketchでのデザイン作業がぐっと効率的になるチップス | コリス
10 Sketch Tricks for Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レイヤー間でスタイルをコピペ レイヤーの移動 カラーピッカー 角丸の半径を個別に設定 再利用できるシンボル ツールバーのカスタマイズ iOSデバイスでデザインレビュー Sketchの便利なプラグイン Sketchでプレゼンテーション iPhone, iPadの画面を録画 レイヤー間でスタイルをコピペ レイヤーに同じデザインをコピペしたい時は、カラーコードなどをコピペするのではなく、スタイルをレイヤー間でコピペできます。 レイヤー間でスタイルをコピー ⌘ + Option + C レイヤー間でスタイルをペースト ⌘ + Option + V レイヤーの移動 レイヤーを上下に移動させたい時は、ドラッグ&ドロップの代わりにキーボード
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
お値段28億ドル、Slack 「秘伝のタレ」
「で、Slack はどうしてあんなにうまくいってるの？何かしら特別なこと、したんでしょ？」車載の Bluetooth スピーカーから声が響く。「なんであれ、彼らにしたのと同じことをして欲しいんだ。」電話で話していたのは、見込みクライアントである有名 SaaS プロバイダーの CEO。自社製品デザインの見直しをうちに頼みたいらしい。上述のような質問を受けたので、これまでに数えきれないほど繰り返してきた説明を彼にもすることにした。 実際のところ、過去一年間、毎日この質問をクライアントや投資家、デザイナー仲間から受けてきた。みんな「Slack 大成功の秘密」をなんとか探ろうとしていたわけだ。Slack は今ではすっかり世間を取り込んでしまったかのように思える。評価額は圧巻の28億ドル、何十万ものユーザー数をほこり、常識はずれの速度で成長中だ。 Slack に関する質問がどうして僕のところに来るか
たった22名のデザイン・チームが生み出す、Appleの有り得ないまでのデザイン効率（坂井 直樹） @gendai_biz
"デザインシンキング"の極端な成功例 昨年の話になるが、パリの高級セレクトショップ"Colette"でApple Watchが発売された時にAppleのデザイン・チームが珍しく勢揃いした写真が「Cult of Mac」にアップされていた。これまでほとんどメディアに露出することのなかったデザイン・チームの初めての集合写真だろう。この辺りもジョブズ亡き後の傾向の一つかもしれない。 かつて16名（退社した西堀晋もその一人だった）だったメンバーが今では22名に増えた。iPhone、iPad等の大ヒット商品の裏方にいたデザイナーたちだ。少数精鋭の方針とはいえ、これは異常なまでの少なさだ。 一般的に、大企業と呼ばれるような大手電機メーカーは100～200名のデザイナーを抱えている。サムスンなどは例外的に多く1000名と言われているので、Appleのように時価総額50兆円規模のメーカーとしては考えられな
ファーストビュー盲信がもうしんどい
Updated 2015.04.27 / Published 2015.04.27 「ファーストビューが全て」のようなファーストビューについては盲信的な記事も多く、ファーストビュー云々のことで煙が立ち始めて、火がついてしまうと、上手く説得を試みようにも聞く耳をもってもらえず、困り果てるディレクター・デザイナーの方も多いのではないかと思います。ファーストビューはもちろん大事ですが、盲信的に傾倒することには疑問を感ぜざるを得ず、ファーストビュー問題はいつになっても考えものです。 ファーストビューのボヤは気付き難い ディレクターやデザイナーの方ならプロジェクトが進行していく中で、ファーストビューが問題になったことが一度や二度はありませんか。「いやいや、ファーストビューはちゃんとガチガチに予防線を張っているよ！」というディレクターの方も、きっと過去に苦い経験があるのではないでしょうか。 個人的にフ
エンジニアがデザインに取り組んでわかったこと
最近、いくつかのデザインに取り組んでわかったことがあるので、書いておこうと思う。 ぼくは2,3年前にこの業界に入ってからずーっとフロントの実装畑でやってきた。 それは自分の意図していたものではなかったけど、前職のまぼろしという会社は実装が強みの会社だったので、デザインに触れることはほぼほぼなかった。 それもあってか、ぼくは「もうちょっとコストを考慮してほしい」「このあしらいが一体ユーザーにいくらのお金を落とさせるんだろう」とか、あげくの果てには「実装のことを考えたデザインをすべき」とまで考えていた。これらの考え方はぼくだけでなく、コーダーからよく同様の声が上がっている。 だけどデザイナーさんと接する機会が増えるごとに、デザインができるようになったら今までイラついていたことがどんな風に見えるのか確かめたいな、という気持ちになった。 それ以外にも「なにか作るとデザイナーばかり褒められて厳しい」
元Appleのデザイナーが語る、Appleのデザインに関する4つの神話 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
image via. Flickr <Pick Up> 4 myths about Apple design, from an ex-Apple designer アップル製品のデザインが素晴らしいのは、世界でもトップレベルのデザイナーがいるからだ。なんていうのは神話で、優れたアップル製品が生まれる本当の理由を、元AppleのUXエバンジェリストで、現在は「Storehouse」のCEOであるMark Kawano氏が語ってる。 アップル製品のデザインやユーザーエクスペリエンスが優れているのは、デザイナーが素晴らしいからじゃない。それは製品開発の文化そのものにある。アップルでは、デザインが過小評価されたり、開発優先でデザインが二の次にされるようなことがない。製品開発に関わる誰もがデザインを重視し、それについて考えている。デザインの重要性をみんなが理解したところから議論を始められるから、社内
デザイナー向け！iPhone6対応について
（追記 140919 11:00)iPhone 6 Plusを入手しました 特に対応してないアプリで遊んでみても画像の劣化は問題にならないレベルです（主観だけど） （追記 140920 15:00)iPhone 6でのアプリUIについて別記事たてました みなのもの落ち着け！ iPhone6/6+の発売がいよいよ明日となりました！ 二年ぶりとなる画面サイズの変更に加えて@3xの台頭などもあるので、 慌てている・不安なデザイナー同志に向けて気をつける情報をまとめてみました。 画面解像度 アイコン・スプラッシュ レイアウト対応について ひとまず気にするのはこの辺りの情報！ あとはおまけで便利そうなリンクも載せました これを読んで、幾分かは晴れやかな気持ちで明日を迎えましょう。 それにしても時代はレスポンシブです。 やれやれだぜ。 基本的な情報 画面解像度はこうなってます 端末 解像度 インチ 書
iOS UI Kit Actions for Photoshop
iOS UI Kit Photoshop Actions Creating iOS mockups in Photoshop has just turned badass. Buy Now Launch discount — 50% off One click That's what it takes to work the magic. Couldn't be simpler. Size aware One action to rule them all. The same button works for any size. Built-in No drag'n'drop, no plugins. iOS UI is now in your workspace. Changelog September 12th, 2014 — A few days after iPhone 6
PC版トップページリニューアルの狙いと成果 - クックパッド開発者ブログ
メディア事業部の須藤です。 8/26より、PC版クックパッドのトップページをリニューアルしました。 公開から約3週間が経過しましたが、お試し頂けましたでしょうか？ この記事では、今回のリニューアルを通して解決したかった課題や、新しいチャレンジ、 また、それらを具現化する過程で考えた事を、実際の結果と合わせて書いてみたいと思います。 今回のリニューアルで伝えたかったこと 今回のリニューアルで強く意識したのは、「食にまつわる全般を扱うポータルサイト」として、 クックパッドを再認識して頂けるトップページにすることでした。 クックパッドでは２年程前より、従来のレシピサービスとは別の価値を提供する、新規事業・サービスの開発に注力してきました。 例えば、ECサービスである「産地直送便」や、近所のスーパーの特売品が分かる「特売情報」、クックパッド認定の料理教室を展開する「料理教室」などがあり、 それぞれ
デバイスのアクセス許可を求めるUI | UXデザイン会社Standardのブログ
あなたのアプリケーションではユーザーにいくつの許可を求めていますか？例えばiOSの写真アプリケーションであれば、「カメラロール」「カメラ」などの許可を求めるポップオーバーが初回起動時に表示され、ユーザーはそれぞれを許可する必要があります。 もしここでユーザーが「カメラ」の許可をしなかった場合には、まず写真を撮影すること自体ができなくなります（仕様にもよりますが一応シャッターを切ることはできても、真っ暗な写真になります）。ここでようやくユーザーはおかしいと気づくことになりますが、どのようにこの状態を改善すれば良いのかわかっていることは少ないでしょう。 ヘルプなどの項目に書かれている場合もありますが、設定 → プライバシー → カメラ → アプリ名を探してトグルをオンにするという複雑なタスクを行わなければいけません。しかし、そもそもヘルプにさえ辿り着けなければアプリがおかしいと感じ、星1の評価
アプリUI/UXデザイナー必見！「ハンバーガーボタン」ナビゲーションを使うとユーザーエンゲージメントが半減することが発覚 | ゴリミー
あなたが作っているナビゲーションボタンは今流行りの「ハンバーガーボタン」、またの名を「ナビゲーションドロワー」を採用しているだろうか。それとも一覧で表示している「タブボタン」を採用しているだろうか。 クリーンでシンプル、メインコンテンツの表示領域が最も広く確保できるなどいいこと尽くしの「ハンバーガーボタン」ナビゲーション。一方で、常にボタンが表示されメインコンテンツの表示領域が必然的に狭くなってしまう「タブボタン」ナビゲーション。見た目のデザインとしては当然「ハンバーガーボタン」の方が良い。では実際にユーザーとしても同様の見解なのだろうか。 クリーンでシンプルだが、ユーザーは操作方法を覚えられない 「ハンバーガーボタン」もしくは「ナビゲーションドロワー」と呼ばれるナビゲーションUIは数多くのアプリに見られる。Googleもアプリデベロッパー向けにオススメのデザインパターンとして推奨している
プログラマーがイラレで絵を描けるようになると、こうなる - ppworks.jp
プログラマー、絵が描けないじゃないですか（偏見） こんなじゃないですか。 なので描けるようになりたいなとずっと思っていて、ベジェ曲線って滑らかでナンカヨサソウ、とチャレンジしました。 「ベジェ曲線」習熟ドリル 7,8年前に買ったのがこれ。そう、チャレンジは2回目なのです。前回は3ページぐらいで挫折してました。んで、最近急に暇になったのをキッカケに「よしやろう」という気になり始めたのです。 改訂二版〈Illustratorで学ぶ〉「ベジェ曲線」習熟ドリル 作者: 中村高之出版社/メーカー: ラピュータ発売日: 2005/04メディア: 単行本購入: 2人 クリック: 8回この商品を含むブログ (4件) を見る (2014.1.10追記) なんと、長らく手に入りにくかったこちらの書籍が新装改訂版で再登場とのこと。 表紙が若干、損していた分、今回はスタイリッシュで内容と合っていてヨサソウです。
WebエンジニアのためのWebサービスデザイン実践講座
DeNA 社内勉強会に呼んでいただいて、お話させていただきました。 Reviewに登場していただいてるサービスはこちらです。 動く小説投稿サイト Denkinovel by @katryo さん http://denkinovel.com/ ご協力ありがとうございました( ˘ω˘)
「深津貴之氏に学ぶ、スマホUI/UX講座 〜iOS7についての考察とfladdictデザイン論〜」に参加してきました。 | DevelopersIO
「デザイン = かっこ良くすること」だとは限らない。 デザインとは? 設計 複雑な問題を整理して解決すること わりとエンジニアリングに近い 文章を書く練習をすれば読みやすい文章を掛けるようになるのと同様に、勉強すれば人を困惑させないデザインは作れる。 ヒューマンインターフェースの原則 インターフェース = 接点、境界面、接触面、接合面、仲立ち、橋渡し ヒューマンインターフェース = 人とモノをつなぐもの ヒューマンインターフェースの原則 = アプリがユーザーとコミュニケーションをする時の原則 1.必然性のあるビジュアル 機能と外見が調和しているか？ TPOにあわせた格好をさせる ユーザーとコミュニケーションを取る ドレスコードみたいなもの(例:ゲーム:楽しく、ツール:信頼性ありそうな) 機能に最適な外見を与えることで... 使い方がつたわる。 とっつきやすくなる 2.一貫性 アプリ全体でル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイナーを取り巻く様々な設計 / Intrinsic meaning of UI Design
心地よいUIの温度 - 言葉と気遣いで高めるUI -
人気Webデザインを独学できる至高のWebアプリ8選がヤバイ！ | シェアしたくなる最新のWebサービス・ITニュース情報をチェック！ APPGIGA!!（アプギガ）
