こんにちは。

突然ですが、皆様は「Daily UI」という面白いチャレンジをご存知でしょうか。

上記のサイトにメールアドレスを登録すると、毎日UIデザインのお題が１つずつ送られ、お題に沿ったUIデザインを創作し、それを100日間続けるチャレンジです。

まあ、つまりはUIデザインの武者修行なわけなんですが、私は上司からこれを教えてもらい、先月から始めました。

お題の例を挙げるならば「LP(ランディングページ)」や「アプリのアイコン」などです。自分はまだ始めたばかりですので他にはどんなお題が出てくるのやら…

私がDaily UIを始めた理由として、ただ単に面白そうだったからと、UIデザインをはじめとしたWEBデザインにとても興味があって得意になりたいな、と思ったことがきっかけです。

ちなみに、私はWeb系のお仕事をやっていますが、デザインは全くの素人です。

デザインのデの字も知りません。むしろ色の使い方やオブジェクトの配置などのセンスは壊滅的です。まじです。

イラレやフォトショは初心者に毛が生えた程度です。毛は産毛です。

そんな私が毎日四苦八苦しながら作ったデザインカンプ(デザイン案？)は次回まとめます。今回はやり方を簡単にご紹介しようかなと思います。メモがてら。

またもや長いので、茶でも飲みながら読んでください。

そもそもUIデザインって何よ

そもそも、UIデザインって何でしょうか。

WEB業界の方はよく「このUIはいい(だめ)よね～」とか言いますが、知らない人からしては「？」です。私もそうでした。

まずUIとは、ユーザーインターフェイス（User Interface）の略です。

インターフェイスの意味は以下になります。↓

コンピューター本体と各種周辺装置やコンピューターどうしを接続し，電気信号の大きさを調整したり，データの形式を変換したりして，両者間のデータのやりとりを仲介する回路や装置。
また，人間がコンピューターなどの装置を円滑に使用できるようにするための媒介装置・操作手順。インタフェイス。
引用：Weblio辞書より
https://www.weblio.jp/content/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9

Webサイト制作者が使う意味は、上記の「人間がコンピューターなどの装置を円滑に使用できるようにするための媒介装置・操作手順。」という部分です。

つまり、普段私たちが使ってる媒体(スマホやPC、スピーカーとかテレビ等)を使う時にめちゃくちゃ快適に使えるように、デザインの観点から設計することをUIデザインと言います。

で、実際に制作者が設計したものをユーザーが使って「最高に使いやすい」とか思うと、UI、もしくはUIデザインがいいよね～となります。

※もし上記の説明で間違っている点がありましたら、こっそり教えてください。

Daily UIのやり方

いざDaily UIをやろうとしたとき、いろいろと手間取った上に、他サイト様に情報が載ってなかったりしてたので私なりにやり方をまとめます。

①まずはメールアドレスを登録

まずは以下のサイトに登録。毎日お題が届く状態にしておきます。

ちなみに全部英語です。私は英語が大の苦手で大変でした。

ですがなぜか途中から不具合でメールが届かなくなりましたので、今は喜々としてネットで検索してお題を調べて取り組んでいます。

ただ、この方法は確固たる意志がないとさぼりますから、素直に登録をおすすめします。

②UIデザイン案を作るためのソフトを用意する

私はもっぱら以下のソフトを使用しています。

・Adobe  xd　(無料…なはず)

・Adobe  illustlator　(お金かかります)

その他プロの方は、Sketch(MACのみ)とかのツールを使っているみたいです。

ぶっちゃけツールなんて手段でしかないので、デザイン案を作るだけならエクセルとかGIMPとか無料ツールでもいい気がする…と思っています。

まじで縛りは一切ありません。

お題とソフトが用意できたら早速デザインしていきましょう！

その前に、目標を設定する

制作に入るその前に、そもそも自分がこの武者修行で何を得たいか考えた上で目標を設定しましょう。

せっかく100個も作るので、目標作ったら自分の努力の証が見えて楽しいと思います。

今回私が自分で決めた目標とルールをご紹介します。

■My目標

・UIデザインの考え方を理解する

・作業効率を向上させる(ショートカットやオブジェクトの作り方の近道を覚える)

■Myルール

制限時間：30分～1時間以内

制作ステップ：テーマ決め→スケッチ→ソフトで制作→見直し

完成後：SNSアップで恥をさらす。

その他：作業効率(ショートカット)を意識して制作する。他人の制作物を見たり参考サイトを必ず閲覧して、真似できるところは真似をする。

上記を見て「何この目標、レベル低っ！」とか思われたかもしれませんが、まあこんなもんです。私は素人なので、デザインへの理解のはじめの一歩として簡単に組みました。

本当は、デザインに関してプロからフィードバックがあれば最高なんですが、全部は難しいので、今回はソフトの使い方を１番重要視しています。２番目がデザインかな～

もしこれを見てくれている方で、だれでもいいので私が作ったものに対して「これはこうしたらもっといいのでは」など感想いただけると泣いて喜びます。きつい言葉でも結構です。(愛があれば)

話は変わりますが、一回会社で許可とって業務中に練習しようと考えましたが、どうも業務に押されて時間がとれませんでした。

今はやむを得ず、業務時間外でやっています。楽しいからまあいっか。

でもこういう練習って自分の職と関係あるんだったら、許可とって業務内にやったほうがいいです。むしろ業務に必要な勉強だったら業務時間外にやる意味もわかんないですよね。

デザイン系の会社だったらやりやすいかもしれませんが、その他の会社は理解がないと厳しいですが、いい機会ですので会社全体でやることをおすすめします。

では、今日はこのへんで。

追記；作ったものをまとめましたので、ぜひご覧いただければ嬉しいです！