Cookpad × Fablic のデザイナーイベント「Think User First」を開催しました。 - クックパッド開発者ブログ
こんにちは、ユーザーファースト推進室 デザイナーの吉井です。 クックパッドでは去る7月23日（木）、フリマアプリ「フリル」を運営するFablicさんと合同でデザイナー向けにイベントを行いました。 イベントのタイトルにもある通り、"ユーザーファースト"をテーマに掲げ、開発現場での実践事例を交えながら両社の文化やデザイナーの働き方についてご紹介しました。 お集まりいただいた70名の皆さまの熱量も高く、イベントスタート時からパネルディスカッション、懇親会に至るまで、とても充実した時間を過ごさせていただきました。 ご来場いただいた皆さま、本当にありがとうございました。 また今回は多数応募をいただいたため残念ながら抽選に漏れてしまった皆さま、たいへん申し訳ありません。 こういったイベントは今後も開催していきたいと思いますので、またのご参加を心よりお待ちしております！ 最後に、各発表者の当日のスライド
20 Best Material Design CSS Frameworks for Websites - Super Dev Resources
Ever since Google gave their design language, the Material Design, there has been widespread adoption of its animated elements, colors and layout principles in websites. Many websites as well as web applications follow the material design guidelines for their web interface as it provides a uniform styling and interactions. If you want to get familiar with the Material Design language then you can
Private Presentation
Private content!This content has been marked as private by the uploader.
実践的なUXデザインとインタラクションデザインの考え方
3. 3 [社外] ・第9回マニフェスト大賞「ASK TOKYO」 ・クラウドを利用した3DCGデータ利活用実験「ARK」 (CG・VFX産業クラウド活用・高連携実証事業) ・Yahoo!クリエイティブアワード よるパネ部門「おやすみひつじ」 [社内] ・写真共有サービス「My365」 ・Pipul アバターエンジン ・ユーザ行動分析サービス「Growth Replay」 ・プッシュ通知配信/解析サービスSDK「Growth Push」 6. ■会社名 ：株式会社シロク ■所在地 ：東京都渋谷区円山町28-3 渋谷YTビル 4F ■設⽴立立 ：2011年年12⽉月1⽇日 ■資本⾦金金 ：5000万円 ■株主 ：株式会社サイバーエージェント 他 会社概要 沿⾰革 2011年10月： 個人プロジェクトとし
テストすること自体がデザインの一部だとしたら？ | POSTD
デジタルデザインの大きなメリットの1つは、テストをして確認ができることです。しかし、多くの人はテストを行っていません。クライアントがデザイナーからデザインを買う際に、結果ではなく美的センスを重視してしまうようなワークフローを責めることもできます。でも、もし私たちが解決できる問題だったらどうですか？ もし、私たちがデザインを提供したり改良したりしてあげられるとしたら？ デザインを新しくすることで以前よりパフォーマンスが落ちるリスクがあることは認めます。それでも、自分たちで集めたデータをもとにデザインを改良し、結果的にコンバージョンを2倍にも3倍にもすることができたらどうでしょう？ テストを行って自尊心を傷つけられることもあるかもしれませんが、代わりに得られるメリットはとても大きいはずです。 テストをするか、しないか テストはプロフェッショナルが使う強力なツールです。しかし、ポートフォリオやラ
ケーススタディ: アプリ “OneShot” をデザインした1週間 | POSTD
3月2日の昨日、私たちは OneShot をリリースしました。このアプリは、スクリーンショット内のテキストにハイライトを入れた画像をTwitterに投稿できるというiOSアプリです。アプリがどのように出来上がり、またデザインがどのように決められていったかを皆さんと共有できたら面白いと思い、この記事を投稿しました。その他、アプリの初期段階のイテレーション、採用されなかったアイコン、framer.jpプロトタイプなどについても言及しています。 始まりはダイレクトメッセージ 友人の Ian Ownbey がTwitterのダイレクトメッセージでフリーランスのデザインプロジェクトに関して私にコンタクトしてきたのが、1月14日のことです。彼は、彼の友人の Jason Goldman と小規模なiOSアプリの仕事を請け負っていたのですが、アプリを完成させるためにデザイナーを探しているとのことでした。当
月間1000万PVを支える「UIの言葉選び」のためのチェックリスト - クックパッド開発者ブログ
クックパッド ダイエット事業室の田中です。昨年５月からスタートした「クックパッド ダイエット」にリリース当初から携わり、デザインやダイエットニュースの編集を担当しています。 現在クックパッドダイエットのサイトは月間1000万ページビューを超え、「ダイエットといえば『クックパッド ダイエット』」と言われるような世界を目指して、日々、運用・改善に取り組んでいます。 今回紹介するのは、クックパッドダイエットのUIをデザインする時の「UIの言葉選び」の具体的なチェックリストです。 最高のレイアウトでも言葉がイマイチだと台無しに みなさんは、UIの中の「文言（言葉）」をどのようなプロセスで決定していますか？ UIのレイアウトや遷移の方法について熟考する姿勢を持っている方は多いと思うのですが、文言の検証方法については確固たる視点を持っていない方もいらっしゃるのではないかと思います。 UIで王道のレイア
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
気遣いのあるデザインの裏にある努力 - ワザノバ | wazanova
http://paulstamatiou.com/twitter-video/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 38分前 フレームワークやツールが進化することで、そこそこのスキルがあれば比較的短い期間でもそれなりのプロダクトをつくれるようになるという恩恵を世の中全体が享受できますが、一方で才能のある人たちは、その便利になった道具を利用して、更に先に進みます。そしてUIの競争は際限なく続きます。 一つの目のパターンは、意外なところまで気遣いをしているので、それを発見したときにポジティブな喜び、驚きを感じるところ。 Slackを使っていると、 登録済のパスワードの入力を求められる画面で、スマホキーボードでのパスワード入力を面倒に思う人、もしくはパスワードが長い人に配慮して、「パスワードを入力する替わり
JOURNAL | Nature dot.
海外の2014年まとめ記事の中に、DropboxのUXデザイナーが自身のユーザビリティテストの模様をブログで発信しているものがありました。 他人のプロセスを知るのは勉強になり、せっかくなので日本語で残してみます。 ※実際にDropboxのサービスをPCで開きながら読むと分かりやすいです。 ■ テストの目的 Dropboxの「写真」ページの課題を明らかにすること ■ テストの内容 何をテストする？：DropboxのWebアプリケーション 誰に?：既存のユーザーで写真をアップしてる人 どこで行う？：コーヒーショップの外を通りすがる人に →サンフランシスコのカフェの外で、行き交う人にゲリラ的にインタビューしていたみたいです。 確かに、日程調整してインタビューするよりフランクな状態を作れるので率直な意見を吸い上げることができそう。 ■ テストの項目 １：写真をアップロードしてもらう ２：アップロー
Q. StoryboardとXIBはどう使い分ければいいんだろうか？ - Qiita
storyboardについて調べていたところ、StoryboardLintの作者の考えが興味深かったので該当のstackoverflowのエントリを抄訳した。訳はニュアンスが伝わればいいくらいの適当さです。 When to use Storyboard and when to use XIBs どういうときにstoryboardを使って、どういうときにXIBを使えばいいか、何かガイドラインはあるかな。それぞれの長所と短所はなんだろう。どういう状況でそれぞれを使えばいいんだろう。 動的にUI要素を組み立てる場合にstoryboardを使えないってのは知ってるんだけど。 (Asked by affian at 2012/2/22) Answer by henning77 at 2012/3/1 ぼくはXIBを使い込んだし、storyboardを使ったプロジェクトを二つ完成させたことがある。そこ
開発者が知っておくべき、6つのUIアーキテクチャ・パターン - ＠IT
.NET開発者中心 厳選ブログ記事 開発者が知っておくべき、6つのUIアーキテクチャ・パターン ―― 「matarillo.com」より ―― 猪股 健太郎 2011/12/15 「.NET開発者中心 厳選ブログ記事」シリーズでは、世界中にある膨大なブログ・コンテンツの中から、特にInsider.NET／.NET開発者中心の読者に有用だと考えられるブログ記事を編集部が発掘・厳選し、そのブログ記事を執筆したブロガーの許可の下、その全文を転載・翻訳しています。この活動により、.NET開発者のブログ文化の価値と質を高め、より一層の盛り上げに貢献することを目指しています。 Martin Fowler氏の『GUI Architectures』を訳して公開しようと思ったのだが、FAQページに「PofEAAの続編などは商業出版する予定なので翻訳はしないでほしい」と書いてある。なので翻訳の公開はやめて、「
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【前編】 | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 前回のコラムでは、ウェブサイトを使っているお客様がなぜ途中であきらめるのかというテーマで話しました。「ウェブサイトの欠陥」を大きくくくると、次の4つのどれかに当てはまります。 サイトのコンテンツ自体が足りない（価値の欠陥）価値のあるコンテンツが探しにくい（ナビゲーションが悪い）価値のあるコンテンツは見つかったがよくわからなかった（プレゼンテーションが悪い）サイトに信頼がなかったために使うのをやめ
ユーザビリティの大切さに気づいてもらう - inucaraの日記
こないだの「インターネットってどういう仕組みで動いているの？」に書いた事前研修でユーザビリティの大切さについても話したいと思って簡単なフォームを作ってみたよ。 想定ターゲットはユーザビリティのユの字も知らないような人や、これからウェブサイトの設計、構築の仕事をしようとしている人。これらの人にユーザビリティの大切さに気づいてもらうために、前回と同じように話す内容をとりあえず書いてってみる。 ちなみに前回のインターネットの仕組みからユーザビリティって話が飛んでるけど、そういうことは気にしないで思いつくことをメモ的にどんどん書いてって、流れは最後に考えようかなって感じ。 じゃあ、さっそく始める！ ユーザビリティって何？ まず始めに、みんなは「ユーザビリティ」って言葉は聞いたことあるかな？ 日本語で「使いやすさ」って意味なんだけど、利用者がいかにストレスなく、便利で簡単で直感的な操作ができるか、っ
ユーザビリティの高い、使いやすいフォームを制作するための12のポイント
Li'l Engineのエントリー「ユーザビリティフォームのためのチェックリスト」の意訳で、ユーザビリティの高いフォームを制作するための12のポイントの紹介です。 Checklist for Usability Forms 不明な箇所は英文のまま記載してましたが、皆様の協力により3,5を和文にしました。 フォームは正しく入力できるように、可能な限り簡潔に。 フォームには、必要なインフォーメーションを含める。 タイトル：なんのためのフォームか フォームのヘルプ キャンセル(中止)の選択肢 入力すべき項目は、多くしない。 重複する入力項目は設置しない。 フォームの公開後しばらくしたら、収集したデータが実際に使用されているかチェックする。利用されていないものがあれば、収集しないようにする。 長いフォームは紛らわしいので、分ける。 タスクごとに分ける それぞれのページごとにチェックをし修正すること
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rapid React Prototyping : React.jsでUIデザインプロトタイプを作る
https://www.openvista.jp/archives/note/257/?257/
フォームのデザインいろいろ - DesignWalker
