世界を変えるストローを販売します。

紙ストローにさす、 あたらしいストロースタイル。 みなさん、コーヒー飲んでますか？ 僕も相変わらず1日4回以上はコンビニコーヒーを飲んでいると思います。もちろんスターバックスでも。 そんななか、環境問題をきっかけに紙ストロー化がものすごい勢いではじまっています。 ざっくり説明すると、プラスチックであることと形状が細いという点が組み合わさることで海に流れやすくなる点が問題視されているのです。 これにより紙ストロー、もしくはストローレスのお店やサービスが増えてきています。ス

デザインに特化した天気アプリを動かしてみる。

数年前に Daily UI という100個のお題に挑戦するUIデザインをやっていました。 こちらの天気アプリはデザインに全振りしたのですが、実際の機能面もシンプルで扱いやすいものになっています。せっかくなので静止画ではなく、マイクロインタラクションを追加しつつ、動きもつけてみようと思います。 都市の移動都市の移動はタップ、もしくはスワイプで移動できます。 都市によっては昼夜逆転するので、そのあたりも日が暮れるのか、夜があけるのか背景の動きで補完しています。 テキスト情報は

スマホに最適化した新しいパンくずを考えてみる

弊社ではマイクロインタラクションを意識したUIデザインを得意としていて、キービジュアルはもちろん、細かいUIもこだわっているところが強みです。使い慣れたUIでも、新しい提案ができるんじゃないかと常にアンテナを張っています。 新しいパンくずを考える。今回はよくみなれたパンくずにマイクロインタラクションを追加してみようと思います。サンプルとなるサイトは一般的なコーポレートサイトの会社情報になります。 一般的なパンくずとナビゲーション一般的にパンくずは以下のように表現されます。

第57回 宣伝会議賞　一次審査の結果発表

電子版ですが「第57回 宣伝会議賞」一次審査の結果発表がありました。 コピーを考えていたのが9月くらいなので待ち遠しかったというのが本音です。何十万と送られてきたコピーを審査しているのだから仕方ないですね。 なぜ参加するのか前の記事にも書いたとおり、コピーとCMで合わせて500本を送りました。 一次通過率は1%と言われているので5本通れば普通レベルです。 僕はライター志望でもなく、エンジョイ派でもなく、あくまでスキルアップ目的です。コピーもデザインも「できます！」って言

XDを使った簡単なアニメーション

こちらの方のTwitter投稿からインスピレーションを受け、同じようにAdobe XDで簡単なアニメーションを作成してみました。 ▼参考　コンセプトと動きが明快でいいですよね！ ハロウィン中のちょっとした遊びがコンセプト僕はハロウィン中にダークモードに変えたら、こんなマイクロインタラクションが起きたら面白そうだなと思って作成しました。 ツール：Adobe XD （自動アニメーション） 所要時間：30分くらい。 説明するほどではないですが、電気を消したらそこにお化けがいた

第57回宣伝会議賞に500本

第57回宣伝会議賞に500本のコピーとCMを送りました。 10年ぶり、2回目の挑戦。 前回はSKAT掲載まで。今回はグランプリ狙ってます。 エモい青春コピーでグランプリを！と思っているけどハードルは超高い。 この世で一番ハードルの高い公募らしい。一次通過がわずか1%という信じられない数字ですが、まあそこは自信ありってことで500本です。 まだ3週間くらいあるので、自信のある人は是非！

「クラシルのお気に入り」をリデザインしてみました！

前回に引き続き、クラシルのリデザインです。今回はお気に入りについて改善してみたいと思います。 ▼前回の記事はこちら お気に入りを追加する際の挙動お気に入りに追加するとモーダルでどこの階層に保存をするか聞かれます。 ▼BEFORE これがザッピング中に毎回差し込まれるので少しテンポが悪くなるなと感じました。 どんな作業でもA工程をまとめて、B工程を一気にやるという方が効率的ではないかと仮説をたてました。 つまり、お気に入りタップ時は裏側でリストに追加されていて、お気に入り

「クラシル」をリデザインしてみました！

久しぶりのリデザイン記事です。 過去にも架空の乗り換えアプリやGoogle翻訳、YouTubeなどリデザインしてきました。最近ではファミリーマートのサービスデザインを勝手に作っています。ファミリーマートさんに届いて欲しい！ 次なる課題を探していたら、クラシルの坪田さんはリデザインに対するスタンスがオープンだったので提案させていただきます。もちろんマイクロインタラクションも意識していきます。 本題のリデザインです坪田さんのTwitterでも触れていましたが、グラフィック提案

販促コンペでグランプリをいただきました

第11回 販促コンペにてグランプリをいただきました。 昨日発売の「販促会議11月号」を読んでみて、ほんとうに接戦だったんだなと感じました。4242点の審査に関わられたみなさま、ありがとうございました！ 今後は企画に関する記事も書けたらなと思います。

「ファミリーマートの定額カフェサービス」を勝手に提案してみた【デザイン編】

3度の飯より「ファミマのカフェラテ」。朝、昼、夕と3回ほど買っている愛好家です。もうサブスクになってくれー。無いなら作ってみる！というのが今回の記事テーマです。 前編は企画の整理。後編はマイクロインタラクションを含んだモックのデザインを公開します。 企画編から読みたい方はこちらから マイクロインタラクション満載で「ファミリーマートの定額カフェサービス」を勝手に提案してみた【企画編】 前回の振り返り6,000円で全商品が飲み放題のファミマカフェ（フラッペを除く） そんなサー

「ファミリーマートの定額カフェサービス」を勝手に提案してみた【企画編】

3度の飯より「ファミマのカフェラテ」。朝、昼、夕と3回ほど買っている愛好家です。もうサブスクになってくれー。無いなら作ってみる！というのが今回の記事テーマです。 前編は企画の整理。後編はマイクロインタラクションを含んだモックのデザイン意図を公開します。 マイクロインタラクション満載で「ファミリーマートの定額カフェサービス」を勝手に提案してみた【デザイン編】 こんなサービスを考えましたなんでサブスク？世はサブスクリプションサービスの戦国時代。大抵のモノはサブスクで手に入りま

DailyUI #051 - #075 まとめ

#051 プレスページ。 #052 ロゴ制作。オリジナルでフォントを起こしましたがいまいち。。 #053 ヘッダーナビ。シンプルだけどカレント表示がわかりやすいデザインにしています。 #054 映画館の予約画面。座席指定をそのままアプリでできるように。 #055 アイコンセット。2色を使ってサービスの個性を打ち出す。 #056 パンくずリスト。パンくずリストを展開すると同じ階層のメニューを表示するショートカット機能を入れました。 ここまで手の込んだパンく

10月から「販促コンペ」に参加して思ったことをシリーズ化して書いていきます。 考えたこと、企画書の作り方、どんなものが求められるのか。そのあたりに興味のある人はフォローしてもらえるとうれしいです。

読み込みボタンのマイクロインタラクション

「もっと見る」ボタンはいまや標準ともいえるUIパーツです。検索結果に多く用いられ、表示件数が多い時に置かれています。 今回は見慣れたもっと見るボタンにマイクロインタラクションを追加して、よりわかりやすいものに提案してみます。 現状の問題点よくあるタイプは下記のようなボタンタイプです。 noteのボタンです。 問題点としてはこのボタンを押したら何件分読み込まれるのか分からない点です。【10/1000】なのか、【100/200】なのかでユーザーの心理は変わります。 仮に【1

chromeのマイクロインタラクション

マイクロインタラクションの記事6回目となります。 今回はにchromeアプリ（iPhone版）ついて紹介していきます。 過去の記事はこちらから。 chromeとは説明は不要かと思いますが、Chrome はあらゆる端末に対応した、高速かつシンプルで安全なブラウザです。iPhoneではサファリがあるのでインストールしている人は少ないかもしれません。 更新（再読込）のインタラクション chromeには更新ボタンがありません。そうなると当然スクロール（画面の引き下げ）をして更新

DailyUI #026 - #050 まとめ

#026 ファッションブランドのメルマガの登録画面を想定。期待感を感じさせるような写真のトリミングを意識。 #027 ドロップダウンの見せ方。アップルウォッチでの通知。 ＃028 お問い合わせ画面。ハードルを下げるための親近感を感じさせるトーン。 #029 カフェ情報とマップの融合。 #030 契約プランの見せ方。選択しているプランがハイライトされる。特に無し。 #031 ファイルのアップローダー。各ファイルがアップされたか個別に判断される。 #032