TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでrole属性を使ってアクセシビリティを高める方法をを現役デザイナーが解説【初心者向け】
icon
icon
HTML

HTMLでrole属性を使ってアクセシビリティを高める方法をを現役デザイナーが解説【初心者向け】

初心者向けにHTMLでrole属性を使ってアクセシビリティを高める方法について解説しています。WAI-ARIAの基本とrole属性の役割、role属性を使ったアクセシビリティ確保のための設定方法を紹介します。ぜひ役立ててください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

監修してくれたメンター

山本 理仁

2007年からWebシステム開発を経験。2019年からはフリーランスとしてコーディング支援などをしています。
テックアカデミーではフロントエンドコースを担当。

HTMLでrole属性を使ってアクセシビリティを高める方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

role属性を使ってアクセシビリティを高める方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

role属性とは

英単語のroleとは「役割」という意味です。

HTMLでのrole属性はタグごとに設定する属性で、「タグごとの役割」という意味になります。

role属性に設定した値は、ブラウザに表示されるものではありません。

「目の不自由な方がブラウザの読み上げ機能を使った場合」などに使用される情報になります。

W3Cと呼ばれるweb技術の標準化をしている非営利団体により、WAI-ARIA（ウェイ エリア）というものが定義されています。
このWAI-ARIA とは、目や耳の不自由な方達にもWebサイトが使いやすくなるよう考慮された、HTMLの補足的な仕様のことを言います。

このような、より多くの人にとっての使いやすさを「アクセシビリティ」と言います。

HTMLにrole属性を適切に設定することにより、読み上げ機能などが正しく動作するため、障害を持った方にとってのアクセシビリティが高まります。

 

アクセシビリティを高めるには

アクセシビリティとは、身体的な条件や年齢などが様々であっても、みんなが同じように操作性がよくアクセスできるようにすることを言います。

アクセシビリティを高めるためのrole属性の設定として、ランドマークロールと呼ばれるWebサイトの中の大きなカテゴリー分けの設定ができます。

ランドマークロールにより、メインコンテンツエリアやヘッダー、フッターなどの意味づけがされ、Webサイト内のナビゲーションもわかりやすくなり、文書構造を明確にすることでアクセシビリティの向上を図ることができるようになります。

このように、role属性によって要素に意味づけをして役割を与えることで、スクリーンリーダーなどの読み上げソフトでもWebサイトの構造を認識することが可能になります。

 

同じようなHTMLでの補足としてはalt属性があります。

alt属性はimgタグに使われますが、画像がエラーにより表示されない場合や、その画像を認識をすることができないユーザーのために補足的に使われる属性です。

このように、補足的な属性をHTMLに正しく設定することでユーザーのアクセシビリティは高まります。

 

[PR] Webデザインで副業する方法とは

role属性を使ってみよう

<header role="banner">
  ヘッダー部分
</header>
<nav role="navigation">
  <ul>
    <li><a href="#">ナビゲーションメニュ-1</a></li>
    <li><a href="#">ナビゲーションメニュ-2</a></li>
    <li><a href="#">ナビゲーションメニュ-3</a></li>
  </ul>
  <form role="search">
    検索フォーム
  </form>
</nav>

<div id="main" role="main">
  ドキュメントのメインコンテンツ
</div>
<aside role="complementary">
  ドキュメントの補助部分
</aside>

<footer role="contentinfo">
  フッター部分
</footer>

 

大石ゆかり

内容が分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

記事を検索

関連するキーワード

関連する記事

jQueryでHTMLを書き換える方法を現役デザイナーが解説【初心者向け】

jQueryでHTMLを書き換える方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
HTML

HTML5のvideoタグで動画のストリーミング配信の仕方を現役エンジニアが解説【初心者向け】

HTML5のvideoタグで動画のストリーミング配信の仕方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
HTML

HTMLにおけるメタデータを現役デザイナーが解説【初心者向け】

HTMLにおけるメタデータについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTML...
HTML

YouTubeの動画をHTML5に埋め込む方法を現役エンジニアが解説【初心者向け】

YouTubeの動画をHTML5に埋め込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLで右寄せ・中央寄せ・左寄せをする方法【初心者向け】現役エンジニアが解説

この記事ではWebページ制作の際に、要素の右寄せ・中央寄せ・左寄せを実現するHTML/CSSの記述方法について、テックアカデミーのメンター（現役エンジニア）が実...
HTML

HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】

本記事では、HTMLでbuttonタグを使ってリンクを貼る方法についてご紹介します。 HTMLでボタンを作りたい方 ボタンを作るためにbutto...
HTML

あわせてよく読まれている記事

【どんな仕事をするのか！】マークアップエンジニアとは

今回はWebサイトの制作に携わる職種のうち、マークアップエンジニアについて、その仕事内容とスキルについて紹介します。 「エンジニア」という職種だけでも、システムエンジニア、フロントエンドエンジニア、サーバーサイドエンジニアなど数多く存在しています。これからエンジニアを目指そうと思っている人は、エンジニアだけでも数多くの種類があるということを知っておくと良いでしょう。   なお本記事は、TechAcademyのWebディレクションオンラインブートキャンプの内容をもとに紹介しています。   マークアップエンジニアとは マークアップエンジニアは、Web制作業界における職種のひとつです。クライアントから受けた発注要件をベースに、制作するコンテンツの内容を理解し、HTML、CSSでのマークアップを行っていく職種です。 デザイン性とユーザビリティのバランスを取り、アクセシビリティや検索エンジン最適化などを考慮する、Webコンテンツを統合的にデザインしていくのが使命です。   マークアップエンジニアになる上で必要なスキル HTML5・CSS3の知識 マークアップエンジニアは、Webサイト制作工程上、コーディングを担当します。 ですのでHMTL、CSSの知識は必須であり、一番基本となるスキルになります。 また、IE、Firefox、Chromeなど主力のブラウザでさえバグを抱える中、Webサイトの表示不具合が起こることが多々あります。マークアップエンジニアはこのような状況で「どの記述が表示不具合の原因になっているのか」「対処策はどのような記述か」などを判断できる、体系的なコーディングの知識が必要です。   プログラミングの基礎知識 JavaScriptやPHPの基礎知識は昨今マークアップエンジニアにとって必要な知識、スキルになっています。 簡易なJavaScriptは作れる程度のスキルを持つことが望ましく、PHPは知識としてしっかり把握しておかなければなりません。 業務として、実際に手を動かさなくても、効率よくプログラマーと連携をとることがWebサイト構築において一つのポイントになります。 この領域の知識があるのとないのでは、成果物に大きな差が出ると言われています。   ユーザビリティ・アクセシビリティデザインスキル ユーザビリティやアクセシビリティに関するスキルセットはマークアップエンジニアにとって必須のスキル。 Webサイトのデザインがいくら良くても、それだけではクライアントのマーケティング目標をクリアできません。 ユーザーにとって使いやすいサイト・ページになっていて、Webサイトを閲覧しやすい状態に仕上げることがマークアップエンジニアに課せられた使命です。 また、アクセシビリティへの考慮も昨今のWebサイト制作では必須の要素です。目の不自由な人がアクセスしても音声読み上げソフトを利用した際にWebサイトの内容を理解できるようマークアップしていく必要があります。   SEOの知識 SEOの知識はマークアップエンジニアのマーケティング寄りの必須スキルです。 ユーザーが検索エンジンでキーワードを検索した際にWebサイトを上位表示させる策としてSEOは注目されています。 SEO対策としてマークアップ上やっていかなければならないこと、またSEO上やるべきでないマークアップを把握したうえでコーディングを進めていくことを把握したうえで業務を進めていくことが求められます。   以上、マークアップエンジニアとはどんな人、どんな仕事なのか紹介しました。 これからエンジニアを目指そうとしている人は、プログラミング学習サイトも合わせてご覧ください。HTML/CSSやPHPなど基本的なスキルを身につけることができるはずです。 [お知らせ]TechAcademyではWebディレクションができるようになるWebディレクションオンラインブートキャンプを開催しています。Webサイトの企画や設計ができるようになりたい場合はぜひご参加ください。
Webディレクション

生成AIで効率化！広報戦略立案に不可欠な市場調査報告書の作成方法

市場調査報告書の作成は広報戦略立案において非常に重要なステップです。適切な調査と分析により、効果的な戦略を立てることができます。本記事では、生成AIを活用した市場調査報告書作成の具体的な方法をご紹介します。 生成AIの実務活用スキルを磨きたい方は、無料の生成AIコミュニティ『テックアカデミーGAIナレッジベース』をご活用ください。今すぐ無料登録 市場調査報告書作成の重要性 広報戦略を立案する上で、市場調査報告書の作成は欠かせません。この報告書により、以下のような重要な情報を得ることができます。 1. 市場動向の把握 最新の市場トレンドや消費者ニーズを理解することで、効果的な戦略を立てることができます。 2. 競合他社の分析 競合他社の戦略や強み・弱みを分析することで、自社の差別化ポイントを見出すことができます。 3. ターゲット市場の明確化 潜在的な顧客層を特定し、彼らのニーズに合わせたアプローチを検討できます。 生成AIを活用した市場調査報告書作成 生成AIを使用することで、市場調査報告書の作成プロセスを大幅に効率化できます。以下に、具体的な活用方法をご紹介します。 1. データ収集と分析 生成AIは大量のデータを短時間で処理し、重要な洞察を抽出することができます。以下のようなプロンプトを使用することで、効率的にデータを収集・分析できます。 #命令 以下の要件を踏まえて、広報活動における市場の動向、競合他社のターゲット、業界トレンドなどを調査し、その結果を報告書形式で提出してください。 #役割 あなたは先進のマーケットリサーチャーであり、業界トレンドを読み解くプロフェッショナルです。 #目的 ・新しい広報戦略を立案する前に、現在の市場状況や競合他社の動き、業界のトレンドを正確に理解したい。 ・これにより、企業の広報活動が効果的で競争力を持つものとなるよう調整する。 #背景と課題 ・クライアントは、国内大手の飲食業界をリードする企業である。 ・近年、健康志向やサステナビリティに関する市場の動向が急速に変わりつつある。 ・競合他社はアクティブな広報活動で、これらのトレンドを取り入れた商品やサービスを強くPRしている。 ・クライアント企業も同様の取り組みを検討中だが、戦略を立てる前に、現在の市場の動向や競合他社の戦略、業界のトレンドを把握する必要がある。 #クライアント企業情報 ・業界: 飲食業界 ・主力商品: ヘルシーメニューやサステナビリティに配慮した商品 ・年間売上: 約800億円 ・従業員数: 2,000人 ・主要顧客: 20~50代の健康志向の強い消費者 ・社内文化: イノベーションを重視し、時代のトレンドを取り入れた商品開発を推進。 ・問題点: 競合他社との差別化や新しい市場トレンドへの対応が求められている。 #市場調査の条件 ・調査期間は過去1年間とする。 ・市場の動向、競合他社の戦略、業界のトレンドを中心に調査を行う。 ・調査結果はグラフやチャートを用いて視覚的に整理する。 ・調査結果に基づいた広報活動の提案も同時に行うこと。   2. レポート作成 生成AIは収集したデータを基に、構造化された報告書を作成することができます。以下は、AIが生成した市場調査報告書の一例です。 # 市場調査報告書 ## 目次 1. **はじめに** - 調査の背景と目的 - 調査の重要性 2. **市場の動向** - 健康志向とサステナビリティの影響 - 飲食業界の成長率 - 主要な市場トレンド 3. **競合他社の戦略** - 競合他社のプロモーション活動 - 競合他社の製品とサービス - 競合他社のメッセージとブランド 4. **業界トレンド** - 健康志向の拡大 - サステナビリティの重要性 - 技術の影響 5. **広報活動の提案** - 新しい広報戦略の立案 - ターゲット市場の明確化 - メッセージの強化 - デジタルプレゼンスの向上 6. **結論** - 調査結果の要約 - 提案のまとめ 7. **付録** - グラフとチャート --- ## 1. はじめに ### 調査の背景と目的 この市場調査報告書は、クライアント企業が現在の市場状況と競合他社の動向を正確に把握し、新しい広報戦略の立案に役立つ情報を提供することを目的としています。調査は、飲食業界における健康志向とサステナビリティの変化、競合他社の広報活動、業界のトレンドに焦点を当てて行われました。 ### 調査の重要性 健康志向とサステナビリティの市場トレンドは急速に変化しており、競合他社はこれらのトレンドを積極的に取り入れた広報戦略を展開しています。クライアント企業も競争力を維持し、差別化を図るために、現在の市場状況とトレンドを把握し、新しい広報戦略を立案する必要があります。この報告書はそのための基盤となる情報を提供します。 --- ## 2. 市場の動向 ### 健康志向とサステナビリティの影響 近年、消費者の健康志向と環境に対する意識が高まっており、飲食業界にも大きな影響を与えています。低カロリー、低糖質、有機食品など、健康に配慮した商品への需要が増加しています。また、サステナビリティに関する関心も高まり、環境に配慮した食品やリサイクル可能な包装材料に対する需要が増えています。 ### 飲食業界の成長率 過去1年間、飲食業界は安定した成長を維持しており、年間売上は前年比で5%増加しました。特に健康志向の商品に関する成長率は10%を超え、このトレンドは今後も継続すると予測されています。 ### 主要な市場トレンド 市場の動向に関する重要なトレンドは以下の通りです： - デジタル注文とデリバリーサービスの拡大 - プラントベースの食品の人気 - フードテック企業の台頭 - フードトラックとポップアップレストランの増加 --- ## 3. 競合他社の戦略 ###
生成AI・ChatGPT

事例から学ぶ！HubSpotがサイト改善に成功したUX戦略とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXPinのコンテンツ・ストラテジストであるJerry Cao氏によって投稿されました。 UXデザイナーのAustin Knight氏率いるチームが、Hubspotのサイトをリニューアルしたプロジェクトについて書かれています。   HubSpot（ハブスポット）のサイトは、世界の90カ国以上にわたり1万8000以上の企業にサービスを提供し、月間400万人以上のユーザーがアクセスしています。 HubSpotにとって、サイトこそ経営の要となるものでした。HubSpotが非公開会社から、多様な製品を提供する世界規模の公開会社へと発展するには、サイトのリニューアルが不可欠でした。 サイトリニューアルのプロジェクトは、プロジェクト開始から一ヵ月半後に開かれる、HubSpotの年次イベント「INBOUND」で新しい製品ラインがリリースされるまでに、急いで完成させる必要がありました。   UXデザイナーのAustin Knight氏がこのプロジェクトを率いて、3つのチーム（ビジュアルデザイナー、デベロッパー、マーケティングマネジャー）が加わりました。またKnight氏はこの他に、製品のポジショニング戦略（product positioning）、コピーライティング、技術開発を担当する外部の6つのチームとも協力しました。 この記事では、UXデザイナーが、過密なスケジュールのプロジェクトにおいて、リサーチ、共同作業、ユーザーに焦点を当てた「Lean UX」という手法を応用しながら、どのように良い結果を生み出せたのかを事例として紹介します。 画像：HubSpotのリニューアルされたサイト 次の3つのステップは、実際のプロジェクトをベースとしてUXPinが作成したベストプラクティスです。   ステップ1：入念なリサーチ、継続的なテスト HubSpotのプロジェクトは、まず最初に、Knight氏が「Lean UX」という手法をチームに紹介することから始まりました。 「Lean UX」とはJeff Gothelf氏によって提唱されている手法で、継続的な「学習ループ」（構築 – 評価 – 学習のループ）を用いてデザインプロセスを軽量化することによって、ビジネス戦略を整えるためのものです。 このプロジェクトでは、ステップ1は、分析とユーザー調査を行い、手早く予測の検証を行うことでした。   分析＆ヒートマップ 多くのケースにおいては、デザインチームはマーケティング部門にデータ分析を依頼するのが一般的ですが、今回のプロジェクトでは、Knight氏は自らデータ分析を始めました。HubSpot、Googleアナリティクス、Mixpanelから膨大なデータにアクセスできました。 主な課題は、これらの膨大なデータを分析して、意味のあるパターンを見つけ出すことでした。 Knight氏はまず、多くのユーザーの行動を分析した結果、次のような傾向が見られることに気づきました。 サイト上でPRICING（価格表）に最初にアクセスする（ユーザーは製品のメリットよりも価格を優先していることがわかります。） サイト上でFAQ（問い合わせ）に最初にアクセスする（ユーザーの疑問が解決されていないことがわかります。） サイト上でサイト内検索を最初に利用する（主に製品について不明な点を検索しているので、ユーザーが必要な情報をサイトで得られていないことがわかります。） この分析から、HubSpotのサイトは完成度は高いものの、重要な情報が欠けているために、コンバージョン率が低下していることが判明したのです。   Knight氏はまた、2万5000人のユーザーを対象に、ヒートマップとスクロールマップによる分析を行い、合計46万7308のデータを集めました。 数年分のデータを集めることができたため、問題（例として、ユーザーの25%しかサイトのページをスクロールしていないことなど）が生じた原因を理解するのに役立ちました。   セッションの記録 最後に、セッションの記録によって、定量分析と定性分析を行いました。 セッションの記録は、生きた、匿名性のある、未だ分析されていないデータです。実際のユーザーの行動がそのまま反映されたデータなので、分析結果も信頼できます。 セッションの記録は、デザインプロジェクト全体を通して行い、ユーザーへのインタビューやユーザビリティテストの結果を検証するのに役立てます。   定性分析 定量分析は何（What）を分析するのには役立ちますが、なぜ（Why）を知ることはできません。 ユーザーエクスペリエンスに期待されることや、行動に隠された動機を知るためには、デザイナーはユーザーと利害関係者にインタビューを行う必要があります。   1. ユーザーへのインタビュー HubSpotのサイトの利用者の10%は、ログインや情報検索をしているユーザ―であるため、サイトのリニューアルにあたっては、これらの特定のグループを無視することはできません。 データの分析結果を検証するためだけではなく、新しいサイトでどのようなコンテンツを提供するべきかのアイデアのヒントを得るために、Knight氏はユーザーへのインタビューを行いました。 ユーザーへのインタビューのプロセスを徹底して考えたことで、的を絞って意見を集めることができました。   2. 利害関係者へのインタビュー このプロジェクトによってHubSpotのサイトの外観が根本的に変わることになるため、Knight氏はまた、HubSpotの会社の取締役、製品、マーケティング、セールス、カスタマーサポートのチームにもインタビューを行いました。 次にKnight氏は、ユーザーへのインタビューから得られた意見、カスタマーサポートの記録、HubSpotのサイトのリニューアルの不要な原案、Twitterのツイート、電子メール、さらにはKnight氏自身の講演イベントでの参加者との会話などの結果を総合的に勘案にしました。 「プロジェクトで取り組んだのは、『データを参考とした、人間を中心に考えたデザイン』だ。」とKnight氏は述べています。 また、「デザイナーは可能なときにはいつでも、自分自身でデータを解釈して、デザインに関する決定を行う必要があります。近年、定量的なデータと定性的なデータを活用することで、デザイナーたちがますます力を発揮できるようになりました。一般的に、単なる意見や誰かの「好み」に基づいて決定することもなくなり、それ以上のことが可能になっているのです。 今日のデザイナーが真に力を発揮するには、明示的なデータと黙示的なデータの両方を活用して、デザインのソリューションを導くことが大切です。」とも述べています。   多変量テストによって、小さな変更を試す 最後に、Knight氏はリサーチの結果を基にして、多変量テスト（Multivariate Testing：レイアウトデザインの候補の中から、最適なデザインを選ぶための手法）を行うために、デザインにいくつか変更を追加しました。 多変量テストは、特定のデザイン要素を決定、却下することで、サイト全体のリニューアルに進む前に、チーム全体として戦略的な決定を行うのに役立ちます。   ステップ2：実際のデザインを設計する Knight氏は、「全体の設計→テスト→学習→イテレーション→最適なソリューションの選択」という構造化されたプロセスの手法を用いました。   簡単なプロトタイピング 多変量テストによって、レイアウトのデザイン候補をチームで3つに絞り、さらにプロトタイプを作成しました。 主な方向性が定まったところで、Knight氏は最初の段階でイテレーションを繰り返して行い、次に外観のデザインに取り組むという手法を取りました。 実際には、ユーザー望む方向性や意見を反映することに多くの時間を費やしたことを考えれば、プロトタイプでも最終的な完成製品に近いものでした。 Knight氏は次のように述べています。 「紙のプロトタイプ、ワイヤーフレーム、外観のデザインの段階に至るまで、テストはユーザーと共に行っています。」 「プロジェクトのすべての段階において、ユーザーの声が反映されています。デザイナーとしては、ユーザーの声は耳に痛いこともあるかもしれません。ユーザーの意見にすべて従うのではなくて、方向性を見出すために活用するのがいいと思います。」   モックアップ 外観のデザインの段階において、Knight氏は特にビジュアルデザイナーと一緒に仕事を行いました。 また、Knight氏はデベロッパーとは、プロジェクトの各段階ごとにデザインについてディスカッションを行っていたのも特筆すべきことです。開発側は、プロトタイプを作成する段階で集中的にコーディングを行う一方、全体を通してイテレーションを行うことで、チーム全体としてプロジェクトの進行段階が揃うようにしています。   外観のデザイン こうしてチームは、現代的で、美しく、鮮やかな色、HD画質の画像、型にはまらないグリッドデザインを活かしたサイトが完成しました。このグリッドデザインは、リニューアルしたサイトには「生き生きとしたデザイン」が必要だという観点から生まれたものです。 グリッドデザインをベースとして、多くのデバイスに対応したマルチプラットフォームで、コンテンツの変更や削除も容易です。また重要なコンテンツは、ユーザーや利害関係者の提案に応じて、アップデートしやすくなっています。   画像処理 画像の枠のデザインも、型にはまらないグリッドデザインです。 プロジェクトのチームは、まずサイトのレイアウトに完璧に収まる画像を選びました。 マウスをホバーしていない状態（off-hover）では焦点のぼやけた画像の一部が表示され、マウスをホバーさせた状態（on-hover）では画像が右のグリッドの領域まで広がり、画像全体と追加の情報が表示されるような設計になっています。 この画像処理によって、識別しやすいデザイン要素が生まれ、ユーザーのアクセスを大幅に増加させるインタラクションが実現しました。 またチームは、ユーザーへのインタビューから、個々のユーザー向けに動的なコンテンツを提供することが、サイトリニューアルの成功に大切な要因であるとわかっていたので、これも開発しました。   互換性とWebアクセシビリティ 最後に、HubSpotのサイトのユーザーの16%はモバイル端末からアクセスしていること、アメリカの人口の19%はWebアクセシビリティのニーズがあることを考えると、コーディング作業に加えて、互換性とWebアクセシビリティを考慮するのも重要なことでした。 プロジェクトの各作業の段階は同時並行で進めていたので、モバイル端末向け、デスクトップ端末向けの各サイト設計も同時並行で進めました。   [PR] Webデザインで副業する方法とはステップ3：コーディングとテスト 次のステップでは、HubSpot社のCMSを利用して、きれいなコードを設計するのが目標となりました。 すべてのデバイスにおいてコードの互換性が保たれるように、Knight氏は、ビジュアルデザイナー、エンジニアと共に、QAテスト（品質保証テスト）を定期的に実施しました。   各種デバイスや、Chrome、Safari、Firefox、Internet Explorer、Edge、Opera、Yandexなど各種ブラウザの多数のバージョンの解像度ごとに、Webサイトが正しく機能するかチェックするテストも行いました。 さらに、BrowserStack（多数のブラウザ環境下における作動を再現するためのエミュレータ）を使い、実際のデバイス環境下におけるWebサイトの作動の再現も行いました。 設計を改良するときには、ユーザーのプラットフォームごとの割合はすでに把握できていたため、利用者数やクリティカリティ（Criticality：システムエラーなどにおいて主要な要因を分析するための指標）を考えながら、優先順位を決めて効率的に進めることができました。   ステップ4：テストの継続とイテレーション リニューアルしたHubSpotのWebサイトは、予定通り、年次イベント「INBOUND」の舞台において、同社の共同設立者たちによって、Webサイトのサポート対象である新製品や新機能の紹介とともに初公開されました。 新製品のリリースは、大成功を収めました。 しかし、チームとしては引き続き「Lean UX」の手法をプロジェクトで実践するため、栄光に浸っている暇はありませんでした。早速、チームはGoogleアナリティクスとHubSpotのサイトからデータを集計して、次の指標に注意を向けました。 コンバージョン率（Conversion rate：目標の達成率） 送信率（Submission rate：ユーザーがフォームにデータ入力して送信する率） 離脱率（Drop-off rate） 目標達成数（Goal completion） ナビゲーションサマリーにおける、参照元ページと移動先ページ 検索クエリ（Search Queries）   チームは、直帰率（Bounce rate：ユーザーが1ページだけ見てサイトを去る率）、ページ滞在時間など重要業績評価指標（KPI：Key Performance Indicators）として役に立つ指標のみを分析しました。 さらにデザインの改良を重ねるために、チームはヒートマップを使って2万5000という膨大なセッションを分析し、追加のユーザビリティテストも行いました。     結果：データが示すUXの成功 今回のプロジェクトは、Knight氏とチームが「Lean UX」の手法を全て取り入れた初の試みでしたが、データ分析と設計を上手く組み合わせて、迅速にビジネスの成果につなげることができました。 またリニューアルしたのHubSpotのWebサイトも、今回のプロジェクトのプロセスと同じくらい、柔軟性の高い設計に仕上がったので、今後のイテレーションも容易に行うことができると思います。デザインのリニューアルや、ユーザーやビジネス上のニーズに応じた修正にも、幅広く対応できるでしょう。 秘密保持契約（NDA）のためすべては公開できませんが、Webサイト公開後のビジネス上の成果を、次にいくつかご紹介します。 ユーザーのコールトゥアクション（CTA：Call To Action）への反応率の増加 ユーザーのナビゲーション要素への反応率の増加 製品のトライアル版契約数の増加 同社の製品チームにおけるストレスの緩和   今では、HubSpot社は「Lean UX」の手法を絶賛する支持者となっています。 Knight氏は、「私たちのチームは、プロジェクトの共同作業を効率的に進めることができた。」、「すべてのプロセスにユーザーの声を反映した結果、チームが誇りに思えるような、インパクトのあるWebサイトを構築できた。」と述べています。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、WebデザイナーであるChristian Krammer氏によって投稿されました。   UIデザインツールはこれまでにおいてかなりの人気を集めてきました。Affinity Designerや、Gravit、Sketch等の素晴らしいアプリケーションが大きく進化した一方でAdobe XD （Adobe Experience Designの略）やFigma のようなプレイヤーもこのフィールドに参入してきました。 個人的には後者に最も魅力を感じます。Sketchとの類似性から、Figmaも最初の段階から簡単に正しく理解できました。更にFigmaは簡単なファイルの共有やvector networks、「constraints」(レスポンシブデザイン向け）、リアルタイムコラボレーションのような他の使い易い競合相手とは明確に違う独自の個性があります。 この記事ではSketchとFigma 両方のアプリケーションを細部に渡り比較し、それぞれの長所がどのような点かに焦点を当てていきます。   Sketchの最大の弱点は常にAppleのエコシステムにロックインされている事です。設計するだけではなく、ファイルを開きチェックするのにもMacが必要です。WindowsやLinux上では全く機能しません。 その為しばらく経つとSketchファイルのスペックを持つ有料のサービスが現れた訳ですが、それにしても厄介で余分な手順です。 上：Sketch  下：Figma   これが恐らくFigmaが最初の段階から一線を画す理由の1つです。 すなわち、世界中基本的にどのデバイスでもFigmaはWebブラウザで使うことができます。どのインストールも一切不要です。ただChrome（又はFirefox）を開いてアカウントを作成して設計を開始するだけでいいのです。 私は以前からずっとブラウザベースのツールを躊躇していましたが、Figmaは一瞬で私の懸念を仏拭しました。Figmaは多数の要素を含みながらもSketchと同様高性能です（もし同様でなければFigmaの方がより高性能です）。 WindowsやMac用のFigmaのスタンドアローンデスクトップアプリも入手可能ですが、基本的にそれらはただのブラウザバージョンのラッパーにすぎません。それらはキーボードショートカットにより優れた一方で、常にオンライン上にいなければなりません。 勝者：Figma 理由：プラットフォームに依存しないため   ユーザビリティ（特徴的機能とユーザーインターフェース） 基本的に、FigmaはSketchのインブラウザ版と呼ぶのが最も相応しいでしょう。機能はほぼ同じ、インターフェースも似ている、キーボードショートカットでさえもほぼSketchから受け継いでいる。 もし既にSketchを知っていれば、Figmaが2016年の始めにリリースされた時にすぐに簡単に使いこなせるようになったでしょう。   Figmaはリリース当初から様々な点において改善され、いくつかの部分ではSketchを上回ってきました。 しかし、プラグインやサードパーティ・ツールとの統合、リアルデータを利用できる機能（Craft Pluginも使用して）など、欠けている機能が未だにいくつかあります。それにも関わらず、この調子で改善が進むとFigmaがSketchに肩を並べるのはもはや時間の問題でしょう。 勝者：引き分け 理由：現時点では大差はありません。しかしSketchの方があなたの仕事を効率化させる要素を持ち合わせています。   価格 Sketchは元々新しいバージョーンごとに約99USドルの初回手数料のみで発売されました。しかしやがてこのビジネスモデルは維持不可能だと判明されます。Bohemian Coding社は最近価格を定期購入が必要なモデルに変更しました。99USドルで1年間の無料アップデートが入手できます。 その後はそのまま使い続けることができるか、更に同額を支払うことでまた別の1年アップデートが行えます。 この値上がりは当初不適切なように見受けられましたが、デザイナーとしてあなたのメインツールへの99ドルの価値とは何でしょうか？そうです、大した額ではありません。 Adobe’s Creative Cloud の定期購入よりはまだ安いのです。（又、Sketchは何の問題もなく使い続けることができる一方、Creative Cloud の定期購入を辞めたらどのAdobe CC アプリも使い続けることができなくなります。）   当分の間は、Figmaは全ての人が無料で使えるようになっていますが、今年後半には変わってくるでしょう。 きっと定期購入制になり、月額10~15USドルになるでしょう（あくまで私個人の見解ですが）。確かな事は1つあります。それは、Figmaは学生に対して常に無料でしょう。（Sketchが教師と学生に対しリーズナブルなディスカウントを提供しているのと似ています。） 勝者：引き分け 理由：Figmaの価格に関する発表はまだない為   [PR] Webデザインで副業する方法とはコラボレーション機能 Figmaの主な差別化要因は恐らく「マルチプレイヤー」と呼ばれるリアルタイムコラボレーション機能でしょう。その機能を使って他のユーザーと同時に1つのファイルを編集することができるだけでなく、他のユーザーがデザインをいじっているのを見たり、内蔵型のコメント機能を使って変更を知らせることができます。 1つの例として、この同時編集はプレゼンテーションやリモートチームにとって素晴らしく、また関わっている全てユーザーが同じ状態を確認し、意図していなかった上書きを防ぐことができます。   Sketchには（プラグインを使用してですら）そのようなコラボレーション機能はありませんし、多分そのような機能がない方がSketchにとってはよいのかもしれません。 なぜなら「このボタンをもっと大きくしよう。ちょっと待てよ、勝手にやっちゃえ！」というような結末をもたらすかもしれないからです。もちろんこれは少し大げさな例です。この機能は多少価値はありますが、事前に特定のルールを決めておかないとリスクがあります。 勝者：Figma 理由：同時に同じファイルを複数の人で共同編集できる為   ファイル共有とスペック リアルタイムコラボレーション機能に幾らか関連しているのは設計ファイルの共有です。なぜならFigmaではすべての事がブラウザで行われるため、全てのファイルが必然的にURLを持っていて、それを同僚や上司に送ることができます（閲覧専用モードでも可能です）。 このブラウザベースのアプローチの別の大きな利点は、開発者をはじめ全ての人がサードパーティツールの必要性なしにすぐにデザインを開き検証できることです。 Figmaでは簡単に他のユーザーとデザインを共有できます。   これはまさに、1つのファイルにおいて必要不可欠な全ての情報（例えばフォントサイズや色、寸法、アセットなど）を他の共同制作者に提供するためにSketchに求められているものです。 しかしながら、前にも述べたように、ここであなたを手助けするZeplinやSimpli、InVisionの Inspect、Avocode、Marklyなどの有料のツールが必要です。公平な立場からみて、最初の3つは1つのプロジェクトでは無料ですが、より複雑なものに取り組む際にはそれだけでは十分ではないでしょう。   更に何らかのツールを必要としている場合や、そのような（正直なところ基本的な）機能にお金をかけたくないというのであれば、MarketchやSketch Measureという無料のプラグインもあります。多くの有料のアプリではコメントを追加したり自動的にスタイルガイドを作成することができます。 あるいは、FigmaはSketchのファイルフォーマットをサポートしているので、SketchのファイルをFigmaにインポートしてチェックすることさえできます。 左上から右下順に:Avocode、Zeplin、Simpli、Markly。これら全てにおいて様々な方法でSketchのデザインの閲覧、共有可能。   もし共同編集者とデザインをちょっと見たいだけであれば、内蔵されているSketch Cloudが正にその役割を果たしてくれます。iOSデバイスでデザインを見るには、Sketch MirrorやFigma Mirrorを使って、Androidのデバイスであれば、MiraやCrystalを使用することができます。 FigmaはAndroidベースのアプリを提供しないのですが、（デスクトップコンピューター上で）フレームかコンポーネントを選択後、デバイス上で「www.figma.com/mobile-app」を開くと、1種のプレビューが見れるでしょう。 勝者：Figma 理由：サードパーティツールの必要性なしにブラウザ上で簡単にファイルの共有が可能な為   ファイルの整理 Sketchには、ページを提供するという組織能力があるため1つのファイルでアプリやWebサイト全体を作ることができ、ページ同士のスイッチも即座に可能です。Figmaはこの点において後れをとっています。 Figmaはページを提供しませんが少なくとも複数のファイルを1つのプロジェクトに結合することは可能です。 左：Sketchでは1つのファイルを複数のページに整理でき簡単にスイッチ可能 右：Figmaのプロジェクトは未発達   アートボードというSketchのもう1つ重要なコンセプトも適応され強化されました。Figmaでは塗りつぶしやボーダー、エフェクトを簡単にアートボードに適用でき、またそれらをネストしたりグループから簡単に作成することもできます。1つの例として、これにより組み合わされた範囲より大きな要素のコンテナも許容され、「constraints」機能の手助けになりうるでしょう。 更には、各アートボードには独自のネストされたレイアウトグリッドがあり、それによりレスポンシブデザインに役立つのです。 Sketchでもアートボードをネストすることが可能ですがそのインプリメンテーションはFigmaと比べると全く有効的ではありません。 勝者：引き分け 理由：Sketchにはページがあるが、Figmaのアートボード（フレーム）はより有効的な為   レスポンシブデザイン Figmaが導入した（Sketchにも何ヶ月か経ってから導入された）機能はレスポンシブデザイン、すなわち、どのように要素が異なるアートボードやデバイスのサイズに対応するかを設定した機能です。 Sketchでそのような機能を提供するプラグインが以前からありますが、ちょっと使いにくい感じがありました。「group resizing」という特有の機能だけはFigmaの「Constrains」機能に匹敵して簡単に使用できます。 左：Sketchの「group resizing」機能は1つのドロップダウンメニューで設定され慣れるまで少し時間がかかります。 右：Figmaの「constraints」機能はより目で見てわかるようになっています。   両者とも基本的に同じような動作ですがその見栄えは一目瞭然。Sketchでは4つのオプション付きのドロップダウンメニューしかなく、操作中に一体どんなふうになるなるのかがイメージしずらいです。Figmaはよりビジュアル化した方法でこれらのプロパティを明確にします。 例えば、ある要素をアートボードの端に固定するか、それと均一にリサイズする事などができます。 Figmaの大きな利点はこれらの制約がレイアウトグリッドと一緒に組み合わせることで機能することです。要素は、例えばある列（又は行）に固定されるか、それらの幅に一致します。更には、各軸にこれらの設定を個別に変更することができ、グループだけではなくアートボードにも機能します。Sketchではあり得ない機能です。 勝者：Figma 理由：その制約機能は遥かに進化していてより多くのオプションがある為   ベクトル　マニピュレーション Figmaが発売された時の1つの大きな特徴は「vector networks」でした。もはやベクトルはただ一連の繋がった点（ノード）ではありません。今や、新しい線でどのノードからも分岐する事ができます。例えば、矢印を作るのなんて朝飯前です。 Figmaのvector networksはベクトルのどの点にもセグメントを追加することができます。 しかしそれよりも遥かに勝っているものがあります。ベクトルのパーツはPaint Bucketツールで簡単に塗りつぶされる（又は削除される）事ができます。ベンドツールを使ってセグメント全体を動かす（又は曲げる）事も可能です。そして1つのベクトルから別のベクトルへ線点も同様に）をコピーするのは一瞬でできます。 Figmaのvector networksでセグメントを簡単に動かしたり曲げたりする事ができます。   この特殊な機能1つでFigmaはSketchと一線を画しており、アイコンデザインに適したものになっています。 それに比べ、Sketchで利用可能なツールはほぼ時代遅れな感じを受けます。Sketchではベクトルオブジェクトを作成し操作するために必要なすべてのものが揃っているかもしれませんが、より複雑なベクトル操作が必要になってくるとすぐに扱いにくくなるでしょう。 はじめの図：Figmaでは、ペイント塗りつぶしツールを使って2つの重複した円の塗りつぶされた部分を削除し1つの輪をつくる。 2番目の図：Sketchではブール演算を用い従来の手法を使っている。(ちなみにこの方法はFigmaでも可能)   ほとんどの場合、Sketchではある特定のタイプの形を作るのにブール演算を使用しなければいけませんが、その多くはFigmaのvector networksではより簡単に作成可能です。Sketchでは2つのベクトルオブジェクトを繋げたり、またはブール演算が適用された後に形を平らにすることさえしばしば難しいという事実がさらに物事を悪化させます。このアプリはこの点において問題が山積みなのは確かです。 勝者：Figma 理由：vector networksは全く新しい次元をベクトルマニピュレーションにもたらします。Sketchにおいてはまだそれと匹敵するものはありません。   サポートされているファイルの種類 新しいアプリケーションが出るたびに、もしプロジェクトを移行したければ全てをやり直さなければいけないという問題によく直面するでしょう。Figmaではそうではないのです。見事なほどに正確な方法でSketchのファイルを開くことができ、この時点で既にFigmaが優位です。 残念なことに逆パターンでは機能しません。1度Figmaでデザインをスタートしたらもうそれを使い続けるしかないのです。SketchにエクスポートすることもPDFファイルを作成すること（またはインポートすること）もできません。SVGにエクスポートするオプションもありますが、デザインアプリケーション間で複雑なファイルをエクスチェンジするのに理想的なフォーマットではありません。 エクスポートオプションは一見似ていますがSketchにはより多くのオプションがあります。 左：Sketch 右：Fiigma   もう1つの制限要因はJPG画像をFigmaでエクスポートしたときにその品質水準を設定できないことです。なので画像を最適化する他のアプリケーションが必要になるかもしれません。Sketchの最新版ではさらにもっとエクスポートのオプションが改善しています。 現在ではファイル名に接頭辞と接尾辞の両方を設定できると同様、Androidへのエクスポートをはるかに簡単にさせるエクスポートプリセット機能があります。 各アプリケーションがサポートするエクスポートファイル形式を見てみましょう。 Sketch PNG JPG TIFF WebP PDF EPS SVG   Figma PNG JPG SVG 勝者：Sketch 理由：より多くのファイル形式とより良い保存、エクスポートのオプションがある為   アクセシビリティ FigmaにはSketchで使用できる多くのショートカットキーがありますが、そのアクセシビリティのレベルは同じではありません。Sketchではほぼ全ての事がキープレスで行うことができます。 もし気に入らないショートカットキーの組み合わせがあればあなた独自のやり方をシステム環境設定で登録することが可能です（デフォルトによって割り当てられないショートカットコマンドが主になる傾向があります）。 macOSのシステム環境設定でSketchのあなた独自のショートカットキー設定が可能   Figmaはブラウザ上に存在しているためそのようなことは一切不可能です。デスクトップアプリでその点を補うことができますが、特定のメニューバーコマンドが無いせいである特定の機能を単純にキーボードに割り当てることは不可能です。 勝者：Sketch 理由：そのアプリケーションのほぼ全ての機能がショートカットキーでアクセスすることができ、更にはカスタマイズできる為   シンボル（コンポーネント） 1つの重要な機能がちょうどFigmaに導入されました。それはシンボル、又はここではコンポーネントと呼びます。コンポーネントを使用すると、「instances」の形式で簡単に再利用できる1つの複合オブジェクトにいくつかの要素をを組み合わせることができます。主要なコンポーネントが変更されるとすぐに、全てのインスタンスがその変更点を受け継ぎます。（しかしながら、その同じコンポーネントのバリエーションを考慮して特定のプロパティは個別に修正されます。） 最近では、Figmaではファイル間や複数のユーザーと一緒に共有できるコンポーネントのライブラリを作成することさえ可能です。これは確固たるデザインシステムへの大きなステップです。 Sketchでは、個々のインスタンスの修正がインスペクタパネル上でオーバーライドの形で処理されるので、各インスタンスごとにテキスト値や画像の塗りつぶし、ネストされたシンボルの変更が可能です。 Figmaでは、塗りつぶし、ボーダー、効果（影やぼかし）を含め、キャンバスで直に1つの要素のプロパティをアップデートすることができます。 上：Sketchではインスペクタパネル上でオーバーライドを使用してシンボルインスタンスの内容を変更します。 下：Figmaではテキストの色を含め直接キャンバスキャンバスでコンポーネントのインスタンスをカスタマイズできます。   シンボル（コンポーネント）の真の強みはレスポンシブデザインで発揮されます。どちらのアプリでも、親のサイズが変更された時にどの様に要素がシンボル内で反応するか定義することができ、異なる場所や画面のサイズでシンボルを使うこともできます。 Figmaが未だに後れを取っている領域はレイヤーやテキストスタイルです。形やテキストレイヤーのスタイリングを保存することができなく、他の要素と同期することも不可能です。しかしながら、1つの要素から別の要素にスタイリングをコピーして貼り付けることはできます。 勝者：引き分け 理由：インプリメンテーションは極めて同じレベルですが、Figmaはその共有可能なコンポーネントでわずかに有利です。   プラグイン Sketchは並外れて素晴らしい機能を兼ね備えていますが、それを決定打にしているのはSketchを強化させたり足りない機能を補うサードパーティプラグインの存在でしょう。 1度に複数のレイヤーの名前を変更したり、ダイナミックボタンを作成したり、カラーパレットを保存し読み込んだり、Unsplashから簡単に画像を挿入したり、Git機能を有効化したり、Sketchの中でアニメーションを創り出すことができたりなど、使用目的は様々です。プラグインの全リストは公式ディレクトリやGitHub上で見ることができます。 公式WebサイトとGitHubの両方で、Sketchの膨大なプラグインのセレクションを閲覧可能です。 では、Figmaですが、現段階では全くそのような機能はありません。公平に言うと、Sketchは恐らく開発の初期段階ではこれらの多くの機能はありませんでした。そして将来的にはFigmaにもプラグインエコシステムが導入されるのは確実でしょう。 注意したいこと：プラグインがSketchに大きな利点を与えた一方で、それらが何かしらの落とし穴にもなりえます。それらは新しいリリースの度に正常に機能しない傾向があり、Sketchチームは将来の開発者たちを遠ざけないためにも細心の注意を払う必要があります。 勝者：Sketch 理由：単純に、Figmaにはプラグインが全くない為   プロトタイピング AdobeXDと違ってSketchもFigmaもプロトタイピング機能が備わっていません。今のところFigmaには導入される予定はありませんが、Sketchには少なくとも基本的なプロトタイピング機能をもたらすCraft Pluginがあります。更にその人気でSketchは他のプロトタイピングツールとの幅広く統合することが可能です。 例をいくつか挙げると、InVision、 Marvel、Proto.io、Flinto、Framerなどがあります。これらを一緒に使うことによって簡単にデザインをインポートしてアプリを同期することができます。   現時点でFigmaと動作する唯一のアプリケーションはFramerです。似たようなツールのサポートが将来どのようになっているか述べるのは難しいですが、そのようなインターフェースが既に製作段階かもしれません。 勝者：Sketch 理由：Craft Pluginには説得力のあるプロトタイピング機能がありませんが、Sketchは多くのプロトタイピングサービスと統合している為   実データでの作成 Sketchが提供する数あるプラグインの中でいわゆる「content generators」というものを見つけるでしょう。その一例として、ダミーコンテンツでデザインを埋めることができます。 しかし、より興味深いことはこれらのちょっとした機能が様々な情報源から実データを引き出すことを可能にし、またJSONファイルの形で内容を挿入することさえ可能です。 これにより設計の初期段階でより情報に基づいた判断ができ、エッジケースも明らかにできます。   このカテゴリーで最も優れているのはInVisionのCraft Pluginです。 それを使ってある要素に内容を追加するとすぐに、1つのステップで簡単にその内容を複製・変更する事ができます。Craftではデザインのアセットを保存し、チーム内で共有したり又は自動的にスタイルガイドの作成も可能です。 他の機能やオプションの中でも、SketchのCraft Pluginでは要素を複製し、同時に他の内容を追加することができます。   Craftよりは優れてはいませんが、似たような機能を持つプラグインがもう数個あります。Sketch Data Populator、Content Generator 、 Day Playerがそうです。 Figmaにはまだそのような機能はありませんが、時間の問題だと思います。Adobe XDが少し前に適応したようにアプリにその機能を統合するのか、もしくはプラグインシステムに依存するのか、どちらの手段をとるか興味深いところです。 勝者：Sketch 理由：Sketchでは様々なプラグインで備え付きの機能の不足を補い、簡単に実データを使用できる為   バージョニング 私がいつも行っていることの1つは、始めの頃のデザインがどのような感じだったか見るためにCommand+Zを使って変更点を1つ1つ元に戻すことです。評価の基準を持つか、新しいイテレーションをベースとして複製するかのどちらかです。Figmaはブラウザ上の限られたリソースのためここで行止まりと思うかもしれませんが、実際はSketchに劣ってはなんかいません。 どちらのアプリでも古いバージョンをブラウズして復元する事ができ、自動的に保存されます。しかしながら、Sketchのインプリメンテーションは理想とはかけ離れていて、どこから始めるかもわかりません。何といっても時間がかかるのです。   実際に閲覧できる前にバージョンを復元しなければいけなかったり、ハードドライブ上でスペースを無駄にする結果になるかもしれません。さらに言えば、クラウド上で(Dropboxを介してなど)複数の人が同じファイルで作業している時に簡単にダメになってしまう可能性があります。 Figmaでは瞬時に前のバージョンを復元する事ができ、複数の人が同じファイルを編集している時はそれぞれの人の変更を分離できるので役に立ちます。それから前の状態に戻ったり、新しいアイデアの出発点としてバージョンを復元することができます。 勝者：Figma 理由：Sketchのバージョニングは不完全過ぎて勝敗は明らかです。   テキスト機能 他の点と同様に、どちらのアプリケーションでもテキスト操作はかなり似ていますが、いくつかの違いは言及する価値があります。デフォルトによってFigmaではGoogle Fontsからでしか選択できないのですが、単純にインストーラーでシステムォントにもアクセスできます。 私が常にSketchに物足りなさを感じる部分はテキストレイヤーのボーダーの位置の変更機能です。ここでは「中心」だけが唯一の選択しです。Figmaにはその他にもシェイプレイヤー用であるかのごとく「内側」と「外側」が選択できます。 左：Figmaでは、テキスト枠内の垂直の位置（上）が設定でき、さらにボーダーの位置のオプションがある（下） 右：SketchではOpenType機能が適用される   さらにFigmaではテキストを垂直に配列する設定ができる為、枠内で垂直に中央揃えすることが容易です。対照的にSketchではより多くのタイポグラフィのオプションがあり、スモールキャップス、古い形式の図形、スタイルの選択肢や合字（フォントでサポートされていれば）等のOpenType機能が適用できます。 勝者：引き分け 理由：どちらのアプリケーションもそれぞれ違った利点があります。Sketchの方がその進化したタイポグラフィオプションで少しリードしていますが、完全な勝利にはまだ不十分です。   結論 簡単に各アプリの長所をおさらいしましょう。 Sketchの良い点 キーボードのアクセシビリティがより良くサポートされている プラグインとプラグインエコシステムがある サードパーティツールとサービスを統合可能 ファイルタイプとエクスポートオプションが豊富 複雑なプロジェクトを1つのファイル（ページ付き）にまとめることが可能 Sketchでは簡単に実データを使える より洗練されている   Figmaの良い点 ブラウザベースなので、世界中どの場所からどのプラットフォームでも使用可能 リアルタイムで共同作業できる ファイルの共有が簡単 ベクトルマニピュレーションが優秀（vector networksを介して） レスポンシブデザインオプションがより優れている（constraint機能により） コンポーネントのライブラリを作成しチームのメンバーと共有可能 アートボードがより強力   今後の展望 2013年のAdobe Fireworksの廃止はUIデザインツール界に大きな空白を残しましたが、Sketchがすぐにその空白を埋めてくれました。 Sketchが大成功を収め、その人気は主なライバルであるPhotoshopに徐々に迫り、ついには昨年インターフェースデザイナーのユーザー間における調査「the tool of choice」でトップの座に輝きました。 Sketchは恐らくWindows版があればより成功したでしょうが、他のツールにも問題はあります。Affinity
アプリデザイン

情報セキュリティとは｜これだけは押さえたい基礎知識・決定版

この記事では、IT/WEBをメインに働いている人は絶対に知っておかなければいけない情報セキュリティについて解説します。 おそらく多く人が、会社の導入研修として情報セキュリティの講義を受けているでしょう。しかしいざ実務ではあまり気にしていないという人も多いのではないでしょうか？これを機に改めて情報セキュリティについての認識を改めるようにしましょう。   なお本記事は、TechAcademyの法人向けIT・プログラミング研修での実績をもとに紹介しています。   田島悠介 今回は、プログラミングに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 情報セキュリティについて詳しく説明していくね！ 大石ゆかり お願いします！ 目次 セキュリティとは 情報セキュリティの7要素とは 脅威とは 情報セキュリティ対策の具体例 情報セキュリティに関する認証制度   セキュリティとは セキュリティは3つの要素で構成されています。 情報セキュリティ コンピュータセキュリティ ネットワークセキュリティ の3つになります。詳しく解説していきます。   情報セキュリティとは コンピュータやインターネットを安全に、安心して使うための対策です。日本の製品の規格を定めるJISおよび国際標準化機構のISOでは、 情報にアクセスできる人の制限 情報の欠損の防止 情報が必要な時に問題なく使える状況 という3つのポイントを維持することが定められています（JIS Q 27002: ISO/IEC 27002）。   コンピュータセキュリティとは コンピュータを破損や破壊、間違った操作、不正アクセスから守ることです。破損・破壊の防止は、地震など自然災害からコンピュータを守ることはもちろん、盗難など悪意のある行為を防止することも含んでいます。 またコンピュータが使える場所へのアクセス制限や、ケーブルなど周辺機材の安全を確保することも重要です。不正アクセスには情報の改ざんやウイルスによるコンピュータの機能不全、メールを介した架空請求詐欺などが含まれます。   ネットワークセキュリティとは コンピュータや家庭内LAN、社内LANなどの内部ネットワークと、インターネットからアクセスできる外部との境界線を守ることです。ハッカーによる不正アクセスや、ウイルスの侵入を防止することが一般的ですが、組織内部からの不正アクセスや誤操作を防ぐことも含まれます。   [PR] Webデザインで副業する方法とは情報セキュリティの7要素とは 情報セキュリティ対策をするにあたり、維持すべきポイントのことです。JIS Q 27002（ISO/IEC 27002）では 機密性 完全性 可用性 の3点を、JIS Q 27001（ISO/IEC 27001）では加えて 正真性 責任追及性 信頼性 否認防止 の7点を維持すべきと定められています。   機密性 機密性とは認められた人だけが情報にアクセスし、操作できるようにすることです。アクセス制限には、 コンピュータの操作ができないようにする 情報そのものを見られないようにする 情報を見られても書き換えられないようにする など、いくつかの対策があります。これらの対策が不十分な場合、情報の改ざんや漏洩が発生します。 情報の機密性は、下記で解説する完全性、可用性とともに特に重要とされており、「情報セキュリティのCIA」と呼ばれています。 （※CIA: 機密性 (Confidentiality)、完全性 (Integrity)、可用性 (Availability)の頭文字）   完全性 情報が正確で改ざんや削除などが行われていない、完全な状態であることを指します。完全性の維持には、情報にアクセスできる人を制限する、情報の閲覧権限と編集権限を使い分ける、情報に行われた操作のログを残すなどの対策が必要です。   可用性 情報へのアクセスを認められた人が、必要な時に問題なく情報を見たり、操作したりできることです。サーバを管理してWebサイトがダウンしないようにするなど、情報やサービスが正しく提供されるための対策をします。 情報の可用性が維持できない場合、顧客がサービスを利用できなくなったり、必要な情報が使えずに社内業務が滞ったりといった問題が発生します。   真正性 情報を使用する人が間違いなく本人である、情報を処理するプロセスが不正に個人情報をだまし取るような偽物ではない、情報そのものが偽物ではないなど、「なりすまし」ではない状態のことです。 一般的な対策としては、特定の本人しかアクセスできないように、情報の入り口でIDとパスワードの入力を求めるシステムがあります。また情報の制作者を明確にできるデジタル署名も有効です。   責任追跡性 情報へのアクセスや操作が、誰によって行われたものかを明確にすることです。アクセスログを取れるようにしておくことは責任追跡性の維持に効果的で、いつ、だれが、どの情報に、何をしたのかを特定できます。   信頼性 行った操作に対して正しい情報・結果が返ってくることや、システムに故障がないことなど、情報処理が不具合なく行われる状態です。 例えばオンラインでの商品購入画面で、商品をカートに入れたにも関わらずその情報が反映されない場合、情報への信頼性が保てていない状態になります。   否認防止 情報の制作や操作をした人が、後程それらを否定できないようにすることです。例えば文書ファイルやメールにデジタル署名をつけ、制作者を明らかにすることは否認防止対策になります。また悪意のある情報の改ざんや破壊などを行った人が責任を否定できないよう、ログが残るシステムを作ることも有効です。   脅威とは 脅威とリスクの違い 脅威はリスクを引き起こす原因であり、リスクは被害や影響を与える可能性のことを指します。リスク分析とは起こってほしくないこと（脅威）の特徴や発生確率を決めることであり、情報セキュリティ対策で対応すべきものや優先すべきものを決定するのに役立ちます。   脅威の種類 脅威の種類は大きく3つです。 人的脅威 技術的脅威 物理的脅威 です。詳しく解説していきます。   人的脅威 人のミスや悪意のある行動によって、被害や影響が発生することです。人為的ミスにはシステムの誤操作や不注意による不具合があります。例えば メールの誤送信やサーバ内のデータの削除 パソコンやSD・USBメモリーの紛失 システムの脆弱性の見落とし などが防ぐべき脅威です。 悪意のある行動には、情報漏洩やデータの改ざんなどが挙げられます。またIDやパスワードなどを不正に聞き出すソーシャルエンジニアリングは悪意のある人的脅威の代表です。 人的脅威を防ぐには、ミスや不正行為を防止するシステムを作ることも大切ですが、情報を使う人の情報に対するモラル教育も重要です。   技術的脅威 不正なプログラムなど、技術的に作り出されたものによって発生する脅威です。最も有名なのはコンピュータウイルスなどマルウェアによる被害です。マルウェアとはパソコンに有害な操作を行ったり、情報漏洩などの深刻な問題を発生させたりするプログラムの総称で、以下のような種類があります。 ウイルス：プログラムやパソコンに寄生して広がり、システムの挙動に悪影響を及ぼす ワーム：単体で増殖を繰り返し、ネットワークを介して広がり、パソコンや情報に悪影響を及ぼす トロイの木馬：侵入先のコンピュータで、コンピュータの使用者が意図していない操作を秘密裏に行う スパイウェア：感染先に保存されている情報を盗み、外部に送信する その他の技術的脅威には、なりすましメールによって偽のWebページへ誘導し、個人情報をだまし取るフィッシング詐欺があります。また標的のサイトやサーバに大量のデータを送り、システムをダウンさせるDoS攻撃（ドス攻撃）も有名です。 技術的脅威も人的脅威同様、被害を受けないためのシステムを構築することが重要です。同時に送信元の分からないメールを開かないなど、情報使用者の危機管理教育も不可欠です。   物理的脅威 情報システムやコンピュータに、物理的に発生する脅威を指します。物理的な脅威とは、 機材の老朽化 故障、地震・台風などの自然災害や事故による機材破損 機材の意図的な破壊、盗難 パソコンやサーバがある施設への不正侵入 など、悪意のある人によって発生する脅威もあります。 物理的脅威の防止には機材の定期的なメンテナンスのほか、自然災害を想定した機材環境の整備や自然災害対策マニュアル作り、パソコンのID・パスワードの認証設定、機材のある部屋へのアクセス制限などが有効です。   情報セキュリティ対策の具体例 対策には比較的簡単に導入できるものから高度な技術を要するものまで、さまざまなものがあります。また目的によって適切な対策は異なります。リスク分析を行い、優先すべき脅威に対して簡単なものからでも導入していくことが大切です。   ベーシック認証 IDとパスワードによって情報利用者にアクセス制限をかける方法です。例えば パソコンやスマートフォンの使用時 Webサイトの特定のページへのアクセス時 Wi-Fiなどの無線接続時に入力を求める 名前の通り基礎な機能なので簡単に導入できますが、セキュリティレベルは低いです。   ファイアウォール インターネットを介した不正アクセスから、会社や家庭の内部ネットワークを守るシステムです。ファイアウォールはインターネットで送られてきた情報が安全なものかを判断し、不正なものであった場合は管理者に通報します。   物理的なアクセス制限 物理的脅威に対する対策です。許可された人のみがパソコンやサーバを使えたり、機材のある建物にアクセスできたりなど、機材を破壊や盗難から守ることに効果的です。   離席ロック機構 パソコンなどから一定時間離れる場合、自動的にロックがかかるようにすることです。組織内で運用する場合は、「〇分経ったらスリープ状態になる」など、具体的な基準を設けることがポイントとなります。   筐体管理 パソコンそのものに施す、破壊や盗難の防止策です。例えばパソコン本体のカバーが開けられたことを通知する警報の設置や、ケンジントンロックによる対策があります。ケンジントンロックは機材がワイヤーから切断されたときにブザーが鳴る仕組みで、家電量販店などでも使用されている盗難防止策です。   従業員に対する情報セキュリティ教育 情報を扱う人への教育は、セキュリティ対策システムの構築と同様に重要です。教育内容としてはパソコン、SD・USBメモリーの取り扱い方法や個人情報の扱い方、情報を使用するにあたってのモラル教育などがあります。   子どもに対する情報セキュリティ教育 タブレットやスマートフォンが身近な現在、子どもでも簡単に情報にアクセスできます。インターネットの脅威から子どもを守るために親ができることもありますが、子ども本人に自己防衛を教育することも、非常に重要です。 よくわからないメールやリンクを開かない、怪しいWebサイトにはアクセスしない、SNSに個人情報を出さないなど、大人にとって当たり前のことから教えることが大切です。   情報セキュリティに関する認証制度 情報セキュリティ対策が正しく行われていることを証明する方法として、認証制度があります。制度を管理している組織・団体が設定している条件をクリアすることで承認されます。 情報セキュリティ対策で何から始めるべきか分からない場合、認証制度への登録を目指すのが効率的です。認証制度の基準はそのまま対策すべき項目に繋がります。また承認状態を維持するために、定期的なメンテナンスも行います。認証制度の要綱には、情報を扱う人に対する教育も含まれているので、システム面の補強だけでなく、情報利用者のモラルも向上させることができます。 下記で紹介するISMSマークとプライバシーマークは、有名な認証制度です。認定されるとマークをWebページや名刺で使用することができ、組織内外に情報セキュリティ対策の取り組みや、信頼性をアピールすることができます。   ISMSマーク 個人情報などすべての情報資産に対し、セキュリティの適切な運用ができている法人・組織に付与されます。企業内の一部の組織（営業部、総務部など）単位での取得も可能で、2020年2月現在、公官庁や教育機関を含め6000の団体がISMSマークを取得しています。 承認の要件はJIS Q 27002: ISO/IEC 27002が定める情報セキュリティの要件同様、情報の機密性・完全性・可用性の維持がなされていることです。ISOは国際標準規格なので、ISMSマークは世界的に通用します。マークには3年に一度の更新審査と、毎年の維持審査があります。   プライバシーマーク 個人情報の取り扱いが適切な法人や組織に付与されます。ISMSマークとの違いは対象としている情報の範囲で、プライバシーマークは個人情報にのみ焦点を当てています。適用範囲は企業全体となるため、取得した場合は個人情報を扱っていない部署であっても、プライバシーマークの基準に沿った情報の管理・運営を行わななければなりません。 個人情報保護への意識が高まる中、取得団体は増加傾向にあり、2020年2月現在は16,400社が登録されています。しかし適用範囲はISMSマークと異なり、日本国内のみです。マークは2年ごとに更新審査があります。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、従来の講義型研修とは違い、実務を想定したカリキュラムで実践的スキルを短期間で確実に身につけられる法人向けオンラインIT・プログラミング研修を展開しています。 1名〜数百名規模・業界を問わず、500社以上の企業様の研修を実施しています。 受講生一人ひとりに現役エンジニアのメンターが付き、皆様のニーズにあったサポートを行います。学習時の「わからない」を確実に解消いたします。
プログラミング

HTMLでラジオボタンとチェックボックスを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、ラジオボタンとチェックボックスを表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ラジオボタンとチェックボックスを表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力フォームの選択ボタン 入力フォームでよく見かける選択ボタンに、ラジオボタンとチェックボックスがあります。どちらも<input>タグにtype属性を指定することで簡単につくることができます。 <input>タグについては HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法 をご覧ください。 ラジオボタン、チェックボックスは以下のタグで表示することが可能です。 ・ラジオボタン  <input type=”radio”> 選択肢のなかから、ひとつだけを選択するボタン （※同一name属性内で、一項目しか選択できない） ・チェックボックス  <input type=”checkbox”> 選択肢のなかから、複数選択ができるボタン （※同一name属性はひとまとまりのデータとして扱われる） ・value属性 選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。 ・name属性 要素（ここでは<input type=”●●”>）に名前をつけて、なんの要素（選択ボタン）であるかを指定します。   大石ゆかり typeを使うと他にもいろいろ設定できるんですかー？ 田島悠介 他にも送信ボタンであったり、文字を入力できるフォームも簡単に作れるんだよ！ 大石ゆかり へぇ〜じゃあアンケートページとかでよく使われてそうですね！   それでは具体的な実装方法をみていきましょう。   ラジオボタン ラジオボタンという名前は、昔の自動車に搭載されていたカーラジオが、ひとつの局のボタンを押すと、他の局のボタンが選択できない仕様だったことから来ているそうです。 ラジオボタンは選択肢のなかから、ひとつだけを選択する入力ツールになります。   <input type=”radio”>にname属性を”gender”、valueを”male”と”female”に設定して性別選択ボタンをつくりましょう。タグの終わりには、実際にブラウザで表示される項目名(男性・女性)を書きます。選択肢の値(value)が”male”と”female”の、”gender”という名前(name)がついたラジオボタン（<input type=”radio”>）です。 <input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性   これでどちらか一方を選択できるボタンができました。   上記のHTMLをコピー&ペーストして、もうひとつラジオボタンをつくってみましょう。ここでは、Webページの訪問者からサイトを知った経緯を知りたいと仮定して、選択肢の値(value)にサイトを知るきっかけとなった項目を設定し、”trigger”という名前のついたラジオボタンをつくります。 <input type="radio" name="trigger" value="facebook">facebook <input type="radio" name="trigger" value="twitter">twitter <input type="radio" name="trigger" value="hatebu">はてなマーク <input type="radio" name="trigger" value="syoukai">知人からの紹介   今度は、”gender”と”trigger”の2つの選択ツールができました。 このとき、name属性を”trigger”に書き換え忘れて”gender”のままにしておくと、”gender”と名付けられたすべての項目「男性、女性、facebook、twitter、はてなブックマーク、知人からの紹介」から、どれか一つの項目を選択することになってしまいます。 複数の選択群をつくる際には、必ずカテゴリーごとにしっかりとname属性を分けるように注意しましょう。   [PR] Webデザインで副業する方法とはdisabled属性 disabled属性は、フォーム部品を無効化することができます。 この属性で指定することで、フォーム部品の選択や書き換えを行うことができます。 用途の目的としては、同じフォーム流用するが、ユーザーの選択肢によってdisabeld属性を使用し一部の選択肢の書き換えを禁止する時に使用します。 disabled属性の実例 <!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body> <!-- 性別選択 --> <input type="radio" name="gender" value="male" disabled/>男性 <input type="radio" name="gender" value="male"/>女性
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでrole属性を使ってアクセシビリティを高める方法をを現役デザイナーが解説【初心者向け】