mathme

渋谷の会社でテクニカルディレクターをやってるフィギュアスケートオタ。

mathme

渋谷の会社でテクニカルディレクターをやってるフィギュアスケートオタ。

無料の Microsoft Clarity でサイトのヒートマップツールを見て3日でUIを改善した話

ヒートマップツールをお試しで入れてみたら、UIの問題がすぐ見つかって改善できたので、やっぱりヒートマップツールは入れておくといいねっていう話です。 Microsoft Clarity とはMicrosoftが無料で提供しているサイトのユーザー行動分析ツールです。 セッションやトラフィックに制限がないのに無料で使えるうえ、導入もタグを貼り付けるかGTMに連携するだけ。慣れている人ならアカウントを作ってから計測開始するまで30分もかからないという驚きの手軽さ。 慣れていなくて

mathme

    • ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その５・コンテンツ登録・運用編）

      この記事は「ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その４・コーディング・CMS実装編）」の続きです 最後は、コンテンツの制作・登録時やサイトローンチ後の運用時にも注意が必要な項目です。 このページの項目は、さまざまなユーザーに対して、コンテンツの理解を妨げない・全ての情報を差異なく提供するために必要なものです。 制作プロジェクト中だけの一過性のものではなく、サイトを運営する間は継続的に意識し続ける必要があります。 画像には必ず代

      mathme

      • ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その４・コーディング・CMS実装編）

        この記事は「ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その３・デザイン編）」の続きです コーディングになると、表示の制御だけでなくマークアップでの補助も行うことになります。それだけに、チェックリストの中でも一番項目数が多くなっています。 また、CMS実装の場合は多くの処理をテンプレートに組み込むことになります。ユーザーの入力に任せるのかテンプレート側で処理をするのかの判断が必要なものがあるだけでなく、テンプレートで実装に漏れやミスがあ

        mathme

        • ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その３・デザイン編）

          この記事は「ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その２・情報設計編）」の続きです。 デザインは視覚表現が大きな割合を占めるため、アクセシビリティのチェックポイントが多くなります。 特にフォーム機能があるウェブサイトの場合は確認しなければならない達成基準が増えるので注意が必要です。 また、アニメーションや視覚に依存しない動的な演出についてもここにまとめています。 サイト内で同じ機能を有するUIはサイト内で同じレイアウト・デザイン

          mathme

        無料の Microsoft Clarity でサイトのヒートマップツールを見て3日でUIを改善した話

        mathme

        • ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その５・コンテンツ登録・運用編）

          mathme

        • ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その４・コーディング・CMS実装編）

          mathme

        • ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その３・デザイン編）

          mathme

          ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その２・情報設計編）

          この記事は「ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その１）」の続きです。 ウェブサイトの情報設計は、大きく分けて「サイト全体での設計」と「ページ単位での設計」の２つがあるかと思いますが、ここでは後者の「ページ単位での情報設計」を対象にしています。 私の会社では主にワイヤーフレーム制作のフェーズがここに該当します。 サイト全体で共通する構造・パーツに関するチェックが基本であまり項目数は多くありませんが、一部デザイン時に影響を与える要

          mathme

          ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その２・情報設計編）

          mathme

          ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その１）

          WCAG2.2の勧告予定が来月に迫っているタイミングですが、前々から気になっていた「ウェブサイト制作フロー内でのアクセシビリティチェックポイント」を自分用にまとめました。 もともと、ウェブサイトのアクセシビリティに関してはWAIC（ウェブアクセシビリティ基盤委員会）のサイトで各種のガイドラインやWCAG2.0の関連文書の翻訳などがあり、会社でもこれらを元にした独自のチェックリストも使用していました。 ただ、これはあくまでも「達成基準の内容をあらかじめ知っているディレクター

          mathme

          ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その１）

          mathme

          大学サイトをWordPress（とブロックエディタ）でリニューアルした時に気を付けること

          少し前に、「WordPressサイト制作でカスタムフィールド地獄から抜け出してラクをしたい」にWordPressのブロックエディタ制作で気を付けるポイントを書きました。 その後、大学サイトのリニューアルをWordPressのブロックエディタメインで数件おこなったのですが、大学サイトは一般のサイト制作に加えて独自の注意ポイントがあるな〜と思ったので備忘録としてまとめました。 アクセス負荷に対する検討ができているかまず「WordPressを導入できるかどうか」に関わる大前提の話

          mathme

          大学サイトをWordPress（とブロックエディタ）でリニューアルした時に気を付けること

          mathme

          サイトリニューアルの時にたまに便利なツールを作った話

          個人的にサイトリニューアル案件で「毎回使うわけではないけどたまに『あれできたら早いのに』って時に便利なツール」を作ってGitHubに公開しました。 （とはいってもひな型は同僚が作ってあって、私はそれを自分の要求に合わせてカスタムしただけ…） どちらも大量のURLを一括で処理するツールで、用途もニッチなので年に2〜3回使うかどうか…って感じではあるのですが、必要になる時は膨大な物量が相手なのであるとめちゃくちゃ助かる系です。特に時間。 ページの特定の要素内のHTMLを一括で

          mathme

          サイトリニューアルの時にたまに便利なツールを作った話

          mathme

          Googleのカスタム検索をもうちょっとだけ便利にするためにやっていること3種

          Googleのサイト内検索機能「プログラム可能な検索エンジン」は、Googleが無償で提供している（もちろん有償プランもある）検索エンジンサービスです。アカウントさえ作れば、Googleの検索エンジンを利用したサイト内検索を手軽に実現できる、ウェブ制作者にはお馴染みのサービスです。 無償の標準検索では検索結果にかなり目立つ形で検索連動型広告が表示されるため企業サイトでの採用は厳しいものの、政府機関や自治体、教育機関を含む非営利団体は申請すれば広告のないバージョンを利用できる

          mathme

          Googleのカスタム検索をもうちょっとだけ便利にするためにやっていること3種

          mathme

          WordPressサイト制作でカスタムフィールド地獄から抜け出してラクをしたい

          渋谷のとある会社で「テクニカルディレクター」という役職で働いています。今所属しているこの会社では幅広い（空間とかイベントとかコミュニティとかなんかもう所属してる人間でもジャンルが違うとわからないくらいの）プロジェクトを抱えていますが、その中にはウェブサイト制作案件もあり、私はそこで技術的サポートや開発担当者とのコミュニケーションをメインにしています。 序盤はインフラ周りの情報やサーバについて調査・ヒアリングした上でクライアントと調整したり、CMSや関連サービスの選定に技術的な

          mathme

          WordPressサイト制作でカスタムフィールド地獄から抜け出してラクをしたい

          mathme