エンジニアが1ページ丸々新規デザイン起こした話
目次
自己紹介
こんにちは、ライフサポートDiv.の山形です。
ライフサポートDivは主にリフォーム会社の情報・見積比較サービスを展開している「リショップナビ」と、プロパンガス会社の情報・見積比較サービスを展開している「エネピ」を運営しています。
私はリショップナビのサービスを担当しており、普段フロントエンドとバックエンドのエンジニアをしておりますが、今回そんな私が丸々1ページ新規デザイン作成の業務を行いましたので、その話をしていこうと思います。
元々私はデザインに興味があり、エンジニアである私がデザインまで出来れば仕様とデザインが噛み合わない、ということもなくスムーズに進められるのでは、という思いで立候補しました。
デザインした時に意識したこと
資料や参考サイトを見る
資料・参考サイトを見て思ったことは、「デザインはセンスではなく理論」ということです。
まず大きな狙い（目的）があった上で、見せたいものの優先度を決め、配置を決め、文字の大きさや色などを決めて行く、という、言われれば当然ですが、デザインについて全く知らなかった時は、こういった過程を踏むことさえ知りませんでした。
デザインした中で特に意識したことは下記の通りです。
・ユーザーが期待するものは何か
・不要な動作はないか
・色調が見づらいものになってないか
総じて「違和感」をなるべく取り払うことを意識しました。
学んだ理論をしっかり理解しきれているか、活かしきれているか、はまだまだ不安なところですが、今後も活かせるように定着させていきたいです。参考にした資料については後ほど紹介させていただきます。
デザイナーにフィードバックをもらう
デザイナーに何度も確認依頼をしました。どういったところがなぜ良くて、なぜダメなのか、デザインを普段しているメンバーから意見をもらえることはやはりとても大切です。
そして、デザインをしていてわかったことですが、作業に没頭するとかなり不安に陥るんですよね（笑）。ある程度理論に沿った正解不正解はあると思うのですが、最終的には決めの問題になると思います。その「決め」にある程度自信を持つために、何度も時間をつくってもらいました。
案件担当者と何度も話し合う
デザイナーだけではなく、案件を進めているディレクターと経過を確認しながら何度も話し合いました。先ほども述べた通り、デザインをしていると不安に陥ります。そういった部分を払拭する、という目的はもちろんありますが、細かいところまで納得感を持って進めたい、という意図もありました。元々少人数で話し合ってましたが、最終的に多くのメンバーを巻き込んで沢山のフィードバックをしてもらい、結果的に納得感を持って進められたと思います。
参考にした資料の紹介
伊藤 博臣『エンジニアのための理論でわかるデザイン入門』インプレス
ITエンジニアにおいてもデザインが必要になっている現状を踏まえた上で、デザインの思考プロセスや、配色の方法などの細かなメソッド、またデザインスキル向上のための取り組み方等々を学べます。デザインに必要なことはセンスではないこと、スキルを向上させるためにどういった取り組みを普段から行えば良いのか、などを知ることができ、納得感を持って読み進めることができました。
カイシトモヤ『How to Design いちばん面白いデザインの教科書 改訂版』 エムディエヌコーポレーション
形・色・文字・写真・レイアウト・印刷、とそれぞれ章が分かれており、デザイン全般について、とてもわかりやすく学べます。特に配色の考え方、レイアウトの考え方についてとても参考にさせていただきました。レイアウトとは要素の関係性を定義することであると意識してデザインするようになりました。
ソシオメディア株式会社、上野 学、藤井 幸多（著）・上野 学監修『オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 (WEB+DB PRESS plusシリーズ)』株式会社技術評論者
世の中のUIにタスク指向UI（タスクを選んでから目当てのオブジェクトを選ぶUI）が多く存在しており、その解決手法としてオブジェクトUI（目当てのオブジェクトを選んでからタスクを選ぶUI）を上げた上で、既存の事例に触れながら、設計プロセス・実践方法について記述されてます。使いやすさを考える上で、ただ漠然とそれを考えるのではなく、思考の出発点をどこに置くべきか、どういった道筋で考えるべきか、詳しく学ぶことができます。
Jon Yablonski (著), 相島 雅樹 (翻訳), 磯谷 拓也 (翻訳), 反中 望 (翻訳), 松村 草也 (翻訳)『UXデザインの法則 ―最高のプロダクトとサービスを支える心理学』オライリージャパン
デジタルだけでなく、広い範囲で役立つデザインに関しての心理学的法則がまとまっております。ヤコブの法則（他のサイトと同じような挙動をすること）、フィッツの法則（ユーザの操作する要素は適切な大きさ・近さか）など、言われると当たり前のように感じることや、美的ユーザビリティ効果（美しいUIは使いやすいと認知されるが、UIに対するネガティブ感情を隠蔽し、実際のユーザビリティを正しく認知できないリスクもある）という話もあり、かなり実践で役に立つ内容が書かれています。
良かったこと・反省点
今案件では、デザインだけでなく実装まで私が行ったのですが、それを通しての良かったこと・悪かったことを書いていきます。
良かったこと
- 実装を意識したデザインが出来ること
- 実装しながらでもデザイン変更がある場合はある程度可能なこと
- かなり壁打ちができる
といったところでしょうか。実装中での大きなデザインの変更というのはありませんでしたが、実装で画面に落とし込んだ時にイメージと異なった、ということがあったので多少の調整は行いました。
（デザイナー含めて話し合えば良いだけの話でもあるので、大きなメリットとは言えないかもしれません。ただ実装中の柔軟性やスピーディさが多少良くなるかもしれない、というくらいの話ですね。）
三つ目について、エンジニアとして、というよりデザイナー初心者として、という話にもなるかもしれません。またプロジェクト全体としては時間がかかりすぎて良くない、という目線もあるかもと思いますが、私個人として、色々試す意味もあり、20パターン程作成しました。周りの理解もあり、何度も確認いただいた上でデザインを決めることができたと思います（そういった環境があったことが何より良かったのだと思います）。
反省点
- 引き出しが少ないため、納得させるためのデザインを出すまでに少々時間がかかったこと
- 要求時に出されたワイヤーに対して先入観を抱きすぎていたこと
壁打ちができたことは良かったと思っておりますが、それまでに時間がかかりすぎてしまったと感じてます。原因はやはり引き出しが少なかったことなのだと思いました。元々、要求時にいただいたワイヤーに引っ張られすぎており、自分の中でもレビューいただいた時も良い反応が来たのはそれとは全く異なったものを作成した時でした。先入観に引っ張られてしまうのは自分の癖もあると思いますが、多くの引き出しと実践があれば防げたのではと思います。この経験をさせてくださったのはとてもありがたいことだと思いました。
非デザイナーでもデザインについて知っておくことのメリット
ユーザーにとって必要な情報の優先度を意識できるようになること
私個人の感覚として、デザインなしの案件において、単に要件の機能をどのように作るのか、どのように情報を網羅して見られれば良いのか、という意識でいました。デザイン知識を学んだあとでは、まず一番最優先にしたい目的は何か、それに必要な情報はなんなのか、逆に要求されたことの中で不要な情報はないのか、といったことをより深く考えられるようになったと実感しております。加えて、細かな目線移動を意識すること、色使いを意識できるようになったとも感じており、デザイン不要な画面においても、提案できる画面の幅が広がったのでは、と感じました。
既存の画面に対し、疑問を持つことができる（新たな課題の発見）
デザイン制作にあたり、今回資料や参考サイトを見ましたが、既存の画面が本当にユーザーにとって使いやすいのか、疑問を持つようになりました。作成された当時はその時期に合わせた価値観でデザインされており、納得された上だったのかもしれません。また、ユーザーはその課題にすら気づいてないのかもしれません。特にデザイナーが見ていなかったような画面（管理画面等）に触れるエンジニアがデザインについて多少でも知っておくと、新たな改善点に気付けるのでは、と強く思いました。
最後に
エンジニアとして、あるいはデザイナーとして専業するのも当然良いかと思いますが、両方を通じて分かることも多々あると改めて感じました。僕自身の知識の少なさ、理論に対しての理解の少なさなど、デザイナーとしての課題は多々見つかりましたが、エンジニアとして新たな課題発見のきっかけに出来ることは大きなプラスになったと実感しております。
本編では書いておりませんが、デザインを行った画面についてはフロントエンド、バックエンドの実装も行っております。そこまで一気に担当する事も初めてでしたので、心身ともに体力が必要だと感じました（特にロジック面でも規模が大きめの実装が必要だったため）。物理的な時間の長さ、というのもありますが、実装だけでなくデザイン面でも自分の責任になってくるので、心理的負担も増したように思います（業務上の責任ということではなく、気持ちの問題として）。分業の良さを改めて感じました。
エンジニアも必ずデザインしようと呼びかける意図はありませんが、デザイナーがやっている作業を知ることで、新たな発見があることを身をもって知ることができて良かったと感じております。
ここまでお読みいただきありがとうございました！
以前私がReact Nativeを使用してアプリをゼロから作成したことについての記事もありますので、是非そちらもご覧ください！
https://overs.zigexn.co.jp/technology/6296/
