Goalist Design Blog

ゴーリストのウェブサイトをリニューアルしました#2  ーゴーリストののれん編ー

こんにちは、レタスです。

最近陽が差すとぽかぽかですね。春の兆しですね。(喜び半面、花粉症で泣いてますが)

 

前回はゴーリストのウェブサイトをリニューアルするにあたって、
何もないところからメンバーと代表へのヒアリング・インタビューを重ね、なんとかコアに持っていけそうなキーワードを見つけ出したところまでを書きました。

design.goalist.co.jp

今回はそこからのブレスト編です。

 f:id:e-nagata:20180315183120j:plain

 

  

拾ったキーワードを分類する

「ゴーリストの会社像とは?」の問いに対して、代表へのインタビューやチーム内でのブレストを通して出てきたことばたち。

アイディアを自由に発散したあと、少しずつ必要なものを取り出していきます。前回までの振り返りです。

 

テイスト、印象に関わるもの

・必要以上に飾らない、等身大、機能美のようなシンプルさ

・若さと進み続けるエネルギー

・人間らしい暖かさ( not 機械的なイメージ )

 

コンセプトに関わりそうなもの 

・ゴーリストはお客様をゴールへ導く、伴走する存在

・目的思考が中心にある

・ニーズが多様化している時代だからこそ、多様性をもった「チーム」で戦う

 

 

遅ればせながら、インタビューと同時並行でサイト作成のコンセプトもまとめることができました。(本来はコンセプトが先にあるのでしょうけど)

ウェブサイトの具体的な方向性をどうしていきたいのか考えるのも大事なのですが、いきなりそちらから手をつけるよりはやはり今回なんのためにわざわざ大規模なリニューアルをするのか?の咀嚼が必要だと思います。

順番が多少前後したものの、 今回のウェブサイトのコンセプトは

「新しいフェーズのゴーリストを伝える、旗艦店※のようなサイト」(を立ち上げる)

といったところに落ち着きました。
※各地に出した同系列の店の中で、とりわけ力を注ぎ、ブランドの浸透を図るための中心的な存在となる店のことです。フラッグシップ-ショップとも。

 

これまでよりも会社のあり方を示し、かつ理解されやすいサイトを目指します。

これが決まることで、上記の「コンセプトに関わりそうなもの」からどの項目を掘り下げるのが「新しいフェーズのゴーリストを伝える、旗艦店のようなサイト」に一番適しているか判断していくことができそうです。

 

 

ゴーリストののれん

ゴーリストのコアを探るべく代表へインタビューをする中で、

「IT事業をメインとしているけれども、パソコンやソフトウェア、通信技術といったイメージを全面に押し出すわけではない。あくまでも技術は手段であるから。」

 という言葉が出てきました。

では我々は何屋なのか?

という疑問が残りました。

その時点ではどんなイメージを持たせるべきなのか、レタスには全くピンときませんでした...。

 

加えて、トップページのファーストビューにはミッションの文言(「個と組織をゴールへ導くプロフェッショナルチーム」)を載せることになっていたので、初めて訪れる人にとっては、補足無しには一体なんの事業をしているのかわかりにくいかと思います。

 

我 々 は わかりやすく言うと 何 屋 な の か ?

 

ゴーリストについて何も知らない人に優しいサイトであるように、まず自らを名乗るための言葉をあてがうことが必要でした。

 

メインでやってる事業のイメージが強く付きすぎてしまうことを(あえて)避ける場合、ウェブサイトの訪問者に「(我々は)何屋である」と表現するのはなかなか難しいものだと感じました。

 

そこでこんな質問を。

「こちら側に物資やリソース、インフラ、財源が何でも揃っている状態だとしたとき、もし困っている相手(状況は問わない)のために1つだけ何かを提供するとしたら、何ですか?」

 手札はなんでも。潤沢なリソース(ほしい!)

f:id:e-nagata:20180319180212j:plain

 

 

 

極論、ゴーリストがうどん屋で、最も得意なことや、自信をもっていることがおいしいうどんを作ることであるならば、空腹で困っている人たちに直接うどんを提供して飢えを解消したり満足感を提供することもできます。

だしが自慢のうどん屋です!

f:id:e-nagata:20180315181231j:plain

社内メンバーは某うどんチェーンのファン多いですね

 

さて、代表の加藤からの上の問いに対する答えは、
「解決案の提示や提案をする。何が問題でどうしたらいいかHOWを伝える。」

というものでした。

 

なるほどゴーリストはIT事業がベースであるけれども、実は向いている(進むべき)方向や、やりたいこととしては、相手の課題を一緒に考えるコンサル会社に近いんだろうなと理解できました。(技術は手段と言い切ってますしね) 

HOW!

f:id:e-nagata:20180319183100j:plain

うどん屋じゃありませんでした

 

だとするならば、

ウェブサイトを訪問した方に持ってほしい印象として「(コンサルとして頼れる)信頼感」、「(ある程度の)ロジカルな雰囲気」も必要なんじゃないか?とも考えられます。

会話するうちに出てきたり咀嚼できたりするものがたくさんありますね。

 

 

 

コア部分のまとめ!

コンセプト 

「新しいフェーズのゴーリストを伝える、旗艦店※のようなサイト」

 

コンセプトに関わりそうな重要ワード 

・ゴーリストはお客様をゴールへ導く、伴走する存在

・目的思考が中心にある

・ニーズが多様化している時代だからこそ、多様性をもった「チーム」で戦う

 

テイスト、印象に関わりそうなもの

必要以上に飾らない、等身大、機能美のようなシンプルさ

若さと進み続けるエネルギー

人間らしい暖かさ( not 機械的なイメージ )

信頼感、ロジカルな雰囲気 (固すぎない) NEW!

 

 

 

次回こそメインビジュアルに関することを書きます!ゆるゆると進めます。

 

フリー素材はこちらからDLさせていただきました!

写真素材なら「写真AC」無料(フリー)ダウンロードOK

ゴーリストのウェブサイトをリニューアルしました#1 ー会社のイメージを探る編ー

ご無沙汰してます。レタスです。
今月19日にゴーリストの会社ウェブサイトをリニューアルしました。祝!
実に企画書段階から約半年間?の紆余曲折(ほんとにいろいろありました)を経て、ついに完成までこぎつけました!祝!

goalist.co.jp

第八期(2018/01~)から、ビジョンもこれまでの「世界中のビッグデータを必要な人に、必要な形で、必要な時に」から「GOAL」へと変わりました。ミッション・ビジョン・バリューを紹介するため今回MISSIONページも新たに作成。

また、創業から8年目になり、徐々にフェーズが移行してきたこともあっての大幅リニューアルとなりました。

 

 

旧ゴーリストウェブサイト トップページ

f:id:e-nagata:20180228180106p:plain

旧ウェブサイトの方はこまめな更新(新規サービスなどのお知らせ等)を続けるも、3~4年前に制作して以来、大枠はそのままだったのでした。
見返してみると全体のレイアウトやデザイン、受ける印象がちょっと固めでしたね。あと、ちゃんとモバイル対応するための修正が必要でした。

 


旧ゴーリストウェブサイト サービスページ
そういえばヘッダーも固定じゃなかったのでスクロールするといなくなってました...

f:id:e-nagata:20180228180145p:plain



ほぼゼロベースのリニューアル、チームの振り返りや忘備録として、やったことを書き留めようと思います。一ヶ月後に入社する新卒さんに伝えることも兼ねまして。はい。

 

 

2017年夏 企画書

企画書段階の当初、元々私はリニューアルに携わるメンバーではなかったので、先輩がはるか昔に作った資料を引っ張り出してきました...

ゴーリストらしいメインビジュアルの方向性や配色の方向性とは?について。

若い会社である分、ほんとに決まっていないことだらけですね。VIのベースもまだ決めていないし、ゼロベース、建築の地盤調査といったところでしょうか。ゼロベース。

とにかく元素レベルで素(もと)を集めることからのスタートでした。



(1)メンバーへのヒアリング

「ゴーリストに抱くイメージとはなんぞ?」を初期メンバーを中心にヒアリングしました
たくさんのキーワードが出てきました。採用ページによさそうですね

f:id:e-nagata:20180228181735p:plain

内側からの観点をまとめるとこんな感じ

f:id:e-nagata:20180228181822p:plain

(2)定番の型を調べる

他の参考になりそうな企業ウェブサイトのから大きく項目をあげてみました。
 -実際に働いているオフィスの風景写真の使用
 -空や都市風景などの開けたイメージをもたせる写真の使用
 -お客様の実現したい姿を見せる写真の使用
 -コンセプトのイラスト化
 -メッセージを強調、ダイナミックにフォントのみ使用する
などなど。ある程度方向性の振れ幅を洗い出してみて、「ゴーリストにあてはめるならば?」を考えていました。

サービスが形を持たない分、写真で直接見せるのは難しいかもね、という意見や、コンセプトやビッグデータなどのイラスト化、またはミッションが明確なのでそれをダイナミックに伝えた方が良いのかもね〜などなどブレストしていました。

 

 

2017年秋 ジョイン

レタスがジョインしたのはこのへんからです。

・ターゲットは取引させていただくことの多いHR業界の方向け

・作成すべき中身とページ構成が決まっている

という状態で、外向けのイメージやトップイメージの方向性を定めていくフェーズから、ということになります。

採用ページなら内部メンバーへのヒアリングを重点に置いてコンセプトを詰めていく、で良いのですが、今回は会社のウェブサイトということもあり、それだけでは「外に見せたいイメージ」として適しているかは微妙なところです。

ウェブサイトを見る方にどんな印象を持ってもらいたいのかが決まっていれば良いのですが、まずそこから掘り起こさないといけないのが若い会社の難しさだなと感じました。

それまで言葉におこしていなかった部分をデザイン部で考えましたが、痒いところになかなか手がとど... かない。ひたすら痒い。会社の像ってなんなの。あゝ痒い。

 

霞がかるゴーリスト君

ぼんやりとそこにあるのに見えない... 見ようと思うほど靄がかる...

社風やカラーがあるのはなんとなくわかっていながら、それを伝えるものとしてはっきり表現できないというのはなんとも不思議です。

毎日毎日会社に来て仕事をしているはずなのにいざ直面するとフィットする像がわかりません。

悩みますねえ

f:id:e-nagata:20180301191002j:plain

 

 

 

答えは作るものではない、そこにあるのだ

ゴーリストのコアを知り、今から数年後にかけて目指すイメージに一歩でも近づくのが今回の大きなミッションです...。

といってもまだぴよぴよの社会人1年目、代表の加藤が社会人になってから20年ほどかけて至った現在地をいきなり理解するのは難しいです。なので、影響を受けたという本や参考になりそうなもの、ブランディングに関する本に目を通していました。

ビジョナリー・カンパニー ー時代を超える生存の原則

ジム・コリンズ著

エッセンシャル思考 最少の時間で成果を最大にする

グレッグ・マキューン著

生まれ変わるデザイン、持続と継続のためのブランド戦略

ウジトモコ著

などなど。

 

その後、デザイン部から代表の加藤に「ゴーリストってどんな会社ですか?」とインタビュー。すると、こういった言葉が返って来ました。

・(目的思考で)お客様をゴールへ導く、伴走する存在

・若さと進み続けるエネルギー

・ニーズが多様化している時代だからこそ、多様性をもったチームで戦う

・自分たちは必要以上に飾らない、等身大、機能美のようなシンプルさでいる

・あくまでも、人間らしい暖かさがある。IT事業ではあるがパソコンや通信のイメージを全面的には押し出さない

 

ふむ〜と持ち帰り、さらにそこからデザイン部でフックに引っかかったことをピックアップしました。

・お客様をゴールへ導く、伴走する存在

 →「ゴール」...とは物事の「方向性を示す」こと。「ゴール」をもっと掘り下げてみよう。

・目的思考...

 →Goalist(Goal+ist)の名前の由来でもあるのだから、かなりダイレクトで強いメッセージになりそう

・「多様性をもったチーム」...ゴーリストの特色と強み

 →「フォーメーション」が組める...自由自在に変化する様子は、メンバーのあり方にもあてはまりそう

 

 

関係ありませんがブレストにはさっと書き込めてさっと消せるNUボードがとても役に立ちます。

最近MTG時のNUボードとポストイットの活用が馴染んできましたね〜

  「ゴール」と「チーム」がそれぞれ異なった方向でのキーワードになりそうだ、とこの2つを有力ワードとして掘り進めていくことにしました。

手がかりが見つかった、ヤッタネ(⌒▽⌒)!

 

 

 

 次回はブレスト〜メインビジュアル作成記を書きます!

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

f:id:k-mitsui:20180219225412j:plain

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

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

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

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

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

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

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

人工知能の核心とは?

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

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

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

人工知能とデザイン

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

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

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

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

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

f:id:k-mitsui:20180125124022j:plain

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

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

Hugo × circleCI × S3

f:id:k-mitsui:20180125124040p:plain このフロー自体目新しいものではないので、ハマった部分についてだけ書こうと思います。

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

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

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

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

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

2.そしてそれをGithubにアップ。

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

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

3.ここでCircleCIの登場

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

CircleCI https://circleci.com/

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

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

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

3−2.Githubのヘッダー右にあるユーザーアイコンから

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

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

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

4−1.CircleCIのProjectsからAdd Project。

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

4−2.で、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

5.CircleCIからS3にアップできるようにAWSのIAMなど設定

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

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

6.さあ、準備は整った

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の画面で表示して並べて見るとこうなります。

f:id:e-nagata:20180111210111p:plain

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

なんか全然別の色!

 

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

f:id:e-nagata:20180111210632p:plain

左: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 を選択

f:id:e-nagata:20180111211335p:plain

 

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

f:id:e-nagata:20180111211420p:plain

 

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

f:id:e-nagata:20180111211500p:plain

 

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

f:id:e-nagata:20180111211139p:plain

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

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

 

f:id:e-nagata:20180111210111p:plain

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

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

 

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

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

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

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

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

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

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

www.facebook.com

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

 

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

Sketchはいいぞ

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

developers.goalist.co.jp

 

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

次回

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


………

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

  (圧)
\(^o^)/

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

 

やったこと

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

f:id:goalist_432:20171225194635p:plain f:id:goalist_432:20171225195545p:plain

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

 

手順

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

f:id:goalist_432:20171225200330p:plain

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

 

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

f:id:goalist_432:20171225194313p:plain

 

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

f:id:goalist_432:20171225210544p:plainf:id:goalist_432:20171225210550p:plain

 

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

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

 

使い方は…

f:id:goalist_432:20171225211148p:plain

これをこうして…

 

f:id:goalist_432:20171225211155p:plain

さらにこれをこうして…

f:id:goalist_432:20171225212025p:plain

…どん!

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

 

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

qiita.com

 

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

f:id:goalist_432:20171225213042p:plain f:id:goalist_432:20171225213051p:plain

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

 

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

 

f:id:goalist_432:20171226111608p:plain

はい。完成です。

 

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

 

f:id:goalist_432:20171226193546p:plain

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

f:id:goalist_432:20171226193559p:plainf:id:goalist_432:20171226193622p:plain

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

 

f:id:goalist_432:20171226193636p:plain

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

 

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

f:id:goalist_432:20171226193648p:plain

 

f:id:goalist_432:20171227114227p:plain

f:id:goalist_432:20171227114232p:plain

……

f:id:goalist_432:20171227114235p:plain

………

f:id:goalist_432:20171227114241p:plain

チン!(本当にベルみたいな音がなりますw)

 

f:id:goalist_432:20171226194823p:plain

はい!反映されました。

 

f:id:goalist_432:20171227121925p:plain

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

 

他にも

f:id:goalist_432:20171227115252p:plain

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

 

f:id:goalist_432:20171227120234p:plain

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

f:id:goalist_432:20171227120353p:plain

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

 

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

ありました!

UserFlows

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

f:id:goalist_432:20171226204224p:plain

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

abynim.github.io

 

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

当日の日報↓

f:id:goalist_432:20171226205237p:plain

しっかりとエンジニア陣にも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サービスです。

 

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

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

f:id:e-nagata:20171219110752j:plain

 

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

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

f:id:e-nagata:20171218210945p:plain

 

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

f:id:e-nagata:20171218210949p:plain

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

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

 

 

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

f:id:e-nagata:20171219122215j:plain

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

 

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

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

 

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

機能追加により加わった5箇所はこちらです!f:id:e-nagata:20171219130614j:plain

 

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

ユーザーメリット:

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

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

After

f:id:e-nagata:20171219124328j:plain

 

②ページング機能を追加

ユーザーメリット:

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

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

After

f:id:e-nagata:20171219125425j:plain

 

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

ユーザーメリット:

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

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

After

f:id:e-nagata:20171219131528j:plain

 

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

ユーザーメリット:

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

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

After

f:id:e-nagata:20171219132136j:plain

 

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

ユーザーメリット:

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

After

f:id:e-nagata:20171219134114j:plain

 

既存のデザイン調整!

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

f:id:e-nagata:20171219134836j:plain

 

①お気に入り登録ボタン

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

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

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

 After

f:id:e-nagata:20171219140504j:plain

 

 

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

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

 After

f:id:e-nagata:20171219142720j:plain

 

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

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

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

 After

f:id:e-nagata:20171219143324j:plain

 

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

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

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

After

f:id:e-nagata:20171219144157j:plain

 

⑤Googleマップの色味の変更

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

 

 

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

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

Before

f:id:e-nagata:20171218210949p:plain

After

f:id:e-nagata:20171219134114j:plain

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

 

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

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

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

 

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

map.hrog.net

 

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

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