UXの5段階モデル分解編 vol.2 サービス/プロダクトの開発指針を定める要件段階での具体的なデザイン手法【2019年版】｜Goodpatch Blog グッドパッチブログ
UXの5段階（5階層）モデルは、サービスやプロダクトがもたらすUXを5つの段階的要素で表したものです。ここで、一貫性を持ったサービス/プロダクトの開発を行うためには、このUXの5段階モデルの概念を意識しながら開発を行うことが重要です。 5段階モデルの概念や、各段階での一連のデザイン手法については理解できているが、要件段階の目的やデザイン手法をより詳しく知りたい！という方もいらっしゃると思います。 今回は戦略段階に引き続き、UXの5段階モデルの要件段階における目的と必要なインプットとアウトプットの説明、そのための具体的なデザイン手法の紹介を行いたいと思います。 UXの5段階モデルの概要をまずは理解したい！という方は以下の記事をご覧ください。
メルカリロゴリニューアルの裏側、見せます。｜Mercari Design｜note
こんにちは。 メルカリデザインブログです。 メルカリは2018年10月31日にロゴのリニューアルを行いました。 ロゴのリニューアルを起点としたリブランディングは、社内に新設されたCXO Design Team主導による、社内外を巻き込んだ大きなプロジェクトです。 企業の大々的なリブランディングは頻繁に行われるものではありません。 だからこそ、その舞台裏や背景、補助線となるような情報を広く共有し、デザイン組織のノウハウを伝えていきたいと考えています。 デザインブログでは、複数回に分けて取り上げます。 目次 ・なぜ、ロゴを変えたのか ・メルカリのこれからを表現する ・汎用性の高いロゴを目指す ・リブランディングを行うチーム ・実際の制作プロセス ・イベント告知 なぜ、ロゴを変えたのかリブランディングにおいてロゴのリニューアルは大きな比重を占めるトピック。コミュニケーション設計の支柱になります。
「何回もiPhoneを上下にひっくり返したくなる」一見すると普通のポスター、よく見ると隠されたメッセージが出てくる
カツセ @katsuse_w こういうすげぇ企画見ると「どうやって浮かんだの？」ってばかり考えちゃうけど、“会議中に一枚の資料をテーブルに置いてみんなで見てたら、正面からじゃなきゃ読みづらかった” くらいの些細なきっかけから始まってるような気がして、アイデアってまじで隠れミッキーみたいに埋もれてると勝手に思った twitter.com/murakamiyutaro… 2018-01-15 07:06:06
「お金を払った感」はどのようにデザインすればよいのか｜Goodpatch Blog グッドパッチブログ
私たちは普段、お店でものを買う際には必ず「お金を払う」ということを行っています。現金やクレジットカード、交通系電子マネーに加え、最近ではApple Payなどのスマートフォンによる電子決済サービスも登場しています。そのような新しい決済サービスを使ったことがあるという方も増えてきているのではないでしょうか。 このブログでも度々注目されているお金とデザインのこと。先日起こった私の実体験を通して、このような「お金を払う」という体験のデザインについて考えてみたいと思います。 とあるコーヒーショップでの体験談：フィードバックの勘違い これは、とあるコーヒーショップでバーコード決済アプリを利用した際に体験した実話です。 さて、3コマ目で私はなぜ「会計が終わったな」と勘違いしてしまったのでしょう？ 振り返ってみると、会計時に私はこんなことを考えていました。 1コマ目：「電子決済アプリで支払いたい」 2コ
デザインは奥が深い！目の錯覚を効果的に使ったUI、ロゴ、イラスト、文字組みのデザインテクニック
文字をぴったり揃えたのにしっくりこない、正方形なのに長方形に見えてしまう、シャドウを与えていないのにぼんやりとシャドウが見える、ボーダーを加えただけなのに塗りも変わったように見える、そんな経験はありませんか？ WebサイトのUI、アイコン、ロゴ、イラストなどでデザインしている時に誰しも経験したことがあると思います。これらの原因は目の錯覚によるもので、その仕組みを理解することで困惑されることなく、効果的に利用することもできます。 11 Optical Illusions Found in Visual Design by Balraj Chana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 三角形の交点による錯覚 垂直の水平方向による錯覚 明度による錯覚 奥行きによる錯覚 格子による錯覚 コントラストによる錯覚 カラーによる錯
ずっと使える、デザインの基本まとめました。【2020年改訂版】
「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとにまとめました。デザイン入門編として覚えておきたい基本から、サンプル例を見ながら理解できる、より実践的なデザインテクニックまで幅広く網羅しています。
衝撃！スマホアプリのUIは3年でどのように変化しているのか調べてみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ いつも元気ハツラツ・天真爛漫・平成生まれゆとり世代、のんちゃんです。 わたしは中学2年生の頃から携帯電話なるものを使用し、友達とコミュニケーションをとっていました。ちなみにPCは小学4年生くらいから夢中に触っていて、親に電源抜かれたこともありましたねぇ。 ガラケーからスマホにしたのは5年前の大学1年生の時だったと思います。最初はAndroidでしたが、その後はずっとiPhoneです。 昔のiPhoneであろうとも、いまの充電器があればカメラロールとかメールとかを見返せるのがおもしろくて、実家に帰ってとてつもなく暇な時は、ひとりでそういった遊びをしています。 ちなみにすごくどうでもいいのですが、わたしはiPhoneを変更しても、あえて写真とかは引き継いで移行させません。 思い出は、そっと大事に眠らせておきたいのです。 さて、前置きが長くなりましたが、過去のiPhoneを漁ってい
モバイルアプリのUXを改善する４つのディテール
アプリが成功するかどうかは、さまざまな要素に依存しています。ですが、ユーザー体験に勝るものはありません。目立つアプリは、どれも優れたUXを提供しています。 モバイルUXを考える上では、ベスト・プラクティスをなぞるのが堅実な方法です。また、全体像をつくる時は、あったら良いものの必要ではないデザイン要素をとりあえず消してしまうのも簡単で良い方法でしょう。 ただし、「良い体験」と「素晴らしい体験」の違いは、多くの場合これらの細部についてどれだけ考え尽くしたかにかかってきます。 この記事では、なぜディテールがデザインにおける目につきやすい要素と同様に重要なのか、そしてアプリの成功をどのように決定づけるかについて紹介します。 スプラッシュスクリーン ユーザーがアプリを起動したとき、一番最後に回したいことはユーザーに待つよう伝えることです。ですが、アプリに時間のかかる初期設定のフェーズがあり、この手順
「くまモン」デザイナーに発注のロゴ540万円は高すぎ？ 「30万円が適切」奈良の住民訴訟に批判も
奈良県で2017年に開催される「国民文化祭」のロゴマークをめぐって、540万円の制作費が不当に高すぎるとして県内の市民団体「見張り番・生駒」メンバーらが9月16日、奈良県に対して住民訴訟を奈良地裁で起こした。「30万円程度が適切」だとして、差額の510万円を損害額と主張。奈良県に対し、同祭実行委会長の荒井正吾知事に請求することなどを訴えている。 ロゴマークは、「くまモン」などを手がけた著名デザイナー、水野学さんが制作した。実行委が2016年3月に水野さんが代表の会社「good design company」と随意契約を結び、すでに事前イベントなどで使用されている。鹿の周囲を花鳥風月が囲む円形のロゴで、奈良県の色である蘇芳（すおう）色とモノクロの２種類が制作された。
ちょっと意識するだけで劇的によくなるデザインの7箇条 - Brian'z Imagination
ちょっと前までは企業ではお抱えのデザイナーがいたし、デザインの専用ツールも比較的コストが高く、デザインはデザイナーに任せるべき、という風潮が強かったと思う。時が経過した今では、デザインする時間がなければクラウドソーシングに投げればいいし、PhotoshopやIllustratorなどのツールも月額購入で誰でもすぐに利用できるし、Webには日々参考になるリソースが流れてくるので、ノンデザイナーでも簡単にデザインすることができるようになった。 しかしながら、参考記事を見ながら見よう見まねでデザインをしたものの、自分の作ったデザインはプロのデザイナーと「何か」が違う、そう思ったことはないだろうか。センスと経験だけでは、なかなか見えないデザインのポイントが存在する。 そこで今回は、そんなプロのデザイナーなら無意識にチェックしている7つの項目を並べて紹介していこう。デザインというと高尚に聞こえる節が
Goodpatchのプロダクトマネージャーに聞く！プロトタイピングツール「Prott」を使ったプロトタイピングの重要性とは
Goodpatchのプロダクトマネージャーに聞く！プロトタイピングツール「Prott」を使ったプロトタイピングの重要性とは 話題のプロトタイピングツール「Prott」を開発した株式会社グッドパッチ(Goodpatch, Inc.)の岡田麻里さんへのインタビュー。Prottの新機能に関するお話から、プロトタイピングの重要性について詳しくお伺いしています。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 今日では、ソフトウェアやサービス、アプリ
パララックスをデザインに上手く取り入れているサイトまとめ
Webサイトのデザインで近年主流なのは「パララックス」を用いたデザインです。縦長のサイトでスクロールするに従って様々な要素が移動するようなサイトを見たことはありませんか？ パララックスは立体的で動きのある表現としてポピュラーなデザイン手法です。 今回は、そんなパララックスの説明と、うまく取り入れているサイト例をいくつかご紹介します。 パララックスとは？ パララックスとは、視差効果のことです。 複数のレイヤー（層）を作り、それぞれをスクロールに応じて違う速度で動かすことで、奥行き・立体感・遠近感を演出することができます。ひとつひとつの要素自体は二次元でも、簡単に立体的でリッチな演出が可能なため、特にビジュアル重視のWebサイトではポピュラーな手法となっています。 ※サイトによってはモバイルではパララックスではない場合がありますので、PCでご確認下さい iPhone 6S iPhone 6Sの
フリーエンジニアのIT案件ならレバテックフリーランス
「デザイン思考」は世界中でその有効性が認められている理論であり、デザイナーも非デザイナーも学んでおきたいことのひとつです。 しかし、デザイン思考について一言で表すことは難しく、その上専門性も高いため、理解に苦労している方は多いのではないでしょうか。 だからといって目をつぶったままでは、デザイン思考を理解することはできません。 そこで今回は、非デザイナーがデザイン思考を学ぶ際に役に立つ記事・書籍をまとめて紹介します。 デザイナーが読んでも役立つ内容となっていますので、デザイン思考を学び直したい方もぜひご覧いただければと思います。 自分に合う案件を提案してもらう デザイン思考を学ぶ際に役立つ記事 世界最高の授業。IDEOに学ぶ「デザイン思考」の真髄──2014.3.7 Night School / ライフハッカー［日本版］ http://www.lifehacker.jp/2014/04/14
2016年のロゴデザインのトレンド -2016 Logo Trend Report
「Ombré（オンブレ）」とはここ数年、海外セレブたちが火付け役となって人気になったオンブレヘアーの美しいグラデーションで、特定の2色間をグラデーションでつなぐデザインです。ロゴデザインではこのグラデーションをベクターベースの面白い形状で色分けして利用しています。 Circles 完璧と無限を表現する美しいサークルは、非常に人気が高いデザイン要素です。最近のトレンドは、サークルの上にサークルを重ねたり、繰り返して使用しています。こういった幾何学的な形はシンプルであればあるほど良く、要素に区別をつける時にはフラットにしたり透明にしたり、グラデーションにしても効果的です。 Half and Half
デザイナーでない人にも是非読んでほしい-「人を動かす」広告デザインの心理術33- | 使える「デザインセミナー」
今日は、広告制作者が普段使うビジュアル心理学を、無意識からの説得、そして購買へのロジックについて、豊富な図版と詳細なテキストで解説した「人を動かす」広告デザインの心理術33 ―人の無意識に影響を与える、イメージに秘められた説得力 を紹介します。
デザインのどこを直したらいいの？「デザインまちがい探し」であなたのデザイン力を確認！ | コリス
デザインはセンスも大切ですが、「知識」や「経験」も大切。 レイアウトや構図、色の組み合わせ、文字組み、ハイライトやシャドウ、1pxのラインなど、知らない人には気がつけないポイントがたくさんあります。 左と右のレイアウトで、異なる箇所をいくつ見つけることができますか？ 「デザインまちがい探し」は先日紹介した「なるほどデザイン」から出版社の許諾の元、書面を掲載させていただきました。 大きな画像も用意したので、チャレンジしてみてください！ デザインまちがい探し 左と右のレイアウトで、デザインに手を加えた箇所があります。全部でいくつ見つけることができますか？ 左（ビフォー）・右（アフター）の各画像はクリックすると拡大され、並べて表示できます。
レスポンシブデザインにすぐ使える！すごいアイデア30個 | コリス
サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
データ視覚化のデザイン図解まとめ
404页面
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
