Adobeのセミナー「Webやアプリ開発のために。UIデザインとプロトタイプ作成の基礎・実例」に参加してきました

こんにちは、弥生の狩野です

社内の業務では、UI/UX検討チームとして、日々UXデザインを考えたり フロントエンジニアの育成等をしています

今回は、先月、弥生が参加したAdobe様のセミナーレポートを掲載します

参加したセミナー

Webやアプリ開発のために。UIデザインとプロトタイプ作成の基礎・実例

201708-designer.creativecloud.adobeevents.com

f:id:suikasansan:20170922181831j:plain

セミナーの概要

弥生では、 お客さまに提供する、製品やサービスについて 「かんたん、あんしん、たよれる。」というコンセプトで進めています

そんな魅力的な製品やサービスを実現するための施策として プロトタイピング駆動を重視しており、新しい製品やサービスを中心に開発へ組み込んでいます

社内で早期に合意形成がとれることの恩恵や、より良い製品やサービスが提供できる喜びを 少しずつ感じているところです

弥生ではプロトタイピングツールとして、Adobe XDを導入しています

Adobe XDの詳しい説明はコチラ

直近のプロジェクトでは、弥生の業務アプリケーションのポータルサイト(マイポータル)の開発に Adobe XDを導入してプロトタイピングを実施しました

今回は、弊社の田中が、

「弥生品質を支える開発プロセス プロトタイピングが成すべきこと」

というタイトルで

チームが思い描く製品やサービスを生み出すための 弥生のプロセスと、プロトタイピングの重要性、Adobe XDの導入事例についてお話をさせていただきました

私の参加目的は、

  • プロトタイプには、どんな人が興味をもっているのか、また、その中で、同じ悩みを抱えている方と接点を持ちたい
  • 今後、Adobe XDには、どんな機能が追加されていくのか、どう活用していけばよいか

のような思いで参加しました

また、今回は、弊社の田中がプロトタイピングの実例を紹介するので、 その発表の反応にも興味がありました

セミナーに参加して

会場の様子

参加人数は、満員(130人)で、プロトタイプへの期待が非常にうかがえるセミナーでした

  • デザイナーの方が多く参加されているように感じました(服装や客層から独断と私見で判断!)
  • UXデザインを決定するうえで、合意形成のためにAdobe XDへ期待されている方が非常に多くいらっしゃいました

Adobe XDの製品紹介に関して

製品紹介で、紹介されていたプロトタイプの履歴機能に関しては、非常に待ち望ましいです

  • 別ファイルで、開かなくても前日のプロトタイプと比べる等の、作業がやりやすくなりそうです
  • 現状は、バージョン管理ソフトで1つ前に戻して比較しています。非常に手間で、面倒です

これまでは、1つのXDファイルを1人でしか編集できませんでしたが、複数人で共有して編集が可能になります

弥生のAdobe XD導入紹介に関して

プロトタイプで関係者間の認識齟齬を早い段階でなくすことで、設計~実装の手戻りを最小限にできる

  • 後続のフェーズに集中してしまう大きな仕様変更を、早期に発見することができます

弥生の品質への取り組みに対して共感をえることができた

  • 弥生では、「ダサいはバグだ!」をあたりまえ品質とし、線の1pxずれや、細かい文言のずれも障害として扱っています

さいごに

今回、縁あってセミナーに参加させていただきましたが、 肌で、プロトタイピングの重要性を感じることができました

今後も、スピーティーに合意形成することができるAdobe XDを要チェックです!

ノベルティをいただきました。ありがとうございます! f:id:suikasansan:20170922181823j:plain

カレンダー作成トレーニング実施中!!

はじめまして、エンジニアのR.Oです!
前回の記事でT.Aさんが紹介したトレーニングに続き、

tech.yayoi-kk.co.jp

「カレンダー作成トレーニング」に挑戦中なので、その途中経過を報告します。

自己紹介

まずは、自己紹介をさせていただきます。

私は今年の春に弥生に中途入社し、現在はWebサービスの開発チームでフロントエンドとサーバーサイドの開発を担当しています。
プライベートではAWSを使ったWebチャットアプリケーションの開発に挑戦中です。

趣味は飲酒とボルダリングです。
ボルダリングは昔に少しやっていて、二ヶ月前に再開しました。
最近は6級であればほぼ一発で登れます。
今年中に4級を安定して登れるようになることが目標です。

因みに、ボルダリングで何が一番楽しいかというと、 難しい課題に何度も挑戦してやっと登れた時!! ではなくボルダリング終わりにお酒を飲むことです。

強化施策に参加したきっかけ

弥生に入社する前は、サーバーサイドの開発経験がメインだったので、フロントエンドの開発も行うチームに配属されたことに不安を抱いていました。
また、前述の通り、Webのチャットアプリケーションを作成したいのにフロントエンドの知識がなくて困っていました。

そんな時に本施策の第一弾が社内で行われているのを目にし、渡りに船と第二弾のメンバーとして手を上げたことが参加のきっかけです。

強化施策を通して身につけたいもの

フロントエンド開発における以下のスキルを身に着けたいと考えています。

  1. HTMLとCSSの基礎(HTMLタグの使い方やCSSのセレクタなど)
  2. flexbox
  3. BEM(MindBEMding)
  4. Sass

1.と2.に関しては前回のトレーニングで学習できたので、今回のトレーニングでは3.のBEMを身に着けたいと考えています。

BEMはクラスの命名規則の一つです。
今まではクラスに対して、フィーリングで名前をつけていたので、後で見返した時に「これってなんのために作った要素だっけ?」となってしまうことがありました。
そういった問題を、BEMの命名規則をうまく活用することで解決できるらしいです。また、チームで作業する際にクラス名のブレを防いだり、拡張性の高いコンポーネント作成を行えるようにもなるらしいので、是非身に着けたいです。

因みに、クラスの命名規則の中ではデファクトスタンダード扱いされているらしく、CSSフレームワークで人気のBootstrapでも採用されています。

BEMの詳細については以下の記事などを参考にしてください。
http://qiita.com/kitaro729/items/3189ded5647475bc2ae7

トレーニングの概要

作成するもの

卓上カレンダーをHTMLとCSSで再現します。

以下の画像が実際の卓上カレンダーの写真です。

f:id:oha-ryo-y2i:20170818194656j:plain

実施方針

  • ヒントや正解となるコードはなし
  • ペアプログラミングで作成する
  • クラスはBEM(MindBEMding)に則って命名する(※私のチームのみ)

実施レポート

HTMLの作成段階で悩む

「前回のトレーニングで学んだCSSセレクタやCSSプロパティの知識を総動員してサクッと作成するぞ!」と意気込んで着手したのですが、HTMLの作成段階で悩んでしまいました。
なぜならカレンダーには枠、日付、六曜、祝日などの多くの種類と要素があります。

default

また、種類が沢山ある=要素に設定するクラスが多いので、命名するのも一苦労です。

CSSは順調!・・・かと思いきや!?

ペアとあれやこれやと相談しながらHTMLが書けたので、CSSでスタイルを適用していきます。 カレンダーの様なグリッドスタイルは、前回のトレーニングで身につけた(と思い込んでいる)flexboxにとってはお手の物です。
スタイルが適用され、真っ白だったページが順調にカレンダーになっていきます。

と思いきや、問題発生です。

カレンダーの左下を再現しようとするとレイアウトが崩れてしまいます。

f:id:oha-ryo-y2i:20170809202804j:plain

原因は、HTMLの構造にありました。

修正前のHTMLとCSS

左下の日付の枠のHTML

<div class="halfbox__container boxcommon sun">
    <div class="halfbox">
        <div class="day"></div>
        <div class="rokuyou"></div>
    </div>
</div>

それ以外の日付の枠のHTML

<div class="week__body__box boxcommon sun">
    <div class="day"></div>
    <div class="rokuyou"></div>
</div>

CSS

.halfbox__container {
    padding:5px
}
.week__body__box {
    padding:5px
}

HTMLのタグ構造の深さが異なります。

修正後のHTMLとCSS

左下の日付の枠のHTML

<div class="halfbox__container boxcommon sun">
    <div class="halfbox">
        <div class="day"></div>
        <div class="rokuyou"></div>
    </div>
</div>

それ以外の日付の枠のHTML

<div class="week__body__box boxcommon sun">
    <div class="week__body__box__child">
        <div class="day"></div>
        <div class="rokuyou"></div>
    </div>
</div>

CSS

.halfbox {
    padding:5px
}
.week__body__box__child {
    padding:5px
}

HTMLの構造の深さを統一し、CSSでスタイルを適用した結果うまくいきました。

ひとまず完成

スタイルの設定も完了し、本物のカレンダーの見た目を再現できました。

スクリーンショット f:id:oha-ryo-y2i:20170809202921j:plain

なんと、上部の穴も再現しています!(無駄

ソースコード
https://github.com/ykk-pa1127/FrontEngTraining/tree/team4_calender_complete(not_responsive)

コードレビューについては次回の記事で報告します。

学んだこと

まだコードレビューが完了していませんが、今回のトレーニングでは以下のことを学びました。

事前のHTML設計が予期せぬレイアウト崩れを防ぐ

カレンダーのレイアウト崩れが発生した時に、CSSを色々変えてもうまくいかなかった原因は、CSSを適用するHTMLの構造にそもそも問題があるからでした。
歪んだ骨組みに、無理に肉付けをしてもうまくいくわけがないですね・・・。

その結果として、HTML作成→CSS適用→HTML修正→CSS適用という手戻りが発生してしまいました。

この失敗を学びとして、今後は以下の流れで画面レイアウトを作成しようと思います。

※カレンダー作成を例にしています。

  1. 作るレイアウトの構成を理解する
    例:「枠が沢山並んでいて、それぞれの枠の中に日付、祝日、六曜が存在する。祝日は日付と横並びだが、六曜は日付と縦並びになっている」

  2. 理解した構成に合わせてHTMLを設計・作成する
    例:「枠となる要素を沢山作り、それぞれの枠の中に日付、祝日、六曜となる要素を作る。まずは日付と祝日の要素が横並びになる要素を作り、その要素と六曜が縦並びになる要素を作る」

  3. HTMLに合わせてCSSを適用する
    例:「枠要素にはborderプロパティを適用、日付と祝日の要素が入っている要素にはflexプロパティのrowを適用、日付+祝日の要素と六曜の要素が入っている要素にはflexプロパティのcolumnを適用」

上記の流れに則って作成すれば、今回のトレーニング実施で発生したような手戻りを防ぐことができるはずです。

また、今回の経験で、設計という工程がHTML作成においても重要だと気付くことができました。

次回予告

次回は、カレンダートレーニングの実施完了報告として、コードレビューの結果とレビュー指摘への対応、カレンダー作成トレーニングを通して学んだことを報告する予定です。

引き続きよろしくお願いします! 

初めてのフロントエンド

初めまして、開発本部のT.Aです。 突然ですが弥生では今年の3月、フロントエンジニア強化施策という取り組みが発足しました。

この3月の取り組み(第一回目)を見ていたメンバーが、自分もやりたい!と参加者を集め、先月から第二回目を開催しています。 私は業務上フロントに関わりないチームなのですが、「やりたい」と周囲に話していた所、参加させていただけることになりました。

というわけで本記事では、第二回フロントエンジニア強化施策の取り組みをババーンとお伝えします!

メンバー紹介

今回は運営メンバー3名、参加メンバー4名で施策を実施しています。

簡単な自己紹介も添えているので、お時間ある方は各メンバーの欄を展開して、ご覧ください。

運営メンバー

田中さん

  • フロントシステム開発/UX検討チームのプロジェクトリーダー
  • 声が大きい(物理)

K.Kさん

  • マイポータルWebの開発をテクニカル面でリードしている
  • Markdown記法の存在を私に教えてくれた人
  • 質問すると丁寧に教えてもらえる

S.Uさん

  • SMARTを開発している
  • 第一回目の参加者→今回の運営へ(前回記事)
  • 弱音を吐くと励ましてもらえる。。。

参加メンバー

D.Kさん

  • 入社四年目の先輩
  • オンライン製品を開発している
  • 基本雑だけど本気で困ってると助けてくれる

R.Oさん

  • 入社一年目(中途)の先輩
  • マイポータルWebを開発している
  • すごくものづくりに対する拘りがある(気がする)

R.Tさん

  • 入社三年目の先輩
  • 自動テスト作るチームのリーダー
  • 入社から今に至るまでお世話になってます。。。

T.A(私)

自分の話

導入がてら自己紹介を。先に内容が気になる方は施策の内容

現在の業務

新卒で入社し、現在二年目です。 R.Tさんと同じチームでデスクトップ製品の自動テストを作成・実施しています。 後は新卒の教育チームで後輩の研修や、ふりかえりを実施しています。

スキル

普段業務で使っているのはC#です。 学生時代フリー配布のテンプレートを編集してサイトを作っていました。 ただ、フロントスキルは「タグとセレクタって何?」「CSSって色変える以外に何ができるの?」というレベルでした。

施策を通じての目標

自分の作りたいもの(Webアプリ)を作るとっかかりを作る

大学時代、演劇をしていて見るのもやるのも好きでした。 しかし社会人になってから忙しくなり、公演を見に行くことがめっきり減り…。 好きな芝居は観たいけど、調べるために色んなサイト回るのは面倒くさい。 そんな人(自分)のための小劇場・学生演劇に特化した検索アプリを作りたい!

…と思い立ったはいいのですが、Web系の技術は種類が豊富すぎるし、Gitも開発環境も良くわからない。 ①調べる → ②どの技術から勉強するか決められない → ③一先ず業務でも使うC#の勉強する そのループを今年の3月くらいから繰り返していました。

そんな時に知ったのが、このフロントエンジニア強化施策です。 まずフロントエンドの技術をこの強化施策で勉強しよう! そこをきっかけにして、他(サーバーサイドとか、フレームワークとか)勉強しよう!

長くなりましたが要するに、この施策をきっかけに自主学習を進めることを目標にしています。

かっこいいサイトを作れるようになる

私が思うかっこいいサイト例:弥生30周年記念サイト 自分の中で「一から自分でデザインを考えて、調べながらサイトを作れる」ことができたら、フロントエンド少しはできると言っていいんじゃないかなと思っています。 ただ今まで、ネット上で配布されているテンプレートをいじってサイトを作ってきたため、一からサイトを作ったことがありません。 例えば、例に出した弥生のサイトで、メニューのメインの部分はどうやって分けているのか? 何も見ずに作るのは無理でも、これを使えば実現できそう!と考えられるレベルにはなりたいです。

他チームの方とたくさん話す

普段はデスクトップ製品の自動テストを作成しているため、オンラインやウェブ製品の開発をしている方と関わりがほとんどありません。それらのチームの方と話して、どんな技術を使って開発しているのか知りたいです。

施策の内容

使っているツール

やり方

  • 基本定時後に行う
  • ペアプロで実施する
    • 1人がコーディング、もう1人がそれを見てこうした方がいいんじゃないか、とかを話しながら画面を作る
  • 成果物の作成が完了したら、レビューを行う

最初の1週間でやったこと総まとめ

第一週目は、HTMLとCSSの基礎を学べるような施策を実施しました。 作ったものは全部で3つ。 以下のGitに全てコミットしています。 成果物置き場

  1. レスポンシブ対応画面作成
    flexboxを利用して、レスポンシブ対応した画面を作成する
    作成画面 f:id:tomoe_aizawa:20170817085447p:plain ペアプロの担当:オペレーター⇒私、ドライバー⇒D.Kさん
    一番印象に残っている施策です。 画面自体はすぐに作成できました。 意気揚々レビューに出したら、田中さんから一言「flexboxを何もわかってない!笑」 この時は、アイテム(1)(2)(3)を一つのdivで囲い、 display:flexを当てていました。 また、 PC用の画面はflexboxのアイテム(1)を、width:100%(横幅いっぱい)にしてアイテム(2)(3)を(1)の下に回り込ませていました。 しかしそれではflexboxの良さを全く生かせていないとのこと…。 頂いた指摘を元にコードを修正。 f:id:tomoe_aizawa:20170817085626p:plain 元々上図の①(アイテム(1)(2)(3))しかdivで囲っていなかったのですが、②(アイテム(2)(3))もdivで囲み、それにもdisplay:flexを当てました。 さらに、flex-directionプロパティの値を変えることで、widthを指定せず横並びから縦並びに簡単に変えることができました!

  2. セレクタのトレーニング
    HTMLが指定されたデザインになるように、色んなセレクタを使ってスタイルを当てる
    作成画面 f:id:tomoe_aizawa:20170817085607p:plain ペアプロの担当:オペレーターD.Kさん⇒、ドライバー⇒私
    ペアの先輩(D.Kさん)のすごさを実感した施策でした。 この回は先輩がコーディングをしたのですが、指定されたスタイルをサクサク当てていくので、見ていて楽しかったです。 ここで「詳細度」というものを教えてもらったのですが、なるほどと、わかった気になってしまい、次の施策で慌てることに…。

  3. mock作成
    弥生で実際に使われているボタンなどのUIの共通部品を利用して、画面を作成する
    作成画面 f:id:tomoe_aizawa:20170817085642p:plain ペアプロの担当:オペレーター⇒私、ドライバー⇒D.Kさん
    コピーペーストで部品を配置していく簡単(?)なトレーニング。 なのですが、なかなかお手本のデザインにならず四苦八苦しました。 上手くいかなかった原因は、 ① スタイルを当てても、より詳細度の深いものに打ち消されてしまう ② 要素の間に、開発者ツールで見ないとわからないmarginがある セレクタのトレーニングでなんとなくしかセレクタや詳細度を理解しなかったことが仇となりましたが、開発者ツールを駆使し、なんとか完成しました!

まとめ

施策を通じて学んだこと

HTMLとCSSについて

  • flexboxを使った画面構成のやり方、レスポンシブ対応した画面の作り方を知った
    • 画面を見たときにどう作ればいいのか、というイメージがつくようになった
  • CSSのセレクタの種類と詳細度について知った
    • セレクタ:種類とそれぞれのセレクタの使い方は分かった
    • 詳細度:概念は分かった。詳細度を意識してセレクタを使い分けできているわけではない
  • 弥生の共通部品を使ってみた
    • ※弥生標準として使われている「HTML、CSSのテンプレート」らしいです
    • 弥生のフロント開発ではこういうものを使っていると知った

他チームの方と話せた

  • オンライン製品のソースコードを少しだけ見せてもらえた
    • 使っているライブラリを知った
  • プログラミングする時に便利なショートカットキーや、小技を教えてもらった

サイトのデザインを見て、どう作るのかイメージできるようになれたのは嬉しかったです! ただ、flexboxの理解はまだまだ…。 実際にWebサイトを作って、理解を深めていこうと思います。 また、とっかかりができたと自分では思っているので、繁忙期が終わったらフレームワークの勉強に手を出したいな~と思ってます!

次の施策は……

f:id:tomoe_aizawa:20170817085701j:plain 上の弥生カレンダーをHTMLとCSSで作成中。 flexboxの新たな発見も有ったりしました。 試行錯誤の詳細は次回のR.Oさんの記事で! 乞うご期待!