ポスターコンテストで優勝して、タルト1000個貰えることになった

f:id:yulily100:20170418104640p:plain:w400

朝、目が覚めると「二次審査の結果と表彰式のご案内」というタイトルのメールが来ていた。
友人たちと三人で応募していたポスターコンテストの結果が来ていたのだった。なんと一次審査・二次審査を通過し、上位8作品に入ったらしい。そしてその三日後にはグランプリの発表とその授賞式が開かれるという。
飛び上がるような気持ちだった。というか本当にベッドの上で何度か跳ねたし、枕に顔をうずめてジタバタバンバンするやつをやった。
何を着ていこう。授賞式なんて生まれて初めてだ。
クローゼットの中を見て、手作りのワンピースにお気に入りの革靴をあわせることにした。髪も、簡単なアレンジを練習した。
当日会社に行くと「あれ?今日いつもと違いますね」なんて言われて「へへへ、今日の夜はパーティなんですよ!」なんて答えた。

今夜はパーティなんですよ。

人生でこんな言葉を発したことがあっただろうか。その日わたしは完全に浮かれていた。何かの予感がした。そわそわした気持ちと、すこしの緊張感を持って会場に向かった。



応募したポスターコンテストというのは、チーズタルト「BAKE」の京都寺町店を中心にしたポスターコンテストである。(詳しくはこちら
上位8作品は、事前に記事に出ていた。自分たちが作ったポスター以外に京都らしいものがなかったので、準グランプリぐらいはいけるんじゃないか?なんて話をしていた。
各作品の講評に入る。ポスターを作るのは初めてだったので、なるほどこんなふうに商品を打ち出すんだ!とか、こういうふうにメッセージを込めるんだ!とか、食べ物のポスターってこういうふうに捉えるんだ!とか、言葉の一つ一つが勉強になった。
そして発表へ。先に準グランプリ3作品が発表される。一緒にいた同じチームの鈴木くんが両手を絡み合わせて祈るポーズをしていた。それがかわいかったのでわたしも真似をした。

1作目!
あー、この作品めちゃくちゃかわいいよね!

2作目!
えーっ!これがグランプリ取ると思ってたのに!

3作目!
……あれ。これも素敵だったけど、わたしたちのポスターが準グランプリに入らなかったぞ……?


心臓がバクバクと打つのが聞こえる。引き続き祈るポーズを取る。
グランプリが発表される。選ばれたのは、わたしたちの作品だった。
わけのわからないまま前に出る。商品は現金15万円か、チーズタルト1000個が選べた。準グランプリの3チームが現金2万円を選ぶなか、わたしたちはBAKE1000個を選んだ。



作品の始まりは、「やいてるの?」というフレーズ。
鈴木くんがはじめてBAKEを食べたときの感想。とろとろで、本当に焼いているのかな? と、自然に出た言葉。
それを恋愛の「妬いてる」にかけたらおもしろいんじゃないかと。
刺激的でびりびりとして、それでいてあんにゅいなセリフ。(実際に言われると困るんだろうけど)
これ、ぜったいにぐっとくるよ!とゴリ押しして進めた。
シュチュエーションに落とし込むのは難しかったが、舞台を鴨川にしようというのはすっと決まった。
あとはフォトグラファーの大坪くんが、いつもどおりの素敵な写真を撮ってくれた。



京都で過ごしたことのある人だったら、何か1つくらいは鴨川に思い出があるのではないか。
わたしは、心の拠り所にしている部分がある。
出勤時やランニング時になんとなく眺める風景としてはもちろん、花見をしたり花火をしたり。夜中に集まってだらだらと酒を飲んだり。理由もなくぼーっとしたり。
つい最近だって、ここで食べ物持ち寄りピクニックをして、ゲームを楽しんだ。
phaさんの記事にある、「100メートル置きくらいに何らかの思い出が埋まっている」というのがとてもよくわかる。鴨川に来ると、何かしらの記憶が蘇る。
……そんなふうに、京都に縁のある人だったら、この風景にきっと馴染みがあるんじゃないかな。そんな親近感を狙って鴨川というのがわかりやすいような写真を選んだ。



商品をチーズタルト1000個にしたのは、絵面がオイシイからというのはもちろんなんだけど、1000個を使って何か楽しいことができそう!というのがあったから。
「商品のチーズタルトがとにかくたくさんあるから」という理由で会える人がいると思う。
お金はお酒でも飲んでいたらすぐになくなるけれど、誰かに贈り物をするのはもっとステキなことを運んできてくれると思う。
BAKEにはそんな力があると思うし、期待している。



最後に、コンテストを企画してくださったBAKEのみなさん、ありがとうございました!
賞をいただけて本当にうれしいです。
パン屋さんのサンドイッチを買って鴨川で食べるのが好きだったけど、これからはチーズタルトを頬張るようになるのかな。
まさか本当に1000個のほうが選ばれるとは思っていなかったようで、京都店のみなさまにはご迷惑をおかけしますが、京都に住む人達が楽しめる形で大切に使いたいと思います。
一緒につくってくれた大坪くん鈴木くん、ほんとうにありがとう!


【写真】大坪侑史 (instagram: @tsubottlee
【企画】鈴木伸也(twitter: @ninokin0929
【デザイン】百合佐織(twitter: @yulily100


デザインを言語化することで得られたもの

この記事は UI Design Advent Calendar 2015 の12日目です。

はじめまして! 京都のwebサービスの会社で働いている2年目UIデザイナーの百合と申します。
今日は会社で行っている「リモートでのデザインレビュー制度」について書きたいと思います!

わたしが担当するサービスではデザイナー3人体制で開発を行っています。先輩デザイナーにアートディレクターとして付いて頂き、成果物がサービスで統一感のあるものになるよう配慮しています。
わたしの会社では、開発拠点が京都と東京の二箇所あります。わたしは京都で勤務していて先輩デザイナーは東京オフィスで勤務しているので、基本的にはリモートで見ていただいています。
同じ場所であれば気軽にデザインの相談や質問等できるのですが、遠隔になるとどうしても難しい部分があります。
そこで先輩デザイナーが考えてくださったのが「デザインレビュー制度」でした。

デザインレビュー制度とは

簡単に言うと、制作したデザインにその意図やポイントを文章に起こしたものを添えて遠隔でチェックしてもらう制度です。
デザインに入る前のラフ(アイデア・方向性が分かる状態のもの)が仕上がった段階と、デザインが仕上がった段階の2回のタイミングで見ていただいています。
目的としては、作ったデザインをチェック・評価してもらうというより、チームメンバー(デザイナー)の視点を借りて、デザインを更に良いものに仕上げるために実施されています。

  • 案件名
  • 企画の要件・前提条件
  • このデザインで達成したいこと
  • デザインのポイント
  • その他(共有事項・懸念点など)
  • スクリーンショット

形式としては作ったデザインごとに上記の内容を社内のグループウェアにまとめ、見ていただきます。

デザインレビュー制度をこなすことで得られたもの

一見「作ったものに対し説明を添えているだけ」に見えますが、考えを文字に起こすことでたくさんの良いことがあると感じているので、ご紹介したいと思います!

「なんとなく」が防止できる

いままでは、ページの雰囲気に合うようなあしらい(ボタンの形や、タイトルのフォントのウェイトなど)を「なんとなく似合うもの」でデザインしてしまうことがありました。
ですが、デザインレビューとして文章に起こしているうちに、「このデザインにすることで達成してもらいたいことは何か?」「この意図ならよりわかりやすいものがあるのでは?」などを毎回考えるようになりました。
デザインを言語化しているうちに頭が整理され、よりシンプルに考えることができるようになったと思います。

フィードバックを受けやすい

「達成したいこと」を文章として残すことで、アイデアのヒントとなるような良いフィードバックを受けやすくなりました。
たとえば今までは「タイトルを目立たせるためにはどうすれば良いか?」というように相談することが多く、フォントやウェイトなどパーツそのものに目がいきがちでした。
しかしデザインレビューでは「最初にタイトルに目が入るようにしたい」というように、達成したいことを先に報告します。
それにより全体を俯瞰したアドバイスが頂けます。上の例では「タイトルが目立たないのではなく、タイトル以外が目立ちすぎてるのでは?」といった視点でフィードバックを受けることで、情報設計に生かすことができました。

あとから見返せる

デザインに入る前にラフの作成段階で一度「達成したいこと」を整理しているので、後々に意図がブレることがなくなりました。
デザインが煮詰まってくると「ページに収めること」が目的になってしまうことがときどきあります。ですが最初に考えたことを残しておくことで、「本来達成したかったこと」に立ち返ることができます。デザインが上手くいかないな、と思ったときは、最初に考えたものを見返すようにしています。

良いデザインを見たときに「どういう意図でデザインされているか?」を考えるクセがついた

デザインレビューをしているうちに考えを言語化するクセが付くので、ほかのデザインを見たときに自然とその意図を考えるようになりました。
今までは「なんとなく良いな」と思っていたことでも、「このデザインはこういう意図でなされているのかな?」と考えるようになることで、自分のデザインに活かせていると思います。


…なんだかUIデザインとは少し離れた内容になってしまったかもしれません。(すいません…)
「なんとなく考えていることを文章として定義すること」と「ユーザーに伝えたい意図をデザインとして定義すること」は、全く違うことのように思えるかもしれませんが、混沌としたモノゴトを整理し、正しく配置するという点で似ていると思います。
これからも考えることにこだわりながら、デザインしていきたいと思います!

2015年に選んだAndroidアプリのUIデザインツール

1年ぶりくらいに、Androidアプリを作ることになりました。久しぶりにデザインをすることになったので、使ったことのなかったツールをあれこれ調べながら試しています。これからAndroidアプリのデザインを始める方の参考になれば幸いです。

Sketch app

f:id:yulily100:20151201184814p:plain
Sketch - Professional Digital Design for Mac

2014年の秋ごろのAndroidアプリデザイン時にはIllustratorを使用していたのですが、今回は数日間でサクッと作るのが目的だったのでSketchを使ってみました。SketchにはデフォルトでMaterial designのテンプレートが入っていたりと、ザクザクとアプリのデザインを組んでいくのになかなか快適ですね。まだまだ不慣れでどういう機能があるか把握できてないのにもかかわらず、これといって不自由していません。

f:id:yulily100:20151201185040p:plain
File > New From Template から 「Material Design」を選ぶことができます。

f:id:yulily100:20151201185203p:plain
テンプレートを開くと、Material Designのシンボルが簡単に使えます。

f:id:yulily100:20151203122954p:plain
様々な解像度で書き出せるのもAndroidアプリのデザインには嬉しいですね。リネーム面倒ですが。

Skala Preview

Skala Preview, a Mac app by Bjango

Sketch上のデータを端末にミラーリングするツールです。
iOSだとSketch Mirrorという公式アプリがありますが、Androidには無さそうなのでこちらを使っています。
文字の実際の大きさや端末を手に持った時の印象などは、実機で確認したいので。

Skala View - Google Play の Android アプリ
MacAndroidの両方に入れて使います。

sketch-preview

marcisme/sketch-preview · GitHub

Skala Previewだけでは使えないので、sketch-previewというプラグインをSketchに入れる必要があります。プラグインといっても、ファイルをダウンロードしてそのまま開けばインストールできます。簡単ですね。
Skalaを開いた状態で⌘+Pを押せばミラーリングしてくれます。

Android Studio

Android Studio と SDK Tools のダウンロード | Android Developers
Android Studio Canary Channel - Android Tools Project Site


2015/11/23にAndroid Studioの2.0 Previewが出ていたので入れてみました。
Theme Editorという、themeが簡単に作れるものができていました。
GUIから色を設定すればcolor.xmlに自動的にコードが追加されるのでかなり楽ですね。

f:id:yulily100:20151201184711p:plain
f:id:yulily100:20151201184722p:plain
f:id:yulily100:20151203124404p:plain


Android Studioは、端末画像付きのスクリーンショットを作る時にも使っています。

f:id:yulily100:20151201181628p:plain
f:id:yulily100:20151203124609p:plain

その他

書くほどでもないですが、公式のガイドラインは適宜見ながらデザインしています。
それ以外ではFablic社のフリルのリニューアルのスライドを参考にしました。
マテリアルデザインを用いたデザインリニューアル [フリル編]

これからもいいツールやフローを模索しながらデザインしていきたいので、なにか良い方法があれば教えてくださいね。


補足:1年前はIllustratorを使ってました、っていう記事ですyulily100.hatenablog.jp

「短所を言い換えると長所」という発想法

「短所は長所の裏返し」という話

先週7/6日曜日にUX KYOTO 2014 #00に参加した。UX KYOTOは数回に渡って行われるシリーズもののイベントで、今回は三周目が始まるのでその導入編だった。講師はHCD-netの浅野先生。
#00のテーマはリフレーミング。簡単に言うと「怒りっぽいという短所を言い換えると感受性が豊かという長所になる」という発想法である。
これをサービスの提案に置き換える。
例えば旅行先で携帯がなくなったとして、これを解決するサービスは「携帯にGPSを付けて追跡する」とか「代わりの携帯を貸し出す」とかになると思うのだけれど、リフレーミングして考えると「携帯や時間に縛られないゆったりとした旅行の提案」となる具合だ。

ワークショップ

ミニワークショップ

講義が最初にあって、そのあと簡単なワークショップがあった。
まず「最高の花瓶の絵を考えて下さい」と言われて花瓶の絵を描いたあと、「花のある最高のシュチュエーションを考えて下さい」と言われてシュチュエーションの絵を描いた
この簡単なステップで、花瓶から考え始めると新商品を提案するには花瓶に機能を付け加えるしかないが、シュチュエーションから考えると生活の一部に入り込む花にまつわる良いサービスが生まれる、ということがわかる。
同時にサービスを作るにはシナリオが必要ということもわかる

メインのワークショップ

そしてメインのワークショップ。
5人1組のグループで「思いつく限り最悪のシュチュエーション」のシナリオを考える。
そのあと隣のグループとシナリオを交換し、そのシナリオを解決するサービスをリフレーミングで考えて発表する
私のグループが貰ったシナリオは「警察官の男性がクリスマスの日の帰りにバスジャックに遭遇するが、犯人が彼女だった」というものだった。
もしリフレーミングしなければ「彼女がバスジャックしないように防ぐ方法」を考えるのだけれど、今回は「バスジャックさせてしまう」方向で考えた。
このワークショップで面白かったのが、「逆転の発想」をするのに天才的にすごい能力は必要ではなくて、やろうと思えば誰でもできるというところだ。もし何も言われなければどうしても正攻法になってしまうのだけれど、「逆の発想をしてください」って言われると不思議とできてしまう。
ワークショップ形式は、講義で教えてもらってもすぐに忘れてしまうところを実際に頭を使って考えるだけあって鮮明に覚えていられるところがすごく良いと思う

日常で見つけたリフレーミング

ワークショップの数日後に無印から「MUJI to sleep」というものが発表された

MUJI to Sleep | 無印良品

そのキャッチコピーが

いつでもダメになれる ちょっとダメになる

なのだけれど、これもリフレーミングではないかと思う。
普通は「ダメになってはいけない」というふうに捉えがちなのだけれど、このコピーでは「ダメになってもいい」というふうに捉えている
フレーミングすることで、心くすぐる面白いコンセプトやコピーになる

UX KYOTO #01よろしくお願いします!

今回は導入編だったけれど、次回8月24日(日)からはいよいよ本編が始まる。
節目となるいい機会なので興味がある方は是非ご参加下さい!
(ちなみに、私はこのシリーズでスタッフをやることになりました!)



イラレで作ったandroidアプリの素材をsketch3で書き出す

androidアプリのデザイン

androidアプリのデザインするときはIllustratorを使ってる
Illustratorが好きだからっていうのもあるし、解像度がいろいろあってややこしいからベクターデータで持っておきたいとか、そんなに複雑な効果をつけることもないだろうしPhotoshop使わなくても、とかそんな感じ
googleMaterial Designのガイドラインを読んでいるとドロップシャドウの描写が見られるのだけれど、これはアプリをz軸のあるものと捉えて深さに応じてつける感じで「z-depth=1」みたいな表記を見る限り影のある画像を用意しなくてもある程度はコード側でなんとかなるのでは、と思っている
f:id:yulily100:20140709223026p:plain

四角以外の画像でコードでどうにかできなさそうなやつも、イラレで再現するならどうすればいいか丁寧にガイドラインに載ってる
f:id:yulily100:20140709223140p:plain

ガイドライン、ものすごく詳しく書かれている
Principles - Layout - Google design guidelines

ガイドラインから要所要所でサンプルファイルをダウンロードすることができるのだけれど、どれもイラレのデータなのでgoogle的にもイラレ使って下さいってことなのかなーって思ってる

Illustratorは書き出しが難しい

イラレでレイアウトするのはいいのだけれど、困ったのが書き出しだった
androidは4種類くらい解像度があって、360×640pxをデフォルトとするとその1.5倍、2倍、3倍の合計4サイズの書き出しが必要になる
学生時代に遊びでちまちま作ってたandroidアプリだとイラレで4サイズのスライスを作っていた
f:id:yulily100:20140709221453p:plain
端数気にしないといけないし、とにかくダルくて勘弁してくれって感じだった
さらに今使ってるIllustrator CCはスライス壊れてて今後何かandroidアプリ作る時どうしようかと思ってた

sketch3使ってみる

そこで試しにSketch3というソフトを使ってみた

Sketch 3

Sketch 3

  • Bohemian Coding
  • グラフィック&デザイン
  • ¥7,800
簡単に言うと1回のコピペ、1回のリネーム、5回のクリックで4サイズ分の書き出しができた
やり方をざっくり書いておく

  • イラレで、360×640px(mdpi)のアートボード上でデザインをする
  • 書き出したいパーツをSketchに張りつけてオブジェクトを選択する
    • ここで左のレイヤーメニューから書き出したい名前にリネームしておくと良い

f:id:yulily100:20140709225154p:plain

  • オブジェクトを選択すると右下に「Make Exportable」っていうラベルと「+」のアイコンが出てくるのでそれをクリックすると書き出しオプションが出てくる
  • すると「Make Exportable」のラベルが「Export」になるので同様にあと3回クリックすると、デフォルトでいい感じの倍率が出てくる

f:id:yulily100:20140709230129p:plain

  • あとは一番下のExportボタンを押せば4つのファイルが書き出される

こうすると簡単に書き出しができる。

最後に

もし一人で作っているならレイアウト自体もsketchでやっても良いかもしれないけれど、誰かとファイルを共有する可能性がある場合はできるだけ汎用的なソフト(adobe製品)を使ったほうがいい気がする
私のやり方だとイラレでパーツ作ってレイアウトして、細かいマージンの調整とかはXMLに直接書くのがいいんじゃないかなーと思っている
なんとなく思いついた方法なのでもっといい方法があれば教えて下さい。androidのデザインの記事あまり出て来ないから世の中の人はどうしてるのかなーって思ってる。

関西sketch3勉強会

昨日6/22、UIデザインの会社goodpatchの貫井さんを関東からお呼びしてsketch3の勉強会をした
企画とかは主催の西村さんが全部やってくれて、私は知り合いのツテでグランフロントの会場提供しただけだけど

貫井さんにはsketchのいいところとか、基本的な使い方とか、一通り教えてもらった
sketch3こないだちょっと触ってみてiOSアプリのレイアウトやるには凄く便利だなーって思ってたのだけれど、書き出しの方法とか詳しい使い方よくわかってなくて放置してた
それで聞きたかった書き出しの話とか聞いてたのだけれど、とにかくiOSのデザインするうえでイラレでできない(むずかしい)ことが異常に簡単にできるという感じ

iOSのデザインやってたらエンジニアとのやりとりの課程で「上から何ピクセルか?」みたいなちょっとしたこと知りたかったりするのだけれど、それもsketchなら簡単に出せる

f:id:yulily100:20140624001738j:plain

いままでPhotshopのスクリプトで座標をCSVで書き出してたのはなんだったのか!って感じになった



勉強会も楽しかったのだけれど、懇親会がすごく楽しかった
貫井さん凄く懇意にして下さっていて、いつか一緒に飲みに行ってみたいと思ってたから、念願叶ってっていう感じだった

ちょうど一年前にgoodpatchに行ってきたっていう記事書いてた
まさか一年後にこんなふうに飲みに行けるようになるとは思ってなかった、いつどこでどうなるかはわからない


f:id:yulily100:20140622141957j:plain

webデザインのスクラップにPinterestを使う

f:id:yulily100:20140526215259p:plain
いいと思ったwebデザインをまとめて画像で保存しておきたいとき、スクリーンショット撮ってadobe Bridgeで見たり、EMBERとかImboardとかIcebergsみたいなスクラップ用のサービス使ったりEvernoteを使うかもしれない
私はPinterestが大好きで、最近webデザインのスクラップにも使い始めた
Pinterestのスクラップは簡単で、例えば

f:id:yulily100:20140526215436p:plain:w300
http://builtbybuffalo.com/

このサイトをスクラップしたかったとすると、検索欄にそのサイトのURLを入れるとだいたいの場合は誰かが撮ったスクショが出てくる
f:id:yulily100:20140526215557p:plain

それを「Pin」ボタンで自分のスクラップ用ボードにRepinすれば良い
( RepinっていうのはTumblrでいうリブログみたいなもので、他人があげたものを自分のボードに引用することが出来る )
いいと思ったデザイン、良いと思ってる人が自分以外にもこの世のどこかにいて誰かしらがスクリーンショット撮ってるわけだからそれを利用させてもらう感じ

もちろんそんなに有名じゃないサイトとかすごく新しいサイトだと検索しても出てこない場合もある
ない場合は諦めて自分でスクリーンショットを撮ってアップロードする
私はChromeのawesome screenshotっていう拡張を使ってるけど特になんでもいい



さらにPinterestのChrome拡張を使えばスクリーンショットだけじゃなくてキーグラフィックとかロゴとかパーツとかネット上に存在するありとあらゆる画像のスクラップができる
拡張入れてると、見てるサイトの画像の上にカーソル持っていくと「ピン」ボタンが出るようになるのでこれを押せばスクラップできるし、どのサイトからスクラップしたかも自動で記録できる
Dribbbleの画像ででもBehanceの画像ででもできるし、ブログのまとめ記事からでもスクラップできる
f:id:yulily100:20140526215946p:plain


PCの容量気にしなくていいし、アップロードするのに制限もない。
もちろんスマートフォンアプリから見たり他のパソコンからも見れるしスクラップもできる




これだけでもかなり便利なんだけど、Pinterestは他人のボードをフォローできるのがめちゃくちゃ良い
f:id:yulily100:20140526220337p:plain
さっきの検索結果でいうと、右側にそのスクショを最初にPinした人が出てくるのだけれど、その人のボードにはいいデザインばかり集めたスクリーンショットがたくさん並んでたりするので、気に入ったらフォローする
これを繰り返してると、何もしなくてもいいデザインのスクショがPinterestに無限に流れてくるようになる
センスがいい人が見つけてくるものはいいに決まってて、Pinterestさえ見ていればわざわざ自分で探さなくたっていいものが見放題でとにかく最高である


こんな記事を書いておきながらも、自分でwebサイトを探してスクラップすることはそこまで多くなくて、ダッシュボードに流れてくる気に入ったやつをぽちぽちPinしては新しいボードを開拓してを繰り返している
webデザインだけじゃなくてパターンデザインとかパッケージデザインとかのボードをフォローして見るのも楽しいし、画像に色んな情報が紐づいているので辿っていけば無限にいいデザインに出会えるのでおすすめです



Pinterest


sketch 3ちょっと使ってみた

f:id:yulily100:20140524222234p:plain

ちょっと前にsketch3ってのが出て、身の回りでけっこう話題になってた
ミーハーなので知り合いのデザイナーさんに勧められるがまま買ってみたものの、機会がなくて全然触ってなかった
今日イラレでちょっとアプリの見た目作ってて、使いづらいなって思ってsketch試してみたらいろいろ楽そうだった


まずイラレはピクセルの端数でまくるからアプリのパーツ作るにはいろいろつらい
ピクセルグリットに整合しても端数でないわけじゃなくていろいろいじったあとに変形パネルから端数消したりしてた
あと、アプリ作るにはやはり実機から大きさとか確認しながら作りたいのだけれど、イラレだとちょっと面倒かもしれない
skala previewとか使ったらできないこともないけどいちいち⌘Sしたりする必要がある

そこでsketchがちょっと便利そうだった
sketchを起動すると最初に「iOS design template」っていうのが選べて、これ押すと自動的にiOSのサイズを用意してくれる
イラレだと「えっと解像度何ピクセルだっけな」みたいに調べないといけない
それから「navbar」とか「keyboard」とかiOS向けのシンボルがたくさん入っててこれをあてはめていけば勝手にiOSアプリっぽくなる
文字とかも適切な場所に勝手に入る
イラレだと「ios navbar サイズ」とかで検索してサイズを確認しながら正方形ツールやら文字ツールやらを駆使してちまちま作らないといけない
シンボルは凄く便利で「ここにスイッチ入れたいな〜」「戻るボタン足したいな」って思ったとしても簡単にiOSニデフォルトで入ってる奴が使える

それと、sketchはデフォルトで「mirror」っていうiPhoneと同期する機能がついてる
iPhoneのほうで500円でアプリ買わなくちゃいけないけど、これもなかなか便利
PC上でやった編集をリアルタイムでiPhoneに反映してくれる
なのでちょっとした文字の大きさの調整とかするときにすごく役に立つ

あとまだ試してないけど、知り合いが触ってるのを見る限り書き出しが楽そうだった
イラレではスライスツール使ってたんだけど端数問題でけっこう神経質になるし、厳密に書き出したつもりでも1pxでかくなったりする( 私の技量とか知識が足りないだけだけど )
creative cloudイラレに関していえば2014年05月現在スライスツール壊れてて書き出そうとするとイラレが落ちたりして厳しい。ゼロ年代イラレ落ちたとか言ってるのわかるけど2014年にもなってイラレ落ちるとは思ってなかった( 愚痴になってしまった )


と言う感じで、iPhoneがあと何年あるかはわからないけど今の時点ではデザインできて損はないし、個人でちょっとiOSのデザインする分にはめっちゃ便利だなって思った
もうちょっといろいろ使っていきたい

Sketch 3

Sketch 3

  • Bohemian Coding
  • グラフィック&デザイン
  • ¥7,800

フォントという「道具」

金曜日、通ってる大学の修士課程の卒展に行った
場所は京都文化博物館で、アルバイトしてる会社から3分くらいで行けるので昼休みにふらっと行ってきた
展示会場は畳の間で、靴を脱いで上がらないといけない。

f:id:yulily100:20140219002509j:plain
資料は畳と平行に展示されている
「畳に展示ってどうなの?」という感じもあるけど、個人的には資料を覗き込むふるまいが好きなので、いいなあと思っている

それから土曜日は修制の外部ゲストとして来られていた小林章さんと深澤直人さんの講演があったので大学行ってきた。
小林さんの話がすごく面白かった
わたしはタイポグラフィの勉強をほとんどしたことがないのだけれど、それでもわかるような丁寧な講演だった
たとえばLOUIS VUITTONのロゴはmacに最初から入ってるようなフォントで作られているのになぜ高級感があるのか?とか、「A」という文字はひだりが細くてみぎがふといのはなぜなのか?とか

f:id:yulily100:20140219001512p:plain

「A」という文字がなぜひだりが細くてみぎがふといのかは、実際筆で書いてみるとわかりやすいと言っていて、実際に筆で書く様子を実演してくれた

f:id:yulily100:20140219002549j:plain

フォントの成り立ちなんて考えたことがなくて、この話を聞いてすごく新鮮だった
あと、フォントのデザイナーになろうと思ったきっかけが、中学校のころポスター作るの好きで、文字を美しくすればポスターも美しくなったから、っていう話がすごかった



それから心に残ったのが、つくる側の都合を押し付けるんじゃなくて誰にも気付かれないくらいなのが「デザイン」である、という話
例えばFrutigerというフォントがあって世界中の空港で使われていて誰しもが一度は見たことがあるはずなのだけれど、誰もFrutigerをつくったFrutigerさんのことを知らない
Frutigerの使われた標識を見て「フォントが美しい」ってわざわざ言う人もいない
けれど「何の違和感もなく自然に見える」っていうのが重要なのである

小林さんが作ったフォント、ヨーロッパの書籍でも使われてるんだけど、例えば飛行機で隣に座ってる人がそのフォントが使われている本を読んでて「書体どうですか?」と聞いて、嬉しい答えが「書体のことなんか覚えていない」と言われることだそうだ
(あと食事したあとに、スプーンがどんなだったか印象強いのなら、そのデザインは悪かった。という例を出してた)


フォントはグラフィックの世界のもののように見えるけれど、フォントは誰しもが使う「道具」であって、道具に作る側の好みとか、個性を押し付けてはいけない
この話聞いてて、かっこよくて動きの面白いサイトももちろん作りたいのだけれど、人が使うものを作りたいなあと思った
作品じゃなくて道具を作りたい






あと小林さんにサインしてもらった、嬉しい
f:id:yulily100:20140219002851j:plain


欧文タイポグラフィの基本

欧文タイポグラフィの基本

この本は講演の少し前に会社の人が勧めてたので買ったのだけれど、タイポグラフィ全く知らなくても面白く読めた
表紙の絵何か分からなかったけど読んだらわかった

コンテキストで考えるUXデザイン

日曜日、UX KOBEというイベントに行ってきた
講義とワークショップがあった


特に面白かったのが「ユーザーはコンテキストにお金を払う」って話
例として私鉄経営の小林一三モデルが挙げられていた
ユーザーはシートがいいとか電車の性能がいいという理由でどの沿線がいいとか選んだりしない、
ユーザーが選んでるのは沿線に住むことで得られる便利さである、という話。
例えば阪急神戸線なら、ユーザーは簡単に梅田に行けたりとか、沿線に大学が多いとか、観光地へのアクセスがいい、みたいな「便利さ」を求めて阪急沿線に住む
阪急沿線に住む理由に「電車の車体の良さ」は入って来ない
同じようなマーケティングの話で、ドリルを買おうとしてる人が欲しいのは、ドリルの歯じゃなくてドリルで空けることのできる「穴」だ、という話もある


これが具体的にサービスのUXにどう関わってくるのか?という話なんだけど、
例えば超技術でブラウザの解像度2倍にできる方法を開発したとして、「解像度2倍でスゴイ技術です!」とか言われてもそれだけではユーザーにとって価値にはならない。
コンテキストを考えるとしたら、「解像度2倍でテレビ電話できることで、離れたところにいる人とでも実際に会っているかのように話ができる」というふうに売っていかなければいけない
ツタヤにスタバがついてて人気というのも、べつに超絶こだわったコーヒーとか超めずらしい本とかいらなくて、人は「コーヒーを飲みながら読書ができる豊かな生活」を求めてやってくる


ユーザーの生活スタイルにうまくあてはめることのできるコンテキストを提供するのがUXデザインを考えることであると、この勉強会では語られていた




こういう勉強会社会人に向けたものが多くて、当たり前だけど仕事で役立てたいと思ってる社会人しか来ない。(今まで学生に会ったことない)
なので、いつもの勉強会だとLean Start Upの手法を用いてできるだけシンプルに出してフィードバックを得ましょう、だとかプロトタイプを作って検証しましょう、だとか、実際に業務で使って行く手法に落とし込んだものが多い印象だったのだけれど今回は、非常にアカデミックな内容で、大学の授業やゼミ受けてるような感じだった

情報デザインの教室 仕事を変える、社会を変える、これからのデザインアプローチと手法

情報デザインの教室 仕事を変える、社会を変える、これからのデザインアプローチと手法

講師の浅野先生はこの本を執筆されている方で、この本は自体は2年前くらいから持ってる
というのも、この本は情報デザインフォーラムのメンバーの何人かで執筆されていて、その一人に私が大学で所属してたゼミの先生が含まれていたからだ
大学の授業やゼミ受けてるみたい、と私が思ったのは、大学のゼミの先生と講師の浅野先生が同じ活動をされているからなのかもしれない
(大学では、ターゲットになりそうなユーザーにインタビューしたり、モノを使ってる様子をビデオに撮らせてもらってそれ見てポイントをまとめたり、そういうゼミだった)



当日の講義とかワークショップの様子は、講師の浅野先生のブログにのっています。
UX神戸2014 #02 カスタマージャーニーマップ | 情報デザイン研究室




余談だけど、浅野先生に「UXならゼミの先生に教えてもらえばいいじゃない」って言われたんだけど、大学の頃デザインもうやりたくないって思っててゼミも休みがちで最悪な学生だったので顔を合わせるの気まずい部分がある(笑)
今となれば、なんてもったいないことをしてたんだ、って思うのだけれどね