ちなみにこんな感じ。<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/5b935afb05944bd0aaf3f8b58ec56034/picture_pc_75ecb22396c654bd9b4dd0dd373ce8c7.gif" alt="" width="383" height="207"></figure>この機能、検索すると英語の作成動画や説明記事などは多く見かけるのですが、日本語版がないな…と感じまして記事を作成してみました。ぜひこの記事で使い方を覚えてもらえると嬉しいです。それでは、作成方法に進みます！1. 追従ヘッダーの作成 2. 追従ヘッダーのスクロール範囲決定 3. アニメーション設定と、とてもシンプルなステップになってます。 今回はデスクトップでの作成ですが、同様の手順でスマホVer.の作成も可能です。<h2 style="text-align: start" id="he8dd2d3fdf">1.追従ヘッダーの作成</h2>好みのデザインでヘッダー(通常)を作ります。 続いて、変更したデザインのヘッダーも作成します。※これが追従ヘッダーになります。 注意点としては、グループでヘッダーを作成ではなく、フレームとしてヘッダーを作成してください。 ヘッダー(通常)を選択し、 右のパネルのConstraintsで「Fix position when scrolling」(スクロールした時に位置を固定する)のチェックマークをオンにしてください。<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/aaa943280c2f40628c1fa498ed0a0f38/figma1.webp" alt="" width="2000" height="1002"></figure><h2 style="text-align: start" id="hdbf8e93e38">2.追従ヘッダーのスクロール範囲決定</h2> ここで制作するのが、追従させたい範囲です。 rectangle(四角ツール(R))で追従を始めたい場所から、終わりたい場所まで四角(塗り、罫線はナシ)を作成するだけです。<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/a8a7a74a671f48918bc650947556e1fe/figma2.webp" alt="" width="2000" height="1000"></figure><h2 style="text-align: start" id="h48c9c6026e">3.アニメーション設定</h2>最後に、前述で作った四角にプロトタイプでアニメーションを設定するだけ。 まず、追従範囲の四角を選択し、続いて画面右側にあるDesign、Prototype, Inspectパネルのうち、Prototypeを選択します。 右側パネルでInteraction設定が可能になります。こちらの調整によりアニメーション設定が可能になります。 選択した四角のトリガーを①で作成したヘッダーにつなげると、右に「Interaction Details」というパネルが出てくるので、下記のように設定。(上から順に)Interaction Details  ・どのような時(ホバーしたり、クリックしたりなどの設定) →While Hovering ※ここでのアクションが、四角内で行われてる時に追従ヘッダーが表示される仕組みです。・何をしたいか(遷移したり、入れ替わったりなどの設定) →Open OverlayOverlay ・どこに表示させたいか(真ん中なのか、右なのかなど) →Top CenterAnimation ・アニメーションの設定 →Instant<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/85df45099026452d9510781a2d392604/figma3.webp" alt="" width="2000" height="999"></figure>これで完了です。<h3 style="text-align: start" id="ha214098e44">まとめ</h3>今回は追従ヘッダーとしてアニメーションの設定を行いましたが、 ヘッダーのみならす、ページ途中などでポップアップを表示したい時など、色々汎用性が高いアニメーション設定で、おすすめです。また、Animationの設定によって見え方も調整可能ですので、お好みの演出ができるかと思います。ぜひお試しください！なお、101では一緒に働ける仲間を絶賛募集しております！ 興味のある方は是非！！！カモン！！！！！

101デザインの佐々木と申します。

前職は広告制作会社でデザイナーをしており、2021年4月に101に入社し、デザイン、ディレクション業務を行なっております。

ウェブデザインを始めた当初はXDを使用してましたが、最近はもっぱらFigmaを使用してデザインをしております。

そんな私が101に入社し覚えた、Figmaの便利なアニメーション機能についてご紹介いたします。

今回はみんな大好き「追従ヘッダー」のご紹介で、トップからずっと追従するタイプではなく「スクロール中に変化する追従ヘッダー」になります。

Figma おすすめアニメーション (2022年7月29日)

<h2 style="text-align: start" id="h8841417298">Webアクセシビリティとは</h2><blockquote>ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを意味します。 さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは必要不可欠な品質と言えます。<a href="https://waic.jp/knowledge/accessibility/（ウェブアクセシビリティ基盤委員会「基礎知識」￼より引用）">（ウェブアクセシビリティ基盤委員会「基礎知識」 より引用）</a>アクセシビリティというのはあなたのウェブサイトを可能な限り多くの人に利用してもらうようにすることです。かつては我々はアクセシビリティのことをハンディキャップを持つ人々のためのものだと考えていましたが、現在はモバイルデバイスや遅いネットワークを利用している人々のためのものでもあると考えられています。<a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/What_is_accessibility#so_what_is_accessibility￼（MDN「アクセシビリティとは？」より引用）"> （MDN「アクセシビリティとは？」より引用）</a></blockquote><h2 style="text-align: start" id="h65d0aa956e">なぜこれまでWebアクセシビリティの向上に取り組むことがなかったのかを、簡単に振り返る</h2>Webアクセシビリティという存在自体は知っていましたが、やっていかないとなーと漠然と思うだけで、プロジェクトに落とし込んだ経験はありませんでした。 それは知見がないという理由はもちろんですが、大きな理由としましては、経営目線的なことでした。<blockquote>「サイトパフォーマンスの向上で、売上が〇〇%上昇します。」</blockquote>上記の指標は、多くの開発者や運用担当者が目にしたことがあるのではないでしょうか。 しかし、<blockquote>「Webアクセシビリティの向上で売上が〇〇%上昇します。」</blockquote>上記はどうでしょうか。なかなか目にしたことは無いのではと思います。 つまり、<ul><li>クライアント側も、利益になるか分からないWebアクセシビリティの向上は要求しない</li><li>開発者側も、クライアントから要求のないものを実装するのは不利益</li></ul>というように、Webアクセシビリティの向上は双方に利益が無いのでは？やる必要あるの？という状況に陥っていたからです。 どうやるのか？ではなくなぜやるのか？で議論が終わってしまっていました。<h2 style="text-align: start" id="hf594063b3d">まずは目標の設定：出来ることから対応し、最低限のレベルAに準拠したい</h2>闇雲にWebアクセシビリティの向上に取り組むぞーではなく、最初に目標を定めました。<a href="https://waic.jp/docs/WCAG21/" target="_blank" rel="noopener noreferrer nofollow">WCAG2.1</a>（Web Content Accessibility Guidelines）には、以下の達成基準が定義されています。<blockquote>レベルA（最低限のレベル。達成できていないと、スクリーンリーダーや拡大鏡などの支援技術を用いても、サービスを利用できない） レベルAA（より良いレベル。達成できれば、支援技術無しでもサービスを利用できることが多くなり、より多くのユーザー・状況で使えるようになる） レベルAAA（より発展的なレベル。達成できれば、よりサービスを利用しやすくなる場合がある。ただし、項目の中には達成が難しいものもあり、サービスによって検討が必要なものもある）</blockquote><a href="https://a11y-guidelines.ameba.design/#適合レベルとは">https://a11y-guidelines.ameba.design/#適合レベルとは</a> より引用）全ての達成基準を網羅するのは困難だと思い、最低限のレベルAから準拠していこうと考えました。<h2 style="text-align: start" id="haab58eaf69">最低限とは言っても、結構大変</h2>例えば、非テキストコンテンツの代替テキスト（&lt;img&gt;タグのalt属性）の対応ですが、Webサイト全体で使用される画像が多いほど、代替テキストを考えなければなりません。<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/86db94eed9dc438996ee29573dbbe905/joyman.webp" alt="" width="800" height="557"></figure>この画像は1年ほど前のモスのネット注文のWebサイトです。（現在は閲覧できなくなっています。） 信じられない数のジョイマン高木の画像がこれでもかと散りばめられており、その全ての画像のaltが「ジョイマン高木」と記述されていました。 思わず笑ってしまいましたが、実装する側の人を思うと涙が出てきます。このようにaltを考えるのも一苦労ですし、 最低限のレベルAだけでも達成基準項目数が30項目あります。 最低限って多いな・・・と正直感じました。頑張ります。<h2 style="text-align: start" id="h2fe4bfb58f">Webアクセシビリティの向上に取り組むにあたっての便利なツール</h2>早速手を動かすよりも、まずは現時点での問題を可視化します。 ですが、人の手で一つ一つ調べ上げながら問題を見つけるのは困難です。そこで、Webアクセシビリティ問題可視化の手助けとなるツールを紹介します。<h3 style="text-align: start" id="h15d57b09b2">axe DevTools</h3>axe DevToolsはブラウザ上でアクセシビリティの問題を検知してくれるChrome拡張機能です。<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/875c303e35344c5aa100a4db0aea90c1/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%92%E3%82%99%E3%83%AA%E3%83%86%E3%82%A306.webp" alt="" width="2000" height="1140"></figure>Critical、Serious、Moderate、Minorの4段階でアクセシビリティの問題を洗い出してくれて、どの箇所が問題なのかをissueでリスト化してくれるので、とても分かりやすいです。 また、Chrome拡張機能ということで、導入しやすいと思います。<h3 style="text-align: start" id="hd0dd3f9682">Lint系</h3>Lintをプロジェクトで用いて、事前にエラーを検知するのも良いと思います。<h3 style="text-align: start" id="h7176ca3241">Accessibility Support</h3>スクリーンリーダーの対応一覧表です。上級者向けかもしれません。<h2 style="text-align: start" id="ha214098e44">まとめ</h2>Webアクセシビリティの向上に取り組む準備として、まずは目標を設定し、ツールを使用してアクセシブルでない問題の可視化を行う方法を紹介しました。準備段階ではありますが、Webアクセシビリティの向上に取り組むことで、誰もが利用できるより良いサービスを生み出したいと思っております。<h2 style="text-align: start" id="hcbec2bf0d9">終わりに</h2>イチマルイチデザイン株式会社では、WebアプリケーションやWebサイトの開発をするフロントエンドエンジニアの仲間を募集しています。 デザイナーやバックエンドエンジニアの方も募集をしておりますので、興味がある方はご連絡お待ちしております。

こんにちは。イチマルイチデザインでフロントエンドエンジニアを担当している長谷川です。

ここ最近、企業からのWebアクセシビリティの向上や改善といった言葉をよく目にするようになりました。
様々な活動事例を見て、誰もが利用できるWebサイトやWebサービスを作ることの大切さを感じ、これを機にWebアクセシビリティの向上に真剣に取り組んでみようと考えました。

ただ最初から、セマンティックなマークアップやWAI-ARIAなどのテクニカルなことには取り組んでおりません。
今回は、取り組むまでの経緯、目標設定、役立つツールの整理に留めております。

Webアクセシビリティの向上に取り組むための準備 (2022年7月1日)

<h2 style="text-align: start" id="hd511607e06">使用するライブラリ</h2><h2 style="text-align: start" id="h47e54ab280">Recoil とは</h2>Facebook 製（現 Meta 社）の React 用の状態管理ライブラリです。<h2 style="text-align: start" id="h12633f74eb">実装内容</h2>まずはこちらが全体のコードです。<pre><code>import { atom } from &quot;recoil&quot;;
const LOCAL_STORAGE_KEY = &quot;LOCAL_STORAGE_KEY&quot;;
const getToLocalStorage = () =&gt; {
 if (typeof window === &quot;undefined&quot;) {
 return &quot;&quot;;
 }
 const value = window.localStorage
　　　　.getItem(LOCAL_STORAGE_KEY);
 return value ? JSON.parse(value) : &quot;&quot;;
};
const saveToLocalStorage = (value: string) =&gt; {
 if (typeof window === &quot;undefined&quot;) {
 return;
 }
 window.localStorage
 .setItem(LOCAL_STORAGE_KEY, JSON.stringify(value));
};
export const recoilWithLocalStorage = atom&lt;string&gt;({
 key: &quot;recoilWithLocalStorage&quot;,
 default: getToLocalStorage(),
 effects_UNSTABLE: [
 ({ onSet }) =&gt; {
 onSet((newValue) =&gt; {
 saveToLocalStorage(newValue);
 });
 },
 ],
});</code></pre>以下、解説となります。<pre><code>if (typeof window === &quot;undefined&quot;) {
 return &quot;&quot;;
}</code></pre>window オブジェクトの未定義エラー回避のため、関数式 <code>getToLocalStorage</code> と関数式 <code>saveToLocalStorage</code> 内で <code>typeof window === &apos;undefined&apos;</code>を条件としてif文を定義しています。<pre><code>const getToLocalStorage = () =&gt; {
 if (typeof window === &quot;undefined&quot;) {
 return &quot;&quot;;
 }
 const value = window.localStorage
　.getItem(LOCAL_STORAGE_KEY);
 return value ? JSON.parse(value) : &quot;&quot;;
};</code></pre>Local Storage から値を取得するための関数式です。 Local Storage に値がない場合、空の文字列を返します。 （※今回は値の型は <code>String</code> とします。）<pre><code>const saveToLocalStorage = (value: string) =&gt; {
 if (typeof window === &quot;undefined&quot;) {
 return;
 }
 window.localStorage
 .setItem(LOCAL_STORAGE_KEY, JSON.stringify(value));
};</code></pre>引数として渡された値を Local Storage にセットする関数式です。<pre><code class="language-javascript">export const recoilWithLocalStorage = atom&lt;string&gt;({
 key: &quot;recoilWithLocalStorage&quot;,
 default: getToLocalStorage(),
 effects_UNSTABLE: [
 ({ onSet }) =&gt; {
 onSet((newValue) =&gt; {
 saveToLocalStorage(newValue);
 });
 },
 ],
});</code></pre>Recoil の <code>atom</code> を定義します。 デフォルトの値として、`getToLocalStorage` から取得した値を <code>default</code>として設定します。 `effects_UNSTABLE` に新しい値がセットされたタイミングで <code>saveToLocalStorage</code> に新しい値を渡す処理を設定することで、Recoil のデータストア側の値と Local Storage の値を同時に更新して、実質的にデータを共有しているような実装が可能となります。<h2 style="text-align: start" id="h4d849f4362">使い方</h2><pre><code class="language-typescript">import React from &quot;react&quot;;
import { useRecoilState } from &quot;recoil&quot;;
export const MyComponent = () =&gt; {
 const [value, setValue] = useRecoilState(recoilWithLocalStorage);
};</code></pre><code>useRecoilState</code> や <code>useRecoilValue</code> などの Recoil が提供しているカスタムフックの引数に定義したストアを渡すことで、`RecoilRoot`内であればどこのコンポーネントからでもステートの呼び出しやセットが可能となります。<h2 style="text-align: start" id="hcbec2bf0d9">終わりに</h2>株式会社イチマルイチデザインでは、私たちと一緒に React・Next.js、TypeScript などの技術を使った WEB アプリケーションや WEB サイトの開発をするフロントエンドエンジニアの仲間を募集しています。デザイナーやバックエンドエンジニアの方も募集をしておりますので、興味がある方はご連絡お待ちしております。

こんにちは。
イチマルイチデザインのフロントエンドエンジニアの高橋です。

今回は、Recoil と Local Storage のデータを共有させる方法を共有します。
言語は TypeScript です。

Figma おすすめアニメーション (2022年7月29日)

1.追従ヘッダーの作成

2.追従ヘッダーのスクロール範囲決定

3.アニメーション設定

まとめ

関連記事

Chakra UIとReact Hook FormとYupを使ってフォームを作成する (2022年5月9日)