6 months ago
本記事では、UI/UXの業務に携わるうえで、これだけは押さえておきたいことや、より理解を深めるのに有効な情報を発信している記事を集めてみました。UI/UXの設計やデザイン関連の知識をおさらいして自身の仕事を振り返るのもよし、プラスアルファの知識を得て業務に活用するのもよし。ぜひくまなくチェックして今後の業務に役立ててください。
※尚、こちらはPR記事ではございません。編集部が独自にテーマを選び、サイト担当者に許可を頂いて作成している記事です。また、記載中の内容は、執筆時の情報になります。
ブログ『のんラボ』の管理人であるのんさんは、Pythonによる決済関係のバックエンド開発に従事するエンジニアです。以前はPHPを用いたバックエンド開発や、Vue.js/Nuxt.jsによるフロントエンド開発なども担当していたとのこと。個人でも、自作アプリ制作やプログラミング開発支援など幅広く活動しています。
そんなのんさんですが、ある日友人に個人開発したアプリのテストを依頼したところ、開口一番に「使用方法が分からない」と言われ、参ってしまったそうです。そして「UIデザインの定石を知っておく必要がある」と考え、UIデザインについて調べてみたとのこと。こちらでは、そのことを記事にした《UIデザインについて少し調べてみた。》を紹介します。
のんさんは記事の中で、「機能実装のプログラミング中はロジカル思考になってしまい、ついエラーメッセージをそのまま表示しようとしてしまいがちになる。ある程度見やすく理解しやすいデザインにすることで、ユーザーが使いやすい良いアプリに仕上がるかもしれない」と話しています。
記事では[Design rule index]という書籍を参考に、特に印象の深かった3つの考え方について、例を混じえて解説しています。のんさんは3つの考え方について、「やっぱりそうだよな」「言っていることは簡単だけど実際にはできていないな」「そういう考え方があるんだな」と思ったのだそうです。
印象の深かった3つの考え方とは一体何なのかー。答えが気になる方は、ぜひ記事本文で確かめてみてくださいね。
また『のんラボ』では、PHPやJavaScript関連の記事、のんさんのお仕事に関する記事も読めますよ。エラーの解決法や対策法に関する記事もありますので、興味がある方は他の記事も一読してみてはいかがでしょうか?
■UIデザインについて少し調べてみた。
https://labo.nozomi.bike/article/20
UI/UXのデザインをするにあたり、設計への理解はマストでしょう。
そこで今回ご紹介する記事は《最近話題のオブジェクト指向UIデザインってつまりどんなデザイン??具体例の図を交えて解説!》。デザインエンジニアとしてご活躍されているsekiさんは、こちらの記事で「オブジェクト指向UI」について「タスク指向UI」と比較しながら解説しています。
たとえば、オブジェクト指向UIデザインを採用した際のメリットについて「直感的に操作できる」と「構造がシンプルになる」と言及。タスク指向UIと比較すると、直感的な操作ができるのがオブジェクト指向UIのメリットであり、対象物にアクションを起こす日常生活に多く溢れているのだそうです。
構造については、タスク指向UIとオブジェクト指向UIの違いについて、画像を用いて説明しています。よく見かける写真アプリの設計を用いて分かりやすく説明しているので、ぜひチェックしておきましょう。
さらに記事の後半には、タスク指向UIの例で代表的といえる自動販売機についても説明。オブジェクト指向UIの例では、フードデリバリーサービスサイトのUIに触れています。
そのほか、sekiさんのブログ『デザイナー兼エンジニアとしての学び』では、UI/UXに関する情報を多く発信しています。デザインだけではなく、フロントエンドからバックエンド、さらにはインフラ関連の記事も掲載されているので、興味がある方はぜひご一読ください。
■最近話題のオブジェクト指向UIデザインってつまりどんなデザイン??具体例の図を交えて解説!
https://ryo-ux-it-agile.com/object-oriented-user-interface/
OOUI(オブジェクト指向UI)は、基本的なUIデザインの技法として浸透しているUI設計手法の一つです。名前や概念は知っているけれど、「実際にプロダクトを設計する際に、どのように活用されているかを知りたい」という方もいらっしゃるのではないでしょうか。
こちらでは、NEXTGATE LiSMOtech株式会社のブログより《【UIデザイナーなら知っておきたい!】OOUI(オブジェクト指向UI)の設計方法を詳しく解説!》という記事を紹介します。
筆者曰く「オブジェクト指向UIは、プロダクト設計者がUI設計で最初に学んでおくべき概念だと思う」とのこと。さらに「オブジェクト指向UIの概念は、UI設計において一つの指標にもなる」とも話しています。
記事では、オブジェクト指向UIの4原則や、オブジェクト指向UIを活用するプロダクトの設計に必要な「3つの基本ステップ」を解説しながら、プロダクト設計のポイントについて説明しています。フードデリバリーサービスアプリを例に、図を混じえて分かりやすく説明されており、視覚的に学ぶことが可能です。オブジェクト指向UIについて詳しく知りたい方、実例をもとに勉強したい方は、ぜひ記事本文を一読してみてくださいね。
さらに別記事で、オブジェクト指向UIの概要とそのメリットについて書かれた記事も掲載されています。タスク指向UIとの違いについても触れられており、オブジェクト指向UIについて初めて知る方も分かりやすい内容となっています。
NEXTGATE LiSMOtech社のブログでは、デザイン関連の記事はもちろん、フロントエンドやバックエンドなどエンジニア関連の記事も読めます。他の記事が気になる方は、ぜひ同社のブログを訪れてみてはいかがでしょうか?
■【UIデザイナーなら知っておきたい!】OOUI(オブジェクト指向UI)の設計方法を詳しく解説!
https://lismotech.co.jp/blog/【uiデザイナーなら知っておきたい!】ooui(オブジ/
UIデザインをする上で欠かせない視点の一つに、ユーザー目線でストレスがない適切な設計が挙げられます。会員登録をすることで、初めてサービスを利用できるアプリが多い一方、登録までに手間がかかるアプリも少なくありません。
そこで、現在Webディレクターとして活躍しているおんたまさんは、《サインアップのUIデザイン》という記事で、サインアップ画面の制作について言及。
こちらの記事によると、「ユーザーの登録中のストレスをいかに減らして登録ページからの離脱率を下げるか」が重要だそうです。
おんたまさんは、ワイヤーフレームを作る時点で登録しやすいフォームUIを意識。入力の要件や装飾などの細やかな部分についても、ユーザーに誤解を与えない表現やデザインが大切だと言っています。
そのほか、制作ポイントとしてリアルタイムバリテーションやパスワード表示についての詳細も紹介。
ご自身が実際に手を動かし、手順や感想を記述しているため、読み応えのある内容です。
おんたまさんが運営している『おんたまBLOG』には、設定画面やユーザープロフィールのUIデザインについても紹介。
ほかにもUIに関する記事が豊富なので、興味がある方はぜひ一度ご覧になってみてはいかがでしょうか。
■【決意表明】1年目Webディレクター、UI・UXを学ぶ。
https://ontamablog.net/dairyui-001/
あなたにピッタリの
フリーランス案件が見つかる
110万件以上のフリーランス案件から一括検索
256,331件※の案件を保有しており、エンジニアやクリエイター向けを中心にたくさんの案件を一括検索可能です。
※ 5月9日(Thu)更新2あなたの経験やスキルに適した案件をメールでお知らせ
マイページに入力して頂いた経験や希望条件に合わせて、ご希望にマッチした案件をメールでお送りするので効率的な案件探しが可能です。