Daily UIならぬWeekly UIを始めたフロントエンドエンジニアの記録 その1

こんにちは、makura3です。

先日知人からDaily UIを教えてもらったのですが、溜まっているタスク的に毎日は無理そうなので勝手にWeekly UIと名付けて始めてみました。

まだ１テーマしか制作しておりませんが、実際にやってみて詰まったところや良かったところなどを共有できればと思います。

ちなみに、自身の sketchスキルはLv1(購入して放置していた) です。
デザインの知識もデザイナーさんに比べたら遥かに劣っていると思います。

環境整備

使用しようと思っていたsketchはすでに手元にあったので、こちらは特にすることはありませんでした。
人によって、PCの用意やツールの用意が必要です。

ルール作り

まず、制作するにあたってのルール作りをしました。
これが結構重要な気がします。

・制作ペースは週１とすること
・実際に使用しやすいようなデザインにすること
・サイトのカテゴリーや、ペルソナを設定し、それに沿ってデザインを作ること

１つずつ説明していくと、まず制作ペースは週１としました。
もちろん毎日続けることは成長に大きく繋がると思いますが、他の制作や勉強の時間が取られてしまうなどの事から週１としています。
もちろん、余裕があれば週２にしてみるなど柔軟に対応するつもりです。

２つめに、実際にWebサービスに利用できそうなデザインにする事を心掛けるようにしています。
事前に皆様が投稿されたDaily UIを見てみたのですが、どれもオシャレなデザインばかりで感動しました。しかし、現在自分が携わっている業務の系統とは大きくかけ離れておりました。
そのため、より自分の力になるようにこのような決め事を作りました。

たまにWebサービスで使えなさそうなテーマがくるかと思いますが、その場合は好きなように作ります。（計算機など）

そして３つめ、サイトのカテゴリーやペルソナを設定しました。
２つ目のルールをよりブレないようにするために、最低限のサイトの方向性は事前に決めておくことにしました。
・何を扱っているサイトか
・外部との連携はあるか
・サイトを利用するユーザーの年齢層や性別など    etc....

これらのルールを最初に決めた事で良い方向へ行くのかどうかは、また改めてお伝え出来ればと思います。

制作

ルールを決めたので、早速制作に取り掛かりました。
sketchでの作業は、今後も使うヘッダーなどはシンボル化しておき、その場限りと思われるComponentはシンボル化せず置いておきます。
（この辺りが若干マークアップに近い感じで良い..）

ただ、この方法が良いのか悪いのか分からないので今後も試行錯誤していく予定です。

折角デザインを考えたので、クオリティが低く申し訳ないですがこっそり貼っておきます。

テーマ；Login

親サイト(BoxBox)のアカウントでログインができ、かつSNSアカウントでもログインできるようにしました。
自サイト(Neko Box)のアカウントログインが下部にあるのは、「親サイトアカウントやSNSアカウントでのログインがよく使われる」という設定をしているからです。

そして書き出した後に気づいたのですがヘッダーさん、おぬしロゴしか居ないじゃないか。

細々としたミスもあり、まだ「デザインした」というレベルには到達していないかもしれませんが、ここから更なる成長を狙っていきたいと思います。

継続は力なり...

所感

自分で作った画面を見返してみるとなんの特徴もないデザインになってしまっており、デザインすることの大変さを痛感しました。（世の中のデザイナーさん達、本当すごい）

そしてsketchの扱いに慣れていない為、一つのComponentを作るだけでも結構な時間がかかり、思った以上に体力を使った気がします。
とはいえ、フロントエンドエンジニアもデザインの基本的な知識を押さえておくだけで仕事のやりやすさが変わるので、今後もどんどん手を動かして学んでいきたいと思います。