デザイナーの私がRails Girlsに参加して良かったこと
Rails Girls Japan Advent Calendar 2016の寄稿ブログです!
私は2015年のRails Girls Tokyoに生徒として参加しました。
普段は「みんなのウェディング」という結婚式場探しのwebサービスのデザイナーをしてます。(みんなのウェディングは、2016年にはスポンサーにもなりました)
そんな、デザイナーの私がRails Girlsに参加してみようと思ったきっかけと、参加してみてどうだったか、その後どうなっているか、をご紹介しようと思います!
参加してみようと思ったきっかけ
みんなのウェディングのサービス開発は、エンジニア+デザイナー+ディレクターがチームを組んで、日々開発を行っています。
どの職種の人が施策を考える、という決まりはなく、サービスの価値や具体的にどんなものを作るか、結果がどう出たかなど、チーム皆で話し合いながら開発を進めています。
そんな中、エンジニアと一緒に働いていて、コミュニケーションが難しく感じることがあり、もっとスピーディーにお互い気持ちよく仕事をするにはどうしたら良いんだろうと考えることがありました。
例えば、
- こんなことがやりたいけど簡単なのか難しいことなのか分からない…
- たった一個表示の変数を使いたいだけだけど、エンジニアさんに頼むの忍びないなぁ…
- 考えていた仕様と出来上がったものが違った
私は「エンジニアさんのやっている仕事や、頭の中を少しでも理解出来るようになりたいな」と思うようになりました。
そんな時、元同僚のRailsエンジニアに「Railsを勉強してみたいんだけど、どうしたら良い?」と相談してみたら、「Rails初心者の女性のための勉強会があるよ」と教えてもらいました。
それがRails Girlsとの出会いです!
参加してみてどうだったか
実際に私は2015年のRails Girlsに参加し、とても楽しい一日を過ごしました♪
想像していたのはよくある勉強会の、前に教えてくれる先生がいて、みんながスライドを見ながら勉強するスタイルだったのですが、
Rails Girlsはコーチがほぼマンツーマンで教えてくれるという手厚いスタイルでびっくりしました!
この時は知らなかったのですが、コーチのエンジニアさん達は、Rails界隈では有名人だったり、IT業界で第一線を走っているような人たちばかりです。
そんな一流のエンジニアを丸一日捕まえて、がっつりRailsのコーチングをしてもらえるなんて、本当に贅沢なことなのです。
当日はそんなことはつゆ知らず、ひたすらコーチを質問攻めにして、Railsだけじゃないプログラミングの基礎的なことまで教えていただきました。
参加者は、私のようにHTML/CSSは分かる人だけじゃなく、開発とは全く関係のない職業の人もいました。
それでも最終的に出来上がるアプリは同じレベルのものなので、素晴らしい学習プログラムだと思います。
さらに、女性が楽しめる工夫がいくつかあって、
- 会場がオープン(2015年はクックパッドのオフィスでした)
- お弁当がおしゃれ
- 懇親会のパーティーもおしゃれ
- ステッカーが可愛い
見た目でテンションが上がるお弁当!
クックパッドのシェフが振舞ってくれたお料理!どれもめちゃくちゃ美味しかったです!
コーチも参加者も皆でワイワイする雰囲気で、「分からないことを遠慮なく聞ける」空気作りが素晴らしいなぁと思いました。
実際この時に知り合った他の会社の子と、たまに連絡を取ったり会ったりしています。
その後どうなっているか
Rails Girlsに参加して学んだことはいくつかあるのですが、実際に業務に生きていると思うことはこんなことです。
- Railsの階層構造を理解出来た
- 基本的な単語を覚えることが出来た
- 本当に簡単なシステム改修であれば自分でも出来るようになった(もちろんエンジニアにコードレビューはしてもらいますが!)
- 開発前にどういう仕様が決まっているとエンジニアが楽なのか、逆にどういう仕様変更でエンジニアが苦労するか、が分かるようになった
本当に基礎の基礎を学んだだけですが、それによって「もっと知りたい!」と思うようになったり、社内のデザイナー仲間に学んだことを教えることが出来たり、
なによりエンジニアと一緒にサービス開発をすることが以前より楽しくなった気がしています。
その後、みんなのウェディングでは「Rails Designers」(勝手に私が命名しました!)という、エンジニア→デザイナーにRailsの基本を教える勉強会が開催されたり、
逆にデザイナー→エンジニアに「デザインレビューのやり方」を教える勉強会が行われたりしています。
お互いに違う職種の人同士でも、お互いの領域に少しずつ手を伸ばすと、コミュニケーションが一気に取りやすくなるなぁと実感しています。
そしてもう一つ。
今私は、自分一人でwebサービスを開発しています!
と言っても本当にまだ作りかけで、完成出来る見込みもたっていないのですが…。
エンジニアの領域を少しかじったことで、自分一人でサービスが作れたらもっと楽んじゃないか、と思い立ってチャレンジすることにしました。
完成までの道のりは遠いですが、定期的に開催されている「Rails Girls MORE!」が私の心の頼りになっています。
MOREでは毎回違うコーチに教えてもらっているのですが、コーチたちは皆本当に優しくて、楽しく少しずつですがサービスを形にしていっています。
はじめは「エンジニアの気持ちを理解したい」というきっかけで参加したRails Girlsでしたが、「一人でwebサービスを作ってみたい」という夢を与えてくれるきっかけになりました。
これまで教えてくださったコーチや、このコミュニティーを運営してくださってるみなさま、スポンサーの方たちにも本当に感謝しています!
ありがとうございました!
おまけ
みんなのウェディングでは、月に一回「Ginza.rb」というRubyのコミュニティーを定期開催しています。
先月の懇親会だけ参加させてもらいましたが、やっぱりエンジニアは面白い人たちばかりです!
Amazon Dash Buttonの使い方レビュー!届いた当日にすぐに使えました
本日日本で販売開始になった「Amazon Dash Button」を早速購入し、注文してみました!
設定はびっくりするほど簡単だったので、使い方もご紹介します!
まずは「Amazon Dash Button」について。
ボタンを押すだけで、商品を発送してくれるという、シンプルなボタン。
すごいシンプルだけど、未来的ですごい便利!!
よくある利用シーンとしては、洗濯洗剤や飲料水など、日用品があれないって時ですよね。
スーパーに買いに行かなくてもアマゾンの1click購入ボタンよりも、なんてスピーディーなんでしょう。
もちろんアマゾンプライムなので次の日には届きます。
プライム会員限定のサービスです。
では、早速使ってみましょう!!
ボタン自体もポチっとしたら当日に配達されました。
配達ボックス最高!
開封!
小さくて可愛い!!
周りに付いてる黒いゴムは取り付けフックです。
設定はとっても簡単でした。
まずはスマホでアマゾンアプリを起動。
左メニューから「アカウントサービス」メニューへ。
少し下のほうにある「新しい端末をセットアップ」を選びます。
セットアップスタートです!
あとはアプリの指示に従うだけ。
Dash Buttonのボタンを6秒間長押しします。
青いランプが点滅するまで。
アプリの「接続」ボタンを押して少し待つと……
Wi-fiの接続をします。
注文する商品を選びます。
今回私が頼んだのはアタックNeo。
あとはお馴染みに住所と支払い方法を選択します。
セットアップ完了です!!
1分かからずに出来ちゃいました。
早速洗濯機の近くにボタンを設置しよう〜🎵
アマゾンのサイトには洗濯機や壁につけてる写真がありましたが、私は目に見えるところにこのボタンを貼るのはいやだったので、洗剤ストックの棚の中に貼ることにしました。
押しやすすぎる所で間違えて押したらやだなーと思ってましたが、重複購入を防ぐだめに、商品が届くまで同じものは注文できないんだそう。
本当は一個ストックあるけど、ボタン押してみました!!
明日届くらしい!
ボタン注文時の500円がちゃんとアタック代から引かれてます。
これで実質ボタンは0円。
しかし早い!
これで良かったら食器洗剤とか色んなボタンが欲しくなるなぁ〜!
そしてアマゾンプライム会員の解約はできなくなる。間違いなく。
2016年前半読んで面白かった漫画まとめ
今年に入ってからもまんがをたくさん読んだので、読んだまんがの中からおすすめをまとめてみる。
アプリで読める無料まんが
特におすすめなのが、無料で読める電子まんが!
アプリのカカオとROLAは1話からフルで読めるので暇な時にぜひ。
最初から読める無料まんが
途中からでおおすすめの無料まんが
- 花のち晴れ(ジャンプ)
- 天空侵犯(まんがボックス)
- SSB超青春姉妹s(LINEまんが)
- マリーミー(LINEまんが)
- いぶり暮らし(LINEまんが)
やっぱりコミック!
相変わらずレンラルコミックにハマってるので、コミックで読んだ中でおすすめなまんがもまとめてみる。
特におすすめなまんが
一言コメント付き
- ハル×キヨ(今年一番ハマってる少女まんが!純粋で笑いもあって楽しい)
- 高台家の人々
- 椿町ロンリープラネット(絵が可愛くて好き!)
- 青の祓魔師(少年まんがの中では一番のヒット!これも絵が好き)
- ピアノの森(最終巻よかった!)
- 恋は雨上がりのように(中年のバイト先店長の惚れる女子高生可愛い)
- 町田くんの世界(町田くん素敵)
- それでも世界は美しい
変わり種で面白かったまんが
-
王国の子
- ギフト±(プラスマイナス)
- 惡の華
懐かしのまんがリバイバル
読んだまんがメモ
Hatena Design Hour #3 に参加しました
- はてなは「読む」「書く」体験に強い
- 独自の世界観があって周りに流されたりしない
- デザイナーみんな自分のサービス愛強すぎ!
「書く」ことに貢献する
流されないはてなの世界観
デザイナーのサービス愛
dots.デザイナー部発足イベントに参加しました
インテリジェンスが運営しているイベント情報サービス「dots.」が、デザイナー部を立ち上げるというので、どんな部活になるのか気になって発足イベントに参加しました。
何度か渋谷のイベントスペース来てますけど、おしゃれですよねー!
リラックス出来るしアクセスも良いし、良い空間だと思います。
総勢10人のデザイナーさんのLT会でした。
デザイナーそれぞれ個性があって、面白かったです。
自分がデザイナーとして今後どうしていきたいかを考えるきっかけになりました。
デザイナーの未来
近年デザイナーの職業自体が多様化していて、仕事の範囲もすごい広がってると思います。
そんな中、デザイナー個人個人がそれぞれ自分の強みだったり、考えを持って行動しているんだなと思ったのは良い刺激になりました。
LIGのデザイナーの佐藤タカアキさんが言っていた、3つの情報発信をしていくことでが大事という話は共感しました。
- 何をやってきたか(経験)
- 何が出来るのか(スキルセット)
- 何がやりたいのか(指向性)
デザイナーが自分からこの3つの情報を発信することで、自分がやりたいことが出来るようになる、というお話でした。
一つのスキルだったり経験だけでデザイナーとして生きていくには、相当な高いレベルまで到達しないと難しいと思うんですよね。
だからスキルや経験の組み合わせで勝負していくしかないんです。
例えば「英語×デザイン」で多言語のホームページ作成に強いデザイナーになったり、「人に教えるのが好き×デザイン」でマネージャー職や教育の分野に進んで行ったりとか。
自分の場合だったらどうだろう?、と今後のキャリアも含め考える機会になりました。
デザイナーのプレゼンうまい
どのかたも皆さんプレゼンが上手だなーと関心して見てました。
特にプレゼン資料が上手なんですよね。
デザイナーって普段から、何を誰にどうやって伝えるかを考える訓練をしているから、プレゼンが上手いんじゃないかと思いました。
グッドパッチのデザイナー日比谷さんのプレゼンが、自分の思考に近くて良かったです。
デザイナーは「どうしたらユーザーに新しい価値を提供出来るか、を主導する存在」になれるという。
そのために今すぐにでも出来る事が3つある、というお話でした。
- 複雑さを整理する
- 課題を発見する手段を持つ
- 自分の専門領域外のインプットをする
複雑さの整理に必要なのは「今達成したいことは何?」という問い。
課題を発見する手段は、例えばインタビューするなど。
専門領域外とはIOTやVRや、フロントエンドなど自分からチャレンジすること。
デザイン・技術・ビジネス 3つの媒介役にデザイナーはなれる。
それが出来たらデザイナーの仕事ってめちゃめちゃ幅が広がるんじゃないかと思いました。
プレゼン資料に図表をオリジナルで用意されてて見やすかったのでシェア。
https://speakerdeck.com/smrhby/xin-siijia-zhi-wozuo-rutameni-jin-sugudezainagadekirukoto
懇親会のお料理は本日も見た目綺麗でした!
デザイナーさんと色々お話出来て楽しかったです。
実は、あんまり内容見ずに参加してしまったので自分が悪いのですが、内容的にはデザイナー各々が自分の自己紹介をするスタイルで、途中ちょっと参加失敗したかな…と思ってしまいました。
会社定時で上がって、参加費1000円払って来ているので、何か自分のためになるヒントがもらえるような内容を期待していたので、ちょっぴり残念でした。
とはいえ、dots.自体インテリジェンスさんが運営しているんだし、デザイン系のこういうイベントやLT会って、基本的な目的は「自分の名を売ること」だったり、「採用活動」だったりするもんですよね。
全体的なテーマがもう少し具体的だったらもっと楽しめたのかも。
dots.デザイナー部の今後の活動に期待しています!
また参加したいです(^^)
BASE Drink #03 に参加しました
知人が参加するのもあって、3/10に開催された「BASE Drink #03」に参加しました。
参加した内容と感想をレポートします!
BASEにとってのUXとは?
BASEにとってのUXは「誰でも簡単にネットショップが開ける」とのこと。
サービスをシンプルに一言で説明出来て分かりやすいですよね。
そしてデザイナー達はもっと意識しやすいように、「お母さんでも使えるサービス」を目指しているんだとか。
「普段パソコンを使わない人でも…」や、「ネットリテラシーが低いユーザーでも…」っていうより「お母さん」っていう誰でも想像しやすい言葉で意識するのは分かりやすいと思いました。
デザインファーストでサービス開発をする
BASEのサービスはデザインファースト。
要は「要求をひっくり返す権限がデザイナーにある」、ということらしい。
私も普段サービス開発のデザイナーをしているので、これは自分も同じだなあと思ったのですが、受託開発のデザイナーさんにとっては結構びっくりするんじゃないでしょうか?
だって「これ作って」って言われたものを、「作るのやだ」って言えるんですよ!
もちろんこんなわがままな事が言える訳じゃなくて、その施策の目的を確認し、その目的を叶えるためのデザインはそれでいいのか考え、目的を叶えるための最高の体験を作るのがデザイナーの仕事っていうことです。
その流れの中で、施策が適切でなければ作らない判断も出来る訳です。
その分デザイナーの責任も大きいけど、サービス開発をデザインする楽しさでもありますよね。
実際BASEのデザイナーさん達楽しそうでした。
実際のデザイナーの仕事
えふしんさんはサービス開発のデザインをしたことがない人には必ず言うようにしていることがあるそうです。
それは、「サービス開発の仕事は退屈だよ。」ということ。
例えば、普段の業務の中には、ほんの少し文字を変えるだけ、みたいな仕事もある。
それを「コードの仕事」だと思うと退屈になっちゃう。
でもそれを、「その一文を変えることによって、喜ぶユーザーさんがいるかも」まで考えられるかどうか。
そう考えながら修正するのって楽しいですよね。
そんな風に思えるかどうかがサービス開発のデザイナーに向いているかどうかのポイントだと思います。
デザイナーの採用について
このイベント自体デザイナーの採用目的なところもあると思います。
えふしんさんがご自身で「炎上した僕のブログの…」と言っていたブログがこちら。
じゃぁコアスキルって何?ってのを、経験者採用の理想を言えば、
1.D.A.ノーマンの本ぐらいは読んだことがあって、ユーザインターフェースを意識しながらユーザビリティの高い設計ができて
2.ビジュアルデザインのスキルもあって、カッコいサイト、サービスが作れて、
3.ちゃんとユーザーさんのことを意識できて(つまりWebはコミュニケーションであり、動的制御であることを意識し、)
4.HTML、CSS、JavaScriptを全部書いてほしいし、一度書いたテンプレートは、PHPレベルで修正してね。(gitや黒い画面なんか恐れずに)この段階で、全てを満たす人に出会うことは相当少ない。いるところにはいるだろうけど、僕達では出会うのは結構難しい。
5.さらに言えば、それは何かの意図を実装に落とすのだから、企画したり周りとうまく会話したり説得したりするスキルも欲しい。
これって理想論すぎるんですかね?
UIデザイナー募集で困ってること | F's Garage@fshin2000
当時見た時は「レベル高い!」って思いましたけど、BASEのデザイナーさんの働き方を伺うとなんだか納得してしまいました。
だって課題解決方法考えてて、ユーザー体験練って、デザインして、実装までやるんですもん。
スキルが今なかったとしても「目指す気合があれば!」とはおっしゃっててました。
例えばHTML/CSS書けて、JavaScriptも書けるデザイナーってあんまり多くはいませんよね?
でも、そこまで高いレベルを求めてる訳じゃないそうです。
実務で経験がなくても勉強しているとかでも良い。拒否反応さえなければ何とかなる。
とは言いつつも、えふしんさんが最後に言った一言はぐさっと刺さりました。
今は何でも勉強出来るし、作ってみることも簡単に出来る時代だからこそ。
「ヤル気はあります!でもやってません!じゃあちょっと……
やってます!の裏付けは欲しいよね。」
おっしゃるとおりだと思います。
まとめ
BASEおしゃれで素敵な会社でした!
そしてデザイナーがサービスに関われる範囲がとても広くて楽しそうです。
ユーザーさんの声がダイレクトに届くのは良いですね。
やっぱりサービス開発って楽しいなあ♪
ところで、懇親会のご飯がすごいおしゃれで美味しかったです!!!
調べたらこちらのケータリングでした。
値段が分からないけど、一回頼んでみたいです!!
MOMOE - フード・ケータリング - からだも“おいしい”ごはん、つくります
BASEといえば、簡単に誰でもネットショップが作れるサービス。
しかも無料で!
色んな会社のデザイナーさんと交流出来たし、サービス開発の楽しさが再確認出来て、楽しい勉強会でした!
スマホwebでこのUIの流れいい感じ!
最近見た中で、一連の流れがいい感じのUIだと思ったサイトをまとめてみました。
「流れ」を見せたかったのでgifで操作を撮影しました。
トップで見せたい検索窓とカルーセルの組み合わせがいい感じ
WEAR
WEARのトップも最初から検索的にテキストが入っていて、文字カーソルが点滅しているだけでそれがすぐに分かるデザインなのが面白いですね。
3枠ローテで、トレンドだったり人気のユーザーが切り替わるアニメーションも、ただカルーセルするより効果的だと思います。
検索することで、トレンドやおしゃれな人が見つかるメッセージにもなってる。
あえて言うなら「コロチキ」で検索してる人はコロチキ探してるので、検索結果よりユーザーページにダイレクトに遷移しても良いような気もしました。
その後の検索体験もいい感じなのでキャプチャ取りました。
検索のUXがいい感じ
MERRY
意識しないと気が付かなかったけど、右上の検索アイコンをタップすると、検索窓がすぐに開いてカーソルが当たってる状態になる。
キーボードも開いているのでそのまますぐに検索出来る。
検索ボタン押した後に検索窓タップする1タップがないだけで、すごくスムーズに感じます。
ちなみに遷移先のページ、検索した場合と下にあるタグを押した場合で別のページに遷移しています。
見ている方はそんなの全く気が付かない。
商品を選んで見るUXがいい感じ
ZARA
スマホwebでこんなアプリみたいな動きが作れるだと結構びっくりしました。
横スライドしてる時ちゃんとURLが変わってるのに、スマホで触っててページ遷移を全然感じさせない。
商品を縦スライドで詳しく見て、左右スライドでどんどん見て行けるし、上部固定の戻るボタンですぐに一覧に戻れるし、買う時も下部固定のボタン&右上のカートでスムーズ!
最近スマホwebサイトとアプリの差が段々なくなってきている気がします。
ちなみに
画面のキャプチャを動画撮影するのに使ったアプリはこちら。
簡単にすぐ好きな範囲の動画を撮影してgifにしてくれるので便利です。