小池 政幸 / TSUMIKI INC.

株式会社つみき http://tsumikiinc.com/  UI/UX事業部 デザ…

小池 政幸 / TSUMIKI INC.

株式会社つみき http://tsumikiinc.com/  UI/UX事業部 デザイナー

マガジン

  • マイクロインタラクションの観察

    • 31本

    マイクロインタラクションをデザインする際のインプットとして色々なアプリの挙動を観察し、それらが及ぼす効果を考察します。

記事一覧

UIデザインにおけるカラーパレットの作り方

デザインしている中でよくブレてしまうもの。。 それは色です。 例えば、罫線で使われるグレーがわかりやすいかと思います。 カードやボタンなどのアウトライン、コンテン…

ロゴデザインをつくる PART.03 -ガイドライン篇-

ロゴが完成したら、ガイドラインを作ります。 簡単にいうと取り扱い説明書みたいなものです。 ガイドラインをつくる 例えば、納品後にクライアントの娘さんが勝手にRANRA…

ロゴデザインをつくる PART.02 -シンボルマーク篇-

PART.01の方ではロゴタイプ(書体)を作成しましたので、この回ではシンボルマークを作ってみます。 シンボルマークを作る時に心掛けていることは、いかにシンプルで強くわ…

ロゴデザインをつくる PART.01 -書体篇-

自分は今まで、会社・サービス・美容室・病院などいろいろなロゴを作成してきました。 いつもどのようにロゴを作っているのかを自分の整理とアップデートを兼ねて簡単な流…

ProtoPie(プロトパイ)を始める。横スクロール編

アニメーションモックはAfterEffectsの一択だったんですが、もう少し視野を広げてみようかなと思いこのプロトパイを始めてみました。 プロトパイのサイトにはチュートリア…

ある1日に見たマイクロインタラクション

前回の投稿した、「身の回りにあるマイクロインタラクション」の第2弾になります。1日に何回マイクロインタラクションに出会うのか?をメモしていきたいと思います。 5:30…

第1回 身の回りにあるマイクロインタラクションのヒント

マイクロインタラクションのインプット第1回目。 今回はWebサイトやアプリからではなく、自然と目にしている、又は生活に密着している、身の回りのものに焦点をあてて、マ…

株式会社カラックのコーポレートサイトができるまで。(TOPページ編)

インターネット広告やマーケティング企画などを提案する株式会社カラックのコーポレートサイトのリニューアルデザインを担当しました。 主にデザインコンセプト、PC・SP画…

Kitchen Storiesのマイクロインタラクション

今回は3回目、キッチンストーリーというアプリです。 キッチンストーリーとは 一言で言うとおしゃれな料理が作れる、楽しめるアプリです。 https://itunes.apple.com/jp/a

マクドナルドのマイクロインタラクション

前回はピンタレストのマイクロインタラクションの事例収集の観察をしました。今回はマクドナルドのアプリを観察してみました。 マクドナルドアプリとは 主にクーポンを使…

ピンタレストのマイクロインタラクション

私は株式会社つみきという会社でデザイナーをしています。 デザインの制作時にアニメーションなどの動きの指示をAfterEffectsで作成しています。このアニメーションの精度…

UIデザインにおけるカラーパレットの作り方

UIデザインにおけるカラーパレットの作り方

デザインしている中でよくブレてしまうもの。。
それは色です。
例えば、罫線で使われるグレーがわかりやすいかと思います。
カードやボタンなどのアウトライン、コンテンツの区切り線など
気づくと数パターンのグレーの線ができていることがあります。

その他にも、文字色、注釈の色、強調したい色、ボタンの色、ボタンをホバーした色、押せないボタンの色、背景の色、エラーの色。。。
たくさん色を扱わなければなりませ

もっとみる
ロゴデザインをつくる PART.03 -ガイドライン篇-

ロゴデザインをつくる PART.03 -ガイドライン篇-

ロゴが完成したら、ガイドラインを作ります。
簡単にいうと取り扱い説明書みたいなものです。

ガイドラインをつくる

例えば、納品後にクライアントの娘さんが勝手にRANRANのポスターを作ったとします。(RANRANについては、PART.01をご覧ください)
デザイナー的には
「縦文字のバージョンなんてつくってない…。」
「後ろの写真の色と重なっていて見にくい…。」などなど
デザイナーの意図とは違う

もっとみる
ロゴデザインをつくる PART.02 -シンボルマーク篇-

ロゴデザインをつくる PART.02 -シンボルマーク篇-

PART.01の方ではロゴタイプ(書体)を作成しましたので、この回ではシンボルマークを作ってみます。
シンボルマークを作る時に心掛けていることは、いかにシンプルで強くわかりやすいかを念頭に置いて制作するようにしています。

シンボルマークの制作まずモチーフを整理します。
犬のトリミングサロンなのでカットの要素を少し押し出してみます。
カットといえばハサミになるかと思います。このハサミにもう1つうま

もっとみる
ロゴデザインをつくる PART.01 -書体篇-

ロゴデザインをつくる PART.01 -書体篇-

自分は今まで、会社・サービス・美容室・病院などいろいろなロゴを作成してきました。
いつもどのようにロゴを作っているのかを自分の整理とアップデートを兼ねて簡単な流れをまとめてみました。
すこし長くなるので3つのパートに分けて説明していきたいと思います。

こちらのページではPART1の

・制作に取り掛かる前にやっていること
・書体をつくる

を書いていきたいと思います。

制作に取り掛かる前にやる

もっとみる
ProtoPie(プロトパイ)を始める。横スクロール編

ProtoPie(プロトパイ)を始める。横スクロール編

アニメーションモックはAfterEffectsの一択だったんですが、もう少し視野を広げてみようかなと思いこのプロトパイを始めてみました。

プロトパイのサイトにはチュートリアルやDEMOがとても豊富です。
まず何を作るのか?という発想が邪魔をするのでDEMO版の動きを自分なりに分解してみました。

この横スクロールUIを真似したいと思います。
理由はフェードアウトの箇所がどのような作りになっている

もっとみる
ある1日に見たマイクロインタラクション

ある1日に見たマイクロインタラクション

前回の投稿した、「身の回りにあるマイクロインタラクション」の第2弾になります。1日に何回マイクロインタラクションに出会うのか?をメモしていきたいと思います。

5:30 Powerbeats Proの同期朝一のマラソンを日課にしています。最近導入したpowerbeatsproのイヤホンは蓋を開けるだけでiPhoneと同期します。片方のイヤホンを外すと自動的に音も止まります。とにかく走りやすい!

もっとみる
第1回 身の回りにあるマイクロインタラクションのヒント

第1回 身の回りにあるマイクロインタラクションのヒント

マイクロインタラクションのインプット第1回目。
今回はWebサイトやアプリからではなく、自然と目にしている、又は生活に密着している、身の回りのものに焦点をあてて、マイクロインタラクションネタのヒントとなるコト、モノを探してインプットをしていこうと思います。最終的にはこのインプットに沿ったアウトプットがdribbbleなどで公開できたらなと考えています。

以前、下記の3アプリを対象としたマイクロイ

もっとみる
株式会社カラックのコーポレートサイトができるまで。(TOPページ編)

株式会社カラックのコーポレートサイトができるまで。(TOPページ編)

インターネット広告やマーケティング企画などを提案する株式会社カラックのコーポレートサイトのリニューアルデザインを担当しました。

主にデザインコンセプト、PC・SP画面デザイン、アニメーション・写真のディレクションが主な担当になります。

今回は自分なりのデザイン制作工程(コンセプトやモチーフ作り、デザインFIXまでの案など、コーポレートサイトができるまで(TOPページ))の様子を紹介します。主に

もっとみる
Kitchen Storiesのマイクロインタラクション

Kitchen Storiesのマイクロインタラクション

今回は3回目、キッチンストーリーというアプリです。

キッチンストーリーとは
一言で言うとおしゃれな料理が作れる、楽しめるアプリです。
https://itunes.apple.com/jp/app/kitchen-stories/id771068291?mt=8

今回も簡単なおさらいとして、
マイクロインタラクションはこの4つの構造があります。
1.トリガー (ex ボタンを押す、ユーザーのア

もっとみる
マクドナルドのマイクロインタラクション

マクドナルドのマイクロインタラクション

前回はピンタレストのマイクロインタラクションの事例収集の観察をしました。今回はマクドナルドのアプリを観察してみました。

マクドナルドアプリとは
主にクーポンを使う時に使用するアプリ。
食材の栄養情報やアレルギー表示、店舗の検索などの機能も。
https://itunes.apple.com/jp/app/%E3%83%9E%E3%82%AF%E3%83%89%E3%83%8A%E3%83%AB%

もっとみる
ピンタレストのマイクロインタラクション

ピンタレストのマイクロインタラクション

私は株式会社つみきという会社でデザイナーをしています。
デザインの制作時にアニメーションなどの動きの指示をAfterEffectsで作成しています。このアニメーションの精度やアイデアをパワーアップさせたい、ならばマイクロインタラクションだ!ということで各アプリやサービスなどのマイクロインタラクションを考察し知見を広げていく!というのが備忘録としてのnote投稿のきっかけになります。

早速ですが、

もっとみる