目的に向かって作り込む、ユーザーを動かすためのデザインの考え方 - クックパッド開発者ブログ
投稿開発部のデザイナー平塚です。クックパッドにレシピを投稿してくれるユーザーのための機能やサービス全般のデザインを担当しています。 今回は最近投稿開発部で行なったキャンペーンのLPのデザインを具体例に、私の考えるデザインプロセスをご紹介します。 施策の概要 日頃からクックパッドを利用してくれているユーザーに感謝を込めて、投稿した自分のレシピでレシピ本を作れるというキャンペーンを実施しました。 伝える手段としてキャンペーンLPを作成し、対象者にはメールで告知しました。 作成したLPはこちら デザインコンセプトを決める際に考えること 大きく分けて、ユーザーの体験とクックパッドが伝えたいことの2つを考えてデザインに落とし込んでいきます。 A. ユーザーの体験を整理する まず、LPを見たユーザーにどうしてほしいかを考え整理していきます。 ユーザーにレシピ本を作ることが目的だと思ってもらうことを考え
Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！｜榊原昌彦
Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！ 流れてきたツイートをみて「なんだこのデモは」といろいろ見てみたところ、Microsoft AI labがすごい技術を公開していたので簡単にまとめます。どういう技術かというと「手書きのワイヤーフレームを適切に修正してHTMLに自動変換」してくれます。 Kabel, Spike Techniques, Microsoftが2018年8月末に公開したSketch 2 Codeというライブラリです。GitHub（ https://github.com/Microsoft/ailab/tree/master/Sketch2Code ）で公開されているので、確認することができます。行っている処理は以下の通り。 1. ユーザはWebに画像（手書きワイヤーフレ
ロゴの自動生成サービス「Free Logo Generator Online」が今までにないレベルで高機能だった話と、これはデザイナの仕事を奪うのかどうか。｜榊原昌彦
ロゴの自動生成サービス「Free Logo Generator Online」が今までにないレベルで高機能だった話と、これはデザイナの仕事を奪うのかどうか。 このツイートをしたところ、大きな反響をいただきまして、かるく解説記事を書いておきます。 どういうサービスなの？オンラインでネットショッピングをつくることができる有名サービス「Shopify」のはじめたロゴ自動生成サービスです。13のビジネス分野、18のデザイン属性から自分にあったものを選択し、ロゴに入れる文字をタイプするだけでロゴを自動生成することができます。また、生成したロゴのフォント、色、アイコン、レイアウトの調整も可能ですので、自動生成といいながらほぼあなただけのロゴを自動生成することができます。 使い方ログイン不要です。https://hatchful.shopify.com/ にアクセスして、右上の「GET STARTED」
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 | スペースマーケットブログ
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは！ 猫飼いなのですが猫に顔をうずめるのが難しい季節になってまいりました（毛まみれ） 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシステム化の紹介と失敗体験、そしてその道のりを、赤裸々にご紹介しちゃいたいと思います。 既に完成したデザインのコンポーネント化に悩んでいる方々の参考に、少しでもなれば幸いです。 初期のスペースマーケットデザイン ゴリゴリのPhotoshopデザインだった時代 弊社のメインサービスである、スペースマーケットのデザインは約3年前にリニューアルリリースされました。 当時は全てPhotoshopでデザインされ、１ページにつき１ファイル、スマートフォンもPCも別フ
不真面目に Material Design の配色する／Material Color Generator 作りました - feb19
不真面目に Material Design の配色する／Material Color Generator 作りましたdate2015.10.3(Sat.)tagsMaterialDesign Material Design は、色を決めてアイコンを作れば、一画面を構成する新規パーツをイラストレーターとかで新規作成しなくても、ほぼほぼ作れるようになっています。 その色の決め方について、不真面目な手順の一例を考えました。 ①まず白ベースのアプリか黒ベースのアプリか決める標準背景が白系（Light）か、黒系（Dark）かを決めます。 ほぼほぼ Light 系にするといいと思いますが、以下のアプリは Dark 系でも映える気がします。 ・映画のアプリ ・音声、音楽のアプリ ・クリエイティブツール ・その他クール推しなアプリ ・設定系ツール ②プライマリカラーを決めるブランドカラーが存在する場合はブ
Sketch はもういらない？ デザインツール Figma の紹介
Figma：https://www.figma.com/ （2019 年 12 月 1 日 ： 古くなって意味消失してた部分を編集しました） Figma とは デザインツール、Figma をご存知でしょうか。 一言で表すならば、コラボレーション機能満載の Sketch です。 本記事を公開した 2017 年時点では、あまり知名度が高くなかったものの、2019 年時点ではだいぶユーザーが増えたように感じます。Google Trends で、Sketch と XD、そして Figma の今と昔を比較してみます。 2017 年 2019 年 （純粋には比較できませんが）2 年前は Sketch と Figma に約 25 倍も開きがありました。ですが現時点では約 10 倍くらいでしょうか。日本ではなんと逆転しています。（タイトルの通り！） そこでもう少し Figma に頑張ってもらうべく、本記事
UI案、イラレやパワポで作るくらいなら、『Figma』 - Qiita
Figmaとは UIのプロトタイピングで名を馳せているSketchというアプリケーションがあるのは、アプリケーションやWEB開発に携わっていれば、知っている人も少なくないと思います。 しかし、SketchはMacOS専用で、Windowsユーザーでは、このソフトを使うのは障壁が高いと思います。 （というか、私が使ってみたいもののWindowsユーザーなので、とっつきにくかったです） Figmaは、ブラウザ上でも編集可能でありながら、Sketchと同じような感覚でUI案を作れます。 必要なのはGoogle chrome ブラウザだけ！ (Windowsのアプリケーションもあります） 本格的にデザイナーへ投げる前に、要件の洗い出しのためのイメージ共有の際に、使えるツールになるのかな、と思います。 （この記事は、初めて知る人が10分後には使用開始できるお手軽感を目指しています。 やれること全て網
diary/2018/07/01/ハッカーズチャンプルー2018でesaのデザインの話をしてきました #hcmpl
ハイサイ デザイナーの@ken_c_loです。台風接近中の沖縄・那覇からお送りしています。 ハッカーズチャンプルー2018という沖縄で開催されたイベントで、『esaのデザインの話 - 自分たちのWebサービスを作るデザイナーとしてやっていること 』というタイトルで発表をさせていただきました。 > 発表の補足など発表の補足など 懇親会やネットなどで質問やリアクションをいただいたり、色々お話できたりしたので、それも踏まえて何点か補足したいと思います。 デザインは理論か？感覚か？ 今回は、デザインするときの思考プロセスをわかるように説明しようと整理したので、一見ロジカルに段階を踏んで考えているように見えるのですが、実際にはここまできれいに段階を踏んで考えているわけでもなくて、割と感覚的に瞬間的に思いついたことを、後から理屈が通っているかどうか、ひとつひとつ検証した結果がこんな感じである、という方
色に頼らないビジュアル表現を考える | mkasumi.com
実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ
【パワポ時代の情報整理術】つめこみすぎなスライドがこれでスッキリ！｜Designer
昨今、情報量がとにかく多く、理解しづらいパワーポイント資料が溢れています。「ポンチ絵」や「曼荼羅」などとも呼ばれるこの手の資料。パワーポイントを作る方も、読み解く方も大変です。 でも、わかります。一枚の資料に収めないといけない事情があることを―。会議の配布資料、提案資料、体制図、システムの構成図…。シンプルな資料が良いとわかっていながら、どうしても情報量を落とせない場合もあります。 そこで今回は、掲載する情報量はそのままに、デザインの力で資料をわかりやすくするテクニックをご紹介します。 【Before】元のスライドはこちらお題にするのはこちらのスライド。体制やネットワークを表す図です。一枚のスライドあたりの情報量が多く、色々な要素が詰まっています。 出典：厚生労働省「医療・介護制度改革について」P.1 www.mhlw.go.jp/stf/shingi/2r9852000001gj87-a
最近のUXデザインにおける、スマホアプリのインターフェイスに使用されているアイデアのまとめ
ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン
強度の高いUIをデザインする｜池内健一
デザイナーの池内（@KD6JOE）です。アプリのUIデザインなどをやっています。この記事ではUIをデザインを始めたばかりの人向けに、強度の高いUIをデザインをするための手順をご紹介します。 最低限の品質のUIをデザインできるようになることがこの記事の趣旨です。ここで紹介する手順はあくまで一例で、ガチガチにこの通りに進める必要はないし、ケースバイケースです。自分のやり方に取り入れられるところだけ取り入れてください。 強度の高いUIデザインとは強度の高いUIデザインとは以下のものを指しています。 ・あらゆるUIパターンの検討がなされている ・どのUIパターンを採用するかロジカルに決定している ・仕様漏れがなく開発がスムーズに進む逆に強度の低いUIデザインとは、パターン検討がほとんどされず、ツッコミどころがありまくり、仕様が二転三転するものです。結果開発スケジュールの遅延を引き起こします。 ただ
(デザイン初心者向け)メルカリのデザインチュートリアルを作ってみた(ホーム画面UI編)｜ココディー｜note
(*この記事はデザイン未経験者や、非実務経験者の方に向けた実践記事です。) ✏️目次(再掲) 0. 前置き 1. メルカリとは 2. UIトレースをしてみる 3. デザイン観点の追加と、トレースの調整 4. 実際にメルカリのデザイナーに聞いてみた 5. まとめ・終わりに 0.前置きこんばんは、ココディーです。 前回、こんな記事を書いて、デザイナーや、デザイナーに未経験からなったという人達から、たくさんの反響をもらいました。ありがとうございました！ この記事の中で、問題視していたのは「デザイナーの総数を増やしていく必要性」でした。 その上で「ノンデザイナーからデザイナーになっていくプロセスが確立していない」ということを課題として、その解決の一つの方向性として「デザイナーに弟子入りするということ」を挙げていました。 とはいえ、「未経験からデザイナーのもとに弟子入りをする」という事も、デザイナー
UI/UXデザイナーを目指す若手に知っておいて欲しいこと｜坪田 朋
最近増えているスタートアップで働きたいデザイナー向けの記事です。自分の経験から勧めたい・知っておいて欲しい事をまとめました。 作業環境はケチらないで投資する学生でも本気で勉強すれば1年以内にその投資を回収できるので、PCはケチらずにハイスペックなMacBook Proを買った方が良い。 稀に安いからと言う理由で、MacBook Airや旧スペックのPCで作業している人を見かけるけど、若い時ほど本質的な勉強に時間を裂いて欲しいし重い環境で作業し続けるのは効率が悪くインターンの @reo も古いPCで効率悪かったので、新品のMacBook Proを付与して、まともなソフトウェアセッティングとショートカットを教え込んだ。 ちなみに、僕がデザイナーにiMacではなく、Macbook Pro＋外部ディスプレイを勧める理由は、キーボードとトラックパッドが近いと手を動かす量が減って作業効率が良いのと、仕
デザインを言葉で説明するの難しい問題 - 分解、検証、翻訳｜しばた / Fenrir Inc.
フェンリルのプランナーの柴田です。 デザイナーではない人にとって、デザインの良し悪しを判断するのは難しいものですよね。「なんとなく良い」「ピンとこない」まではわかるのですが、「なぜ良いのか」「なぜピンとこないのか」を言葉にするのは、それなりの経験と知識が必要となります。 しかし、そこをきちんと言葉にできないとデザイナーへのフィードバックは難しく、適当な指示で無駄な作業をお願いすることになります。何よりプランナーは自分でプレゼンすることが多く、デザインの魅力をクライアントに十全に伝えることができなくなります。この「デザインを言葉で説明するの難しい問題 」は、最もありふれていながら対処が難しい問題です。 今回はデザインの勉強もしていない僕が、どうにかデザイナーさんやクライアント様に対してデザインを言葉で議論する時の方法論を整理してみたいと思います。 デザイナーもデザインを説明するの難しい実はデ
XMLで始めるConstraintLayout - Qiita
はじめに みなさんConstraintLayoutは使っているでしょうか？ ConstraintLayoutはGoogleI/O 2016で新しく登場したLayoutです。その名の通り制約によってレイアウトを決めること複雑なレイアウトを、ネストを深くせずに作ることが出来るようになりました。 RelativeLayoutと似ていますが、iOSのAutoLayoutのようにAndroid Studio上のLayoutEditorでドラックアンドドロップによって簡単にレイアウトが作れます。 また、Android Developers Blogでは、RelativeLayoutに比べてパフォーマンスが約 40% 優れているといっています。 Our performance comparison shows that ConstraintLayout performs about 40% better
ConstraintLayoutのレイアウト組み方実用例 - ZOZO TECH BLOG
こんにちは。フロントエンドエンジニアの遠藤です。 皆さん、ConstraintLayoutを使用していますか？ 弊社では最近、ほとんどのレイアウトをConstraintLayoutを使用して実装しています。 今回はConstraintLayoutを使用してレイアウトを組んだ際に便利だなと思ったポイントや難しくてはまったことについて紹介したいと思います。 今回はConstraintLayoutを使用したレイアウトの組み方について注目するので、基本的な使い方については説明しません。 ConstraintLayoutの基本的な使い方は下記の記事が分かりやすくておすすめです。 Google Developer Yukiの枝折: ConstraintLayout 実用例 今回はConstraintLayout1.1.0-beta5を使用しています。 サンプルコードはGitHubにあげてあります。 g
Google IO 2018のMaterial Designアップデートまとめ｜池内健一
Google I/O2018でMaterial Designが大きくアップデートされました。Material Designのサイトの更新量が大きすぎて全量を把握するのも大変ですが、要点だけまとめました。 目次 ・Material Themingで多様なスタイルが可能に ・コンポーネントの更新 - App Bars：Bottom - Backdrop - Extended FAB - Sheets : Side - Text Fields - ButtonsMaterial Themingで多様なスタイルが可能に今回のアップデートで一番インパクトがあったのがMaterial Themingでした。これまでMaterial Designではどのアプリも画一的なスタイルに制限されていましたが、Material Themingによって多様なスタイルが可能になりました。これにより、ブランドイメージに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン原則の実践｜dely design
Android Transition
