小池 政幸 / TSUMIKI INC.

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

小池 政幸 / TSUMIKI INC.

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

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

    • 31本

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

すべてのマガジンを表示

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

デザインしている中でよくブレてしまうもの。。 それは色です。 例えば、罫線で使われるグレーがわかりやすいかと思います。 カードやボタンなどのアウトライン、コンテンツの区切り線など 気づくと数パターンのグレーの線ができていることがあります。 その他にも、文字色、注釈の色、強調したい色、ボタンの色、ボタンをホバーした色、押せないボタンの色、背景の色、エラーの色。。。 たくさん色を扱わなければなりません。 デザインを始める前に整理し用意しておけば、迷うことなくスムーズに作業が捗る

小池 政幸 / TSU…

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

      ロゴが完成したら、ガイドラインを作ります。 簡単にいうと取り扱い説明書みたいなものです。 ガイドラインをつくる 例えば、納品後にクライアントの娘さんが勝手にRANRANのポスターを作ったとします。（RANRANについては、PART.01をご覧ください） デザイナー的には 「縦文字のバージョンなんてつくってない…。」 「後ろの写真の色と重なっていて見にくい…。」などなど デザイナーの意図とは違う、間違った使い方をされてしまう可能性があるかもしれません。「使う前に一言声かけて

      小池 政幸 / TSU…

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

        PART.01の方ではロゴタイプ（書体）を作成しましたので、この回ではシンボルマークを作ってみます。 シンボルマークを作る時に心掛けていることは、いかにシンプルで強くわかりやすいかを念頭に置いて制作するようにしています。 シンボルマークの制作まずモチーフを整理します。 犬のトリミングサロンなのでカットの要素を少し押し出してみます。 カットといえばハサミになるかと思います。このハサミにもう1つうまいこと絡めると説得力が倍増すると思っています。 1つのモチーフに複数の意味を持た

        小池 政幸 / TSU…

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

          自分は今まで、会社・サービス・美容室・病院などいろいろなロゴを作成してきました。 いつもどのようにロゴを作っているのかを自分の整理とアップデートを兼ねて簡単な流れをまとめてみました。 すこし長くなるので3つのパートに分けて説明していきたいと思います。 こちらのページではPART1の ・制作に取り掛かる前にやっていること ・書体をつくる を書いていきたいと思います。 制作に取り掛かる前にやること 1.サービスの内容を知る まずは、どんなサービスで、どんな風にみられたい

          小池 政幸 / TSU…

        マガジン

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

        記事

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

          アニメーションモックはAfterEffectsの一択だったんですが、もう少し視野を広げてみようかなと思いこのプロトパイを始めてみました。 プロトパイのサイトにはチュートリアルやDEMOがとても豊富です。 まず何を作るのか？という発想が邪魔をするのでDEMO版の動きを自分なりに分解してみました。 この横スクロールUIを真似したいと思います。 理由はフェードアウトの箇所がどのような作りになっているか想像がつかなかっため、分解しながら習得しようと思いました。 1.まず素材を作

          小池 政幸 / TSU…

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

          小池 政幸 / TSUMIKI INC.

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

          前回の投稿した、「身の回りにあるマイクロインタラクション」の第2弾になります。1日に何回マイクロインタラクションに出会うのか？をメモしていきたいと思います。 5:30 Powerbeats Proの同期朝一のマラソンを日課にしています。最近導入したpowerbeatsproのイヤホンは蓋を開けるだけでiPhoneと同期します。片方のイヤホンを外すと自動的に音も止まります。とにかく走りやすい！ 5:30 Nike Run Clubランニングするときに起動するアプリ。これがな

          小池 政幸 / TSU…

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

          小池 政幸 / TSUMIKI INC.

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

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

          小池 政幸 / TSU…

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

          小池 政幸 / TSUMIKI INC.

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

          インターネット広告やマーケティング企画などを提案する株式会社カラックのコーポレートサイトのリニューアルデザインを担当しました。 主にデザインコンセプト、PC・SP画面デザイン、アニメーション・写真のディレクションが主な担当になります。 今回は自分なりのデザイン制作工程（コンセプトやモチーフ作り、デザインFIXまでの案など、コーポレートサイトができるまで（TOPページ））の様子を紹介します。主にWebデザイナーになったばかりの方などちょっとした参考になるのではないかと思いま

          小池 政幸 / TSU…

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

          小池 政幸 / TSUMIKI INC.

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

          今回は3回目、キッチンストーリーというアプリです。 キッチンストーリーとは 一言で言うとおしゃれな料理が作れる、楽しめるアプリです。 https://itunes.apple.com/jp/app/kitchen-stories/id771068291?mt=8 今回も簡単なおさらいとして、 マイクロインタラクションはこの4つの構造があります。 1.トリガー (ex ボタンを押す、ユーザーのアクションを促すこと） 2.ルール (ex ボタンを押した後なにができるのか) 3

          小池 政幸 / TSU…

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

          小池 政幸 / TSUMIKI INC.

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

          前回はピンタレストのマイクロインタラクションの事例収集の観察をしました。今回はマクドナルドのアプリを観察してみました。 マクドナルドアプリとは 主にクーポンを使う時に使用するアプリ。 食材の栄養情報やアレルギー表示、店舗の検索などの機能も。 https://itunes.apple.com/jp/app/%E3%83%9E%E3%82%AF%E3%83%89%E3%83%8A%E3%83%AB%E3%83%89-mcdonalds-japan/id413618155?mt=

          小池 政幸 / TSU…

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

          小池 政幸 / TSUMIKI INC.

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

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

          小池 政幸 / TSU…

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

          小池 政幸 / TSUMIKI INC.