@ikutani41さんから返信が来て、その翌日にレクチャーを受けることになった。UIのイケてるライブラリがたくさんあるので、プログラミングができるとこういったツールをすぐに利用でき、それっぽくプロダクトのUIを作れる。github.commaterial-ui-next.comしかしながら、イケてるコンポーネントを使っているはずなのに自分でなんとなくUIを作るとどうしてもチグハグ感がでてしまう。カッコイイコンポーネントを並べていくだけではどうしても違和感のあるUIになってしまう。Nativeでアプリを作ろうとするとカッコイイライブラリがあるのに、思うようなUIにならないのだ。んだと思うよ、とのことだった。2点になると言われた。細かい理論は置いておいて、エンジニアがデザイン無しでUIを作る時に知っておくと良いことを書いていく。配色アプリで利用される色は主に以下のように分類される。color背景色に相当する色で、文字の視認性を保つこれらを自力で決めるのは大変なので以下のツールを使ってさっと決めてしまうと良さそう。radiuselevation(影の付け方)ココらへんを統一することが大切。手前にあるものほど丸みを帯びるのが自然である。情報設計この画面は何をするところなのか、を考えるのが極めて重要。先にVisual上での取り決めについて述べたがこっちの方が重要。OSの違いからナビゲーションとページ構成を考えるナビゲーションとページ構成を考える時は、OSの依存性を考慮する必要があるが、ここはエンジニアであればなんとなく理解しているところだと思う。UIに従っているデザインが多く、AppBarの機能をしっかり理解しておけば最低限はオッケーらしい(僕自身がもともとiOSエンジニアだからそう言っただけかもしれない)。左上のハンバーガーアイコンにはナビゲーション関連の機能、右上のアイコンにはその画面に関連するアクションコントロールを置くようにする。iOSだとAndroidのAppBarに相当するのがNavigationBarである。最近はAppStoreのようにNavigationBarがないデザインも増えてきている。だいたいは下タブを利用すると良いだろうとのこと。Webだと画面が大きいからページの構成の時に考えることがだいぶ変わる。スマホ版の画面は制約が多いので、先にそちらで設計を考えると良いということだった。アプリはわざわざインストールした人がUIに触れるが、Webは目的なく訪れる人が多いのでそれを引き止めるためにも、情報が完全に整理されていることよりアイキャッチが非常に効果的になる。あとは余白をどうやって使うのかが大切で、意味合いが近いものは余白を詰めて、そうでないものは余白をあけて表現する。NativeだとOS特有のコンポーネントに頼るというよりは、若干Web寄りの思想が入ってくる。Nativeだと少し手間だったりして、結果的にiOSらしさが失われるということは感じる。Nativeで実装するときの頭の使い方も、ストーリーボードでよくあるiOSのUIを作るというよりは、ReactでWebのフロントを書いている時の感覚に近くなる。見せたいものさせたいことをまず考える。いったアクションが必要そう、という風に決まっていく。メインの情報を出して、それに対して何をさせるのか考えて、必要なコンポーネントを置いていく。この時に必要なコンポーネントが多くなると削って画面に収まるように整えていく。UIのCardコンポーネントがおしゃれだから、このコンポーネントにメインの目立たせたいコンテンツを入れたらいい感じなのでは、と思っていた。デザイナーに聞くと、Cardコンポーネントはリスト情報を表現するコンポーネントの一つだと知らされた。Cardコンポーネントは、一個一個のコンテンツ性があったり、Visual性が強いリスト情報を表現するのに有効で、たとえばSNSのシェアである。ユーザ一覧のような情報は、SNSのポストほどコンテンツ性は強くないので、大量に目を通しやすい(Grid)Listコンポーネントが有効になる。リストでもなく単体のコンテンツで目立たせるためにCardコンポーネントを使うと、Cardはコンテンツを前面に持ってくるため、他の情報が背景と化してしまうのだとか。まとめ1時間半ほどのレクチャーだったが、これらを知っているだけでも全然違うと思う。配色などVisual上の取り決めは知らないとないがしろにしてしまう箇所なはず。カッコイイコンポーネントだけではイケてるUIが作れないのかしっくり来た。情報設計をして画面の役割を考える。実装するOSによってナビゲーションやページ構成を整理していき、配色やトンマナを当てていく、こういうイメージだろうか。11:53エンジニアがデザイン無しでUIをさくっと実装する時に知っておきたいことTweet関連記事2019-06-23プログラミングの勉強をする前に知っておきたかったこと・知っておいてほしいことforやifを使ってプログラムを書いて、そのファイルを実行すると...2019-02-032019年ももう1ヶ月経ったので振り返っておく2019年ももう1ヶ月経ってしまった。(ベトナム)でiPhoneをひったくられた話(盗難時のロックとか対処法とか保険とか)プログラミングの勉強をする前に知っておきたかったこと・知っておいてほしいことブロックチェーンまわりの技術本を書きましたウェブサイトを作る時に便利なサービスたち(ロゴ生成、LP作成、画像引用とか)中国の深センの病院を退院して無事帰国しました。(医療搬送とかお金とか海外旅行保険の話)月別アーカイブ参加グループテクノロジーはてなブログをはじめよう!ngo275さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。