ogiUI/UXデザイナー学習中

平成生まれ、香川県育ち。 探究心が強く既存のWebページやアプリの画面を 実際に作って…

ogiUI/UXデザイナー学習中

平成生まれ、香川県育ち。 探究心が強く既存のWebページやアプリの画面を 実際に作ってみたいという思いから、UI/UXデザイナーを志す。 現在はSESにてインフラエンジニアとしてサーバーの保守・運用業務を行いながら、独学でUI/UXデザインを学習中。

記事一覧

Material Design輪読#5 グリッド〜コンポーネントの動作

グリッド〜コンポーネントの動作UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#5 レスポンシ…

資格勉強用サイトを0から作ってみた#ログイン画面編

こんにちは、ogiです! まだまだ勉強途中ですが、実際に行動してみて自分に足りない部分や 思ったより理解できていた部分など肌で感じたいと思います。 新入社員の方向け…

要件定義の終着点ペルソナとは

こんにちは、ogiです! 今回は、前回から新たにスタートしている0からUIデザインの要件定義で使用したペルソナについて改めて調べて分かったこと、感じたことを書いていこ…

資格勉強用サイトを0から作ってみた#1

こんにちは、ogiです! Figmaの使い方や基本的なUIデザインの構成などをインプットしてきました。 Googleのmaterial designを読んで、UIデザインの基本のキを知ったところ…

「原則×法則」でサイトの価値は劇的に向上する

今回紹介するのは、UXデザインを行う際にはユーザーのニーズを捉え、良い体験をデザインをするための極意を学ぶ。 ビジネスにおけるWEBサービスの重要度が年々まし、ユーザ…

Material Design輪読#4 光と影〜画素密度

光と影〜画素密度UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#4 光 マテリアルデザイン環…

UI/UXデザインとの出会いとこれから

こんにちは、ogiです! インフラエンジニアとしてサーバーの保守運用をしている社会人です。 私はUI/UXデザイナーという仕事へジョブチェンジするために、日々取り組んで…

Materail Design輪読#3 標高

標高UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#3 標高システム アプリバーの後ろでコン…

MaterailDesign輪読#2 環境〜物理的属性

環境UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#2 表面 物理の世界では、オブジェクトを…

基本要素はデザイナー問わずあらゆる場面において基本である

『ノンデザイナーズ・デザインブック』は、デザインの原理・原則が学べる本となっています。 特に本書にあるデザインの4大原則【近接・整列・反復・コントラスト】です。 …

UXリサーチの捉え方〜UXリサーチはなぜ大事なのか〜

UI/UXデザイナーになるための読書シリーズ 今回はUXリサーチについて勉強します。 本書の後半は実施にデザイナーになった後の話になるので 今回は前半部分で学んだことを残…

UXデザインの法則からデザインを考える上で重要なこと

UXデザインを行う際には、感覚(良さそう)ではなく複数のロジック(マテリアルデザインのような言語化できるデザイン)を活用することで、より精度の高いデザインを作れる。そ…

「なるほどデザイン」を読んでなるほどと思ったこと

0からデザイナーになるために最初に選んだ本がこちら。 どのデザイナーもおすすめしており、 デザイナーを目指していなくても読んでおいて損はない1冊であるとのこと。 こ…

Material Design輪読#1 原則〜スタイル

IntroductionUI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#1 原則材料はメタファー(比喩)光…

Material Design輪読#5 グリッド〜コンポーネントの動作

Material Design輪読#5 グリッド〜コンポーネントの動作

グリッド〜コンポーネントの動作UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#5

レスポンシブレイアウト(画面の幅に応じてCSSを切り替えるレイアウト)は、列、ガター、余白の要素で構成される
その中でのグリットを簡単にいうと

余白はスマホの画面や、PCの画面をよく見ていると両端は空白の余白があることがわかり

もっとみる
資格勉強用サイトを0から作ってみた#ログイン画面編

資格勉強用サイトを0から作ってみた#ログイン画面編

こんにちは、ogiです!

まだまだ勉強途中ですが、実際に行動してみて自分に足りない部分や
思ったより理解できていた部分など肌で感じたいと思います。

新入社員の方向け、資格勉強を頑張っている方に向けて家でも、移動中でも、いつでも勉強できるサイトのUIを0から作っていこうと思います。

今回作成する画面は「ログイン画面」!!
どういった機能が必要かや、アイデアだしなどを行い、感じたことを書いていき

もっとみる
要件定義の終着点ペルソナとは

要件定義の終着点ペルソナとは

こんにちは、ogiです!

今回は、前回から新たにスタートしている0からUIデザインの要件定義で使用したペルソナについて改めて調べて分かったこと、感じたことを書いていこうと思います。

前回のnoteは下記に掲載しておきますので、見てみてください。

では、初めていきます。

ペルソナとは

まず、ペルソナとはマーケティング用語で「自社の製品やサービスの典型的なユーザーを体現する仮想的な人物像」と

もっとみる
資格勉強用サイトを0から作ってみた#1

資格勉強用サイトを0から作ってみた#1

こんにちは、ogiです!

Figmaの使い方や基本的なUIデザインの構成などをインプットしてきました。
Googleのmaterial designを読んで、UIデザインの基本のキを知ったところで、いざ!
サービスを0から作ってみます!

まだまだ勉強途中ですが、実際に行動してみて自分に足りない部分や
思ったより理解できていた部分など肌で感じたいと思います。

初めてつくるサービスは「資格勉強用

もっとみる
「原則×法則」でサイトの価値は劇的に向上する

「原則×法則」でサイトの価値は劇的に向上する

今回紹介するのは、UXデザインを行う際にはユーザーのニーズを捉え、良い体験をデザインをするための極意を学ぶ。
ビジネスにおけるWEBサービスの重要度が年々まし、ユーザーに求められるレベルも高くなっているそうなので、本書を通してすこしで靄が晴れる1冊になればと思います。

伝えたいデザインを言葉で訴求しなくても、ユーザーに伝わるように全ての体験が一貫して細部まで作り込まれるデザインが良いデザインであ

もっとみる
Material Design輪読#4 光と影〜画素密度

Material Design輪読#4 光と影〜画素密度

光と影〜画素密度UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#4



マテリアルデザイン環境では、仮装ライトがUIを照らす。



サーフェイスの影は、その標高と他のサーフェイスとの関係によって決まる。
コンポーネントの周囲に影またはストロークのアウトラインを使用すると、コンポーネントを操作できるかどう

もっとみる
UI/UXデザインとの出会いとこれから

UI/UXデザインとの出会いとこれから

こんにちは、ogiです!

インフラエンジニアとしてサーバーの保守運用をしている社会人です。

私はUI/UXデザイナーという仕事へジョブチェンジするために、日々取り組んでいます。

学習記録としてnoteにこれまでとこれからのUI/UXデザイナーになるまでの
プロセスを記載していこうと思います。

なぜUI/UXデザイナーを目指すのか

私はUI/UXデザイナーを目指すきっかけとなったのは、何か

もっとみる
Materail Design輪読#3 標高

Materail Design輪読#3 標高

標高UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#3

標高システム

アプリバーの後ろでコンテンツをスクロールするなど、サーフェスを他のサーフェスの前後に移動できるようにします

フローティングアクションボタンの影がカードコレクションから分離していることを示す方法など、空間的な関係を反映します

他のサーフ

もっとみる
MaterailDesign輪読#2 環境〜物理的属性

MaterailDesign輪読#2 環境〜物理的属性

環境UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#2

表面

物理の世界では、オブジェクトを積み重ねたり、互いに接続したりすることはできるが、互いに通過することはできない。
⇨影を落とし、光を反射する環境の法則を無視できないと言うこと

深さ

UIは光、表面、影を使用して3次元(3D)空間を表現する環境で

もっとみる
基本要素はデザイナー問わずあらゆる場面において基本である

基本要素はデザイナー問わずあらゆる場面において基本である

『ノンデザイナーズ・デザインブック』は、デザインの原理・原則が学べる本となっています。
特に本書にあるデザインの4大原則【近接・整列・反復・コントラスト】です。
・「デザイン基本について学びたい」
・「良いデザインと悪いデザインの違いを知りたい」
という方にオススメです。

4つの基本原則近接

異なる性質の要素間に、関連を作らないこと。
関連しない項目は、離して配置すること
→マテリアルデザイン

もっとみる
UXリサーチの捉え方〜UXリサーチはなぜ大事なのか〜

UXリサーチの捉え方〜UXリサーチはなぜ大事なのか〜

UI/UXデザイナーになるための読書シリーズ
今回はUXリサーチについて勉強します。
本書の後半は実施にデザイナーになった後の話になるので
今回は前半部分で学んだことを残します。

UXリサーチUX(User Experience)とは、必ずしもUI(ユーザーインターフェイス)を使っている時に限ったものではない。
⇨様々な場面で起きる人の知覚や反応(UX)について調べて明らかにすること
経験や生活

もっとみる
UXデザインの法則からデザインを考える上で重要なこと

UXデザインの法則からデザインを考える上で重要なこと

UXデザインを行う際には、感覚(良さそう)ではなく複数のロジック(マテリアルデザインのような言語化できるデザイン)を活用することで、より精度の高いデザインを作れる。そのデザインをユーザーが利用する場合、ユーザーの感覚や行動心理学などをしっかりと理解することがデザイナーとしてより一歩成長できます。

今回紹介するのは、複数あるUXデザインにおける法則のうち、代表的なデザインの法則。これからデザイナー

もっとみる
「なるほどデザイン」を読んでなるほどと思ったこと

「なるほどデザイン」を読んでなるほどと思ったこと

0からデザイナーになるために最初に選んだ本がこちら。
どのデザイナーもおすすめしており、
デザイナーを目指していなくても読んでおいて損はない1冊であるとのこと。
これは読まないと!と思い早速本屋に行って読んでみたので、
感じたことをつらつら書いていきます。

ダイジ度天秤 「どっちが大事を口癖に」デザインに限らず重要なことだと思います。
ユーザーが何を求めているのか、デザイナーは何を伝えたいのかを

もっとみる
Material Design輪読#1 原則〜スタイル

Material Design輪読#1 原則〜スタイル

IntroductionUI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#1

原則材料はメタファー(比喩)光を反射したり影を落としたりする方法など、物理的な世界とのそのテクスチャ(質感)に触発されている。

グラフィック色、画像などの印刷デザイン手法に基づいて、視聴者を体験に没頭させる階層、意味、焦点を作成。

もっとみる