マガジンのカバー画像

エンジニア->デザイナー

58
エンジニアからデザイナーになりたい、エンジニアでデザインを知りたい人向けキュレーションマガジンです。
運営しているクリエイター

#デザイン

オブジェクトベースなUIデザイン

オブジェクトベースなUIデザイン

WEB+DB PRESS Vol.107掲載のオブジェクトベース設計によるUIデザイン改善を読んだ。デジタルなサービスのUIを設計していく上で、とても参考になる知見なのでまとめてみる。

オブジェクトベースUI設計とはユーザーがやること(タスク)の手順をそのまま画面に反映させるのではなく、ユーザーの関心対象(オブジェクト)を画面とデータに対応させながら考えていく手法。

オブジェクトベースUI設計

もっとみる
【保存版】デザイナーがチェックすべき情報収集先16選

【保存版】デザイナーがチェックすべき情報収集先16選

デザイナーがチェックすべき情報収集先をまとめてみました。
普段の情報収集に是非ご活用頂き、デザイナーのスキルアップの手助けになれれば幸いです。

自分の場合、デザインを制作する際は、PinterestとGoogle画像検索をフル活用しています。
またPinterestとnoteのUIやサービス設計は非常に参考になるので、そちらもあわせて見てみると勉強になると思います。

1、Pinterestクラ

もっとみる
人はなぜ「分かりやすいデザイン」でも失敗するのか

人はなぜ「分かりやすいデザイン」でも失敗するのか

これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。

唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか?

説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあ

もっとみる
デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント

webやアプリのUIデザイン上達のコツとして、模写(コピー)がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践!となった時に多くの学びを活かせたと記憶しています。

そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところ

もっとみる
実務経験なし中途でデザイナー転職目指してる人へ

実務経験なし中途でデザイナー転職目指してる人へ

こんちゃす。Jayです。某事業会社でインハウスデザイナーとして働いてます。業務の種類は多岐にわたりますが、UI/UXデザイン中心。サムネのネタが少し古めだし初めてnote書くけど、叩かれるの怖すぎてガタガタ震えてる。でも書く。お手柔らかにおなしゃす。​ちなみにめちゃくちゃ長いです。10分くらいかかると思うんでお時間のある時に。

この記事を特に読んでもらいたい人デザイナーとして転職を目指す、30歳

もっとみる
サイエンスフロンティア高校のポスターに学ぶ!グラフィックデザイン基本の「き」

サイエンスフロンティア高校のポスターに学ぶ!グラフィックデザイン基本の「き」

はじめまして、いなにわうどんと申します。はてなブログ民である私が note などという意識高いサービスを利用する日が来るとは思いもしませんでしたが、この度、街頭で見掛けたデザインに強い憤りを感じたため、初 note に挑戦した次第です。

フロンティアとはさて先日、友人と母校の中学を訪れた際、ある高等学校のポスターの鮮烈なデザインに衝撃を受けました。その名も「横浜市立横浜サイエンスフロンティア高等

もっとみる
『UIデザイン みんなで考え、カイゼンする。』を読んでみた。

『UIデザイン みんなで考え、カイゼンする。』を読んでみた。

こんにちは。
夏みたく暑くなったり、涼しくなったり、令和の皐月君は不安定ですね。

却説、会社で本を買ってもらえる制度があって定期的に欲しい本を帰るのですが、今回読んだ本はこちら

ラッキーなことにパラパラめくってたタイミングで著者の方交えた読書会にも行けました。
読書会の形式は読む章(今回は4章と5章)でチーム分けをして、さらにチームの中でも項目を分担して読んでまずはチーム内にシェア、最終的には

もっとみる
【Poiboy】アプリのコンセプト文をチューニングした話

【Poiboy】アプリのコンセプト文をチューニングした話

この内容は、マッチング業界のデザイナーが集まるMeet upで、発表したものです。

発表した内容を、以下に書いていきます

----------

こんにちは、青野です。まず自己紹介させてください。
新卒でヤフーに入って、そこでWebデザインを担当していました。去年の8月にDiverseに転職しています。 

今はPoiboyというマッチングサービスのデザイナーです。

私が8月に入社したときの

もっとみる
今話題のデザインシステムについて、Webデザインから考える

今話題のデザインシステムについて、Webデザインから考える

「今話題」といっても、デザイナー界隈で話題にあがったのは2017年ですね。

なお、日本語翻訳記事はこちら。

最近でいうと、Pairsさんが以下の記事を書かれています。

デザインシステムは実は目新しい概念ではありません。古くはBootstrapからはじまるCSSフレームワーク、デザインの言語化からガイドラインを策定したHuman Interface Guidelines(Apple)、デザイン

もっとみる
「デザイナーよ。足を動かせ。頭を動かせ。手を動かせ。」 ー UI Crunch#14 スマートフォンを超えた体験を創る。導くUI

「デザイナーよ。足を動かせ。頭を動かせ。手を動かせ。」 ー UI Crunch#14 スマートフォンを超えた体験を創る。導くUI

こんにちは!
渋谷でデザイナーをしているちょいちょい(@739nanak)です。
UI Crunch#14にnoteレポート枠で参加してきました✏️

長いので、ざっと読みたい方は太字だけ追っていくことをお勧めします!

1. かわいいが届くまで (FLOWER/ROLLCAKE) 🖥登壇者・サービス
- 木坂 名央さん(ROLLCAKE株式会社 デザイナー)
- FLOWER(「かわいい」が

もっとみる
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと

フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと

フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。

なんでこんな話になったのか(前置きなので次の章まで飛ばしてOKです)

デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡され

もっとみる
【翻訳してみた】マテリアルデザイン - モーションデザインを理解すること

【翻訳してみた】マテリアルデザイン - モーションデザインを理解すること

前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。

引用元 Google - Material Design
Understanding motion - Material Design
※動画像データもこちらから引用させてい

もっとみる
【翻訳してみた】マテリアルデザイン - 速度について

【翻訳してみた】マテリアルデザイン - 速度について

前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。

前章 : マテリアルデザイン - モーションデザインを理解すること

引用元 Google - Material Design
Speed - Material Design

もっとみる
【翻訳してみた】マテリアルデザイン - コレオグラフィ

【翻訳してみた】マテリアルデザイン - コレオグラフィ

前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。

前章 : マテリアルデザイン - 速度について

引用元 Google - Material Design
Choreography - Material Design
※動

もっとみる