UI/UX の記事一覧

こんにちは、GMOインターネットの吉田です。今回は、ディレクターがプロジェクトの進行中にどんなことを考えているか、チームのみんなにも協力してもらって素直なご意見をまとめてみました。また、私の考えるディレクターに必要な能力について、書いています。 ディレクターの感情曲線 前回までUI/UXディレクターのお仕事とプロジェクトの流れについて、連載でお伝えしてきました。 各フェーズで具体的にディレクターがどんなことをしているのかは、Vol.1、Vol.2、Vol.3のエントリーを読んでみてください。 今回は、サービスディレクターチームのメンバーにも協力してもらい、プロジェクトの各フェーズでディレクターがどんなことを考えたり、感じたりしているかを感情曲線でまとめてみました。 ディレクターの感情曲線 結果、感情が一番マイナスになっているのは「検証」フェーズでした。 自分たちが設計した画面がテスト環境に実装されると感動する！という意見が多くありましたが、その後に続く検証作業で不具合が次々と見つかり、検証作業に終われる日々が続くと「しんどい」「つまらない」といったネガティブな感情が沸々と湧いてくるようです。 チームメンバーの中には「間違い探しのようで楽しい」といった強者もいましたが、ほとんどのディレクターにとっては一番のペインポイントとなっています。今後は検証の自動化など、効率良く検証作業を行う方法を検討していけるとよいなと思いました。 （検証フェーズ中のディレクターには、ちょっと優しくしてあげてくださいね。） 2番目に低いのは「要件定義」フェーズでした。 このフェーズでは、関係者の意見をまとめるのにみんな苦労しているようです。MTGの頻度も多いですし、とにかく調整の日々が続きます。プロジェクトの最初の難関になりますが、ハードルを超えると「要件定義がまとまるとホッとする」「やりたいことが整理されてスッキリする」といったうれしい感情が湧くようです。 逆に一番感情がピークになるのが「リリース」フェーズでした。 やはり無事にリリースした達成感が、ディレクターにとっては一番感情が高ぶるところみたいです。リリース後には開発した機能の利用実績が見えてきたり、ユーザーの声を直接聞く機会などによってポジティブな感情が続いていきます。 こうして見てみると1つのプロジェクトでけっこうな感情の起伏があることがわかります。色々な困難がありますが、その先に大きな達成感があることがディレクターというお仕事のやりがいにつながっているのでは、と思います。 ディレクターに必要な能力 私の考えるディレクターに必要な能力は、「コミュニケーション」と「バランス感覚」だと思っています。 プロジェクトを進める中でプロジェクトチームみんなが同じ方向を向いて進んで行けるように交通整理をすることがディレクターの大きな役割です。そして、プロジェクトの参加者の脳内同期を円滑にするためにペルソナやプロトタイプ作成を行っています。※詳細はVol.1参照 また、これは個人的にディレクターあるあるだと思っていることですが、「ユーザビリティを優先するか、ビジネスを優先するか」はディレクターの永遠のテーマです。どちらの要件も満たすことが理想ですが、現実的にはプロジェクトの様々な局面でディレクターはこれらの選択を迫られることが多くあります。 ユーザビリティを優先して、誰も使わない機能を開発するのは無駄ですし、逆にビジネスを最優先にしてお客様が操作できない機能を開発するのも残念な結果に...。 結論は「どちらも大事」で、それぞれのバランスを取ることが重要だと思います。 さいごに ディレクターはとにかくやることが幅広くあります。 でも、単純に忙しいだけではなく、最終的に自分で設計したサービスや機能が世の中にリリースされる感動は、プロジェクトに深く関わっているからこそ感じられるものです。 4回に渡って長々と語ってきましたが...ディレクターについて少しでも興味を持って、ディレクターやりたい!って思ってもらえたらすごくうれしいです。最後まで読んでいただきありがとうございました。 連載記事はこちら https://developers.gmo.jp/technology/9080 https://developers.gmo.jp/technology/10336 https://developers.gmo.jp/technology/11603

こんにちは、GMOインターネットの吉田です。UI/UXディレクターのお仕事とプロジェクトの流れについて、引き続き連載でお伝えします。※はじめての方は、ぜひVol.01とVol.02も読んでみてくださいね。 プロジェクト全体の流れおさらい 前回エントリーでは、「評価」フェーズまでをご紹介しました。 ユーザビリティテストを実施したことで、自信を持って開発フェーズに入ることができます。次はいよいよ開発スタートです! 開発 「開発」のフェーズに入ると、プロジェクトの主役はエンジニアさん達になります。開発に必要な情報は揃えたし、あとはよろしくね。といきたいところですが…開発を進めていくと、設計段階で考慮不足だった箇所が判明して、急遽仕様を再検討する。といったケースは少なくないです。 ディレクターはスケジュール通りに開発が進んでいるかどうかの進捗管理を行い、引き続きプロジェクトメンバーと密にコミュニケーションをとっていく必要があります。 　また、開発期間中にこっそり次の「検証」フェーズの準備を進めています。検証項目の作成も画面仕様を設計したディレクターのお仕事です。 検証 「検証」フェーズでは、テスト環境を使って要求通りに実装されているかどうか確認をします。検証中に判明した不具合は、修正→検証を繰り返し、改善を確認します。 比較的地味な単純作業が続くので、あまり楽しい作業ではないのですが...安心してリリース日を迎えるためにも、不具合は極力無くしておかなければいけません。 リリース いよいよリリースです! 当日はタイムテーブル通りにリリース作業が進んでいるか進捗管理をしつつ、陰ながらエンジニアさん達のリリース作業をドキドキしながら見守ります。リリース作業が終わると本番環境の動作検証をして、リリース作業は完了します。 なお、リリース後しばらくの間は、お客様の反応（SNSやお問合わせ、ご意見フォームの回答など）を注視するようにしています。 運用 リリースは完了しましたが、実はまだプロジェクトは続きます。 プロジェクトはリリースしたら、終わり。ではなく、リリース後のご利用状況の分析を行い、さらなる改善課題を出し、次の企画につなげていくことになります。 お名前.comでは、管理画面のリニューアルプロジェクトがリリースしてからも、定期的にNPSアンケートを実施し、アンケートの回答から多くの企画が誕生しています。 運用開始後の改善事例 表示速度の改善 最近ではアンケートの結果から、画面パフォーマンス改善のプロジェクトが立ち上がり、画面の表示速度を向上することで大きくNPSのスコアアップにつながったケースがありました。 UIの改善 管理画面のナビゲーションに対しては、手続きの画面が見つからない、どの画面から操作をすればいいかわからない。と言ったご意見をいただいていました。そこで、TOPページに「よく利用されるお手続き」のリンクボタンを配置し、さらに、利用に際しての手続きや設定画面があるのか把握しやすいよう「メニュー一覧」機能を実装するなどの施策を行ないました。 施策として実装した機能は、多くのお客様に利用していただいていますが、まだ管理画面については多くの課題があります。そのため、引き続き利用状況を分析し、ユーザビリティの改善を継続していきたいと思っています。 お名前.com Naviの「よく利用されるお手続き」ボタン お名前.com Naviの「メニュー一覧] おわりに 3回に渡って解説してきたプロジェクトの流れは以上です。 プロジェクトの流れやディレクターの立ち位置、なんとなくイメージできたでしょうか？ひとまず完結ですが...もう少しディレクターについて語らせて!!!! ということで、続きはまた次回のブログで！ 連載記事はこちら https://developers.gmo.jp/technology/9080 https://developers.gmo.jp/technology/10336 https://developers.gmo.jp/technology/12838

こんにちは、GMOインターネットの吉田です。UI/UXディレクターのお仕事とプロジェクトの流れについて、引き続き連載でお伝えしていきます。 プロジェクト全体の流れ 前回エントリーでは、「企画/調査」フェーズまでをご紹介しました。 何を開発して誰にどんな風に使ってもらうのか、少しずつ作るものの全容が見えてきたところです。 それでは続きのフェーズを解説していきます。 要件定義 「要件定義」のフェーズでは、「企画/調査」フェーズを元に開発する内容を資料にまとめます。 開発する内容がだいたい固まってきたところで、プロジェクトメンバーを募ってキックオフMTGを開催するので、参加者とプロジェクトの概要について認識合わせをするための資料づくりというイメージです。 要件定義の資料には、主に以下を記載します。 開発の背景や目的解決すべき課題ターゲット期待効果開発の概要や要件スケジュール GMOインターネットは事業会社なので、企画から開発まですべて社内で完結します。そのため、一般的な「要件定義」の内容とは少し異なるかもしれません。開発仕様の詳細についても「要件定義」の段階では確定している状態ではなく、次の「設計」フェーズで開発メンバーと一緒に議論しながら検討を進めていくことが多いです。 ちなみにGMOインターネットには「手をあげる」文化があるので、希望者は社歴や経験は問わずプロジェクトに参加できます。入社1〜2年目でも、比較的大きなプロジェクトを任せてくれるので、積極的にチャレンジしていきたいですね。（もちろん先輩社員がちゃんとバックアップしますよ！） 設計 「設計」のフェーズでは、具体的な開発の仕様を検討します。大きく分けると「機能設計」と「画面設計」があります。 「機能設計」には、API設計、ファイル仕様、DB設計などが該当しますが、基本的には開発エンジニアのメンバーを中心に検討を進めてもらいます。 「画面設計」では、主にUI設計をしますが、まずディレクターがワイヤーフレーム、モックアップ、プロトタイプを作成します。ディレクターの草案を元に、さらにデザイナー、開発エンジニアと議論しながら詳細な仕様を決めていきます。 Adobe XDで作成したモックアップの例 画面設計時の使用ツールは、「Adobe XD」をメインに使っています。 「Adobe XD」は、作成した画面イメージをかんたんに共有しやすい点が便利です。プロジェクトの規模や内容によって、その時に合ったツールを選択しているので、過去にはmoqups、Skecth、Figma、InVision...なども使用していたことがあります。 また、画面設計をするうえで「企画/調査」フェーズで作成した「ペルソナ」がとても役に立ちます。（ペルソナの詳細はUI/UXディレクターのお仕事とプロジェクトの流れ Vol.1を確認してください。）例えば、クリックして別のページに遷移するUIを検討する場合、お名前.com のペルソナは、「比較的年齢層が高めでITスキルは低〜中程度」を考慮して、アイコン表示だけではなく、アイコンとテキストを表示して何の機能なのかを認識しやすいようにしています。 評価 「評価」のフェーズでは、「ユーザビリティテスト」を実施します。「ユーザビリティテスト」とは、ユーザーが迷わずにタスクを完了できるか観察するもので、Adobe XDで作成したプロトタイプを使います。テストで課題が見つかると、改善→テスト→改善→テスト…を繰り返します。 Adobe XDで作成したプロトタイプの例 GMOインターネットでは、基本的に社内の人にテスターとして参加してもらい、テストを実施しています。（リサーチ会社を使って、テスターをリクルートする場合もあります。） 「テストはリリースしてからやればいいのでは？」と思うかもしれませんが、開発実装する前の段階でテストすることがとても大事です。 一般的にテストを2回実施することで不具合を50%軽減できる。と言われていて、テストすることで開発の手戻りを防ぐことができます。また、検証フェーズでは機能の不具合を見つけることができますが、ユーザビリティの問題を解決するのは難しいです。自分たちが設計した画面でお客様が迷わず操作できるかどうかの確認をするためにも、評価フェーズの段階でユーザビリティテストを実施することが重要です。 おわりに 次回いよいよ怒涛の「開発」フェーズに入ります。ディレクターは開発作業はしないですが、開発段階で色々な問題が判明することが多く...実はけっこう忙しいフェーズです。 続きはまた次回のブログで！ 連載記事はこちら https://developers.gmo.jp/technology/9080 https://developers.gmo.jp/technology/11603 https://developers.gmo.jp/technology/12838

こんにちは、GMOインターネットの吉田です。ふだんナゾに包まれた（？）UI/UXディレクターのお仕事とプロジェクトの流れについて、連載でお伝えしていきます。本エントリー後半では、GMOインターネットが提供するサービス「お名前.com」UX向上のために作成したカスタマージャーニーマップも紹介いたします。 はじめに 私の所属しているディレクターチームは、現在7名です。 中途採用の人もいれば新卒採用の後輩もいて、前職の経験などバックグラウンドはみんなバラバラです。同じチーム内でも違う役割を担っているため、チーム全員がUI/UXディレクターという立ち位置ではありませんが、ディレクターチームとして目指していることは、"ユーザー体験（UX）を向上して、ブランド、サービスのファンをたくさん作ること"です。 また、GMOインターネットではドメイン「お名前.com」やプロバイダー「とくとくBB」など比較的大きなサービスを提供しているため、「サービスデザイン」の考え方も取り入れながら、売る人、創る人、守る人、お客様など関わるすべての人が満足できる持続可能なサービス設計を心がけています。 プロジェクト全体の流れ ディレクターのお仕事は、ひとことで言うと「デザインと開発（プログラミング）以外は何でもやる！」です。 プロジェクトの内容によっても異なりますが、企画からはじまり、仕様決め、ミーティングの開催、資料作成、検証作業...などなど、果てしなくさまざまです。 それでは、各フェーズごとにディレクターのお仕事を解説します。 企画/調査 「企画/調査」は、まだプロジェクト化する前のフェーズです。 発案はディレクターチームに限らず、事業部（マーケティングやサポート）、開発部、グループ会社から企画が出ることもあります。 このフェーズでは「市場調査/競合調査」、「ペルソナ作成」、「カスタマージャーニーマップの作成」を行なっています。 市場調査/競合調査 情報収集をして、ターゲットとなる市場や競合他社の調査をします。競合とのスペック比較表などを作成して、競合のターゲット層や売り方、強みの部分などを資料化。自分たちのサービスはどこを狙っていくべきかを探っていきます。 調査は比較的しっかり時間をかけて、企画の根拠となる情報をたくさん集めることがプロジェクト成功のカギです。 ペルソナ作成 企画内容がある程度決まったら、「ペルソナ」を作成します。 「ペルソナ」とは、サービスや機能を利用するユーザーの人物像を具体的に表したものです。利用シーンや使い方など、ユーザーの気持ちをイメージしやすくなるメリットがあります。 お名前.comのペルソナ お名前.comのペルソナは、会員情報やアンケートの情報から作成しました。お名前.comのユーザーさんは男性が多く、比較的年齢層が高めでITスキルは低〜中程度の方が多い傾向にあります。 ペルソナは、サービス設計や画面設計を検討する重要な判断材料にもなります。「これ大島さん操作できる？」、「大島さんこのボタンの意味わかるかな？」というように、ミーティング中にペルソナの名前が飛び交ったりします。 ディレクターとしては、プロジェクトメンバーがペルソナに愛着を持って議論してくれるとすごくうれしいです。 カスタマージャーニーマップ作成 ペルソナが完成したら、次に「カスタマージャーニーマップ」を作成します。 「カスタマージャーニーマップ」とは、ユーザー体験を旅に見立てて可視化したものです。サービスの利用前〜利用中〜利用後の状況、行動、思考、感情を1枚のマップにまとめます。 ユーザーが不満に思っている箇所を洗い出し、改善が必要なポイントを見つけることができます。 お名前.com レンタルサーバーのカスタマージャーニーマップ レンタルサーバーリニューアルのプロジェクトでは、複数の社内メンバーに参加してもらい、模造紙と付箋を使って情報をまとめていきました。 感情曲線を見ると申込み後に下降しているポイントがいくつかあります。利用に関する不明点や申込み後の不安感を解消するために、お名前.com Naviやサーバーコントロールパネルではサポートコンテンツの表示や、チュートリアル機能の実装など、改善策として検討した内容を開発していきました。 おわりに 次に「要件定義」のフェーズに入りますが...今回の解説はココまでです。ディレクターのお仕事について、ちょっとだけ興味湧いてきましたか？？ 続きはまた次回のブログで。 連載記事はこちら https://developers.gmo.jp/technology/10336 https://developers.gmo.jp/technology/11603 https://developers.gmo.jp/technology/12838