「UI Crunch Girls’ Night / 女子の心をつかむUIデザインのコツ」に行ってきました

UI Crunch大人気ですね。
私が応募した時点でえらい応募者数だったのですが、運良く当選したので行ってきました。

f:id:yunko3:20151007191517j:plain

全体で共通していたこと

どの案件も、とにかく定性・定量調査に注力しているようでした。
特にMERYは集計システムが整っており、デザインで迷ったら夜にアンケートを依頼して、翌朝には集計が完了しているくらい早いそうです。

女性向けのデザインで特徴的なのは、とにかく直感で「かわいい」「ださい」が決まってくることでしょうか。
男性は論理的に物事を判断するのに対し、女性は感覚で判断する傾向があるため、デザインにおいても直感で気に入られることが大事なようです。

ネイルブック 正木友佳さん(スピカ ディレクター)

個人的に面白かったのが「女ゴコロフレームワーク」。女性の結婚相手の選び方3STEPをフレームワーク化したものです。

女性が結婚相手を選ぶときは、

  1. 【物理フィルター】男性の外見や年収などを見る
  2. 【感性フィルター】男性の趣味や性格が合いそうか
  3. 【妄想フィルター】この人と一緒にいたら…?と将来を妄想する
  4. 君に決めた!\(^o^)/

となるそうです。へー。

女ゴコロフレームワークを通して、女心を論理的に説明しやすくなり、
男性開発メンバーとの意思疎通が円滑になったそうです。

詳しい内容はこちらの記事をどうぞ↓

男性が理解できない「女の意思決定」を可視化した「女ゴコロフレームワーク」とは。ネイルアプリ「ネイルブック」が語るアプリ運営の生体験談。 | アプリマーケティング研究所

VOCE 氏原諒子さん(Goodpatch UIデザイナー)

ヒアリングを実施する時はペルソナに近いユーザーを選ぶと良いそうです。
確かにインタビューする時って、ペルソナを意識したリクルーティングはしてないなあと思いました。

ガールズちゃんねる 山口真朝さん(Goodpatch UXデザイナー)

ユーザーをセグメント化したお話が興味深かったです。

  • ライトユーザー:トレンド検索女子。見るだけのユーザー。
  • ミドルユーザー:ロム専女子。ガルちゃんを知ってる。+ーの投票をする。
  • ヘビーユーザー:おしゃべり女子。どんどん投稿するユーザー。

このセグメントを発見するのは大変だったと思いますw
セグメントを作ることで、そのセグメントに向けた施策を打つことができるようになったとか。

MERY 田中翔子さん(Goodpatch インタラクションデザイナー)

女子向けビジュアルデザインの内容が濃かったです。ポイントは、

  • ピンク、デコデコをやめた
    甘々なピンクだったので、大人っぽいピンクに変更
  • 情報を詰め込み過ぎない
    ごちゃごちゃしてるとティーン向け雑誌っぽい
  • ユーザーに選ばせすぎない
    選択肢が多すぎるとノイズになる
  • 角丸を使う
    パット見わからないけど、デザインが柔らかい印象になる
  • ♥を押した時のアニメーションにこだわった
    ページデザインがシンプルな分、アニメーションにはこだわった
  • 文言の言い方をポジティブにする
    「応援してくれると嬉しいです」的な、ポジティブな言い方にした
  • 長い爪を考慮する
    長い爪のユーザーは指の側面で操作している。爪がひっかかってスワイプしづらい。

ありがたく思うことを3つ書く☓3週間やってみた

ショーン・エイカーさんのTEDで紹介している

「21日間、毎日ありがたいことを3つ書こう」というのに

チャレンジしてみました。

脳をポジティブにするトレーニングだそうです。

継続する自信がなかったので、独自ルールを追加。継続するために、さらにハードルを下げました。

  • ネタがかぶってもいい
  • 書き忘れた日があったら、翌日書けばいい
  • 忘れた分は翌日書く・・・のではなく、1日延長する
  • 忘れても責めない
  • まずは1週間頑張ってみよう

やってみた感想

  • 費やした時間は1日1分くらい。寝る前にやったので、負担はほぼゼロ。
  • ネタは意外と出てくる
  • 「あ、これ恵まれてるな」「これは良いことだな」と気づく機会が増えた
  • 自分の置かれてる環境を見直すことができる
  • 「当たり前」がありがたく感じる
  • でも根がネガティブすぎて、3週間じゃポジティブになれなかった/(^o^)\
  • 仕事、職場、食べ物、お金、健康、音楽の傾向あり。

以下、書きだした内容です。(ちょいちょいネタがカブってますが)

続きを読む

Sketch3でパターンを簡単に作る方法

Facebookの「Sketch Japan」でシェアされてたのでメモ。

Sketchのパターン作成は

  1. パターン素材を作る
  2. PNGとかで保存
  3. 塗りつぶしでPNGを選択する

という感じで、一度パターン素材を保存する必要がありました。

でもこれだとパターン素材を編集したい時に、毎回PNGを保存しなくてはならないのでとても面倒くさい。

で、

パターン作成が少し楽になる方法。

1.パターン素材を作ってコピー。

f:id:yunko3:20150211215347p:plain

2.パターンを敷くオブジェクトを選択し、「Fill」→「Pattern Fill(しましまのアイコン)」を選択

f:id:yunko3:20150211215637p:plain

.赤い丸の部分をクリックして、ペースト

f:id:yunko3:20150211220046p:plain

パターン素材を編集したら毎回コピペする必要がありますが、パターン素材をいちいち保存するよりはかなり楽です。

ありがとうございましたありがとうございましたmm

Framer Studioを使ってみました

f:id:yunko3:20150124212743p:plain

最近、ちょいちょい耳にするFramer.js。

アニメーションを作るのに適してるライブラリ・・・というくらいしか知りませんが、試しに使ってみようと思いました。

Framer Studio なるCUIツールがあるので、お試し版でダウンロードしてみました。

Framer Studioで何が出来るのかがわかる動画

SketchのオブジェクトをFramer Studioにドラッグアンドドロップするだけで、JSのオブジェクトが生成されちゃうっていう。これはヤバイ。


Framer Studio - Basics on Vimeo

Framer.jsの特徴

アニメーションに特化したJavascriptらしい・・・。coffescriptもいけるようです。

他のライブラリよりは比較的簡単そうなので、学習コストはそこまでかからないように見える。見える・・・。見え(ry

GoogleAppleFacebookInstagramAdobeなど、名だたる企業が利用しているようです。

ただ、現時点では日本語のドキュメントがほっとんどないので、英語漬けは必須です。

続きを読む

高級旅館・ホテル予約サイト「relux」にはletter-spacing:1pxのスタイルがかかっている件について

高級旅館・ホテル予約サイトrelux

f:id:yunko3:20150104224645p:plain

たまたまサイトを見てて気づいたのでメモ。

フォントが画像なのかな?と思って開発者ツールで見てみたら、

bodyタグに明朝体+letter-spacing:1pxがかかってました。

高級感を出すために明朝体を使うことはよくありますが、

letter-spacingをかけることで、テキストにゆったりとした印象を与えます。

この1pxがマジで重要だなと思いました。

余白の取り方とかもすごく綺麗なサイトですね。勉強になる。

 

 

ま、実際に宿泊予約することは無いけどね!\(^o^)/

Sketch3で困ったところ

買ってみました。Sketch3。Adobeからの移行だったのですが、使いやすいですねー。

先にいろいろと使い方を見てから触った方が、スムーズに入れると思います。

使っていくうちに

Photoshopでいうアレをしたい」

Illustratorでは出来たけどSketch3では出来るかな?」

という操作が増えてきたので、ちょっと詰まったところをメモ。

Sketch3でカーニングしたい

グッドパッチさんのブログにあった。ありがたやありがたや。

  • 字間を広げたい Option+Ctrl+T
  • 字間を狭めたい Option+Ctrl+L

なかなか分かりにくいショートカットだな・・・。

Layout settingsのoffsetでエラーが出る

f:id:yunko3:20141214150455p:plain

View→Layout Settings→offsetをいじってると、よく

「The value 10 is too small. Please provide a valid value.」

っていうエラーが出る。どうやらoffsetは新しい機能のようで、

なかなかそれに関するドキュメントが出てこない。

「Gutter Width」「Column Width」をいじってれば自動でoffsetの数値が変わるので、

ここは「触らない」のが一番いいという結論に至った。

 

Sketch3は最新のバージョンに関するドキュメントが少ないのがネックですね。

もっとsketch3人口が増えれば解消されるかと。

まだ解決してないところ

  • 縦組みってどうやるの?
  • 曲線に沿ってテキストを流したい
  • シンボル解除(こちらで紹介されている「Detach from Symbol」が出てこないwww)
  • シェイプのアウトライン化(というか結合が思い通りにいかない時がある)
  • シェイプのサイズを自動で吐き出してくれるプラグインほしい(あるんだろうけど)