これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
目的に向かって作り込む、ユーザーを動かすためのデザインの考え方 - クックパッド開発者ブログ
投稿開発部のデザイナー平塚です。クックパッドにレシピを投稿してくれるユーザーのための機能やサービス全般のデザインを担当しています。 今回は最近投稿開発部で行なったキャンペーンのLPのデザインを具体例に、私の考えるデザインプロセスをご紹介します。 施策の概要 日頃からクックパッドを利用してくれているユーザーに感謝を込めて、投稿した自分のレシピでレシピ本を作れるというキャンペーンを実施しました。 伝える手段としてキャンペーンLPを作成し、対象者にはメールで告知しました。 作成したLPはこちら デザインコンセプトを決める際に考えること 大きく分けて、ユーザーの体験とクックパッドが伝えたいことの2つを考えてデザインに落とし込んでいきます。 A. ユーザーの体験を整理する まず、LPを見たユーザーにどうしてほしいかを考え整理していきます。 ユーザーにレシピ本を作ることが目的だと思ってもらうことを考え
娯楽を超えたデザイン （UI Crunch #13 娯楽のUI イベントレポート）｜のっち Ryosuke Inoue
「UI Crunch #13 娯楽のUI - by Nintendo -」に参加しました。世界的にも注目される企業かつあまり表に出てこないデザイントークが聞けると言うことで、倍率も相当なものとなっておりました。この企画は構想から2年くらいかかったそうで、とても濃いお話を聞くことができました。めちゃ感動しました。今回は、そちらのイベントレポートです。最初の方あまり写真を撮らなかったので、後半の写真が多めになります。 1人目は、UI/UX デザイン チーフの正木さん。「娯楽UIの思考の原点」についてお話いただきました。 Nintendo流の「伝え方」Nintendoが人に何かを「伝える」時にこだわっていること。それは、以下の3つです。 ・「教える」ことよりも「体験する」ことで、より早く、的確に伝えることができる。 ・初めての体験は一度きり。新鮮な印象を大切にする。 ・体験はやっぱり面白くしよう
デザイナー必見！デザインが学べるスライドシェア40選
デザイン業界は常に新しいトレンド・技術が続々登場し、目まぐるしいスピードで変化しています。きっと「常に情報収集を行っている」というデザイナーの方も少なくないはずです。 今回は、ぜひそうした方々に有益な情報をご紹介します。情報収集というと、インターネットや本などを通じてというのをイメージされる方が多いかと思いますが、スライドシェア（Slideshare）もオススメの手段です。 「スライドシェアが何か」というと、プレゼン資料をインターネット上で公開・共有するサービスを指します。良質なスライドが数多く揃っていますので、知識を深めたい方にはもってこいです。今回は公開中のスライドシェアの中でも、特にデザインが学べるスライドを中心にまとめてみました。ぜひ参考にしてください。 デザインの学習にもってこい！デザイナー向けスライドシェア 1. 優れたデザインの 定義と思考方法 https://www.sli
ケーススタディ：面白法人カヤックが実践する友情体験のデザイン
プロダクトのコンセプトはそのプロダクトにまつわる施策を決める重大な指針となります。今回は面白法人カヤックのスマートフォン向けゲームアプリ「ぼくらの甲子園！ポケット」の事例から、同社が掲げる「友情体験」がどのようにプロダクトのデザインに落とし込まれているかに迫ります。 インタビューイー 綿引啓太 氏（写真右）：面白法人カヤック 企画部 プロデューサー 岩瀬茂樹 氏（写真左）：面白法人カヤック 意匠部 デザイナー ・・・ ― 今回は「ぼくらの甲子園！ポケット」にまつわるUXデザインの話を伺いたいのですが、まずはゲームの簡単な紹介をお願いします。 綿引：「ぼくらの甲子園！ポケット」（以下、ぼくポケ）は2014年の9月にリリースした、名前の通り高校野球をテーマにしたソーシャルゲームです。 「ぼくポケ」は、チームを組んで甲子園での優勝を目指すという、いわゆるギルドバトル形式のゲームです。スポーツゲー
UXデザインの正しい評価方法
ZEPPELIN ドイツ腕時計ブランドの"ZEPPELIN"とのコラボレーションウォッチパートナ... 詳細を見る
プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
UIデザイン提案に不可欠！顧客の納得度を上げるために意識すべき4つの条件（スライド付）
去る6月22日（木）に渋谷で行われた、株式会社アジケ主催のイベント「UX dub〜UX／UIの現場、最前線〜」に登壇させていただきました。今回のエントリーはこのイベントで発表させていただいた内容のフォロー記事になります。 日頃のクライアントへのUIデザインの提案において、なかなか作ったものに対して納得していただけない、スムーズに話が進まない、といった状況は、誰しも経験するものかと思います。しかし近年、私自身の経験を振り返ると、以前に比べてスムーズに提案が進むようになったと感じていました。 そんな時にお誘いいただいた、このイベントの「UX／UIの現場、最前線」というキーワードを聞き、私の所属するベイジではどのようにパートナーをリードしてUIに落とし込んでいるのか？をお話してみようと思いました。 この内容について、我々が作るWebサイト自体のUXやUIを深く追求することももちろん大切なのですが
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ Appleをはじめとする多くの成功企業がデザイナを役員に据えるなど、デザインに対する重要度が年々上がっているこの時代、若手のうちにUIデザインに関する基本的な考えを身につけ、より良いプロダクトを制作できるエンジニアを目指しましょう。 こんにちは。 グロースデザイナ/フロントエンジニアとしてWebサービス開発に携わっている右寺（@migi）と申します。最近は複数の企業で、数値解析から企画提案、開発も含めてサービスを成長させるためのお手伝いをしています。 現在はフリーランスとして活動していますが、直近では株式会社グッドパッチというUI（ユーザインターフェイス）デザインに特化した会社に勤めており、そこではデザインとの距離がとても近いところで開発をしていました。 そんな私の経験から、この記事では「エンジ
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
Photoshopを使ってシネマグラフを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
動画を準備する シネマグラフの完成度は動画のできにかかっています。主な条件は以下の3つです。 ネマグラフがうまくできる条件 1. カメラが固定されていること シャッターを押すちょっとしたブレでもつなげると気になったりするので、三脚＆リモートシャッターなんかがあるといいと思います。 2. ループの繋ぎ目が気になりにくい動きであること 髪の毛のふわふわとか水がチョロチョロ流れる動きなど、動きが単純で短い時間でも成立するものが向いています。しかしこういった動きはすでによく使われていて、マンネリなのも事実ですね……。アイデアをひねり出すのが一番大変な作業かもしれません。 3. 動いてる部分の背景に動きがないこと 後で詳しく説明しますが、動画の上に静止画を置いて、動かしたい部分に穴を空けるというのがおおまかな手法なので、動かしたい部分以外にちょっとでも変化があると違和感が生まれます。 以上の点を踏ま
【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう
スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
UIデザインのKPI設計 | keisuke tsukayoshi
こちらはFablic Advent Calendar 2016の記事です。 このブログの最後の投稿もFablic Advent Calendar 2015の記事だったようで、もはやAdvent Calendar専用ブログとなりつつありますが今年もAdvent Calendarのおかげで無事更新できたということでここはひとつ…! UIデザインのKPI設計？ さて、皆さんはUIデザインをするとき、どんなKPI設定をしますか？ より使いやすいものにする、イケてるものにする、機能のつじつまが合うようにするなど定性・定量様々あると思いますが、UIの改善でサービスをより成長させる ためにぼくが最近意識している目標設定のプロセスをご紹介したいと思います。 準備①：事業とユーザー体験のKGIを一致させる KPIを決める前に、まずチームにとって一番大きな目標であるKGIを設定します。サービスは会社が運営して
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
2015/10/10 13:30 〜【岡山】ゲームデザイナー向けキャラクターイメージ・ディレクション ～イメージコンセプトのまとめ方と発注の仕方～（専門学校岡山情報ビジネス学院）で使用した公開用スライドを一般公開用に抜粋したものです。 https://kenjin.unity3d.jp/events/show/277 本スライドでは、シナリオ制作の話は振れていませんが、シナリオ関連のお話に関しては以下の資料を参照してみるといいかもしれません。 『ゲームシナリオ構成論 The Method for the game sinario writings for multi-ending adventure games』 http://www.slideshare.net/nyaakobayashi/ss-12559078
新サービス立ち上げ時の重要指標のデザイン - クックパッド開発者ブログ
こんにちは、株式会社ビットジャーニーに出向中の出口 (@dex1t) です。ビットジャーニーでは、社内情報共有ツール Kibela*1のサービス設計やプロダクトマネジメントに責任を持ちつつ、エンジニアとして開発全般に携わっています。 今回は、新サービスの立ち上げ時にどのような考えで重要指標*2を設計し、それを実際の開発のなかでどう使っていくかという話をします。 なぜ検証をするのか そもそもなぜ新サービス立ち上げ時に、重要指標や検証といった考えが必要になるのでしょうか。それを考えるにあたって、クックパッド的なサービス開発の流れを改めて整理してみます。 企画と検証は表裏一体 サービス開発といえば、企画・開発・検証をぐるぐる回すというのが一般的だと思います。指標は検証段階で活用する道具です。企画で考えたことを確かめるのが検証段階であり、企画と検証は表裏一体です。 したがって、指標の設計をするにあ
【CEDEC2016】全てはプロデューサーが集中して楽しめるように！ 『デレステ』UIの要諦は基本ルールと最小のパーツ 軽量版やウインクの秘話も明らかに | gamebiz
【CEDEC2016】全てはプロデューサーが集中して楽しめるように！ 『デレステ』UIの要諦は基本ルールと最小のパーツ 軽量版やウインクの秘話も明らかに Cygamesは、「アイドルマスターシンデレラガールズ スターライトステージ 制作事例・アート編 － 総勢60名のアイドルを最大限魅力的に表現し、ライブに集中する手法（モデリングとUI/UXデザイン）」と題するセッションを8月26日の「CEDEC2016」で開催した。モデリングパートとUI/UXデザインのパートに分かれており、今回はUI/UXデザインパートの模様をレポートする。UI/UXデザインのパートでは、Cygamesデザイナー部UIデザインチームマネージャーの中村ふじ子氏（写真）が登壇した。 『アイドルマスターシンデレラガールズ スターライトステージ（以下、デレステ）』は、「Mobage」で配信されている『アイドルマスターシンデレラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AccessibilityCheckList
デザイナーこそ覚えておきたいCSS最新事情！ あなたの知らないfont-familyのイマ
マテリアル デザインのガイドライン（日本語版）
