『櫻井稔さん（デザインエンジニア）卓話「人工知能とビッグデータとデザイン」』に行ってきました

『櫻井稔さん（デザインエンジニア）卓話「人工知能とビッグデータとデザイン」』に行ってきました

東京代官山ロータリークラブで開催された「人工知能とビッグデータとデザイン」のイベントに行ってきました。 https://peatix.com/event/350394 タイトル通り、Takramの櫻井稔さんがゲストです。

とても勉強になるお話だったので、社内共有の意味を含めて色んな気づきを書いておきます。
人工知能・ビッグデータについて素人なので、意訳も入ってしまっています。あしからず。

登壇者　櫻井稔さんについて
「日本科学未来館・地球マテリアルブック」、データサイエンス支援ツール「DataDiver」のUI設計・デザイン、日本政府のビッグデータビジュアライゼーションシステム「RESAS -地域経済分析システム-」のプロトタイピングなどを作られているTakramのデザインエンジニア。 2007年未踏ソフトウェア創造事業スーパークリエータ認定、東京芸術大学客員講師など様々な肩書を持っておられます。

ビッグデータは何の役に立っているのか？

世はビッグデータビッグデータ言ってますが、正直何が凄いのかピンときてなかったです。
Amazonのレコメンドとかに使われているらしいですが、正直へぇって感じでした。
そんな疑問を持って聞いていたのですが、今回の卓話で「なるほど」となりました。

そもそもビッグデータは「一般的なデータ管理・処理ソフトウエアで扱うことが困難なほど巨大で複雑」なデータだそうです。 人間の認知限界はおろか、一般的なコンピュータでも解析が難しいほどのデータ。
そこで出てくるのが、ビッグデータの可視化です。
あまりに大きいので、ビッグデータを使うにはある特定の部分に絞る必要があります。
その“あたり”をつけるべく、全体を俯瞰するための可視化というのが重要になるのだそうです。
可視化することで、データの中のこの辺りに分析するべき情報があるのではないか、と特定するという感じ。
櫻井さんがプロトタイプを作成したというRESASというシステムがまさにそれで、帝国データバンクのデータを元に様々な情報の可視化しています。
https://ja.takram.com/projects/resas-prototype/

人工知能の核心とは？

その話の流れで、人工知能の何が凄いのかというお話。
“あたり”を付けるもう一つの手段が人工知能。
人工知能を使ってビッグデータから傾向／特長を引き出せるようになったのは、もうそりゃ、事件だったそうです。

羽生善治さんの「人工知能の核心」という本を引用して、人工知能が特長を引き出す凄さ、ついてもわかりやすく説明されてました。
人間が将棋を打つ時、
１．将棋の指し手の可能性を網羅する（80前後あるそうです、、）
２．大体このへんだろうと絞る
３．大局を考えながら指し手を選ぶ
のに3ステップあるそうです。
人工知能が得意なのは、２の部分。
ビッグデータから傾向と特長と引き出し、大体このへんだろうというのを割り出すことができます。
ここで面白いのが、人間が２について考える時、そこには「安全・安心」という感覚が強く働くということ。
人工知能は「怖いものなし」なので、人間が考えつかない「この辺」を見つけ出せるんですね。

ブランコの乗り方を人工知能で解析した実験についての面白い話も出てました（他の列席者が話されてたお話）。
人工知能がブランコの漕ぎ方を学んでいくと、皆がやっているようなブランコの効率的な漕ぎ方を覚えます。
そこからさらに学びを進めると、ブランコが前に振り切った時に更に膝を振るともっと強く漕げるというのを発見したそうで。
今まで誰も思いつかなかった漕ぎ方。
人間はそんな漕ぎ方をするのは怖いので、その可能性すら考えられなかったということです。
恐怖や安心という人間の認知バイアスを超えて“考える”ことができるというのが、人工知能の核心であるようです。

人工知能とデザイン

「人工知能×コンシェルジュ」をテーマに、人工知能に何ができないのかを知るため、実際のコンシェルジュの方にインタビューをしたことがあるそうです。
そこでわかったのが、人工知能にには複雑なコンテクストを理解できないということ。
実際のコンシェルジュの方は、人生という膨大なコンテクストの中で、相手のコンテクストを理解してサービスします。
そんなコンテクストは人工知能には理解できません。

もう一つ人工知能が苦手なのが、なぜその解に至ったのか説明することだそうです。
どれだけ正解の確立が高くても、「なんで？」に答えてもらえなければ重要な判断を任せるのは怖いですよね。
例えば、車のナビに人工知能が付いたとして、二股の道に差し掛かったら「真ん中を進め」と言われたとして、真ん中に進むのか？
たぶん信用しないですよね。
でも、その二股の道の両方とも崖につながっているから真ん中の木に突っ込むほうが助かる、ということかもしれない。
人工知能は“なぜ？”を説明しないし、だから信頼もしにくい。

とは言え、人は人工知能と関わって行かざるを得ないわけです。
そこにこそ、デザインが必要なんじゃないのか。
人とビッグデータ・人工知能が繋がるための“信頼”を作るところに、人工知能・ビッグデータのデザインがあるんじゃないでしょうか。

卓話がまるで物語の様につながっていて盛り上がって、とても勉強になるイベントでした。
人工知能のデザインというと「Alexaの性格作るとか？」って考えてましたが、全然もっと深い。
プロダクトデザイン、グラフィックデザイン、UXデザインなど今では様々なデザインがありますが、新しく加わった「人工知能デザイン」、凄く面白そうです。

CircleCI+Hugo+S3でサイトデプロイをしてみたらハマった。。

ゴーリストデザイン部のミツイです。 １月ももうすぐ終わりですね。 もう１年の１／１２。。早いっ。

え〜、最近BTC（ビジネス、テクノロジー、クリエイティブ）型人材モデル¹と言うものを知り、ビジネス×クリエイティブ、テクノロジー×クリエイティブというのを意識しています。² ということで、新年一発目の今回は、いつもと趣向を変えてテクノロジー的なことを。

Hugo × circleCI × S3

このフロー自体目新しいものではないので、ハマった部分についてだけ書こうと思います。

ゴーリストデザインチームではHugoを使って静的サイトの生成を行っています。 目的としてはヘッダー・フッターなどの共通部品をテンプレート化してメンテナンスを楽にすること。 リンクのチェック、修正などがかなり効率化されます。

では、早速手順を追っていきましょう。

１．まずは、Hugoのテーマファイルを作成してコンパイルします。

その辺の作業は、こちらの記事が詳しいです。

【Hugo】ゴリラでも分かる静的サイトジェネレーターHugoでオリジナルテーマ作り https://blog.mismithportfolio.com/web/20160207hugomyblog

２．そしてそれをGithubにアップ。

Hugoファイルごと、まるっとあげます。 Gitが分からない人はこの辺で勉強しましょう。

git入門 (全22回) - プログラミングならドットインストール https://dotinstall.com/lessons/basic_git

３．ここでCircleCIの登場

CircleCIは、GithubやBitBucketへpushするとゴニョゴニョしてくれるCIサービスです。 ※CIとは、開発の現場ではビルドやテストを自動化して継続的に実行していく「継続的インテグレーション」だそうです。 要するに、、ゴニョゴニョしてくれるってことです。

CircleCI https://circleci.com/

、、と、ここからすでにハマりました。 ゴーリストではGithubのorganizationアカウントにGitレポジトリを作成しているのですが、CircleCIをThird-party applicationで許可しなければなりません。

３−１．CircleCIのヘッダー左にあるSWITCH ORGANIZATIONから該当するorganizationアカウントに移動

SettingsのProjectsのあたりから、GithubへThird-party applicationへ加えてもらうよう申請します。 （設定後だと、その画面が見れないので詳細わからずすいません。。）

３−２．Githubのヘッダー右にあるユーザーアイコンから

Settings＞Organization settings＞Third-party access Third-party application access policyを許可します。

はい。これで一つハマりポイントを通過です。ふ〜。

４．CircleCIでHugoをコンパイルしてくれるように設定します。

４−１．CircleCIのProjectsからAdd Project。

今回はLinuxベースで作成してます。

４−２．で、Gitで管理しているファイルに.circleciというフォルダを追加し、中にconfig.ymlを作成。

このconfig.ymlを設定していつも通りpushすれば、CircleCIがゴニョゴニョを初めます。 すごい便利ですね。 CircleCIは割と最近アップデートしたそうなので、新しい記法で中身を書きましょう。 以下を参考にしました。

CircleCI2.0事始め -新しいcircle.ymlとworkflows編- #circleci https://blog.stormcat.io/post/entry/circleci2.0-overview01/

CircleCI 2.0を使うようにするだけで、こんなに速くなるとは夢にも思わなかった！ http://blog.otakumode.com/2017/06/09/cicle_ci_2/

この辺を読めば、Hugoでコンパイルするまではいけるはず。 と言うか、HugoのGithubに、CircleCIのconfigが既にあったりもします。 https://github.com/gohugoio/hugo

５．CircleCIからS３にアップできるようにAWSのIAMなど設定

CircleCI用にユーザを作成し、ポリシーを設定します。 参考は以下。

CircleCIからS3にアップロードするための設定 https://qiita.com/tjinjin/items/c03e39cd46b222d0b3a3

６．さあ、準備は整った

CircleCIとGithubの連係はしましたか？ config.ymlの設定は終わりましたか？ AWSのIAMは設定しましたか？ では、pushしましょう。

エラー。。

長くなってきたので、以下、どんな対策が必要かだけ書いておきます。

！注意　machine: trueだとGO(GO言語)のバージョンが古いため、hugoがインストールできない。awscliは使える。 ！注意　docker:　image: felicianotech/docker-hugo:0.21だと、awscliが使えない（みたい） ！注意　良さ気なdockerを探したけど、見つからず。CircleCIのドキュメントには、「ないなら、作ればいいじゃない」と書いてある（意訳） https://circleci.com/docs/2.0/custom-images/

Dockerを学ぶしかないか、と諦めかけていてふと思う。 「前出の記事たちはなぜうまく行っていたのか？　CircleCIのバージョンが新しくなってるから失敗しているんじゃないか？」 試してみました、古いやつ。 今まで image: circleci/classic:latest を使ってましたが、 image: circleci/classic:201708-01 に変えます。 と、 前出の記事通りのやり方で通りました！ 実際に使ったconfig.ymlはこんな感じ

version: 2
jobs:
build:
working_directory: ~/project
machine:
image: circleci/classic:201708-01
steps:
- checkout
- run:
name: install hugo
command: go get -v github.com/gohugoio/hugo
- run:
name: build hugo
command: hugo
- save_cache:
key: site-{{ epoch }}
paths:
- ~/project/public

deploy:
working_directory: ~/project
machine: true
steps:
- restore_cache:
keys:
- site
- run:
name: deploy hugo
command: aws s3 sync public s3://バケット名/

workflows:
version: 2
build_and_deploy:
jobs:
- build
- deploy:
requires:
- build
filters:
branches:
only: master

いやー、デザインする時間が削られました。 あと、精神も。 テクノロジー×クリエイティブ、一朝一夕ではないですね。 ざっくり過ぎる記事ですが、以上で終わりです。 ではまた。

「ビジネス」「テクノロジー」「デザイン」の三要素の結合からイノベーションが生まれる https://industry-co-creation.com/icc-salon/74

もしくは、Takramさんのポッドキャスト。めちゃめちゃ為になります。

Takram Cast By Takram https://itunes.apple.com/jp/podcast/takram-cast/id1161310459?mt=2

---

1. BTCについてはこちらが詳しいです。↩

2. アイキャッチはBTC違いですね。分かりにくいボケで申し訳ない。↩

Sketchのカラーモードを編集する

明けましておめでとうございます。ナガタ改めレタスです。

2018年が始まり、ゴーリストでは先日メンバー全員で神田明神に行ってきました。神社へのお詣りは身が引き締まりますね〜。

Sketchで疑問だったこと

最近は自社HPのリニューアルを担当しているため、Sketchでもりもりモック画像を作っています。

そんな作業をしている最中で気になっていたことが一つ。

新卒採用ページを作っていた時にも「あれ？」と思っていた(思っていながら放置してた)ことが一つ...。

その謎が最近解消しました！

モックを作っていてずっと疑問だったこと、それは

「Sketch上での発色とブラウザでの発色、なんか違くない？」

ということでした。

前回新卒採用サイトを制作した際、スケッチで選択した色をそのままコード指定してCSSを書いているのに、なぜかブラウザで確認すると色がくすんで見えることがありました。

具体的にはコチラです。↓

例えば、同じカラー(#E70B0A)をSketchとAdobe Color CCの画面で表示して並べて見るとこうなります。

左：ブラウザ(Chrome)　右：Sketch

なんか全然別の色！

さらに言えばブラウザだけじゃなくてイラストレーターにオブジェクトを置いたときにも同様な現象が起こる。

左：illustrator　右：Sketch

ぬん...

画像作成するツールで、ユーザー数も多いのにこんな根本的な不具合あるわけないしな？なんじゃこりゃ、と首をかしげていました。

カラープロファイルを変更するという概念

上記の退色について先輩に聞いてみました。

（デザイン部では毎日15分ほど朝会の時間をとっていて、雑談レベルで簡単な相談や日々の情報共有などをしています）

するとミツイさんがこちらのページを見つけてきてくれました。

Sketch - Color Management

ざっくり必要な部分を要約すると、

• Sketchには2つのカラープロファイル(sRGBとDisplay P3)があって、デフォルトでは「Unmanaged」カラープロファイルが指定されている
• 「Unmanaged」カラープロファイルは、使用しているシステムのデフォルト・カラープロファイルに依る
• 「sRGB」よりも広範囲で色彩が表せるのが「Display P3」で、P3のカラープロファイルをサポートしているデバイスでの表示に重きを置いていたり、写真やビデオが中心になるプロジェクトであれば「Display P3」の方が適している
• Sketch上で見える色を最終的な制作物と一致させる必要があるのなら、「sRGB」カラープロファイルを選択（Webやいろんなデバイスで表示させるものや複数人で作業する場合は色の差が小さくなるのでこちらを選択する）

うわ〜〜なるほどでした。

今までWeb関係のものよりも紙に印刷するものの方が多かったので、カラーモードの切り替えって物理的に印刷(CMYK) or PCやモバイル画面で表示(RGB)、くらいしか考えたことありませんでした。

言われてみれば超単純だけど全然頭になかった...。

カラープロファイルをsRGBに

気を取り直して適切なカラープロファイルを設定します。

File > Change Color Profile を選択

こちらがデフォルト状態です

プロジェクトに適したカラープロファイルを選択

並べてみるとブラウザの表示にだいぶ近くなったのがわかります。 

カラープロファイルをsRGBに設定したもの

左：ブラウザ(Chrome)　右：Sketch

カラープロファイルがUnmanegedのままのもの。上より若干鮮やかでブラウザでの表示と差があります。

左：ブラウザ(Chrome)　右：Sketch

いやはや、解決してよかったです。

スクショだと微妙な差かもしれませんが、画面だと大きな違いでした。

そして疑問を放置せずにggr力をつけようと思います。(まずそこ)

Sketchマスターへの道は遠い...地道に進みます。

いまさらだけどSketchはいいぞをエンジニアに共有してみた

こんにちは。シミズです。

今月のHRogのFacebookカバーは12月Ver.とクリスマスVer.作りました。
クリスマス仕様は完全に趣味且つ勢いだけで作ってしまいました。

www.facebook.com

……もうちょっと凝りたかった…

さて、ふろぐんトークはここまでにして今回は

Sketchはいいぞ

をエンジニアに伝えるための共有会第2弾（ワークショップをしてみたの回）の様子をお伝えしたいと思います。
第1段の様子は以下をご覧ください。

developers.goalist.co.jp

ちなみに第1弾はエンジニアのブログだったのに第2弾は何故こちらなのかというと…

次回

次回は実際に手を動かすワークショップを開催します。
ひっそりと姿を消した社内プロジェクトの画面を作成します。
次回はきっとデザインブログで更新されるので(圧)
そちらもチェックしてみてください。

…
………

次回はきっとデザインブログで更新されるので(圧)

  （圧）
＼(^o^)／

ということで怖い怖いブログ番長より圧をかけられてしまったのでしっかりこちらでお伝えしていきます。

やったこと

今後どうやって社内で活用していくかを話しながら、ひっそり姿を消してしまった社内プロジェクトを例に色々といじりながらワークショップを行いました。

と、言っても今回はそこまで時間が取れなかったので、この2画面をSketchで作ってみます。

手順

まずはアートボードを選択します。
そうするとテンプレートが表示されるので、使いたいテンプレートを選択します。
今回はiOSアプリなのでApple DevicesからiPhone 8を選択します。

ちなみにですが、Android用やWebのテンプレもあるので、かなり便利です。
もちろん任意のサイズでも作れますし、Customのテンプレートとして登録して使いまわすこともできます。

ということで、アートボードが表示されました。

ステータスバーを置きます。
iOS UI DesignというiOSパーツのテンプレート素材が入っているので、それを活用していきます。

続いてアイコンを置いていきます。

ちなみにアイコンに関しては、最近Sketchプラグインのicon fontとアイコンパックのfont-bundlesを使ってmaterial（マテリアルデザイン用のアイコン）を多用しています。

使い方は…

これをこうして…

さらにこれをこうして…

…どん！

この状態だとフォント扱いなので、shift+⌘+Oでアウトライン化します。

 詳細な使い方は以下の記事などご参考にしていただければと…。

qiita.com

ちなみにアイコンなどのオブジェクトの配置にはイラレの整列のように、複数のオブジェクトを垂直・水平に指定した間隔で揃えてくれるプラグインSketchDistributorなどを使って調整しています。

配置も整い、トップ画面のラフが出来上がりました。

同様な感じで2画面目も作成します。

はい。完成です。

遷移についても見たいのでプロトタイプを作ってみます。
プラグインのCraftを使ってInVision上で見られるように設定していきます。

オブジェクトもしくはレイヤーを選択して、Cをクリックすると青い線がニョキッと出てきます。
それを遷移先まで引っ張ると…

こんな感じで挙動を選択できます。

設定した遷移は青い矢印で表示されます。

遷移の設定が完了したら、右側のCraftのメニューバーからinVision上へ同期します。

…

……

………

チン！（本当にベルみたいな音がなりますw）

はい！反映されました。

うっすら青くなっているところが先ほどリンク設定した領域で、クリックすると画面が実際に遷移します。

他にも

InVision上でも遷移を設定したり、

メモやストーリーポイント、コメントをつけたり、

要素やコードを確認したりできます。

ここまで来て遷移図とかもできたらいいのにという話題が出て来たのですが遷移図の書き出しはCraftもInVisionも難しそうだったので、プラグインを探してみると…

ありました！

UserFlows

オブジェクトとアートボードを矢印で繋げ画面遷移図を作れて、遷移を表す矢印の挿入・削除・アップデートや条件分岐アートボードの追加、作成した遷移図全体を書き出せるようにまとめる機能などがあります。

詳しい使い方は公式のwebページの動画がとてもわかりやすいので、こちらを参考にしていただければ…と。

abynim.github.io

果たしてSketchはいいぞは伝わったのか…

当日の日報↓

しっかりとエンジニア陣にもSketchはいいぞが伝わりました。

サクサク動いてここまでできるSketchは本当に良いです。
でもこれだけいいぞいいぞと言いながら、実はXDもInVision Studioも気になっています。。(*´Д｀*)
とりあえずXDにも手を出してみながら、より良いツールを開拓していければなぁと思います。

最後に …

年内のゴーリストデザインブログは最後になります！（きっと）
今年の2月から始めてポツポツと更新して来た当ブログ。
来年はふろぐん日記だけでなく、もう少しTips的な記事も発信していければいいなぁと思います。

おまけ

今回使ったプラグイン等々一覧です。

icon font：
アイコンフォントを使うためのプラグイン

font-bundles：
インストールすることでicon fontが使えるようになるアイコンパック

SketchDistributor：
複数オブジェクトを水平・垂直に任意の幅で揃えるプラグイン

Craft：
InVisionへ連携するためのプラグイン
他にもダミーの文字列や画像を挿入できたり、複製作業もできるプラグインです。

InVision：
アプリやホームページのプロトタイピングを複数人で効率的に作成することができるWebサービス

UserFlows：
画面遷移図を作って書き出すことができるプラグイン

ではでは良いお年を

HRogマップVer.1.3.1のUI担当しました

お久しぶりです、ナガタです。

寒さが身にしみますね〜。ずっときてるコートが毛玉だらけなのが最近の悩みです。 

さて、今回は今月(2017/12/13)アップデートしました、自社サービスに関連したお仕事について書こうと思います！

開発部の紅一点ことイイオさんが開発しているプロダクト「HRogマップ」のバージョン1.3.0に伴い、そのUI担当を仰せつかりました〜。10月まではデザイン部だけで完結してた仕事が多かったですが、初めて開発部とタッグを組む業務でした。

UI変更具体的に何やったの？の前にちょっとだけ、「HRogマップとはなんぞ？」という方に向けてざっくり説明します。

例えば、求人広告代理店の担当者の方が「このエリアの求人の相場を知りたい」と思った時に、「調べたい場所(例：渋谷駅)」と「調べたい距離(例：3km)」を入力すると、その範囲内で求人を出している店舗の時給がGooglemap上に表示されるというWebサービスです。

 簡単に利用ステップをご紹介します。(以下はアップデート前までの既存の画面です)

ログインして、左上のボックスに探したい場所を入力します。（デフォルトではプレースホルダーに「新宿駅」と書いてあります）

職種や雇用区分(例：アルバイト)、媒体別などのオプションなどから条件を追加することもできます。条件を選択し終わったら検索ボタンをポチッと押します。

(図ではもう検索結果でちゃってますが、検索前でも後でも条件を追加できます。)

地図上に時給のマーカー、そして検索結果一覧が出てきました！

使い方が、シンプルでわかりやすい！(重要)

ざっくりとですが、こんな感じです。現在3社でご使用いただいています。

HRogマップに関して記事書きまっせ

愉快に協働しております。オッホッホ！

さて、アップデート前のキャプチャ取る方法も教えてもらったところで、githubで1.3.0以前のブランチに切り替え...Beforeのキャプチャを撮り撮り...

今回の担当では機能追加で5箇所、既存のデザインに調整を加えた点が5箇所あります。その2項目に分けてご紹介したいと思います！（前提としてですが、今回は追加機能に関してすでに決まっているところからのジョインでした。）

機能追加に伴うUIの追加箇所

機能追加により加わった5箇所はこちらです！

①検索結果のソート機能を追加

ユーザーメリット：

これまでは何順で並んでるのかもアプリ上だけではわかりませんでしたが、検索結果を指定地点から近い順、時給低い順、時給高い順に並べかえることができるようになりました。最低値、最高値の求人案件にアクセスしやすくなりました。 

それに対応して3つの項目が選べるドロップダウンを追加。その隣の件数の表記もスペース調整のため変更しました。

After

②ページング機能を追加

ユーザーメリット：

今までは最高でも検索結果が300件までと、表示できる制限がありましたが、ページ送りすることで全結果を参照できるようになりました。それに伴い、ページングを追加しました。

1ページで検索結果が最大300件まで並んでいたので、結果一覧スペースのスクロールの長さも緩和されたはず。

After

③検索フィルタ条件に「企業名フリーワード」を追加

ユーザーメリット：

特定の企業の求人案件のみ表示できるようになりました。 例えば、「新宿駅周辺のセブンイレブン」と「新宿駅周辺のファミリーマート」で案件傾向を比べたりすることができます。

 これまでは条件の指定欄が「雇用区分」と「媒体」にわかれていましたが、今回それらを「詳細条件」に統合し、そちらのドロップダウン内に企業名検索用のテキスト入力エリアを追加しました。

After

④「曖昧データの表示/非表示」を追加　※曖昧データ＝勤務地住所が市区町村までしかとれていないデータ

ユーザーメリット：

これまでは勤務地住所が地番まで埋まっている案件しか表示していませんでした。これからはデータ精度を選べるようになりました。 （地方や派遣の案件だと勤務地住所がしっかり埋まっていない場合も多いので ノイズのリスク負ってでも表示したい場合がある）

データ表示/非表示切り替えを選択するためのスイッチを「詳細条件」のドロップダウン内に追加。新機能に対しての補足説明テキストも追加しています。

After

⑤地図上のマーカーを媒体別に色分け表示

ユーザーメリット：

地図を見て「バイトル」「マイナビバイト」「タウンワーク」など、どの媒体の案件が多いのか直感的に把握できるようになりました。今まで赤で統一されていたマーカーの色を、各媒体のロゴに近い色(赤・水色・黄色)に変更。右の検索結果リストもマーカーとリンクしやすいように、色つきの丸で関連づけています。

After

既存のデザイン調整！

ドンドコ行きましょう！デザインを新たに調整した5箇所はこちらです！

①お気に入り登録ボタン

「お気に入り」と「お気に入り保存」、区別が少し曖昧だったので、「保存した条件」と「この条件を保存」にし、既に保存したものとこれから保存するものとの意味の差をつけました。

また、お気に入りボタンをクリックすると、検索条件全体に薄い緑色の枠でフワッと囲われる仕様になりました。どの範囲が「保存」されるのか、直感的にわかりやすく。

そしてここで新たな事実も発覚しました。実はこのお気に入り保存ボタン、これまであまりお客さまに使われていなかったらしい...。(同じ条件での検索回数が多いなら入力時間短縮になるはず...なのですが。)　本来であればこちら、使われる頻度が低い理由を考えて改善するか、そもそも不必要であるのかを検討すべき項目です。UX領域の課題ですね、、、今回はそこまで取り組めなかったのが無念です...。が、しかし、実際にユーザーの声を聞くなどして次回是非改善していきたいところです！

 After

②平均時給の表示部分を変更

HRogマップはiPadで使用されるケースもあります。その際に平均時給の数値部分がタップする仕様に見える、との声がありました。確かに...見ようによってはボタンみたいで押せそうな気がしなくもない...。枠の角丸をとり、誤解を招いていた点を解消しました。

 After

③求人結果の文字色を変更

今回の開発にあたり、セールスチームのミーティングにも参加していたのですが、ユーザーとって画面上で一番重要な情報は「平均時給の表示部分」であるそうです。えっ、求人結果一覧がだいぶ面積占めてるけど、重要度は低めなんですね...。結果一覧に目を引かせる理由はとりだてて...無かったんですね。やはり一番ユーザーの目線を知る人に話を聞くと違うな〜と勉強になりました。

テーマカラーの緑は、機能的に重要な意味を持つ、もしくは関連するポイントにだけ絞り込んでいきたかったので、文字を地味にしても支障はないと考えました。色を紺に統一して、ホバー時のみ緑色にしました。

 After

④求人詳細の表示位置変更

任意のマーカー、あるいは検索結果を一つ選択すると詳細情報を開くことができるのですが、今まではそれが地図上に表示されていたので、Googlemapが大部分隠れてしまっていました。

その点を改善し、詳細情報が検索結果一覧と入れ替わりで現れる仕様に。文章も、背景色を交互に加えるなどして読みやすくなりました。

After

⑤Googleマップの色味の変更

マーカーの色を媒体別にしたは良いものの、にぎやかお祭り状態な印象になってしまいました。また、黄色のマーカーが周囲の色に埋もれてしてしまったために、Googlemapの色味を抑えて視認性を確保！グレー系や寒色系だと画面がクールになりすぎる...などと数パターン試して、現在のやわらかなテイストに決定しました。

全体的なビフォーアフター

こうして並べるとこれまでが結構ポップな印象でしたね。だいぶスッキリしたんじゃないかと思います。

Before

After

 マップの使いやすさに一役買っていると良いな...！

HRogシリーズのUI改善、どんどん進めていきたいものです。 

デザイン部ではUXに関する勉強も今後進めていきたいと思っているので、ユーザーテストなどのフローも機会があれば取り入れてみたいです。

新たな取り組みへの着手、来期の目標です！

最後にちらっとリンクを貼っておきます。

map.hrog.net

もう少しであっという間に今年も終わってしまいますね。

みなさま、良いお年を...!

限定ふろぐん ふえました

ご無沙汰しております。

サイレントどころかもはやステルス状態だったシミズです。

以前ご紹介した1日限定のふろぐんも良い感じに溜まってきたので、

ばばっとご紹介したいと思います。

（決して時間稼ぎではありませんヨ）

ふろぐんとは、

design.goalist.co.jp

こちらの記事にも書いたとおり、 

一応…

• カエル
• ♂
• ゴーリストの新人広報担当

という設定です。

広報担当としてますます活躍してもらうべく、様々な記念日に合わせてシミズの気分で出たり出なかったりする1日限定のふろぐん。

今回は8月〜11月までの限定ふろぐんを集めてみました。（〜7月まではこちら）

山の日

十五夜

敬老の日

体育の日

ハロウィン
HRog ver.

ハロウィン
twitter ver.

ハロウィン
Facebook ver.

ポ○キーの日

こうやって並べてみると敬老の日の雑さが…
なぜか元データすら残っていませんでしたw←

山の日、敬老の日Ver.は気まぐれで微笑ませてみたところ、別カエル感が否めない気もします…

…が、いつまでも仏頂面なのもワンパターンになってしまう寂しいので、

最近の着せ替えブームと合わせて表情のバリエーションも今後は増やしていきたいと思います(｀・ω・´)

12月も色々イベントがあるので、ちょいちょい遊ぶ予定です。

シェアハピもやらかした感満載ですが、今後もこういうカレンダーに乗らない記念日も積極的にやっていければいいなぁと。

〇〇の日はよろしければHRogのtwitter やFacebookのぞいてみてください(о´∀`о)

もちろんそれ以外の日も(*´∀｀)

最後に大事なことなのでふろぐんの設定をもう一度…

・カエル

・♂

・ゴーリストの新人広報担当

…

・ゴーリストの新人広報担当

……

ゴーリストの新人広報担当

 …。

( ˙-˙ )

〜おまけ〜

ハロウィンだけ3パターンあるのはFacebookカバー用におもむろにふろぐん量産してしまったので、せっかくだからと媒体によって分けてみました。

と、いうことで

アイコンにはならなかった、ハロウィン仕様のふろぐんです。

カエルっぽい骨にする余裕はありませんでした(´・ω・`)

サービス紹介の資料を作ってみた A4フライヤー編その2

レタスデザイナーの資料作成・A4フライヤー編その2になります！後半戦もブイブイ行きます！

色面を作ってメリハリ

前回までは掲載情報の整理と、その重要度に沿った文字サイズの調整をしました。

その工程で、画面のあらかたの構成は完了しましたね。

前回までのものがこちらです。

文字は少し読みやすくなりました。でも、読む分には問題ないけどなんだか味気ない気がする…アイコンを入れてはいるけどなんだか文字が多い印象が拭えない…。
「何か直したいんだけど、それがどこなんだろ」、今度は色のブロックを入れることでどうにか工夫してみたいと思います。

色のブロックとはなんぞ？笑　ネーミングセンスはさておき、色面を使って目を引くポイントをいれてみたいと思います。
こいつを一度取り入れてみると、アクセントになったり、グルーピングが強調されたりと、結構便利なやつです。（もちろんくどいのはいけません）
文字を読むのに邪魔しない程度の、め～～っちゃ薄い、淡い色でまずは四角か丸を作ってみましょう！
まずは四角か丸です。星とかハートとか音符とか、主張の激しい奴らに手を伸ばすのはやめておきましょう。

ポンポポポンと置いてみるとちょっと画面が楽しくなりました。

こちらも先ほどと同様に、「情報の重要度」に沿って置いてみたら良いと思います。

日付は大事だから丸で囲って目立つようにしてみよう、とか。
全体の文字量が多くてこまごましてるので、タイトルに背景色つけた方が見やすいかもな、とか(ラフでは線を引いて画面を分割していましたが)。

試行錯誤で調整してみてください！

＋α 色決めへの抵抗

色を使うってほんと難しいですよね。原色だと強すぎるし、適当に選ぶとまとまらないし。明度・彩度・色相は聞いた事あるけどそれをマスターするのは手間がかかりすぎる。ペライチの資料ごときにそんな時間もかけていられない(資料作成の頻度が高い人の悩みはコレなのでは)。
…そんなときは！
「あんまり悩まずテーマカラーのちょ～～～淡い薄い色を選択する」でいかがでしょう。
例えば、今回のフライヤーではロゴの紺色を超～～～淡く(明度を高く)した色を用意して、画面をまとめました。幸いロゴのブルーが冷静さや信頼感を連想させるので、ソリューションのイメージからも外れていないと思います。
ブルーの印象がずれない程度のサブの色(水色)も決めちゃいます。

先ほどの状態。モノクロ状態で作るメリットは見えやすさの確認がしやすいことです。

ブルーに統一(ごめんなさい、モノクロ状態から明度を反転させた部分もあります)

ちょこちょこ修正

いったん組み上げたものを見せて、伝達内容やイメージがずれていないか確認します。
(時間がない前提でやっているのでこの行程は余裕があればで良いと思います。)
Hさん、どうですかね～？

「おっ、イイじゃん！ありがと～！！でもサービスのステップの部分の見せ方、全部ひっくるめてできるのがうちの特徴だからぐるっと一体感がほしいかな…繋がってる感が伝わる方がいいんだよね～」
「ぐるっと？それって円のイメージですか？最初から最後まで全部繋がるような…？」
「でも、また同じステップに戻るというわけではないから、サービスの中に4段階があってゴールに向かう感じかな」
「右向きの横矢印があって、ステップが順に並ぶっていうのはどうでしょう？」
「いいね～もっと言うと全体が斜め上に向かう感じかな！(^o^)b」
「斜め上…(^o^)b」

と、確認を経てより伝えたいイメージに近づくよう、修正をいれていきます。
最初からこういった修正も含めて作成するつもりであれば、ほんとはラフの段階で確認しておくのが正解です…。
画面のスペースとの兼ね合いもあるので、様子をみつつ配置などを工夫できないか動かしてみます。

先ほどまでがこちら。

修正・細かい要素追加後がこちら。Hさんこだわりの「I ♡ HR」もいれておきました。

一直線の矢印が画面を横断するのもなんか強烈すぎるなあ、と思ったので、代わりにステップを示す数字やアイコン付近に丸と矢印を新しく追加しました。

 
この追加要素についても先ほどの「重要度」軸でバランスをとりました。
これらの追加要素は、配置の修正に伴うものでしかありません。そこまで重要な意味は持っていないので、実際のところサービス内容自体にはあまり影響しません。

なので存在感が強くすぎないよう淡い色にし、数字に関しては単独で読まれる必要も無いので、図形として扱う感覚で円に重ねてしまいました。

 
…という諸々の段取りを経て、A4資料のお化粧が完了しました。ポーン！

おわり

レイアウトって、特別に身構えたり凝ったりしなくてもよくて、要は情報を伝えやすくするための画面上の機能だと思います。
この記事が誰か一人のお役に立てたなら本望です…。
全ての方へ優しく快適な資料作成ライフを！(そしてデザイナーへの工数削減を！)