こんにちは！皆さんは現場でどのようなお仕事をなさってますか？
設計やテスト、実装など色々だと思います。

単に実装といっても、様々な種類があります。
画面側の実装や、サーバーサイド、DBの構築など！

では、本日は画面側のUI/UXについてお話ししたいと思います。

もしあなたがUI/UXをデザインする立場になったら何を意識したら良いのか？（実装の話とはちょっとずれますね）

大事なことは3点
・ユーザーの操作に沿った配置
・最小限の情報！
・デザイン原則をまもる！

これを起点にデザインすると実はそこまで外したりしないものです。

・ユーザーの操作に沿った配置

スマホでのユーザー登録フォームを想像してください。
登録ボタンはどこに配置するのが正解だと思いますか？と聞かれて答えられない人はいないと思います。

そうです。スクロールしていった先の1番最後にあるべきですね！
それか、スマホの右上にホバーでついてくる形になるはずです。（アプリとかに多いかも？）

では、なぜそのようなデザインになっているか。
それは登録ボタンを押すのは、登録フォームを入力して、最後に押すから最後にあるです。

当たり前じゃん！と思うかもしれませんね。しかしこういう当たり前が実はなかなか難しいのです。

では、次の質問です。

あなたの商品をお問い合わせするお問い合わせページはどのように遷移した画面にあると良いでしょう？

答えは来月のブログで書かせていただきます！笑

・最小限の情報に抑える

あまりごちゃごちゃなんでも書けばいいってもんでもないのです。
最低限、ユーザが操作を間違わないような説明だけで良いです。
多くを語るサイトというのは、つまり説明なしには操作しづらいUIになっていることに気づいてください。
例えば、ファミコンのゲームをやるときを想像してください。
説明書って読みますか？

そうなんです。
説明書を読まなくても、ドラクエはクリアできるようになっているし、ストリートファイターはコンボが決まるものなんです。
「次のボタンを押すと〜ができます」なんて説明文言があるようなWebアプリケーションは、はっきり言ってひどいものだと自覚してください。

・デザイン原則に沿ってパーツを作る。

Googleやアップルなどがデザインの規約を出しているのです実は！
こういうドキュメントを一通り読まないとUI/UXのプロには慣れません。
また、プライマリーボタンやセカンダリーボタンなど、ページの要素も再利用されていなければいけません。
逆に統一されていると、エンジニアとして実装するときにコンポーネント単位での再利用ができます！
配色も最初に決めた色から逸れるのはよくありません。
ベースカラー、サブカラー、ワーニングカラーなどは細かく最初に決めてください。

あなたがフリーのエンジニアであるなら、「おすすめの配色」とかでググるとカラーセット集など出てきて参考にするとセンスの良い色でアプリケーションを作ることができます。

以上！開発とは少し離れた領域ですが、知っておいて損はない知識だったと思います。
有名なサイトなどを参考に「なんでこういうページ遷移なんだろう？」とか考えるのも意外と楽しいものです。

何より現場で、この上にあげた物からかけ離れている思想でデザインされているものがあれば提案をして
ジャンジャン現場での信頼度が稼げます。

作るだけのエンジニアだけでなく、提案もできるエンジニアになるために
開発の領域だけでなく、サブ領域を育てることも大事ということも「ついでに」伝えたいです。笑

読んでいただきありがとうございます。