我が名はアシタカ！ベンガル語のサイトを作れと言われた！何をどうすれば良いか！

### はじめに
ベンガル語のサイトを作るなんて状況に陥るアシタカは筆者くらいかもしれませんが、自分が知らない言語のサイトや広告物などを制作する状況になった方々（受難アシタカ）が参考にできるような記事にしていきたいと思います。

対象読者は主に「web/graphicデザイナー」及び「フロントエンドエンジニア」を想定しています。

### ベンガル語とは何ぞ？ 制作経緯は？
そもそもベンガル語ですが、バングラデシュの公用語です。余談ですがバングラデシュの国旗は日本のものと似ていて（というか色違いなだけ）少し親近感を覚えますよ。
筆者の所属する会社ではグローバルな事業を行っており、既にベトナムや韓国、英語、簡体字など数種の多言語サイトを持っていました。今回その事業に付随する形で新たにバングラデシュ向けのサイトを制作することになったのです。

### 結論
先に制作時の注意事項を箇条書しておきます。

- lang属性は指定
- Adobe関連の設定に注意
 -- Ai（Illustrator）
 -- Ps（Photoshop）
- フォントは Kohinoor Bangla がベター？
- 翻訳者との密な連携（MUST）

lang属性について
---
webサイトの中身が何語なのかを判別するために指定する属性です。
詳細は[MDNのlangに関するページ](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang)をご覧ください。
SEO的には不要という情報もありますが、下記スクリーンショットで記述されているように指定は推奨されています。
![スクリーンショット 2023-05-16 16.22.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368730/776e6e1d-8c82-05a3-8072-a14ea0ac0e6e.png)

Adobe関連の設定
---
筆者の制作環境
```
Mac バージョン12.6.5（MacOS Monterey）
Adobe Illustrator 2023
Adobe Photoshop 2023
```
上記の設定で以下に説明していきます。
ところで、ウェブ制作の話なのに何故「Adobe 関連の説明？」と思われる方もいらっしゃるかと思います。
これは、ウェブデザイナーのみならず非エンジニア（例：グラフィックデザイナー）がウェブ用のバナー画像を制作するシチュエーションも所属する企業によってはあると思いますので、そういった方々にも参考になればと書いていきます。

まず、ベンガル語をそのままコピペすると下記のように文字列に~~不要な~~点が付いてしまう状態になります。

::: note info
この「点」は「ヴィラーマ」と呼ぶそうで付いていても間違いではないようです。
@scivola さん　教えていただき誠にありがとうございます！
:::
![dew.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368730/4d34cc1b-7a2c-5d42-3223-d14b3507ffaa.png)



そのため最初にベンガル語の仕様に準拠させる設定を行う必要があります。
Illustrator の設定から進めていきます。
- ［環境設定］（com + k）-［テキスト］-［言語オプション］で［インド言語のオプションを表示］にチェックして右下の［OK］
![スクリーンショット 2023-05-16 16.35.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368730/19ebaf9c-0a9b-83aa-16b6-a151e912842c.png)

- ［段落パネル］の右上にある詳細オプションアイコンをクリックしてオプションを開き［中東言語および南アジア言語単数行コンポーザー］をチェック
![スクリーンショット 2023-05-16 16.38.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368730/537fdb63-4d16-7621-f8b3-7e4b90fd2808.png)

::: note info
オプションを開いて［中東言語および南アジア言語単数行コンポーザー］が表示されていない場合は、はじめの［環境設定］での［インド言語のオプションを表示］のチェックがうまく反映されていない可能性があります。
:::

補足：［単数行コンポーザー］と［段落コンポーザー］の違い
![スクリーンショット 2023-05-16 16.42.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368730/0a214fea-307e-d9eb-32c6-c8d95589ea32.png)
[InDesignの文字組アキ量設定とコンポーザーの使い方](https://helpx.adobe.com/jp/indesign/how-to/introduction-guide-text-space.html)


ここまで設定が完了すればベンガル語対応のフォントを使うと、下記のように正常に表示されます。
![スクリーンショット 2023-05-16 16.41.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368730/80a4bea6-8d04-3e66-8b90-3c1ae017b269.png)


::: note alert
ベンガル語での作業後は **「設定を元（日本語仕様）に戻し忘れないように注意」** してください。
:::

Photoshop に関しては Illustrator のような諸設定は特にせずとも対応フォント（Kohinoor Bangla）を指定してやると正常な形で表示されました。
もし、別途必要な設定をご存じの方はコメントなどいただけますとありがたく存じます。


フォントは Kohinoor Bangla がベター？
---
macOS Monterey 及び iOS の組み込みフォントに Kohinoor Bangla がありました。
視認性に優れたサンセリフ書体で、下の写真のように font-weight も豊富な特徴もあって採用となりました。
![スクリーンショット 2023-05-16 16.40.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368730/9b7ac537-1288-ca9a-bca7-11fc067e2142.png)
webサイトと並行して、別デザイナーによるパンフレット制作も進んでいましたが、そちらも同フォントで統一されています。
webサイトでは `font-family`にも Kohinoor Bangla を最初に指定しています。


翻訳者との密な連携（MUST）
---
最も重要です。ここが滞ると制作全体のスケジュールに影響が出ます。

弊社では、制作時はディレクターが用意した Google スプレッドシートを元に、先方の翻訳者に記入していただく形を採っていました。
スプレッドシートの活用や有用性は知っている方も多いと思うので割愛しますが、**リアルタイムでの編集というメリットが落とし穴**になりかけました。
下の写真のように翻訳シートが用意されており、ディレクターが翻訳者と連絡を取り合って一旦翻訳が落ち着いたタイミングでこちらが制作作業を進める手はずになっておりました。
![スクリーンショット 2023-05-16 16.11.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368730/cfd2d4d6-30c5-fb5f-d909-77575bdff90a.png)

しかし**その連絡後に翻訳者がなんと微調整をちょくちょくしていた**そうで。。。
幸いにも、ディレクターがスプレッドシートの履歴から異変を察知してすぐに微調整作業を止めてもらいましたが、気づくのがもっと遅かったらと想像すると悪寒がしました。
翻訳者は外国の方なこともあってよく理解できなかったのかもしれません。
他言語サイト・広告物などを制作する際は相手が外国の方の場合、いつも以上に意思疎通を意識してやり取りしたほうが良いでしょうね。


### まとめ
他言語サイト・広告物の制作は修正作業に神経を使います。少しの修正ならまだしも一挙に複数箇所の修正が届いた時、集中して修正作業に臨まないと**どこを修正したか見失ってしまうと終わり**です。その場合は潔く、該当箇所の周辺を初めからやり直したほうが早いと思います（実体験に基づく）。

あと、言語独自の特徴を翻訳者に聞いたり、調べておいたりすることも大事だと感じました。
例えば、ベトナム語は改行位置で意味が変わってきたりするそうで紙媒体の制作では苦労しているとうちのグラフィックデザイナーが言っていましたので。

自分の知らない言語で、webサイトや広告物を作る際の注意点を実体験を交えてお話させていただきました。
ここで述べた以外にも、他言語での制作時の注意点などがありましたら情報共有いただけますと嬉しいです！

ここまで読んでいただきありがとうございました！

参考情報
---
[イラレでベンガル語やヒンディー語のフォントがちゃんと表示されない！文字化け？！誤変換？！しちゃうときの解決方法　Mac＋Adobe CCのIllustrator - tontotakumi.com](https://tontotakumi.com/creative/illustrator-multi/)