Life is bitter

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

スタートアップで1年間デザイナーをして悩んだり思ったりしたこと

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

そろそろ大学院をやめてスタートアップへジョインしてから丸1年くらいになるのですが、やればやるだけ悩みとか考えることが多くなって悶々としてきたので一旦思考を整理するために文章に起こしてみました。

今からしたためるポエムは他のスタートアップでブイブイ言わせてるデザイナーとかここらへんマジでどう考えているの?という気持ちなのでもし何かアドバイスがあったらこっそり教えてください。

続きを読む

初心者に捧げるGit・GitHub入門 for デザイナー&ディレクター 〜コード編集からPull Request&Mergeまで〜

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

エンジニアにわざわざ細かいCSSの修正や文言修正を依頼するのは全体の開発効率を考えるとあまり良いことではないと私は思っています。実装されたものに対して「あ、これちょっと違う...」というとき、ディレクターやデザイナーが自分で修正してちゃんと反映されたらみんながハッピーですよね。

今回は弊社のGit・GitHubの使い方を知らないインターン生などが、さくっと文言修正できるようドキュメント化したいなと思ってふんわりとまとめてみました。あくまで修正ができればいいという目的の記事なため、Git・GitHubの厳密で正確なことについては他のサイトを参考にしてください。ググりましょう。

ターミナルのようなCLI(いわゆる黒い画面)を使わずに進めていくのでそういったものが苦手な方もご安心ください。

続きを読む

Pug+Stylusではじめるポートフォリオサイト作成〜環境構築編〜

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

最近ゼロからポートフォリオを作ろうと思っていざデザインができてから実装しようとなったとき、快適な環境を作ってデプロイするところまでの方法を私はちゃんと知らないということに気付きました。

そしてググっても初心者向けになかなかこういう手順でやればいいよ!というものが出てこないのと、要求される開発リテラシーが高いので今回はエンジニアから伝授してもらったちょっとモダンな静的サイト開発の方法を環境構築から自動デプロイまで私の備忘録がてらまとめたいと思います。

かなり長くなりそうなのでまずは環境構築編。

続きを読む

エラー設計時に気をつけたい当たり前なポイント

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

サービスを作っていて必ずぶち当たるエラー設計。
デザイナーがエラーに関して全て洗い出せてそれぞれに対してUIを作り、エンジニアへばっちり共有できたらいいな〜と思ってエラー設計時に気をつけておきたいポイントをまとめてみました。

が、書き出してみると当たり前なことしかなくて笑ってしまったのですが実際に設計していると抜け漏れてしまうものもあるのでチェックリスト的な用途で見ていただければ。

続きを読む

オリジナルフォント『Mollis Sans』をリリースしました

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

デザインの一要素として大きな影響を持つ「文字(タイポグラフィー)」。
フォントが好きだと言いつつ自分でフォントのひとつも作ったことがないのは文字への愛が足りてないのではと思いまして、ふとオリジナルフォントを制作してみました。

最初は特にリリースする予定もなく自分の制作案件などでいつか使えればくらいの心構えでしたが、せっかくならということで公開することにしました。

続きを読む

自由気ままに2泊4日ローマ弾丸ひとり旅

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

5月の終わりと何でもない時期ではあるのですがローマへとひとり旅をしてきました。
というのもゴールデンウィーク分の休みをずらして取ることができたので、4日間しかないけどこれはすかさず海外旅行チャンスでは!?と判断して行ってきた次第であります。

パリ、バルセロナ、ローマ、モロッコと行きたい場所はいろいろあったのですが、ここ数年ずっと行ってみたかった美食と歴史の街ローマをチョイス。今回も旅行記を雑にまとめてみました。

続きを読む

DailyUIを100日間継続してよかった6個のこととアドバイス

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

今年の2月からはじめたDailyUIですが、先日ついに100日目まで完走することができました
メールで送られてくるお題に対して毎日(平日のみ)UIを作り続けるという取り組みであるこのDailyUI、TwitterやDribbbleで様子を見ても100日目まで完走しきった人はなかなかいないので三日坊主である自分がここまでこれたのは感無量というものです。

続きを読む

エンジニアにダメ出しされた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ログはこちらから。

続きを読む