Hironobu Takahashi

フリーランス / モーションデザイナー https://twitter.com/19…

Hironobu Takahashi

フリーランス / モーションデザイナー https://twitter.com/1992takahashi

マガジン

記事一覧

クリックしてもらうためのモーション

バナーをクリックしてもらうために有効なモーションを考えました。 それぞれ、白い四角形の中に広告の内容が入るイメージです。 ボタンのモーション「押せる」ということ…

Hironobu Takahashi
5か月前
1

タテ型動画って実際どうなの?

「これからはスマホに最適化された”タテ型”が動画の主流になる!」などと言われていたりもしますが、実際のところタテ型動画ってどうなんでしょう。 確かに、近年タテ型…

5

情報を整理する方法は5パターンしかない

アメリカ人の建築家・グラフィックデザイナーのリチャード・ソール・ワーマン氏によると、情報を整理する方法は以下の5パターンだけだそうです。 1. 場所これは位置情報や…

124

パスワードが合っていたことを視覚的にフィードバックするアニメーション

前回に引き続き、今回はパスワードが合っていたバージョン。 パスワードが合っていたことを視覚的にフィードバックするために意識したポイントは以下の2つ。 ①チェック…

6

エラーを視覚的にフィードバックするアニメーション

パスワードを入力してエラーになった際のアニメーションを作ってみました。 ユーザーが入力に誤りがあったことを即座に認識できるように意識したポイントは以下の3つ。 …

11

情報デザインの観点から考える、動画の可能性

何かしらの情報を表現し伝えるにはいくつか方法があります。 文章、写真、画像、動画などなど。 中でも動画は、記憶に残りやすい、拡散されやすい、エンゲージメント率が…

30

道路標識はなぜあの形や色なのか

道路標識、交通標識は特徴的な形や色をしているものが多いが、そのデザインにはどんな意味があるのか。 Googleで画像検索してみると、形は丸やひし形、逆三角形が多く、色…

25

「文字を左から右へ書く」西洋の習慣が記号の認識に与える影響

僕たちが何かしらの記号を見たとき、事前に説明がなくても無意識に理解できる、正しく認識できるのは、前提となる共通認識があるからです。 特に、図や記号で時間軸を表す…

11

受け身で消費できるコンテンツは強い

人間は怠惰な生き物です。 自分が能動的に消費するコンテンツよりも、なんとなくダラダラと見れる受動的なコンテンツを自然と選んでしまいがちです。 受け身で消費できる…

82

なぜ今、図解が流行っているのか

最近流行っている図解の魅力を図解してみました。 図解の良い点は主に3つあります。 ①ソーシャルメディア上でそのまま閲覧できる ブログ記事をシェアする場合、タイム…

12

わかりやすいとは何か その②「ピクトグラム」

わかりやすいとは何か、どういう状態を指すのか。 わかりやすいと感じる現象・状態をひとつずつ確認していくシリーズ。 第2弾は「ピクトグラム」。 上部はタガログ語で…

7

わかりやすいとは何か その①「地図」

わかりやすいとは何なのか、どういう状態を指すのか。 わかりやすいと感じる現象・状態をひとつひとつ把握していきたいと思います。 一つ目はこちら。 上部が文章で道順…

7
クリックしてもらうためのモーション

クリックしてもらうためのモーション

バナーをクリックしてもらうために有効なモーションを考えました。

それぞれ、白い四角形の中に広告の内容が入るイメージです。

ボタンのモーション「押せる」ということが明確に認識できるように、CTAをボタン風のデザインにしました。

ボタンが押される動きを繰り返すことで、よりクリック率を上げる効果が期待できます。

矢印のモーションサイトに遷移できることがわかりやすいように、矢印を強調するモーション

もっとみる
タテ型動画って実際どうなの?

タテ型動画って実際どうなの?

「これからはスマホに最適化された”タテ型”が動画の主流になる!」などと言われていたりもしますが、実際のところタテ型動画ってどうなんでしょう。

確かに、近年タテ型の動画を見ることは増えてきました。

InstagramはIGTVというタテ型動画のプラットフォームを新たにリリースしたし、ライブ配信アプリのようにタテ型が基本のサービスも増えています。

しかし、メディア等で予想されていたほどのタテ型動

もっとみる
情報を整理する方法は5パターンしかない

情報を整理する方法は5パターンしかない

アメリカ人の建築家・グラフィックデザイナーのリチャード・ソール・ワーマン氏によると、情報を整理する方法は以下の5パターンだけだそうです。

1. 場所これは位置情報や所在地での分類で、代表的なものには地図がありますね。

2. アルファベット(50音も含む)アルファベット順に並べる方法。辞書や電話帳などがこれに当たります。

3.時間時系列で分類する方法。歴史年表やスケジュール表など。

4.カテ

もっとみる
パスワードが合っていたことを視覚的にフィードバックするアニメーション

パスワードが合っていたことを視覚的にフィードバックするアニメーション

前回に引き続き、今回はパスワードが合っていたバージョン。

パスワードが合っていたことを視覚的にフィードバックするために意識したポイントは以下の2つ。

①チェックマークの出現と色の変化パスワード入力後にチェックマークが出現し、同時に色が変わることでパスワードが間違っていなかったことを視覚的に表現しています。

最初は鍵のアイコンだった部分が、チェックマークに切り替わることで、「鍵を開いた」ことを

もっとみる
エラーを視覚的にフィードバックするアニメーション

エラーを視覚的にフィードバックするアニメーション

パスワードを入力してエラーになった際のアニメーションを作ってみました。

ユーザーが入力に誤りがあったことを即座に認識できるように意識したポイントは以下の3つ。

①ブルッと横に震えるアニメーションこのアニメーションは入力に間違いがあったときによく使われていますね。

現実世界でも人が「NO」を示す際に首を横にふることから、横に震えるアニメーションが誤りを示すことは理解しやすい。

②「Passw

もっとみる
情報デザインの観点から考える、動画の可能性

情報デザインの観点から考える、動画の可能性

何かしらの情報を表現し伝えるにはいくつか方法があります。

文章、写真、画像、動画などなど。

中でも動画は、記憶に残りやすい、拡散されやすい、エンゲージメント率が高い、などと言われていますが、実際のところはどの程度効果があるのでしょうか。

画像優位性効果動画について触れる前に、写真や画像の効果について述べておこうと思います。

人間の脳は、文字よりも写真や画像といった「イメージ」のほうが圧倒的

もっとみる
道路標識はなぜあの形や色なのか

道路標識はなぜあの形や色なのか

道路標識、交通標識は特徴的な形や色をしているものが多いが、そのデザインにはどんな意味があるのか。

Googleで画像検索してみると、形は丸やひし形、逆三角形が多く、色は赤・黄色・青が多いことがわかります。

標識は都市の景観と同化しないようにデザインされている丸やひし形、逆三角形が多いのは、一般的な都市や自然の景観にそれらの形があまりないためでしょう。

そのため、標識が背景と同化せず、目立たせ

もっとみる
「文字を左から右へ書く」西洋の習慣が記号の認識に与える影響

「文字を左から右へ書く」西洋の習慣が記号の認識に与える影響

僕たちが何かしらの記号を見たとき、事前に説明がなくても無意識に理解できる、正しく認識できるのは、前提となる共通認識があるからです。

特に、図や記号で時間軸を表す場合、「左から右へ」という共通認識があり、これは「文字を左から右へ書く」という西洋の習慣が大きく影響しています。

このように、一直線上に時間軸を表す場合、左から順に並べていくのが自然ですよね。

この共通認識は、もっと簡略化した図や記号

もっとみる
受け身で消費できるコンテンツは強い

受け身で消費できるコンテンツは強い

人間は怠惰な生き物です。

自分が能動的に消費するコンテンツよりも、なんとなくダラダラと見れる受動的なコンテンツを自然と選んでしまいがちです。

受け身で消費できるのは映像・動画、そして音声

コンテンツを大きく「テキスト」「映像・動画」「音声」にわけると、「テキスト」は自分が能動的に読まないといけないのに対して、「映像・動画」、「音声」は受動的に消費しやすい。

仮に同じ情報量でも、長い文章を読

もっとみる
なぜ今、図解が流行っているのか

なぜ今、図解が流行っているのか

最近流行っている図解の魅力を図解してみました。

図解の良い点は主に3つあります。

①ソーシャルメディア上でそのまま閲覧できる

ブログ記事をシェアする場合、タイムラインに流れてきたリンクを踏んで別のサイトに遷移しないとそのコンテンツを見ることができません。

しかし、コンテンツを図解し画像として制作しておけば、その画像はタイムライン上ですぐに閲覧することができます。

昨今の情報過多時代には、

もっとみる
わかりやすいとは何か その②「ピクトグラム」

わかりやすいとは何か その②「ピクトグラム」

わかりやすいとは何か、どういう状態を指すのか。

わかりやすいと感じる現象・状態をひとつずつ確認していくシリーズ。

第2弾は「ピクトグラム」。

上部はタガログ語で男・女と表記したもの。

下部はそれをピクトグラムで表現したもの。

このパターンは単純に、言語的に意味の分からないものをビジュアル化することで意味がわかるようになるということです。

わかりやすいとは何か その①「地図」

わかりやすいとは何か その①「地図」

わかりやすいとは何なのか、どういう状態を指すのか。

わかりやすいと感じる現象・状態をひとつひとつ把握していきたいと思います。

一つ目はこちら。

上部が文章で道順を説明したもの、下部がそれを地図で表したもの。

改めて地図の偉大さと必要性を再認識できます。

一般的に、絵や写真などの映像は右脳で情報処理するため、文章よりも圧倒的に速く伝わり、より長期間記憶に残ると言われています。

情報デザイ

もっとみる