こんにちは。ユーザーファースト推進室の元山です。 みなさんはスマートフォンアプリケーションやWebサービスの開発・改善をするときにどのようなプロセスで行っているでしょうか？アジャイルやリーンなどの最近では一般的なよくある開発プロセスの中で、今やプロトタイピングは当たり前に行うものとなっていると思います。プロトタイピングを支援するアプリやWebサービスも数多くありますが、ただ闇雲にプロトタイプを作ればいいわけではありませんし、プロトタイプモックを作ること自体が目的化されては意味がありません。 クックパッドでもプロトタイピングを取り入れた開発プロセスを行っていますが、開発のフェーズであったり、または目的によってどのようなアウトプットとしてプロトタイピングするのかは変わってくると思います。今回はクックパッドで実際に行っているプロトタイピングについてフェーズや目的ごとにご紹介しようと思います。 コ

PhotoshopでWebページやアプリのUIデザインをしている時に役立つ、レイヤー作業が便利になる無料の機能拡張を紹介します。 各ページのデザインを作るためにヘッダとフッタだけがあるPSDにしたい、ナビゲーションやボタンなどパーツのみのPSDが欲しい、スマホ用の画像を書き出したい、などいろいろです。

ユーザーファースト推進部の坂本です。 8/4（月）に自分がデザインを担当している『健康レシピ』のスマートフォンサイトを公開しました。 今回のスマートフォンサイトのデザインプロセスに合わせてクックパッドでよく用いているツールを紹介します。デザイナーやエンジニアの方が今後スマートフォンサイトを作る際に参考にして頂くためまとめてみました。 ■健康レシピとは… クックパッドで公開されているレシピを管理栄養士監修のもとに選定し、簡単に栄養計算ができるようにしたサービスです。主に糖尿病や高血圧、脂質異常症やメタボの方向けに、健康的でおいしい食事を紹介しています。 スマートフォンサイトのデザインプロセス スマートフォンサイトのデザインプロセスは、以下の流れで行いました。 画面構成を作成し、全体の遷移を確認する 各ページのデザインを作成する Flintoで遷移に違和感や問題点がないかを確認する コーディン

アイデアは面白いのに、どうもダサかったり、UIがわかりにくかったりするWebサービスに出会ったことはないだろうか。 それはもしかすると、デザインを知らないエンジニアが、ふわっとした感覚と印象で作っているからなのかもしれない。そんなエンジニアでも、デザインのセンスを身につけることはできるのだろうか？　プログラマー向けにデザインを教える“デザインメンター”赤塚妙子さんに話を聞いた。 プログラミングを学んだデザイナーが始めた“デザインメンター業“ 今年の1月から“デザインメンター業”を始めたフリーランス デザイナーの赤塚妙子さん。美大を卒業後、デザイン事務所に就職。その後、Webの世界へ足を踏み入れ、今ではRuby on Railsの開発に参加するまでになった。 「自分がプログラミングを覚える中で、デザイナーとプログラマーが歩み寄る感じが面白くって。デザイナーがプログラミングを覚えることはあるけ

2014年9月10日、渋谷ヒカリエのDeNAさんで開催された　UIデザイン・プロトタイピングのセミナー交流会　行ってきました 100名定員のところ268名参加希望が来ちゃうという人気ぶり！ はじめて見たときに、iPhoneだけでプロトタイピングできちゃうスゴイ！！と衝撃だったプロトタイピング用アプリ「POP」を開発したBenさんのお話と、あの凄腕デザイナーでデベロッパーな深津さん(@fladdict)が登壇するのだから、この人気も納得です スケジュール 17:30 開場 18:00 – 18:10 オープニングトーク 18:10 – 18:40 POPとUS式のアプリデザインについて by Ben Lin 18:40 – 19:25 ペーパープロトタイピング入門 by fladdict 19:25 – 19:40 会社および事例説明 by DeNA 19:40 – 21:00 交流会 PO

こだわり抜かれているウェブデザインを多く見ることは想像力を豊かにしてくれると思う。本当にクリエイティブでクオリティの高いサイトを見ると「自分も何かを作りたい！」と創作意欲が強く刺激されることもある。 今回はぼくがここ数年間で見てきたウェブページの中で、創作のモチベーションを高めてくれたものをまとめて紹介しようと思う。 1. AMP MUSIC 最近のお気に入り。アフリカのストリートミュージックを取り扱う音楽レーベル「AMP MUSIC」のウェブサイト。スマホで見ると、アニメーションや音楽の再生がないが、それでも配色や全体のバランスが洗練されている。 2. UNIQLO INTRODUCTION サイトの始まり方から、マウスオーバー時の動きまですべてが群を抜いてカッコイイウェブページ。流れてくる衣服や写真の流れまでこだわり抜かれている。作業用音楽で聞いていたいほど、BGMはリズミカルで心地が

アプリのデザインを行う前に知っておけば、よりスムーズに案件が進められると思うことを記事にしてみました。 少し記事が長くなってしまいそうな為、制作時に注意しておくと良い点と、制作が終わり実際にアプリを申請する際に必ず必要な画像、の2つに分けてまとめていきます！ 各種パーツサイズ 各種パーツのサイズは以下の通りです。下記はiPhone5Sの場合です。 デザインを行う際の画面サイズ iPhoneの場合はmdp（iPhone3・iPhone3GS）とxhdp（iPhone4以降）の2種類のリソース画像が必要ですが、Android端末だとmdpi、hdpi、xhdpi、xxhdpiの4種類のリソース画像を用意しなければなりません。つまりスマートフォンアプリを作るだけで4種類の画像が必要になってきます。これを知らずにiPhone5Sサイズのみを作ってしまうと後々サイズが足りず作り直すはめになってしまい

（追記 140919 11:00)iPhone 6 Plusを入手しました 特に対応してないアプリで遊んでみても画像の劣化は問題にならないレベルです（主観だけど） （追記 140920 15:00)iPhone 6でのアプリUIについて別記事たてました みなのもの落ち着け！ iPhone6/6+の発売がいよいよ明日となりました！ 二年ぶりとなる画面サイズの変更に加えて@3xの台頭などもあるので、 慌てている・不安なデザイナー同志に向けて気をつける情報をまとめてみました。 画面解像度 アイコン・スプラッシュ レイアウト対応について ひとまず気にするのはこの辺りの情報！ あとはおまけで便利そうなリンクも載せました これを読んで、幾分かは晴れやかな気持ちで明日を迎えましょう。 それにしても時代はレスポンシブです。 やれやれだぜ。 基本的な情報 画面解像度はこうなってます 端末 解像度 インチ 書

『Webデザイン・コミュニケーションの教科書 インタビュー』 筆者が本書を執筆する際に参考にさせていただいた、8人のワークスタイルをインタビュー記事にしました。 今回のお相手は、Android界隈では知らない人はいないという、あんざい ゆきさん。 3冊のAndroid UIに特化した著書の売れ行きも好調ということで、デザインとプログラムに関する話をお聞きしました。 今回のお相手：あんざい ゆきさん 「どんなにいいデザインを描いても、実現できないとそれは絵に描いた餅でしかなくて、実際につくってさわってみないと思ってたのと違うなっていうことがあると思う。」 あんざい ゆき @yanzm 株式会社ウフィカ 代表取締役 ブログ「Y.A.Mの雑記帳」で多数のAndroid技術情報を公開。UIに特化した「Android Layout CookBook」や「Android UI Cookbook for

あなたが作っているナビゲーションボタンは今流行りの「ハンバーガーボタン」、またの名を「ナビゲーションドロワー」を採用しているだろうか。それとも一覧で表示している「タブボタン」を採用しているだろうか。 クリーンでシンプル、メインコンテンツの表示領域が最も広く確保できるなどいいこと尽くしの「ハンバーガーボタン」ナビゲーション。一方で、常にボタンが表示されメインコンテンツの表示領域が必然的に狭くなってしまう「タブボタン」ナビゲーション。見た目のデザインとしては当然「ハンバーガーボタン」の方が良い。では実際にユーザーとしても同様の見解なのだろうか。 クリーンでシンプルだが、ユーザーは操作方法を覚えられない 「ハンバーガーボタン」もしくは「ナビゲーションドロワー」と呼ばれるナビゲーションUIは数多くのアプリに見られる。Googleもアプリデベロッパー向けにオススメのデザインパターンとして推奨している

WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所

「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう！Yoshiki Hayama

健康診断の結果が思ったより悪くて、ちょっとへこんでいるたごです。こんにちは。 今回はよくある話題ではありますが、デザイナーとプログラマの共同作業について書いてみたいと思います。 はじめに アプリケーション開発をするにあたって、デザイナーとプログラマの共同作業にはずっと課題がつきまとってきました。 互いの理解不足によるすれ違いだとか、一つの成果物を作り上げるのに両者でどう分業すればよいかとか。 前者は人と人の問題なので互いに歩み寄って行くしかありませんが、後者の課題にはこれまでもツールやフレームワーク、開発プロセスの面から解決の工夫がとられてきました。それによって最近はだいぶやりやすくなったんではないかとは思いますが、万事解決というわけには行かないのが実情です。 まあ理想としてはデザインもプログラミングもどっちも得意な人がやってしまえばいいんですが、そういうスキルを持った人をメンバーに集めら

ここ最近、女子向けアプリが多数リリースされているのはご存知でしょうか。 SNS、ユーティリティ、ライフスタイル、ナビゲーションなどアプリのカテゴリも様々です。 そこで今回は、最近話題になっている女子向けiOSアプリ5サービスについて、それぞれのアプリの特徴・UI/UXのポイントと、女子ウケする共通エッセンスをデザイナー・企画視点で考えていきます。 恋するマップ-女子ちず- /ナビゲーション 特徴 女子向けの地図アプリ。 もうご存知の方も多いかもしれませんが、地図業界を震撼させた女子向けの地図アプリです。 通常の地図アプリ機能に加え、女子には必須なトイレからカフェ、サロンなどの情報も写真付きで確認することができます。 ポイント 一番の特徴であり、女子ウケポイントでもあるのが画面右上にある“チャーム”。 スマホの傾きをキャッチして揺れるだけですが、こうしたさりげないところにかわいい！と思えるポ

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p

画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 高速化のための画像最適化の方法はいろいろなところで紹介されております。 当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。 こちらの記事でも紹介したように画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 デザインに左右される方法が多いので使えるケースは限られてますが、知っておくとどこかで役に立つかもしれません。 画像をぼかす jpegはそのアルゴリズムの特徴から通常の画像よりぼかした画像のほうがファイルサイズをおさえることができます。また、これは全体でなくて一部をぼかす場合

―まずみんな「竜」は好き？ 竜…。あんまり興味が無いですね… 私もそもそも考えたことがないかな…今まで一度もそんなこと聞かれたことないし 好きでも嫌いでもないかな。でもいかついイメージはあるかも 私はけっこう好き！ ―なるほど。では次の質問です。竜と聞いて、みんなが思い浮かべた「竜の色」って何かな？ 完全に赤ですね わたしはエメラルドっぽい緑 緑です ―さくらちゃんの答えに影響されてない？ イメージは固まってた？ 固まってました。あとヒゲが生えてるかな、って思う 私も緑です ―さおりちゃんも？緑の流れがあったからじゃなくて？緑じゃなかったら緑じゃなくていいよ？ 最初から緑です。でも青も分かるかな？ ―どういうこと？二匹いるってこと？ いや、同じ形の竜でも、緑と青の2色が可能性としてあるかなと ―では、今みんながイメージしてる竜の一人称は何だと思う？ 「我」 「余」かな？ 「俺様」とか、「俺

デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの