101 DESIGN

真のUIUXデザインを追求するウェブアプリケーション開発会社です👩‍💻モダン技術活用に特化…

101 DESIGN

真のUIUXデザインを追求するウェブアプリケーション開発会社です👩‍💻モダン技術活用に特化しています。 noteではテックブログや働き方、マーケティングにまつわる情報をお届けしていきます💭 絶賛採用強化中です！https://101de-sign.com/recruit

  • エンジニアによるテックブログ

  • 「Shopify」運用／構築／開発

    Shopifyに関する記事をまとめています。

  • イチマルイチデザインの働き方

  • マーケティングにまつわること

自社コーポレートサイトのアクセシビリティ向上に取り組み始めた話

こんにちは。イチマルイチデザイン株式会社でフロントエンドエンジニアをしている長谷川です。 この度、自社コーポレートサイト（https://101de-sign.com/）のアクセシビリティ向上の取り組みを始めました。 今回の記事では、アクセシビリティ向上に取り組み始めた経緯や取り組み内容を、備忘録として書いています。 アクセシビリティ周りのちょっとした解説も交えていますが、がっつり解説はしていません。後述していますが、アクセシビリティ向上を実際のプロダクトで行うのは初め

101 DESIGN

    • Recoil と Local Storage のデータを共有させる方法

      こんにちは。 イチマルイチデザインのフロントエンドエンジニアの高橋です。 今回は、Recoil と Local Storage のデータを共有させる方法を共有します。 言語は TypeScript です。 使用するライブラリRecoil とはFacebook 製（現 Meta 社）の React 用の状態管理ライブラリです。 実装内容まずはこちらが全体のコードです。 import { atom } from "recoil";const LOCAL_STORAGE_K

      101 DESIGN

      • Figma おすすめアニメーション

        101デザインの佐々木と申します。 前職は広告制作会社でデザイナーをしており、2021年4月に101に入社し、デザイン、ディレクション業務を行なっております。 ウェブデザインを始めた当初はXDを使用してましたが、最近はもっぱらFigmaを使用してデザインをしております。 そんな私が101に入社し覚えた、Figmaの便利なアニメーション機能についてご紹介いたします。 今回はみんな大好き「追従ヘッダー」のご紹介で、トップからずっと追従するタイプではなく「スクロール中に変化

        101 DESIGN

        • Webアクセシビリティの向上に取り組むための準備

          こんにちは。イチマルイチデザインでフロントエンドエンジニアを担当している長谷川です。 ここ最近、企業からのWebアクセシビリティの向上や改善といった言葉をよく目にするようになりました。 様々な活動事例を見て、誰もが利用できるWebサイトやWebサービスを作ることの大切さを感じ、これを機にWebアクセシビリティの向上に真剣に取り組んでみようと考えました。 ただ最初から、セマンティックなマークアップやWAI-ARIAなどのテクニカルなことには取り組んでおりません。 今回は、

          101 DESIGN

        自社コーポレートサイトのアクセシビリティ向上に取り組み始めた話

        101 DESIGN

        マガジン

        • エンジニアによるテックブログ
          6本
        • 「Shopify」運用／構築／開発
          1本
        • イチマルイチデザインの働き方
          1本
        • マーケティングにまつわること
          1本

        記事

          【Shopify】クール便など複雑な送料割引を実装する場合の対応方法

          こんにちは。 イチマルイチデザイン株式会社の和田です。 私は主に、ECサイト構築ASPカートシステム「Shopify（ショッピファイ）」の構築・運用を担当しております。 このShopifyですが、2020年頃より本格的に日本国内でも導入件数が増えてきました。 豊富なデザインテンプレートや多様なアプリケーションによるカスタマイズ性の高さなど、比較的容易に本格的なECサイトを構築することが可能となります。 ですが、カナダ発のシステムということもあり、日本の商習慣に合わない部

          101 DESIGN

          【Shopify】クール便など複雑な送料割引を実装する場合の対応方法

          101 DESIGN

          オランダでのメディア利用の実情と変化

          こんにちは。イチマルイチデザインでマーケティングを担当している松田です。 ここ数年、新型コロナウイルス感染症拡大という未曾有の事態に伴い、企業でのリモートワーク化が進みました。業種業界にはよりますが、どこでも働くことができる時代に突入していることを実感したという方も少なくないのではないしょうか。 世界が徐々に落ち着きを取り戻しつつある2021年12月、私はオランダでの生活を始めました。今回は、オランダ（ヨーロッパ）のメディア利用の実情と変化をご紹介したいと思います。 世界幸

          101 DESIGN

          オランダでのメディア利用の実情と変化

          101 DESIGN

          産後明けの働き方

          内閣府のデータでは年齢別の労働力のグラフでは子育て期に当たる30代で労働力が低下していて出産を契機に7割の人が退職しているというデータがあります。 これらの統計は様々な理由があると思いますし、私自身、出産後から本格的にイチマルイチデザインに就職したので事情が少しだけ異なりますが、私が考える、仕事もしたいし、育児もしたい！を目指した体験談を記します。 働く場所 イチマルイチデザイン株式会社は福岡と山口にオフィスがありますが、私は大分県の自宅でリモートで業務を行なっています

          101 DESIGN

          産後明けの働き方

          101 DESIGN

          Mac に Yarn をインストールする

          イチマルイチデザインでフロントエンドを担当している河口です。 今回は Yarn を Mac にインストールする手順を紹介します。 Yarn は js のパッケージを管理できるパッケージマネージャーです。 Node.js をインストールした際に、自動でインストールされる npm と役割は同様になります。 Command Line Tools for Xcode をインストールまずは、動作環境を整えます。 コンパイラが必要になるので、Command Line Toods fo

          101 DESIGN

          Mac に Yarn をインストールする

          101 DESIGN

          Chakra UIとReact Hook FormとYupを使ってフォームを作成する

          こんにちは。イチマルイチデザインのフロントエンドエンジニアの高橋です。 今回は、Chakra UIとReact Hook FormとYupを使用して、ユーザビリティ高めのフォームを比較的簡単に作成する方法を共有します。 使用するライブラリ実装方法こちらが実際のコードの全体像となります。 import { Button, Container, FormControl, FormErrorMessage, FormLabel, Input, Textarea, VStack

          101 DESIGN

          Chakra UIとReact Hook FormとYupを使ってフォームを作成する

          101 DESIGN

          Body scroll lockを使用して要素のスクロール固定を制御するカスタムフックを作成する

          こんにちは。 イチマルイチデザインのフロントエンドエンジニアの高橋です。 今回は、Body scroll lockを使用したカスタムフックを作成して、ドロワーメニューやモーダルの展開時に、背面の要素を固定する処理を簡単かつシンプルに実装する方法を共有します。 実装方法と解説 こちらが実際のコードの全体像となります。 // useBodyScrollLock.tsimport { RefObject, useEffect } from "react";import { c

          101 DESIGN

          Body scroll lockを使用して要素のスクロール固定を制御するカスタムフックを作成する

          101 DESIGN