記事一覧
「Airbnbの成功の裏にある信頼のためのデザイン」からデザインを考える
サービスをゼロからデザインする際に、少し迷ってしまい、BONOのカイさんがおすすめしてくれた動画を見ました。
衝撃を受けたので、感想と思ったことを書いてみることにしました。
Airbnbの成功の裏にある信頼のためのデザイン
ジョー・ゲビア氏
デザインとはなにか？
自分は何を生み出そうとしているのか？
を考えさせてくれるプレゼンでした。
実体験でしかわからない感情の変化から、深く根付いた偏見
「Ezolico」デザインのウラ話
チームで作った「Ezolico」の制作過程番外編！
ミスっちゃった話です。（メンバーに怒られちゃうかも…ごめんなさい）
初期案から最終案までには紆余曲折あり、軌道修正して、初期のアイディアからかなー－－り変わり果てていたことをお話します。
ミスりポイント「ユーザー定義甘々問題」そもそも、はじめはMaasアプリを作るということで方向性を固めていたのですが、ユーザー定義、課題設定をきちんと行うこ
チームで「Ezolico」をデザインした話⑥
近所でどんぐりがめっちゃ落ちている公園を見つけ、どんぐり公園と名付けました！
今回は、「UXデザイン5段階モデル」の表層段階で行ったことについて説明していきます。
5段階モデル「表層段階」最終的なゴールであるプロトタイプの作成を行いました。
経路検索案出し
プロトタイプで担当した経路検索画面は名古屋鉄道のMaasアプリCentXを参考に制作をしていきました。
案を出した際にコロナに感染し
チームで「Ezolico」をデザインした話⑤
北海道産のジャガイモだけで作ったコロッケは、ホクホクで美味でした。
今回は、「UXの5段階モデル」の骨格段階で行ったことについて説明していきます。
5段階モデル「骨格段階」ここでは大きなゴールを「ユーザーの目に触れる画面の大枠（プロトタイプに近づける）」を作成することとし、以下のことを行いました。
ワイヤーフレーム
機能ごとに役割を分担し、それぞれがワイヤーフレームを作成しました。
筆者
チームで「Ezolico」をデザインした話④
本家は食べたことがありませんが、宮崎辛麺のお菓子（ベビースター）に最近激ハマり中です！
今回は、「UXの5段階モデル」の構造段階で行ったことについて説明していきます。
5段階モデル「構造段階」ここでは大きなゴールを「プロダクトのデータ構造を可視化する」こととし、以下のことを行いました。
UIクラス図・UIモデリング図
要件段階で定義した機能を画面ごとの関連性がわかるよう可視化していきます。
チームで「Ezolico」をデザインした話③
「明日暇？」と聞いてしまうことありませんか？
聞かれた方からしたら「要件先に言えよ…」と思いますよね。
今後は要件を先に伝えることを意識しようと決意したわたぼうです。
今回は、「UXの5段階モデル」の要件段階で行ったことについて説明していきます。
5段階モデルの「要件段階」ここでは大きなゴールを「どのような情報を扱うか、そのために必要な機能は何か」を決定することとし、以下のことを行いました。
チームで「Ezolico」をデザインした話②
渋谷ハロウィーンの様子を定点カメラで見れることを知り、参加しなくてもハロウィーンを楽しんだ気になれるお得な方法を今年初めて知りました。
今回から「UXの5段階モデル」の戦略段階で行ったことについて説明していきます。
5段階モデルの「戦略段階」ここでは大きなゴールを「誰に何を提供するか」を決定することとし、以下のことを行いました。
ユーザーリサーチ
友人にヒアリングをお願いし、北海道札幌市で
チームで「Ezolico」をデザインした話①
すっかり寒くなってきた今日この頃。
モコモコの靴下を履いて執筆中です。
ちなみに北海道では手袋をすることを「手袋を履く」と表現します！
初めて聞いたときはびっくらこきました。
はじめにここから本題！
2022年7月～8月末に所属するコミュニティのBONOで有志チームによる自主制作を行いました。
当時、デザインを勉強し始めて1か月と少し。
Figmaの使い方に慣れてきた頃でしたが、チャンス！と思
ゼロからサービス 音声SNS編⑪
自分に足りないもの初めてゼロからサービスのUIを作ってきましたが、フィードバックをしてもらいよりやらなければならないことがわかりました。
それが参考をもとにデザインすること！
今まで自分なりに参考をリサーチして、それらを使い作ってきたつもりでいました…
しかし、参考にすべき箇所は「構造」「配色」「装飾」それぞれの部分で違います。
振り返ってみると、構造の部分ばかりに気を取られ、いろんなとこ
ゼロからサービス 音声SNS編⑩
最後のパートの設定画面です。
制作UI
制作で意識したこと
参考
設定画面はどのサービスにもあるため、iPhoneの設定画面、Twitter、Instagram等々のサービス設定画面を参考に。
設定画面ってほとんど同じじゃない？と思っていましたが、それぞれのサービスで違いがあり、深い！
1つ感じたことは、設定画面の内容ってサービスのコンテンツに比べるとやや難しい。
シンプルかと思いき
ゼロからサービス 音声SNS編⑨
今回は通知画面を作っていきます。
制作UI制作で意識したこと参考
SNSはいいねや拡散、フォロー、コメントといったアクションがあり、通知画面でどのようなアクションが起こっているのかを一目でわかるようにする必要があります。
その点で、参考にしたのはTwitterです。
案を出す
Ver.2で意識したこと配色の整理
構造のルール化（複数ユーザーのアクション）
表示の構造をルール化し、ユー
ゼロからサービス 音声SNS編⑧
DAY 4の投稿検索画面を作っています！
作成UI
制作で意識したこと参考
SNSを中心に参考を集めてみると、検索バーだけでなくおすすめの投稿やニュースを表示しているものが多い印象でした。
例えばTwitterの場合、ユーザーがTwitterを使って情報収集をしていることが多い。
投稿フィードではフォローしているユーザーから情報を得ている。
そのため、検索画面ではニュースを表示し、投稿フィ
0からサービス作り 音声SNS編⑦
登録入力UIを作っていきます！
作成UI制作で意識したこと参考
主に音声録音機能があるTwitter、iPhone録音アプリ、stand.fmを参考にしました。
案を出す
画面は主に投稿テキスト入力と音声録音画面の2つ。
音声録音画面をモーダルで考えました。
モーダル画面のパターン出し
ビフォーアフターで比較するとアフターの方がすっきりとした印象です。
ver.3で意識したこと入力画