コーディングの代行・外注は
品質と実積のコーディングベースへ

簡易
お見積りはこちら

ジャーナル

Journal

アクセシビリティ

2023.11.28

アクセシビリティ

デザイン

デザインのシンプル化

「デザインのシンプル化」は、ウェブデザインやデザイン全般で注目されている重要なトレンドの一つです。これは、過剰な要素を取り除き、シンプルで使いやすいデザインを追求するアプローチを指します。以下は、デザインをシンプルにするためのいくつかの手法や原則です。これらの原則を組み合わせることで、デザインのシンプル化が実現できます。シンプルなデザインはユーザーエクスペリエンスを向上させ、情報の伝達を効果的に行うことができます。ミニマリズムミニマリズムは、不要な要素やデザインの複雑さを排除し、シンプルでクリーンなデザインを追求するスタイルです。シンプルなフォント、色彩、そして余白を活用することが含まれます。直感的なナビゲーションシンプルなデザインにおいては、ユーザーがサイトやアプリを直感的に操作できるようなナビゲーションが重要です。分かりやすいメニュー構造やシンプルなアイコンを使用して、ユーザーエクスペリエンスを向上させます。色の単純化ラーパレットをシンプルにし、効果的に使用することで、デザインを洗練されたものに保ちます。過剰な色の使用は避け、コントラストを活用して重要な要素を際立たせます。フォントの選択シンプルなデザインでは、フォントの種類やスタイルも重要です。読みやすいフォントを選択し、統一感を保つことがデザインのシンプル化に寄与します。 Adobeフォントの利用に注意 1.Adobeアカウントと契約の必要性 Adobeフォントを利用する場合は、利用者がAdobeアカウントを取得し、契約を行う必要があります。お客様にはこの点を事前に説明し、スムーズなフォントの利用を確保しましょう。Adobeフォントの契約解除に伴い、フォントの利用が制限される可能性があります。お客様にはこのリスクを理解していただき、契約の変更に注意を払ってもらうことが重要です。 2. 代替手段としての画像書き出し Adobeフォントの利用に不安がある場合、テキストを画像として書き出すことも検討されます。ただし、検索エンジン最適化（SEO）や可搬性の観点から、適切な代替手段を検討しましょう。 3. お客様から提供されたAdobeコードの利用 Adobeフォントを使用する際には、お客様から提供されたAdobeコードを使用していることを明示しましょう。これにより、ライセンスの透明性を確保し、問題が生じた際に円滑な対応が可能です。
2023.11.22

アクセシビリティ

顧客満足度

ウェブアクセシビリティ導入のすすめ

2024年4月1日、改正障害者差別解消法が施行されます。この法律は、障害のある人もない人も、互いにその人らしさを認め合いながら共に生きる社会（共生社会）を実現するために2013年に公布されたものですが、この度の改正での大きなポイントは、これまで行政機関等に義務化されていた「合理的配慮の提供」が民間事業者にも義務化されることになった点です。内閣府のリーフレット「合理的配慮」とは、障害のある人が障害のない人と同じように行動したりサービスの提供を受けたりすることができるよう、周りの人が、過度の負担にならない範囲で、それぞれの違いに応じた対応をすることをいいます。この法律の施行を前にウェブアクセシビリティへの注目度が高まっています。ウェブアクセシビリティとは、高齢者や障害者など心身の機能に制約のある人を含め、ウェブを利用する「すべての人」がウェブで提供されている情報を取得し、さまざまな環境でサービスや機能を利用できることを意味します。具体的にウェブアクセシビリティが確保できているウェブサイトとは、次のような状態にあるものです。・目が見えなくても情報が伝わること、操作できること。・キーボードだけで操作できること。・一部の色が区別できなくても得られる情報が欠けないこと。・音声コンテンツや動画コンテンツで、音声が聞こえなくても話している内容が分かること。ウェブアクセシビリティ導入ガイドブックウェブアクセシビリティには「JIS X 8341-3:2016」という国際規格があり、ウェブサイトがどの程度ウェブアクセシビリティに配慮されているかの達成基準としてレベルA、レベルAA、レベルAAAの3つの適合レベルが定められています。レベルAウェブアクセシビリティを確保するために最低限達成するべき状態レベルAAウェブアクセシビリティが十分確保されている状態。日本でも公的機関に対して求められるレベルレベルAAA非常に高いウェブアクセシビリティが確保できている状態本来、ウェブサイトは「誰でも使いやすいかどうか」を常に意識して作られていることが望ましいものです。とはいえウェブアクセシビリティの確保には相応の制作コストが必要になり、また実際にレベルAAAを達成しようとすると基準のすべてを満たすことのできないコンテンツが存在する場合も多くあるため、サイト全体の一般的な方針としてレベルAAAでの適合を要件とすることは推奨されていません。現実的なところで、一般的なウェブサイトであればレベルAAまたはレベルAに適合させれば、誰でも使いやすいものを目指した「合理的配慮」を提供していると言えます。（規格適合性とはまた別のところにある使いやすさもあるので、その考察はまたの機会で……）コーディングベースでは、ウェブアクセシビリティに関するご相談も承っております。なお、規格に適合させるためにはデザイン面での配慮も重要になります。新規ご案件でデザインをご入稿される場合や、既存サイトを改修する場合などでデザインを大幅に変更するご提案をさせていただくこともあります。その点はご了承ください。
2023.11.22

WordPress

アクセシビリティ

プラグイン

多言語

多言語サイト

多言語サイト（Multilingual Website）は、複数の言語でコンテンツを提供し、異なる言語圏のユーザーに対応するために設計されたウェブサイトです。言語の選択と管理サイトが提供する言語を選択し、それぞれの言語に対応するコンテンツを管理する必要があります。一般的な選択肢には、英語、スペイン語、フランス語、ドイツ語、中国語、日本語などがあります。これらの言語に基づいて、ユーザーが好みの言語を選択できるようにします。 URLの管理各言語のコンテンツに対して、一貫性のあるURL構造を確立することが重要です。多くの場合、言語別にサブディレクトリ（例：/en/、/jp/）、サブドメイン（例：en.example.com、jp.example.com）、またはクエリパラメータ（例：?lang=en）を使用して言語を区別します。メニューとナビゲーションサイトのメニューやナビゲーションは、利用可能な言語に基づいて適切に表示および構成される必要があります。これにより、ユーザーが容易に言語を切り替え、希望のコンテンツにアクセスできます。コンテンツの翻訳各ページのコンテンツは、対応する言語に翻訳される必要があります。翻訳プロセスは専門の翻訳者や翻訳サービスを利用して行われ、文化的な違いや地域差異にも注意が払われます。地域ごとの法規制に対応各言語圏における法規制や文化的な慣習に合わせて、サイトの内容やデザインを調整することが重要です。言語切り替えの提供ユーザーが簡単に言語を切り替えるためのオプションや、ブラウザの言語設定に基づいて自動的に適切な言語を選択する仕組みを提供します。 Wordpressのプラグイン「Bogo」 Bogoは、WordPressサイトに多言語機能を追加するためのプラグインです。このプラグインを使用すると、サイトのコンテンツを異なる言語に簡単に翻訳し、ユーザーが好みの言語で閲覧できるようになります。Bogoは、使いやすさと柔軟性を兼ね備え、WordPressユーザーが多言語サイトを構築するための手段として広く採用されています。 Bogoとは Bogoは、WordPressサイトに多言語機能を追加するためのプラグインです。このプラグインを使用すると、サイトのコンテンツを異なる言語に簡単に翻訳し、ユーザーが好みの言語で閲覧できるようになります。Bogoは、使いやすさと柔軟性を兼ね備え、WordPressユーザーが多言語サイトを構築するための手段として広く採用されています。 Bogoの主な機能簡単な設定 Bogoは、専門知識がなくても簡単に設定できるように設計されています。プラグインを有効化するだけで、多言語機能が即座に利用可能になります。言語の追加と管理 Bogoを使用すると、サイトに対応する言語を追加し、管理することができます。各言語には独自の設定が可能で、独自のURL構造や言語コードを指定できます。記事やページの簡単な翻訳 Bogoは、記事やページの翻訳を手間なく行うためのユーザーフレンドリーなエディタを提供しています。Google翻訳などの外部サービスとの連携もサポートされています。ウィジェットとショートコード Bogoは、ウィジェットやショートコードを使用して、サイト上で言語切り替えのリンクやフラグを簡単に配置できます。これにより、ユーザーがサイトの異なる言語バージョンにシームレスに移動できます。 Bogoの設定方法プラグインのインストールと有効化 WordPressの管理画面から、「プラグイン」メニューに移動し、「新規追加」ボタンをクリックしてBogoを検索し、インストール・有効化します。言語の追加「設定」メニューから「Bogo」を選択し、言語を追加します。各言語には、言語コードやURL構造などを指定するオプションがあります。記事やページの翻訳管理画面で記事やページを選択し、対応する言語のコンテンツを入力します。Bogoのエディタを使用すると、翻訳が簡単に行えます。ウィジェットやショートコードの配置設定画面からウィジェットやショートコードを設定し、サイト上で言語切り替えのリンクやフラグを表示します。
2023.10.24

アクセシビリティ

ユーザビリティ

ウェブアクセシビリティとセマンティックHTMLとの重要性

ウェブアクセシビリティとは？ホームページを利用している全ての人が、心身の条件や利用する環境に関係なく、ホームページで提供されている情報や機能に支障なくアクセスし、利用できること外務省のホームページ「ウェブアクセシビリティ」セマンティックHTMLとは何か？セマンティックHTML（Semantic HTML）は、HTML要素を適切な意味付けや意味論的な構造で使用することを指します。つまり、コンテンツの性質や構造を正しく示すことができるHTMLマークアップを使用することです。セマンティックHTMLは、ウェブサイトの検索エンジン最適化（SEO）や開発者、そして最も重要なのはユーザー体験（UX）に対して大きな影響を持ちます。セマンティックHTMLの利点検索エンジン最適化（SEO）：セマンティックHTMLは、検索エンジンがウェブサイトの内容を正しく理解し、適切にインデックスできるように助けます。適切なタグや要素を使用することで、ウェブサイトのランキング向上に寄与します。アクセシビリティ向上：セマンティックHTMLは、スクリーンリーダーやその他のアシストテクノロジーを使用するユーザーにとっても非常に重要です。適切なマークアップを持つウェブサイトは、視覚障害者や身体障害者などのユーザーがサイトを理解しやすくします。コードの保守性：適切なセマンティックHTMLを使用すると、コードの読みやすさが向上し、他の開発者がコードを理解し、修正するのが容易になります。アクセシビリティの重要性アクセシビリティは、ウェブサイトやアプリが全てのユーザー、特に身体的、認知的、感覚的に障害のある人々にとって利用可能であることを保証する原則です。アクセシビリティを考慮することは、包括的なデザインとユーザー体験を提供することに繋がります。全てのユーザーにアクセスを提供：アクセシビリティを考慮したウェブサイトは、誰もが情報やサービスにアクセスできるようになり、社会的な包摂を促進します。法的規制への適合：多くの国や地域で、ウェブサイトはアクセシビリティ基準を満たす必要があるという法的規制が存在します。アクセシビリティを考慮することは、法令遵守の観点からも重要です。ポジティブなイメージ構築：アクセシビリティを重視することは、企業や団体にとって社会的責任を果たし、ポジティブなイメージを構築する手助けになります。ウェブアクセシビリティ関連の規格 WCAG（Web Content Accessibility Guidelines） WCAG（Web Content Accessibility Guidelines）は、ウェブアクセシビリティの国際的な標準で、W3C（World Wide Web Consortium）によって策定されました。WCAGは、ウェブコンテンツのアクセシビリティに関する指針を提供し、視覚的、聴覚的、運動能力、認知的な障害を持つユーザーがウェブコンテンツにアクセスできるようにする方法について詳細に説明しています。 WCAGは、以下の4つの主要な原則に基づいています：知覚可能性（Perceivable）：ユーザーがウェブコンテンツを知覚できるようにする。操作可能性（Operable）：ユーザーがウェブコンテンツを操作できるようにする。理解可能性（Understandable）：ユーザーがウェブコンテンツを理解できるようにする。堅牢性（Robust）：異なるユーザーエージェントやアシストテクノロジーとの互換性を確保する。 Web Content Accessibility Guidelines (WCAG) 2.0 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、学習障害、認知障害、運動制限、発話困難、光感受性発作及びこれらの組合せ等を含んだ、様々な障害のある人に対して、コンテンツをアクセシブルにすることができる。又、このガイドラインに従うと、多くの場合、ほとんどの利用者にとってウェブコンテンツがより使いやすくなる。https://waic.jp/translations/WCAG20/Overview.html ISO/IEC ISO/IEC は、WCAG 2.0の国際規格版です。WCAG 2.0と同様のガイドラインと原則を提供しており、国際的なウェブアクセシビリティの基準として採用されています。この規格は、ウェブ開発者やウェブデザイナーに対して、アクセシビリティを確保する方法を示しています。 JIS X JIS X は、日本のウェブアクセシビリティに関する規格です。この規格は、WCAG 2.0を基にして日本の文化や法律に適した形でアクセシビリティを確保する方法を提供しています。日本国内のウェブサイトやウェブアプリケーションに関するアクセシビリティを向上させるための指針を示しています。これらの規格は、ウェブ開発者やデザイナー、ウェブサイト所有者が、包括的なウェブアクセシビリティを実現するための指針として参照できる重要な文書です。ウェブサイトを開発する際には、これらの規格に準拠することが、より多くのユーザーに対してアクセス可能なウェブ環境を提供する鍵となります。まとめセマンティックHTMLとアクセシビリティは、ウェブデザインの基本的な原則であり、ユーザー体験の向上や包括的なアクセスを提供することを可能にします。これらの原則を遵守することで、ウェブサイトはより多くの人々に価値ある情報やサービスを提供し、より持続可能で包括的なオンラインコミュニティを築く手助けとなります。