2019年2月28日木曜日
デザインレビューはじめました
2月 28, 2019
こんにちは、デザイナーの藤村です。デザインチームで最近デザインレビューを始めました。とても勉強になるし、やっていてデザインそのものの面白さにさらに気付かされています。チームでTryしている内容をご紹介します。
※ここで言う「レビュー」とは、リリース判断の可否を決める機能のことではなく、デザインをブラッシュアップさせるための、批評とフィードバックそのものを指しています。
開発チームの一員としてのデザイナー
シタテルの開発チームは、デザイナー1名+エンジニア数名+関係者(企画、マーケ、営業、生産など様々)という構成です。デザイナーは特定のサービスに所属しており、これまでデザインのレビューはサービスチーム内でのみ行なっていました。シニアエンジニアが実装判断した上でチームで要件定義を行い、デザイナーが仕様の叩きを作成、フィードバックをもらいながら徐々にビジュアル面を作り込んでいくという流れが主です。
開発チームでのレビューのいいところ
複数の職種で構成されているため、さまざまな視点からの批評を集めることができます。
エンジニアは機能的な破綻がないか、条件による表示を想定できているか、堅牢性を保つことができているのか、と言った視点で批評を返してくれます。お客様と向かいあっている方からは、お客様に対して自身が機能や画面説明ができるのかという視点で、マーケティング担当は有用なデータが取れるのかという視点で、それぞれフィードバックを返してくれます。

エンジニアは機能的な破綻がないか、条件による表示を想定できているか、堅牢性を保つことができているのか、と言った視点で批評を返してくれます。お客様と向かいあっている方からは、お客様に対して自身が機能や画面説明ができるのかという視点で、マーケティング担当は有用なデータが取れるのかという視点で、それぞれフィードバックを返してくれます。

悩ましいところ
一方で、狭義の意味での”デザイン”を批評する環境がありませんでした。機能上は問題ないのに違和感がある、なんだか野暮ったい、画面を使おうとしたとき操作に迷う瞬間がある。。ちょっとした相談はデザイナー同士でしてましたが、お互い忙しそうだと遠慮してしまったり、各々がモヤモヤしながら自分ひとりで格闘していました。
デザインチームでレビューを始めた
シタテルのデザイナーは週に1回情報共有のための定例会を行なっていました。各プロジェクトの進捗を共有することを目的にしていましたが、みんなでデザイン力を上げようということで、他サービスのデザインレビューもやってみることにしました。
意見がほしいときは、以下のテンプレートを使ってGithubにissue化します。見てほしいデザイナーにアサインをして、後はみなさんの意見を待ちます。
レビューの仕方は、わたなべなつきさんの「デザインチームでよりよいコミュニケーションをおこなうための工夫」を参考にさせていただきました。
レビューをしてみる
Zeplinにコメントをしあう形で進めました。1デザインに対して数十に及ぶ場合もありました。私自身もいざコメントをしようとすると、どこに違和感や改善点を見出したのか、なかなか言葉にすることができず思った以上に時間がかかりました。
どうしても、「こうして欲しい」という指示型のコメントになってしまうのです。「ここでは目的と違う認識をしてしまうので再考が必要だと感じました」のように、根本的な問題点を指摘するようにするには、批評者自身もそこまで潜っていかないと見つけることができないんだなと実感しました。デザインをどう見るか、焦点がどんどん精緻化していくので、とても面白く勉強になります。
どうしても、「こうして欲しい」という指示型のコメントになってしまうのです。「ここでは目的と違う認識をしてしまうので再考が必要だと感じました」のように、根本的な問題点を指摘するようにするには、批評者自身もそこまで潜っていかないと見つけることができないんだなと実感しました。デザインをどう見るか、焦点がどんどん精緻化していくので、とても面白く勉強になります。
3週間やってみて
デザイナー定例でみんなで振り返って以下のような感想があがりました。やってみた感覚と共に、もっとよくするためのアイディアも色々出てきました。当たり前のことなんですが、実際にやってみるって本当に大切ですね。
2019年2月21日木曜日
Alexaスキルを作ろう - 第2回
2月 21, 2019
こんにちは。シタテルでエンジニアをしている熊谷です。
SPECというサービスのバックエンド開発などを行っています。
今回は前回の続きで、Alexaスキルの作成について書いていきます。
今回は、前回作成したスキルから呼び出されるLambdaを作成します。
まずAWSコンソールにログインして、Lambda - 関数の作成に行きます。
そこから「一から作成」、「設計図」などが選べます。
「設計図」でalexaを検索すると、
それぞれのスキルタイプに合わせたsdkが用意されています。
使用したいタイプのsdkがある場合は、それを使用しましょう。
今回はとても単純なスキルを作成したので、「一から作成」を選択します。
いろいろな言語が選べますが、今回はNode.jsで作成しました。
関数を作成すると、シンプルなレスポンスを返す関数が書かれているので、その中身を変更します。
今回作成したスキルは、「言葉を逆さまにする」です。
シンプル...!
コードを記述します。
こんな感じになりました。
responseの形式について、詳しくは応答の形式を参考にしてください。
「intent.slots.word」の部分の「word」は前回設定した「スロット名」に対応します。
次にこのLambdaを呼び出すトリガーを設定します。
「トリガーの追加」から、「Alexa Skills Kit」を選択して、スキルID(alexa developer consoleを参照)を設定します。
alexa developer consoleでテストしてみましょう。
前回、スキルの呼び出し名とサンプル発話を設定しました。
テスト画面で、
「<スキルの呼び出し名>を開いて、<サンプル発話>おはよう」と入力すると‥
ちゃんと逆さまにして返してくれましたね!
シンプルなスキルですが動くと面白いと思います。
今回はここまでにします。
次回は実機でのテストとスキルの公開について書ければと思います。
ありがとうございました!
SPECというサービスのバックエンド開発などを行っています。
今回は前回の続きで、Alexaスキルの作成について書いていきます。
今回は、前回作成したスキルから呼び出されるLambdaを作成します。
まずAWSコンソールにログインして、Lambda - 関数の作成に行きます。
そこから「一から作成」、「設計図」などが選べます。
「設計図」でalexaを検索すると、
それぞれのスキルタイプに合わせたsdkが用意されています。
使用したいタイプのsdkがある場合は、それを使用しましょう。
今回はとても単純なスキルを作成したので、「一から作成」を選択します。
いろいろな言語が選べますが、今回はNode.jsで作成しました。
関数を作成すると、シンプルなレスポンスを返す関数が書かれているので、その中身を変更します。
今回作成したスキルは、「言葉を逆さまにする」です。
シンプル...!
コードを記述します。
exports.handler = async (event) => { const word = event.request.intent.slots.word.value; const response = { "version": "1.0", "response": { "outputSpeech": { "type": "PlainText", "text": word.split('').reverse().join('') }, "shouldEndSession": false }, "sessionAttributes": {} }; return response; };
こんな感じになりました。
responseの形式について、詳しくは応答の形式を参考にしてください。
「intent.slots.word」の部分の「word」は前回設定した「スロット名」に対応します。
次にこのLambdaを呼び出すトリガーを設定します。
「トリガーの追加」から、「Alexa Skills Kit」を選択して、スキルID(alexa developer consoleを参照)を設定します。
alexa developer consoleでテストしてみましょう。
前回、スキルの呼び出し名とサンプル発話を設定しました。
テスト画面で、
「<スキルの呼び出し名>を開いて、<サンプル発話>おはよう」と入力すると‥
ちゃんと逆さまにして返してくれましたね!
シンプルなスキルですが動くと面白いと思います。
今回はここまでにします。
次回は実機でのテストとスキルの公開について書ければと思います。
ありがとうございました!
2018年12月12日水曜日
Alexaスキルを作ろう
12月 12, 2018
こんにちは。シタテルでエンジニアをしている熊谷です。
主にSPECというサービスのバックエンド開発(Rails)を行っています。
少し前にAlexaスキルの作成を試したので、その流れを簡単に説明していきます。
手順
1.Amazonアカウントを用意する
すでにamazon.co.jpの開発者アカウントがある場合は、それを使います。
お買い物用のAmazonアカウントを使用して、開発を開始できます。
Amazon Developerから、サインインして、情報を入力すると、開発用アカウントが登録されます。
※ 画像のページで、ログインをして進みます。[Amazon Developerアカウントを作成]から進むと、amazon.com用のアカウントになってしまい、US向けのスキルになってしまうようです。
2.Alexa Developer Consoleにアクセス
3.[スキルの作成]をクリックし、スキル名などを入力する
4.スキルのページで、[呼び出し名]を設定する
5.エンドポイントを設定する
- AWS Lambdaが推奨されているので、Lambdaでエンドポイントを作成するのが良いと思います。
- リクエスト、レスポンスはJSON形式で送信します。
- 作成したLambdaのARNを指定します。
6.インテントを作成する
- [インテントを追加]をクリックし、カスタムインテントを作成します。
7.作成したインテントのページで、スキルの発話時に使用する、スロット(変数のようなもの)を設定する
- スロットには、日付、数値、検索クエリー(文字列)などの型を指定できます
8.インテントを設定する
- 作成したインテントの設定で、サンプル発話を登録します。
- サンプル発話には上で作成したスロットを
{スロット名}
のような形で使用できます。
これで簡単なスキルを作成できました!
今回はざっくりした流れの紹介なので、ここまでにしたいと思います。
次回はLambdaの内容や、作成したスキルの公開、テストなどを説明していこうと思います。
登録:
投稿 (Atom)