Life is bitter

日常生活で考えたことやデザイン・写真・インテリアをはじめとした役に立ちそうな知識をまとめて記しています。

エンジニアにダメ出しされたUIデザインでおさえておきたいポイント

f:id:life-is-bitter:20180426115829p:plain

正直なところこの半年ほどの開発を遡るにあたり、要件やワイヤーをもとにUIを組んでみていざエンジニアに実装お願いします!と依頼してからシュッとそのままOKが出ることはあまりありませんでした(最近はどうだろう)。

transitkixさんの「つよいUI」については知っていたのですが、実際にプロダクトを開発していくとこの「つよいUI」であるための視点だけではちょっと抜け漏れがあったりして、考えるべきこと・着目すべき点はたくさんあるなあと実感する毎日です。

幸い、弊社のエンジニア陣は皆UI/UX的な視点も持っているため実装をお願いする前に必ずレビューしてもらうようにしているのですが、ここで抜け落ちているところが出るわ出るわ。今回は「つよいUI」の視点とも被りますがこれまでの開発でエンジニアにダメ出しされた、UIをデザインしていく上で(主に私が)抜け落ちてしまいがちだったポイントをまとめてみました。

プロダクト開発初期の0→1フェーズでプラットフォームはWEB、まだUI設計はかじりはじめたよ〜というスキル感のデザイナーに特に読んでほしいですね。ベテランプレイヤーの方々はそうだよね〜くらいの感じでさらっと読んでいただけると。

続きを読む

Adobe Typekitでこれだけは入れておきたいフォント10選

f:id:life-is-bitter:20180421122952p:plain

Adobeからサブスクリプションのフォントライブラリとして提供されている「Adobe Typekit」ですが、Adobe Creative Cloudを契約している人はサービスとして含まれているので利用している方も多いのではないでしょうか(特にデザイナー)。

数はそこまで多くないですがモリサワやフォントワークスの日本語フォントも利用できるため画期的だよなと前々から思っていました。しかし、つい最近改めてTypekitで扱っているフォントをチェックしてみると見てないうちに欧文書体がかなり充実しているではありませんか!

もっと実務で使えるようなかわいいイケてる欧文書体が増えないかな〜と少々不満に思っていたので、この充実度合いに気づいて思わずTypekitでリリースされている欧文書体を全てチェックしてしまいました。

ということで今回は実務でもガンガン使っていけそう(汎用性が高そう)で良さげなフォントを独断と偏見で10個選んでみました。本当は10個どころではないのですが、Typekitでは1ユーザーが利用できるフォントの数に上限があるので「これはマストでしょ!」というものだけピックアップしました。

続きを読む

DailyUIを通じて得た知見ログ #011〜050

f:id:life-is-bitter:20180410205747p:plain

2ヶ月半ほど続いているDailyUIですが、ようやく折り返し地点の#050まできました。
前回のDailyUIのようにひとつひとつちゃんと解説(感想)をしていこうかとも思ったのですが、かなり冗長になってしまうのとルール上全てが良いクオリティで作れたわけでもないのでピックアップしていきたいと思います。

また、Sketchファイルの構造やFramer・After Effectsでどう動きを実装しているかについてオープンにすれば誰かの参考になるかなと思い、GithubでいくつかのSketchファイル・Framerフォルダ・Aeプロジェクトを公開することにしました。もしよろしければこちらも覗いてみてください。

前回のDailyUIログはこちらから。

続きを読む

DailyUIを通じて得た知見ログ #001〜010

f:id:life-is-bitter:20180217160011p:plain

DailyUIというものをはじめました。
Daily UI Design Challenge, Design Resources, Design Inspiration

このサイトにメールアドレスを登録すると毎日(平日のみ)UIデザインのお題が届いて、それを自分なりに解釈してデザインするというチャレンジです。
お題はなんと100個もあり、無事に完走できればUIデザインの基礎力と持久力が身につきそうだと思い、始めました。
毎日お題に沿って作ってはアウトプットのみTwitterに投稿しているのですが、思っていた以上に得られる気付きがあったので10個を区切りとして記事にまとめていこうと思った次第です。

続きを読む

大学院を中退して株式会社HERPへジョインしました

f:id:life-is-bitter:20171219020823j:plain

ご無沙汰しております。人生、3ヶ月もあるといろいろ考えいろいろ行動するもので、気付いたら大学院をやめて新卒(?)でUXデザイナーとして働くことになりました。
さらっと大きい選択をしたのですが、せっかくなので経緯や自分の気持ちなどを整理してみたいと思います。

続きを読む

Clickableなボタンであるためのあれこれ

f:id:life-is-bitter:20170904165014j:plain

最近、UIデザインをしていく中でClickableな(クリックできる)ボタンのアフォーダンスについて悶々と思考を巡らせてしまいます。

「果たしてこのボタンはクリックできるものだと認識してくれるだろうか?」「う〜んギリギリ認識してくれるか…?」という自問自答にはじまり、「そもそもこれボタンに見えるのか?」「ボタンっぽいコンポーネントだけどこの機能の中ではクリックできる(すべき)ところではないんだよな...」などなど思考の沼にはまりながらUIデザインをしています。

いま手がけているのはPC向けのUIなのでもちろん入力インターフェースはマウスであり、Clickable or notがユーザビリティに直結するのですが、今回はClickableなボタンであるために必要なことを自分用に整理してみました。

続きを読む

Airbnbとエアアジアで格安なのに上質だった3泊5日バリ島旅行

f:id:life-is-bitter:20170831154316j:plain

7月の頭にバリ島へと旅行に行ってきました。
ことの発端は私が「リゾートでバカンスしたすぎる」と研究室の同期へ軽い気持ちで言ったことで、トントン拍子で「じゃあ行こうよ」と決まってしまい、かなりふわっとしたノリでバリ島へと飛んでしまいました。

海外旅行は行くたびに準備の段階や現地での気付きで新しい発見があるので、今回は他の人もおトクでかしこくバリ島を満喫できるよう、旅行記をまとめてみたいと思います。

続きを読む

BtoBサービスのUIデザインをする上でのリファレンスまとめ

f:id:life-is-bitter:20170704104931j:plain

つい最近、ご縁がありましてBtoB向けのサービスの開発にUIデザイナーでジョインすることになったのですが、BtoB向けのサービスにおけるUIデザインというものがはじめての経験です(しかもスタートアップ、スタートアップでの開発もはじめて)。

で、本格的にコミットしていく前にある程度予備知識というか最低限気をつけておかなければならないことやバリエーション出しのためのリファレンスが欲しいなと感じたので自分用にまとめることにしました。

続きを読む

シルクスクリーンでバリ島旅行のためにクソTシャツを作りました

f:id:life-is-bitter:20170701190452j:plain

実は今週から5日間ほど研究室の同期とバリ島へ旅行するのですが、こうした海外旅行(特に南の島)に行くときに欠かせないのがクソTシャツ作り。いきなりパワーワードが出てきてしまいましたが旅行へのモチベーションを上げるためのアイテムであり儀式でもあります。

このクソTシャツ、どういったものかと言いますと頭の悪そうなデザインを高いクオリティでまとめてあるTシャツのことでして、スキルの無駄遣い感が否めないとの声もちらほら...。

デザインを決めたら無地のTシャツにシルクスクリーンで印刷するだけなのですが、今回はSURIMACCAというシルクスクリーンキット&サービスを利用してみて非常にお手軽に制作できたのでご紹介します。

続きを読む

Google Search ConsoleとAnalyticsでリライトすべき記事を探す方法

f:id:life-is-bitter:20170701160721j:plain

検索流入を増やすための方法のひとつとしてタイトルおよびコンテンツのリライトという方法があります。追加で関連する情報を載せたりそもそもの内容を変えたりとどうリライトするかは人それぞれ記事にもよる、としか言えませんがリライトする上でもっとも困るのがどの記事をどうリライトすべきかということ。

www.procrasist.com

先日、非常に貴重なデータと共によくまとめられたリライト戦略に関する記事を見つけました。
自分も記事のリライトをしてもっと流入を増やしたいと意気込んだのですが、もう少し具体的にどんな特徴を持った記事をリライトすべきかがわからないなと感じたので、今回はGoogle Search Consoleに加えてGoogle Analyticsも使い、補足的にリライトすべき記事を探す方法とどうリライトすべきかを自分なりにまとめてみました。

続きを読む