初めに

どもども～新米フロントエンドエンジニアを勝手に名乗っている龍ちゃんです。フロントエンジニアとしてのキャリアが明確にスタートしてから4か月が経過しました。てか商業プログラマーになってから一年もたってないですね。準備期間が10年弱あったと思えば今が最高に楽しいかもしれません。今回はUXデザインについて少し考える会を持とうと思います。

というのもサービス的にあった方が良い機能は無限にありますよね。無数にあるとスタートがわからなくなります。なので、新米フロントエンドエンジニアである僕がプロダクトで直面したUX改善を踏まえてブログに起こしていきたいと思います。

今回のブログは、「UXデザインって何だろう？」と口ポカーンな方、「フロントエンドでUX改善にはどう取り組めばよいか？」悩んでいる方、これから「UI/UXデザイン」に取り組む方に向けて最初の一歩目を提供できれば良いなと思って書いています。

僕もプロダクトに関わって、UXデザインに対する意識をもって二ヵ月目ですので、内容に誤りがあるかもしれません。その点はご了承ください。もし間違いがある場合は問い合わせていただけると喜びます。

UXデザインとは？

そもそもの定義について考えていきましょう。UXとは「製品やサービスなどの利用を通じて得る体験」のことを指します。

いきなり定義を言われてもふんわりしてしまうと思うので、香水を作るというプロダクトに置き換えてUXデザインとUIデザインについて考えてみます。

上記の図でUXデザインとUIデザインの違いについて書いてみました。UXデザインでは、企画から販売まですべての流れが含まれています。一方でUIデザインは実際のプロダクトの作成のみの部分を指します。UIデザインがプロダクトの作成で、UXデザインが商品の企画から作成・販売というプロダクトに関わるすべてのことを指しています。よってUIデザインはUXデザインに内包されているといえますね。ちょっと無理やり感がありますが、大枠としてはこういった認識で問題ありません。

フロントエンドが関わる部分のUXデザインはUIが含まれることが多いです。というかUXはUIを内包しています。UXデザインの表現の形にUIが含まれてます。UXデザインの勉強を軽くやってみたところ、深く潜っていけばいくほどフロントエンドの分野のみで語るのは難しい領域であることがわかりました。UXは5段階で分類されるそうです。

5段階で「戦略・要件・構造・骨格・表層」になります。それを簡単にまとめると以下の感じになるそうです。図だけは力作なので保存してもろて。。

さて！定義を自分で作っていったわけですが、「戦略・要件・構造」の部分に関してはフロントエンドというよりかはビジネスサイドの感覚が強いですよね。UIの分野で言うと「骨格・表層」が含まれると思います。でも、「構造」の部分で取り組む情報設計の観点が「要件・構造」の根底にあるということでフロントエンドの分野に含まれると思います。

さて、UXデザインについてはこれだけでも記事になると思って勉強して記事にしようとして早「3か月」です。いい加減やる気を出してまとめていきたいと思います。そのうち具体的な作業をまとめた「やることで見るUXデザイン」というタイトルで記事を出したいと思います。

ここからは、フロントエンドエンジニアとしてプロダクトに関わってきた僕が、このブログサイトで見る段階的なUXについて分析していきます。

フロント部分で考えるUXデザイン

さて、UXがユーザー体験に基づいていることに関しては触れましたね。では「構造・骨格・表層」の部分のUXデザインについて分析したいと思います。

構造

定義としては、以下の2つになります。

• ビジネス・テクノロジー・クリエイティブの3つの観点からアイデアを検証する
• テキストベースでの検証を行い、検討を重ね大まかな情報設計を行う

これをフロントエンドの作業に当てはめて考えてみました。一つ言えるのはこの段階ではUIについて考えません。では何を作るのか？となると思います。構造のフェーズで、最近作ってよかったリストの中にサイトマップがあります。

このブログサイトをサイトマップに落とし込んでみました。基本的なサイトマップの体裁をを少しアレンジしています。というか正確な書き方なんて知らないんですけどね。シンプルなサイトマップが上の図になります.。忘れがちなのが404NotFoundページです。どんなサイトでも自分で設定する必要があるのですが、忘れがちです。エラーページは経験則によるものが大きいと思います。エラーの種類によっては、ページ全体を差し替えるのかコンポーネント単位で差し替えるのか判断が必要です。判断が必要な理由としては、エラーの原因によってクライアントに与えるアクションが異なるからです。例を以下に示します。

• 404の場合でSPAの場合はルート設定されていないページの可能性があるので存在するルートに復帰する必要がある
• APIのエラーで500系の場合はAPIサーバーが落ちている場合があるのでクライアントに通知する必要がある
• APIのエラーで400系の場合はリクエスト形式が異なるかタイムアウトの可能性があるのでクライアントにリトライもしくは管理者問い合わせしてもらう必要がある

このようにエラーによってユーザに与える選択肢を変える必要があるので、サイトマップ内で考慮しておきます。この辺を設計するにはAPIの知識も必要になってくるので経験則だと捉えています。

少しサイトマップをアレンジして、情報設計の要素を付け足していきたいと思います。アレンジ版のサイトマップが以下になります。

サイトマップに具体的に何を書くか整理する情報を追記するのがアレンジ部分になります。具体的にページにどんな情報を載せるかを書くことで、サイトマップを見るだけでページの構成がわかるようになります。

サイトマップを見ながら画面の数やルート設計を行えば、認識の齟齬を減らして手戻りを少なくできるのでお勧めです。

骨格

定義としては以下になります。

• 構造フェーズを踏まえて、ミクロな視点から情報設計を行う

これをフロントエンドの作業に落とし込む前に情報設計について考えてみます。ちょうどいい記事があったので共有しておきます。調べてわかることの中に「ただ作るだけでなく、解決したい問題がありその解決策としてのサイト」という問題解決が根底にあることがわかりました。サイトを運用する主たる目的を考えるならば当然のことですがね（エンジニア的観点から見ると作って楽しいで終わっていたので新鮮）。

では、具体的に情報設計を逆算的に導き出したいと思います。対象はこのサイトの「職業を選ぶ」というページとします。このページは中途採用募集のページです。（PSでは中途採用もどしどし募集しています、まずはカジュアル面談なんてどうでしょうか？）

• 中途採用者に向けたメッセージ
• 各種募集要項とエントリーのリンク
  • エンターテイナー
  • API 関連製品導入エンジニア
  • クラウド・SRE・コンテナ エンジニア
  • クラウド・SRE・コンテナ プロジェクトマネージャー
  • システムアーキテクト
  • Webアプリケーション開発エンジニア/自社内開発中心
  • Webアプリケーション開発プロジェクトリーダー/自社内開発中心
  • インフラ系プロジェクトマネージャ・プロジェクトリーダー
  • オープンソースソフトウェアエンジニア
  • インフラエンジニア

項目の内容を文字まで落とし込むところまでをするのでしょうか？この辺りはコピーライティングの技術が必要になりそうなので、デザイン（表層）の範囲になるのかもしれません。

そしてフロントエンドの作業に落とし込むと、ワイヤーフレームがあります。ここのサイトは僕がUXについて勉強したサイトです。ワイヤーフレームは目的によって作成するレベルが異なるようです。

表層

定義としては以下になります。

• これまでのフェーズの集大成、一般的にデザインと呼ばれる部類

やっと一般的なデザインという部分まで来ました。デザインといっても内容は超いっぱいあるんだなと痛感しています！！！僕が考えたデザインに含まれる内容としては以下になります。

単語としては単純に三つになります。ですが、この中身が超絶広くて深いのですよね。ざっくりとした理解と共に内容に触れていこうと思います。

コピーライティング

広告業界だとよく聞く言葉みたいです。広告を作る際の文言や写真の選定のことを指します。定義に「人間心理」を理解し利用することがあります。そのため心理学といった学問的考えが根底にあり、テキストの大きさや色を用いて、目線の誘導などを実現します。これは、WEBサイトの目的を達成することに繋がります

このサイトで言うなら、タイトルは大きく文章はちょっと小さくといった具合です。

UIデザイン

これは皆さんが想像するWEBデザインに相当するものですね。ボタンの形や色などのことを指します。配色や配置にはコピーライティングの技術を用いて決定することもあります。こう考えるとデザインというのは知識力や学問の力が根底にあることが見えてきます。

でも、単純に感情を揺さぶる（かっこいい・かわいい・おしゃれ）などのエンターテイメント的なデザインであれば、アイデア勝負の部分もあるような印象ですね。知識とアイデアの両方で勝負することができれば最強ですね。

このブログサイトで言うなら、あなたが読んでいるこの文章の大きさや色などの画面に表示されているHTMLのすべてが当てはまります。

モーションデザイン

これは動きのデザインですね。例えばクリックできる要素では、ホバー時にカーソルが変わる・要素が浮き上がる・色が変わるなどが該当しますね。エンタメ部分なら、ぬるっと動くスクロール・カーソルを追従するアニメーション・サイトを訪れた際にアニメーションが走るなどが該当します。

このブログサイトで言うならヘッダー部分にカーソルを重ねた際に矢印が出てきたりメニューが出てきたりする部分です。

まとめ

とりあえずは各段階に分けて、フロントエンドエンジニアがUXデザインをやることベースで分析してみました。こう考えるとUXデザインはいきなりデザインをする世界ではなく、段階を踏んで進んでいくものであるということがわかります。デザインと一言にいうとUIデザインが先に目につきますね。これを書いている僕もUIデザインから入りました。ちゃんとやるならUXデザインまで拡張しないとUIデザインが良いものにならないので、今後はUXデザインも意識するべきですね。

終わりに

お疲れ様です。今回は直近のプロダクトを踏まえて気になっていたUXデザインをフロントエンドのやることベースで調べてまとめました。内容については間違いもあるかもしれないのでとりあえず「ごめんなさい」。今回の内容を簡略にまとめます。

でも、間違えることを恐れていると何も発信できなくなりますね。勉強したログが残せなくなってしまうので困るわけです。すると勉強するモチベが保てなくなってしまうので、たとえ間違いがあっても文章に起こしてログを残す作業をしているわけです。勉強のログは全てブログにしています。最近勉強した内容はBFFですね。こちらの記事で解説しています。

今回の記事は、プライベートの飲み友達も含めて三名の方にレビューしていただきました。指摘の嵐でしたが、良いブログになったものだな～と思っております。この場を借りてお礼をそっと置いておきます。

間違いは怖いので、しっかり調べてみるわけです。今回集めたリンクを以下にまとめておきます。UXを踏まえてよいプロダクトを作れるように今後も励んでいくつもりですので、よろしくお願いします。

• UXデザインとは？ユーザー体験を中心にビジネスを考える手法について
• ワイヤーフレームとは？作成のポイントやどこまで作るのかを解説
• コピーライティングってなに？ 本質・テクニック・ライターの仕事・上達のコツ・おすすめの本まで全部まとめてみた
• UI（ユーザインターフェース）デザインとは？基礎知識＆参考になる事例を紹介
• モーションデザイン(モーショングラフィックス)とは？最新トレンドや作り方について解説

RyosukeTanaka