JB

埼玉県/ 24歳/ 不動産営業から独学でUI / UXデザイナーを目指して頑張ります…

JB

埼玉県/ 24歳/ 不動産営業から独学でUI / UXデザイナーを目指して頑張ります。/ 2020年4月最終週〜主に学んだことのアウトプットをしてます。/ Twitter ＠WordYuya

Daily Cocoda! No,3 『メッセージ画面』

どうもJBです。 今回のデザインは『メッセージ画面』についてです。 コンセプトとユーザー設定ユーザー：20代半ばのビジネスマン コンセプト：ビジネスシーンでも使えるチャットアプリ 雰囲気：きっちり、使いやすい ビジネスシーンでのチャット利用シーン ・報連相 ・情報の共有 ・プロジェクト共有 ・定時連絡 ・スケジュール共有 UI/UXデザインコンセプト言語化 20代半ばの仕事を始めたて、または、仕事に少し慣れてきたであろうビジネスマンは覚えることが多い。そんなビジネ

JB

    • Daily Cocoda! No,2 『新規登録画面』

      どうもJBです。 今回のデザインは『新規登録画面』についてです。 ターゲティングとコンセプトユーザー：お洒落好きな男子大学生 コンセプト：好みの音楽がレコメンドされる音楽アプリ 雰囲気：カジュアル・お洒落 1.トップページの作成画像の作成 音の空間に入り込むイメージ イメージ：楽しい、賑やか 見出しを決める 『好きを聴こう　Listen to like.』 コンセプト分解 好みの音楽がレコメンド→好きな音楽を楽しむ→好きな音楽が聴ける。 Likeには楽しむという

      JB

      • Daily Cocoda! No,1 『SNS』

        今回は、SNSの作成です。 ターゲティング・ターゲット 20代前半女性 ・コンセプト 日常の写真をお洒落にアップできるSNS ・雰囲気 シンプル、お洒落 ・参考アプリ Twitter,instagram デザイン・サイト名 DropShare Font : Pristine Script Dropboxから着想を得ました。写真を落とすことで、そこにふるまいが生まれる。落とすことでシェアされる。日常の何げない写真を簡単にシェアできるサービス。 ・フォルム 写真と

        JB

        • Study Report ２６ / 『　共感　〜シンパシーとエンパシー の違い〜』

          1day1study どうもJBです。 今回は、「　共感　〜シンパシーとエンパシーの違い〜」についてです。 シンパシーとエンパシー、どちらも共感という意味があります。 では、何が違うのでしょうか？今回はそれを見ていきましょう。 定義シンパシー(sympathy) シンパシーとは、他者の感情に対し共感する感情の同一性を指す。Wikipedia引用 エンパシー(empathy) エンパシーは、他者と喜怒哀楽の感情を共有することを指す。もしくはその感情のこと。Wikip

          JB

        Daily Cocoda! No,3 『メッセージ画面』

        JB

        • Daily Cocoda! No,2 『新規登録画面』

          JB

        • Daily Cocoda! No,1 『SNS』

          JB

        • Study Report ２６ / 『　共感　〜シンパシーとエンパシー の違い〜』

          JB

          Study Report ２５ / 『アフォーダンス 』

          1day1study どうもJBです。 今回は、「アフォーダンス 」についてです。 アフォーダンス（affordance）まずはアフォーダンスの意味です。 アフォーダンスとは、環境が動物に対して与える「意味」のことである。Wikipedia引用 もうちょっと短かない身に置き換えると、 環境やものなどの外的要因が、人間に対して与える「意味的な」影響と置き換えられると思います。 アフォーダンスとはジェームズ・J・ギブソンが作成した造語であり、この造語を用いて提唱した理

          JB

          Study Report ２５ / 『アフォーダンス 』

          JB

          Study Report ２４ / 『Good Design賞にデザインを学ぶ 』

          1day1study どうもJBです。 今回は、「Good Design賞にデザインを学ぶ」についてです。 Good Design賞とは？グッドデザイン賞は、製品、建築、ソフトウェア、システム、サービスなど、私たちを取りまくさまざまなものごとに贈られます。かたちのある無しにかかわらず、人が何らかの理想や目的を果たすために築いたものごとをデザインととらえ、その質を評価・顕彰しています。さらに、複雑化する社会において、課題の解決や新たなテーマの発見にデザインが必要とされ、デ

          JB

          Study Report ２４ / 『Good Design賞にデザインを学ぶ 』

          JB

          Study Report ２３ / 『Appleのガイドラインから学ぶOS別のデザインテーマの違い』

          1day1study どうもJBです。 今回は、「Appleから学ぶOS別のデザインテーマの違い」についてです。 前回までは、IOSのインターフェイスデザインに関して記事を何個か書かせていただきましたが、今回は、OSの違いによって、デザインのテーマがどう違うのかを見ていきたいと思います。 これを理解することで、アプリ制作が少しやりやすくなると思います。 OSの種類大きく分けてAppleのOSは４種類あります。 最新機種のディスプレイサイズも表記しておきますが、理解し

          JB

          Study Report ２３ / 『Appleのガイドラインから学ぶOS別のデザインテーマの違い』

          JB

          Study Report ２２ / 『ナビゲーション』

          1day1study どうもJBです。 今回は、「ナビゲーション」についてです。 今回も引き続き「デザインのヒント」の続きになります。 今回は⑩構成のところをもう少し詳しくみていきましょう。 ナビゲーションスタイル階層的ナビゲーション 用途：設定やメールなどで使われるナビゲーション 特徴：ロジックツリーのような構造。選択肢の中から1つを選択して次に進む。戻る為には、1つ1つさかのぼるか、最初からやり直す必要がある。 フラットナビゲーション 用途：Apple Musi

          JB

          Study Report ２２ / 『ナビゲーション』

          JB

          Study Report ２１ / 『色』

          1day1study どうもJBです。 今回は、「色」についてです。 今回も引き続き「デザインのヒント」の続きになります。 今回は⑤コントラストのところをもう少し詳しくみていきましょう。 色色の持つ効果は大きく人と心理まで影響を及ぼします。 色を適切に使用することで、活力を与え、視覚的な連続性を提供し、ステータス情報を与え、ユーザーアクションに応じてフィードバックを提供し、人々がデータを視覚化するのに役立つことができます。 では、色の選択する際に考慮する内容を

          JB

          Study Report ２１ / 『色』

          JB

          Study Report ２０ / 『フォントの選択』

          1day1study どうもJBです。 今回は、「フォントの選択」についてです。 今回も引き続き「デザインのヒント」の続きになります。 今回は④文字の大きさのところをもう少し詳しくみていきましょう。 アプリを拡張する為のフォントの選択①可能な限り組み込みテキストを使用する。 ：組み込みテキストを使用することで、最適な読みやすさを維持しながら視覚的に区別できる方法でコンテンツを表現してくれるように自動で調整することができます。 ②重要な情報を強調します。 ：デザイン論

          JB

          Study Report ２０ / 『フォントの選択』

          JB

          Study Report １９ / 『ボタン』

          1day1study どうもJBです。 今回は、「ボタン」についてです。 今回も引き続き「デザインのヒント」の続きになります。 今回は②タッチコントロールのところをもう少し詳しくみていきましょう。 ボタン種類アプリを使用するとよく出てきますが、そんなボタンまでもしっかり定義されていました。どのバタンがどういった役割をしているのか、しっかり把握しておく為に学びましょう。 ①システムボタン 用途：動詞を用いて次の行動が予測可能なボタン 場所：どこでも（主にナビゲーション

          JB

          Study Report １９ / 『ボタン』

          JB

          Study Report １８ / 『レイアウトの考慮事項』

          1day1study どうもJBです。 今回は、「レイアウトの考慮事項」についてです。 前回の「デザインのヒント」の続きになります。 「デザインのヒント」をもっと細分化して理解したいと思ったので、今回は前回の①コンテンツの表示形態のところをもう少し詳しくみていきましょう。 レイアウトに関する一般的な考慮事項①プライマリコンテンツがデフォルトのサイズでクリアであることを確認する。※プライマリとは、主要なという意味 ：基本的には、サイズなどを変更しない限り、ズームや水平ス

          JB

          Study Report １８ / 『レイアウトの考慮事項』

          JB

          Study Report １７ / 『デザインのヒント』

          1day1study どうもJBです。 今回は、「デザインのヒント」についてです。 なんでもそうですが、基本を疎かにするということは、全てを疎かにすることと同義だと考えてます。 なので今回は、UIデザインの基本となるコンセプトをしっかり覚えるために、この内容をアウトプットします。 デザインヒント①コンテンツの表示形態 ：どのデバイスにもあったレイアウト。主要画像をみやすく ②タッチコントロール ：文字の入力ではなくタップやスワイプで選択できるようにする ③タップ

          JB

          Study Report １７ / 『デザインのヒント』

          JB

          Study Report １６ / 『Sαlience Bias：顕著なデザイン』

          1day1study どうもJBです。 今回は、「Sαlience Bias：顕著なデザイン」についてです。 どれだけデザイナーがいいデザインを考えても、それがみられなければ、誰からの評価も得られません。 ですが、逆に、単純なデザインでも人の目に止まることあるということです。 要は、人の目に止まらない限りそれはデザインとしての価値が生まれにくいということです。（人の無意識に語りかけるデザインもあります。） それを可能にする為に行動科学の１つのsalience bi

          JB

          Study Report １６ / 『Sαlience Bias：顕著なデザイン』

          JB

          Study Report １５ / 『5つの重要なデザインのポイント』

          1day1study どうもJBです。 今回は、「5つの重要なデザインのポイント」についてです。 5つのポイント①わびさび　それは完全に不完全です。 使用のタイミング：プロトタイプ・モックアップの提示、アイデアの提示ユーザビリティティスト、反復 ②ブリコラージュ　創造性には燃料が必要です。 使用のタイミング：アイデアとブレインストーミング ③ビジネスキャンバス　夢が根付くところ。 使用タイミング：反復プロセス ④多様性　ブリコラージュの表現 使用タイミング：チーム

          JB

          Study Report １５ / 『5つの重要なデザインのポイント』

          JB

          Study Report １４ / 『マテリアルデザイン』

          1day1study どうもJBです。 今回は、「マテリアルデザイン」についてです。 マテリアルデザインとは？マテリアルデザインは、ユーザーが接する画面にマテリアル（物質）、メタファーの概念を用いて一貫性のある世界をつくりつつ、ユーザーの操作を補助するものである。ウィキペディア引用 ちょっとわかりづらいと思うので、自分なりに要約すると、 ※メタファーとは、新しいものを身近なものに似せることで親しみを持たせるという内容だと思います。 例）　PCのデスクトップとは、机

          JB

          Study Report １４ / 『マテリアルデザイン』

          JB