ogiUI/UXデザイナー学習中

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

ogiUI/UXデザイナー学習中

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

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

こんにちは、ogiです！ インフラエンジニアとしてサーバーの保守運用をしている社会人です。 私はUI/UXデザイナーという仕事へジョブチェンジするために、日々取り組んでいます。 学習記録としてnoteにこれまでとこれからのUI/UXデザイナーになるまでの プロセスを記載していこうと思います。 なぜUI/UXデザイナーを目指すのか 私はUI/UXデザイナーを目指すきっかけとなったのは、何か私だけのスキルが欲しいと思ったからです。 社内のエンジニアを見ているとアプリ開発

ogiUI/UXデザイ…

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

      グリッド〜コンポーネントの動作UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#5 レスポンシブレイアウト(画面の幅に応じてCSSを切り替えるレイアウト)は、列、ガター、余白の要素で構成される その中でのグリットを簡単にいうと 余白はスマホの画面や、PCの画面をよく見ていると両端は空白の余白があることがわかります。(下記の図参照していただければ) ガターはFigmaでよく使いますが、カー

      ogiUI/UXデザイ…

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

        こんにちは、ogiです！ まだまだ勉強途中ですが、実際に行動してみて自分に足りない部分や 思ったより理解できていた部分など肌で感じたいと思います。 新入社員の方向け、資格勉強を頑張っている方に向けて家でも、移動中でも、いつでも勉強できるサイトのUIを0から作っていこうと思います。 今回作成する画面は「ログイン画面」！！ どういった機能が必要かや、アイデアだしなどを行い、感じたことを書いていきたいと思います。 実際に完成したログイン画面は以下になりました。 アイデア出

        ogiUI/UXデザイ…

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

          こんにちは、ogiです！ 今回は、前回から新たにスタートしている0からUIデザインの要件定義で使用したペルソナについて改めて調べて分かったこと、感じたことを書いていこうと思います。 前回のnoteは下記に掲載しておきますので、見てみてください。 では、初めていきます。 ペルソナとは まず、ペルソナとはマーケティング用語で「自社の製品やサービスの典型的なユーザーを体現する仮想的な人物像」という意味です。 ペルソナの重要性とメリット ビジネスにおいてマーケティングは

          ogiUI/UXデザイ…
        • 固定された記事

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

        ogiUI/UXデザイナー学習中

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

          こんにちは、ogiです！ Figmaの使い方や基本的なUIデザインの構成などをインプットしてきました。 Googleのmaterial designを読んで、UIデザインの基本のキを知ったところで、いざ！ サービスを0から作ってみます！ まだまだ勉強途中ですが、実際に行動してみて自分に足りない部分や 思ったより理解できていた部分など肌で感じたいと思います。 初めてつくるサービスは「資格勉強用サイト」! 新入社員の方向け、資格勉強を頑張っている方に向けて家でも、移動中で

          ogiUI/UXデザイ…

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

          ogiUI/UXデザイナー学習中

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

          今回紹介するのは、UXデザインを行う際にはユーザーのニーズを捉え、良い体験をデザインをするための極意を学ぶ。 ビジネスにおけるWEBサービスの重要度が年々まし、ユーザーに求められるレベルも高くなっているそうなので、本書を通してすこしで靄が晴れる1冊になればと思います。 伝えたいデザインを言葉で訴求しなくても、ユーザーに伝わるように全ての体験が一貫して細部まで作り込まれるデザインが良いデザインであり、ますます重要になってくるとのこと 2000種類って想像できないですが、今リ

          ogiUI/UXデザイ…

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

          ogiUI/UXデザイナー学習中

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

          光と影〜画素密度UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#4 光 マテリアルデザイン環境では、仮装ライトがUIを照らす。 影 サーフェイスの影は、その標高と他のサーフェイスとの関係によって決まる。 コンポーネントの周囲に影またはストロークのアウトラインを使用すると、コンポーネントを操作できるかどうかを判断しやすい。 レイアウトの構造 カードなどの小さなコンテナをグループ化

          ogiUI/UXデザイ…

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

          ogiUI/UXデザイナー学習中

          Materail Design輪読#3　標高

          標高UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#3 標高システム アプリバーの後ろでコンテンツをスクロールするなど、サーフェスを他のサーフェスの前後に移動できるようにします フローティングアクションボタンの影がカードコレクションから分離していることを示す方法など、空間的な関係を反映します 他のサーフェスの前に一時的に表示されるダイアログなど、最も高い標高に注意を向けます 開始

          ogiUI/UXデザイ…

          Materail Design輪読#3　標高

          ogiUI/UXデザイナー学習中

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

          環境UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#2 表面 物理の世界では、オブジェクトを積み重ねたり、互いに接続したりすることはできるが、互いに通過することはできない。 ⇨影を落とし、光を反射する環境の法則を無視できないと言うこと 深さ UIは光、表面、影を使用して3次元(3D)空間を表現する環境で表示される。 全ての要素はX軸、Y軸、Z軸にそって深さで移動する。 WEBでは、

          ogiUI/UXデザイ…

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

          ogiUI/UXデザイナー学習中

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

          『ノンデザイナーズ・デザインブック』は、デザインの原理・原則が学べる本となっています。 特に本書にあるデザインの4大原則【近接・整列・反復・コントラスト】です。 ・「デザイン基本について学びたい」 ・「良いデザインと悪いデザインの違いを知りたい」 という方にオススメです。 4つの基本原則近接 異なる性質の要素間に、関連を作らないこと。 関連しない項目は、離して配置すること →マテリアルデザインの視覚的なグループ化が重要 整列 揃えていることを見せるためにデザインの中に

          ogiUI/UXデザイ…

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

          ogiUI/UXデザイナー学習中

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

          UI/UXデザイナーになるための読書シリーズ 今回はUXリサーチについて勉強します。 本書の後半は実施にデザイナーになった後の話になるので 今回は前半部分で学んだことを残します。 UXリサーチUX(User Experience)とは、必ずしもUI(ユーザーインターフェイス)を使っている時に限ったものではない。 ⇨様々な場面で起きる人の知覚や反応(UX)について調べて明らかにすること 経験や生活の文面によって反応や知覚が変化 UXデザインUXを主眼に置いてサービスをデザイ

          ogiUI/UXデザイ…

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

          ogiUI/UXデザイナー学習中

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

          UXデザインを行う際には、感覚(良さそう)ではなく複数のロジック(マテリアルデザインのような言語化できるデザイン)を活用することで、より精度の高いデザインを作れる。そのデザインをユーザーが利用する場合、ユーザーの感覚や行動心理学などをしっかりと理解することがデザイナーとしてより一歩成長できます。 今回紹介するのは、複数あるUXデザインにおける法則のうち、代表的なデザインの法則。これからデザイナーを目指すものなら、これは押さえておきたい。 ヤコブの法則インターフェイスの摩擦

          ogiUI/UXデザイ…

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

          ogiUI/UXデザイナー学習中

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

          0からデザイナーになるために最初に選んだ本がこちら。 どのデザイナーもおすすめしており、 デザイナーを目指していなくても読んでおいて損はない1冊であるとのこと。 これは読まないと！と思い早速本屋に行って読んでみたので、 感じたことをつらつら書いていきます。 ダイジ度天秤　「どっちが大事を口癖に」デザインに限らず重要なことだと思います。 ユーザーが何を求めているのか、デザイナーは何を伝えたいのかを明確にしてデザインしていくことが大切だとわかります。 ビジネスマン基本5W1Hを

          ogiUI/UXデザイ…

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

          ogiUI/UXデザイナー学習中

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

          IntroductionUI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ＃1 原則材料はメタファー(比喩)光を反射したり影を落としたりする方法など、物理的な世界とのそのテクスチャ(質感)に触発されている。 グラフィック色、画像などの印刷デザイン手法に基づいて、視聴者を体験に没頭させる階層、意味、焦点を作成。 モーション注意を集中させ、遷移を通じて継続性を維持する。 環境を変換および再編

          ogiUI/UXデザイ…

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

          ogiUI/UXデザイナー学習中