Yuji Mine

目黒区のUXデザイン会社でフロントエンドエンジニアをしています。座右の銘は “クリエイ…

Yuji Mine

目黒区のUXデザイン会社でフロントエンドエンジニアをしています。座右の銘は “クリエイティブであろう。”です。

  • Design Container丨デザインコンテナ

    • 261本

    UXデザインカンパニー 株式会社アジケの公式マガジンです。コンテナのようにデザインにまつわることや会社のことをUI/UXデザイナーやエンジニアがストックしていきます。 コンテナをのぞいたみなさんにデザインや体験の種を持ち帰ってもらえる場所を目指します。

  • 仕組みのデザイン Lab

    • 34本

    世の中の「仕組みのデザイン」を考えるLab。 「仕組みのデザイン」とは、課題解決や価値創造が、局所的ではなく持続的に循環していくサイクルそのものをつくることと考えます。 アジケが収集する身近な仕組みのデザインや、みなさんのnoteの中から「よりよい仕組みのデザイン」をピックアップさせていただきます。 運営：株式会社アジケ(https://ajike.co.jp/)

あなたがデザインしたWebページをエンジニアの私はこう解釈して作っています。

こんにちはフロントエンドエンジニアの峯です。 よくデザイナーの方に、「Webページってどんな感じで作っているの？」と質問をされることがあります。 そこで今回、とあるWebページを例に、どのように考えながらスタイル設計を行い、マークアップしているのかを紹介します。非エンジニアの方にとって参考になればと思います。 今回作成するデザインのワイヤーフレーム 全体像の把握まず最初に取り組むべきは、全体像を把握することです。全体像を把握することにより、モバイル向けデザインとデスク

Yuji Mine

    • 『やっぱりクリエイター』-2022年の振り返りと2023年に向けて

      2023年迎えました。皆さん今年もよろしくお願いします。 さて、昨年の振り返りと今年のテーマ設定をしようと思います。 2022年の振り返り昨年の1番のライフイベントは引っ越しでした。引っ越ししてからは、何かと忙しくしていたようで、時間があっという間に過ぎたように感じています。 2022年の前半はよくコードを書きました。Next.jsとGatsby.jsどちら使い機会があり、どちらかというとGatsbyの方をよく書きました。多分これから技術選定するなら問答無用でNext.

      Yuji Mine

      • Figmaのプラグインを使って、ノーコードでHTMLメールを生成する

        こんにちはフロントエンドエンジニアの峯です。 HTMLメール用の作成をHTMLコードベースで作成する場合、想像以上に課題が多くあります。通常のWeb上で利用するマークアップ手法では、デザイン崩れなどが発生してしまいます。 また、デザイナーがデザインしたものをエンジニアマークアップするため、もちろんその分の工数が発生します。 主な課題Tableレイアウトを使ったレイアウトが基本 通常のWebページ開発で利用するような<header>や<footer>、<div>などを利

        Yuji Mine

        • デザインデータに最低限含めておいてほしい3つのこと

          こんにちはフロントエンドエンジニアの峯です。 デザインシステムやUIガイドラインを作成する場合は、デザイナーと共同してコンポーネントを整理し、しっかりとルールを定義することができます。 しかし、プロジェクトによってはデザインシステムやUIガイドラインを必要としないケースも存在します。基本的にコードは運用されることを前提としているため、そのようなデザインシステムを作成しない場合でも、運用性・変更可用性を考慮して開発する必要があります。 今回は、このようなプロジェクトでも、

          Yuji Mine

        あなたがデザインしたWebページをエンジニアの私はこう解釈して作っています。

        Yuji Mine

        • 『やっぱりクリエイター』-2022年の振り返りと2023年に向けて

          Yuji Mine

        • Figmaのプラグインを使って、ノーコードでHTMLメールを生成する

          Yuji Mine

        • デザインデータに最低限含めておいてほしい3つのこと

          Yuji Mine

        マガジン

        • Design Container丨デザインコンテナ
          261本
        • 仕組みのデザイン Lab
          34本

        記事

          UXエンジニアとしてUXを最大化させるために行っている4つのこと

          こんにちはアジケでフロントエンドエンジニアをしているの峯です。 今回は、デザイン会社のエンジニアとして、サービスのUXを最大化させるためにエンジニアとして行っている4つを紹介します。以下のような悩みを抱えている方の参考になれば幸いです。 組織にフロントエンドメンバーがいない（少ない） UXをサービスのUIに落とし込めていない 事業背景・UXのキャッチアップと理解アジケはUXデザイン会社として事業の上流から参画することが多いです。新規事業であれば、事前調査、既存サービス

          Yuji Mine

          UXエンジニアとしてUXを最大化させるために行っている4つのこと

          Yuji Mine

          Storybookで行うデザインチェック3つのメリット

          こんにちは、フロントエンドエンジニアの峯です。 今回は、Storybookでデザインチェックを行うことで得られる3つのメリットを紹介します。 アジケでは、いくつかのプロジェクトでStorybookの導入を行なっています。 導入する目的は大きく2つあります。 動的なUIコンポーネントドキュメントとして活用することができる アクセシビリティチェックやUIテストを効率的に行うことができる この記事では、UIテストや、デザインチェック時にStorybookを利用した際のメリッ

          Yuji Mine

          Storybookで行うデザインチェック3つのメリット

          Yuji Mine

          上司と部下のコミュニケーション解像度を上げる７段階の権限委譲のレベル

          こんにちは峯です。 今回は、普段の業務の中で、「部下の成果物が意図したものになっていない」という上司の悩みや、「成果物に対する上司からのフィードバックでやっと認識齟齬に気がつく」という部下の悩みを解消するコミュニケーションの方法を紹介します。 ソース元は、エンジニアリング組織論への招待という書籍で紹介されている、権限委譲のレベルについてです。さらに詳しく知りたい方は、是非書籍をお読みください。 自分の役割、行うべき範囲を本書で紹介されている権限委譲のレベルに当てはめて、上

          Yuji Mine

          上司と部下のコミュニケーション解像度を上げる７段階の権限委譲のレベル

          Yuji Mine

          『影響を与えられる存在へ』-2021年の振り返りと2022年に向けて

          2021年の仕事を納めました。ボケッとしているとあっという間に何の準備もできずに2022年を迎えてしまいそうです。（毎年いつもそんな気がしている。涙） 節目にしっかり時間を作って自分と向き合うことは重要だと思いますので、今年も振り返りと、来年に向けての思いを残しておきます。 2021年の振り返り2021年に向けて去年はこんな記事を書いていました。 軽く読み返してみて、やっぱり文章として当時の思いを残すことは、すごくいいことだなと思います。 2021年は「クリエイターと

          Yuji Mine

          『影響を与えられる存在へ』-2021年の振り返りと2022年に向けて

          Yuji Mine

          マークアップタグから考える、デザインシステムに含めておきたい基礎コンポーネント

          こんにちは、フロントエンドエンジニアの峯です。 昨今の、デザインのシステム化によって、デザイナーとエンジニアの共通言語が生まれ、UIの一貫性、運用スピードの向上、品質を維持した設計・開発が可能となり、私もデザインシステムについて非常に興味を持っています。 しかし、デザインシステムは単純にページに用いられるコンポーネントの棚卸しを行っただけでは、活用できる状態にはなりません。 今回この記事では、エンジニア目線でデザインシステムに必要な基礎コンポーネントについて紹介していき

          Yuji Mine

          マークアップタグから考える、デザインシステムに含めておきたい基礎コンポーネント

          Yuji Mine

          社内に伝えるために、ブログを活用してみてはいかがでしょうか。

          コロナ禍をきっかけに、リモートワークが日常の中に取り込まれ、出社と在宅、あるいはフルリモートなど働き方が変わった企業も多いのではないでしょうか。 リモートワークは、移動時間の削減、個の集中できる空間など、強みがある反面、もちろん課題もあります。 今回この記事では、リモートワーク導入で見えてきた課題にアプローチする手段として、みなさんの参考になれば幸いです。 リモートワークで見えてきた課題リモートワークの課題のひとつに、コミュニケーション不足が挙げられます。 以下は、2

          Yuji Mine

          社内に伝えるために、ブログを活用してみてはいかがでしょうか。

          Yuji Mine

          待ち時間を移動に変換してストレスを軽減させた空港のUX改善

          こんにちは。今回は米国のヒューストン航空の取り組みとして話題となったUX改善事例です。 当時ヒューストン航空では、手荷物受取所で荷物が出てくるまでの時間が長いという苦情が多く寄せられていました。 この苦情に対して、待機時間を短縮する対応を行いましたが、苦情を減らすことはできませんでした。（平均待機時間は8分に短縮された） さらなる対策のため、乗客が到着ゲートから荷物を受け取るまでの行動分析を徹底的に行いました。 すると、以下の乗客の状況が明らかになりました。 乗客の状

          Yuji Mine

          待ち時間を移動に変換してストレスを軽減させた空港のUX改善

          Yuji Mine

          Scrapbox利用で体感したネットワーク型情報整理のメリット

          こんにちは峯です。 今年に入ってから社内の知見共有ツールとしてScrapboxが試験的に導入されました。 Scrapboxが導入に至った理由は、これまで使っていた階層型ツールに集まった情報を活用できていないという課題があったためです。 今回この記事では、チームで利用する知見共有ツールとして、階層型ツールからネットワーク型ツールへ移行して感じた事を書いていきたいと思います。 階層型ツール 階層型とは、情報を上から下に見ていき、親子関係を持って整理される特徴があります。（ツ

          Yuji Mine

          Scrapbox利用で体感したネットワーク型情報整理のメリット

          Yuji Mine

          デザイナーのための！コンポーネントデザインに必要なエンジニアリングの仕組み

          こんにちはフロントエンドエンジニアの峯です。 デザイナーの皆さん、アプリのUIやWebサービスのデザインを行う際、どのようなことを意識してデザインされていますでしょうか？ 以前までの、Webページをデザインするという考え方から、昨今ではデザインされたコンポーネントの組み合わせによってページを構成するという考え方に変化してきました。 この考え方の変化によって、ユーザーの操作に対してしっかり状態を示すことが可能になりました。 ユーザーに対してしっかり状態を示すためには、コン

          Yuji Mine

          デザイナーのための！コンポーネントデザインに必要なエンジニアリングの仕組み

          Yuji Mine

          『ひとりのクリエイターとして』-2020年の振り返りと2021年に向けて

          2020年も間もなく終了。 来年は何をテーマにしようか。そろそろちゃんと考え2021を迎えたいなと思うので、今年の振り返りと来年に向けて。 フロントエンドエンジニアをやっています、峯です。 来年のテーマに入る前に、まずは今年の振り返りからやっていこうと思います。今年は総合的に昨年に比べて平穏であったなと思います。 世の中的には平穏とは決して言えませんがね。 2020年の振り返りライフスタイルが変わる時は想像以上にあっという間で、昨年には全く想像しないでいた未来を迎える

          Yuji Mine

          『ひとりのクリエイターとして』-2020年の振り返りと2021年に向けて

          Yuji Mine

          満たしておくべきWebアクセシビリティを向上させる5つの手法

          こんにちはフロントエンドエンジニアの峯です。 今回はアクセシビリティを向上させる５つの手法について紹介します。 みなさんアクセシビリティについて、どのくらい意識して普段のプロダクト開発に携わっていますか？ ここで紹介する５つは、あなたのサイトがより多くの方にとって有意義なサイトにするための基本的かつ、不可欠な要素です。 アクセシビリティについてまず、アクセシビリティとは「利用しやすさ」を表します。主にWebサイトなどでは、「情報へのアクセスしやすさ」などを意味します。

          Yuji Mine

          満たしておくべきWebアクセシビリティを向上させる5つの手法

          Yuji Mine

          UXデザイン会社のフロントエンドエンジニアのお仕事

          まえがきこんにちは、ajikeでフロントエンドエンジニアをしている峯です。 この記事では、業務アプリ開発、Webサイト作成などを経て、 現在フロントエンドエンジニア２年生の私が行っている仕事を少しタスクベースに深ぼって紹介します。 これからWeb業界を目指す人や、同業で他企業のフロントエンドエンジニアのワークフローに興味がある方に読んで頂けると嬉しいです。 主な役割・スキルWebサービスの開発において、フロントエンドエンジニアの役割は ユーザーが実際に操作する画面UI（

          Yuji Mine

          UXデザイン会社のフロントエンドエンジニアのお仕事

          Yuji Mine