Thubmneil

::: style is-title
やってみたこと
:::
オブジェクト指向UIデザインからお題を拝借し、自分なりに解析、デザインをしてみました。
応用編:レベル10 営業支援アプリ

::: style is-title
修正前のフロー
:::
「やること」を起点とした動線となってしまっているため、同じような画面が多くなってしまっています。また、何度も検索をかけないと目的のデータに辿りつけない構造になってしまっています。
![ooui2](//images.ctfassets.net/dd0roywjqx3t/1FVexjsWY8KBtajTHpQOAf/509a2a46b900d414637d752aaed60098/ooiu2.webp)

::: style is-subtitle
課題整理
:::
検索→検索のフローが発生してしまっているため、これを解消し、閲覧したい情報に素早く辿り着けるデザインを目指します。
今回は就職・採用のイベントや周年パーティなどB to Bのイベントを中心に取り扱うイベント管理会社で20代・30代がの社員が中心の若い会社を想定しました。
![Doc-1](//images.ctfassets.net/dd0roywjqx3t/45xEUBILDtek8wdr1FJtLZ/3b210a8d1e7e78333ed32418a720976f/Doc-1.png)

::: style is-title
情報整理
:::
イベント管理、資材管理、日程管理、主催者管理、会場管理のビューを用意。今回は課題となっているいイベントの検索、資材、日程管理の周辺を中心に設計します。
![Doc-2](//images.ctfassets.net/dd0roywjqx3t/5uWyA2TtNLg6eekoYcQ4A1/d86d54df22b3065b8129bea0df36dd43/Doc-2.png)

::: style is-title
WF / フロー図
:::
サイドバーにナビゲーションを配置し各情報にアクセスしやすい設計にしました！
各情報は関連している項目も多いため、リンクを設置し関連付けしました。
また、複数イベントの日程を直感的に把握できるように日程はカレンダービューで表示させました。
![Doc-3](//images.ctfassets.net/dd0roywjqx3t/14oABqCuMS2qAldqNotlrm/c3718a2ef04757869778ef5c1f92fac1/Doc-3.png)

::: style is-title
デザイン
:::
ステータスは状況によって表示色を変え、直感的に認識できるようにデザインしました。イベントの新規登録はこの作業に集中できるようポップアップで行うようにしましました。
詳細ページではタブ切り替えで関連している資材を確認したり、イベント後の報告をできるようにしました。
![Doc-4](//images.ctfassets.net/dd0roywjqx3t/518txzKqAaKJNHccmiN9Bo/8f8db598da8652cdd2f6b2d637e4734a/Doc-4.png)

::: style is-title
イベントの絞りこみ・検索 / 新規作成
:::
レコードには全ての情報を表示するのではなく一覧に必要だと思われる情報を選定し表示させています。
上部に設置されたドロップダウンでステータスに応じた絞り込みをできるようにし、開催日や注文日など期日に関連した項目は並び替えも可能にしました。また関連するキーワードで検索できるフォームも設置しました。
![Doc-5](//images.ctfassets.net/dd0roywjqx3t/6uip1XlHklQxGIcU8dr2RM/9c4655016d2a6395eb690d0863b0085e/Doc-5.png)

::: style is-title
その他のUI
:::
::: style is-subtitle
タブでの情報切り替え
:::
詳細ページにも関連する資材情報を表示させたかったのですが、ページが縦に伸びてしまうことが気になり、タブで表示させることにしました。
これにより、情報の優先順位がはっきりしたように感じます。
![Doc-6](//images.ctfassets.net/dd0roywjqx3t/2XVt31jAcXFZpkqa2PWv6K/c98dfe70d974473ca570ec5b283c98bd/Doc-6.png)

::: style is-subtitle
カレンダーでスケジュール表示
:::
スケジュールのタブではカレンダービューで予定を表示しています。
週間・月間・タイムラインとカレンダーのビューも切り替えられるようにしました。
カレンダーからその予定の詳細ページに入ることも可能です。
![Doc-7](//images.ctfassets.net/dd0roywjqx3t/DNnAhIMjlBtKDWYI1dkOF/5c73699e9609b6821f53a940442ba51f/Doc-7.png)

::: style is-title
まとめ・感想
:::
作成している中でイベントに関連する、主催会社、資材、会場など様々な情報が必要だとわかり情報の整理に苦労しました！

本書の改善例では、ひとつのページでSPA（シングルページアプリケーション）を採用しており、なるほどな！と思いました。
また、検索ももっと細かい条件でできるようになっており、コレクションの件数が増えても太陽できるようになっているな・・・と感じました。
まだまだWEBアプリケーションの表示方法の知識が浅いのでもっとトレーニングの必要性を感じました！

::: style is-title
デザインファイル
:::
今回のデザイントークンとfigmaのリンクです！
![Doc-8](//images.ctfassets.net/dd0roywjqx3t/75oszS1J9dBZfkZD27UCgi/a10a658827c484c26f4002177ea42b83/Doc-8.png)
<br />
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F6rmHOT3FTgVR0v28LkECqS%2F%25E6%25A5%25AD%25E5%258B%2599%25E3%2582%25A2%25E3%2583%2597%25E3%2583%25AA%3Ftype%3Ddesign%26node-id%3D150%253A7895%26mode%3Ddesign%26t%3D3BwzOGYIKBIzgH3w-1" allowfullscreen></iframe>

OOUI実践してみた 「イベント管理アプリ」

Thubmneil note

::: style is-title
やってみたこと
:::
オブジェクト指向UIデザインからお題を拝借し、自分なりに解析、デザインをしてみました。
応用編:レベル10 営業支援アプリ

<iframe src="https://drive.google.com/file/d/19uRqJW35kGEZwuy_8I1NL70Wdf5fD2YJ/preview" width="100%" height="400px"></iframe>

::: style is-title
修正前のフロー
:::
タクス型のため画面遷移が多くなってしまっています。
この手本を「オブジェクト思考」のデザインに修正する。お題となっているフローは「顧客にメールを送信する」の部分。
![ooui](//images.ctfassets.net/dd0roywjqx3t/1A81Nd5x1tFzADdZjx2cBH/7ac2e52201d39d32a1f909a00b7d5636/ooui.png)

::: style is-subtitle
課題整理
:::
自分なりに課題を解釈・整理し、ターゲットなども設定しました.

課題の条件に＋＠し、今回はターゲットを地方銀行に設定し「外出先でもモバイルアプリで簡単に情報を確認できる」ということを目的として作成しました。
![11](//images.ctfassets.net/dd0roywjqx3t/3ohfhk70GOnQCboNTAmHQw/07c69d972c564dd77df50eee44a89891/11.png)

::: style is-title
情報整理
:::
ボトムナビに当たるのが、「顧客」「案件」「予定」「資料」4つの項目です。お題からまとめられる部分を探し出しこの4項目に絞りました。
企業と個人を一覧にすべて同時に表示し、絞り込みで分けられるようにしました。
![12](//images.ctfassets.net/dd0roywjqx3t/r1IJOmjOpiMjsmv7oMXFw/8850fcafc331bea28017bdac70a4f6b8/12.png)

::: style is-title
WF / フロー図
:::
各画面におおよそのパーツを配置し、遷移図を作成。
案件内にタスクやMTGの議事録を記録できると良いと思ったが、今回場合は「外出先等で手軽に使う」目的で作成しているため省略しました。
（エンプティステートなどの詳細なステートについても省略）
<br />
それぞれの項目を一覧で表示し→詳細ページに入れるように設計しました。詳細ページから「編集」「削除」ができたり、メールを送るなどのアクションができます。また、個別の情報に紐づく情報にはリンクをつけ、その詳細にも飛べるようにしました。
![13](//images.ctfassets.net/dd0roywjqx3t/4joHdBsf5Ya76H5DKu99w3/1f8e73511309a4702773e89cf64b87f0/13.png)

::: style is-title
デザイン
:::
実際に使う場面を考え、一覧ページでの素早い情報取得ができるような画面を目指した。顧客・案件にはタグをつけ、ステータスを簡単に把握できるようにした。また、絞り込みでそれらのステータスに対して検索をかけられるようにした。
![14](//images.ctfassets.net/dd0roywjqx3t/5sqR9skZtatrLV1gHO6QXR/c3153f03fd7af010c5e9147c66a0fdac/14.png)

::: style is-title
メール送信のフロー
:::
こちらがメール送信のフローとなります。

1. 企業と個人が混ざった「顧客一覧」
2. 「キーワード検索」または「絞り込み」から顧客の詳細ページに入る
3. 顧客詳細ページ下部の「メールを送る」ボタンを押下
4. メールフォームが立ち上がり。右上の送信ボタンから送信する

::: style is-subtitle
工夫したポイント
:::
- 顧客と企業を一覧内に表示し、絞り込みや検索で見つけられるように
- 「メールを送る」（メールフォームへの誘導）ボタンと、「送信」ボタンの位置を変えて、誤送信を防ぐUIにした![15](//images.ctfassets.net/dd0roywjqx3t/4QdtKwuYfCUgOU15B308OO/4c69bddf11f2ed6d0a07eac42af1a1b8/15.png)

::: style is-title
その他のUI
:::
::: style is-subtitle
一覧ページにはステータスラベルを用いて、一目で情報がわかるように
:::
リスト内にラベルをつけ、
・顧客一覧 → 「企業」ラベル
・案件一覧 → 「担当」「進行中」「未進行」
などを一覧のリストから確認できるようにしました。

::: style is-subtitle
カレンダーは1ヶ月ごとの表示に
:::
すぐに確認したいことが多いのは直近の予定と仮定し、1ヶ月の表示にしました。また、直近の予定を上部に表示し、このページからある程度の予定情報を得られるようにしました。![16](//images.ctfassets.net/dd0roywjqx3t/7KgsxJYM5P4o4D4InBp5gH/375a41dfa9786351f1c151a8c3ae7aa6/16.png)

::: style is-title
デザインファイル
:::
デザイントークンとfigmaのリンクです！
![17](//images.ctfassets.net/dd0roywjqx3t/NpYrAR1U5vDF5G9JiLaXp/88370ac730c67775cd3e33e7dff60f9f/17.png)
<br />
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F6rmHOT3FTgVR0v28LkECqS%2F%25E6%25A5%25AD%25E5%258B%2599%25E3%2582%25A2%25E3%2583%2597%25E3%2583%25AA%3Ftype%3Ddesign%26node-id%3D150%253A7895%26mode%3Ddesign%26t%3D3BwzOGYIKBIzgH3w-1" allowfullscreen></iframe>

OOUI実践してみた 「営業支援アプリ」

ビジュアルデザイン

IDEAL ME ワイヤーフレーム・デザイン制作


::: style is-title
デザインしたアプリ
:::
**【IDEAL ME（理想の私）】**
**「キノウをキロク」
昨日に焦点を当てたセルフケアアプリ**
<iframe src="https://drive.google.com/file/d/192FfFPlX5wJIA3skCsDC3O2FGBgvc9LS/preview" width="100%" height="400px"></iframe>

<br />
要件定義・価値定義など情報設計はこちらの記事にまとめました！
<div class="blogcardfu" style="width:auto;max-width:9999px;border:1px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;"><a href="https://www.naosjournal.com/IdealMe_concept" target="_blank" style="display:block;text-decoration:none;"><span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;"><img src="https://images.ctfassets.net/dd0roywjqx3t/5OUZIh5kUUhO9YScnNHPm9/56517bfe23ccadd49908a5e11b46dc4b/Thubmneil.png" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;"></span><br style="display:none"><span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">NAOs JOURNAL</span><br><span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;">NAOs JOURNAL</span><br><span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>

::: style is-subtitle
価値定義・課題定義
:::
![コンセプト](//images.ctfassets.net/dd0roywjqx3t/6KBjYcKWMzeeBqq6Hp6XAI/416677d49005430931047abba39434ba/Concept.png)

<br />

::: style is-highlight
**[figmaフィルはこちら](https://www.figma.com/file/2r3Lm085yw0U6E9iVLi7Ta/IDEAL-ME?type=design&node-id=150%3A7895&mode=design&t=LesgkJ0KJVTliomG-1 "IDEAL ME figma file")**
:::

<br />

::: style is-subtitle
プロトタイプ
:::

<iframe width="320" height="560" src="https://www.youtube.com/embed/tSBlFI1NJYc" title="IDEAL ME Prototype" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<br />

::: style is-title
デザイン制作開始！
:::

::: style is-subtitle
トンマナ決定
:::
カラーやコンテンツトーンを決定します。
参考としてあげていたアプリを参考に、没入感のあるダークトーン（睡眠系アプリによく使用されている）、カラーを1色に絞ったシンプルな案、背景色をつけた温かみのある案の3つに絞りました。
男女ともに使いやすく、コントラストがはっきりしたアプリの方が今回のシンプルな設計に合うと考え、中央の案を採用しました。ですが、1つ目の没入感のあるカラーは1部アクセントとして残しています。

![トンマナ検討](//images.ctfassets.net/dd0roywjqx3t/4WX2M93E68lPu3EzG154P/d46d89f5f5ed9af17184bed0c2bb774c/______.png)

::: style is-title
意識したポイント
:::

::: style is-subtitle
プロフィール登録
:::

入力しやすいUIになるよう意識しました。
各項目に応じて入力しやすいと判断したUIを採用しています。同じ数値の入力でも生年月日と理想時間では入力方法を分けました。
生年月日は幅広い可能性がありドラムロールで回して選択するよりも数字として一気に入力できた方が手早いと判断したためです。また、生年月日は8桁で記憶している人が多いとも思いました。
普段の業務の時も、ドラムロールは「身長や先が予想できる項目に」「選択肢がの幅が多くない項目」に、デイトピッカーは「直近の日程を選択する際」に、など項目に応じた選択方法を模索し使用しています。
![profile](//images.ctfassets.net/dd0roywjqx3t/29hEOPg80pu0E094bbu3Oo/3a70f3b9f28d15f401aaf8f1a6c73bb6/Profile.png)

::: style is-subtitle
あなた
:::
理想の近くにユーザーアイコンとニックネームを配置し、自分の目標であることを意識させるデザインにしました。
理想の表示はこのアプリの主要機能の1つなので、しっかり幅を取り、まず目がいくデザインにしました。深みのあるグラデーションで自身の深層心理を表すイメージで作成しました。
分析はグラフで表現しています。上部のカードをスライドさせるとそれぞれの理想が確認でき、タップすると全文が表示されるようにしました。
![あなた](//images.ctfassets.net/dd0roywjqx3t/1RdTTfLm6amG7RdVypwgxh/b2087cdd43db155d238d17f2c679f3d0/you.png)

::: style is-subtitle
おまけ：アイコン・ストア画像
:::
最後にアプリ用アイコンやストア画像、サムネイルなどを作成！
IDEAL MEの頭文字を取るとIMになることから「私」を表す英単語「I'm」を意識したデザインにしました。
また、グラデーションの背景の中に●を配置し、自己確立・自己理解という意味合いを込めます。
![サムネイル・アイコン](//images.ctfassets.net/dd0roywjqx3t/7uxUWhXmoNi2tw8go9MToi/f61471d9d0e3695756b9957c2c08cded/icon.png)

::: style is-subtitle
最終的な全体デザイン・コンポーネント
:::

決定したトンマナに沿って全体のデザインを作成！
効率的にデザイン制作が行えるように小規模のデザインシステムを構築します。

![デザイン全体](//images.ctfassets.net/dd0roywjqx3t/L8XHqlYFo9NnQ96IxZaOi/320caefa0e69a8351dc1d18f358490f8/______.png)
![コンポーネント・-min](//images.ctfassets.net/dd0roywjqx3t/XyCsjxubI2Dfq2wra58NF/d7fcfdb771da83a3135f9359279c62dc/_________-min.png)

::: style is-title
まとめ
:::
最後までお読みいただきありがとうございます！
初めて自分が作ってみたいアプリをデザインしてみましたが、個人で一人で制作しているとどうしても視野が狭くなってしまうな〜と感じました。
ただ、仕事以外で一からアプリデザインをするのは初めてだったのでいい勉強になりました！
<br/>

figmaフィルはこちら
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F2r3Lm085yw0U6E9iVLi7Ta%2FIDEAL-ME%3Ftype%3Ddesign%26node-id%3D150%253A7895%26mode%3Ddesign%26t%3DIzTHJwWrLVg4J3sb-1" allowfullscreen></iframe>

IDEAL ME ~ビジュアル編~

情報設計

IDEAL ME 要件定義・価値定義

::: style is-title
制作のきっかけ
:::
最近、友人たちと話していると睡眠や食事など健康に関する話題が多くなってきていると感じた。ほとんどが学生時代からの友人たちだが、みな年齢を重ねて、体力や体型に変化があったり、人によってはライフステージが変わったりと20代前半とは違った悩みが出てきているようだった。睡眠時間や生活のちょっとしたこと変化を記録できるアプリがあったらいいのかなと感じたことがきっかけ！

::: style is-title
デザインしたアプリ
:::
**【IDEAL ME（理想の私）】**
「キノウをキロク」
昨日に焦点を当てたセルフケアアプリ
<iframe src="https://drive.google.com/file/d/192FfFPlX5wJIA3skCsDC3O2FGBgvc9LS/preview" width="100%" height="400px"></iframe>
<br />

::: style is-subtitle
ストア画像イメージ
:::

![branding](//images.ctfassets.net/dd0roywjqx3t/7uxUWhXmoNi2tw8go9MToi/52f9236c0615f0824b77e6ae0c0f64a7/branding.png)
<br />

::: style is-title
要件定義・価値定義フロー
:::

::: style is-subtitle
マインドマップの作成
:::
最初に友人たちとの話で特に話題に上がっていた睡眠にフォーカスしてみた。
睡眠に関するイメージやなんとなく思うことを洗い出してみる。
一般人の睡眠に関する知識は少なく、何が自分に合っているか実践可能なのかを判断するのは難しそう。本当に睡眠の質にコミットするアプリを作るなら専門的な知識や知見が必要だが、今回はその準備はできない。
そのため、睡眠の質を向上するではなく「生活の質を向上する」というところにフォーカスしてみることにした。
![マインドマップ](//images.ctfassets.net/dd0roywjqx3t/4eDI6IiMhyStpUhBO1ufDF/123f27eaa87f262c0f9e1c7b3574eec4/_________.png)

::: style is-subtitle
睡眠や習慣に関する調査
:::
本や雑誌、アンケートで健康や睡眠、生活習慣などについて調査。
<br />
**予想通りに不合理**
**Tarzan特別編集痩せる生活**
**眠れなくなるほど面白い 図解 睡眠の話**
など
<br />
**ユーザアンケートも実施**
![ユーザーアンケート](//images.ctfassets.net/dd0roywjqx3t/5PiiGCdwiXK6rN2ACvcfek/498fcc93b4933a27c825338c099a4d25/user.png)

<br />
これらの情報から、__自分の目標や理想を常に意識できるようにすれば継続させることができるのでは？__ と思った。また、健康は一つの項目で成り立つのではなく、睡眠・食事・精神状態・運動・・・その他様々なことが相互的に影響し合うということがわかった。

::: style is-subtitle
カスタマージャーニーマップの作成
:::
社会人6年目のベンチャー勤務の女性をペルソナにした。
ターゲットの年齢層としてはある程度仕事に慣れ、年齢の変化やライフステージの変化を意識し始める年齢。社会人1年目から今まで生活に大きな変化はまだ起きていないものの、結婚や出産を身近に感じ始める年齢でもあると思う。様々な面で焦りも含めたステップアップ意欲が高まる時期と想定できる。また、現段階では金銭的にも余裕があり、新しいものを取り入れることも可能。
![カスタマージャーニー](//images.ctfassets.net/dd0roywjqx3t/2C8e8ePuHkbyqv2CevI5gX/dc3ef3db5bbeb468017bc87a8f47e41d/___________.png)

::: style is-subtitle
競合調査
:::
睡眠時間を記録するアプリや日記の機能があるアプリを調査。
睡眠記録アプリには似たような雰囲気で機能も似ているものが多く差別化が難しそうだった。
日記系のアプリは女性向けのデザインのものと、シンプルな日記だけの両極端になっていたため、シンプルな機能かつ、コンセプトのある設計であれば差別化できるのではないかと感じた。

![競合調査・分析](//images.ctfassets.net/dd0roywjqx3t/3efKNCzswyQ0Cp1cLBXDdo/f6b1741a7d50ffbeaa8e7b09f3ad670f/_______.png)

::: style is-subtitle
価値定義・課題定義
:::
課題とニーズを下記のように定義↓
最初は「睡眠」にフォーカスしていたが、設計をしていく中で睡眠の向上が欲求ではなく自分との向き合い方や自己の確立という部分が本当の課題なのだと感じた。

![コンセプト](//images.ctfassets.net/dd0roywjqx3t/6KBjYcKWMzeeBqq6Hp6XAI/416677d49005430931047abba39434ba/Concept.png)

<br />

::: style is-subtitle
機能選定
:::
MVPで作成したかったため、機能は最小限に。記録し、振り返るという基本的な部分にフォーカスして選定。生活習慣や健康、睡眠に関する記事（PRを含む）を載せるメディアやお知らせの機能を今後の追加機能として入れられそう。
<br />
記録する：昨日を振り返り、記録をする（記録できる内容：睡眠時間/自己研鑽時間/気分/日記）
あなた：ユーザーの理想が表示される。記録した内容が反映され、グラフとして可視化
設定：プロフィール情報の編集など
<br />

![機能要件整理](//images.ctfassets.net/dd0roywjqx3t/1YOlVVY8xNb1MUDvsyfFl4/4984484c4b546b1cb032310069a91e86/____.png)

::: style is-subtitle
ユーザーフロー図作成
:::
決定した機能をもとにユーザーフロー図を作成。
機能を少なくしたため、簡潔なフローになった。
気軽に利用開始できるように登録をしなくても基本的な機能は使えるようにした。

![ユーザーフロー](//images.ctfassets.net/dd0roywjqx3t/DiWgrfdO4GKnAVbOvnXy6/17f2b3a0c964b158130b6105d882cf99/________.png)

::: style is-subtitle
ワイヤーフレーム作成
:::
フロー図をもとに、全体のワイヤーフレームを作成。
各画面にどの要素が必要なのかおおまかな配置を決め、不足しているフローがないか確認。

![WF主要画面](//images.ctfassets.net/dd0roywjqx3t/4aabPti5gr6YedNNRRwmZv/897c8c52ba34fbfcd7fdbef85896e8a3/WF____.png)

::: style is-subtitle
まとめ
:::
オリジナルのアプリを設計したことはなかったので、課題定義が難しかったです。
ビジュアルだけでなく、ユーザーの本質的な要望を捉えられるようになる必要があると感じました・・・！
<br />
続きのビジュアル編はこちら！
<div class="blogcardfu" style="width:auto;max-width:9999px;border:1px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;"><a href="https://www.naosjournal.com/IdealMe_design" target="_blank" style="display:block;text-decoration:none;"><span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;"><img src="/public/img/spain.jpeg" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;"></span><br style="display:none"><span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">NAOs JOURNAL</span><br><span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;">IDEAL ME ~ビジュアル編~</span><br><span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>

<br />
figmaファイルはこちら
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F2r3Lm085yw0U6E9iVLi7Ta%2FIDEAL-ME%3Ftype%3Ddesign%26node-id%3D150%253A7895%26mode%3Ddesign%26t%3DIzTHJwWrLVg4J3sb-1" allowfullscreen></iframe>

IDEAL ME ~情報設計~

予想どおりに不合理の読書記録サムネイル

予想どおりに不合理

タイトル：予想どおりに不合理
作者：ダン アリエリー(Dan Ariely)
リンク：__[予想どおりに不合理](https://www.amazon.co.jp/%E4%BA%88%E6%83%B3%E3%81%A9%E3%81%8A%E3%82%8A%E3%81%AB%E4%B8%8D%E5%90%88%E7%90%86-%E8%A1%8C%E5%8B%95%E7%B5%8C%E6%B8%88%E5%AD%A6%E3%81%8C%E6%98%8E%E3%81%8B%E3%81%99%E3%80%8C%E3%81%82%E3%81%AA%E3%81%9F%E3%81%8C%E3%81%9D%E3%82%8C%E3%82%92%E9%81%B8%E3%81%B6%E3%82%8F%E3%81%91%E3%80%8D-%E3%83%8F%E3%83%A4%E3%82%AB%E3%83%AF%E3%83%BB%E3%83%8E%E3%83%B3%E3%83%95%E3%82%A3%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E6%96%87%E5%BA%AB-%E3%83%80%E3%83%B3-%E3%82%A2%E3%83%AA%E3%82%A8%E3%83%AA%E3%83%BC/dp/4150503915 "予想どおりに不合理")__
<br />

ずっと読みたいリストに入っていたが読んでいなかった有名な行動経済学の本。
通勤時にコツコツ読んで約1ヶ月で読了。
ページ数自体は多くないが、内容がぎっしり詰まっているので、スラスラと読むというよりじっくり読みたい一冊。Amazonで¥1,100！

::: style is-line
:::

::: style is-title
概要
:::
一般的な経済学や市場原理には、人間は常に合理的な判断ができ、それが市場に反映されるとういう大原則がある。
だが、人は経済学や市場原理が予想しているように合理的に行動するわけではなく、それぞれの状況や選択肢によっては非合理的に行動する。
また、この非合理的な行動はある程度予想できる！

本章の内容から特に気になった部分をピックアップしてみました！

::: style is-title
印象に残ったところ
:::

::: style is-subtitle
市場規範と社会規範
:::

社会規範は無料・報酬なしで行われる、主に善意からくる行動や手伝いのこと。一方、市場規範は金銭のやり取りが発生する（＝仕事）ことです。

私たちの生活には、1つのものごとが社会規範でも市場規範でも同時に存在していることが多々あります。
<br />
__たとえば・・・__
あなたが無償のボランティアに参加しようとした時、相手から「無償は申し訳ないので、時給500円でお願いします。」と言われたらどう思うでしょうか？「いや、それは少ないな・・・そもそも最低時給下回ってるし・・・」とモヤモヤしませんか？？

気になっている人と3度目のデートとした帰り、なかなか進まない展開にストレスを感じ「今まで君に使ったお金は6万円なんだ・・・」と口にしてしまったら相手はどう感じるでしょうか？言うまでもなく不快な気持ちにさせてしまいますよね。
<br />
__デザイナーで考えてみましょう！__
デザイナーのあなたは友達の結婚式のためにウェルカムボードを作ることにしました！
<br />
今までの経験を活かして仕事終わりの時間を使って20時間ほどの制作時間をかけて、渾身のウェルカムボードを作りました。当日、新郎新婦はもちろん参列者からも好評であなたはとても満足していました。ですが式の後、友人の新婦からお礼として3,000円を渡されました。

・・・あなたはどう思うでしょうか？？

「自分の単価からして3000円はさすがに少ないような？」、「これって仕事だったのかな・・・？」など、突然仕事モードがONになり、単価や給料と比較してしまうのではないでしょうか？

お金が絡んでいなかったところにお金が絡んだ瞬間、市場規範が入りこみ、社会規範が消えてしまうのです。
<br />
これがもしプレゼントだったらどうでしょう。
お礼にお花や高級ブランドのチョコレートなんかをいただいたら、例え同じ3,000円の価値でも気持ちよく受け取れるのではないでしょうか？
プレゼントは社会規範の範囲内に収まるようです。
<br />
もちろん、仕事に対しては適切は対価をもらうことは大切です！
ただ、好意でやったことと仕事は一線を引く必要がありますよね。私たちデザイナーの場合は報酬が必要ならはっきりと必要であると申し伝え、金額の交渉をする必要があるかもしれません。また、好意で無償でやるのなら事前にその旨を伝えたほうが気持ちよく制作ができそうですね！

::: style is-subtitle
性的興奮の影響
:::
もうひとつとても興味深かったのは第6章「性的興奮が意思決定にどんな影響を与えるか」
性的興奮状態の時にいくつかの質問をすると通常時とは全くととなる、倫理観の欠けた回答が返ってくるという日本では絶対に許されなさそうな実験の結果です。
（ex.コンドームは性的快楽を減らすと思いますか？キスだけでは不満になると思いますか？など）

<br />

最近、有名人の不倫がメディアを賑わせていますよね。内容自体に興味はないものの、ずっと「どうして社会的地位が下がる可能性があるのにこんなことしてしまうんだろ？天秤にかけたら絶対にしない選択肢の方がいいのに・・・」と思っていました。同じことを感じている方も多いのではないでしょうか。この実験結果を見て、その答えがわかった気がします。
性別、年齢関わらす誰しもが持つべき知識のようにも感じました。

::: style is-line

:::

::: style is-title
まとめ＆感想
:::

どうしてもっと早く読まなかったんだろうと後悔するほどに面白かったです！

言われてみたら確かにそうだなと思う内容が多いのですが、それらが仮説から立証されていくフローもわかり非常に勉強になりました。

また、何気なく行なっている選択にも理由があることがよくわかります。

そしてその選択はいつも同じではなく、その人の状況によって変わってきます。
人と関わるすべての方にも役に立つ本だと思います。

読書記録：予想どおりに不合理

miro

::: style is-title
開催概要
:::
ミロ展 -日本を夢見て
開催期間： 東京 20222.11~4.17
会場：Bunkamura ザ･ミュージアム
<br />
<div class="blogcardfu" style="width:auto;max-width:9999px;border:1px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;"><a href="https://www.bunkamura.co.jp/museum/exhibition/22_miro/" target="_blank" style="display:block;text-decoration:none;"><span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;"><img src="https://images.weserv.nl/?w=100&url=www.bunkamura.co.jp/museum/exhibition/22_miro/images/cardimage.jpg" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;"></span><br style="display:none"><span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">ミロ展―日本を夢みて | Bunkamura</span><br><span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;">「ミロ展―日本を夢みて」の特集ページ</span><br><span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>
<br />

::: style is-line
:::

::: style is-title
ミロって誰？
:::
**Joan Miró**

ジュアン・ミロ（1893-1983）＊ジョンアンとも呼ばれる

スペイン　カタルーニャ生まれで20世紀を代表する画家

戦争や内戦により各地を転々としながら制作を続ける。

日本文化への興味が深く、影響を受けた作品も多数存在している。

この展覧会では、ミロが来日した際の様子や、日本との交流の様子も知ることができる。

<br />

::: style is-line

:::

::: style is-title
感想
:::

大胆でコントラストのある色使いでインパクトのある作品が多かった。

自国スペインの、ヨーロッパ的な作品と、日本の和柄や浮世絵的な作品があいまって、独特の作品になっている。

風景画から、動物（架空の動物もいた？）など様々なものを対象とした作品が多い。

1893年〜1983年と長生きされているので、晩年はご本人の写真や映像が綺麗に残っており、すごく身近に感じられた。

大胆な配色や一見関係ないように思われるのもを取り込む姿勢はデザインを行う上での勉強になった。

ミロ展 -日本を夢見て

2025

::: style is-title
2025年人は買い物をしなくなる
:::
タイトル：2025年人は買い物をしなくなる
作者：望月 智之
<br />
<div class="blogcardfu" style="width:auto;max-width:9999px;border:1px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;"><a href="https://www.amazon.co.jp/2025%E5%B9%B4%E3%80%81%E4%BA%BA%E3%81%AF%E3%80%8C%E8%B2%B7%E3%81%84%E7%89%A9%E3%80%8D%E3%82%92%E3%81%97%E3%81%AA%E3%81%8F%E3%81%AA%E3%82%8B-%E6%9C%9B%E6%9C%88-%E6%99%BA%E4%B9%8B-ebook/dp/B081HX15LT" target="_blank" style="display:block;text-decoration:none;"><span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;"><img src="https://m.media-amazon.com/images/I/51FJbf2+S0L.jpg" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;"></span><br style="display:none"><span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">2025年人は買い物をしなくなる</span><br><span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;"></span><br><span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>
<br />

::: style is-line
:::

::: style is-title
学んだこと
:::

**インターネット時代の到来**
スマートフォンの登場によりインターネットが急速に発展、パソコンから、**手元に**

今までは、「週末に家族で買い物をする」ということが人流のイベントになっていたが、今はそれでは物足りなくなっている。

忙しい現代人は、自分の好きなことに熱中するために、「買い物は簡単に済ませたい」と思う傾向にある。

<br />

**ググらない**
ググるというワードは数年前から当たり前に使われているが、今の10代、20代の若者はわざわざGoogleで検索することはなく、普段使っているSNSから検索し情報を得ている。Googleの膨大な検索エンジンから探すより、親しんだSNSのほうが自分に合った情報が出てくるからため。
<br />

**大事なのは購入体験**

わざわざ遠くまで足を運び、駄田商品を買うだけという行為から、人はどんどん遠ざかって行く。しかし、その購入体験に＋＠の価値を見出せれば、顧客は集まる。

→ナイキ：商品をこだわってディスプレイし作品っぽく展示

その場でカスタマイズでき、その場でネット購入し、自宅に届くため、かさばるスニーカーをモール内で持ち歩く必要はない。

::: style is-line

:::

::: style is-title
まとめ＆感想
:::

リアルの普通の買い物がだんだんと人々から遠ざけられているということは、使いにくい、時間がかかるネットショッピングにも人は集まらなさそう。

簡単にかつ、プラスのイメージをつけられる購入体験はなんなのか考えていきたい！

また、お年寄りなどスマホやPCを当たり前に使わないユーザーへの配慮も大切なのかなと思う。

2025年人は買い物をしなくなる

WEBデザイナーの教科書

  ::: style is-title
WEBデザイナーの教科書
:::
タイトル：[いきいきWebデザイナーの教科書](https://amzn.asia/d/5jlj5Rb)
作者：髙塚 修治
<br />

::: style is-line
:::

::: style is-title
印象に残ったところ
:::

**お客さんを増やす**
- 交流会等に参加する
- むやみに営業するのではなく、相手の話をよく聞く
- 困っていることの相談に乗る、課題を一緒に解決するような形で仕事につなげる
- 自分の強み、専門性をアピールする（自分の強みは他のデザイナーを見て比較してみつける）
<br />
**お客さんを選ぶ**
- 自分の好きなお客さんの特徴を見つけ出し、リスト化する
- 嫌いなお客さんも同様
- 好きなお客さんと飲み仕事をする、合わない人はご縁がなかったと思う
<br />
**値下げ交渉をさせない**
- 内容を細分化しそれぞれに値段をつける
- 価格を明確にすることで値段を下げないようにする
- 松竹梅のように作業の負担ごとに価格をつける
<br />
**見た目**
- できる感の演出をする
- 服装は自分の見せたいイメージに合わせて選ぶ、ビジネス感とクリエイティブな感じ両方必要
- 高級レストランの店員さんのように堂々と丁寧に振る舞う
<br />
**お客さんとの付き合い方**
- 即レスをやめる
- 低単価の仕事を受けない
- 自分を新人デザイナーと思い安く使ってこようとする、見下しているお客さんとの付き合いをやめる
<br />
::: style is-line

:::

::: style is-title
明日から実践したいこと
:::
**できる感じの演出**
一番簡単にできることだと思った
自宅でのMTGでもきちんとした服を着て、メイクもしっかりする
しゃべり方に気を付ける　→これは苦手なので別に練習、学習が必要・・・
とりあえず意識だけしてみる
実際に出すかは別として、自分の価格表を作ってみる

banner01

グラフィックデザイン初心者がバナーを作ってみました！

::: style is-title
概要
:::
バナーを作り添削していただきました！
イライジャさん([@Elijah_School](https://twitter.com/Elijah_School))が作ってくださったお題です！
さらにその後、いただいた添削をもとに修正してみました〜！

作成→修正は現場ではあるあるの作業ですね😊
<br />
現在上司のいない私には大変ありがたいです🙏
デザイン学習中の方におすすめです。↓
<div class="blogcardfu" style="width:auto;max-width:9999px;border:1px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;"><a href="https://note.com/elijah_2501/n/ne55e414e831e" target="_blank" style="display:block;text-decoration:none;"><span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;"><img src="https://assets.st-note.com/production/uploads/images/79675656/rectangle_large_type_2_71817c4f76e52b6a167c5465b8aea8dd.jpeg?fit=bounds&amp;quality=85&amp;width=1280" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;"></span><br style="display:none"><span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">無料添削あり　超実践型デザインお題「北海道チーズバナー」｜イライジャ｜WEBデザイナー　デザイン添削おじさん｜note</span><br><span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;"></span><br><span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>
<br />
このお題では「自社サイト掲載用とショッピングサイト掲載用の2つのパターンを作成」するというのがポイントでした。

内容は同じで雰囲気を変えるのが難しかったです・・・
::: style is-line
:::

1. [制作したバナー](#anchor1)
2. [修正後のバナー](#anchor2)
4. [感想](#anchor3)

---

<br />

<a id="anchor1"></a>

::: style is-title
制作したバナー
:::

最初に作ったバナーはこちら![before](//images.ctfassets.net/dd0roywjqx3t/3XhqIXqp1hvxMXWPeHtsMB/51692ccb1abf53fa6de5d7c33a7d70be/before.png)
**HP掲載用**
商品の特徴に焦点を当てて作成

シンプルなサイトに合わせてカラー数を抑えた

フォントもゴシックで上品に

上部は文字と写真のみでシンプルにしてサイトの雰囲気に合うように

キャンペーンについてはきちんと情報を出し、キャンペーン内容がわかるように

__参考HPは非常にシンプルで落ち着いた雰囲気なので少し目立ちすぎるかなと思った__
<br />

**ショピングサイト掲載用**

ショッピングサイト掲載用は楽天市場に載せるイメージだったので「お得感」を全面に

ショッピングサイト内は小さく表示されている場面もあるので数字、特に50%の部分は目立つように

「送料無料」はECにおいて重要な点だと思うので自社HPの時よりも強調

背景のから少し浮いているように見えるのが残念・・・
<br />
<br />

こちらをイラジャさんに添削していただきました！

記念すべき100回目だそうです👏 ↓詳細はこちらから！
<div class="blogcardfu" style="width:auto;max-width:9999px;border:1px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;"><a href="https://note.com/elijah_2501/n/n5e57fd52d2d6" target="_blank" style="display:block;text-decoration:none;"><span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;"><img src="https://assets.st-note.com/production/uploads/images/80592995/rectangle_large_type_2_8dfa165a16f1c68af35301d8e7565224.jpeg?fit=bounds&amp;quality=85&amp;width=1280" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;"></span><br style="display:none"><span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">無料添削デザインスクール #100 超実践型デザインお題添削「北海道チーズバナー」｜イライジャ｜WEBデザイナー　デザイン添削おじさん｜note</span><br><span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;"></span><br><span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>
<br />

::: style is-subtitle
修正点の整理
:::

<br />

**自社サイト掲載用**

少し荒っぽく、自社サイトのイメージを重視しほうが良い
自社ブランドのイメージを保たせる
<br />

**ショッピングサイト掲載用**

左上「期間限定」の可読性がいまいち
ショッピングサイトの場合はロゴを入れる
10.1~10.3よりも→「3日間限定！」の方が限定感が出る

<br />

**全体**

「どんなチーズなのか」がもっと伝わるといい
フォントの剪定をも一度考えてみる

<br />
やっぱり自社サイトと雰囲気あってなかったか〜！
うすうす自分でもそう思っていたのです・・・
そしてコピーに関しても、たしかに「3日間限定」の方がインパクトがあるし、一瞬で意味が理解できるなと
コピーの世界は奥が深そうですね。いつかちゃんと勉強してみたいです。
<br />

::: style is-line

:::

<a id="anchor2"></a>

::: style is-title
修正後
:::
これらのアドバイスをもとに修正してみました！
![after](//images.ctfassets.net/dd0roywjqx3t/4waGBl62X836Sf39Bj8g1Q/54710d7d5a063f5a7c1651a8d73ecdcc/after.png)
<br />

__自社サイト掲載用__

色やフォントのジャンプ率を抑えて上品に
安売り感を全面に出さない。お得な価格であることは示しつつも強調しすぎないように
その分、商品の特徴を入れるようにした

<br />

**ショッピングサイト掲載用**

強調する情報を「3日間限定」と「50%OFF」に絞った
送料無料で最後の一押しをするイメージ
信頼性UPのためのロゴ（企業名）を追加

<br />

<a id="anchor3"></a>

::: style is-subtitle
感想
:::

<br />
入れたい情報をバランスよく、でも目立つように配置するというのがとでも難しかったです・・・
バナー制作は勉強になりますね〜

イライジャさんは無料で添削してくださるので本当にありがたいです。
どんどん作って添削してもらいましょう！！


バナー作って修正してみた

time-power

::: style is-title
紹介する本
:::
タイトル：面白いほど役に立つ　図解　超一流の時間力
作者：安田正
<br />
・時間をどう生み出すか、生み出した時間をどう使えば生産性が上がるのかがわかる
・50個のチェックポイントからできているので読みやすく、理解しやすい
・自分のできそうなもの、 ==実践できそうなものを選んでできる== のも良い
<br />
<div class="blogcardfu" style="width:auto;max-width:9999px;border:1px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;"><a href="https://www.amazon.co.jp/dp/B07GKK167J/ref=dp-kindle-redirect?_encoding=UTF8&amp;btkr=1" target="_blank" style="display:block;text-decoration:none;"><span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;"><img src="http://capture.heartrails.com/100x100?https://www.amazon.co.jp/dp/B07GKK167J/ref=dp-kindle-redirect?_encoding=UTF8&amp;btkr=1" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;"></span><br style="display:none"><span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">面白いほど役に立つ 図解 超一流の時間力　終わらない仕事から即解放！ワクワクしてくる魔法の時間術</span><br><span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;">安田 正 | 2018年08月25日頃発売 | 終わらない仕事から即解放！ 時間を味方に付けると、あなたの夢が実現する！　毎日がワクワクしてくる魔法の時間管理術。70万部の大ベストセラー『超一流の雑談力』（文響社）で人気のコンサルタント、安田正が成功を手に入れるための時間管理のコツを解説。仕事効率をUPさせるスキルとは？　やる気あふれる1日にするには？　目標・計画を達成させるには？　など、5つの目的別に、超一流の人が実践している「時間ルール」をわかりやすく図解しました。時間に追われたくない人、仕…</span><br><span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>
<br />

::: style is-line
:::

::: style is-title
印象に残ったところ
:::
<br />

::: style is-subtitle
短期目標、長期目標、中期目標を立てる
:::

短期目標 __「今日何をすればいいのか」__ をたてることで
長期目標 __「1年後こうなっているためにはどうすればいいのか」__ がわかるようになる
また中期目標で __「目標の見直し」__ をすれば軌道修正が可能！

<br />

::: style is-subtitle
優先順位の付け方
:::

「難易度」、「重要度」、「緊急度」
の3つの項目にタスクを振り分け流。
「その日」に最優先にすべきことを上に持ってくる
毎日同じことを最優先にするのではなく、 __その日の状況によってタスクの優先度も変わるので柔軟に対応する__ ことが大事
<br />
::: style is-subtitle
朝の習慣
:::
朝日を浴びて軽い運動をすると脳の活性化になる
そのまま朝の一番頭が働く時間を有効活用し、効率的に仕事を！
脳のピークが午前中にあるが、これが終わったタイミングで __軽い昼寝__ をすることでまた脳が活発期なる。
→パワーナップ！！

::: style is-line

:::

::: style is-title
まとめ＆感想
:::
これらの習慣は一見実行するには難しく感じるが、「パターン化、習慣化」させて自分のものにすれば容易に実行できる
毎日同じことを繰り返していくうちに __「思考しないで行動できるようになる」__ 
習慣化を目指したい。

::: style is-subtitle
明日から実践したいこと
:::
・朝、午前中の時間を大切にする
・優先順位をしっかりつけたタスクを作る
・自分の行動パターンを理解し。「行動のルーティン」を作る

超一流の時間力

書く習慣

::: style is-title
紹介する本
:::
タイトル：書く習慣
作者：いしかわゆき
<br />
<div class="blogcardfu" style="width:auto;max-width:9999px;border:1px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;"><a href="https://www.amazon.co.jp/%E6%9B%B8%E3%81%8F%E7%BF%92%E6%85%A3-%E3%81%84%E3%81%97%E3%81%8B%E3%82%8F%E3%82%86%E3%81%8D-ebook/dp/B09DSGR674" target="_blank" style="display:block;text-decoration:none;"><span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;"><img src="http://capture.heartrails.com/100x100?https://www.amazon.co.jp/%E6%9B%B8%E3%81%8F%E7%BF%92%E6%85%A3-%E3%81%84%E3%81%97%E3%81%8B%E3%82%8F%E3%82%86%E3%81%8D-ebook/dp/B09DSGR674" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;"></span><br style="display:none"><span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">書く習慣</span><br><span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;"></span><br><span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>
<br />

::: style is-line
:::

::: style is-title
学んだこと
:::
<br />

**今やりたいという気持ちを大切に！**

何かをやる時始めようと思った時はつい「準備をしなくちゃ」、「リサーチしてから・・・」とナチがちですが、はじめてみることが大切。

実際にやってみて修正していくトライアンドエラーでやることが前進できるこつ！
<br />
**文章の価値を決めるのは自分ではなく読んだ人！**

自分の書いた内容を見ると「どうでもいいことじゃん！」と自分で思うことがあるが、その文章に価値を与えてくれるのは**読んだ人**。

自分にはただのありふれた日常に感じても工夫して発信するとこで誰かに刺さる文章になる。

自分にとっての日常は他の人にとっては非日常かもしれない！
<br />
**すぐ書く！**

感情が動いたら忘れないうちに言語化しておくこと。

時間が経つと感情の記憶も薄れてしまう。
<br />
**完璧な文章を目指さない！**

せっかく書いた文章も「間違っていたらどうしよう」、「もっといい文章がかけるんじゃないのか」と思って公開できなかったり先延ばしするのはもったいない！

完璧でなくてもいいから公開して誰かに見てもらうことが大事。

::: style is-line

:::

::: style is-title
まとめ＆感想
:::
綺麗な文章でなくてもいいからまずは書いてみようという言葉に背中を押されました！

何が共感されて、何が共感されないのかは**読んでくれた人が決めること。**

難しく考えずぎずに書いてみようと思う。

::: style is-subtitle
明日から実践したいこと
:::
・感情が動いた時はまず何かをどこでもいいから書いてみる！
・あまり深く考えずに思ったことは言葉にしてみる！
・書くことを習慣化させる→すぐ書ける環境を用意しておく！

書く勇気が出る1冊

First UI

::: style is-title
紹介する本
:::
タイトル：はじめてのUIデザイン 改訂版

著者：池田 拓司　宇野 雄　上ノ郷谷 太一　坪田 朋　元山 和之　吉竹 遼
<br />

「UIデザイナーを目指している人に渡せる最初の1冊を作りたい。」というお考えのもと、なんとEPUBファイルで**無料でダウンロード可能**になっています。
kindleでも100円という破格です。
<br />
筆者は一応フリーランスデザイナーとしてお仕事をいただいていますが、デザインのインターフェイスばかりを学習していました。情報設計がうまくできておらずエンジニアさんとうまくコミュニケーションが取れなかったことをがあり、もっと根本的な部分の勉強がしたいと思いこの本を手に取りました。
<br />
「もっと早く知りたかった」、「自分の知識量はまだまだだな・・・」とデザインに対するモチベーションが上がりました。
<br />
**「デザインを本格的に勉強したい」、「デザインを仕事としたい」**
そんな方におすすめの1冊だと思います。

<div class="blogcardfu" style="width:auto;max-width:9999px;border:1px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;"><a href="https://ui-design.studio.site/" target="_blank" style="display:block;text-decoration:none;"><span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;"><img src="https://images.weserv.nl/?w=100&url=ssl:storage.googleapis.com/production-os-assets/assets/0d5f1f49-97e9-4f3e-a757-289354c6a9c8" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;"></span><br style="display:none"><span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">はじめてのUIデザイン 改訂版</span><br><span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;"></span><br><span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>

<br />
かなりの情報量なのでこの記事では筆者の印象に残った部分を中心に記述しています！
<br />
<br />

::: style is-line
:::

::: style is-title
学んだこと
:::
・UIデザインとは？
・インターフェイス（色やフォント）を作る前の情報設計の方法
・UIの作り方
<br />
<br />
::: style is-subtitle
UIデザインとは？
:::
<br />
利用者が目的を達成するためにある＝課題を解決するためにするもの

サービスの提供価値をユーザーに正しく届けるためのもの

→結果としてサービスに愛着を持ち、長く使ってくれるファンを生み出すことができる
<br />
<br />

::: style is-subtitle
情報設計
:::
<br />

まず必要なのは情報設計＝ __わかりやすさを設計すること__
<br />
**ユーザーシナリオを作る**

目的の達成するまでの様子をわかりやすく書く

ポストイットなどを使ってユーザーの動きを再現する。

その過程で必要な要素は何なのかを整理する。
<br />

**価値シナリオ**

ユーザーがしたいと思っていること（価値、欲求）を見つける

（例： 海外旅行が好きでコロナ前は年に2回ほど旅行に行っていた）
<br />

**行動シナリオ**

目的を達成するまでのシナリオを作り、そこで発生するタスクを見つける

（例： 海外旅行に行きたいがコロナのためしばらく行けていない。帰りの電車で以前の旅行で知り合った友人たちのInstagramをチェックして行きたいところをピックアップしている）
<br />

**操作シナリオ**

上記のタスクを実行するための操作

（例：

・Instagramで友人の投稿をチェック
・友人が訪れた場所をコピーしてGoogleで検索
・良さそうであればGoogle Mapのお気に入りに登録）
<br />

また、たくさんので要素を並べる場合は**どの基準でまとめるのか**も重要
（例：あいうえお順、A to Z、時間軸、種類、性質による区分）
<br />
参照
<blockquote class="blogcard" style="width:auto;border:1px solid #aaa;margin:1em 0;padding:1em;line-height:1.4;text-align:left;background:#fff;"><a href="https://medium.com/@3inowayosuke/latch-5%E3%81%A4%E3%81%AE%E6%83%85%E5%A0%B1%E6%95%B4%E7%90%86%E6%96%B9%E6%B3%95-d66b769d2470" target="_blank" style="display:block;text-decoration:none;"><div style="width:100%;margin:0 0 .5em;"><span style="font-size:18px;font-weight:700;color:#333">LATCH 5つの情報整理方法</span></div><div style="min-height:80px;"><div style="float:left;width:80px;height:80px;margin:0 .5em;position:relative;"><img src="https://images.weserv.nl/?w=80&url=https://miro.medium.com/max/1200/1*CuOh9_35tdVWuEsv5J-6EA.png" alt="thumbnail" style="display:block;margin:0;padding:0;width:100%;height:auto;border:none;position:absolute;top:50%;transform:translateY(-50%);"/></div><div style="padding:0 .5em;overflow:hidden;text-overflow:ellipsis;"><span style="font-size:14px;font-weight:400;color:#666">リチャード・ソール・ワーマンは情報の整理方法としてLocation、Alphabet、Time、Category、Hieralchyの5つを挙げています。これら５つの情報分類は頭文字を取ってLATCHと呼ばれています。</span><br/><span style="font-size:12px;font-weight:400;color:#373">https://medium.com/@3inowayosuke/latch-5%E3%81%A4%E3%81%AE%E6%83%85%E5%A0%B1%E6%95%B4%E7%90%86%E6%96%B9%E6%B3%95-d66b769d2470</span></div></div></a></blockquote>
<br />
<br />

::: style is-subtitle
UIを作る
:::
<br />

情報設計ができたらいよいよデザイン（インターフェイス）の作成に入ります。
<br />

**言語化された情報を具体化する**

・情報に優劣をつけて、強調する（そのページで一番して欲しいことはなに？）
・名詞にできるものはオブジェクト、動詞にできるものはアクション

（例：ボタン：ボタンコンポーネント　選択する：写真を選択、人物を選択）
<br />
<br />

**デザインの一貫性**

一貫性を意識すると以下の利点が

・プロダクトの振る舞いに統一感を
・ユーザーの学習コストを減らす
・UI制作のプロセスを効率化する
・開発の工程を減らす

一貫性はカラーやフォントだけでなく、動きの一貫性、メニューなどの位置の一貫性もある

また、独自性の高いUIを使っては行けないわけではなく、上記の利点が得られない、デメリットがあることを理解して利用することが大切

::: style is-line
:::
::: style is-title
まとめ＆感想
:::
<br />

すぐにインターフェイス部分のデザインをしようとしない

調べるのはOK、参考もたくさん用意した方がいいが、カラーのデザインに取り掛かるのは情報設計がきちんとできてから

「何のためのデザインなのか」「ユーザーにどう動いて欲しいのか」を常に意識する

カラーとかはダサくてもいい。まずはユーザーに負担をかけずサービスを利用してもらうことを考える！

::: style is-subtitle
明日から実践したいこと
:::

・「何のためのデザイン？」と問いかけながらデザインする
・インターフェイスよりも情報設計にこだわる
・「どこにどう一貫性があるのか」を説明できるようなデザインを心がける

[1]: https://ui-design.studio.site/ "はじめてのUIデザイン"
[2]: https://medium.com/@3inowayosuke/latch-5%E3%81%A4%E3%81%AE%E6%83%85%E5%A0%B1%E6%95%B4%E7%90%86%E6%96%B9%E6%B3%95-d66b769d2470 "LATCH 5つの情報整理方法. リチャード・ソール・ワーマンは情報の整理方法としてLocation、Alphab… | by みのわようすけ | Medium"

はじめてのUIデザイン

FirstPost

::: style is-title
初投稿！
:::
Next.jsとContentfullでブログを構築してみました！
今までWEB制作に使うHTML,CSS,Javascriptを中心に勉強していましたが、本格的にフロントエンドの開発をしてみたいと思うようになり、最近はReactやNext.jsを触っています。
普段は一応フリーランスデザイナーとしてちょこっと仕事をしております。
<br />
基本的な学習を終えて何か作ってみたいな〜と思ったのと、仕事であるデザインに関する発信をしたいなというタイミングが重なり、ブログを作ってみることにしました🙌
ただ、ブログのタグ付けの実装ができていなかったりと完成はもう少し先になりそうです・・・
<br />
デザインからすべて自分で作ったのでかなり愛着のあるブログとなりました！
頑張ってデザインの関することを発信していければと思います！
よろしくお願いします😊
<br />

自己紹介はこちら！
<blockquote class="blogcard" style="width:auto;border:1px solid #aaa;margin:1em 0;padding:1em;line-height:1.4;text-align:left;background:#fff;"><a href="https://www.naosjournal.com/About" target="_blank" style="display:block;text-decoration:none;"><div style="width:100%;margin:0 0 .5em;"><span style="font-size:18px;font-weight:700;color:#333">About</span></div><div style="min-height:100px;"><div style="float:left;width:100px;height:100px;margin:0 .5em;position:relative;"><img src="https://images.weserv.nl/?w=100&url=/public/img/spain.jpeg" alt="thumbnail" style="display:block;margin:0;padding:0;width:100%;height:auto;border:none;position:absolute;top:50%;transform:translateY(-50%);"/></div><div style="padding:0 .5em;overflow:hidden;text-overflow:ellipsis;"><span style="font-size:12px;font-weight:400;color:#373">&lt;https://www.naosjournal.com/&gt;/About</span></div></div></a></blockquote>