読者です 読者をやめる 読者になる 読者になる

はじめてのフロントエンド開発で学んだこと

CSS3 HTML フロントエンジニア 勉強会


はじめまして。エンジニアのM.Fです。

1.自己紹介

私は今期弥生に中途で入社したばかりの新人で、フロント開発の経験はゼロ。前職ではいわゆるコボラー(※1)をやっておりました。

そんな正真正銘フロント初心者の私ですが、この取り組みを通じて非常に多くの知識と経験を学ぶことができたので、取り組みをご紹介したいと思います。

(※1)コボラー:COBOL言語の開発を行う人を指す言葉。

2.フェーズ2のゴール

フェーズ1(※2)では、基本的なマークアップスキルの習得として、HTML5,CSS3を活用したレスポンシブデザインの作成を行いました。 フェーズ2ではその応用として、実際に利用できるWebアプリ画面の作成をゴールとしています。

(※2)フェーズ1の詳細は「フロントエンドエンジニア育成(序章)」をご覧ください。

私のチームでは、現状メールで運用されている社内の勤怠連絡を、「Webアプリ上で一元的に管理・参照できるようにすること」を最終的なゴールとし、今回の取り組みではその一画面の作成を行うことにしました。

3.アプリのターゲットとベネフィット

そもそも、なぜこのアプリを作ろうと思ったのか? きっかけは私の上司のこの言葉でした。

「勤怠連絡と管理をもっと楽したいよね。」

開発本部では、

メンバーの

  • 休暇
  • 当日の早退・遅刻

の状況が把握できるように、毎朝メールで部内に配信されています。

この一覧はすべて特定の担当者が個々のメール連絡を受けて作成します。

当然毎日のことなので作業に掛かる負荷も高く、担当者が不在の時は代行で誰かがやらねばなりません。

特にリーダーにとって、メンバーの勤怠状況は常に把握しておきたいもの。

そこで、フロント開発の勉強も兼ねて、作成してみよう!というわけです。

ただ、思い付きで作るだけではダメで、そのアプリを開発することで、

「誰にとって(ターゲット・セグメント)」
「どんな利点(ベネフィット)をもたらすか」

という視点で分析を行い、「カスタマージャーニーマップ」を作成しました。

f:id:ochoco0108:20170321182410p:plain

このマップでは、想定されるユーザー(ターゲット・セグメント)がこのアプリを通じて行う行動や思考・感情などをフェーズごとにプロットしたもので、どのようにこのアプリを知り、触れて、継続して使ってもらうかというシナリオを立てています。

4.つまずいたこと

カスタマージャーニーマップも作ったし、早速画面のイメージを作ろう!となるわけです。 作成した画面カンプはこちら。

f:id:ochoco0108:20170323214038p:plain

この画面は、当日の出勤状況を確認するための画面です。

  • 当日の日付
  • 表示したいチームや人を絞り込むための検索フィールド
  • 勤怠の明細一覧

という構成になっています。

あとは作成したカンプの通り画面を作るだけ!・・・なのですが、初のフロントエンド開発ということもありなかなか思い通りにいきません。
特に、勤怠連絡を表示する明細のコンテナ部分には非常に苦労しました。 下記につまづいた点の一部をご紹介。

・IEで表示するとスペースが詰まる!

htmlでアイコンや文字の間に少し広めのスペースを入れたい。でも半角スペースだと記述が長くなってしまう・・・ そう考えた私はhtmlに"&emsp"を記述することにしました。しかし、それが裏目に。 IEで表示すると、なんと!スペースが全て詰まってしまいました。

とはいえ、"&nbsp"を何回も繰り返すのもイヤだし・・・結果、下記のように記述。

f:id:ochoco0108:20170321184741p:plain

こうすればIEでも空白が反映されるし、何回もhtmlに"&nbsp"を繰り返す必要もありません。

・サブメニューが画面の裏に隠れる!

今回、アイコンやボタンはgoogle社が提供するMaterial Design Liteを使用。 見た目や操作時の動きをマテリアルデザインで形成しており、HTML、CSS,JavaScriptにコードをコピーするだけで簡単に作れるので便利ですが・・・

f:id:ochoco0108:20170321184030p:plain

実装してみると、クリックできない(というか見えない)問題が発生。

早速F12キーを押して、ブラウザ開発者ツールで原因を特定します(使い方教えてもらいました)。
怪しいと思われるコンテナをクリックして指定を確認。

f:id:ochoco0108:20170323213606p:plain

すると、cssに記述していないoverflow:hidden;が指定されていました。 Material Design Liteのコンポーネントを使用したため、cssに記述しなくてもデフォルトで指定されてしまうようです。

そこで、style.cssに以下の通り記述。

f:id:ochoco0108:20170321184224p:plain

!importantルールを使うと適用するスタイルを優先させることができるため、 overflow:visible;が適用され、無事表示することができました。

f:id:ochoco0108:20170321184331p:plain

最終的に完成したhtmlはこちら

5.取り組みから学んだこと

本フェーズでは画面の枠組み作成をゴールとしたため、表示される明細の表示方法や内容の処理ロジックをどうするか?DBの管理はどうするか?等課題は山積みですが、ひとまずはhtmlとcssを使ってカンプのレイアウト通りに画面を作ることができました。 また、スケジュールも予定通り、4日間の業務時間外でなんとか作り終えることができました。

フェーズ1では調べものにかなりの時間を費やしていましたが、本フェーズではブラウザ開発者ツールを活用する、ペアプロで調べものを分担するなどを意識することで、作業を効率化できました。

簡単な画面ではありますが、この取り組みを通じてフロントエンド開発の土台となる基礎スキルを習得できたと感じています。 勤怠管理アプリの完成に向けて、引き続きトライしてゆきます。

フロントエンジニア育成の取り組みの中でつまずいたこと

フロントエンジニア 勉強会 HTML CSS3

こんにちは!S.Fです。

フロントエンジニア強化トレーニングに参加するまでの経緯

まず私の状況を説明します。
新卒で弥生に入社し、入社してから今年の1月まではデスクトップ製品の自動テストを開発するチームに所属していました。
今年の2月からフロントシステムを開発するチームに配属されました。

HTMLは新人研修の頃に触った程度(かれこれ2年ほど見てもいない。。)
それも「csvファイルを整形してHTMLで出力しなさい」なんてお題だったので表作って完了!くらいのことしかやったことがありませんでした。
そんな私に上司から「フロントエンドエンジニア育成の取り組みがあるけどやってみる?」と提案がありました。
正直、家で取り組もうにも何から手を付ければいいのかわからない状態だったので、参加することにしました。

まずそもそものHTMLの書き方から勉強!なんて状態の私が詰まったことをお伝えします! 成果物は以下に配置しています。
https://github.com/ykk-yos1982/yayoi/tree/master/20170223_20170316/team2/Phase1

フェーズ1の中で詰まったこと

  1. どんなタグを使うんだろうか?
  2. floatによるレイアウトを利用する
  3. 数字の縦書き方法はどうするんだろうか?
  4. 縦書きの文字をどうコンテンツの真ん中に寄せるんだろうか?
  5. ブラウザを変えるとレイアウトが崩れる
  6. 縦が画面サイズからはみ出る

1. どんなタグを使うんだろうか?

レスポンシブデザインとかで検索かけるとcssの書き方は書いてあっても
どうHTMLを書くのかはなかなか見つけられず(検索の仕方がまずかったのかもですが。。。)
サンプル落とせるサイトが合ったので、落として確認!
<div>タグを使う!
ということで、<div>を使ってHTMLの作成に取り組みました。

2. floatによるレイアウトを利用したこと

なんとなくPCデザインはできた!
しかし、他のサイズにするときはどうしてくのか不明だなぁと思いつつ
同じチームのKさんに見てもらうと

float使ったの???  
floatでレスポンシブデザインを実現するとなると、メディアクエリ内でfloatの解除や  
javascriptで要素の高さの調整が必要となるから、
そのような複雑な処理をせずにシンプルな方法で実現できるflexboxを使おう! 

とご指摘が。。
各コンテンツの区切り方もアドバイスいただきflexboxで再作成!
ちなみにこの段階のHTMLはコンテンツの区切りを<section>で区切るなんて暴挙に出ていました。

3. 数字の縦書き方法は?

writing-mode: horizontal-tb;を設定しても数字が縦書きにならない!
このとき、記載していた数字は半角でした。
全角に戻すと縦書きになりました。

4. 縦書きの文字をどうコンテンツの真ん中に寄せるんだろうか?

縦書きの文字が中央に配置されない!!
ってことでKさんのお力を借りました。
結論

  • 各コンテンツ自体もflexboxに設定

  • flexboxを中央に寄せる

こうすることで真ん中に寄せることができました。

5. ブラウザを変えるとレイアウトが崩れる

Chromeで動作確認しながらflexboxが折り返すところでメディアクエリのブレークポイントを設定
そんな設定をしたせいなのか(おそらくそうなのですが)
ブラウザによってレイアウト崩れが!!!
うまいことブレークポイントを設定しようとしましたが上手く行かず時間切れ。。。
自分なりの考察

  • flex-wrap: wrapの設定の位置がおかしい

  • メディアクエリの設定の前にflex-wrap: wrapを設定しているため、サイズによる制御ができていない

  • ChromeとIE、Safariだとコンテンツ5が折り返す位置が違う

フェーズ2ではこのあたり注意したいです。

6. 縦が画面サイズからはみ出る!

なんだか縦のサイズ設定がうまいこといかず、画面からはみ出る事態が!
flexboxの設定を再度考え直して修正をかけることにしました。
頭で考えていても混乱するだけだったので、親と子の関係を明確にするためにお絵かき。 f:id:satoko-0119:20170309193058p:plain
ここで明確にしたものに合わせて、<div>を再設定して、あわせてcssを修正。

<body>
    <div class="container">
        <div class="contentHeader">コンテンツ1</div>
        <div class="contents">
            <div class="contentMenu"><div>コンテンツ2</div></div>
            <div class="contentMain">
                <div class="content contentLightBlue"><div>コンテンツ3</div></div>
                <div class="content contentYellow"><div>コンテンツ4</div></div>
                <div class="content contentPink"><div>コンテンツ5</div></div>
            </div>
        </div>
    </div>
</body>

<style><div>に修正しました。)
containerの子要素のcontentHeaderとcontentsを縦に並べて、高さを設定することではみ出ることを修正しました。

フェーズ1をやってみて

カンプのデザインはシンプルでしたが、やってみると奥が深かったです。
htmlやcssの書き方はもちろんのこと、<div>の切り方やflexboxの利用法、ブレークポイントの置き方など
学ぶことは山ほどありました。

フェーズ1で学んだことを活かしつつ、課題も解消できるように
フェーズ2に取り組んでいきたいです。

デザインの気づき ~フロントエンドエンジニア育成の取り組み を通して~

勉強会 フロントエンジニア Adobe illustrator

エンジニアのS.Uです。 現在フロントエンドエンジニア育成の取り組みを行っております。
取り組みがスタートして早1週間。その中で実践したことや学びについて書きたいと思います。

自己紹介

これまでは、主にバックエンドの開発を行ってきました。
先月よりフロントエンドの開発チーム(UXを検討するチーム)に配属になり、フロントエンジニアとして晴れてスタートを切りました。
UXチームはデザインの工程からマークアップの工程までを担う部隊で、日々UXのあるべき姿を追い求めて奮闘中しています。

目的 ~What is the goal?~

今回の取り組みでは、以下を達成することを目的としています。

  • デザイン~アプリ開発 までの工程を理解する
  • フロントエンジニアに必要なツールや言語の使用方法を理解する
  • エンジニア間のコミュニケーションを活性化する
  • つまづきやノウハウをアウトプットしてナレッジを蓄積する

取り組みの内容

現在フロントエンドエンジニア育成の取り組みの中で、フロントエンジニアの基礎の習得(1)の マークアップ実践に取り組んでいます。

このフェーズでは、レスポンシブデザイン*1に対応したマークアップコーディングを習得すべく、 カンプデザイン*2を基としたマークアップを実践しています。
UXチームに所属していることから、私はこの取り組みの前準備としてカンプデザインの作成を担当しました。

今回はこのカンプデザイン作成の中で得た学びを書いていきたいと思います。

カンプデザインの作成 ~初めての「カンプデザイン」と「イラレ」~

はじめに

レスポンシブデザインに対応した画面イメージを作成するために、複数画面サイズ用にレイアウトを作成することにしました。

そもそもデバイスの種類、サイズってどのくらいあるの?というところからスタート。 この辺のサイトをみると、主要なデバイスの画面サイズが載っています。 【CSS】適切なブレイクポイントを考えてみる(レスポンシブデザイン用)

ひとまず標準的な3種類のデバイスを選定。以下3つのカンプデザインを作成することにしました。

  • PCサイズ
  • タブレットサイズ
  • スマートフォンサイズ

カンプデザイン作成にあたり使ったツールは、Adobe Illustrator(通称イラレ)です。 カンプデザインもさながらイラレも初挑戦です。
メニューが豊富すぎて使いこなせるかやや不安を抱えつつ、レッツトライ。

実践

各サイズ5つのコンテンツを配置する簡単なレイアウトをイメージし、早速カンプデザインを作成。 この程度なら簡単、、とサクっと作成して余裕をかましていた私に落とし穴が。

作成後にUXの師匠にチェックをお願いすると、 出るわ出るわ指摘のオンパレードでした。

私のカンプデザインは何がだめだったのか。 今思えば甘さ満載の出来栄えですが、恥をしのんで公開。

作成したカンプデザイン

f:id:satomi_uetake:20170303141109p:plain ※左からPCサイズタブレットサイズスマートフォンサイズ

これに対する指摘事項

  1. 各サイズ間のコンテンツのサイズにルールがない
    コンテンツ1はヘッダー、コンテンツ2はメニューバーを想定したコンテンツだが、画面のサイズ間で幅が異なる。固定サイズであるべき。 可変サイズであれば、画面の縮尺に合わせる等、サイズに明確なルールが必要。
  2. 色に意味がない
    色が設計されていない。どんなイメージのデザインにしたいのかが明確でない。 また、使用している色の設定値にルールがない。 通常カラーパレットを作成する場合、明度、彩度を変えずに色見だけを変える手法をとる。
  3. コンテンツ間の線幅が考慮されていない
    コンテンツに枠線が1pxで設定されているが、その線が重なっているケース(コンテンツ間が1px開く)と重複していないもの(コンテンツ間が2px開く)が混在している。
  4. 拡大するとコンテンツ間に隙間が…👈論外

こんな簡単なイメージのカンプデザインを作成しただけでも、こんなにもダメポイントがあるなんて・・・
自分の知見のなさになかなかショッキングでしたが、同時にデザインの奥深さを思い知りました。

原因と考察

1、2の指摘については、コンテンツのサイズや色を「設計してしなかった」事が原因でした。 「なんとなく収まりがいいサイズ、パッと見でいい感じの配色」 私はこんな曖昧な基準でカンプデザインを作成していました。

3、4の指摘については、イラレの機能を使えば解消できる問題でした。

イラレには、オブジェクトの整列という機能があります。
↓このようなメニュー。

f:id:satomi_uetake:20170303142432p:plain
キーとなるオブジェクトを基にオブジェクトを整列させたり、 整列時にオブジェクトの間隔をピクセル単位で指定することができます。 この機能を正しく使っていれば、コンテンツ間の間隔の不揃いや、不要な隙間は発生しませんでした。

具体的には、こんな感じです。


整列前

f:id:satomi_uetake:20170303212432p:plain


整列後(オブジェクトの整列)

複数選択したオブジェクトを、指定した辺(または中央線)を基準に揃える。(以下は中央揃えにした例。)
f:id:satomi_uetake:20170303212437p:plain


整列後(オブジェクトの分布)

複数選択したオブジェクトを、指定した辺(または中央)を基準に均等に分布させる。(以下は左揃えにした例。)
f:id:satomi_uetake:20170303212441p:plain


整列後(等間隔に分布)

複数選択したオブジェクトの中で、キーとなるオブジェクトを1つ選択し、そのオブジェクトを基準に分布させる。
オブジェクト間の間隔が指定可。(以下は縦に均等分布した例。)

  • キーオブジェクトを選択。
    f:id:satomi_uetake:20170303212445p:plain

  • 間隔を10pxに指定。
    f:id:satomi_uetake:20170303212450p:plain

  • 整列。
    f:id:satomi_uetake:20170303212455p:plain


ここで学んだこと

デザインは設計されるものである

デザインのあらゆる要素にはルールと意味があり、アプリケーションと同様それらは完璧に設計されているもの。
なぜボタンはこのサイズにしたのか?なぜ文字をこの色にしたのか?
何となくきれいに見えるから。といった曖昧な基準で設定してはいけない。
なぜこのデザインになっているのかを、明確な基準を提示して他者にも説明できるように、設計することが大事。

カンプデザインはマークアップの基礎資料となる

カンプデザインはデザインを披露するだけの資料ではない。
マークアップをする際に、カンプデザインを基にオブジェクトのサイズや色を設定することもある。
今回利用したイラレのツールにも、デザインしたオブジェクトのCSSプロパティ(色やサイズ、フォント等)が 出力できる機能がある。
カンプデザインで作成したオブジェクトがそのままマークアップの工程にも影響することを理解する。

どう見せたいかを考える

デザインを通してどのようなコンテンツを作成したいか、コンテンツの利用者はだれか、 この点を意識してデザインは行われるべきである。
今回のカンプデザインは、マークアップの取り組みを行うメンバーにレスポンシブデザインの画面イメージを伝える事を目的として意識すべき点。

まとめ

取り組み前の自分

  • センスのいい人だけが芸術的な感性によって作り上げているもの。
  • デザインはかっこいいが正義。おしゃれなデザインやカラーのサイトこそがUXの極みだと信じて止まない。
  • フロントサイドって要はCSSとHTMLでしょ?

 ・
 ・
 ・
 ↓

取り組み後の自分

  • デザインは設計が大事。何より設計。見た目のセンスではなく、緻密な計算によって作り上げられているもの。
  • フロントエンジニアにとって、デザインとマークアップは切り離せないもの。マークアップを意識したデザインをする。
  • 線やオブジェクトの配置、色使いすべてに意味がある。
  • ユースケースを作成することが大切。見た目は付加価値を高めるもの。

引き続き取り組みたい事

今回の取り組みで、マテリアルデザインガイドラインなるものがあることを知りました。
ここには、デザインのあらゆる要素の標準を定義してあります。 何が標準とされているのか、その基準にはどういった意味があるのかを知り、UX設計に反映させていきたいです。

現在この取り組みはフェーズ1も終盤。次はいよいよフェーズ2が始まります。

続報は乞うご期待!

*1:ユーザーのデバイス(パソコン、タブレット、モバイル..)毎の画面サイズに対応して表示を変えることができるデザイン手法

*2:制作物の仕上がりを提示するための完成見本