yiio

デザイナーと働いてるエンジニア https://yiio-blog.vercel.app/

yiio

デザイナーと働いてるエンジニア https://yiio-blog.vercel.app/

リモートでも健康なデザインチームの紹介＆その要因5つ

所属している会社のデザイン部のよいところを紹介します。 フラットな組織で、誰もが発言できる チーム内でのデザイン批評が機能してる フルリモートにすぐ適応できた こういう組織にできている要因をいくつか考えてみました。 1) デザイン批評全メンバーが課題図書として『みんなではじめるデザイン批評』を読み、実践しています。批評は一方向の単純なダメ出しなのではなく、同じゴールへ向かって、双方向にやりとりするものだという共通の認識があります。週に数回は、UIデザイン批評の打ち合

yiio

    • 職種を超えるコミュニケーションデザイン ~デザインドキュメントを書いてみよう~

      この記事は、デザイナー向けの社内勉強会の書き起こしです。 職種を超えた情報共有の難しさデザイナーどうしのやりとりでは問題がなくても、別の職域のメンバーとはなかなかうまくいかない。仕事をしていて、そんな経験はありませんか？ 同じデザインを見せても、相手によっては真逆の評価になることがあります。この原因のひとつとして、意図や目的といった文脈の共有が行われていないことが挙げられます。文脈の共有なしのフィードバックは、個人の好みによる感想になってしまうのです。 日々違う知識に触

      yiio

      • はじめての Web アクセシビリティ

        この記事は、社内デザインチーム向けの勉強会の書き起こしです。スライド画像に英語がついてるのは、チームの半数が日本語を第一言語としないためです。 アクセシビリティとは「とは」はこちらの動画をまず見ましょう。 アクセシビリティとユーザビリティ アクセシビリティは、様々なユーザーがアクセス可能であることを指します。使いやすさは必ずしも問われません。 これに対し、ユーザビリティは、特定のユーザーにとって使いやすいことを指します。想定の幅によっては、アクセシビリティとももちろん

        yiio

        • doda の登録フォーム画面のアクセシビリティを考える

          Webアクセシビリティの勉強をしています。今回は doda の新規登録フォームを検証してみます。 チェック1：axe DevTools で機械的なチェックaxe は、オープンソースのアクセシビリティ検証ライブラリーです。今回は、axe DevTools を使って以下のページのチェックを行いました。 https://doda.jp/dcfront/member/memberRegist/?entry_id=26 結果、Critical レベルの警告は2箇所。1つ目は、リンク

          yiio

        • リモートでも健康なデザインチームの紹介＆その要因5つ

          yiio

        • 職種を超えるコミュニケーションデザイン ~デザインドキュメントを書いてみよう~

          yiio

        • はじめての Web アクセシビリティ

          yiio

        • doda の登録フォーム画面のアクセシビリティを考える

          yiio

          エン転職 の登録フォーム画面のアクセシビリティを考える

          Webアクセシビリティの勉強をしています。今回は エン転職 の新規登録フォームを検証してみます。 チェック1：axe DevTools で機械的なチェック axe は、オープンソースのアクセシビリティ検証ライブラリーです。今回は、axe DevTools を使って以下のページのチェックを行いました。 https://employment.en-japan.com/signup/signup_mail/  Critical レベルの警告は1点で、h1 タグの「メールアドレス

          yiio

          エン転職 の登録フォーム画面のアクセシビリティを考える

          yiio

          type のフォーム画面のアクセシビリティを考える

          Webアクセシビリティの勉強をしています。今回は type の新規登録フォームを検証してみます。 チェック1：axe DevTools で機械的なチェック axe は、オープンソースのアクセシビリティ検証ライブラリーです。Lighthouse のアクセシビリティ監査にも、この axe のエンジンが使われています。今回は、axe の DevTools を使ってみます。freee のアクセシビリティー・ガイドラインにも紹介されていたから、たぶんよいものなんだと思います。 Ch

          yiio

          type のフォーム画面のアクセシビリティを考える

          yiio

          求人媒体の Lighthouse パフォーマンスを比較する ③ - 求人ページ編

          Lighthouse を使って、国内の大手バイト求人5つのパフォーマンス計測と考察をしてきました。今回が最終回になります。 計測対象ページ「渋谷駅 バイト」で一番上に出てきた、たぶん一番リッチなプランの求人広告ページを対象にしました。 計測方法PageSpeed Insights から、Lighthouse 8.4.0 を使用してラボデータを取得しました。ラボデータは母数1のシミュレートデータで変動も大きく、参考程度の数値にすぎないことを先にお断りしておきます。各指標に関

          yiio

          求人媒体の Lighthouse パフォーマンスを比較する ③ - 求人ページ編

          yiio

          CSS Grid を autoprefixer で IE11 対応させる時の Tips

          autoprefixer@9.8.6 を使ってつまづいた部分をメモっておきます。 1. grid-template-rows を明示的に指定する // NG.container { display: grid; grid-template-columns: 1fr 1fr;}// OK.container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto;} 2.

          yiio

          CSS Grid を autoprefixer で IE11 対応させる時の Tips

          yiio

          CSS Grid と Flexbox の使い分け

          ざっくり言うと Grid は、コンテナベース Flexbox は、アイテムベース Grid は、セルの大きさをコンテナ側で制御する時 Flexbox は、セルの大きさをアイテム側の幅・高さに合わせたい時 具体的には Grid は、以下のようなレイアウトを実現したい時。レスポンシブの対応などで、列や行を超えて表示位置をコントロールしたい場合に便利です。 <div> <div>A</div> <div>B</div> <div>C</div></div> Flexb

          yiio

          CSS Grid と Flexbox の使い分け

          yiio

          求人媒体の Lighthouse パフォーマンスを比較する ② - トップページ編

          Lighthouse を使って、国内の大手バイト求人媒体5つのパフォーマンス計測と考察をしていきます。 計測対象ページ 今回はサイトのトップページを計測します。 - タウンワーク - バイトル - マイナビバイト - Indeed - 求人ボックス 計測方法 PageSpeed Insights から、Lighthouse 8.3.0 を使用してラボデータを取得しました。ラボデータは母数1のシミュレートデータで変動も大きく、参考程度の数値にすぎないことを先にお断りしてお

          yiio

          求人媒体の Lighthouse パフォーマンスを比較する ② - トップページ編

          yiio

          求人媒体のLighthouseパフォーマンスを比較する ① - Lighthouseとは

          Lighthouseは、Webサイトのパフォーマンスやアクセシビリティ、SEO対応状況などをチェックできるツールです。Chrome拡張やDevToolsから簡単に利用することができます。 使い方 ChromeのDevToolsで、Lighthouseタブを開きます。検査したいカテゴリとデバイスを選び、「Generate report」するだけです。 各指標の見方 Lighthouseパフォーマンスでは、以下の6つの指標がチェックされます。 First Conte

          yiio

          求人媒体のLighthouseパフォーマンスを比較する ① - Lighthouseとは

          yiio

          オブジェクト指向UIの画面設計手順

          この記事は社内向けの発表の書き起こしです。 UIデザインと一口にいっても、その意味するところはかなり幅が広いです。「UXデザインの5段階モデル」という考え方では、ユーザーの目に触れる表層部分から根底の戦略部分まで、5つのレイヤーで表現されていたりします。今回お話しする内容は、表層から2~3番目の構造設計の部分です。 UIの使いやすさは構造設計によって大きく左右される色使いやフォント、アニメーションなど、素敵なビジュアルデザインによって語られがちなデザインですが、UIの使い

          yiio

          オブジェクト指向UIの画面設計手順

          yiio

          求人媒体の検索UIパターン

          求人媒体の検索UIについて、調査したことを独断と偏見でまとめました。 ①条件選択型 職種やエリアなどのカテゴリごとの検索条件が提示されます。ユーザはその中からチェックボックスやラジオボタンで選択します。検索条件は細かく分かれていることが多いです。 GOOD ・国内の有名な求人媒体ではこのパターンが採用されていることが多く、ユーザ側に慣れがあります ・キーボード入力を使わずに、クリックだけで操作が完結します BAD ・求人媒体ごとに条件のラベリングや入れ子の内訳構成が違う

          yiio

          求人媒体の検索UIパターン

          yiio

          React x Firebase のCIを Github Actions で組む方法

          前提 - React 16.13 - Firebase 8.6 アプリ自体は Create React App で組みました。 FirebaseのAPIキーはリポジトリにあげるの避けたいので、環境変数（REACT_APP_FIREBASE_API_KEY）にしておきます。その他の設定はenvファイルに出します。 .env.production REACT_APP_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.comREAC

          yiio

          React x Firebase のCIを Github Actions で組む方法

          yiio

          オブジェクト指向UIデザイン ワークアウト9 商品管理アプリケーション

          OOUIを勉強中です。 『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。 ワークアウト9：商品管理アプリケーション ワークアウト6〜9では、ひとつのアプリを段階的にデザインしていきます。4回連続でやってきたこの商品管理アプリもこれで最後、基礎編としても最後のワークなので、ツール使って作りました。 1. オブジェクトの抽出（モデルレイヤー） まずはタスクから名詞を探します。 前回までのタスク ・「ある

          yiio

          オブジェクト指向UIデザイン ワークアウト9 商品管理アプリケーション

          yiio

          オブジェクト指向UIデザイン ワークアウト8 商品管理アプリケーション

          OOUIを勉強中です。 『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。 ワークアウト8：商品管理アプリケーション ワークアウト6〜9では、ひとつのアプリを段階的にデザインしていきます。 1. オブジェクトの抽出（モデルレイヤー） まずはタスクから名詞を探します。 ・前期末の棚卸高、今期の仕入高、今期末の棚卸高を確認する ・2019年の売上原価を計算する う〜ん感。ヒントを見ます。「このワークアウトは

          yiio

          オブジェクト指向UIデザイン ワークアウト8 商品管理アプリケーション

          yiio