アクセシビリティの依頼・発注・代行

こんな方へオススメ

• デザインまでは対応できるが、フルスクラッチ（HTML / CSS / JavaScript）でページを組むコーダーが足りない。
• Webアクセシビリティ(WCAG AA)へできるだけ対応してほしいと言われたが、それに対応できるコーダーが足りない。
• HTML / CSS / JavaScriptのコードを直に修正する必要があるが、それに対応できるコーダーが足りない。

Webアクセシビリティへの対応についての注意点

基本的にセクショニングなどコーダーで調整可能な個所のみ、対応させていただきます。例えば色味によりコントラスト比が足りない場合はデザイナーとの調整が必要になるかと思いますので、対応できかねます。
ページの制作後にアクセシビリティへの適合検査会社に検査依頼を出す場合、審査する人の判断により不適合となる場合がございます。ご了承ください。
例えば、注意文でよく見かける「※」はテキストか、それとも装飾文字として意味のないものとして扱うかの判断が、検査した年度によって異なったという事例が所属していたチームでありました。

制作可能なジャンル

• デザインに基づくフルスクラッチコーディング
• 既存サイトのHTML/CSS/JavaScript修正

依頼～制作完了の流れについて

※デザインの内容や量によって追加費用をご請求させていただく場合がございます。
※まだ会社に所属していない状態での業務に慣れておりませんので、パッケージに記載の納期はやや余裕を持たせています。ご了承ください。
※依頼者様側で特に用意が無い場合は、テストサーバーは私の方で準備いたします。ただし、サーバー側での処理を考慮できない可能性がありますので、できるだけ依頼者様側で用意いただくようお願いします。
※依頼者様側で特に用意が無い場合は、バージョン管理はGitでリモートに接続せずに管理します。その情報（.gitディレクトリ）も納品時にファイル一式としてお送りします。
※ 依頼者様側で特に用意が無い場合は、環境構築が不要な形でコーディングを行います。

■ページ制作の場合

1. 「まずは相談する（無料）」よりお問い合わせください。
2. 要件・予算などに問題が無ければ以下の共有をお願いします。

• デザイン(PSD、XD、Figmaデザイン)
• metaタグの設定などの補足する資料（箇条書き可）、またはそれらが推測できるベースとなるページのURL
• FTPの接続情報（依頼者様でご用意する場合）
• Gitリポジトリへの接続情報（依頼者様でご用意する場合）
• package.jsonなど、環境構築セット（依頼者様でご用意する場合）

3. コーディングしたページをご確認いただき、必要に応じて修正いたします。
4. FIXしましたら、ファイルリストとファイル一式を納品させていただきます。

■既存ページ修正の場合

1. 「まずは相談する（無料）」よりお問い合わせください。
2. 要件・予算などに問題が無ければ以下の共有をお願いします。

• 修正するページのURL
• 修正時に触っても問題ないファイルのURL（依頼者様でわかる範囲で問題ありません）
• FTPの接続情報（依頼者様でご用意する場合）
• Gitリポジトリへの接続情報（依頼者様でご用意する場合）
• package.jsonなど、環境構築セット（必要な場合）

3. コーディングしたページをご確認いただき、必要に応じて修正いたします。
4. FIXしましたら、ファイルリストとファイル一式を納品させていただきます。

戻し対応について

基本的に戻し修正の回数には制限を設けておりません。
ただし、修正の依頼内容を吟味し、品質を維持できないと判断した場合、修正内容に対して代案を用意したり、お断りしたりする場合がございます。ご了承ください。

Webサイトの制作を承ります。

ページ数やコンテンツの内容により、プランが変わりますので、まずはお気軽にお問い合わせをお願いいたします！

まずは流れを掴むために、料金はできるだけ押さえた受注も検討しています。

副業としての実績がまだないため、こちらがまずここでお伝えできる強みとしては以下になると思います!

• React での開発経験がそれなりに長い人がいい(3年程度)
• 女性エンジニアにお願いしたい
• コミュニケーションが活発に取れる人がいい
• 責任感がある人がいい
• できるだけ安価にお願いしたい
• アジャイル開発に理解がある人がいい
• アクセシビリティに配慮したコードがかける人がいい

一度、実際に meet や ZOOM で会議させていただいた後、依頼するか決めていただいても大丈夫です。
よろしくお願いいたします。

せっかくコーディングを外注するならアクセシブルにしませんか？

デザインカンプをご提供いただいた上で、HTML、CSS、JavaScriptを使用してアクセシビリティに配慮してコーディングいたします。

ウェブサイトのアクセシビリティを確保すると日本国内だけでで400万人以上が恩恵を受けるとされています。
それは障がいのある方々の為のものと考えがちですが、その恩恵は健常者も及ぶことをご存知でしょうか？

日々の健康状況や利用環境によっては、それまでの利用方法では快適に使えないというケースもあります。
(怪我をした場合や、騒音が激しい環境での利用など)

ウェブサイトをアクセシブルにすることでそのような場合でも利用し易くすることができます。

ウェブサイトをアクセシブルにする事はユーザビリティを向上させることでもあります。

ウェブアクセシビリティの規格である JIS X 8341-3:2016にどのように対応しているかを表記するための方法として、情報通信アクセス協議会・ウェブアクセシビリティ基盤委員会が定めた「ウェブコンテンツの JIS X 8341-3:2016 対応度表記ガイドライン」がありますが、規格への適合度合いを表記する為にはウェブアクセシビリティ方針の策定と公表が必要であること、適合度合いによっては試験の実施とその結果の公表など工数とコストの問題も避けられません。

尚且つ必要最低限達成するべきとされている適合レベルAにおいても、プロジェクト開始段階からウェブアクセシビリティを考慮していなければ、デザイン等の修正が必要なケースは多くなります。

そこで、「まずは現状のデザイン、もしくは必要最低限のデザイン変更で可能な限りアクセシブルにしておきませんか？」というのが私からのご提案です。

私にコーディングをお任せいただければ、元のデザインで可能な限りサイトをアクセシブルにします。

特に次の3つの項目の施策を提供させていただきます。

1.キーボードのみでの操作に対応いたします。モーダル表示時や、ページ内リンク移動時のフォーカス調整もいたします。(障がいや怪我などによりマウス操作が困難、かつキーボードや代替キーボードは使用可能な方々の利用に役立ちます)

2.スクリーンリーダー使用時でも、大きな支障なく操作できる様にいたします。Win:NVDA、Mac:VoiceOver、スマホ:iPhone VoiceOver にて検証いたします。
(視覚に障がいがあるなどでスクリーンリーダーを利用している方々の利用に役立ちます)

3.ブラウザの拡大表示に対応いたします。(視覚に障がいがある方や視力が低下している方々の利用に役立ちます)

それに加えて、 ユーザビリティ向上のためGoogle ChromeのLighthouseを使用してコアウェブバイタルの指標をチェックしつつ、ポイントの向上を目指すため少なくとも以下の施策をご提供いたします。
　　1. 画像ファイルは基本的にwebpを使用
　　2. 日本語フォントのサブセット化とセルフホスティング
　　3. ファーストビューの背景画像のpreload
　　4. Cumulative Layout Shift予防のためのimgタグ設定。
　　5. 軽量化のためjQuryを使用せず、vanillaJSで記述
　　6. JavaScript CSSファイルの圧縮(メンテナンス等の問題がなく、ご要望があれば)

レスポンシブ対応
　レスポンシブ対応いたします。概ね375px〜でどのサイズでも表示崩れのないようにいたします。

納品につきまして
　　基本的にアップロード用のファイルを圧縮してお届けいたしますが、 サーバーアップロードやGitなどご要望があれば可能な限り対応いたします。

ぜひ「カスタマイズの依頼」にて詳細なご希望をお伝えください。

シトラスデザインでは日本のWebアクセシビリティ規格JIS X 8341-3の則ったサイト診断、改修を行っております。これまで官公庁の関連Webサイトの診断と改修を行ってきた経験と実績がございます。
ランサーズでははじめてのパッケージプランとしてリーズナブルな価格でサービスをご用意させていただきましたので、是非ご利用ください。
【制作会社様へ】業務委託承っております。貴社サービスの一環としてご活用いただけます。

【2024年4月義務化】Webサイトのバリアフリー化をお考えの方へ

官公庁・病院・学校・福祉などのサイトでは高齢者や障害者でも不自由なく閲覧できることが推奨されてきましたが、2024年4月より全ての民間事業者のサイトにもWebアクセシビリティへの対応が義務化されます。
世界的に進むWebのアクセシビリティ化ですが、日本でもJIS X 8341-3という規格が設けられています。
シトラスデザインではこの規格に則ったサイト診断と改修を行っています。アクセシビリティ対応への必要性に迫られているサイトにリーズナブルかつスピーディーに対応が可能です。
SDGsの一環として、UX/UIの改善にもお役立ていただけます。

ご提供内容

• Webアクセシビリティ診断結果（PDF）
• サイト改修を行う場合は改修済みサイトデータ（サーバにアップロード）

ご購入後の流れ

1. ご購入時にご連絡いただいたサイトを診断します
2. 結果をPDFでお送りいたします（ベーシックプランはここまで）
3. 改修ポイントについてご説明いたします
4. サーバ接続情報をご提供いただきます
5. サイト改修作業を行います
6. 改修したサイトデータをサーバにアップロードします
7. 改修し、改善された診断結果をPDFでお送りいたします

プラン

ベーシック
【20ページまで】
サイトのアクセシビリティ診断のみ
※チェック結果をメールでお送りいたします
価格：22,000円
納期目安：3日
納品物：PDF

スタンダード
【20ページまで】
サイトのアクセシビリティ診断から改修まで
価格：55,000円
納期目安：14日
納品物：PDF、サイトデータ（サーバアップロード）

プレミアム
【40ページまで】
サイトのアクセシビリティ診断から改修まで
価格：88,000円
納期目安：30日
納品物：PDF、サイトデータ（サーバアップロード）

【ウェブアクセシビリティ2024年4月から義務化】対策始めていますか？

必要最低限のウェブアクセシビリティ診断を把握しておきたい、という企業様向けに、リーズナブルな“ランサーズ価格“でご用意させていただきました。

【ウェブアクセシビリティとは】

Webサイトなど、インターネット上の情報やサービスを利用する方に対して、障がいの有無にかかわらず、すべての人が不便なく利用できるようにすることです。
ウェブアクセシビリティは、障害者差別解消法の流れとして、2024年4月1日から民間事業者も含めて義務化になります。

自社のWebサイトでも、ウェブアクセシビリティに対応をしたいけれど、何を対応・改善したら良いか分からない企業様。本ウェブアクセシビリティ診断を受けて、現在どれくらいウェブアクセシビリティに対応できているか確認してみませんか？

【A基準とは】

ウェブアクセシビリティの実施基準として日本ではJIS（日本工業規格）の「JIS X 8341-3:2016」が採用されいます。
◆レベルA・・・最低限の基準25項目
　この基準を達していないとホームページを閲覧できない人が存在しうる
◆レベルAA・・・望ましい基準13項目
　この基準を達していないとホームページの閲覧が困難な場合がある
◆レベルAAA・・・発展的基準23項目
　この基準を満たすとよりホームページが閲覧しやすくなる
まずは段階的な対応としてレベルAを目指すことをおすすめします。

【診断結果は結果報告書にてご報告】

• 日本産業規格（JIS）の「JIS X 8341-3:2016」に沿って、貴社Webサイトのウェブアクセシビリティを【A基準準拠】に則って診断をいたします。
• 診断の結果を「結果報告書」におまとめしてPDF納品となります。（A4サイズ2ページ）
  ※当診断結果は、貴社サイトのアクセシビリティ状況を確認いただくためのものになります。より詳細を知りたい場合は、オプションのオンライン解説、または詳細レポートをお申し込みください。納品後1ヶ月以内であれば、後日のオプション申し込みも可能です。
  ※結果報告書の見本は画像をスライドしてご確認ください
  ※当方では診断までとなります。具体的な改善作業は、貴社お取引先のホームページ制作会社またはエンジニアにご相談ください。なお、ホームページ制作会社であれば当方よりご紹介することも可能です。

【診断対象ページ数の目安】

ウェブアクセシビリティ基盤委員会が作成した「試験実施ガイドライン」にて公表されている基準です。
貴社Webサイトのウェブアクセシビリテ判定の信頼性を考える上で参考にしてください。

• 10ページ以下・・・試行的な試験であり、母数が大きい場合には、合否を判定するのには少ない
• 11〜24ページ・・・合否判定に要する最低限のページ数
• 25〜39ページ・・・合否判定に要する標準的なページ数
• 40ページ以上・・・合否判定に十分なページ数

ーーーーーーーーー
具体的なページ数のご指定などございましたら、別途お見積もりをさせていただきますのでご相談くださいませ。
ーーーーーーーーー

◆インボイスに対応し、適格請求書発行事業者として登録済みです。ご安心してお取引ください。◆

デザイナー/制作会社様向けに、経験豊富なエンジニアがコーディングします。

ご提供を受けたデザインから、HTML、CSS、JSなどのコーディングを行います。
ZIPファイル、Github、またはサーバーへ直接公開など、ご希望の形で納品いたします。

当方では、デザインを忠実に再現し、美しく正しいコーディングを心がけています。
・コーディングの外注先を探している方
・コーディングの質を重要視する方
・技術的に可能かどうか迷っている方
ぜひご相談ください。

【ご依頼・制作の流れ】

①打ち合わせ〜お見積り
ご依頼内容を伺います。
サイトの概要、ページ数、スケジュール、ドメイン・サーバーの有無などお聞かせください。
サイトマップやワイヤーフレームがあるとスムーズです。

②デザインのご提供
デザインはフォトショップ、イラストレーター、XD、Figmaのいずれかでご提供ください。
・フォトショップの注意点
画像やイラストはスマートオブジェクトとして埋め込んでください。
・イラストレーターの注意点
WEB用の色空間(sRGB)、ピクセル寸法でお願いします。テキストはアウトライン前のものもご用意ください。
・その他
ご指定のフォントがある場合は、WEBフォントベンダー(Adobeフォント、Googleフォント、Type Square、Font Plus など)とフォント名をご指定ください。

PC用のデザインしかない場合でも、レスポンシブ対応はお任せでご依頼いただけます。

③コーディング開始
スケジュールに沿ってコーディングを行います。
ワードプレスの場合は、管理画面の構築〜オリジナルテーマの作成となります。

④プレビュー
プレビュー環境を用意し、ブラウザで本番同様にご確認いただけます。
＊プレビュー環境は、サーバーの有無やご依頼内容により最適なものを提供します。

⑤納品・公開
納品前にはW3Cのバリデーションチェックを行っております。
(基本No Errorで納品していますが、外部連携など場合によりWarningかinfoレベルは許容範囲とします。)
また、公開時の設定(アナリティクスやサーチコンソール)も無料で対応可能です。

【無料サービス】

・レスポンシブ対応(スマホメニューも含む)
・スライドやアニメーション(複雑ではないもの)
・W3Cバリデーションチェック
・公開時設定(アナリティクス、サーチコンソール)
・レンタルサーバーの設定、ドメインの設定など軽微なサーバー作業

【ワードプレスについて】

規模や複雑さにより、管理画面構築に工数がかかる場合がありますので、事前にご相談ください。