2015年に読んだ漫画を振り返ってみる

去年インターネットのサービスで大躍進した分野の一つが「漫画」だと思う。

気がつけばスマホのアプリがたくさん入ってる状態に。

 

私のデイリーアクティブ・マンガアプリ

  • LINEマンガ
  • マンガボックス
  • comico
  • ジャンプ+
  • ROLA(彼女のいる彼氏用)

LINEマンガとマンガボックスは毎日立ち上げてる。

1巻無料でマンガを試し読みして、続きが読みたくなったら購入orマンガレンタルしてます。

これによって週末の楽しみが増えた!

マンガアプリ+コミックレンタル の最高なサービスの登場で良いユーザー体験させてもらってます!

 

コミックはレンタルが良い

理由は漫画買いたいけど、置けるスペースがないから。

コミックレンタルのサービスは色々あるけど、まとめてたくさん借りたく料金を比較して「DMMコミックレンタル」サービスを使ってます。

一冊45円か新作85円で(まとめての場合もあり)、25冊以上借りると20泊も出来るサービス。

送料800円かかるけど、一回に使う金額が2000円代なので気軽。

数えたら去年28回もレンタルしてました。

 

マンガ好きの友達とおすすめのマンガについて語ることがよくあるので、去年一年間で読んだマンガをおすすめのジャンル別にメモしておく。

なんでもそうだと思うけど、好みがあるのであしからず。

少女マンガの方が多めです。

並びはお気に入り順です。

特におすすめのお気に入り!

2015年特にハマったマンガはこれ!

これだけ読んだ中で特におすすめできるマンガに絞ってみました。

どんな話かは語ると止まらないので、機会があればまた詳しく書きます。

定番ときめき少女漫画

何にも考えずにときめきだけ楽しみたい時に読む定番少女マンガ。癒し。

オリジナリティがあって面白い

話題になって読んでみたら面白かったマンガ。

一回読んだけどもう一回読んだらやっぱり面白かった

何年か前に読んでるけど、もう一度読みたくなってレンタルしたらやっぱり面白かったマンガ。名作!

大人な恋愛が楽しいマンガ

30代の働く女子にはこういうマンガも必要。

読んだ

ここからは順不同の読んだマンガメモ。

アプリで連載してるの入れるともっとあるけど、コミックで読んだ漫画はこんな感じ。
ちなみに、私が一番好きな漫画は「ガラスの仮面」です。

デザインツールをSketchに乗り換えたら色々便利だった

UIデザインの勉強会に行くとよく聞く「Sketch」の話。

そんなに良いなら使ってみたい!と思いつつ、

慣れてるデザインツールで作ったほうが早いし、お金もかかるし、英語で難しそうだし、なにより面倒だな…、

と、躊躇してたのですが、他のデザイナーさんからの勧めもあって3ヶ月前にSketchを導入しました。

 

結果、私も今言っている「Sketchめちゃくちゃ便利だよ!」と。

 

まだ使ったことないデザイナーさんや、導入を検討中の方に向けて、私がSketchを便利だと思った理由をまとめてみようと思います。

 

1.とにかくアプリケーションが軽い

これ地味だけと一番気にっている理由。

PhotoshopIllustratorの起動時のあの画面……、もう待てないっすよ。

パッと開いてパッと作り始められる。この手軽さが良い。

 

2.自動保存と過去にデータを遡るのが簡単

アプリケーションが軽い分、落ちることもよくあります。

が、落ちても安心なのがSketch。

立ち上げると自動保存してて、アプリが落ちる前に戻れるのです!

これはデザイナーさんなら誰でも経験したことがあるアレ、

「あ〜〜〜〜イラレ落ちた〜〜〜〜!保存してない!2時間分の作業返して(涙)」

ということがないのです。

これに何度も助けられてます。

 

f:id:imakagi:20160201130106p:plain

そしてリバート機能があるのも便利なポイント。

デザインしている過程で、「昨日の時点で作ってたあのパーツやっぱり戻したいな」だったり、上司に「やっぱりあの時のバージョンが良いな」みたいなこと言われても安心。

デザインのタイムマシン機能があるんです。

これがあることで前ならイラレデータの何バージョンかバックアップで保存してたのが不要に。

これにも何度も助けられてます。

f:id:imakagi:20160201130125p:plain

 

3.追加のプラグインが優秀

プラグインについては使ってみておすすめしたいものがいくつかあるので、別にまとめようと思いますが、ベストプラグインは「Zeplin」かなっと思います。

zeplin.io

 

何が出来るかというと、Sketchで作ったデザインデータをSketchを持ってない人にもガイドを共有出来るツールです。

つまり、デザイナーからエンジニアさんへの橋渡しをしてくれるツール

アプリのデザインだとパーツの色、線の太さ、文字の大きさetc…ありとあらゆる説明を指示書でまとめたり、なんてことあると思うんですが、Zeplinあれば指示書の代わりになると思います。

webの場合もデザインデータのフォトショだったりを綺麗に整えてマークアップエンジニアさんに渡しても、1pxずれたり色が微妙に違っていたり…そんなコミュニケーションロスが発生しなくなります。

これは無料だし、本当にありがたいツール

 

デザイナーの指示書書く時間とか、実装されたUIのデザイン修正のためのコミュニケーション時間とか、いかに減らせるかって部分だと思うんです。

だってその時間分デザインにかける時間が増やせますから。

 

4.画像の書き出しが楽

複数のアートボードが作れるのはイラレと変わりませんが、web用の書き出しが一発で出来るのは便利です。

あとはアプリのデザインなら複数サイズの画像の書き出しは本当に便利だと思う。

 

f:id:imakagi:20160201130230p:plain

逆にSketchが苦手なことは?

ここまで書くとSketch最強!…と言っているようですが、Sketchが苦手なこともいくつかあります。

例えば、

  • 写真や画像の加工 →やっぱりPhotoshop
  • イラスト作成 →やっぱりIllustrator
  • 文字の字詰め →Sketchは細かい調整がしにくい、ここはIllustratorで。

などフォトショ&イラレが手放せるかっていうと、そうはいかないです。

 

そして環境によっては最大の壁は、

  • Mac版しかないこと

だと思います。

Win環境の人は残念ながら。。。です。

 

Adobeのソフトに比べれば買い切りで安いですし、Macの方はSketch導入するメリットは大きいかと。

また、ディレクターさんのワイヤー作成にも向いているツールだと思います。

試しに社内のディレクターさんにおすすめしたら、何のレクチャーもなしでワイヤーさくっと作ってくれました!

「エクセルより便利だねー」と。

エクセルは表計算ソフトですから…ね。

ワイヤーがSketchで来るとデザイン作る方もマジで楽です。

コピペコピペの作業いらないですから。

 

Sketchはこちらからダウンロード可能です。

一ヶ月無料でトライアル出来るので、試してみる価値はあるかと。

Sketch - Professional Digital Design for Mac

 

もはや、Sketch以外のツールでUIデザインしたくない!

勉強会レポート:クラスメソッド×RoomClip×ネイルブック DesignNight

勉強会レポートです。
昨日はこちらの勉強会に参加してきました。

 

クラスメソッド×RoomClip×ネイルブック DesignNight

classmethod.connpass.com

個人的には最近よく使っている「RoomClip」アプリの裏側が知りたい!と思って参加しました。


望みを叶えるUIデザイン

横山さん@クラスメソッド

お話のすべてはこの一文に集約されてる気がしました。
「**目的を達成**するために、**機能がどのように利用**されていれば**期待する効果**が出るだろうか?
を考えるないと「つかってもらえるデザイン」にならない。」

——
普段考えている事の答え合わせな感じでした。
機能一覧とデザインガイドだけでUI作るのは危険だよって話にプラスして、
目的や利用シーン、ゴールイメージが依頼された時にない場合は、デザイナーからヒアリングすることが必要なんだと最近思ってます。
相手には目的や利用シーンがあると、もっと良いアイデアが出せるかもしれないから教えて!とポジティブな言い方で頼むのがコツ。


アプリを生み出す現場でのUI/UXデザイナー

高橋さん@RoomClip

スライドシェア

www.slideshare.net

RoomClipについて

roomclip.jp

開発体制 エンジニア8人(iOSAndroid、サーバーサイド)、デザイナー1人 とのこと。
すごいなあデザイナーさん1人で作ってらっしゃるとは。
そりゃエンジニアさんとのコミュニケーション色々試行錯誤していかないと大変そう…とご苦労が垣間見れました。

 

便利なツール

「PreviewCC」
フォトショップのデザインデータをスマホ実機にミラーリング出来るアプリ。
Skala PreviewのAdobe版っぽい。
同時に複数端末のミラーリング出来るらしく、MTGでデザインレビューする時はエンジニアさんにこのアプリを入れてもらって実機で確認してもらっているとのこと。

——
私は普段Sketch+Prottでデザインレビューしてもらってるけど、Photoshopでデザインしてる方には便利そうなツール
600円かかるけどリアルタイムでSketchのデザイン確認が出来る「Sketch Mirror」もおすすめ。

Sketch Mirror

Sketch Mirror

  • Bohemian Coding
  • ユーティリティ
  • ¥600

 

組織の中のデザイナー

見た目が綺麗なものを作るだけではなく、ユーザー体験を考えられるデザイナーに。
「提案」が出来る人が求められる。
提案=手段を実行したらどうなるかの仮説を立てる

——
これも最近よく考えていること。
特にサービスのデザイナーはそうだろうな。


デザイン負債の返し方

星さん@ネイルブック

 

スライドシェア

www.slideshare.net 

ネイルブックについて

nailbook.jp

キータに事例あるので事例に興味のある人はこちらを見て下さいとのこと。
ちょっと開いたらすごい文字量でびっくりした。
あとでゆっくり読ませていただきます。

iOS - 女子向けアプリをほぼ男性エンジニアのみのチームで改善しているチームの働き方と利用ツール - Qiita

iPhone - エンジニアがディレクションをして1ヶ月維持率を入社から半年で15%改善した話 - Qiita

 

事例

実際の事例を交えてご紹介いただけたので参考になりました。
施策に目的とゴールの指標を事前に定めてやってらっしゃるのがすごい。

・検索のフローティングボタンよりも右上のボタンの方が利用された
・会員登録上げる施策 チュートリアルで何が出来るか伝えて5%アップ
・指標超いっぱいある、施策ごとに細かい指標立てる
・「♡かわいい」押してるユーザーのリテンション高いの分かった→一覧でもハート押せるように→3カラムから2カラムへ
・アンドロイドで試して良かったからiOS
・細かい施策で一か月継続率45%→69.5%
・クラッシュ対応しっかり
・Sketch全員導入 コミュニケーションロスのため
・2週間で1度出す、揃って無くても出す
・レビューのやり方 ワイヤーとデザインカンプで2回、あとはリリース前にもモンキーテスト

 

一番びっくりしたのは、アプリのネイル画像一覧の読み込み速度はや!!
びっくりするくらいレスポンス良い。
これは実機で自慢したくなる訳だ…。

 

 

いつものデザイナーさん向けのイベントとはちょっと雰囲気が違って不思議な感じでした。
RoomClipのデザイナーさん&エンジニアさんに開発方法と、個人的な改善要望を伝えられたので満足!

 

ホワイトボードのノート「nu board (ヌーボード)」を使ってみました!

前々から同僚や、勉強会で使っている人を見かけて良いなーと思っていて…

ついに自分も購入しました!

サイズはノートと同じが良いのでA4版。

 

f:id:imakagi:20151229142529j:plain

 

ちなみにアマゾンで購入したら次の日に届きました。早い!

www.amazon.co.jp

 

こんな風に使おうと思って購入しました。

  • 少人数のMTG(1対1とか)
  • 簡単なレクチャーをする時の説明用
  • 自分のメモ用
  • タスク管理用

使い始めて1ヶ月くらい経ちましたが、良いです!!

 

簡単に書いたり消したりが出来るので、1対1のMTGではよく使ってます。

自分のタスク管理もツールや付箋など色々試していましたが、今はこのボードの1枚めを自分のタスク表にしていて、状況や納期をメモしています。

そもそもこの状況や納期が毎日変わるんですよ。

だからツールの更新や、ポストイットだっと最新の状態にしておけなかったりして。

ホワイトボードだとすぐ消せてすぐ書けるのが便利。

 

使っていて気がついたんですが、このプロダクトのデザイナーさんめちゃくちゃUX考えてないか…!?と。

作ってから、実際にユーザーが使ってる所見てるだろうと思う。

何なら自分が一番のユーザーなんだと思う。

 

そう思った理由はこんな工夫があるところ

 

ホワイトボードマーカーを保管する場所がある

当たり前の工夫と言われればそうなんですけど、これなかったら絶対にマーカー無くしてますよ。

しかもこの細いマーカー何本も持ってないし、キャップに消すのも付いてるから絶対に無くしたら困る。

ペンのサイズにジャストフィットだし!

f:id:imakagi:20151229142534j:plain

 

なぜが2枚ある透明シート

ホワイトボードの面を保護するための透明シート。

2枚ずつ挟まってるんです。

 

f:id:imakagi:20151229142536j:plain

最初は何で2枚ずつ挟まってるんだよ!1枚でいいじゃん。

とか、

間違えて透明シートの方に書いちゃったじゃん!

とか、思ってたんですけど。

使っていくうちにこのシートの訳が分かって。

 

まずは、この透明シート、書くのもありなんですね。

例えばホワイトボードの方に書いてあるものに、透明の上に赤ペン入れて重ねる、とか。

だから両面用の2枚ないといけなかった訳です。

 

そしてこの透明シートの重要な役割がもう一つ…

 

撮影用の透明シート

なんとこのシート、写真撮影用なんです!

どういうことか実際に撮影してみました。

 

まずはシートなし

f:id:imakagi:20151229142540j:plain

つづいてシートあり

f:id:imakagi:20151229142542j:plain

 

蛍光灯の映り込みが少なくなってる!!

 

この透明シート少しマットっぽくなってて、光の反射を軽減してくれるんです。

すごい!

 

MTGのメモ用に使う時、議事録代わりにスマホで撮影してPCに取り込むシーンってよくありますよね??

こういう利用シーンを想定出来てるところがすごいなあって思います。

きっとこの商品使う人、私みたいなIT系のデザイナーやエンジニアさんが多いでしょうし。

 

と、いう訳でおすすめですよ!

nu board(ヌーボード)

cssnite Shift9 に参加しました(後半)

前回の続き

cssnite Shift9 に参加しました(前半) - UX/UIデザイナー walkey's blog


フォントの話

相変わらず鷹野さんのプレゼンはうまい。
何がすごいってマイク片手に持ちながら、PCを難なく操作してデモするところ。
早いけど分かりやすい!

鷹野さんが紹介しているフォントやツールの中に知らないものがあったのでメモ!

GlyphSearch

アイコンフォントの「Font Awsome」などを縦断して検索できるサイト
アイコンを探している時に便利!
http://glyphsearch.com/


BLOKKというフォント

文字が線になるフォント。
使いドコロはワイヤーフレーム
早速ダウンロードしました。
http://blokkfont.com/


プロトタイピングツール「Project Comet」の登場!

 

Adobeからプロトタイプツールが出るニュースが10月に出ましたが、その開発版のデモを紹介してもらいました!
私はデザインは「Sketch」、プロトタイプは「Prott」を使っているので、よっぽど使いやすくなければ使わないよ〜という目線。

目玉にしてた「リピートグリッド」は使いこなせば便利そうだけど、実際は初めから画面のワイヤーがカッチリ決まってないことが多くて、考えながらデザインしているので出番がなさそうな気がする。
デザインモードとプロトタイプモードがあって、画面遷移もできる…
あれ、これSketchとPrott一緒になったみたいなツールですね。
詰め込み過ぎてツールが重くならなければ良いけど…。
リリースされたら使ってみます!

http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html


コンタクト&エンゲージ

 

ホワイトハウスのサイトをサンプルで見ながら、公式ホームページの役割が変わってきてる話、面白かったです。
SNSで情報発信、自分たちからコンタクトしていって、ファンを作る。
公式ホームページはファンが来るサイトだから、字でだらだら書くより動画で見せる。
その後のオウンドメディアの話でもありましたが、自社メディアはストーリー性が大事で、こちらからユーザーに語りかける、共感を得てファンになってもらってサイトを使ってもらう、っていう流れになってきている。

結局のところ、自分たちのサイトに訪れているユーザーがどんな人なのか?
を知る事が大事なんだよな。
それが分からないと今のサイトのままで良いのか、どんな風に改修しなきゃいけないのかも分からない。

だからサンプルであったIR情報しか載ってない企業サイトとか賢いんですよね。
自分たちの公式サイトに訪れているユーザーは投資家たちだって分かってるから。

 


今年も面白かったです!cssnite!
来年もし参加するとしたら懇親会も申し込んでみようかな。
7000円の参加費に飲み会代3000円で10000円超えると、自腹で払う個人には少しでかいので躊躇してしまうのですが…。
全部のセッションが必要な訳じゃないから、個別に参加出来たら良いのに。

 

walkey.hatenablog.jp

cssnite Shift9 に参加しました(前半)

12/26 年に一度のweb系イベントでは(多分)一番大き「cssnite Shift9」に今年も参加しました。

3年前に参加してからは、毎年復習がてら参加することにしています。

私は自社サービスを持っている会社で、UX/UIデザイナーをしていて、デザインはもちろんマークアップもやるので、勉強できることはたくさん!

でもここに来て「知らなかった!」を発見するのはもちろん、「知ってること」の確認のための参加でもあります。

 

前にとあるセミナーに参加した時の先生が言っていたのですが、

「勉強会は知っていることが8割くらいの方が勉強になる」とのこと。

確かに知らないことだらけの勉強会だとついていけないかも。。。

自分の席の周り5人中私以外4人はディレクターさんだったり、マーケの方でした。

多分マークアップのセッションとか分からない単語ばかりだったんじゃないかな。。。

逆に私は普段UIデザインの情報はキャッチアップするようにしているので、プロトタイプの話とかは耳タコな感じでした。

 

個人的に勉強になったこと、思ったことなど、メモします。

 

デザインをデザイナーだけのものにしない

 基調講演の長谷川さんのお話の中に、「プロセスを見える化しよう」という話があって、これは私も今年特に考えていたことだったので共感できました。

デザイナーがどんな風に悩み、考え、デザインをしているのか。周囲の人たちに説明することって大事なことだと思います。

デザイン8割で見せたい気持ちは私にもあります。

デザイン途中のパソコン画面とか本当に覗かないで欲しい…!

でも、途中で確認することで、最終的な手戻りが少なくなったり、結局は効率が良かったりするんですよね。

 

良いデザインを作る方法は、「たくさん失敗を繰り返すこと」だと思います。

失敗を恐れないことが大事。

 

古いブラウザの対応について

マークアップセッションでは一番最初に出てくるブラウザの話。

IE8がいよいよサポート終了に。

でもうちの会社もそうなんですが、クライアントが意外と古いPCのままで、古いブラウザもテストしないといけない…って結構よくある話だと思うんです。

そんな時にアップグレードしてくださいよって頼む時の説得方法が勉強になった。

 

「危険なブラウザをサポートして、何かあっても責任取れないので当然の対応」

 

なるほど。

サポート終了したブラウザ=危険なブラウザ

なんですね。

 

アクセシビリティとは「使える度」の「幅広さ」

アクセシビリティは自社のサービスでは、ユーザーがかなり特定されているので普段はあまり意識していませんでした。

でも、実際に目の見えない方がどんな風にサイトを使っているか目の当たりにすると、「わー!」っていう気持ちになりますね。

ユーザービリティは特定ケースでの「使える度」。
アクセシビリティは「使える度」の「幅広さ」。

っていうまとめかたは結構しっくりきました。

 

アプリとwebの境目が混ざって来た

サバサバしてて大先輩で大好きなデザイナー矢野さんのスマートデバイスセッション。

今回一番楽しめました!

アプリとwebのデザインの境界がなくなってきた話も納得でした。

 

今年のテーマはECサイト

UIのレイアウトの違いも面白かったですが、やっぱりフォームの話はアツイですね。

知らなかったこととして、アマゾンのアプリは電話番号でアカウント作成ができるっていうのはびっくりしました。

専門学校の学生たちは、LINEをほとんど使うからメアド使ってないと!

メアド登録が当たり前だと思っていたので、びっくりしました。

でも矢野さんの補足で、まだ携帯電話番号の方が抵抗ある人もいるし、日本は携帯電話を個人情報として法的に決まってないっていう話もあり。

法的な話はよく分からなかったので、今度調べてみようと思います。

 

安心感を作るのもデザイナーの仕事

最終的に重要なのはブランディング
ページの体裁が綺麗だったりすることで、企業に対する不安感を下げることもデザイナーの仕事だ、と。

デザイナーの役割多いな!

その分やりがいあるけどね。

 

長くなってきたので後半の感想は続きで。

続きはこちら

walkey.hatenablog.jp