デザインワークに使うツールといえば、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アクセシビリティの義務化について調べてみました

<h2>はじめに</h2>
<p>これは非エンジニアがノーコードツールを使って、試行錯誤している様子をブログにしたものです。</p>
<p>ツッコミどころ満載かと思いますが、ご容赦ください。</p>
<h2>Chat GPTの可能性を模索</h2>
<p>鮮烈なデビューとともにその勢いは衰えることなく怒涛のリリースを行うChat GPT。業務効率改善に営業畑の人間が取り組むことにしました。</p>
<h2>参考にさせて頂いた情報</h2>
<p><a href="https://otona-life.com/2023/03/28/164745" target="_blank" rel="noopener">【革命的!】ChatGPT＋ノーコードで、Web会議後の議事録化が自動で作成＆通知可能に!?</a></p>
<p>まさにChatGPTに求めていたような使い方をされていて、かつノーコードで行えるということで自分も試してみることにしました。</p>
<h2>Make&amp;ChatGPT&amp;ちょこっとDeepL</h2>
<p><a href="/uploads-archive/2023/04/Make-Work-the-way-you-imagine.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18147" src="/uploads-archive/2023/04/Make-Work-the-way-you-imagine-1024x652.png" alt="" width="1024" height="652" srcset="/uploads-archive/2023/04/Make-Work-the-way-you-imagine-1024x652.png 1024w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-300x191.png 300w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-768x489.png 768w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-1536x978.png 1536w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-228x145.png 228w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine.png 1575w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>今回の肝がこの<a href="https://www.make.com/en/register?pc=mezack" target="_blank" rel="noopener">make</a>というサービスで私のような非エンジニアでもコードを書く必要がなく（ノーコード）APIを叩いたり、そのデータを別のサービスに連携させてたりといったことができるiPaaSサービスです。</p>
<p>iPaaSをChatGPTに聞いた答えも引用で貼っておきます。</p>
<blockquote><p>iPaaSは、Integration Platform as a Service（統合プラットフォーム・アズ・ア・サービス）の略称で、クラウド上で提供されるアプリケーション間の統合を支援するプラットフォームです。iPaaSは、データやアプリケーション、システムなどを簡単かつ効率的に統合するためのツールを提供し、APIやデータストレージ、メッセージング、アプリケーション接続、エンタープライズ・サービス・バス（ESB）などの機能を含みます。iPaaSは、企業がビジネスプロセスの自動化、データの統合、クラウドベースのアプリケーションの管理などを行うためのシームレスな方法を提供し、デジタルトランスフォーメーションを支援する重要な役割を果たしています。</p></blockquote>
<p>初めて使ったのですが、Make&#x2716;&#xfe0f;AI（chatGPTやDeep L）にとてつもない可能性を感じ、あれこれ試行錯誤してる瞬間がとても楽しかったです。</p>
<h2>テキストを要約してもらって通知</h2>
<p>実現させたのはテキストを要約してもらって通知という非常にシンプルなものです。</p>
<p>参考にさせて頂いた平岡さんは、</p>
<ol>
<li>Zoomをクラウドに録画</li>
<li>それを読みに行って文字起こし</li>
<li>そのテキストをChatGPTに要約</li>
<li>Googleドキュメント作成</li>
<li>Slackに通知</li>
</ol>
<p>というところまで行われています。</p>
<p>私は、普段使っているサービスにアレンジしつつ、シンプルにできるところまでやってみました。</p>
<ol>
<li>文字起こしまでをGoogleドキュメントの音声入力で会議中に文字起こし</li>
<li>そのテキストをChatGPTに要約</li>
<li>Chatworkに通知</li>
</ol>
<p>という3行程です。</p>
<p>makeでは、下記のようにサービスを並べます。</p>
<p><a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18150" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-1024x306.png" alt="" width="1024" height="306" srcset="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-1024x306.png 1024w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-300x90.png 300w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-768x230.png 768w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-1536x459.png 1536w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-2048x612.png 2048w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-228x68.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>APIキーの取得や詳細の使い方は割愛させていただきますが、Chatworkへの通知まで成功に至りました。</p>
<p><a href="/uploads-archive/2023/04/Chatwork-議事録.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-18148" src="/uploads-archive/2023/04/Chatwork-議事録.png" alt="" width="907" height="238" srcset="/uploads-archive/2023/04/Chatwork-議事録.png 907w, /uploads-archive/2023/04/Chatwork-議事録-300x79.png 300w, /uploads-archive/2023/04/Chatwork-議事録-768x202.png 768w, /uploads-archive/2023/04/Chatwork-議事録-228x60.png 228w" sizes="(max-width: 907px) 100vw, 907px" /></a></p>
<p>今回はツールの理解に時間を使い試作版ということで3行程レベルですが、様々なサービスの連携がイメージできました。</p>
<h2>工夫ポイント</h2>
<h3>DeepLを介してトークン数の削減</h3>
<p><a href="/uploads-archive/2023/04/テスト2-Google-ドキュメント.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-18145" src="/uploads-archive/2023/04/テスト2-Google-ドキュメント.png" alt="" width="306" height="414" srcset="/uploads-archive/2023/04/テスト2-Google-ドキュメント.png 306w, /uploads-archive/2023/04/テスト2-Google-ドキュメント-222x300.png 222w, /uploads-archive/2023/04/テスト2-Google-ドキュメント-228x308.png 228w" sizes="(max-width: 306px) 100vw, 306px" /></a></p>
<p>ちょうど4000文字強のとある会議の音声入力データで試していたところ、一度に送信できるトークン数が4097という制限があり、トークンのカウントは簡単にいうと単語の区切りと言われておりますが、日本語の場合、ほぼ文字数に近い数字がトークン数となり、上述のドキュメントでは以下の通り、4212トークンでエラーがでしまいました。<a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18144" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1024x652.png" alt="" width="1024" height="652" srcset="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1024x652.png 1024w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-300x191.png 300w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-768x489.png 768w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1536x978.png 1536w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-228x145.png 228w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make.png 1575w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>&nbsp;</p>
<p>そこで、英語に翻訳すると精度が上がり、トークン数も削減できるいうこと情報を覚えていたので、間にDeep Lを噛ませることにしました。</p>
<p><a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18146" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-1024x652.png" alt="" width="1024" height="652" srcset="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-1024x652.png 1024w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-300x191.png 300w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-768x489.png 768w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-1536x978.png 1536w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-228x145.png 228w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1.png 1575w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>そうすることで、4212トークンが、1567トークンまで圧縮され、理論上は、さらに倍の日本語文字数でも耐えられることが分かりました。</p>
<p>ただし、日本語の精度が落ちてしまっている感は否めず、現状だとそのままオフィシャルに議事録として扱うというよりは、自分のメモ書きの代わり程度に留めておくのが良さそうな具合だという結論になりました。</p>
<h2>処理時間</h2>
<p><div style="width: 1280px;" class="wp-video">
<video class="wp-video-shortcode" id="video-18142-1" width="1280" height="720" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-_-Make.mp4?_=1" /><a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-_-Make.mp4">/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-_-Make.mp4</a></video></div></p>
<h2>課題</h2>
<h3>1時間前後の会議に対応できるか</h3>
<p>現在APIの制約として、4097トークン上限があり、おおよそ時間にすると10〜15分程度の会議のテキスト量に相当しますので、少なくともこの5倍程度は受け入れられなければ実用に耐えられないと思います。</p>
<p>それを解消するために、一度Deep Lを介して、英語に翻訳しトークン数を下げるという試みをしましたが、日本語の精度が落ちてしまう点とそれでも上限トークン数の制約にはとても足りないので、テキストを分割するといった更なる工夫の必要。</p>
<h3>議事録のテキスト化の方法</h3>
<p>今回は、Googleドキュメントの音声入力をを利用して、そのドキュメントからテキストを抽出しましたが、ここもなるべく自動化したいですね。音声データから文字起こしですとここでもファイル容量の上限もあり、まだまだ、1時間レベルの会議に耐えるものではないので、試行錯誤いたします。</p>
<h2>まとめ</h2>
<p>議事録ツールを完成させる方向性もありますが、もっともっといろいろなことができるのではと、ワクワクしました。</p>

Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1024x652.png

chatGPTとmakeで議事録要約ツール試作版を作ってみた

> 女性向けのコスメを6商品、日本と台湾において通信販売を行われている株式会社ビズキ様。そして、株式会社ビズキ様と共に、二人三脚で越境ECを運営されているのが、台湾・東南アジア含めた、世界を網羅したパフォーマンステクノロジーネットワークを提供する、株式会社フォーイット様です。今回は、「メーカー」と「広告代理店」が、どのような座組で台湾向け越境ECを行われているのか、株式会社ビズキの安藤様と、株式会社フォーイットの高橋様にお話を伺いました。

## お互いに高めあいながら運営をする台湾越境EC
### 各社様の事業内容について教えてください。
<p><img loading="lazy" class="alignright size-medium wp-image-7784" src="/uploads-archive/lc/2021/06/bizki_product-300x169.jpg" alt="" width="300" height="169" srcset="/uploads-archive/lc/2021/06/bizki_product-300x169.jpg 300w, /uploads-archive/lc/2021/06/bizki_product-1024x576.jpg 1024w, /uploads-archive/lc/2021/06/bizki_product-768x432.jpg 768w, /uploads-archive/lc/2021/06/bizki_product-600x338.jpg 600w, /uploads-archive/lc/2021/06/bizki_product-1536x864.jpg 1536w, /uploads-archive/lc/2021/06/bizki_product-2048x1152.jpg 2048w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><span class="speaker" style="color: #ff9900;">安藤様</span>：<a href="https://bizki.jp/" rel="noopener" target="_blank"><span style="text-decoration: underline;">株式会社ビズキ</span></a>は、『綺麗になりたい全ての女性のために』をコンセプトに、女性の悩みに寄り添ったコスメの販売を行っている会社です。現在、全部で6商品取り扱っており、全て日本国内と台湾どちらでも販売をしております。最も長くご愛顧いただいており、当社の主力商品とも言えるのが、『<a href="https://bizki.tw/shopping_herbalrabbit" rel="noopener" target="_blank"><span style="text-decoration: underline;">ハーバルラビットナチュラルゲルクリーム</span></a>』というデリケートゾーンの黒ずみをケアする商品です。それに次いで人気を博しているのが、デリケートゾーンのにおいケアができる「<a href="https://bizki.tw/shopping_herbalraccoon" rel="noopener" target="_blank"><span style="text-decoration: underline;">ハーバルラクーンナチュラルミスト</span></a>」という商品で、既に日本国内ではハーバルラビットをも超える勢いでオーダーが入っています。最近リリースした商品では、タレントのぺえさんがプロデュースした、『Asettenai?（アセッテナイ）』という全身に使える制汗剤がございます。2020年の9月に発売開始したばかりなので、今後日本でも台湾でも力を入れていきたい商品です。</p>
<p><img loading="lazy" src="/uploads-archive/lc/2021/06/business_webridge-300x300.png" alt="" width="200" height="200" class="alignright size-medium wp-image-7786" srcset="/uploads-archive/lc/2021/06/business_webridge-300x300.png 300w, /uploads-archive/lc/2021/06/business_webridge-150x150.png 150w, /uploads-archive/lc/2021/06/business_webridge.png 400w" sizes="(max-width: 200px) 100vw, 200px" /></p>
<p><span class="speaker" style="color: #3366ff;">高橋様</span>：<a href="https://www.for-it.co.jp/" rel="noopener" target="_blank"><span style="text-decoration: underline;">株式会社フォーイット</span></a>は、2019年から海外向けのパフォーマンステクノロジーネットワーク「<a href="https://webridge.net/ja_jp" rel="noopener" target="_blank"><span style="text-decoration: underline;">Webridge</span></a>」をサービス提供しています。台湾からサービスをスタートとして、香港、シンガポール、マレーシア、タイ等の東南アジア圏で、アフィリエイトのサービス拡大をしております。おかげさまで、現地のアフィリエイター様の登録者数も増え、各国でも順調な推移を見せております。</p>
<p>越境EC支援サービスにおいては、広告だけでなく、ECモールへの出店や、LP作成、決済、配送まで幅広くご支援させていただいています。サービスについては、クライアント様が越境ECで販売開始するにあたり、足りない部分を当社で補うというところを意識して、海外に商品販売していくはどうすれば良いか、クライアント様と一緒に考えて支援させていただく体制づくりを心がけています。</p>

### 越境ECの運営には、日々様々な業務が発生しますが、どのようにして分担されているのですか？
<p><span class="speaker" style="color: #3366ff;">高橋様</span>：主に当社側で広告面の部分や、カスタマーサポートのお客様対応といった所を担当し、販売価格の設定から、物流、決済の部分に関して、安藤様に担当していただいています。</p>
<p><span class="speaker" style="color: #ff9900;">安藤様</span>：役割分担を明確にしているというより、お互いに意見を出し合いながら作業も協力し合って行っていると言った方が正しいかもしれません。例えば、広告まわりは基本フォーイットさんにお願いしていますが、フォーイットさんがクリエイティブに困ったときには、国内通販の方で効果の出ているクリエイティブを都度共有するようにしています。一方、フォーイットさんは台湾での実績が豊富なので、現地ではこういった訴求の方が良い、といったアドバイスなどをたくさんいただけます。このようにお互いの経験とノウハウを凝縮させてひとつのものを作り上げられるのは我々ならではかもしれませんね。</p>

## 戦略的なまとめ売りで、台湾での認知度up
### LPの訴求に関して、どういった部分が日本と異なりますか？
<p><img loading="lazy" class="alignleft size-medium wp-image-7781" src="/uploads-archive/lc/2021/06/forit_takahashi_bizki_ando-300x169.jpg" alt="" width="400" height="225" srcset="/uploads-archive/lc/2021/06/forit_takahashi_bizki_ando-300x169.jpg 300w, /uploads-archive/lc/2021/06/forit_takahashi_bizki_ando-1024x576.jpg 1024w, /uploads-archive/lc/2021/06/forit_takahashi_bizki_ando-768x432.jpg 768w, /uploads-archive/lc/2021/06/forit_takahashi_bizki_ando-600x338.jpg 600w, /uploads-archive/lc/2021/06/forit_takahashi_bizki_ando-1536x864.jpg 1536w, /uploads-archive/lc/2021/06/forit_takahashi_bizki_ando-2048x1152.jpg 2048w" sizes="(max-width: 400px) 100vw, 400px" /></p>
<p><span class="speaker" style="color: #3366ff;">高橋様</span>：LPの訴求に関しては、日本とあまり変わらない印象があります。もちろん国によって異なる部分ではあるのですが、海外進出されるクライアント様の中には、日本のLPをそのまま活用し、現地の言葉に変えて展開しているケースも御座います。そのため言語面の翻訳にこだわっていただいたほうが良いかと思います。例えば、台湾向けのLPであれば、台湾人に翻訳してもらうようにした方が良いです。クライアント様によっては、コストを抑えたいということで、台湾以外のご出身の方に翻訳してもらうケースがございますが、現地の方の言語でないとCVRが下がるケース見てきました。そのため弊社では、現地スタッフにLP翻訳はもちろん、海外からのお問い合わせ対応など、言語面のサポートもさせていただいています。</p>
<p><span class="speaker" style="color: #ff9900;">安藤様</span>：LPの訴求内容やクリエイティブはあまり日本と大きく変わらないのですが、消費傾向が日本と大きく異なる点については想定外でした。日本では定期通販が定着していて、定期でお得に購入するというのが一般的ですが、台湾だと「まとめ買い」の傾向が強いというのは意外な結果でした。最小で3本から多いものでは10本セットまでを販売しているのですが、中でも5本はよく出るイメージです。LaunchCartのほかに、ECモールにも出店しているのですが、そこでは10本セットもよく売れています。それを購入者本人だけで消費するのではなく、友達や家族とシェアをする文化が根付いてることも実際にやってみて初めて知りました。まとめ買いをした方が、当社の代わりに知人へ宣伝をしてくれるわけですから、ありがたい限りです（笑）</p>

### 実際、定期販売とまとめ売りは、どちらが人気なのですか？
<p><span class="speaker" style="color: #ff9900;">安藤様</span>：割合としては、定期が6割、まとめ買いが4割といったところでしょうか。初回の金額を安くしているということもあり、お試し感覚でご購入いただくケースも多いです。定期の継続率に関しては、日本とそこまで大きく異なる訳ではありませんが、台湾の方が気持ち低いかな、といった印象です。</p>
<p><span class="speaker" style="color: #3366ff;">高橋様</span>：単品まとめ売りを推すクライアント様と、定期を推されるクライアント様が半々くらいでいらっしゃいます。しかし、定期販売されているクライアント様も、定期とセットでまとめ売りを推されているケースも多いので、まとめ売りは、欠かせないものになっていると思います。</p>

## 「離脱が少ない」「売りたいものをスポットで紹介する」ことが得意な独自サイト
### LaunchCartでの独自サイトとECモールを併用していただいていますが、スタート当初から併用をされているのですか？

<p><img loading="lazy" class="alignright size-medium wp-image-7783" src="/uploads-archive/lc/2021/06/bizki_ando-scaled-e1623137514608-300x225.jpg" alt="" width="300" height="225" srcset="/uploads-archive/lc/2021/06/bizki_ando-scaled-e1623137514608-300x225.jpg 300w, /uploads-archive/lc/2021/06/bizki_ando-scaled-e1623137514608-1024x768.jpg 1024w, /uploads-archive/lc/2021/06/bizki_ando-scaled-e1623137514608-768x576.jpg 768w, /uploads-archive/lc/2021/06/bizki_ando-scaled-e1623137514608-600x450.jpg 600w, /uploads-archive/lc/2021/06/bizki_ando-scaled-e1623137514608-1536x1152.jpg 1536w, /uploads-archive/lc/2021/06/bizki_ando-scaled-e1623137514608.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><span class="speaker" style="color: #ff9900;">安藤様</span>：フォーイットさんは独自サイトでのプロモーションノウハウを豊富にお持ちでしたし、国内同様、定期モデルで越境ECを行いたかったので、スタート時は独自サイト一択でした。しばらくして独自サイトがある程度軌道に乗り、さらに販路を広げていこうということで、ECモールへの出店に踏み切りました。これにより、独自サイトを見て当社の商品を知ってくれた方が、ECモールで購入してくださるということも多々あるので、顧客を食い合うのではなく、より良い相乗効果が生まれてくれたらなと思っています。</p>

### 独自サイトの良さ、ECモールの良さ、についてどのようにお考えですか？
<p><span class="speaker" style="color: #3366ff;">高橋様</span>：あくまでも個人的な見解ですが、独自サイトLPの場合はユーザーの離脱が少ないメリットがあると思います。ECモールの場合、商品ページに飛んだ後、別ページに回避してしまう可能性がありますが、その可能性が独自サイトにはありません。加えて、独自サイトは売りたい商品にスポットライトを当てた紹介が強みだと感じています。もちろん、ECモールにも定期やまとめ売りといった様々な売り方ができますが、手広く載せてしまうとその分新規顧客客様がどれを購入するか迷ってしまい、離脱に繋がるという可能性があるためです。</p>
<p>一方、台湾の新規顧客が独自サイトで商品を見たとしても、知らないブランドの商品だと、不安に思われることもあるかもしれません。そういった面で、独自サイトは新規顧客から信頼を築き上げることに最初は苦労すると思います。それに比べて、ECモールは、ユーザーにとって、モールブランドへの安心感があるので、ユーザーの信頼の獲得しやすいという面においては、ECモールの良い点だと思います。</p>

## LaunchCartの良さは、「分かりやすい・離脱しづらい決済エントリーフォーム」
### LaunchCartを選んでいただいた理由は何ですか？
<p><img loading="lazy" class="alignleft size-medium wp-image-7782" src="/uploads-archive/lc/2021/06/fotit_takahashi-scaled-e1623137606863-300x225.jpg" alt="" width="300" height="225" srcset="/uploads-archive/lc/2021/06/fotit_takahashi-scaled-e1623137606863-300x225.jpg 300w, /uploads-archive/lc/2021/06/fotit_takahashi-scaled-e1623137606863-1024x768.jpg 1024w, /uploads-archive/lc/2021/06/fotit_takahashi-scaled-e1623137606863-768x576.jpg 768w, /uploads-archive/lc/2021/06/fotit_takahashi-scaled-e1623137606863-600x450.jpg 600w, /uploads-archive/lc/2021/06/fotit_takahashi-scaled-e1623137606863-1536x1152.jpg 1536w, /uploads-archive/lc/2021/06/fotit_takahashi-scaled-e1623137606863.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><span class="speaker" style="color: #3366ff;">高橋様</span>：決済フォームでお客様が離脱しづらい仕様になっているという点です。確認ページを1度挟んだり、購入フォームが煩雑な場合があります。LaunchCartは入力から、購入ボタンまでの導線がスムーズに購入できますので、訪れたユーザーは決済しやすいと思います。そして、クーポンコードを設置できるようにしてくれたり、クライアント様の要望にも、個別でご調整いただけるので、プロモーション運用を行う側としては非常にありがたいです。</p>
<p><span class="speaker" style="color: #ff9900;">安藤様</span>：一番はやはりコストパフォーマンスですね！これは弊社に限らず、他の会社様も同様の意見をお持ちだと思います。さらに、LaunchCartを日々運用する中で不明点が出てきたときに、すぐにスターフィールド様のカスタマーサクセスの方にチャットで質問できるのにはとても助かっています。サポートセンターに問い合わせて毎回毎回別の方に経緯を説明するのではなく、弊社のことをわかってくださっている専属のご担当者様から直接お返事をいただけるというのも、安心して続けられる要因のひとつですね。</p>

## 販路拡大と台湾越境ECのより一層の質の向上を目指す
### 今後の展望についても教えてください。
<p><span class="speaker" style="color: #ff9900;">安藤様</span>：月並みですが、台湾だけにとどまらず、他のいろいろな国へビズキの商品を販売していきたいです。せっかくLaunchCartが多国籍に対応しているので使わない手はありません。また、今フォーイットさんにお手伝いいただいているカスタマーサポート業務に関しても、国内通販に比べてまだまだ改善や拡充の余地があるので、CRMをもっと強化し、サービスだけでなく、顧客の質も上げていきたいと考えています。</p>
<p><span class="speaker" style="color: #3366ff;">高橋様</span>：アジアNo1のマーケティング会社を目指していきます。実際に、東南アジア圏で、日本企業様とお仕事をご一緒させていただいている中で思うのは、アフィリエイト以外の部分でもクライアント様を包括的にサポートしていく必要があるということです。具体的には、商品の購入導線に紐づく、離脱防止ツールの導入や、継続率アップの施策です。アジア各国のクライアント様それぞれの課題解決ができるサービスとして、ご利用いただけるように、サービスを拡充していきたいと考えています。</p>

### では最後に、越境ECを検討中の方にアドバイスをお願いします！
<p><span class="speaker" style="color: #ff9900;">安藤様</span>：競合が増えてしまうので、やってほしくありません（笑）というのは半分冗談で、もし今海外進出を迷っていらっしゃるようであれば、とにかく一度やってみるべきだと思います。台湾は特に親日の方が多いので、自分たちの商品に自信を持って販売をしていけばきっと気に入ってくれる方がいらっしゃると思います。</p>
<p><img loading="lazy" class="alignleft size-medium wp-image-7785" src="/uploads-archive/lc/2021/06/forit_takahashi_bizki_ando2-scaled-e1623137995857-300x182.jpg" alt="" width="330" height="200" srcset="/uploads-archive/lc/2021/06/forit_takahashi_bizki_ando2-scaled-e1623137995857-300x182.jpg 300w, /uploads-archive/lc/2021/06/forit_takahashi_bizki_ando2-scaled-e1623137995857-1024x623.jpg 1024w, /uploads-archive/lc/2021/06/forit_takahashi_bizki_ando2-scaled-e1623137995857-768x467.jpg 768w, /uploads-archive/lc/2021/06/forit_takahashi_bizki_ando2-scaled-e1623137995857-600x365.jpg 600w, /uploads-archive/lc/2021/06/forit_takahashi_bizki_ando2-scaled-e1623137995857-1536x934.jpg 1536w, /uploads-archive/lc/2021/06/forit_takahashi_bizki_ando2-scaled-e1623137995857-2048x1245.jpg 2048w" sizes="(max-width: 330px) 100vw, 330px" /></p>
<p><span class="speaker" style="color: #3366ff;">高橋様</span>：ぜひ多くの企業様に越境ECを始めていただきたいです。しかし、海外販売をされるご担当者様はしっかりと権限をもって、海外進出にチャレンジしていただく事をおすすめします。海外販売を開始して上手くいっている企業様は、スピード感を持って、柔軟に対応されている傾向があります。改善すれば売れそうな商品であっても、会社の意向で、撤退を余儀なくされるケースもあります。実際に、担当者様が越境EC事業を全て統括している企業様では、施策のスピードが早く、継続的に販売数を維持されていらっしゃいます。</p>


a8ec8799b27d11c7c4720ce366133fa4-scaled.jpg

株式会社ビズキ様×株式会社フォーイット様

> 中国向けWEB広告のリーディングカンパニー、フルスピード社。2012年から中国向けサービスを開始し、SEO、リスティング、SNS運用などのコンサルティングから運用まで、幅広い支援を行っています。今回は、コロナ後特に注目が集まっている中国のEC市場や、中国での戦い方、中国での自社ECサイトの可能性について、株式会社フルスピード、マーケティングコンサルティング事業部の三島悠輔氏にお話を伺いました。

## 百度日本法人の基幹代理店
<p><img loading="lazy" src="/uploads-archive/lc/2020/12/fullspeed_mishima-3-300x300.jpg" alt="" width="300" height="300" class="alignleft size-medium wp-image-5969" srcset="/uploads-archive/lc/2020/12/fullspeed_mishima-3-300x300.jpg 300w, /uploads-archive/lc/2020/12/fullspeed_mishima-3-150x150.jpg 150w, /uploads-archive/lc/2020/12/fullspeed_mishima-3.jpg 480w" sizes="(max-width: 300px) 100vw, 300px" /></p>

### 御社の強みについて教えてください。
<p>　国内でデジタルマーケティングの事業を包括的に行っていたため、中国向けのデジタルマーケティングだとしても、やはりパフォーマンスの上がる運用や、KPIの設計の仕方、そして収集したデータをどのように見て、どのように改善していくかとしてのノウハウがある部分は強みだと思っています。また、百度の広告運用に強みを持った広告代理店の証として、百度日本法人の1次代理店である基幹代理店として選んでいただいており、百度社からのバックアップのある体制で、クライアント様の広告運用やコンサルティングを提供することができます。中国大手の百度社からの最新の情報を得ながら広告運用を行うことができるということは、新しいトレンドやチャンスを掴んで適切なアクションを起こすことができると確信しています。</p>
<p>　また、越境ECに関しては、既に日系企業様でもTモールや京東などといったモールに出店されている企業様がいらっしゃいますが、モール内の取り組みだけだと新規顧客の獲得がすごく難しいと悩まれるケースが非常に多く、外部広告、外部流入も含めて何か展開できないか、というご相談を受けることがあります。そういった際には、百度の広告経由でTモールや京東への送客をするような取り組みで購入に結びつけるご支援をしています。</p>
<p>&nbsp;</p>

## 中国は魅力的な反面、競合性が非常に高いマーケット
### 中国は魅力的ですが、どこから始めたら良いか分からないです。どのようにしたら成功できると思いますか？
<p>　中国は人口規模で言うと、日本が1億2千万人に対して14億人、日中の越境EC市場としてみても約2兆円と言われています。直近（2020年11月）の独身の日のレポート等を見ていても、1日で12兆円を叩き出すといった魅力的なマーケットな反面、競合性が非常に高いマーケットという捉え方をした方が良いかと思います。競合というのは、同じように中国に進出している日系企業、他の国の海外企業、そして中国国内の企業です。そういった競合に勝っていくには、最初のマーケット調査からかなり丁寧に行う必要があり、<strong>プロモーション開始前に、「こういう攻め方をしたら、成功できるだろう」という戦略をしっかりと立ててから実際に展開に踏み切ることが非常に重要</strong>かと考えています。各社の取り組みの中で非常に多いのが、自社の強みや訴求を整理せずになんとなくの雰囲気でKOLなどプロモーションはじめましょう、というやり方をしてしまってるケースが多いように感じます。</p>
<p>&nbsp;</p>

## 検索エンジンと相性が良い商材は独自ドメインで
### 中国における独自ドメインのECサイトの可能性はあるのでしょうか？
<p><img loading="lazy" src="/uploads-archive/lc/2020/12/fullspeed_mishima-300x300.jpg" alt="" width="300" height="300" class="alignright size-medium wp-image-5967" srcset="/uploads-archive/lc/2020/12/fullspeed_mishima-300x300.jpg 300w, /uploads-archive/lc/2020/12/fullspeed_mishima-150x150.jpg 150w, /uploads-archive/lc/2020/12/fullspeed_mishima.jpg 479w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>　独自ドメイン、つまりD2Cのモデルで直接自社店舗を持つというスタイルはメーカー様にとってもメリットのあるモデルですし、今後伸びていくと思います。いくつか理由がありますが、まず、ここ数年でTモールや京東に出店している企業様から<strong>「売り上げは上がるけれど、利益が上がらない」「顧客情報を満足に収集できない」というご相談を受けることが増えてきました。</strong>モールを運営するためのランニングコストがかなり高額だということや、モール側は顧客情報を事業者様に渡したくないといった状況から、モールの運営自体は売り上げをあげたりブランディングの観点では効果的な一方、中長期的に利益を上げたり、顧客情報をストックするということは難しいのだと感じています。この部分を解決するためには、自社の店舗を持つ必要があり、独自ドメインでの展開が一つの選択肢としてあげられます。</p>
<p>　独自ドメインの良さは、仕様を自由に変えられるところとデータを収集できるというところです。広告の計測タグや解析タグは、他のプラットフォームでは埋め込められませんが、独自ドメインの場合、タグを埋め込めることができて、顧客はどういった行動をしているのかなど見える部分がかなり広がります。データをたくさん収集できればできるほど、考えられる仮説も豊富になり、様々な施策を試すことができます。</p>
<p>　広告タグだけでなく、<strong>独自ドメインの場合は検索に強いという部分も大きなメリット</strong>です。実際にどのキーワードでどのようなアクションをしているのか見ることができるので、検索の相性の良い商品だったりすると、独自ドメインで戦うと効果的なのではないかと考えています。最近の人々は、SNSで情報収集して検索エンジンは使わない、といった風潮が特に中国ではありますが、そんなことはないと思います。実際百度の検索ユーザーが5~6億人いるので、データからも明らかです。では、どんな商材が検索エンジンと相性が良いかというと、SNSでは調べないような「強く悩む」「強く痛む」「明かな身体の異常」「相談しづらい」といったお困り事です。お困りの深刻度が深いほど、明確なキーワードがあるので、人々は検索しますよね。SNSは比較的ポジティブな情報で溢れているので、そういった悩みに対しての解決コンテンツがありません。こういったことから、コンプレックス商材だったり、悩みを解決するような商材だったら、検索エンジンとの相性が良く、独自ドメインと一気通貫して攻めていくという方法は良いのではないかと思っています。</p>
<p>&nbsp;</p>

## 中国での成功法則を見つけ出していきたい
### LaunchCartとの出会いについて教えてください。
<p><img loading="lazy" src="/uploads-archive/lc/2020/12/fullspeed_mishima-2-300x300.jpg" alt="" width="250" height="250" class="alignright size-medium wp-image-5968" srcset="/uploads-archive/lc/2020/12/fullspeed_mishima-2-300x300.jpg 300w, /uploads-archive/lc/2020/12/fullspeed_mishima-2-150x150.jpg 150w, /uploads-archive/lc/2020/12/fullspeed_mishima-2.jpg 480w" sizes="(max-width: 250px) 100vw, 250px" /></p>
<p>　越境ECを日本企業に広めたいという共通目的をもった社団法人での集まりでお会いしたのがきっかけです。今では良いパートナーとして、案件でご一緒したり、弊社で新サービスを立ち上げる際などでご相談させてもらったりしています</p>

### 今後の展望について教えてださい。
<p>　日本企業の海外進出を簡単にしていきたいというのを事業のビジョンの核にしていることから、このビジョンを体現できるように様々なソリューションを展開しています。まず中国から始めたため、そこで売り上げや実績を挙げて、成功法則を見つけ出していきたいです。　また、東南アジア向けの商圏拡大も今後ご支援していきたいと考えており、独自ドメインでの越境ECということでしたら、我々はプロモーションやマーケティング領域、LaunchCartは決済やカートシステムの領域、といった形でご一緒させていただきたいと考えています。</p>


127122420_2696690907326811_2413926628467993539_n-e1607999640343.jpg

株式会社フルスピード様

> 日本で人気の商品やブランドでも、台湾に行くと最初は無名の新参者。その時に、商品の魅力を伝えてくれるのが広告です。マイクロアド台湾社は、Google、Yahoo!、Facebook、LINE、Instagramといった幅広いプラットフォームにおいて、広告代理事業を行われており、主に獲得系運用型広告に強みを持たれています。お取引されている企業様の業種は健康食品・化粧品などの単品通販企業からアパレルなどの総合通販企業や人材企業・BtoB企業など多岐にわたります。今回は、マイクロアド台湾代表の丸木勇人氏と営業リーダーの山田孝輝氏に、台湾広告事業や、LaunchCartの魅力についてお話しいただきました。

<h3>台湾人の心に刺さる広告運用と中長期的な成長に繋がるキャンペーン</h3>
<h4>ー御社の強みを教えてください。</h4>
<p style="text-align:center;"><img loading="lazy" src="/uploads-archive/lc/2020/09/D89AA92D-F385-42A1-ABDF-932A64631B76-300x225.jpg" alt="" width="400" height="300" class="alignright size-medium wp-image-5153" srcset="/uploads-archive/lc/2020/09/D89AA92D-F385-42A1-ABDF-932A64631B76-300x225.jpg 300w, /uploads-archive/lc/2020/09/D89AA92D-F385-42A1-ABDF-932A64631B76-1024x768.jpg 1024w, /uploads-archive/lc/2020/09/D89AA92D-F385-42A1-ABDF-932A64631B76-768x576.jpg 768w, /uploads-archive/lc/2020/09/D89AA92D-F385-42A1-ABDF-932A64631B76-600x450.jpg 600w, /uploads-archive/lc/2020/09/D89AA92D-F385-42A1-ABDF-932A64631B76-1536x1152.jpg 1536w, /uploads-archive/lc/2020/09/D89AA92D-F385-42A1-ABDF-932A64631B76-2048x1536.jpg 2048w"  /></p>
<p><span class="speaker" style="color: #ff9900;">丸木氏</span>：弊社のお取引先の85％が日系のクライアント様なのですが、マイクロアド台湾は50人中45人が台湾人というメンバー構成で働いています。台湾現地メンバー中心の体制にすることで、日系の商品を台湾人に向けて売る際に、どうやって訴求すればいいのか、何が台湾人の心に最も刺さるのか、といった感覚的な部分も含めて広告のクリエイティブ作成や文言などに活かせるようになっております。</p>
<p>　また、特にCPAを指標とされている単品通販系のクライアント様とのお取引が多く、運用ノウハウ社内に多く保有していくことも強みだと思います。例えば、獲得系の広告は勝ちパターンが見つかってもすぐ効果が鈍化するなど、常に細やかな運用調整が必要とされます。弊社は台湾の立ち上げ以来、様々な業種のクライアント様の広告を運用させていただいており、そういった際にどのように調整すれば効果改善ができるかなどの対処法やPDCAサイクルの速さも強みだと思います。</p>
<h4>ー特に台湾ならではの広告戦略はありますか？</h4>
<p style="text-align:center;"><img loading="lazy" src="/uploads-archive/lc/2020/09/742CA55A-D97E-475E-A8E6-912D31C1068F-scaled-e1600217664366-300x169.jpg" alt="" width="300" height="169" class="alignleft size-medium wp-image-5154" srcset="/uploads-archive/lc/2020/09/742CA55A-D97E-475E-A8E6-912D31C1068F-scaled-e1600217664366-300x169.jpg 300w, /uploads-archive/lc/2020/09/742CA55A-D97E-475E-A8E6-912D31C1068F-scaled-e1600217664366-1024x576.jpg 1024w, /uploads-archive/lc/2020/09/742CA55A-D97E-475E-A8E6-912D31C1068F-scaled-e1600217664366-768x432.jpg 768w, /uploads-archive/lc/2020/09/742CA55A-D97E-475E-A8E6-912D31C1068F-scaled-e1600217664366-600x338.jpg 600w, /uploads-archive/lc/2020/09/742CA55A-D97E-475E-A8E6-912D31C1068F-scaled-e1600217664366-1536x864.jpg 1536w, /uploads-archive/lc/2020/09/742CA55A-D97E-475E-A8E6-912D31C1068F-scaled-e1600217664366-2048x1152.jpg 2048w" /></p>
<p><span class="speaker" style="color: #339966;">山田氏</span>：台湾人には、日本人より顕著にお得なキャンペーンに食いつきやすい傾向があると思います。例えば、100円の値下げや、5%引きのようなキャンペーンでもCPAが大きく変化することがあります。ですが一方でそういったユーザーは他のブランドの商品に目移りしやすく、LTVが低くなる傾向もあるので、目下のCPAを下げるための値下げ施策に躍起になってしまうと、中長期的な成長は描きづらくなる可能性もあります。いかに全体最適を行いながら、ポイントでは季節性のキャンペーン等を絡めた施策を行っていくことが大事だと思います。</p>
<h3>台湾人をターゲットにした中長期戦略を考えないと成功しない市場</h3>
<h4>ー台湾は日本企業にとって進出しやすい市場ですか？</h4>
<p><span class="speaker" style="color: #ff9900;">丸木氏</span>：海外進出の際に、まず台湾から始めようという選択は間違いないと思います。ただ、一旦テストマーケとして台湾でやってみよう、という気持ちで始められる市場ではなくなってきていると思いますね。例えばFacebook広告のインプレッション単価が5年前に比べて、現在（2020年9月）は1.5倍程高くなっていたりします。多くの企業がFacebook広告を始めたため供給過多になり、価格が高騰したと考えられます。その結果配信する面、量が一緒でも単価が上がっているため以前に比べて広告効果を改善することが容易ではなくなっております。また、ユーザーリテラシーも高くなっており、日本のクリエイティブをそのまま翻訳しただけでは上手くいかないケースが多く、しっかりターゲット選定などから行った戦略を考えていかないと成功しない市場だと思います。5年前はFacebook広告さえ実施していればある程度市場需要をつかめましたが、現在は様々なメディアを複合的に運用しなければ成功は難しい市場となっています。</p>
<h4>ーもはや手軽、簡単とは言えない台湾市場の魅力は何ですか？</h4>
<p style="text-align:center;"><img loading="lazy" src="/uploads-archive/lc/2020/09/41076B98-6389-4FED-937F-F86A2931AECD-300x225.jpg" alt="" width="300" height="225" class="alignright size-medium wp-image-5155" srcset="/uploads-archive/lc/2020/09/41076B98-6389-4FED-937F-F86A2931AECD-300x225.jpg 300w, /uploads-archive/lc/2020/09/41076B98-6389-4FED-937F-F86A2931AECD-1024x768.jpg 1024w, /uploads-archive/lc/2020/09/41076B98-6389-4FED-937F-F86A2931AECD-768x576.jpg 768w, /uploads-archive/lc/2020/09/41076B98-6389-4FED-937F-F86A2931AECD-600x450.jpg 600w, /uploads-archive/lc/2020/09/41076B98-6389-4FED-937F-F86A2931AECD-1536x1152.jpg 1536w, /uploads-archive/lc/2020/09/41076B98-6389-4FED-937F-F86A2931AECD-2048x1536.jpg 2048w"  /></p>
<p><span class="speaker" style="color: #ff9900;">丸木氏</span>：魅力は大きく2つあると思います。1つ目は、デジタル市場の大きさです。人口や面積的に見ると、台湾の市場はほぼ九州と同じで、日本全体の6分の1のサイズ感です。ただ、スマホの普及率やSNSの使用率は世界トップクラスと言われており、FacebookやLINEの利用者数は人口の90%という数字もあります。デジタル市場という面で台湾を見ると、日本の4分の1のサイズです。この、人口に対してのデジタル市場の大きさが台湾の魅力の1つです。</p>
<p>　そして、台湾をハブとしたさらなる海外進出を視野に入れることができる点が、台湾の2つ目の魅力です。台湾で成功したマーケティング方法を横展開して、他のアジア圏にいる華僑の方々をターゲットにした配信を行うことができます。実際に弊社でも台湾から越境で広告配信をさせていただいているケースもあり、これからこういった企業様がどんどん増えるのではないかと考えています。例えば、香港でしたら台湾と同じ繁体字でも獲得できる場合があります。また、シンガポールは、台湾より人口は少ないですが、所得が高い分高単価商材でも獲得効率が良いといったこともあります。今後日本市場鈍化する中、親日かつ日系が戦いやすい台湾で腰を据えて成功することこそ、アジア展開に繋がる一歩だと考えて良いと思います。</p>
<h3>価格だけではなく、機能が充実しているLaunchCart</h3>
<h4>ー広告代理店という立場から見たLaunchCartの魅力は何ですか？</h4>
<p style="text-align:center;"><img loading="lazy" src="/uploads-archive/lc/2020/09/08A6D774-0CEA-48B9-99F8-C92E9F060C85-300x225.jpg" alt="" width="300" height="225" class="alignleft size-medium wp-image-5156" srcset="/uploads-archive/lc/2020/09/08A6D774-0CEA-48B9-99F8-C92E9F060C85-300x225.jpg 300w, /uploads-archive/lc/2020/09/08A6D774-0CEA-48B9-99F8-C92E9F060C85-1024x768.jpg 1024w, /uploads-archive/lc/2020/09/08A6D774-0CEA-48B9-99F8-C92E9F060C85-768x576.jpg 768w, /uploads-archive/lc/2020/09/08A6D774-0CEA-48B9-99F8-C92E9F060C85-600x450.jpg 600w, /uploads-archive/lc/2020/09/08A6D774-0CEA-48B9-99F8-C92E9F060C85-1536x1152.jpg 1536w, /uploads-archive/lc/2020/09/08A6D774-0CEA-48B9-99F8-C92E9F060C85-2048x1536.jpg 2048w"  /></p>
<p><span class="speaker" style="color: #339966;">山田氏</span>：1つ目は価格です。弊社としてはクライアント様がカートシステムにおいてどういったものを使われるかという点は領域外ではあるのですが、事業全体から数字が試算された上で広告の目標が決定されるので、広告以外のコストカットのご提案もさせていただくこともあります。そのためカートの固定費用は重要です。また、ただ価格が安いだけではなく、機能が充実されている点も魅力的です。同じ価格帯でも、アドコードが発行できないカートでは、どの広告から獲得数が伸びたのか等の分析ができず、弊社の強みを発揮することが難しくなってしまいます。またカスタマーサポートの対応がとても素晴らしいです。機能面においても、開発要望においても、質問させていただいた際には常に迅速に対応いただけるので助かっています。</p>
<h4>ー普段はどのようにLaunchCartをご利用いただいていますか？</h4>
<p><span class="speaker" style="color: #339966;">山田氏</span>：メインの業務は、広告の分析業務です。どのパラメーターから広告が伸びたのか等を日々チェックしています。クライアント様によっては、LaunchCartの編集権限をいただいて、直接LPを作成しています。直近は直接記事の下にカートをつける記事LPを用いることが増えています。このような記事LPの作成も、LaunchCartだと管理画面から簡単にHTMLとCSSで作成できるので手軽にABテストができます。</p>
<h3>さらなる日本企業様の海外展開を成功へ</h3>
<h4>ー今後の展望を教えてください。</h4>
<p><span class="speaker" style="color: #ff9900;">丸木氏</span>：企業様の海外展開の成功に責任をもって挑戦し続け、「台湾で獲得系の広告代理店と言えばマイクロアド」と思っていただけるような強みを圧倒的に作っていきたいです。またLaunchCartと共に台湾のみならず複数か国にて展開を行い、各国のカートのローカライズ等、細かな支援を共に進めることで、クライアント様の売り上げボリュームを増加させ、日本企業様の海外展開の成功に貢献していきたいと思います。</p>


microad-logo.jpg

台湾微告有限公司(MicroAd Taiwan Ltd.)様

<p>現在、ビジネスで英文を書くことはまだ稀な状況ですが、英語勉強中にGoogle翻訳をフル活用している身としては、久しぶりに衝撃を受けたツールでしたので、シェアします。</p>
<p>（Google翻訳かまし過ぎると直訳っぽいって言われますよね）</p>
<h2>英文校正ツール「grammarly」</h2>
<p>自分のようにGoogle翻訳に頼りきっている人や英語が合っているのかどうか分からない初中級者こそ使うべきツールですね。</p>
<p><a href="https://www.grammarly.com/" target="_blank" rel="noopener">https://www.grammarly.com/</a></p>
<h3>様々な入力欄に自動で応答する仕組み</h3>
<p><a href="/uploads-archive/2019/06/Grammarly__Free_Writing_Assistant.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-15273" src="/uploads-archive/2019/06/Grammarly__Free_Writing_Assistant.png" alt="" width="1006" height="549" srcset="/uploads-archive/2019/06/Grammarly__Free_Writing_Assistant.png 1006w, /uploads-archive/2019/06/Grammarly__Free_Writing_Assistant-300x164.png 300w, /uploads-archive/2019/06/Grammarly__Free_Writing_Assistant-768x419.png 768w, /uploads-archive/2019/06/Grammarly__Free_Writing_Assistant-228x124.png 228w" sizes="(max-width: 1006px) 100vw, 1006px" /></a></p>
<p>サイト上の説明を見ていると、GmailやらslackやらFacebookで動きますよと書いてあります。</p>
<p>なんとなく意味は捉えていたのですが、実際に使って見て驚きました。</p>
<p><a href="/uploads-archive/2019/06/Station.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-15274" src="/uploads-archive/2019/06/Station.png" alt="" width="579" height="466" srcset="/uploads-archive/2019/06/Station.png 579w, /uploads-archive/2019/06/Station-300x241.png 300w, /uploads-archive/2019/06/Station-228x184.png 228w" sizes="(max-width: 579px) 100vw, 579px" /></a></p>
<p>いつものようにプラグインが入っていることを意識せずGmailを開いてみたら、右下に赤丸白抜き文字で3が点灯しているではありませんか。そして、3箇所赤字でアンダーラインが引かれており、あーこれが昨日入れた「grammarly」かと気づきました。</p>
<p>なんと、デフォルト設定していた署名欄が反応していたのです。</p>
<h3>いちいち別画面を開く必要などない！</h3>
<p>これってすごく大きくないですか？いつものツールを意識せずいつもの画面の中で動作するんです。<a href="/uploads-archive/2019/06/Station-1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-15275" src="/uploads-archive/2019/06/Station-1.png" alt="" width="492" height="428" srcset="/uploads-archive/2019/06/Station-1.png 492w, /uploads-archive/2019/06/Station-1-300x261.png 300w, /uploads-archive/2019/06/Station-1-228x198.png 228w" sizes="(max-width: 492px) 100vw, 492px" /></a>赤丸をクリックすると実際にその内容が表示されます。</p>
<p>二つはスペースが足りないよという内容と5の後は複数形だろということで指摘されました。</p>
<p><a href="/uploads-archive/2019/06/Station-2.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-15276" src="/uploads-archive/2019/06/Station-2.png" alt="" width="596" height="619" srcset="/uploads-archive/2019/06/Station-2.png 596w, /uploads-archive/2019/06/Station-2-289x300.png 289w, /uploads-archive/2019/06/Station-2-228x237.png 228w" sizes="(max-width: 596px) 100vw, 596px" /></a></p>
<p>指摘の箇所を署名の設定で直すとこんな感じで先ほどまで赤丸表記だったものがgrammarlyのロゴを型どった緑丸となり、校正OKということがわかるような仕組みになっています。</p>
<p>これは使える！と感動でした。</p>
<h2>有料版もあるよ</h2>
<p><a href="/uploads-archive/2019/06/Premium_Plans___Grammarly.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-15280" src="/uploads-archive/2019/06/Premium_Plans___Grammarly.png" alt="" width="956" height="578" srcset="/uploads-archive/2019/06/Premium_Plans___Grammarly.png 956w, /uploads-archive/2019/06/Premium_Plans___Grammarly-300x181.png 300w, /uploads-archive/2019/06/Premium_Plans___Grammarly-768x464.png 768w, /uploads-archive/2019/06/Premium_Plans___Grammarly-228x138.png 228w" sizes="(max-width: 956px) 100vw, 956px" /></a></p>
<ul>
<li>より高度な校正</li>
<li>サジェスト</li>
<li>専門領域のチェック</li>
<li>盗用チェック</li>
</ul>
<p>このあたりが使えるようになるようです。</p>
<p>割とお値段するなという感じ（だったら、Netflixに課金したいｗ）で典型的なフリーミアムモデルですが、無料版でも十分使えてしまいます。</p>
<p>個人向けの無料版（と一部の有料版）で大量のデータを取得してAIの精度を上げて、大企業や公的な機関に入れていくいわゆるエンタープライズ製品として売っているビジネスモデルのようです。</p>
<h2>おまけ</h2>
<p><a href="/uploads-archive/2019/06/LaunchCart_Admin.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-15286" src="/uploads-archive/2019/06/LaunchCart_Admin-1024x665.png" alt="" width="1024" height="665" srcset="/uploads-archive/2019/06/LaunchCart_Admin-1024x665.png 1024w, /uploads-archive/2019/06/LaunchCart_Admin-300x195.png 300w, /uploads-archive/2019/06/LaunchCart_Admin-768x499.png 768w, /uploads-archive/2019/06/LaunchCart_Admin-228x148.png 228w, /uploads-archive/2019/06/LaunchCart_Admin.png 1139w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>当社の製品「Launch  Cart」上のCMSでも動作しました。</p>
<p>おそらく、TynyMCEなどの汎用的な入力フォームには自動でアタッチしてくれるものと思われます。</p>
<h2>まとめ</h2>
<p>自分の英文法にまだ自信がない方はもちろんのこと、入れておくだけで、ちょっとした冠詞や複数形の抜けなどもチェックしてくれるので、一つレベルの上がった英文作成ができそうです。</p>
<p>まさに、入れておいて損はなしといったところです。</p>


Banners_and_Alerts_and_Grammarly__Free_Writing_Assistant-768x431.png

入れておいて損はなし英文校正プラグイン「grammarly」

<p>最近、WEBページのデザインで、ページを構成するパーツから先にデザインを始める必要のある案件に初めて携わったのですが、<br />
これまでページ全体のレイアウト→各セクションのレイアウト→各部品のレイアウトというふうに、どちらかというと大きなところからデザインを進める方法をとっていたため、<br />
若干戸惑ってしまいました。</p>
<p>しかし、レスポンシブデザインでは、PC、タブレット、スマホでそれぞれ適したページレイアウトが異なっており、ページのレイアウトからデザインを進める方法が適さない場合が少なくありません。<br />
そんな中、最近ではパーツやそれらの集まりであるコンポーネントからデザインし、それらを組み合わせてページを作っていく方法が広がりつつあります。</p>
<p>そこでパーツからデザインする方法を調べたところ、アトミックデザインという方法に行き着きました。<br />
アトミックデザインとは、部品の最小単位を原子（Atom）と位置づけ、<br />
原子（Atoms; 部品の最小単位）<br />
→ 分子（Molecules; 2個以上の最小単位の組み合わせ）<br />
→ 有機体（Organisms; 機能を成す分子の集まり）<br />
→ テンプレート（Templates; ページのレイアウト）<br />
→ ページ(Pages; 実際の内容をテンプレートに組み込んだもの)<br />
という様に、細部からより大きな単位へとデザインしていく方法です（参考: <a href="http://atomicdesign.bradfrost.com/chapter-2/" target="_blank" rel="noopener">Atomic Design Methodology | Atomic Design by Brad Frost</a>）。</p>
<p>アトミックデザインの方法を使うことで、効率の高い自由度の高いデザインが可能となります。<br />
アトミックデザインでは独立した機能を持ったパーツを単位としてデザインするため、レイアウトの変更や変化によって機能が失われることがありません。そのため、必要に応じて自由にレイアウトすることが可能です。<br />
デバイスごとにレイアウト変更が必要なレスポンシブデザインには最適です。</p>
<p>さて、WEBページのデザインをするためのアプリとして、最近私はAdobeのXDをよく使います。<br />
日々アップデートされ、段々と使いやすくなっているのを感じます。</p>
<p>ただ、XDを使ってアトミックデザインをやってみようとしたときに、問題にぶつかりました。<br />
XDで部品を組み合わせる場合、シンボルという機能を使って実現することになります。<br />
このシンボルは、再利用する部品をプロジェクトのアセットとしてストックしていく仕組みです。<br />
XDではシンボルをシンボルで構成するような入れ子の構造も可能なので、アトミックデザインも可能かと思われたのですが、シンボルではテキストとビットマップ形式の画像以外はパーツの差し替えができないため、アトミックデザインの利点を活かしきることができません。</p>
<p>2019.06.11追記）<a href="https://launchcart.jp/blog/adobe-xd%E3%81%8C%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E5%AF%BE%E5%BF%9C%EF%BC%81%E3%82%A2%E3%83%88%E3%83%9F%E3%83%83%E3%82%AF%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/" target="_blank" rel="noopener">XDにコンポーネントが導入されました！</a></p>
<div class="lcLink js-loadLcLink" data-lclink="https://launchcart.jp/blog/adobe-xd%e3%81%8c%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%ab%e5%af%be%e5%bf%9c%ef%bc%81%e3%82%a2%e3%83%88%e3%83%9f%e3%83%83%e3%82%af%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/"><a href="https://launchcart.jp/blog/adobe-xd%e3%81%8c%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%ab%e5%af%be%e5%bf%9c%ef%bc%81%e3%82%a2%e3%83%88%e3%83%9f%e3%83%83%e3%82%af%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/" target="_blank">記事へのリンク</a></div>
<p>&nbsp;</p>
<div id="attachment_14396" style="width: 650px" class="wp-caption alignnone"><a href="/uploads-archive/2018/11/Nov-13-2018-16-40-33.gif"><img aria-describedby="caption-attachment-14396" decoding="async" loading="lazy" class="size-full wp-image-14396" src="/uploads-archive/2018/11/Nov-13-2018-16-40-33.gif" alt="" width="640" height="448" /></a><p id="caption-attachment-14396" class="wp-caption-text">XDではアイテムごとにアイコンを変更したい場合、シンボルから解除した上で、アイコンを差し替える必要があるので、レイアウトを変更するときに別々の変更が必要になる</p></div>
<p>一方、XDと同じくUI/UXデザインツールとして人気のSketchでは、パースそれぞれの中で、パーツを差し替えることも可能なので、アトミックデザインに最適だと言われています。<br />
しかし、Sketchは年間$99の支払いが必要で、Windows環境に対応しておらず、プロトタイプの共有はまた別途in visionの契約が必要になるため、導入のハードルが少し高いと感じていました。</p>
<p>そこで別のアプリを探してみたところ、<a href="https://www.figma.com" target="_blank" rel="noopener">Figma</a>というUI/UXデザインツールがとても優れているという<a href="https://note.mu/gimmickdock/n/nb304dee6bd51" target="_blank" rel="noopener">記事</a>を見つけました。</p>
<p>Figmaはブラウザで動作するため、Mac、Windowsを問いません。<br />
実際使ってみると、ブラウザで動作するアプリにもかかわらず、ネイティブアプリを操作しているかのような快適な操作感で、とても使いやす印象でした。</p>
<p>更に、Sketchと同じように、XDのシンボルに当たるパーツの管理機能は、マスターコンポーネント→インスタンスという形式をとっているので、同じパーツであっても、それぞれで違うパーツへ差し替えることが可能で、アトミックデザインを行う上で優れていることがわかりました。</p>
<div id="attachment_14411" style="width: 650px" class="wp-caption alignnone"><a href="/uploads-archive/2018/11/Nov-13-2018-17-22-48.gif"><img aria-describedby="caption-attachment-14411" decoding="async" loading="lazy" class="size-full wp-image-14411" src="/uploads-archive/2018/11/Nov-13-2018-17-22-48.gif" alt="" width="640" height="405" /></a><p id="caption-attachment-14411" class="wp-caption-text">Figmaでは同じパーツ（コンポーネント）の中のパーツをそれぞれ差し替え可能</p></div>
<p>3プロジェクトまで無料で利用できますので、まずはFigmaでアトミックデザインを覚え、なれてきたらSketchというのも方法としてはありかもしれません。</p>
<p>また、Figmaは30日間分のバージョン管理も可能。<br />
Sketchと違い、単独でプロトタイプの共有が可能なのも魅力です。<br />
また、無料版では2人まで、月$12の有料版では人数無制限の同時編集も可能で、<br />
チームでデザインを行う場合には、Sketchよりも優れたツールだと感じました。</p>
<p>&nbsp;</p>
<h3>参考にさせていただいたサイト</h3>
<p><a href="http://atomicdesign.bradfrost.com/chapter-2/" target="_blank" rel="noopener">Atomic Design Methodology | Atomic Design by Brad Frost</a></p>
<p><a href="https://goworkship.com/magazine/atomic_design/" target="_blank" rel="noopener">アトミックデザインとは？ コンポーネント単位で創るUIデザイン手法 | Workship MAGAZINE(ワークシップマガジン)</a></p>
<p><a href="https://www.webcreatorbox.com/inspiration/component-design" target="_blank" rel="noopener">これからのWebデザインは、コンポーネント化を意識しよう | Webクリエイターボックス</a></p>
<p><a href="https://note.mu/gimmickdock/n/nb304dee6bd51" target="_blank" rel="noopener">一人で「UIデザインツールどれがいいのか論争」をしてみる｜ノムラギミック｜note</a></p>


XD使いがアトミックデザインを始めるならUI/UXデザインアプリのFigmaがよさそう

6fcef8dd9e21f4f8dda8e2ca80a30cc0-1024x580.png

CSSフレームワークFoundationを試してみた

<h2>翻訳の注意</h2>
<h3>Information</h3>
<p>「インフォメーション」を覚えているままやメールアドレス、公共の場所で「Info」と略すことがあるから、<br />
info<strong>r</strong>mationをinfomationに間違ってしまった日本人が多いようです。</p>
<h3>Home Page</h3>
<p>“home page”はサイトのトップページの意味です。<br />
また、ウェブサイト全体を指すことは誤用です。<br />
“top page”はトップページという意味がありません。</p>
<h3>email、e-mail</h3>
<p><strong>e</strong>を抜けた場合がよく多いようです。</p>
<h2>複数形の表現</h2>
<p>何か紹介されるような場合に、ページのタイトルとして表現します。<br />
通常はひとつではないと思うので、複数形の表現にしましょう。</p>
<p>例：Pages、Products</p>
<p>SEO対策や多言語対応サイトをするとき、上記のものを注意しましょう。<br />
では、今回は以上です！ありがとうございました。</p>
<h3>おまけに</h3>
<p>役に立つサイト</p>
<p><a class="link" href="https://www.microsoft.com/ja-jp/language">マイクロソフト用語集</a></p>
<p>英語→多言語<br />
または<br />
日本語→英語</p>
<p>ご参考にしてください!</p>


d260686890ad58d8278eaac00194718a_s.jpg

英語版サイトの注意点

nino_eye130625.png

Three.jsで360°パノラマ動画を表示する

<p>Adobe の XD は、WEB サイトやアプリのデザインを制作するツールとしてとても使いやすく、プロトタイプツールとして、お客さんとの情報共有のツールとしても利用できるため、最近使う機会がとても増えてきました。</p>
<p>XD ではプロトタイプとしてページの遷移を再現することはできますが、アニメーションを付けるところまではできません。<br />
最近の WEB デザインの傾向として、アニメーションが印象に占める割合が大きくなってきているため、コーディングに入る前にアニメーションをお客さんに確認いただきたい機会が増えてきているため、そのあたり何とかできないものかと思うようになっていました。</p>
<p>XD でデザインを作って、アニメーションをつけたい。それを実現してくれるのが、<br />
「Kite Compositor」です。</p>
<p><a class="link" href="https://kiteapp.co/" target="_blank" rel="noopener">公式ホームページ: Kite Compositor – Motion Design for Mac</a></p>
<p>$99 で購入する必要がありますが、20日間、無料で体験利用することができます。</p>
<h2>Kite で XD データからアニメーションを作る方法</h2>
<ol>
<li>XD データをインポートする</li>
<li>データを整える</li>
<li>アニメーションの設定</li>
<li>アクションの設定</li>
<li>テスト &amp; 動画の録画・出力</li>
</ol>
<h3>1. XD データをインポートする</h3>
<p><a href="/uploads-archive/2018/06/ss_xd_01.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-14029 size-medium" src="/uploads-archive/2018/06/ss_xd_01-300x182.jpg" alt="" width="300" height="182" srcset="/uploads-archive/2018/06/ss_xd_01-300x182.jpg 300w, /uploads-archive/2018/06/ss_xd_01-768x467.jpg 768w, /uploads-archive/2018/06/ss_xd_01-1024x622.jpg 1024w, /uploads-archive/2018/06/ss_xd_01-228x139.jpg 228w, /uploads-archive/2018/06/ss_xd_01.jpg 1282w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>XD でデザインデータを作成します</p>
<p><a href="/uploads-archive/2018/06/ss_kite_01.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-14017 size-medium" src="/uploads-archive/2018/06/ss_kite_01-300x187.jpg" alt="" width="300" height="187" srcset="/uploads-archive/2018/06/ss_kite_01-300x187.jpg 300w, /uploads-archive/2018/06/ss_kite_01-228x142.jpg 228w, /uploads-archive/2018/06/ss_kite_01.jpg 737w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>Kite で新規ドキュメントを作成し、</p>
<p><a href="/uploads-archive/2018/06/ss_kite_02.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14019" src="/uploads-archive/2018/06/ss_kite_02-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_02-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_02-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_02-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_02-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_02.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>XD で対象ファイルを開いた状態で、 File &gt; Import &gt; From Adobe XD CC を選択</p>
<p><a href="/uploads-archive/2018/06/ss_kite_02-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14018" src="/uploads-archive/2018/06/ss_kite_02-2-300x178.jpg" alt="" width="300" height="178" srcset="/uploads-archive/2018/06/ss_kite_02-2-300x178.jpg 300w, /uploads-archive/2018/06/ss_kite_02-2-768x456.jpg 768w, /uploads-archive/2018/06/ss_kite_02-2-1024x608.jpg 1024w, /uploads-archive/2018/06/ss_kite_02-2-228x135.jpg 228w, /uploads-archive/2018/06/ss_kite_02-2.jpg 1231w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>変換方法を設定してインポートします。</p>
<h3>2. データを整える</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_03.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14020" src="/uploads-archive/2018/06/ss_kite_03-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_03-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_03-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_03-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_03-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_03.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>インポートしたままだと、クリッピングマスクを掛けていた場合に、マスクが外れてしまうことがあるなど、崩れることがあるので、調整します。</p>
<h3>3. アニメーションの設定</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_04.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14024" src="/uploads-archive/2018/06/ss_kite_04-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>アニメーションを設定したい要素があるレイヤーを選択し、<br />
Add Child &gt; Basic Animation でレイヤーにアニメーションを追加します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_04-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14021" src="/uploads-archive/2018/06/ss_kite_04-2-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-2-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-2-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-2-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-2-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04-2.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>transformなど、アニメーションの種類を選択します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_04-3.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14022" src="/uploads-archive/2018/06/ss_kite_04-3-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-3-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-3-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-3-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-3-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04-3.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>アニメーション後の値を設定します。<br />
アニメーション名は、あとで確認しやすいものに変更しておきます。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_04-4.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14023" src="/uploads-archive/2018/06/ss_kite_04-4-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-4-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-4-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-4-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-4-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04-4.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>タイムラインの時間をスライドさせると、アニメーションの状態を確認できます。</p>
<h3>4. アクションの設定</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_05.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14027" src="/uploads-archive/2018/06/ss_kite_05-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_05-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_05-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_05-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_05-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_05.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>クリックなど、アニメーションに紐づけたいアクションをつけたい要素のレイヤーに、<br />
Add Child &gt; Action でアクションを追加します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_05-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14025" src="/uploads-archive/2018/06/ss_kite_05-2-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_05-2-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_05-2-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_05-2-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_05-2-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_05-2.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>まず１つ目、Event Type で「No Event」を選択し、先程作成したアニメーションを選択します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_05-3.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14026" src="/uploads-archive/2018/06/ss_kite_05-3-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_05-3-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_05-3-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_05-3-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_05-3-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_05-3.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>2つ目のアクションを追加し、Event Type で「Mouse Clicked」を選択し、<br />
Action Type で Trigger Actions を選択し、<br />
「+」ボタンで１つ目で設定したアクションを追加します。</p>
<h3>5. テスト &amp; 動画の録画・出力</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_06.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14028" src="/uploads-archive/2018/06/ss_kite_06-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_06-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_06-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_06-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_06-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_06.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ウィンドウの上にある 動画ウィンドウアイコンの「Present」ボタンで実際の動作を確認できます。</p>
<p>その横のビデオカメラアイコンの「Export」ボタンで、動画を録画・出力できます。</p>
<p>↓作ったアニメーションの動画の例</p>
<div style="width: 854px;" class="wp-video"><video class="wp-video-shortcode" id="video-14001-8" width="854" height="480" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2018/06/faf827cbc1792d1a1a5a0ebbada13990.mp4?_=8" /><a href="/uploads-archive/2018/06/faf827cbc1792d1a1a5a0ebbada13990.mp4">/uploads-archive/2018/06/faf827cbc1792d1a1a5a0ebbada13990.mp4</a></video></div>


XDのデータからアニメーションつきのプロトタイプを作れるCompositor

Nginxの導入

<p class="code-line">2010年12月に WebGL が Chrome で利用可能となり、<br />
2011年には3月に Firefox、7月に Safari で利用可能となり、<br />
2013年10月には IE の最終版で WebGL も利用可能な IE11 が登場し、<br />
一般的なほとんどのブラウザで WebGL が利用可能となりました。</p>
<p class="code-line">それから5年経った2018年、ようやく GPU などのハード面でも WebGL の動作環境が一般的に整い、<br />
今、WebGL の実装の機会が増え、必要性も求められつつあります。</p>
<p class="code-line">私もそんな状況も踏まえ、WebGL の技術習得を本格的に目指そうと思い、<br />
WebGL のライブラリである Three.js について、これまでも何度か勉強してきたのですが、<br />
Three.js の 公式 DEMO をコピーして画像やモデルを差し替える程度に留まってしまい、<br />
技術を応用して新たに何かを作り出すというところまで行きつけずにいました。</p>
<p class="code-line">これはひょっとして、WebGL そのものや、3D グラフィックの仕組みについて理解できていないのが原因なのではないかと思うようになり、<br />
改めて素の WebGL について、学ぶことにいたしました。</p>
<p class="code-line">WebGL については、以下のサイトを中心に学ばせていただきました。<br />
<a class="link" title="https://wgld.org/" href="https://wgld.org/" target="_blank" rel="noopener">wgld.org</a><br />
（非常に詳しく、わかりやすく、これから WebGL を学ぶ方にとてもおすすめです。）</p>
<p class="code-line">こちらを中心に学ばせていただいた内容を基に、<br />
WebGL の基本の基本となる仕組みについて、私なりにまとめてみました。</p>
<ol>
<li class="code-line"><a href="#webgl1">WebGL とは</a></li>
<li class="code-line"><a href="#webgl2">WebGL における描画までの手順</a></li>
<li class="code-line"><a href="#webgl3">GLSL(OpenGL Shading Language) について</a></li>
<li class="code-line"><a href="#webgl4">シェーダーに渡す情報の基本となるモデル・ビュー・プロジェクションについて</a></li>
</ol>
<h2 id="webgl1" class="code-line">1. WebGL とは</h2>
<p class="code-line">WebGL とは、WEB ページ上で、OpenGL ES 2.0 を扱えるようにするための、JavaScript API のことです。<a title="https://ja.wikipedia.org/wiki/OpenGL" href="https://ja.wikipedia.org/wiki/OpenGL" target="_blank" rel="noopener">OpenGL</a> とは、GPU による高速な 2D・3D の画像描画処理を行い、画面に表示するための仕組みを提供しているライブラリで、オープン標準として、多くの GPU で利用可能です。そのため、WebGL を利用すると、WEB ページ上で高速な 2D・3D の画像描画処理が可能になります。<br />
WebGL で扱うことになる OpenGL ES 2.0 では、プログラマブルシェーダーを利用できるので、柔軟な描画を実現することができます。ただ、プログラマブルシェーダーの利用には <a href="https://ja.wikipedia.org/wiki/GLSL" target="_blank" rel="noopener">GLSL(OpenGL Shader Language)</a> というＣ言語ベースのプログラム言語での記述が必要となります。</p>
<h2 id="webgl2" class="code-line">2. WebGL における描画までの手順</h2>
<ol>
<li class="code-line">HTML から Canvas 要素を取得</li>
<li class="code-line">Canvas から WebGL コンテキストの取得</li>
<li class="code-line">シェーダーのコンパイル（シェーダーは GLSL で記述）</li>
<li class="code-line">モデルデータを用意（各頂点の座標・色・法線など）</li>
<li class="code-line">VBO(Vertex Buffer Object) の生成と通知</li>
<li class="code-line">（ポリゴンを扱う場合）IBO(Index Buffer Object) の生成と通知</li>
<li class="code-line">座標変換行列の生成と通知</li>
<li class="code-line">描画命令の発行</li>
<li class="code-line">Canvas を更新してレンダリング</li>
</ol>
<p class="code-line">参考: <a title="https://wgld.org/d/webgl/w014.html" href="https://wgld.org/d/webgl/w014.html" target="_blank" rel="noopener">wgld.org | WebGL: ポリゴンのレンダリング</a> より改変</p>
<h2 id="webgl3" class="code-line">3. GLSL(OpenGL Shading Language) について</h2>
<p class="code-line">GLSL(OpenGL Shading Language) は、OpenGL ES 2.0 以降で標準実装されたプログラマブルシェーダーを記述するためのプログラム言語です。 GLSL で記述するシェーダーは、以下の二つです。</p>
<ol>
<li class="code-line">頂点シェーダー: 頂点に関する情報</li>
<li class="code-line">フラグメントシェーダー: 色の情報 GLSL では描画処理を行うためのデータの型や組込関数が用意されています。以下はデータの一例です。</li>
</ol>
<h3 id="" class="code-line">変数の修飾子</h3>
<ul>
<li class="code-line">attribute 修飾子: 頂点の情報をシェーダー側で受け取る変数</li>
<li class="code-line">uniform 修飾子: すべての頂点に一律で渡す情報を渡すことが可能（モデル・ビュー・プロジェクションをかけ合わせた座標変換行列を WebGL から渡すのに利用）</li>
<li class="code-line">varying 修飾子: 頂点シェーダーとフラグメントシェーダーの橋渡し</li>
</ul>
<h3 id="" class="code-line">変数の型</h3>
<ul>
<li class="code-line">vec*: ベクトル; vec2 〜 vec4</li>
<li class="code-line">mat*: 正方行列; mat2 〜 mat4</li>
<li class="code-line">int: 整数</li>
<li class="code-line">float: 浮動小数点</li>
<li class="code-line">bool: 真偽</li>
</ul>
<p>GLSL の例</p>
<h4>頂点シェーダー</h4>
<p></p>

		<div id="crayon-649540264dae1786875938" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">頂点シェーダー</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">C</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
attribute vec3 position;
attribute vec4 color;
uniform   mat4 mvpMatrix;
varying   vec4 vColor;

void main(void) {
  vColor = color;
  gl_Position = mvpMatrix * vec4(position, 1.0);
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264dae1786875938-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-2">2</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-4">4</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-6">6</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-8">8</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264dae1786875938-1"><span class="crayon-m">attribute</span><span class="crayon-h"> </span><span class="crayon-e">vec3 </span><span class="crayon-i">position</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-2"><span class="crayon-m">attribute</span><span class="crayon-h"> </span><span class="crayon-e">vec4 </span><span class="crayon-i">color</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-3"><span class="crayon-e">uniform&nbsp;&nbsp; </span><span class="crayon-e">mat4 </span><span class="crayon-i">mvpMatrix</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-4"><span class="crayon-e">varying&nbsp;&nbsp; </span><span class="crayon-e">vec4 </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-6"><span class="crayon-t">void</span><span class="crayon-h"> </span><span class="crayon-e">main</span><span class="crayon-sy">(</span><span class="crayon-t">void</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">vColor</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">gl_Position</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">mvpMatrix</span><span class="crayon-h"> </span>*<span class="crayon-h"> </span><span class="crayon-e">vec4</span><span class="crayon-sy">(</span><span class="crayon-i">position</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">1.0</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-9"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h4>フラグメントシェーダー</h4>
<p></p>

		<div id="crayon-649540264dae6022538408" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">フラグメントシェーダー</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">C</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
precision mediump float;
varying vec4 vColor;
void main(void) {
  gl_FragColor = vColor;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264dae6022538408-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae6022538408-2">2</div><div class="crayon-num" data-line="crayon-649540264dae6022538408-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae6022538408-4">4</div><div class="crayon-num" data-line="crayon-649540264dae6022538408-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264dae6022538408-1"><span class="crayon-e">precision </span><span class="crayon-e">mediump </span><span class="crayon-t">float</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae6022538408-2"><span class="crayon-e">varying </span><span class="crayon-e">vec4 </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae6022538408-3"><span class="crayon-t">void</span><span class="crayon-h"> </span><span class="crayon-e">main</span><span class="crayon-sy">(</span><span class="crayon-t">void</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae6022538408-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">gl_FragColor</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae6022538408-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2 id="webgl4" class="code-line">4. シェーダーに渡す情報の基本となるモデル・ビュー・プロジェクションについて</h2>
<p>WebGL での描画処理までの過程では、シェーダーに頂点情報を渡す必要がありますが、<br />
その頂点情報はモデル・ビュー・プロジェクションの３つの座標を掛け合わされた情報で、<br />
WebGL を理解する上でこの３つについての理解はとても重要になりますので、ご紹介いたします。</p>
<p><a href="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13909" src="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png" alt="" width="725" height="495" srcset="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png 725w, /uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6-300x205.png 300w, /uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6-228x156.png 228w" sizes="(max-width: 725px) 100vw, 725px" /></a></p>
<p class="code-line code-active-line">モデルとは、描画する対象のことです。モデルの座標を回転させたりして変換することをモデル変換と呼びます ビューとは、対象を撮影するカメラにあたります。こちらの変換はビュー変換と呼びます。 プロジェクションとは、描画する範囲や遠近の状態のことです。こちらの変換はプロジェクション変換と呼びます</p>
<p>&nbsp;</p>
<p>↓ 参考までに、学習中に作った DEMO です。<br />
<a class="demo" href="https://sterfield.co.jp/demo/ninomiya/138/">DEMO</a></p>
<p>ソース元: <a href="https://wgld.org/d/webgl/w036.html" target="_blank" rel="noopener">wgld.org | WebGL: 点や線のレンダリング</a></p>

0594cb54b580680d3862632e4299b9e6.png

WebGLの仕組みについてまとめ直してみました

Valetを使うとローカル環境が簡単に出来る

<p>2018年は3Dの表現を使ったサイトが増えると予想されています（参考：<a href="http://photoshopvip.net/106875" target="_blank" rel="noopener">PHOTOSHOPVIP</a>）。実際、パララックスやWEBGLなど使ったウェブサイトを見かける機会が少しずつ増えています。</p>
<p>しかしながら、いざ3Dの表現を取り入れてみようと思っても、これまでずっとWEBは2Dでデザインを行ってきたこともあり、3Dの表現がどのような場面に向いていて、どのような使い方をすれば効果的なのか、なかなか思いつかなかったため、自分なりにメリットとデメリットを考えてみることにしました。</p>
<h2>メリット</h2>
<h3>リアル（現実の見た目に近い）</h3>
<ul>
<li class="p1">臨場感、シズル感が求められるものに効果的</li>
<li class="p1">状態を想像しやすい</li>
</ul>
<h3 class="p1">空間が広い ⇔ 奥行きがある</h3>
<ul>
<li class="p1">多くの情報を取り扱える可能性（重なる箇所への案内がネックになる）</li>
</ul>
<h3 class="p1">現実との連続的表現がしやすい(<span class="s1">AR</span>)</h3>
<ul>
<li class="p1">現実に近い状態で、大きさなどの確認ができる</li>
<li class="p1">非常に高い臨場感を表現できる可能性</li>
</ul>
<h3 class="p1">表現の幅が広がる</h3>
<ul>
<li class="p1">立体ならではの表現が直接的にできる</li>
<li class="p1">アート的表現の選択肢として</li>
<li class="p1">立体ならではの<span class="s1"> UI </span>の可能性</li>
</ul>
<h2>デメリット</h2>
<h3 class="p1">デバイスへ要求するパフォーマンスが大きくなる</h3>
<ul>
<li class="p1">軽量化の努力が必要</li>
<li class="p1">パフォーマンスの犠牲に似合った効果があるか、十分な検証が必要</li>
</ul>
<h3 class="p1">操作が煩雑化しがち</h3>
<ul>
<li class="p1">扱う軸が増えるので、その軸をどう扱うか、明確に定義する必要がある</li>
<li class="p1">現実と同じ操作はできない。あくまでも<span class="s1"> 2D </span>への擬似的な表現なので、現実とのギャップがある</li>
<li class="p1">現実と操作が違うので、共通化された操作を用いるか、慣れるまでの練習の機会が許されるか、操作説明がなければ、ユーザーは操作できない</li>
</ul>
<h3 class="p1">設置の難易度が高い</h3>
<ul>
<li class="p2">3D <span class="s2">の知識</span></li>
<li class="p2">デバイス、ブラウザに求められる最低パフォーマンスの高さ</li>
<li class="p1">利用できる空間の制限 ⇔ ある程度面積がなければ、<span class="s1">2D </span>の場合より複雑がゆえに視認性が下がりメリットが薄くなりがち</li>
</ul>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Web

2024/11/20

2024/08/30

2024/05/31

2024/04/19

2023/04/28

2021/06/24

2020/12/18

2020/09/16

2019/06/11

2018/11/14

2018/09/14

2018/08/22

2018/07/11

2018/06/13

2018/06/13

2018/05/10

2018/05/10

2018/04/11