エンジニアのS.Uです。
現在フロントエンドエンジニア育成の取り組みを行っております。
取り組みがスタートして早1週間。その中で実践したことや学びについて書きたいと思います。
自己紹介
これまでは、主にバックエンドの開発を行ってきました。
先月よりフロントエンドの開発チーム（UXを検討するチーム）に配属になり、フロントエンジニアとして晴れてスタートを切りました。
UXチームはデザインの工程からマークアップの工程までを担う部隊で、日々UXのあるべき姿を追い求めて奮闘中しています。
目的 ～What is the goal?～
今回の取り組みでは、以下を達成することを目的としています。
- デザイン～アプリ開発 までの工程を理解する
- フロントエンジニアに必要なツールや言語の使用方法を理解する
- エンジニア間のコミュニケーションを活性化する
- つまづきやノウハウをアウトプットしてナレッジを蓄積する
取り組みの内容
現在フロントエンドエンジニア育成の取り組みの中で、フロントエンジニアの基礎の習得（１）の マークアップ実践に取り組んでいます。
このフェーズでは、レスポンシブデザイン*1に対応したマークアップコーディングを習得すべく、
カンプデザイン*2を基としたマークアップを実践しています。
UXチームに所属していることから、私はこの取り組みの前準備としてカンプデザインの作成を担当しました。
今回はこのカンプデザイン作成の中で得た学びを書いていきたいと思います。
カンプデザインの作成 ～初めての「カンプデザイン」と「イラレ」～
はじめに
レスポンシブデザインに対応した画面イメージを作成するために、複数画面サイズ用にレイアウトを作成することにしました。
そもそもデバイスの種類、サイズってどのくらいあるの？というところからスタート。 この辺のサイトをみると、主要なデバイスの画面サイズが載っています。 【CSS】適切なブレイクポイントを考えてみる（レスポンシブデザイン用）
ひとまず標準的な3種類のデバイスを選定。以下3つのカンプデザインを作成することにしました。
- PCサイズ
- タブレットサイズ
- スマートフォンサイズ
カンプデザイン作成にあたり使ったツールは、Adobe Illustrator（通称イラレ）です。
カンプデザインもさながらイラレも初挑戦です。
メニューが豊富すぎて使いこなせるかやや不安を抱えつつ、レッツトライ。
実践
各サイズ5つのコンテンツを配置する簡単なレイアウトをイメージし、早速カンプデザインを作成。 この程度なら簡単、、とサクっと作成して余裕をかましていた私に落とし穴が。
作成後にUXの師匠にチェックをお願いすると、 出るわ出るわ指摘のオンパレードでした。
私のカンプデザインは何がだめだったのか。 今思えば甘さ満載の出来栄えですが、恥をしのんで公開。
作成したカンプデザイン
※左からPCサイズ、タブレットサイズ、スマートフォンサイズ
これに対する指摘事項
- 各サイズ間のコンテンツのサイズにルールがない
コンテンツ1はヘッダー、コンテンツ2はメニューバーを想定したコンテンツだが、画面のサイズ間で幅が異なる。固定サイズであるべき。 可変サイズであれば、画面の縮尺に合わせる等、サイズに明確なルールが必要。 - 色に意味がない
色が設計されていない。どんなイメージのデザインにしたいのかが明確でない。 また、使用している色の設定値にルールがない。 通常カラーパレットを作成する場合、明度、彩度を変えずに色見だけを変える手法をとる。 - コンテンツ間の線幅が考慮されていない
コンテンツに枠線が1pxで設定されているが、その線が重なっているケース（コンテンツ間が1px開く）と重複していないもの（コンテンツ間が2px開く）が混在している。 - 拡大するとコンテンツ間に隙間が…👈論外
こんな簡単なイメージのカンプデザインを作成しただけでも、こんなにもダメポイントがあるなんて・・・
自分の知見のなさになかなかショッキングでしたが、同時にデザインの奥深さを思い知りました。
原因と考察
1、2の指摘については、コンテンツのサイズや色を「設計してしなかった」事が原因でした。 「なんとなく収まりがいいサイズ、パッと見でいい感じの配色」 私はこんな曖昧な基準でカンプデザインを作成していました。
3、4の指摘については、イラレの機能を使えば解消できる問題でした。
イラレには、オブジェクトの整列という機能があります。
↓このようなメニュー。
キーとなるオブジェクトを基にオブジェクトを整列させたり、
整列時にオブジェクトの間隔をピクセル単位で指定することができます。
この機能を正しく使っていれば、コンテンツ間の間隔の不揃いや、不要な隙間は発生しませんでした。
具体的には、こんな感じです。
整列前
整列後（オブジェクトの整列）
複数選択したオブジェクトを、指定した辺（または中央線）を基準に揃える。（以下は中央揃えにした例。）
整列後（オブジェクトの分布）
複数選択したオブジェクトを、指定した辺（または中央）を基準に均等に分布させる。（以下は左揃えにした例。）
整列後（等間隔に分布）
複数選択したオブジェクトの中で、キーとなるオブジェクトを1つ選択し、そのオブジェクトを基準に分布させる。
オブジェクト間の間隔が指定可。（以下は縦に均等分布した例。）
キーオブジェクトを選択。
間隔を10pxに指定。
整列。
ここで学んだこと
デザインは設計されるものである
デザインのあらゆる要素にはルールと意味があり、アプリケーションと同様それらは完璧に設計されているもの。
なぜボタンはこのサイズにしたのか？なぜ文字をこの色にしたのか？
何となくきれいに見えるから。といった曖昧な基準で設定してはいけない。
なぜこのデザインになっているのかを、明確な基準を提示して他者にも説明できるように、設計することが大事。
カンプデザインはマークアップの基礎資料となる
カンプデザインはデザインを披露するだけの資料ではない。
マークアップをする際に、カンプデザインを基にオブジェクトのサイズや色を設定することもある。
今回利用したイラレのツールにも、デザインしたオブジェクトのCSSプロパティ（色やサイズ、フォント等）が
出力できる機能がある。
カンプデザインで作成したオブジェクトがそのままマークアップの工程にも影響することを理解する。
どう見せたいかを考える
デザインを通してどのようなコンテンツを作成したいか、コンテンツの利用者はだれか、
この点を意識してデザインは行われるべきである。
今回のカンプデザインは、マークアップの取り組みを行うメンバーにレスポンシブデザインの画面イメージを伝える事を目的として意識すべき点。
まとめ
取り組み前の自分
- センスのいい人だけが芸術的な感性によって作り上げているもの。
- デザインはかっこいいが正義。おしゃれなデザインやカラーのサイトこそがUXの極みだと信じて止まない。
- フロントサイドって要はCSSとHTMLでしょ？
・
・
・
↓
取り組み後の自分
- デザインは設計が大事。何より設計。見た目のセンスではなく、緻密な計算によって作り上げられているもの。
- フロントエンジニアにとって、デザインとマークアップは切り離せないもの。マークアップを意識したデザインをする。
- 線やオブジェクトの配置、色使いすべてに意味がある。
- ユースケースを作成することが大切。見た目は付加価値を高めるもの。
引き続き取り組みたい事
今回の取り組みで、マテリアルデザインガイドラインなるものがあることを知りました。
ここには、デザインのあらゆる要素の標準を定義してあります。
何が標準とされているのか、その基準にはどういった意味があるのかを知り、UX設計に反映させていきたいです。
現在この取り組みはフェーズ1も終盤。次はいよいよフェーズ2が始まります。
続報は乞うご期待！