Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エンジニアでもカッコいいWebアプリ(サイト)を作りたい!
Search
株式会社ドリコム
March 20, 2023
Technology
0
250
エンジニアでもカッコいいWebアプリ(サイト)を作りたい!
株式会社ドリコム
March 20, 2023
Tweet
Share
More Decks by 株式会社ドリコム
See All by 株式会社ドリコム
株式会社会社ドリコム_企業説明資料
drecom_hr
0
48k
Other Decks in Technology
See All in Technology
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
200
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
390
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
260
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
160
Claude Code に プロジェクト管理やらせたみた
unson
7
4.7k
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
270
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.6k
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
1k
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
240
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
330
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
180
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Being A Developer After 40
akosma
90
590k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Practical Orchestrator
shlominoach
189
11k
It's Worth the Effort
3n
185
28k
4 Signs Your Business is Dying
shpigford
184
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Transcript
Copyright Drecom Co., Ltd. All Rights Reserved. エンジニアでも カッコいいWebアプリ(サイト) を作りたい!
B2B事業本部 AROW部 青木 慎
Copyright Drecom Co., Ltd. All Rights Reserved. 自己紹介 青木 慎
Drecomでの経歴 ・cocos2d-x を使ったゲーム開発 ・WebGL(PIXI.js)を使ったゲーム開発 ・Unityを使ったゲームSDK開発 ・その他、開発に必要なツールの開発 使ったことのある言語は C/C++/C#/Java/Objective-C/JavaScript/TypeScript/Ruby その他、必要に応じて何でも
Copyright Drecom Co., Ltd. All Rights Reserved. 目次 1. カッコいいWebアプリとは
2. UI/UXとは 3. カッコいいWebアプリを作るポイント a. ユーザーは経験に基づいて行動する b. ユーザーは反応がないと不安になる 4. カッコいいWebアプリを作る修行 5. まとめ 6. 最後に
Copyright Drecom Co., Ltd. All Rights Reserved. カッコいいWebアプリとは 見た目がいい! ワイルド、メタリック
なんかよくわからないけどすごい!
Copyright Drecom Co., Ltd. All Rights Reserved. カッコいいWebアプリとは 見た目がいい! ワイルド、メタリック
なんかよくわからないけどすごい! • 誰でも使える • 知りたいことが一目でわかる • 使っていてストレスがない UI/UXが 優れている
Copyright Drecom Co., Ltd. All Rights Reserved. UI/UXとは UIとは ユーザーとサービスを仲介するもの
フロントエンドでは主にページに表示される要素を指すことが多 い 実際にはキーボードやマウスなどのハードウェアも含まれる UXとは ユーザー体験 サービスを利用した時にユーザーがどのような体験を得るのか 「ボタンを押したら反応がある」だけでなく「ボタンを押したら 商品が買える」といったことも含まれる
Copyright Drecom Co., Ltd. All Rights Reserved. UI/UXとは Q: UI/UXってデザイナーが考えるものだしエンジニアには難しい
のでは? A: デザイナーがUI/UXを考える時、感覚だけで作っているわけで はない つまり、ポイントを抑えればエンジニアでもカッコいいサイトは 作れるはず! むしろフロントエンドエンジニアはカッコいいサイトを作るた めに存在する!
Copyright Drecom Co., Ltd. All Rights Reserved. カッコいいWebアプリを作るポイント 最も大切なのはこちらがどう作りたいかではなく UI/UXに対してユーザーがどう感じ取りどう行動するか
つまり が重要
Copyright Drecom Co., Ltd. All Rights Reserved. ユーザーの心理 (超抜粋) 1.
ユーザーは経験に基づいて行動する 2. ユーザーは反応がないと不安になる この2つが最重要!!(筆者談)
Copyright Drecom Co., Ltd. All Rights Reserved. ユーザーは経験に基づいて行動する 例1) 画面を見る順番
左上から順番に見る -> ユーザーが一番知りたい情報は左上に おいしいバナナ 300円 一般的なバナナの3倍甘いと言 われる とてもおいしいバナナです。 国内の契約農家で栽培されて 安心安全にお召し上がりいた だけます。 購入 はじめに 「おいしいバナナ」と画像が目に入る その後本文の 「一般的な〜」 が読まれ購入ボタンを最後に目にする 右下の「戻る」まで見てもらえない可 能性も... 戻る
Copyright Drecom Co., Ltd. All Rights Reserved. ユーザーは経験に基づいて行動する 例2) ボタンの見た目
囲いや陰影がある文字を見るとボタンだと認識する -> 押せないとストレス -> 囲いも陰影もないとボタンだとわからない ボタン ボタン ボタン
Copyright Drecom Co., Ltd. All Rights Reserved. ユーザーは経験に基づいて行動する 例3) 商品カタログページのフロー
だいたい商品画像と名前、値段がありタップすると詳細が見れる -> タップしていきなり購入画面に進むとストレス 300円 800円 おいしいメロ ン おいしいバナ ナ おいしいバナナ 300円 一般的なバナナの3倍甘いと言 われる とてもおいしいバナナです。 国内の契約農家で栽培されて 安心安全にお召し上がりいた だけます。 購入
Copyright Drecom Co., Ltd. All Rights Reserved. ユーザーは経験に基づいて行動する ここで重要なのは 事細かな操作方法を紹介するよりも
経験に基づいた操作ができるような体験をさせること 操作方法を読まないといけないような、経験から外れるUI/UXは ユーザーにストレスを与える 事前に類似サービスなどのUI/UXを研究しておくと◎
Copyright Drecom Co., Ltd. All Rights Reserved. ユーザーは反応がないと不安になる ユーザーはボタンを押したり何かを入力した時 反応がないと不安になる
押した瞬間はもちろん、押した後画面が切り替わるなども同様
Copyright Drecom Co., Ltd. All Rights Reserved. ユーザーは反応がないと不安になる 例1) ボタンの反応
ボタン ボタン ボタン 押している間は 色が変わる 離すと色が戻る ボタン ボタン ボタン 変わらないと不安・ストレス
Copyright Drecom Co., Ltd. All Rights Reserved. ユーザーは反応がないと不安になる 例2) 通信処理
ボタン押したのに画面が長い間変わらない おいしいバナナ 300円 購入確定 たとえ数秒でも押したことが わからずストレス!! 購入完了 ありがとう ございました!
Copyright Drecom Co., Ltd. All Rights Reserved. ユーザーは反応がないと不安になる 例2) 通信処理
処理中であることを出すと軽減 (進捗バーなどがあればなお◎) おいしいバナナ 300円 購入確定 購入完了 ありがとう ございました! おいしいバナナ 300円 購入確定 購入処理中...
Copyright Drecom Co., Ltd. All Rights Reserved. ユーザーは反応がないと不安になる ここで重要なのは ユーザーが操作した結果、何が起きているのか
フィードバックを可能な限り早く行うこと 理想はもちろん一瞬でフィードバックすること ただし、すぐにフィードバックできない場合は ・操作を受け付けたこと ・これは時間がかかる操作であり、今も処理が進行していること をきちんとわかるようにすることが重要
Copyright Drecom Co., Ltd. All Rights Reserved. カッコいいWebアプリを作る修行 • 自分でまずは作ってみる、そして第三者に使ってもらう
• 自分や開発メンバーだけでは先入観が生まれてしまう • 自分にはなかった発想を取り入れるチャンスを作る • 既存のWebアプリやサイトを研究する • 実際に触ってみて、不満や使いにくさを感じたらチャンス! • 改善する方法を自分なりに考えてみる • 何も感じなかったらそれもチャンス! • 何も感じない => 不満がなく使いやすい!
Copyright Drecom Co., Ltd. All Rights Reserved. まとめ • カッコいいWebアプリを作るにはユーザーの心理を理解しよ
う • ユーザーは経験に基づいて行動する • ユーザーは反応がないと不安になる • カッコいいWebアプリを作るための修行をしよう • 第三者に使ってもらおう • 既存のWebアプリの研究をしよう
Copyright Drecom Co., Ltd. All Rights Reserved. 最後に 今回ご紹介したのはカッコいいWebアプリを作るためのポイン トのごく一部
当たり前すぎると言われるかもしれないけれど、だからこそ重要 これからWebアプリを作る時はぜひカッコいいものを!