Author Archive

YASMOのオリジナル絵本「なまけもののまねっこたいそう」

また、YASMOのオリジナル絵本である『なまけもののまねっこたいそう』の企画・構成を担当しました。主人公であるナマケモノが絵本内に登場するかわいいキャラクターをまねっこしているうちに眠ってしまうお話です。

構成案を元に、実際に子供に読み聞かせたり、YASMOの保育士さんにも助言を頂きながら、企画構成を進めました。

子どもと一緒にカラダを動かして、気持ちもリラックスできるようにヨガの動きを取り入れています。子どもとのコミュニケーションの一つである絵本の読み聞かせを通して、ママパパも一緒におやすみできるきっかけを作れたら…という想いから物語を作っています。

クライアント:三井不動産
期間:4ヶ月
担当領域:企画・構成
チーム構成:企画・構成1名、マネジメント1名、デザイナー1名、イラストレーター1名

ママパパがおやすみできる保育施設「YASMO」


YASMOの体験設計

YASMOは、三井不動産の新規事業として、2024年1月に武蔵小杉にオープンした、ママパパがおやすみできる新しい保育施設です。施設オープンに向けて、ウェブサイトのワイヤーフレームの作成、LINEの体験設計、店舗での体験設計を担当しました。

「ねむろ」はとにかく眠りたい方に、最高の寝具を提供してゆっくり眠って頂くお部屋、「こもろ」は、自分時間が欲しい方に、自分1人で何かに没頭して頂くお部屋、「ほぐそ」は、普段の育児で凝り固まった身体をほぐしながら、休んでいただくお部屋です。お子さんを初めて預けるママパパの気持ちに寄り添った声かけ、サービスを検討しました。

まだお子さんを預けたことのないママパパのペルソナを把握し、その方がどんな思考を持っているのかを掘り下げながら、どのような店舗体験になると良いのかを検討しました。 その上で、ウェブサイトやLINEで、「どのような情報が欲しいのか」「どのような言葉遣いが良いのか」という観点で、情報設計を行いました。 

お子さんを預けたことがないママパパにとって、「こどもを預けてまで、休んで良いのだろうか?」という罪悪感があるのではないかという仮説から、休んでいる間にも、お子さんが充実した時間を過ごせる・子供の成長に繋がる保育であることをウェブサイトで伝え、店舗スタッフの各場面でのスクリプトの声かけにもそういった不安を軽減する一言を入れるなどの工夫をしました。

個室体験では、休むための導入となる「おやすみガイド」やドリンク、導入機器などについてのアドバイスも行いました。

クライアント:三井不動産
期間:2ヶ月
担当領域:UXデザイン
チーム構成:ディレクター1名、UXデザイナー1名、ディレクター1名、デザイナー1名、イラストレーター1名


UX/UIデザイナーのスキルセットの擦り合わせ

UX/UIデザイナーと言っても、様々なスキルセットがあります。ビジュアルも得意な人なのか、コードまで書けるのか、ビジネス戦略まで踏み込んでいけるのかなど、どこに強みがあるデザイナーなのかは人によって全然違います。

(さらに…)

タグ:

Voicy 埋め込みプレイヤー機能

音声テクノロジーで新しい音声体験を提供するボイスメディア「Voicy」の埋め込みプレイヤー機能のUI/UXを担当しました。
Voicyは、ビジネスの専門家やインフルエンサーなどの声のブログや、ニュースなどの情報を無料で配信している声のサービスで、様々な記事にプレイヤーを埋め込むことで、ウェブ上でよりシームレスにコンテンツを楽しむことができるようになります。

プロジェクトビジョン

今回の埋め込みプレイヤー機能を作るにあたって、ビジョン、ビジネスゴール、定量的な目標、関わるユーザーとそれぞれのメリットデメリットなどを整理し、チームで認識を揃えるところから始めました。Voicyは放送を配信するパーソナリティや、放送を聴くリスナー等様々なユーザーが関わるため、どんなユーザーをターゲットにするのか、ユーザーにとって大きくデメリットになる部分はないかを確認しました。
認識を合わせることで、優先する要件や削る要件をはっきりさせ、UIの中で「どのくらい強くアプリダウンロードを押し出すか」など細かい部分の指針にすることができました。

ユーザーインターフェイス

リスナー側のUIは、VoicyのアプリのUIに慣れていない人でも操作が分かりやすいように、「倍速再生」「チャプターを戻る」などの機能は削り、シンプルになるようにしました。
Voicyのコンテンツの構造は、チャンネル>放送>チャプターという3階層になっており、放送単位で埋め込むので、そこの情報の分かりやすさも意識しました。

プレイヤーを埋め込むためのUIは、スマートフォンでは複雑なiframeタグでの埋め込みではなく、noteなどへのURLでの埋め込みを想定し、URLコピーのみを表示しました。パソコンではiframeタグとプレビューの表示をするなど、デバイスによってユーザーの使い方が異なることを考慮し、表示を分けています。

最後に、わたしのおすすめの放送をご紹介します。感覚体験を軸にしたデザイン教育を欧州の様々な大学で展開する阿部雅世さんの放送です。今の時代に非常に大切なデザインの考え方に、とても感銘を受けました。ぜひ聞いてみてください。

タグ:

Prismy

Prismyは、自分を知り未来を描くライフデザインサービスです。

Prismyを運営する株式会社LiBは、女性向けの転職サービスを運営する中で、女性特有のライフイベント(結婚・出産・育児)に伴う悩みや、働き方の多様化を受けて、「どんな人生を歩みたいのかわからない」という転職を決断する以前の女性の悩みを多く聞いてきました。
その中で、女性自身が自分らしい価値観を発見し、多様な選択肢の中から自分の未来を作っていくサポートがしたいという思いから、“自分を知る”ためのサービスとしてPrismyを立ち上げ、2020年4月にβ版をリリースしました。

ユーザーインタビュー、ペルソナの作成などのリサーチから、β版のUI/UXを担当しました。

Prismyでできること

①診断で新たな自分を知る

Health・Work・Money・Love・MeTime(自分時間)など、様々なテーマの診断を受診できます。診断を通して、これまで見えていなかった自分の本質や未来への道筋をクリアにします。

②あなた専用の「カルテ」が出来上がる

診断結果は全て「カルテ」に記録されます。カルテが充実するにつれて、自分らしい未来が形作られていきます。

③他ユーザーの「カルテ」も閲覧可能

登録ユーザーのカルテを閲覧しながら、未来や過去が重なる“ライフモデル”が見つけられます。

④ひとりで解決できない悩みはプロに相談

悩んだ時、実現したい未来がある時は、自分に合ったプロフェッショナルにいつでも相談可能です。状況に応じて適した役割のプロが、歩みをサポートします。

たくさんの機能や情報が盛り込まれているサービスのため、できるだけシンプルに、わかりやすいUIを目指しました。

ロゴ・カラー

Prismyのロゴは、5角形はHealth・Work・Money・Love・MeTime(自分時間)の5つのテーマを表しています。カラーは、黄色は「自分らしい私(Me)」、青色は「社会と関わる私(Me)」を表し、2つの「わたし(Me)」を掛け合わせてできる「未来図」を表現しています。 出来上がった形は、角度を変えてコンパスの表現にもなります。

デザインシステム

サービスの開発は、UIをどんどん改善していくことが大切なので、改善のサイクルを回しやすように、デザインをコンポーネント化し、実装側はStorybookで管理をしています。

CREDIT
Project Management: 近藤 和弘
Produce: 武井 梨名
Contents Direction: 佐武 麻美
Contents: 村上 愛, 長谷川 詩織, 井上 渚紗
UI/UX Design: 西原 英里, 砂田 祐佳
Front Engineering: 井村 圭介(FUNTERACTIVE Inc.), 坂本 志穂(FUNTERACTIVE Inc.), 松江 篤志(FUNTERACTIVE Inc.)
Technical Direction: 富田 陽介
Engineering: 外丸 和之輔, 江田 優樹, 草薙 誠徳, 沖原 正剛, 岡田 健, 岸本 裕史

WEB SITE
https://prismy.jp/

Contexted

Contexted(コンテクステッド)は、2019年11月にオープンした大阪・寺田町に約100年前に建てられた長屋をリノベーションし、3棟の異なるコンセプトをもった一棟貸しの宿泊施設です。様々な時代を見てきた建築物の価値を改めて見直し、新しい時代に紡いでいく、そんな意味を込めた「Contexted」のロゴと室内のサインを担当しました。

ロゴは、5つの円(3つは円弧)が重なってできる形をロゴマークにしました。5つの円は様々な時代の文脈を表していて、それが重なり合うことで新しい形が見えてくる、日本っぽさと新しさを感じられるデザインを目指しました。

サインは、少し間のあるロゴの雰囲気と合わせて細い線と間を組み合わせて構成しました。

外装や内装も、日本らしく、新しさのある空間になっています。

昔ながらの日本の建築物を、時代に合った新しい形に再生させる、そんな取り組みに携われた貴重な体験となりました。

CREDIT
Produce: Yoshihiro Koitani(REVearth), Maya Morihara(REVearth)
Architectural Design: Office for Environmental Architecture
Lighting Design: ​Tokyo Lighting Design
Logo Design, Sign Design: Eri Nishihara
Art: Sync.Kudo
Photo: Yoshihiro Koitani

WEB SITE
​Contexted 予約サイト

BAUS

BAUS(バウス)は、あらゆるクリエイティブの制作者情報をオープンにしてゆく、クレジットデータベースです。制作に関わったスタッフが、制作のどのパートに誰が関わったのかをオープンにしていくことで、すべてのクリエイターがオープンに繋がり、新たにチームを組んでいくことができると考えて作られたサービスです。個人ユーザーと企業ユーザー(ユニット)の登録方法の整理や、クレジットの登録がどのようにすると活性化するのかなどを考慮しながら、UXの設計に携わりました。

BAUSでは、個人ユーザーと企業ユーザー(ユニット)があり、登録するモチベーションや行動が異なるため、それぞれのカスタマージャーニーをワークショップ形式で制作していきました。
個人ユーザーと企業ユーザー(ユニット)のユーザーの違いが明確になっていなかったので、それぞれのユーザー像を明確にし、モチベーションや登録時のシチュエーションを整理しました。
そこからそのユーザーの行動、思考、検討事項を洗い出していくことで、考慮しなければいけない点が明確に異なることが分かりました。

カスタマージャーニーで洗い出した検討事項を元にデザインを再設計し、個人ユーザーと企業ユーザーそれぞれにユーザーインタビューをして最終的なUXの調整をしていきました。

BAUSでは、気になるユーザーやジャンルをフォローし最新の情報を得たり、データベースに登録されている作品をクリップしたりすることができます。またクリエイター自身も自分のプロフィールページを持つことができ、自分の関わった作品を登録、公開することができます。気になるユーザーやユニット(制作会社など)には、直接コンタクトを取ることもできます。
クレジットがオープンになることで、どうフラットにチーム作りをすることができるのか、クレジットは蓄積されることでどんな価値を持っていくのか、そんなことを考えるキッカケになったプロジェクトとなりました。

CREDIT
クレジットはこちらをご覧ください。

WEB SITE
https://baus.jp/

Burning Man 2018

2018/8/26-9/3にかけて、バーニングマンに行ってきました。
何もない砂漠に8万人の表現者が集い、ネバダの砂漠に街を作り、1週間自らの表現をしながら暮らし、 (さらに…)

タグ:

Cift Web Media

Ciftは、2017年4月に誕生した複合施設「渋谷キャスト」を拠点として、「拡張家族」をテーマに「良心を軸にした“ともに”ある生き方」を思考・実践・発信するコミュニティです。Ciftのメンバーが「“ともに”ある生き方」を思考し、思考したことを積極的に他者と共有し、発信していくためのメディアとして、Cift Web Mediaの立ち上げをしました。

メンバーひとりひとりの思考や考えの変化を伝えていくために、「あなたは、なぜCiftに入ったのですか?」「あなたにとって平和とは何ですか?」などの問いを軸にしてメンバーがそれぞれの言葉で記事を書いています。

PEOPLEページでは、ひとりひとりの手書き文字、WORKとLIFEの肩書きを書くことで、メンバーの人となりが多角的に感じられるようにしています。

ABOUTページでは、Ciftとは何かを綴るだけでなく、世界観、歴史、運営のルールなどをGithubで公開し編集履歴からCiftの変遷を感じ取ってもらえるように設計しました。

CREDIT
Edit Direction: Kaori Sasagawa, Mariko Suzuki
Design Direction: Eri Nishihara
Design: Tokyo Pistol Co., Ltd.
Engineering: kizlily inc.

WEB SITE
http://cift.co/

LiBzCAREER

LiBzCAREERは、働く女性が様々なライフステージに合った転職をできるよう、サポートするサービスです。2014年にLiBzCAREERをリリースした当初は、転職エージェントや企業からのスカウトメッセージ(求職者の経歴などを見て、面談・面接をお誘いするメッセージ)を見て応募をする求職者が多かったのですが、求人内容を見て自発的に応募する人を増やすために、2016年にUIをリニューアルしました。

「ホーム」は、スカウトされたメッセージに添付されている求人や、新着求人、特集求人、自分が「興味がある」を押した求人をタブ切り替えで見れるようにしました。またより求職者にマッチした求人が目に触れやすいように、企業の設定した条件と求職者側の経験がマッチしている求人を「本日のピックアップ求人」として、ログイン時に表示をしたことで、マイページからの自発的な応募を増やすことができました。

「お仕事探す」ページは、女性ならではの視点で求人を探すことができる機能です。「どのように探して良いか分からない」等の悩みを抱える求職者のために「転職目的から探す」という項目を追加したり、「保育園のお迎えでこの時間までに帰らないといけない」という悩みを抱えるママのために「帰れる検索」という最寄りの駅に帰れる時間を指定して求人を検索できるようにする機能などを開発しました。またその職場で働いている女性のキャリアストーリーを「ロールモデル」として表示することで、より働くイメージを持ってもらいやすくしました。

「メッセージ」は、企業の人事と求職者が直接やりとりをできる機能です。人によっては、かなり多くのメッセージを受け取るので、未読が埋もれてしまうことが起きてしまっていました。そのため「未読」「既読」「すべて」という項目でソートをできるようにしました。また、再度見返したいメッセージは「お気に入り」に登録することができます。

「マイレジュメ」は、求職者の履歴書、職務経歴書にあたる情報を入力する機能です。マイレジュメに入力された情報を見て、企業はスカウトメッセージを送ります。なかなか情報の入力率が上がらないことから、企業側がレジュメの入力をリクエストできる機能を実装したり、ホームやマイレジュメに「レジュメ充填率」を表示し、入力を促しています。

CREDIT
Technical Direction: Gaku Mizukami
UI/UX Design: Eri Nishihara, Haiji Haiiro
Front Engineering: Keisuke Imura, Shiho Sakamoto
Engineering: Takanobu Miyazawa, Tomohiro Urakawa

WEB SITE
https://libinc.jp/

てあらいかがみ

「てあらいかがみ」は正しい手洗いの方法を楽しく学べるサイネージゲームです。手洗いは様々の病気の予防につながります。手洗いの重要性は浸透しつつあり、多くの人が風邪予防のため自主的に行うようになってきました。しかし、「正しい手の洗い方」までは浸透しておらず、効果的な予防にまでは至っていない現状があります。「てあらいかがみ」では、小さな子どものうちから「正しい手の洗い方」を楽しく勉強し、それをみんなに伝えたくなる仕組みをつくることで、 正しい手洗いの習慣を子供たちに身につけてもらいたいと考えています。想定している設置場所は、学校、児童施設の洗面所やトイレなど、子供が使う場所を想定しています。

dscf6123

ユーザーが近づくと距離センサーが反応し、ゲームが開始されます。ポンプを押すとゲームがスタート。ポンプはゲームのスタートボタンとして設置しており、下に感圧センサを使用しArduinoで制御しています。画面に映し出される手の洗い方に沿って手を動かすと、手に付いたバイキンがなくなりゲームクリアとなります。

hand-washing-mirror_01

hand-washing-mirror_02

てあらいかがみ from ICC TeamE on Vimeo.

CREDIT
Creative Direction & Technical Direction: Yuta Takeuchi
Art Direction & Design: Eri Nishihara
Engineering: Yuta Takeuchi, Tomo kihara, Yuta Kato
Display Furniture Design: Katsufumi Matsui, Wataru Ito

EXHIBITIONS
「INTERACTIVE CREATION CAMP 成果発表展」 (青山 SPIRAL)
「アジアデジタルアート大賞展FUKUOKA」 (福岡アジア美術館)

AWARDS
「Digital Signage Award 2014」特別賞受賞
「Asia Digital Art Award Fukuoka 2014」入賞

Message Soap, in time – Lalitpur

Lalitpr(ラリトプール)はネパール発のオーガニックスキンケアブランドです。Lalitprの“message soap, in time ”という新商品のパッケージデザインとWebデザインを担当しました。“message soap, in time ”は、 中にメッセージが入っており、使っていくと中のメッセージを読むことができます。「メッセージを届ける時間をゆっくり楽しむ」というコンセプトから、封筒型のパッケージを制作しました。

box_01

box_02

lalitpur_image01

lalitpur_image02

intime_websitepc

CREDIT
Co-Creative Direction & Copywriting: Mai Mukaida (Lalitpur)
Creative Direction & Concept & Copywriting: Kotaro Watanabe (takram)
Art Direction & Design: Kotaro Yamaguchi (takram)
Co-Art Direction & Design: Renee Verhoeven(takram), Cédric Carêmel(takram), Eri Nishihara(takram), Yuri Okada (ex-takram)
Web Design & Coding: Eri Nishihara, Shohei Hasegawa (takram)
Photo: Yosuke Suzuki

StraightAce WebTutor

Benesse America Inc.の運営するオンラインチュータリングサービス「Straight Ace WebTutor」の情報設計、UIデザインを担当しました。生徒はオンライン上で問題を解くことができ、わからない問題があったときに、チャットでチューターに直接質問することができます。レッスンを始めると、チューターは、ホワイトボードを使って、生徒に問題を教えることができます。ホワイトボードには、その生徒がわからなかった問題があらかじめ表示されており、チューターはその上に線や図形を描きながら解説ができます。ボイスチャットを使ったレッスンも可能です。

straightace-webtutor_image01

また、「Straight Ace WebTutor」のサイトの情報設計、デザイン、コーディングを担当し、概要を説明するビデオのストーリーボードの制作も行いました。

straightace-webtutor_image02

PARKOUR MAP

「PARKOUR MAP」はパルクールスポットと動画をシェアするアプリです。

parkour_image01

パルクールは、フランス発祥の運動方法で、走る・跳ぶ・登るなどの移動動作で体を鍛える方法です。街の建物や公園のオブジェなど、あらゆる場所でプレイすることができるので、フランスを初めヨーロッパを中心に多くの若者が街中及びパルクールパークなどでプレイしています。このアプリは、街のパルクールスポットをマッピングでき、スポットごとに動画を投稿できます。気になるトレーサー(パルクールをやる人のこと)をフォローをすることで、自分のタイムラインに表示されるようになります。このマップを持って出かけ、街のパルクールスポットでパルクールを楽しむことができます。

CIIDの組織の話

file-7-18-15-11-43-09-pm

現在CIIDのサマースクールに参加中。
先日CIID Researchにfellowshipで参加されているSNさんに、CIIDでの研究、組織の仕組みについてお話を伺いました。 (さらに…)

タグ: