Life is bitter

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

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も使い、補足的にリライトすべき記事を探す方法とどうリライトすべきかを自分なりにまとめてみました。

続きを読む

はてなブログの固定ページでポートフォリオを作りました

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

先日はてなブログにもようやく固定ページを作る機能が実装されて、WordPressのような自由度へと一歩近づきました。前々からWordPressあたりでポートフォリオをWEB上にもまとめておくか、と思っていたのですがちょうどいい機会なので今回はてなブログの固定ページでポートフォリオを作ってみました。

先に感想を言っておくとCSS設定が煩わしく、見せ方にこだわりがある人はWordPressで作った方がトータルでの作業量は少ないかと思います。とりあえず、どう作ったかについて備忘録がてら残しておきます。

続きを読む

ブログのデザインをリニューアルしました

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

このブログをはじめてから大体1年2ヶ月ほどなのですが、一念発起してブログのデザインをリニューアルしました。
今までははてなブログテーマの中でも人気のDUDEを利用してそれを改造していたのですが、回遊率の悪さやアイキャッチを効果的に訴求できていない、そしてレスポンシブ対応していないのでスマホサイト表示がちょっとダサいという点が問題だなと感じていまして、勢いにまかせて全て解決してやろう!とリニューアルに取り組みました。

個人でできるサイトUX改善PDCAというスローガンのもと、今回はどういう意図でどう変えたのか記録しておき、後々数値としてどう改善されたかレポートしたいと考えているのでリニューアル概要についてまとめました。

続きを読む

【初心者】Origami StudioでTinderUIの動きをプロトタイピングする【基礎】

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

UIおよびアプリ全体の流れにおけるUXを検証するとき、プロトタイピングツールは必須となっています。数多くのプロトタイピングツールが存在する中で、アニメーションの動きを細かく検証できる強みを持つものとしてOrigami Studioがあることをご存知でしょうか?

Facebookからリリースされているこのプロトタイピングツールですが、他のプロトタイピングツールと比べて学習コストが高い代わりに細かくインタラクションを設定して精度の高い検証ができることが特徴です。

今回は、Origami Studioを使って近年流行りであるTinderUIの動きをプロトタイピングすることで、Origami Studioの基礎的な使い方とテクニックをチュートリアル形式で紹介できればと思います。

続きを読む

クリエイターの生産性を格段に上げるガジェット10選 in rakunew

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

近年、次々と出てくるガジェットの多くは非常にクリエイティブなものばかりでクリエイターにとっては「こんなモノを待っていた!」と思わず喜んでしまうようなものまであります。

ガジェット好きな私は常々クラウドファンディングサイトやrakunewなどの最新のガジェットを扱うサイトを覗いていまして、何かいいモノはないかなとチェックしているのですが、ある程度欲しいものリストが貯まってきたので、今回はrakunewで買えるクリエイターの生産性を格段に上げるガジェットというテーマでおすすめのもの(つまるところ私が非常に欲しいもの)を紹介していきたいと思います。

お金が貯まったら買うぞ...!!

続きを読む

【Swift】変数を定義するときのデータ型早見表を作った【初心者】

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

現在、私はSwiftでのiOSアプリ開発をUdemyの動画にて勉強しているのですが、正直なところプログラミングをする上で必要な基本的な知識すらままならないのが現状です。

先程は変数(or定数)を定義するときにデータ型なんていうものを宣言しなければならないということを学んだのですが、IntやらFloatやらどれが何に対応しているんだっけ?と混乱してしまい、わからないことをわからないままにしておくのが気持ち悪いので一目でわかるようにデータ型早見表を作りました。

続きを読む

手描き風イラスト素材で困った時に頼りになるサイト&書籍11選

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

親しみやすく人気の高い手書き風のデザインはどんなイラストを使うかによってそのテイストとクオリティが決まってきます。
クライアントワークで「手書き風のイラストを使ってかわいい感じでお願いします!」なんて言われたときには、自分でイメージ通りのイラストを描ける場合はいいですが、描けないデザイナーにとっては非常に頭の痛い問題となります。

かく言う私もイイ感じのイラストが全く描けないデザイナーでして、手描き風テイストのデザインは好きなのにもかかわらず、上述したような注文があったときにはとても苦労します。
フリーでの手描き風イラスト素材では「いらすとや」や「イラストAC」が有名ですが、正直なところ知名度やクオリティの問題もありクライアントワークでの使用はできないなというのが本音です。

そこで「ある程度のロイヤリティは払うから(有料でもいいから)もっとクライアントワークにも使えてクオリティも申し分ない手書き風イラストがほしい!!」と常々思っていましたので、今回は無料・有料問わずクライアントワークにも十分使えるクオリティの手書き風イラストを扱っているサイト&おすすめ書籍をまとめてみました。

続きを読む

20の作例から見るデザイン要素が見る人の印象へ与える影響

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

見た目におけるデザインはいくつかある要素をどう組み合わせるかが重要となりますが、この組み合わせによって見た人へ与える印象は異なってきます。グラフィックデザイナーは訴求したい内容やコンセプトと与えたい印象をすり合わせ、持っているデザイン要素の組み合わせを試行錯誤していきます。

私も普段チラシ・フライヤーをデザインするとき、まずはデザインに係る5つの要素を組み合わせてシステマチックにアイデアを発散させます。

  • 書体
  • レイアウト(余白)
  • 写真(イメージ)
  • 装飾

この5つの要素が見た目と印象に対して大きく影響を与えるので私はまずここから取っ掛かりを得るのですが、最近もう少し具体的に、どれくらいその制作物を見る人の印象へ影響を与えるのか検証してみたくなってしまいました。
というわけで今回は、同じ内容・文言のチラシでも各要素を変えるとどれだけ印象が変化するかを20の作例と共にまとめてみました。

続きを読む