Wantedlyは、月間150万人が利用する国内最大のビジネスSNSです

This page is intended for users in Japan. Go to the page for users in United States.

【開発者ブログ】UI/UX勉強会開催しました!

こんにちは、フロントエンドエンジニアの小原です。
先日、ブラニュー開発部で2回目となる勉強会を開催しました。テーマは「はじめてのUIとUX」。
「UIとUXはまったく別のものである」というのは、Web業界にいる人間にとっては常識?だと思うのですが、じゃあ何が違うの?そもそもUIデザイナー・UXデザイナーって何をする人なの?と、定義が曖昧だったりするので、勉強会を開きました。
前半はスライドを使ってUIとUXの違いについて。後半はProttを使ったハンズオン形式で行ないました(前回の反省)。前回と同じく、スライドはGitHubにあげています。(はじめてのUIとUX)

ここ2〜3年はProttを始めとしたプロトタイピングツールによるUIデザインが一般的になりつつあるのですが、まだまだデザインと言えばPhotoshop、ワイヤーフレームはExcelなどを使う現場が多いのが現状です。(個人的にはExcelワイヤーフレーム反対派です。あれは表計算ソフトであってベクターツールではない!)
そこで若手のデザイナーやディレクターをUIデザイナーに育成しよう!と意気込んで今回の勉強会を開催しました。この勉強会の資料を作っていて思ったのですが、UIというのは"枯れた技術""情報設計"に尽きると思いました。

枯れた技術

例えばソフトウェアでよく使われる「保存」フロッピーアイコンですが、Appleがフロッピーディスクドライブを捨ててもう15年以上経つのに、いまだに保存ボタンはフロッピーアイコンが使われています。また、いわゆる「宅電」も姿を消しつつあるのに、スマートフォンの通話ボタンのアイコンは昔ながらの受話器です。動画サイトの再生・停止ボタンも30年以上前に決められたものが使われています。また、ここ数年いわゆる「オワコン」扱いのハンバーガーメニューも、デファクトスタンダードとしてモバイルアプリ・サイトのメニューボタンとして認識されています。ここらへんの操作系アイコンを無理やり新しくすると、ユーザーは混乱しUXは低下します。

情報設計

UIデザインをしていると、情報設計という概念に当たります。例えばECサイトを作るとして、

・何を販売するECサイトなのか。家具(高価な耐久消費財)とサプライ品(消耗品・日用品)では必要な情報量がまったく違う
・ペルソナデザイン(年代・性別・ビジネスかコンシューマか)
・流入経路(オーガニック?リスティング?トップページからの検索?LP?)
・サイト内の遷移(フリーワード検索・カテゴリ検索・キャンペーンページ・マイページなど)
・C向け(実際に購入する人向け)に加え、B向け(管理画面)の考慮
・WEBなのかネイティブアプリなのか
・絶対に必要なページ・文言(特定商取引法・利用規約・会社概要・問合せフォームなど)

と、考慮する部分がたくさん出てきます。
さらに機能単位で考えると、

・商品詳細ページ
・カート
・会員機能
・決済システム
・商品検索
・TOPページや特集ページなどのメディア機能
・顧客管理
・商品管理

これらを要件定義としてすすめていくと、必然的にどういったアーキテクト・フレームワークを採用するのかという考慮も必要となります。たとえば、C向け画面でReactを使ったSPAなんてありえませんし、B向け画面でローディングやスプラッシュを多用するのもやはりありえません。

まとめ

こういった考慮までしていくと、UIデザイナーはある程度技術的な知見が必要となりますし、インフラ・バックエンド・フロントエンドとエンジニアとの協業が必須となってきます。と、書いているうちに「実はIAとか要件定義の勉強会もやったほうがいいんじゃなかろうか?」という結論になってきました。プロダクト・メディアの開発をやっていると、発生する課題ですからね。

ブラニュー株式会社では一緒に働く仲間を募集しています
Anonymous
Fb409f36 9a3c 496f a997 35874b489ec8?1501395443
A7790dc0 5a16 4ebc 926f eab8be44a1e9
Picture?height=20&width=20
A90ab0fb 37f0 47c8 a9af 784d0a46712e?1502334262
2587e2d2 79cb 4dd6 b478 e658c543cbb9
9 いいね!
Anonymous
Fb409f36 9a3c 496f a997 35874b489ec8?1501395443
A7790dc0 5a16 4ebc 926f eab8be44a1e9
Picture?height=20&width=20
A90ab0fb 37f0 47c8 a9af 784d0a46712e?1502334262
2587e2d2 79cb 4dd6 b478 e658c543cbb9
9 いいね!

今週のランキング

ランキングをみる

Page top icon