デザインワークに使うツールといえば、Adobe社のPhotoshopやIllustratorが最も有名です。デザイナーの求人情報を見ると、募集要項に「PhotoshopやIllustratorの使用スキル」が必須の条件として記載されており、クリエイティブワークを行う上で必要不可欠なツールと言えます。

しかし近年、Webデザイナーの求人欄には「Figmaの開発経験者歓迎」など、Figmaを推奨する記述を見かけるようになり、業界の必須ツールも変わりつつあることが感じられます。Figmaと同様の機能や役割を持つツールとしてAdobeのXDもありましたが、2023年に単体での販売が終了したため、Figmaの存在感がますます強まっています。
  
## Figmaとは
  
FigmaはUIやUXデザインに適したプロトタイプデザインツールです。WebサイトやWebアプリを作成する際、ボタンを押したときの画面遷移やメニューの開閉など、複雑な動きが求められます。また、切り替え時のフェードインやアニメーションなども演出としてよく使用されます。

通常、こういったアクションを表現するにはプログラムを組む必要がありますが、Figmaではグラフィック作成の段階からこれらの動きを再現できます。さらに、データを共有する機能があるため、関係者と完成イメージを共有しやすいのも利点です。

Figmaはブラウザ上で動作するため、アプリのインストールが不要で、インターネットに接続されたパソコンさえあれば使用できます。このため、環境に依存せずデザイン作業を進められるというメリットもあります。

## 実際にFigmaを使ってみた感想


私は長年Webデザイナーとして、主にIllustratorでデザインし、写真や画像の加工はPhotoshopで行ってきました。Figmaには業務で触れたことがある程度だったため、今回はその違いを確認するために実際にFigmaを使用してみました。

全体的な使用感としては、ツールの配置が異なるため少し戸惑う部分もありましたが、Illustratorに近い印象でした。Illustratorが使える人であれば、比較的簡単に慣れるでしょう。しかし、いくつかIllustratorと明確に異なる点がありましたので、挙げていきます。

### デフォルトで紙媒体を作成する機能が無い

FigmaはWebサイトやアプリなどのデジタルメディアのコンテンツをデザインするためのツールであるため、印刷物を作る機能がありません。そのため、紙媒体のデザインをする場合、フレーム（アートボード）のサイズを紙の規格のサイズで指定する、余白設定やトンボ（裁断時の目印）の設定をデザイナーが意図的に追加する手間が生じます。

ただし、プラグインを利用することで、紙媒体の設定も可能なようです。しかし、色指定に関しては、CMYKモードをIllustratorほど詳細には設定できません。そのため高品質が求められる場合はIllustratorのほうが適しています。Figmaはインターネット接続が可能であればどのパソコンでも編集が可能なため、頻繁にテキストを編集し、そこまで高品質が要求されない場合の物はFigmaの方が便利です。

### パスファインダー機能について

パスファインダーとは、複数の図形を組み合わせたり、重なり部分を切り抜いたりする機能で、デザイン作成によく使用されます。
結論から言うと、収納されている場所が違うだけでIllustratorと、ほぼ同じことができます。

 ![](https://cont.sterfield.co.jp/uploads/img_A_1_1378b85707.png) 

しかし、Illustratoreのパスファインダーにある「分割」に相当する機能がありません。

 ![](https://cont.sterfield.co.jp/uploads/img_A_2_45184b55ef.png) 

そのため、図形を複数のオブジェクトとして使いたい場合は、コピーを用意してそれぞれ切り抜きの設定を変えて作成する必要があり、少し手間がかかります。


### ペンツールでのパス描画

IllustratorやFigmaは基本的にベジェ曲線を制御して図形を描きます。そこでペンツールを使って図形を描くことを試してみました。 今回はフリー素材のサクランボのイラストを下絵にしてペンツールで描いてみました。

先ずはillutratorで描きます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_1_0c343f8462.png) 

ペンツールで先ずは始点となる頂点を選択しクリックし、ドラックをすると線が曲線になります。そして次の頂点を選択して下絵の輪郭をなぞります。
このようにして3つの図形を描きます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_2_873e4b36c9.png) 

茎の部分は緑色を指定して、実の部分にグラデーションを指定して色付けすます。最後に白い光沢描いて仕上げます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_3_bf1463921d.png) 

同様の作業をFigmaでも試してみました。

ペンツールが収納されている位置は違いますが、Illustratorで行う作業と同じで特に違和感なく作業ができます。しかし、2つ目のオブジェクトを描いた時点でIllustratorとの違いに気が付きました。

 ![](https://cont.sterfield.co.jp/uploads/img_B_4_3ad2f76b6c.png) 

普通に描いていたのですが、この時点で2つのパスで1つのオブジェクトになる扱いでIllsutratorで言うところの複合パスになっていました。そのためこの状態でグラデーションを設定すると、オブジェクト全体にグラデーションが描画されてしまいます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_5_c1a0890346.png) 


どうやら、ペンツールを使用する場合、 ペンツールアイコンの上に表示される×のアイコンをクリックしない限り、描いた物は1つのオブジェクトとして扱われるようです。

 ![](https://cont.sterfield.co.jp/uploads/img_B_6_bf0edd4ef9.png) 


また、一度描いた図形を編集したい場合、Illsutratorなら頂点を選択すれば編集できましたが、Figmaの場合、描いたオブジェクトを選択してエンターキーを押して 編集モードにしてから編集するようです。
 ![](https://cont.sterfield.co.jp/uploads/img_B_7_ce745450f3.png) 


これらのことを知らないと、意図しない複合パスができてしまったり、編集したくてもできないという事態になりかねません。  
  
また、Illustratorと違い、1つの頂点を起点にして複数の線を描いて枝分かれすることもできます。これを利用して矢印の形も描くことができます。
 ![](https://cont.sterfield.co.jp/uploads/img_B_8_3e8d5b59cc.png) 




### テキストの変形について

 ![](https://cont.sterfield.co.jp/uploads/img_C_1_8219f2283f.png) 

デザインをしていく上で、時にはテキストを変形してグラフィカルに見せることもあります。
このようなときはIllustratorの場合、先ずは普通にテキストを入力しは標準に備わっているワープツールを使うケースが多いです。

今回はワープツールの円弧を使って下方向に湾曲するテキストのサンプルを作ってみました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_2_08a797d87f.png) 

これと同じことがFigmaでできるか試してみました。

先ずはIllustratorと同じようにテキストを入力します。このときに気が付いたのですが、Figmaはパソコンにインストールされているフォントではなく、
googleフォントなど、オンライン環境で使用できるフォントデータを読み込んでいるようです。このような点もIllustratorとの違いを実感しました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_3_e396dbcb00.png) 

ただ、ワープツールに相当する物はFigmaの標準の機能ではないようです。調べてみるとプラグインで提供されており、プラグインで変形できるみたいなので実際に使ってみました。

今回は「Warp IT」というプラグインを使用してみました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_4_cf64d3c0cd.png) 


テキストを選択してプラグインを起動すると図のように編集画面が出ますこの画面で頂点を編集して、「APPLY RESULTS」ボタンを押すと編集した通りに形ができます。

 ![](https://cont.sterfield.co.jp/uploads/img_C_5_1a01f2c368.png) 

編集の仕方はIllustratorと違いますが、それでも問題なく加工ができそうです。しかし、作成してから気が付きましたが、作成した物はテキストデータ
ではなく、パスデータに変わっていました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_6_d708119777.png) 

この点、Illustratorはテキストデータの形を保持しているので別の文字に変える編集も可能です。なので、更新の可能性が高い物はIllustratorで作成した方がよいと思います。

 ![](https://cont.sterfield.co.jp/uploads/img_C_7_ec1e911ba1.png) 


## まとめ

Figmaを使用してみて、Illustratorでできることは概ねFigmaでも可能だと感じました。また、Figmaはインターネット環境があればどのパソコンでも使える手軽さがあり、導入コストが低いのも魅力です。  
  
ただし、IllustratorにはIllustratorの利点もあり、どちらか一方に代替されるのではなく、用途によって棲み分けられていく印象でした。  
  
今後のWeb業界でのツールの主な使い分けとしては、  
  
画面デザインはFigma  
写真加工はPhotoshop  
ロゴなど精密なデザインはIllustrator  
  
といった形になるのではないでしょうか。時代の変化に応じて、新しいツールも柔軟に取り入れていきます。


25307319_m.jpg

Figmaが注目される理由とは？WEBデザイナーが使ってみた感想

近年、生成AIの技術は急速に進化し、様々な業務に活用されています。これはITの開発現場でも同様で生成AIにプログラムを書いてもらい、業務の効率化に繋げる動きがあります。
  
生成AIと言えば、ChatGPTを使用する話しはよく聞きますが、同じくよく話題に上がる生成AIとして、Claude AIの名前もよく聞きます。Claude AIは、一度に扱える文字数も多い話を聞き、WEBページ全体などの文字数が多いコンテンツも作成できるか、また精度はどの程度なのか実験しました。  
  
Claude AI  
https://claude.ai/new  
  
参考：  
https://mijinko.co.jp/media/chatgpt-claude-difference/

## Claude AIとは  
  
Claude AIは、Anthropic（アンソロピック）というAI研究団体によって開発されました。こちらは、ChatGPT で有名なOpenAI社に所属していた元社員が2021年に立ち上げた企業です。同社のやり方に異を唱え、退社後に設立しました。倫理的なAI開発に強いこだわりを持ち、ユーザーの意図を深く理解し、安全で信頼性の高い対話を提供することを目指しています。

回答内容も、ユーザーの意図をより正確に理解し、適切な応答を生成するために設計されています。  
  
## 実験内容

Claude AIの能力を検証するために、弊社で運営するコンペナビのLP「自治体向け動画コンテスト主催サポート」を最近のトレンドであるBENTO UIの形にする実験をしました。  
  
コンペナビ:  
https://compe.sterfield.jp  
  
コンペナビLP:自治体向け動画コンテスト主催サポート  
https://compe.sterfield.jp/lp_jichitai  
  
また、弊社開発のWEBサイトなので、詳細なデータは手元にありますが、一般の視聴者と同じように通常の閲覧、および右クリックの「ソースの表示」だけで得られる情報のみを使用しました。これは技術者抜きでどんな物が作れるのか試したかったからです。

### 実験1：URLを使ってコーディング依頼
  
先ず、はじめにURLを指定して作る事を試してみました。  
  
「（コンペナビLPのURLを記載）のページをBENTO UIに作り変えてください。そのためのコードを書いてください。」
と依頼してみました。すると、返答の返答がありました。 

> 申し訳ありませんが、私はURLを開いたりウェブページの内容を直接確認したりすることはできません。そのため、指定されたページの具体的な内容を見ることができず、正確なBENTO UIへの変換を行うことは難しいです。  
> しかし、BENTO UIの一般的な構造に基づいて、自治体向けのランディングページをイメージしたBENTO UIのテンプレートを提案することはできます。以下に、そのためのHTMLとCSSのコードを示します。  
  
この返答から、Claude AIは直接URLを開くことができず、具体的にページ内容を確認できないことが分かりました。そして実際に生成されたコードをブラウザでレンダリングしてみたら、以下のようになりました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_1_ca709c375b.png) 

生成されたコードは、BENTO UIの基本構造を備えており、また、設定されているMETA情報を理解している様でした。

### 実験2：HTMLファイルを使ったコーディング依頼

Claude AIはChatGPT と違い、こちらがアップロードしたファイルに応じて返答を求めることができます。なので、コンペナビのLPで右クリックして「ソースの表示」でLPのHTMLをコピーしてHTMLファイルを作成しました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_7ad24841f0.png) 

そして、このHTMLファイルをアップロードし、「今 pasteしたHTMLをBENTO UIに変えてください。なるべく元のデザインの要素 色合いを取り入れてBENTO UIにしてほしい」と指示を出しました。  
  
すると以下のページを作ってくれました。  
 
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_2_7ba57ca19f.png) 
    
HTMLファイルを元に、より具体的なレイアウトを作成してくれました。もちろん細部の作りこみは必要になりますが、元のデザインの要素をしっかり認識した上で作成されているのが十分に分かります。  
  
### 実験3：詳細な修正指示を出してみる  
  
さらに、以下の修正指示を出してみました。  
  
>・元のサイトはスクロールするとMOVIEなど動くテキストがありますが、これらも再現してください。  
  
>・コンテスト事例紹介は各企業のロゴがスクロールする構造です。ロゴ（画像）の代わりに、100pxの赤いdivをいくつか用意してスクロールする構造にしてください。  
  
>・ヘッダーのメニューの項目はハンバーガーアイコン（3本の線のアイコン）を押すと表示・非表示に切り替える構造にしてください。
  
と3点の修正指示をしてみました。  
すると以下のページが生成されました。  

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_3_adc40b1594.png)   
  
静止画なので分かりにくいですが、今回はHTML、CSSだけでなくJavaScriptも生成され、実際にスクロールに応じてテキストが動いて出現するなどのアクションも再現されました。ただ、残念ながらスクロールについては意図した通りに作成されませんでした。
  
また、驚いたことにスマホのレイアウトになった際のハンバーアイコン(メニューの収納)の仕掛けも作成してくれました。  
  
 ![](https://cont.sterfield.co.jp/uploads/img3_2_d3744cd143.png) 
  
### 実験4：画像を指定して配置してみる  
  
次に元のサイトから使用している画像を抜き出して、実際に配置できるか試してみました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_685f06a92d.png) 

HTMLと同様に画像をアップロードして、  
  
> 今！自治体による動画コンテストが人気！の箇所で    
> - １募集で、 s1_1.png  
> - ２撮影＆投稿で s1_2.png  
> - ３受賞で s1_3.png  
>
> の画像を入れてください。  
  
と指示してみました。すると、  
  
改善コードが生成されました。
  
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_2_de3c195a71.png) 
  
また、コードの生成と合わせてサイズを調整する方法も教えてくれました。もっと細かく指示してクオリティを上げることもできそうです。

## まとめ
Claude AIは無料プランでは1日に対話できる回数が少なく、上記の作業も数日間を要しました。そのため本格的に業務に使うとなると有料プランに入る必要があると感じました。しかし、この欠点を除けばかなり便利なツールだと思います。単純に制作のスピードが上がりそうですが、技術者が不在でもかなり精度の高い物が作れそうです。  
  
生成AIの登場により、エンジニア、非エンジニアの垣根がなくなりつつあり、AIを使う頻度はこれから一層増すでしょう。最近では「プロンプトエンジニア」という言葉まで聞くようになりました。  
これからの時代、AIを使いこなす技術も必須のスキルと言えそうなので学んでいきます。

img_202450830__title.png

Claude AIを使ったBENTO UI変換実験レポート：非技術者もWEBページを作れる時代になるのか検証してみた

「WEBデザイントレンド　2024」　このようなキーワードで検索をすると、「2024年のWEBデザイントレンド●●選」  
などのよう記事が多く見受けられまます。これらの記事でトレンドであるテーマと実際のWEBサイトが紹介されています。  

また、記事をいくつか読んでいると、多くの記事で取り上げられるテーマがあることに気が付きます。私の主観になりますが、その観点から気になったWEBサイトをピックアップし、それぞれのトレンドについて考察してみました。  

## WEBクセシビリティ  

簡単にWEBアクセシビリティとは障害者差別解消法の一環として求められる対応で、障害の有無に関わらず全ての人が利用しやすい環境を目指すことが求められます。市役所などの公的機関については既に施行されていましたが、2024年4月よりその対象が拡大され、民間の事業者も対応が努力義務が求められるようになりました。  
  
我々WEB業界も例外ではなく、今後は「使いやすさ」と「美しさ」を追求したデザインが求められます。具体的に配慮すべき点についてはデジタル庁などでも紹介されていますのでご参照ください。  
  
デジタル庁　WEBアクセシビリティ導入ガイドブック  
https://www.gov-online.go.jp/useful/article/202310/2.html#c1
  
  

### 味の素株式会社  

 ![](https://cont.sterfield.co.jp/uploads/240531_img01_863d672458.png) 
https://www.ajinomoto.co.jp/  
  
キーカーラの赤をメインに白とのコントラストが効いた見やすいデザインです。記事のリンクなども大きめに作られており、分かりやすく使いやすい構成となっています。  
  
また、WEBアクセシビリティの観点から配慮すべきこととして指摘されている事について、「音声の自動再生をさせない」、「自動でコンテンツの切り替えを行わない」などが配慮が必要とされています。  
この点、動画やスライダーには分かりやすいミュートボタンや停止ボタンも設置されており、このような点もWEBアクセシビリティへの対応が伺えます。
  
  
### ANAホールディングス株式会社
 ![](https://cont.sterfield.co.jp/uploads/240531_img02_d93892d3e3.png) 
https://www.ana.co.jp/ja/jp/  
  
こちらも白とのコントラストが効いた見やすいデザインとなっております。また膨大なリンクもメニューアイコン内にまとめられており、整理された構造となっております。  
  
こちらでWEBアクセシビリティに配慮していると感じるところはボタンのテキストが「検索する」「●●を探す」など、動作を指す言葉を含めてボタンにしている点です。これは、視覚障害がある方はテキストの読み上げ機能を使ってWEBサイトを利用することから、必要な配慮が必要な点として上げられています。  
  
## Y2Kスタイル（デザイン）

Y2Kとはファッション業界から生まれた言葉で、 Year 2Kilo（1000）つまり、2000年のことを指します。90年代後半から2000年代初頭の流行の要素を取り入れた新たなレトロスタイルです。  
特長としては、明るく派手なネオンカラーや、メタリックカラーを多用としたデザインが多く見受けられます。また、当時はデジタルアートが広がり始めた頃でしたが今よりもマシン性能が劣るため、デジタルアート全般が粗目のドット絵で表現されてしまいます。しかしそれが現代の若者には新鮮に映るようで、このようなデジタルアートも特長の一つとされています。  
  
こういった要素を取り入れたWEBデザインもトレンドとなっているようです。  
  
### 株式会社スーパースーパー
 ![](https://cont.sterfield.co.jp/uploads/240531_img03_6295a51d89.png) 
https://supersuper.jp/  
  
アクセスすると大胆なアニメーションがあり、すぐに引き込まれます。  
カーソルに丸いアイコンが付いてきたり、しかもマウスを動かすと楕円形に変化したりなど細部もこだわっています。2000年代というと技術力の高さを競うように動的な仕掛け多く入れる風潮がありましたが、それを現代の環境で実践しているような印象を受けました。  
  
全体的にごちゃごちゃした印象ですが、マウスオーバーのアクションを大きくするなどの工夫があり使いやすさの対策もしっかりしています。
  
## Y3Kスタイル（SFデザイン）  

こちらは3000年という意味で、Y2Kを経て生まれたスタイルです。Y2Kはレトロなイメージに対して、Y3Kは未来志向です。つまり、サイバーやSFを彷彿とするデザインを指します。
WEBデザインで言えばメタバースやAIなどの影響を受けた近未来的なデザイン特長としては、3Dアニメーションを取り入れたデザインが多いです。  
  
技術力の高さという意味でY2Kと通じる点もありますが、Y2Kはどちらかというと、エネルギッシュな力強い印象を受けますが、Y3Kはスッキリしたスタイリッシュな印象を受けます。  
  
### SYNCRELY STUDIO  
 ![](https://cont.sterfield.co.jp/uploads/240531_img04_1256aaeb62.png) 
https://www.syncrely.com/   
  
メタリックな3Dアニメーションが印象的で引き込まれます。これだけで革新的なことをしているWEBサイトのように見えますが、よく見てみるとスクロールで反応して文字が出るなど定番の動きしかしていません。重要なグラフィック要素を効果的に見せていることがよくわかります。
  
## モバイル特化型サイト  

統一された名称が無かったので、このような見出しでまとめましたが、スマホサイトの構造をそのままパソコンで使用するデザインも増えてきました。具体的にはパソコンで見たときは、メインコンテンツを画面中央に配置し、パソコンならではの大きな画面は主に装飾に使う構造で制作しています。近年ではスマホでホームページを見る機会の方が圧倒的に多く特に、BtoCのサービスではトレンドの一つとなっています。
  
### サントリー ほろよい  

 ![](https://cont.sterfield.co.jp/uploads/240531_img05_1258add9ee.png) 
https://www.suntory.co.jp/rtd/horoyoi/  
  
メインコンテンツは完全にスマホサイトと同じ構成で作りパソコンでは大きな余白はパッケージを描きブランドイメージをより印象つけています。制作面を考慮すると、工数を減らし効率化できそうです。
  
### ネオ居酒屋  
 ![](https://cont.sterfield.co.jp/uploads/240531_img06_e7061dbf7d.png) 
https://www.dot-st.com/nikoand/cp/neoizakaya
  
こちらも同じくメインコンテンツは完全にスマホサイトと同じ構成です。パソコンでは大きな余白にボタンを設置することでアクセシビリティを高めています。
  
## Bento UI  

グリッド状にコンテンツをレイアウトし、情報を分かりやすく整理したデザインです。まるでお弁当箱におかずを詰めるように見えることから名づけられました。この構造のメリットはパソコンの大画面でも見やすく、スマホで見る場合はカラム落ちさせるだけで対応できるのでパソコンでもスマホでも無理なく表現できます。
  
### ニコアンド（niko and…）  
 ![](https://cont.sterfield.co.jp/uploads/240531_img07_1589d693e4.png) 
https://www.nikoand.jp/
  
ポップな見た目と多い情報量、そして、アニメーションと多くの要素があるのに、ごちゃごちゃした印象もなくむしろスッキリした印象です。UIの特性をうまくいかした好例なのでしょう。  
  
### アーク ペーパードライバースクール
 ![](https://cont.sterfield.co.jp/uploads/240531_img08_3ed94d60ec.png) 
https://arc-pds.com/
  
こちらもUIの特性を上手く活用し情報をスッキリ見せることに成功しています。Bento UIはパソコン、スマホもどちらにも適した構造と言えそうです。
  
## まとめ
今回WEBデザインのトレンドを調査していい刺激になりました。普段の業務では技術の向上に目が行きがちですが、こうしてトレンドを調査するといいアイディアが浮かびます。
これからも技術向上と並行して、新しいデザインを取り入れることでより魅力的で使いやすいWEBサイトを提供できるよう努めていきます。


#### 参考記事
  
ミニナレ WEB制作会社シスコム：  
https://www.gohp.jp/blog/design/3952/  
  
株式会社ルート・シー:  
https://www.root-sea.co.jp/blog/knowhow/trend-design2024-1/  
  
WEBブランディングの株式会社フィールビー:  
https://feelbee.jp/news/news_branding/3664  


28964162_m.jpg

WEBデザインのトレンド調査

2024年4月1日より、障害者差別解消法の改正内容が適用され、障害がある方への「合理的配慮」が義務付けられました。これまでは、国や地方公共団体などに義務付けられていましたが、その適用範囲が拡張され、民間事業者に対しても適用されます。  
  
合理的配慮とは、例えば、  
  
・車いすの利用者が移動しやすいように手伝う。スロープを設置する。  
・窓口で、手話や筆談で意思の疎通をする。  
  
などが該当します。  
  
社会生活の中にある障壁を取り除き、全ての人が利用しやすいバリアフリーな環境を実現するため、負担が重すぎない範囲で対応することが努力義務となりました。これは接客業を行う事業者に限定された話ではありません。スターフィールドのようにWeb制作を行う事業者も対応が必要となります。  
  
Webサイト制作においては、「Webアクセシビリティを確保した開発」が求められます。  
  
##bアクセシビリティとは
  
Webアクセシビリティとは、すべての人がWebサイトにアクセスしやすく不自由なく使える状態を指します。そしてなるべく向上させていくことを理想としています。  
  
一般的に、Webアクセシビリティが確保できているとは、以下の状態を指します。  
  
・視覚障害あっても情報が伝わり、操作もできること。  
・キーボードだけで操作できること。  
・一部の色が区別できなくても得られる情報に欠損が無い事。  
・音声コンテンツや動画コンテンツを設置したさい、音声が聞こえなくても情報が分かること。  
  
もはやインターネットは情報インフラとして社会に欠かせない物となり、あらゆる方が使用します。もちろん五体満足の健常者だけでなく、高齢者や、視覚障害や聴覚障害などの障害者なども利用します。  
特に障害者に関しては、症状や程度は人それぞれです。そういった個々の状況に応じた対応が求められます。障害者に限定しなくても怪我や病気で一時的ハンデを負う人、加齢により視力の衰えが有る方も利用しやすい環境整備が必要です。  
  
こういったすべての人々がWebサイトを不自由なく利用できるようにすることが、ウェブアクセシビリティの要件です。なので、どんな事情がある方でも利用しやすい環境を提供することが、企業の社会的な責任として求められます。

また、この対応をすることは障害者のために負担を強いられる作業ではなく、使いやすい便利なWebサイトを開発することでもあり健常者にとっても有益なことです。
  

 ![](https://cont.sterfield.co.jp/uploads/photo1_76ee39cc16.jpg) 



## 実践プロセス
  
実際にどういう点に気を付けてコンテンツ制作をするべきか、政府広報オンラインや、デジタル庁のWebアクセシビリティ導入ガイドブックなどでも案内されていますので、紹介します。  
  
### 音声を自動再生させない
  
音声を自動再生することや強制的に再生させることは避けるべきです。もし、自動再生するのなら3秒以内に収め、3秒以上続く場合は利用者が止められるようにする必要があります。  
また、音声の流れるページや動画広告などで自動再生する場合は、一時停止またはミュートボタンを設置するべきです。  
  
### ポップアップなどモーダルウィンドーには終了ボタンをつける
  
Webサイトはマウス操作が難しい場合はキーボードだけで利用する方もいます。その際、モーダルウィンドーを開いた際、モーダルウィンドウを閉じるボタンがないとキーボードの操作だけではモーダルウィンドウからの離脱ができません。  

### 1秒に3回以上光が点滅するコンテンツは作らない
  
高速で光の点滅を繰り返すコンテンツは光感受性発作などを発生する恐れがあります。時には重大な健康被害が出ることもあります。  
アニメーションを制作するならその危険性も十分知っておくべきです。

### 自動でコンテンツを切り替えない
  
情報を受け取れる速度は人によって異なります。また、画面上に動き続けるコンテンツがあると、他の箇所の操作や閲覧を妨げられる利用者もいます。そのため、スライドショーなど、自動で切り替わるコンテンツなどがある場合は、一時停止、非表示、停止の機能を設置する必要があります。

### ロゴ・写真・イラストなどの画像が指し示している情報を代替テキストとして付与する

画像を使用する際はalt属性を設置して代替テキストの設置が必要です。代替テキスト」は画像で提供される情報に対して「同等の役割を果たすテキスト」のことで、画像の変わりにこのテキストが表示されても違和感がないことが望まれます。  
  
具体的には、以下になります。  
  
・画像がリンクの場合、代替テキストはリンク先を示す内容であるべき。  
・グラフや図表はその要約を記述するべき。但し、隣接するテキストに要約があるのなら、何のグラフや図表を示すだけでよい。  
・文字や（ロゴマークや見出しなど）を表現している場合、同じ文字を記述するべき  
・装飾など意味がない画像については空のaltを設置するべき  
  
また、文字数については制限がありませんが、スクリーンリーダなどで音声出力されることを考慮すると80字ほどを目安にするべきです。
  
### キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにする

マウス操作が難しい人はキーボードの操作に頼らず負えません。  
そのため、フォーカスインジケーター（選択中の要素に枠線）をつけるなどキーボード操作前提の作り方をするべきです。

### 色の違いだけで情報を伝えるのやめる
  
色覚に異常があり、正常に色が見えない人がいます。他えば赤色が分からない人が下記図を見ると全てが黒一色に見えてしまいます。


 ![](https://cont.sterfield.co.jp/uploads/sample1_f3f00e436c.png) 

  
このようなデザインでは必須項目が分かりません。  
  
### テキストはスクリーンリーダで音声として出力されることを意識する
  
視覚障害がある方、テストはスクリーンリーダなどを使ってテキストを音声として出力します。  
  
下記図の「日時」と「場所」の表記について、左側の方では、「日　時」「場　所」とスペースが空いています。スペースは全角のスペースを入力して作りました。  
  
 ![](https://cont.sterfield.co.jp/uploads/sample2_dfae820b43.png) 
  

この場合、スクリーンリーダで読んでみると、「ひ　とき」「ば　ところ」と呼んでしまいいます。  
  
もし、このようにスペースを空けるデザインをするなら、CSSを用いて広げないとスクリーンリーダが正しく読み取れません。
  
### リンク先を明確にする
  
リンクでどこか他のページへ移動する際どんなページへ移動するか明確にするべきです。例えば、以下のようなコンテンツの場合、左側のリンクは「詳しくはこちら」とだけ書いてあり、このボタン単体では移動先がどのようなコンテンツか分かりません。  
  

 ![](https://cont.sterfield.co.jp/uploads/sample3a_e9c460827b.png) 

  
視覚情報を使える人なら、テキストに付随したものと判断できるでしょうが、音声情報だけであったり、点字ディスプレイではその前後関係の把握が分かりにくい可能性があるのでリンクだけでどこに移動するか明確にした方がいいです。  
  
  
など、多くの事例があります。  
  
また、肝心なことはプロジェクトを進めるに辺り、一人担当者を決めて対応するのではなく、プロジェクトに関わる全員が対応策を検討し、メンバー全員でどんな対策を検討するべきか検討することが重要です。基本的には、JIS X 8341-3:2016などのガイドラインを参考にして開発を行い、チェックツールで確認しながら、向上させていくのが一般的ですが、結局のところ、最適解は人間が判断して決めなくてはいけないからです。  
  
例えば、画像には代替えテキストを設置するべき点を例にすると、ガイドラインでも示しているし、もし抜けがあったらチェックツールで指摘してくれます。なので、設置漏れは防げますが、どんな代替えテキストが適切かはコンテンツによって異なります。  
仮に犬と猫が映っている写真があったとします。これに入れる代替テキストは「犬の写真」或いは「猫の写真」とした方がいいのか、「動物の写真」とした方がいいのか、これはコンテンツ次第です。この判断は人間にしかできません。  
  
## まとめ
  
今回ガイドラインを見て指摘している点は、普段の業務で「既にやっている」あるいは、「できればやった方がいい」と言われている物が多かったのですが、強く意識していない点でもありました。  
しかし、より良い物を作る上ではしっかり意識しなくてはいけないなと思いました。今後はガイドラインを参考にしてより良いサービスを提供できるようにつ努めていきます。
  
#### 参考記事
  
政府広報オンライン：  
https://www.gov-online.go.jp/useful/article/202310/2.html#c1
  
  
デジタル庁　Webアクセシビリティ導入ガイドブック  
https://www.gov-online.go.jp/useful/article/202310/2.html#c1


240419_mv.jpg

Webアクセシビリティの義務化について調べてみました

先日、弊社で運営しているコンペナビで、「自治体向け動画コンテスト主催サポートプラン」というLPを作成し公開しました。  
  
<a href="https://compe.sterfield.jp/lp_jichitai" target="_blank">コンペナビ　自治体向け動画コンテスト主催サポート</a>  

私はこのLP制作につき、デザイナーとコーディングを担当し作成しました。  

この案件は弊社の社内案件であり、若手の営業担当がディレクションを行い、私が制作という関係で進めました。

最終的に納得のいく物が作成できましたが、振り返ってみると、企画段階でもっと詰めるべきことがあったし、ディレクターと作業者の間でどこまでが自分が主導して進めるべきか？を悩み、時にはお互いに担当分野を越境したような動きがありました。  

また、社内の関係者間でも、相談するべき点がありました。  
この案件を通して、改めてディレクションの大切さを実感し、反省を兼ねてブログに残します。


## プロジェクトのスタート

当初私のもとには図1の形でまとめられたワイヤーを渡されました。  

図1
<img src="/uploads/20231020_1_16304a854a.png" alt="企画書第一段階">

ワイヤーのコンテンツを大まかなに分けると以下の内容となっていました。  

第1要素　（メインビジュアル要素）
・キャッチコピー
・コンペナビの強み（3点）
・メインビジュアル
・お問い合わせへのリンク

第2要素　
・動画コンテストを開催する意義とサポートする旨の文章
・具体的なサポート内容を示すアイコン

第3要素　
・コンペナビの強み５点を強調する旨のコンテンツ

第4要素　
・コンペ開催のフローと料金について（コンペナビの内容のコピー）

第5要素
・実績

第6要素（最下部）
・お問い合わせフォーム


そして、  
・デザインはコンペナビと関連ある物。コンペナビの下層ページのようなイメージでコンペナビのコンテンツだとわかるものにしてほしい。  
・コンテンツの内容はワイヤーの内容にしたい。  
・この案で上長からGoサインが出ているから進めてもらいたい  

という話をいただきました。  

率直に私が思ったことはまだ、ワイヤーとして完成していないと感じました。 そこで先ず私はディレクターと話し、コンテンツを整理しなおしました。

私は主に  
・メインビジュアルに要素を詰め込みすぎ。  
・メインビジュアルのコンペナビの強み（3点）もこれだけで1つのコンテンツとして成立するし、補足的に見せる内容ではない。  
・全体的にテキストが多い。ビジュアルで見せる部分とテキストで説明する部分を意識した方が良い。  
・第3要素のコンペナビの強みもリズミカルに見せるなら3つくらいに絞った方がよい。  
・補足したい説明があれば、よくある質問というコンテンツにしてQ＆A方式で解説すれば見栄えもよい。  

と言う点を指摘しました。  

そこで、私とディレクターの間でワイヤーを作り直す作業が始まりました。  
このやり取りはプロジェクトを進める上で別に間違ってはいなかったでしょう。  
ただ、デザイナーの私がどこまで口を出すべきか悩みました。  


### 反省点：  
・デザイナーに話を持っていく前に、もっと詰めるべき点があったのでは？  
・制作部としては私がデザイン作業をしていると思っていた。役割を明確にするべきだった。  



## ワイヤー完成からデザイン完成迄

私はワイヤーの内容を大まかにレイアウトし、画面の構成を作る作業をしました。まだ、コンテンツについて考える余地もあり、
なるべくビジュアル要素を増やしてテキスト量を減らすこと、言い回しや見せ方を工夫することで省略できる点はないか、
コンテンツの順番を変えることでよりインパクトが出る見せ方にならないか？などの点を工夫して作成をしました。  


そして、何か思いつけば図2のように実際に簡易的なサンプルを作って、ディレクターに提案するという流れで作業を進めました。
こうして同意を得て、細部まで含めて作成する作業に入りました。  

図2
<img src="/uploads/20231010_2_7c3fe1e73b.png" alt="気可食第一段階">



このとき、デザインはコンペナビを踏襲してほしいという要望を聞いていたので、コンペナビの色使いやアイコンの使い方を見てそれに
よせる作業をし図3の形でまとめました。  


図3
<img src="/uploads/20231020_3_5982681709.png" alt="図3">

そして、私及びディレクター双方が納得し、コーディング開始の段階になりましたが、この段階で上長に確認をいただきました。 
  
この時頂いた意見は、    
・実績をもっと前面に打ち出す形の方がいい。  
・コンペナビの強みという点が取ってつけたように見える。  
・動画コンテストを開く意義について言っているコンテンツが少ない。  
  
というものでした。 

私は当初のワイヤーがテキストが多く、すっきり見せることを意識していた。しかし、この意識を強くしたため、必要であった要素を作業の過程で削っていました。
結果、このデザイン案は作り直しとなったのですが、相談するべきタイミングは明らかに間違えてしまいました。


### 反省点：
・作業を進める段階で完成像の指針がぶれてしまった。  
・部署内で相談するべきタイミングをもっと増やすべきだった。  


## 仕切り直しから完成まで

結局案件は、ディレクター側で再度ワイヤーから作り直すという話になり、2週間くらい経過したらディレクターから新しいワイヤー（図4）が渡されました。
ほぼ、最終系に近い形でいただきました。  

図4
<img src="/uploads/20231020_4_4c7ec1839f.png" alt="図4">

そして、ディレクターが参考にしたWebサイトのURLと一緒に渡され、この形で作り細部はコーディングをしながら直してほしい。
と言われてコーディング作業開始に至りました。  

ここまで完成されたものを渡されたら、デザイナー側でビジュアル要素を作る作業はほぼありませんでした。ただ、これをコーダー目線で見た場合、設計図としては
足りていない点があります。
例えば、  

・メインビジュアルはリキッドデザインになっているが、その他のコンテンツは幅が想定されていない。  
・コーディングで再現するのは難しい部分がある。  
・レスポンシブデザインを意識したとき、レイアウトの変化を意識していない。  

なので、画像の切り出し方に困ってしまったり、作りなおしになった部分もありました。
また、参考にしたWebサイトを見ると、スクロールしてコンテンツが表示されると簡単なアニメーションと共に表示される仕掛けが（フェードインするなど）がありました。  

これを導入するかディレクター側では答えを持っていませんでした。なので、私は「動画」を扱っている以上、動きのある演出の方が良いと提案し、動きを入れるようにしました。  

このような形で導入が決まったのでレイアウト構成の作業をしながらアニメーションを追加し、私の感覚で単調にならないように工夫しながら実装しました。
このため、ディレクター側で考える工数より多くの時間が私の作業段階で発生しました。

更に、完成間近のタイミングでコンペナビのページからこのLPにリンクを貼る依頼を受けました。  

ディレクターの指示では、  

・ヘッダー部分にテキストとボタンを設置してほしい。  
・コンペ全般の主催をすることを進めるページにリンクするボタンを設置してほしい  

という物でした。  
ヘッダー部分は問題なかったのですが、後者の依頼は、意図を聞いてみると新サービスなので、関連項目として見せたいとのことでした。  

このような意図であるならば、ボタンではテキストの説明が必要になるし、テキストを書けばページ本来の趣旨を妨害してしまう。だからバナーの形にするべきと説明しました。  
結果、バナー制作という想定してないコストもかかることになりました。



### 反省点：  
・コーダーに依頼するのであれば、このような形のワイヤーでよいが、デザインも含めて依頼するなら作りすぎている。  
・コーディング開始前に実現できるか検討した上で作業に入るべきだった。  
・コーダーに渡すワイヤーなら、動的なイメージについてどのようにするかも含めて検討して渡すべきだった。  
・全体的な見積もりがそもそも甘い。  


## まとめ
今回の案件はディレクター側も私のスキルを知っているという前提での依頼の仕方になっています。また、制作部としても比較的にリソースを割けるタイミングだから、着手したものでした。  
しかし、社内案件でも、社内の人を使うから無尽蔵に使える物ではありません。
      
成果物としては良い物が作れましたが、全体的に多くのコストをかけてしまいました。この点については、企画段階でチーム全体での相談が足りなかったことに原因があります。  
今後はもっとコミュニケーションを取り、よく相談しながら業務にあたっていきます。




Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #開発ブログ

2024/11/20

2024/08/30

2024/05/31

2024/04/19

2023/10/20