LachelierにてWEBデザイン勉強会を行ったときのスライドです。 2つのWEBデザインを題材として、意見交換を行いました。 意見交換した結果もスライドに反映しています。 The slide is made for web design study in Lachelier Online Salon. We exchanged opinions with two WEB designs as subjects. The slide contain result exchanged opinions.

1. Lachelier Online Salon
WEBデザイン勉強会
みんなで「やさしい勉強会」にしましょ💓

2. がいよう
２つのWEBデザインを題材として参加者同士が意見・情報交換をおこない、
みんなのデザイナースキルをアップしよ〜
勉強会参加者のデザイナースキルが みーんなUP!！
①題材となるWEBデザインの
「いいところ」と「こうしたらもっとよくなる」を意見交換しましょ〜
②仲良いい感じの会にしましょ〜
もくてき
もくひょう

3. ・わいわい笑いながら、楽しみながらやる感じがいいです
・デザイン未経験者、勉強会初参加の方もいますよ
・題材デザインを提供するデザイナーは匿名にしています
・意見を言うのが苦手な人は、聞くだけでもOKです
・意見を言うときは、押し付ける言い方にならないよう気をつけましょう
（例）OK：私としては＊＊＊だと思う。
NG：＊＊＊は絶対にこう。それ以外はありえない。
テーマは「やさしい勉強会」 💓
生活への不安をなくし、明日の楽しみを提供する
Lachelierらしい勉強会にしましょ💓

4. 勉強会の流れ
1. 勉強会の趣旨説明 21:30〜21:35
2. 題材１(IPO monitor)の意見交換
2-1.題材の紹介 21:35〜21:40
2-2.意見交換 21:40〜22:10
3. 題材２(Asuraku)の意見交換
3-1.題材の紹介 22:10〜22:15
3-2.意見交換 22:15〜23:10
4. まとめ 23:10〜23:30

5. 各WEBデザインの目的達成に向けて以下の意見をわちゃわちゃ出す
・現状デザインのいいところ
・こうしたらもっと良くなるかも
進め方
①意見をZOOMのチャットにガンガン書いていく。
②ある程度書き終わったら、それをネタに話して、意見を広げたり、深掘りしたりする。
③新しく意見がでてきたらZOOMのチャットに書いていく。
お願い
・意見の是非については議論しないことにします〜
「それいいね〜」「そういう考え方もあるね〜」と認めあいながら、
各自の視点から意見を出し合う感じがGood⭐
・問題点だけ言うのはNGにしたいですm(_ _)m。改善案のついでに問題点を出すのはOK🙆
・グループ間の意見交換のときMCが「個人的にこの意見面白いな」って思う順に発表します⭐
また、勉強会終了後にスタッフにてまとめて、後で皆さんに共有します⭐
意見交換について

6. 題材１：IPO株価表示サービス『IPO Moniter』
サイトの概要
上場3年以内の比較的新しい銘柄の株価チャートを表示する
個人投資家はこのサービスを使って効率的に情報収集をする
URL
https://docs.google.com/spreadsheets/d/1tjk_X9HxPG7a7oqhl4vNkeZsXpUh3cXpfRA5n7ulZsA/edit?usp=sharing
WebSiteの目的
個人投資家にこのサービスをたくさん見てもらい、サービス主が広告収入を得る
ターゲット
日本株の個人投資家、40代以上が多いと想定。
狙う導線
web検索
悩んでいる・課題と感じているところ
Material-UIのコンポーネントをそのまま使用していますが、味気ない気がしています。
もっと親しみやすくて見栄えのいいデザインにしていきたいと考えています。

7. このWEBサービスのウリになるところ
を、強調してもいいんじゃないか？
例：
・出来高変化率が数字で大きめにラ
ベルみたいな感じで出す
・1年、2年、3年フィルター
・search
親しみ易い色ってオレンジとか万人受けしそう。
ターゲットが40代男性と捉えると紫もいい。
チャートごとに会社名（銘柄名）と業種とかあると興味持
ちやすい気がします。
業種・業界ごとに、ランキングにして比較できたらもっと
良くなるかなと思います！（複数の業界を同時に比較し
たいときもありますし）
全体的にシンプルなのがとても良いと思います！
注目してる銘柄は何日も観察すると思うの
で上位に表示キープできるといいかも
広告の位置を工夫する
・ユーザーのみやすさを優先して、お気に入り銘柄
のしたに広告を表示する
・操作ボタンの少し近くとかにおいて誤クリックを狙
う（闇
・チャートとチャートの間に挟んで、何度も見るよう
にする
題材１：意見交換の結果① 勉強会後に追記

8. 他の上場してから同じ期間の会社と比べてどうかってい
う指標があると期待できる銘柄かどうかの判断がつきや
すそうです。
タブやウィンドウの分割で比較したり、パパっと切り替え
られるようにしてもいいかも
題材１：意見交換の結果② 勉強会後に追記

9. 題材２：オンライン運動サポートサービス『Asuraku 』①
サイトURL
https://asuraku.herokuapp.com/
サイトの目的
このサイトをみた人に無料体験をしてもらうこと(無料体験のボタンを押してもらう)
アプリを使って、運動の基礎を学んだ後に、それぞれ好きな運動を始めてもらう
ターゲット
運動が苦手な初心者
狙う導線
web検索
悩んでいる・課題と感じているところ
全体的なデザインや必要な機能（初心者がモチベーションを維持しやすい工夫）について
UIデザインのモック図
https://docs.google.com/spreadsheets/d/11l5mAEigvSa0qB8faQiSZvjZLNU7pFFh1vXbTF_8XhQ/edit?usp=sharing
男女でUIのデザインを分けようと考えている
分ける理由は、男女でモチベーションが続くきっかけや好きなデザインが変わってくると思ったため。

10. 題材２：オンライン運動サポートサービス『Asuraku 』②
TOPページの構成
①ユーザーに呼びかけ：トップの写真にメッセージ
②アプリが提供するもの：サービス内容の概要
③ユーザーが体験できる：機能説明
④メッセージ：アプリを使うことでユーザーにどんなメリットがあるのか
デザイン（色、レイアウト、文字の大きさ）
色：初心者にとって落ち着く色としてスカイブルーをテーマにしました。
レイアウト：文字の大きさ：適度な大きさにしました。
工夫した所
メッセージはなるべくシンプルにして、イラストや画像を使うことで、視覚的にユーザーに訴える。
（とりあえず、登録してやってみようという気にさせたい）
こだわった所
トップ画面に使う言葉と写真（初心者の方が興味を持ってくれそうな感じに）
悩んだ末に決めたこと
体験できるコースを載せなかったこと。
理由としては、ユーザーのレベルに合わないコースの詳細を見せても、初心者にとっては逆効果（レベルが高すぎて、運動をする自信を無くしてしまうのではないかと考
えたからです）
迷っている点
アプリを使い続けることによるメリットを、ユーザーに対して示ているか？
マイページや別のUIの部分で、どのような機能（個別ユーザーのグラフなど）を追加すれば、ユーザーのモチベーションを維持する助けとなるか

11. 題材2：意見交換の結果①
TOPページ
勉強会後に追記
【追加しても良さそうな事】
・トップページでもっと自慢してもいいかも。アプリを触ってみた
ら、いいねいいねと気付きが合った。
・疲労具合に合わせて、運動コースが最適に選ばれる背景（た
くさん勉強している人が考えたなど）をトップページでみせてもい
い。
・狙う導線がWEB検索なのですが、サイト名はasurakuなのは楽
天の「あす楽」があるから不利になってしまう。
・サービス名の由来にちなんで、なんで日頃から運動すると楽
なのかっていう小話的なのあるとオリジナリティ出るかも（SEO
対策的にも良いかも）
・見出しのboldが統一されてる方が良いかも。
・カラーについて、ブルーがとても素敵だが、いろいろな種類の
ブルーが混在しているのでしぼってもいいかも
・初心者用ということを考慮して、フォントを「やさしめ」なフォント
にしてもいいかも（丸文字など）
【無料登録ボタン】
・無料登録のボタンと海の色のコントラストが弱いので砂浜の方
にボタンがある方がめだつ気がする（空とテキストも同じく）
・ボタンもっと大きくても良いかも
・下の方にボタンがないのであったら嬉しい！
・無料登録のボタンのborderとそれ以外のborderが同じデザイ
ンなので余計見分けづらさが出てるかも。
・無料登録のボタンを、もし下の方にも追加するとしたら、角丸
はボタンだけにしたほうが、「押せるもの」が視覚的にわかりや
すくなるかも。
【アイキャッチ】
・トップ画像の写真を男女出したほうが良いかも（男性が、女性
専用だとかんちがいしてしまうかも）
・この海辺でヨガしてる感じがかなり意識高い層を連想してしま
うので、もっと街中ジョギングくらいのイメージだと親しみやすい
・何もしていない自分とほんの少しだけ運動している自分の対
比を表現してもいいかも。（ちなみにライザップは一番上に、明
らかに体格の対比を出している。）

12. 【Asuraku機能】
・オンラインであるメリットを書いてもいいかも。例えば、運動メ
ニューが随時追加される、とか。
・このアプリを使って、実際に運動不足が解消された実績を表
示してもいいかも（ライザップ的な感じ）
・機能紹介の画面が丸い感じで、優しさを感じる
・角丸は統一感もって使うとよい。ボタンが多いページとかはク
リック部分との見分けがつきづらいので抑えるとかはあります。
・角を丸くするのであれば、枠の丸みと画面の丸みを同じ感じに
してもいいかも。
・画面と枠をくっつけちゃってもいいかも。padding:0のほうが今っ
ぽいデザインになりそう
・メニューの例と、このメニューをやることでどう変化が出るかが
書かれていると興味湧くかもです。
・レベルアップしたらどうなるかの説明があるといい
・猫出てきてるのでレベルアップしたら猫をあやせる道具とかも
らえたら猫好きは嬉しい…猫じゃらしのグレードがアップしていく
とか
・動物、も好きな動物選べるとか
【Before/After】
・最初に登録するメリットが見たいので上に持ってきてもいいか
も
・赤が一番下にあって目立ってしまっているので色を変えても良
いかも（一番目立たせたいのは無料登録ボタン）
・beforeをもっと暗めの配色、afterは明るめの配色と対比させる
とafterが魅力的に見えそう。
・Afterの先に仲間がいっぱいいそうな感じがしていいが一番上
の画像は１人で瞑想。テイストをあわせても良いかも。
・beforeは成人からスタートなのにafterが赤ちゃんからスタート
なので合わせる方が比較対象物という意味では良いかなと思
います。
題材2：意見交換の結果②
TOPページ
勉強会後に追記

13. ・無料登録するときに、登録後にアンケートを書いたほう
が、登録の手間が減って良いのでは（登録しやすくなる
のでは）
・アンケート先の登録あとが個人的には良い気がしてま
す。（ユーザーは軽いコストを続けると最後まで続けやす
い）
・アンケートは保険計のサイトで良くあるような紙芝居形
式とかだと進めやすいですね。で最後にメールアドレス
入れるっていう。
・トップページに「最近運動した？」みたいなボタンを用意
してあげて問いかけてあげてもいいかも。
・「登録」ボタンも「最近運動した？」ボタンも両方トップ
ページにのせちゃっても
題材2：意見交換の結果③ 無料登録フォーム
勉強会後に追記
・一番手間がかかるメールアドレスの入力を最後にもっ
ていくのはどうか？
・英語の表記がかっこいいけど、日本語のほうがわかりやすい
かも（Coformationとか）

14. ・excelに書いてある初回登録、登録後のフローを表面にあると
登録してからのイメージがわきやすい題材2：意見交換の結果④
勉強会後に追記
【その他出た意見】
・最適化メニュー提供機能について、どうやって最適化させてい
るのか？（例えば、大量のデータを元にAIで判断する、など）を
表示してあげたら、おおすごい！とおもって登録しやすくなるか
も。
・「ユーザーのレベルに合わないコースの詳細を見せても初心
者にとっては逆効果」のところは段階的な例だったら懸念してい
るところを解消できるかも
・運動メニュー選択後の「若干、おつかれの模様ですね。頑張る
のもよいですが、身体をいたわることも大切ですよ。」というメッ
セージがやさしくていい
・運動後のフィードバック機能があると、初心者としては嬉しい
かも
・学びになる内容を例として見せることで興味が湧きやすくなる
かも
・女性用と男性用でデザインが変わることを、機能のウリとして
紹介してもいいかも

15. まとめ
やさしく意見交換できたかな？

16. まとめ
勉強会後に追記
●優しく意見交換できたか？
できたと思います！、みなさん優しい！、楽しかったです！、色んな方々からアドバイスをもらえて、とても参考にな
りました
●改善したほうがいいところあれば募集
今日の意見を反映させたverのデザインって後日上がったりしますか？？
▶daisukeが題材者に確認したところアップしていただけるとのこと！
それぞれ12月中か、11月中あたりにアップできる予定とのことです★
●音声での会話はためらっちゃいます？
声出す方が少ないと、声出しで参加しずらいなと思います
声とかはすごくお二人とも聴きやすかったです。
今回は初めての参加だったので、タイピング中心でしたが、次回は音声で参加したいと思います！

17. まとめ
勉強会後に追記
●後日談
こんなに優しい勉強会になるならば、匿名でなくても良かったかもしれないです！
そうしたら、サービスやサイトの説明を直接できましたし