Author Archive

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

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

(more…)

Tags:

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

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

プロジェクトビジョン

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

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

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

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

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

Tags:

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）」を表し、２つの「わたし（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週間自らの表現をしながら暮らし、 (more…)

Tags:

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/