マガジンのカバー画像

UIマガジン　|　テクゾウ

9
本
UIデザインに関する記事をまとめています！
運営しているクリエイター
テクゾウ

UIデザインを勉強したら街の風景がWeb画面に見えてきた話

今回は、Amazonさんのサイトなど、優れたUIデザインを勉強していたら、街の風景がWebデザインに見えてきた話をします。 １．UIデザインの基本UIデザインの書籍で有名な、オブジェクト指向UI(OOUI)デザインによりますと、UIデザインは基本、コレクションビューとシングルビューの2つで構成されます。 ◎コレクションビュー メニューやリストなどの要素集合の一覧表示 ◎シングルビュー コレクションビューから遷移する先の、単一要素の詳細表示 ２．商店街の風景をUIデザイ

テクゾウ

【UIデザイン】副業マッチングシステム③【画面デザインの作成】

UIデザインのプラクティスとして、副業マッチングシステムのUIデザインを全３回で実施します。 3回目のこの記事では、実際のデザイン例を示します。 ※この記事から見る人は、この記事内の以下の項だけ見ると楽しめます。 　■トップ画面のデザイン例 ※前回までの記事 ■副業マッチングシステムの画面構成前回の記事より、画面構成は以下になります。 ■画面構成 (1)トップ画面(案件の一覧ビュー) (2)案件の詳細ビュー (3)企業の一覧ビュー・詳細ビュー (4)ユーザー一覧ビュー

テクゾウ

【UIデザイン】副業マッチングシステム②【画面構成の設計】

UIデザインのプラクティスとして、副業マッチングシステムのUIデザインを検討してみたいと思います。 第２回のこの記事では、UIデザインの中核である画面構成を設計していきます。 ①システムの説明、オブジェクト抽出 ②画面構成の設計　←本記事 ③画面デザインの検討 ※前回の記事 ■前回①のおさらい今回は下記を前提に、デザインしていきます。 ◎デザインする副業マッチングシステムの概要 ・ユーザーと企業をマッチングする ・企業が案件情報を登録できる ・ユーザーが案件を検索し、

テクゾウ

【UIデザイン】副業マッチングシステム①【デザイン方針の決定】

UIデザインのプラクティスとして、副業マッチングシステムのUIデザインを検討してみたいと思います。 下記の３回に分けて、記事にしていきます。 ①システムの説明、デザイン方針の決定　←本記事 ②画面構成の設計 ③画面デザインの検討 ■システムの説明◎テーマ 副業マッチングシステム ◎概要機能 ・ユーザーと企業をマッチングする ・企業が案件情報を登録できる ・ユーザーが案件を検索し、応募できる ・企業とユーザー間でコミュニケーションを取れる 以降では、上記のようなシステム

テクゾウ

ユーザーがワクワクするWebデザインの作り方【オブジェクト発見編】

優れたWebデザインの秘訣について学んだので、具体例をあげて解説していきます。結論として、次のことがバリバリ重要と思います。 １．Webデザインの秘訣(1)ユーザーの「一番お目当てのオブジェクト」をスクリーンに登場させる。 (2)それに対してアクションを提示する。 つまり、一番お目当てのオブジェクトでユーザーを惹きつけて、 その後に、実行可能なアクションを提示する流れです。 物語の創作に例えると、アッと驚くシーンで読者を惹きつけてから、 物語の設定やストーリーを見せてい

テクゾウ

UIデザイン・ケーススタディ２【市役所の行政サービス端末】

市役所へ行った時、ATMみたいな端末でパパッと証明書などをゲットできると便利ですよね。 この記事ではUIデザイン(画面デザイン)の勉強のために、市役所の行政サービス端末について、より良いUIデザインを検討してみます。 ※こちらの記事もよろしければ ■UIデザインの流れ以下の流れでデザインしていきます。 (1) ユーザーの関心対象のオブジェクトを決める (2) 画面フローを設計する 　・「一覧ビュー＞詳細ビュー」のフローが基本 (3) 各画面のデザインを決める ■(1

テクゾウ

あなたのWebデザインがダメな理由【オブジェクト指向UIデザインで改善】

ナゼか分からないけど、使いにくいWebサイトってありますよね。 この記事では、使いにくいWebデザインになってしまう理由と、その改善方法を解説します。 実際に、使いにくいWebデザインとは、ユーザーの関心対象のオブジェクト(モノ)が見えないデザインです。 １．使いにくいWebデザイン例(楽天)一例として、楽天のショッピングサイトが挙げられます。(あくまで個人の意見です。) セール情報などが前面に出ており、ユーザーの関心対象のオブジェクト(モノ)、つまり「商品」が見えにく

テクゾウ

食券販売機はUIデザイン優等生！【オブジェクト指向UIデザイン】

この記事では、グッドなUIデザイン例として、タッチパネル式の食券販売機を紹介します！ また、UIデザインの落とし穴も合わせて紹介します。 次に紹介するデザインは、ユーザーの関心対象の「食べ物」が前面に表示されており、一見とても使いやすいです。 ※こちらの記事もよろしければ。 ■食券販売機のUIデザイン美味しそうな食べ物の写真が、一覧表示されています。 ですので、ユーザーは頭を空っぽにして食べたいモノに飛びつく(タップする)だけで、食券を購入できます！ ■食券販売機のU

テクゾウ