AWSの話題を中心に、日々の業務やプログラミングの徒然を綴るエンジニアブログです。

HANDS LAB

HANDS LAB ENGINEERS BLOG

ハンズラボエンジニアブログ

デザインを理解したいエンジニアに、デザイナが説明するといいこと

Pocket

こんにちは。デザイナの田名網です。
先日、エンジニア向けに社内勉強会をしました。

テーマは、デザインの基礎と、UX/UIについてです。
前回、新卒さん向けに行なった内容(新卒さん向けデザイン基礎研修をやりました。1回目 “デザインってなに?”)が好評いただいたので、基本はそのまま、今度はエンジニアさん向けに開催しました。

このスライドは前回も見ていただいたと思います。

 

デザイナ vs エンジニア?

巷では、デザイナ vs エンジニアに関する話で溢れていますね。
その様子は、対立というよりかは、近頃は「いかに仲良くやっていくかノウハウ」とか、「ハイブリッド型のエンジニア/デザイナであろう」といったような
平和な方向にシフトしているような感じがして、個人としては嬉しいです。仲が良い方がいいですね。
それほど言及されるのは、デザイナとエンジニア同士が日頃より論点や着眼点が違ったり、理解し合うのが難しい部分があるのでしょう。

「デザイン」と聞くと、余裕があったらやるデコレーションや、センスがものを言うアートだと勘違いされてしまいがちで、機能や重要度の部分が理解されづらいです。
そのため、実際の開発プロセスの中でも軽視されたり、省略されてしまうことも多いので、デザイナの立場から危惧していたところもありました。

エンジニアだらけの環境の中で考えたこと

ハンズラボは、管理部門を除く開発部門のうち、95%がエンジニアの会社です。

世界的に(!)理解し合えないと言われているデザイナとエンジニアですが、
ラボではデザイン思考やUXの大切さがじわじわと興味を持たれ、市民権を得てきています。

わたしはUXのデザイナなのですが、コードも書きますし、フロントエンドも実装するので、デザインだけやっているわけではなく、比較的エンジニア視点を持っていると思ってます。
そのせいもあって、デザインは、設計に近いロジカルなものだと考えることに馴染みがあります。

そもそも、デザインは、語彙の意味ですと本来はアートよりかは設計的な意味合いが大きいですし、
実際画面のユーザビリティについては特に、論理的な理由や裏付けが必要です。
デザイナが絵を描くだけの時代は、終わったと言われてますね。

 

実はエンジニアって、デザインを理解するのに向いているのでは?

デザインもロジカルな面があると知れば知るほど、なんだ、そんなことなら、エンジニアの思考と親和性あるのでは?と思ったのです。
今回は具体的に、エンジニアに、「デザインについてわかってほしいなー」というときに、どういう風に伝えたらいいか考えてみました。
続きを読む デザインを理解したいエンジニアに、デザイナが説明するといいこと

Pocket

新卒新入社員の仮想プロジェクト、完了しました

Pocket

大石です。
最近、弊社では専らPokemonGOが流行っています。
23区外にある自宅で何時間もアプリを起動しておくよりも、オフィスで昼休みにササッとプレイする方が捗ります。
うっ、ドードーが捕まえてほしそうな目でこちらを見ている……。

さて、先日、新卒新入社員だけで仮想プロジェクトやってますの中で、研修で行っていた仮想プロジェクトについて書きました。
6月末、仮想プロジェクトを終えましたので、今回はその話を書いていこうと思います。

前回のおさらい

時間と技術面のみの制限だけで自由にシステムを作ることになった新人4名。
自社のオフィスで使える蔵書管理システムをサーバレスで作って、先輩たちをぎゃふん(死語)と言わせてやるんだ……!
バックエンドでAWSを活用してサーバレスに、フロントエンドはPC画面の作成と同時にmonacaを使ってスマートフォンのハイブリッドアプリに挑戦。
果たして、無事に蔵書管理システムは出来上がるのか!?(謎の予告風

蔵書管理システム

誰がどの本を借りたのかを記録し、貸し出し状況を社内で共有できるような「オフィス特化型蔵書管理システム」。
最終的に以下のような機能をリリースしました。

機能

  • 借りる
  • 返す
  • 予約
  • 蔵書の検索・結果の表示
  • 蔵書の新規登録・削除
  • 予約の通知(予約が入るとその本を借りているユーザーへSlackで通知)
  • 人気の本ランキング(1週間に借りられた回数がより多い本を5位まで表示)
  • 本が借りられた履歴
  • ユーザが本を借りた履歴

 

フロントエンド

構成

  • HTML5:マークアップ
  • CSS3/Bootstrap v3.3.6:レイアウトのコーディング
  • jQuery v2.2.4(モバイルはv2.0.3):バックエンドとの通信、DOM処理
  • JavaScript:jQueryでできない処理を行う
  • Monaca:モバイルアプリ(ハイブリッド)の開発プラットフォーム

デザイン

PCの画面↓
BooKing_PC
スマホアプリの画面↓
BooKingiphone
UI・UXに考慮し、操作性に違和感が無いようにボタンなどを既存のアプリと同じような配置にしました。
また、同時に同じ本を借りられないようにするなど、ユーザが通常は行わないような動作をしないようにし心がけました。

バックエンド

AWSの構成

技術要件

  • API Gateway:APIの管理
  • Lambda (Python):DBアクセス、ランキングを定期的に作成
  • DynamoDB:永続データの保存
  • Cognito:ユーザ管理

 

開発方法について

スケジュール

  • 企画立案・決定:4日
  • プロトタイピング・設計:4日
  • α版実装:5日
  • 基本機能実装:8日
  • 付加機能実装:3日
  • テスト:5日
  • リリース・運用:2日

実際に作業できる日数は31日でした。
やはり実装に手惑い、テストが押せ押せな感じに……。
とはいえ、じっくり実装したおかげか致命的なバグはあまり無く、なんとかなったように感じます。

開発での技術的課題 フロントエンド

  • HTML, CSS, JavaScript (jQuery):研修で一切やらなかったため、慣れるまでに時間がかかった
  • OS依存のバグが、iOS、Androidそれぞれ1件ずつ発生した。どちらも実装方法を変えることで対処できた(重大なものは無かった)
  • 時間的制約でユニットテストができなかった

 

開発での技術的課題 バックエンド

  • 当初はAWS SNSも用いたプッシュ通知を予定していたが、時間の制約のため断念

 

チーム開発する上での課題

  • 共有不足:API仕様書の更新時の周知などができなかった。その解決策として朝礼、夕礼、昼休憩後など、細かに共有の時間を設けた
  • レビュー不足:UI設計やAPI設計など、設計者の一存で決まってしまったところが多かった

 

先輩社員の反応

6月末、先輩たちに向けてこの仮想プロジェクトの最終発表を行いました。
無事出来上がった蔵書管理システムを見た先輩たちから、褒め言葉をもらうことができました!1ヶ月半の短い中でこんなすごいものが作れるとは思わなかった!と。
さすがに死語であるぎゃふん!とは言わせることはできませんでしたが……(笑)

研修を終えて

研修を終えた今、私たちはそれぞれチームに配属が決まりました。
情報系卒の2名は既に業務に入っていますが、非情報系2名(うち一人は私)は実際の業務に近いことを演習のようなスタンスで勉強しています。
PythonでLambdaを書く日々が、黒い画面でシェルスクリプトを書く日々に変わりましたが、勉強が大切であることには変わりません。
日々の業務に追われる前に、様々なことを身につけていけたらなーと思います。

Pocket

新卒さん向けデザイン基礎研修をやりました。1回目 “デザインってなに?”

Pocket

こんにちは。田名網(たなあみ)です。

以前の投稿「新人研修(技術以外のところ)を考えて、やってみた話」
を踏まえ、デザイン研修をした話です。

ハンズラボはエンジニアメインの会社ですが、
実はグラフィックデザイナ1人とUXデザイナ1人(私)もひっそりと生息しております。

わたしについて

ひっそりと生息しているわたしが、普段何をやっているのか、まず紹介させてください。

ラボでは主にUXの設計・監修と、UIのデザイン、フロントの実装などをやっております。

簡単に言うと、ユーザが触る画面やその動きが、美しく使いやすいものであるようにするため、
絵を描いたり、コードを書いたり、(文句を言ったり)、使い心地を聞いて回ったりするお仕事です。最近の大きいプロジェクトですと、東急ハンズの内製POSである「HandsPOS」のUXデザインを担当しました。
店員さん側もお客さん側も大画面のiPadを使用し、
自動釣銭機、レシートプリンタとも接続され、複雑な取引や割引、ポイント使用/付与などもできながら、東急ハンズの膨大な商品数100万SKUをさばける子です。
操作面で店員さんの負担を軽減しようと、あらゆる箇所を熟考しました。
HandsPOS

全国順次入替に行っております。お目にかかることもあるかもしれません。

では自己紹介はこのへんで。

デザイン、飾りじゃないよ

「デザイン」というと、
外装を飾るスタイリングの話だ、とか、重要ではないプラスアルファの世界だ、と捉えられてしまいがちです。
しかし、デザインとは本来「設計」であり、計画的にプロダクトやサービスをつくることそのものなのです。
ということを、これからエンジニアとしてごりごりやっていく新人みなさんをデザインネイティブキッズにすべく、まず伝えたかったのでした。
この研修については、3回分の日程をとりました

– 1日目:「デザインてなに?」(UXデザイナ田名網担当)
– 2日目:「いろとかたち」(グラフィックデザイナ北田担当)
– 3回目:「UX / UI について」(UXデザイナ田名網担当)

今回は1回目の「デザインてなに?」のお話です。

本題、研修内容

– 3回分のうちの1回目
– 座学2時間(講義:質問 = 8:2)
– 達成できること:デザインは何のためにあってどういうことなのか、自分なりに説明できる

早速ですが、用意したスライドはこちらです。

講義のあらすじ

スライドは以下のような内容で話を進めました。

デザインを取り巻く言葉の整理

デザインは
– 目的(課題解決)のための計画と工夫のこと
– 美感を起こさせる見た目と機能が必要

デザインはデコレーションじゃない
– でもデコレーションは表現方法の一つ

デザイン領域について

デザイン思考になろう
– どうしてこうなっているのか 、どうしたかったのか、どうさせたかったのか
– 形状・色・配置の意図を探る

感覚の体験
– グラフィックやピクトグラムの例
– 有名プロダクトの例

デザインはいろいろな領域を横断して考える→なんのため
– 東急プラザ銀座の例

このデザインをしたら、どんな世の中になるのか考えよう

まとめ
– すべてのデザインに理由を持とう
– 本質的な目線になろう
– 人間、社会について知ろう
– 何が美しいと感じているのか五感で捉えよう
– 本はいっぱい読もう

詳しい内容は、スライドを見ていただくとして、この記事内では割愛します。

図や写真が多いと伝わりやすいので、例やサンプルを数多く見てもらうよう心がけました。
デザインは感覚的・情緒的な部分も大切な要素ですし、言葉で説明できない部分を感じてもらうことができたと思います。

デザインの重要性

デザインするということのなかで、情報設計のパートが大事な要素でもあるので、表面上の体裁を整えること以前に、「なにを」「だれに」「どのように」作用させるのか、本質的な視点と考え方を持つことが重要です。

デザインの「目的」を明確にするために、理論的な視点を得、
デザインを「手段」として利用するために、実践的なノウハウを仕入れる。
まずはそのデザインすることの立ち位置や、必要性について、この回でしっかり解説できました。

みんなの反応は?

実際に新卒エンジニア4人のみなさんの中でも、もともとデザインに興味があったり、重要性を理解してくれていた方もいたようで、
早速仮想プロジェクト( 新卒新入社員だけで仮想プロジェクトやってます )のなかでもユーザビリティについて考えてくれたりしておりました。
感心感心です!

わたしの反省や感想

私の話をさせてもらえば、もともとは自身が手をかけるよりかは、考え方を考えて、その考え方を伝えていきたい、という思いがありました。
実際に私が普段から取り組み、考えていることを、ひとに伝わるように言葉にし、資料にまとめるということが、自分自身の考えをブラッシュアップさせるためにもとてもいい勉強になりました。
自分が理解できていない部分も明確になって、いい機会です。
発表するって大事だなと!

よいサービスやプロダクトをつくっていく手段として、デザインが受け入れられ、利用していってもらえれば嬉しいです。

Pocket

新人研修(技術以外のところ)を考えて、やってみた話

Pocket

田部井です。

ハンズラボには今年4月から、初の新卒が4人入社しました。

新卒は初めてということで、研修を組み立てるところから検討する必要があり、研修担当者で色々頭を悩ませました。
親会社の東急ハンズの研修に一部混ぜてもらったり、社外研修に行ったりというのはあるんですが、いわゆるビジネスマナーや社会人としての心構えとかを教わるくらいでしょうか。

ハンズラボのように、規模の大きくないIT企業として知っておくべき知識としては、ちょっと物足りないところもあるのでは・・・
というところから、ハンズラボオリジナルで追加の新人研修を考えることにしました。

こういうのをエンジニアが考えて構築するという機会はなかなかないと思うので、やってみたことをメモ的に書いてみたいと思います。
エンジニアリング観点からの研修については(https://www.hands-lab.com/tech/entry/1531.html)にあります。
この記事では、それ以外の部分についての記録です。

一般的な研修・講義

ハンズラボの話

まずは自分の会社について、また会社が置かれている状況についての話をしました。

  • ハンズラボは東急ハンズの子会社で、東急ハンズは東急不動産ホールディングスの子会社であって、ハンズラボはそのグループ内でどういった役割なのか?
  • ハンズラボの設立経緯や東急ハンズ情シスとしての仕事
  • これから求められる外販としての仕事、今後の目標
  • そして現状のプロジェクトチーム構成

等々、基礎的な情報、バックグラウンドの説明です。

会社の歴史には興味が無いとか、会社の目標はよくわからないけどチームは頑張る、なんてこともあると思うのですが、
そこは少人数の会社ですから、全員に目的意識を持って欲しかったので、1ワク設けて説明をしました。

プロジェクトの話

仕事をするときは、プロジェクトって組織・チーム単位でやることが多いよ、ということでプロジェクトの話。

ここでは分かりやすく、ウォーターフォールな受託案件を例にして、営業・提案から開発、テスト、運用までの流れを説明。
また、プロジェクトごとにPMやPL等、役割(≠役職)が割り当てられるよ、という話をしました。

制度の話

弊社の場合、設立4年目ということもあり、まだまだ入社時の説明が確立していない点があります。
特に入社時点での総務系の説明はあるのですが、以下の点について補足的に話をしました。

  • エンジニアとして身につけて欲しいスキル
  • もしくは組織のメンバーとしての心構え(情報発信等)
  • それにともなう役職と評価方法
  • 評価による給与・賞与への影響

IT業界のお話

プロジェクトの話と関連して、IT業界にはどういう企業があり、どういうエンジニアがいるのか、という話。
主にはIT企業をエンタープライズ系、オープンWeb系に分けて、ステレオタイプに説明しました。
(例えば、エンタープライズといえばスーツで保守的、Web系といえばTシャツで新しもの好き、みたいなw)

ハンズラボはエンタープライズな親会社のシステムをやる一方、Webな考え方で最新技術に突っ走ることもできる、とても楽しい会社だよ、という結論を伝えるのも狙いでした。

会社とお金の話

自社の話は上記でしたのですが、そもそも会社ってなんだっけ?というお話です。

  • 株式会社?
    • 株って?
    • 子会社?グループ会社?
    • 株主?会社は誰のもの?持ち分って?
    • じゃあ何のためにお金を稼ぐ?
  • 会社のお金
    • どういう見方があるか
    • どうなっていたらOKなのか

入社時点で「会社とお金」の話はしておきたいっていうのは、以前から考えていたことでした。(前に元弊社エンジニアの臼井氏が新卒のときに経験したらしく)
特に、会社に入ると「お金お金」と上司や先輩が言っているのを聞いて、違和感を覚えたりしないように・・・(お金は汚くないよ!)

また、会社は株主のものということが頭でわかっている人は多いですが、

  • そうは言っても様々な構成員がいて成り立っている
  • ただし株主の意向に沿わなくてはならない

という観点を忘れてはいけない(戒め)ということも知っておいて欲しかった。

マナー研修

弊社が誇る人材会社出身の元女帝青木から、振り返りを兼ねてマナー研修をしました。

追加的な研修・講義

さて、上記は比較的必須に近い知識の講義でしたが、以下のようなちょっと面白い研修も取り入れました。

企画PJ

弊社は完全シフト制勤務で、新人はゴールデンウィークの中3連休が休みではなかったため、息抜きがてら「企画を作る」仮想PJをやってもらいました。
4人を2チームに分けて、それぞれ外出してもらい、目についた世の中の課題を解決するシステムを企画する、という趣旨。
システム的な制約は考えずに、自由な発想で企画し、最後にプレゼンをすること!という制約にしました。

ここでは、以下のポイントを知ってもらい、今後の仮想プロジェクト研修につなげる意味合いがあります。

  • 企画する
    • ブレスト、打ち合わせ、議事録
    • 課題洗い出し、解決策検討
  • プロジェクト運用
    • 目標を設定し、複数人で課題・タスクを分担し解決する
    • リモートでのコミュニケーション
  • 成果物の準備とプレゼン

デザイン基礎

弊社にはデザイナー/フロントエンドエンジニアが2名いるので、せっかくなのでデザイン・UI/UX基礎編を説明してもらいました。
これは正直、エンジニアとして、管理者としての勉強しかしてこなかった私には、新卒が羨ましい!という内容でした。

(詳細は別途デザイナーがブログ書いてくれるかな・・・?)

先輩社員の話

これもちょっと面白いなと思っているんですが、弊社はけっこう多彩なバックボーンを持った社員が多く、
その中から4人ほどピックアップして、どういう経歴なのか、ITでどういうことをやってきたのか、などを語ってもらいました。
基本的には内容は自由としたのですが、皆さんアツイ思いを新人に投げてくれました。

仮想PJ

そして研修の総仕上げとして、4人での仮想プロジェクトをやってもらっています。
こちらは大石の記事に詳しいです。(https://www.hands-lab.com/tech/entry/1628.html
まだ半ばですから、完了後にレポートが出てくることでしょう!

終わりに

新人研修カリキュラムを悩みながら考え、実際にやってみるというのは、自分自身いい経験になりました。
会社とは?の話なんかは、私も勉強不足を実感しましたし、説明も下手だなぁと実感・・・

またこのメモは来年の担当の役に立つのではないかと期待しているのと、
皆さんの会社ではどのような面白い研修をしているのか、ぜひ教えて下さい!

Pocket

AWS Summit Tokyo 2016 参加レポート

Pocket

こんにちは。加藤です。

「エグゼクティブからデベロッパーまで 10,000 人以上が集まる 3 日間」
AWS Summit Tokyo 2016
が、6月1日〜3日に東京品川のグランドプリンス新高輪で開催されまして、

私なんと3日間フルで堪能してきました!

もちろん他のエンジニアも多数参加!
公式無料Wifiも完備されているので合間に仕事をしつつ、夜にはパーティーやらJAWS界隈の方やらとAWS愛の語らい(という名の飲み会)もありーので、なかなかにハードではありましたが、とにかく内容の濃い3日間を過ごせました。

知識も意識もアゲアゲでございます。

約70あるセッションも出来れば全部見たいけど選ばなければならないフジロックフィスティバル、という事で個人的にはサーバレスの可能性を追求 (`・ω・´)キリッ したく、そのあたりのセッションを追いかけましたが、メイン会場と飛天会場は何回往復したのか分からないあるあるでした。
ちょっとキャパ的にもそろそろ限界を感じたんですけど来年も同じ会場なんでしょうかと思いつつ、具体的なセッションのレポートはどなたかにお任せするとして、全体を通して感じた事を上げていきたいと思います。

昨年はニューノーマルがテーマだった様な印象がありましたが、今年はクラウドジャーニーを全面に出してきておりました。AWSの企業利用という事においてざっと一通り回った印象を受けました。
それぞれの企業のサーバレスやDevOps(DevSecOps)、はたまたIoT やビッグデータ等、ただオンプレから移行するだけじゃなく、AWSの特性に合わせた事例が多く出てきてました。
来年はAlexaの事例とか出てきちゃうんじゃないでしょうか。日本語対応が待たれますね。

ちなみに昨年は弊社から社長・エンジニア2名と3セッションもあったのですが順番でしょうか。残念ながら今年は弊社セッションはありませんでした。
AWSパートナー中から選ばれるArchitecture of the Year 2015を受賞したのに!ぐぬぬ。
APN Architecture of the Year 2015を受賞しました!

そして弊社のジャーニーについて気になる方は不定期に開催される
ハンズラボようこそ手羽の会」へ。(宣伝しろと言われた気がした)
https://handslab.doorkeeper.jp/

話を戻しますが、唯一残念だった事と言えば新たなサービス発表があまりなかった事でしょうか。
キーノートで発表!その場でウェーイ!とかを期待して、ワクワクしながら正座して待ってた事もあり少し残念でした。
もちろんいくつかの発表はありましたが、会場での盛り上がりがあまりなかったような。。。
(一部の人達は歓喜だった様です)
Summitの半月前に発表したCertificate Managerの東京対応を合わせれば盛り上がったのにと思いましたが、そこはサービスを待っている人たちを優先するAWSの素晴らしさですね。

さて、あまり中身の無い投稿で怒られそうなので、Summitで発表があったまとめ。

  • Import/Export Snowball Tokyo Region → By the end of this year
  • RDS for SQL Server MultiAZ Tokyo Region → 2week → 2016/06/09 Done!
  • Scaling Amazon ECS Services Automatically Tokyo Region → Q3
  • EC2 Container Registry Tokyo Region → Q4

※過不足や間違いがありましたらご指摘頂けますと幸いです。

Summitの後はJAWS-UGのナイトイベントという事で、司会を弊社社長の長谷川とマーケティング青木が担当!
ナイトイベントのレポートについては、ななななんとこれまた青木がJAWS-UG広報としてASCIIへ寄稿しているのでよろしくお願いします。
これがなくっちゃ終われない!JAWS-UG Nightレポート

という事で来年は再び皆様に直にお届けできる様に、
2年連続の受賞を目指してジャーニーしちゃうぞ☆

Pocket