入って分かった、 BtoB企業Webサイト実装のポイント

システム・テクノロジー 2015.04.23

嶌田千裕

BtoB企業とBtoC企業、両方の構築を経験してきたフロントエンドエンジニアが、プロジェクトを通して感じたBtoB企業Webサイト実装のポイントを語ります。

私はBtoC企業のWebサイトを多く手掛ける制作会社を経て、昨年イントリックスに入社しました。

BtoC企業とBtoB企業のWeb制作、当初はFEEの立場からだとそんなに変わらないように考えていましたが、
実際にプロジェクトに参加するうちに違いを感じることがありました。

そのうちの一つが、「グローバルサイト」「海外ローカルサイト」の重要性が高いということです。
BtoB企業では、グローバルサイトやローカルサイトにおいてもその企業の持つブランドイメージや技術力をしっかりと発信することが要件とされていることが多いのです。
これは海外売上比率が高い傾向のあるBtoB企業ならではだと思いました。

というわけで、ここからは実際にグローバルサイトやローカルサイトを構築した際に気を使ったポイント（フロントエンドエンジニア視点）をご紹介したいと思います！

言語の違いにまつわること

ダイアクリティカルマーク

私たちに馴染みのある日本語や英語以外の言語には、アクセントマークなどのダイアクリティカルマークが付く言語が多いです。

例えばフランス語やイタリア語にみられるアクセント記号、スペイン語のチルダなどがそれに当たります。
アクセント記号があると、そのぶん画面が密に見えたり、小さなサイズで潰れやすかったりと、
ベースとする文字サイズの設定に影響を及ぼす場合があります。

また、アルファベットのキャップライン※1やアセンダライン※2よりも上に配置されることがあるため、
確保している領域が狭いと、文字の上下が切れてしまうことも。

※1　キャップライン
大文字の上端の高さに引かれる水平線。
※2　アセンダーライン
小文字のf、h、l などの上端の高さの上端に引かれる水平線。

RTL（Right to Left）

アラビア語のような言語では、右から左に綴ります。
ものの起点が右になるので、段組みも右から左に流れますし、重要なものはより右に置かれます。

アラビア語と英語の2言語を持つサイトなど、LTRとRTLの両方に対応したモジュール設計を目指す場合には、
displayのflexやinline-blockなど文字の方向に連動するプロパティをうまく取り入れます。

float と flexbox の違い

国の違いにまつわること

CDN（Contents Delivery Network）

世界中から国を跨いでアクセスされるグローバルサイトでは、表示の遅さはどうしても発生してしまいます。
そのような場合、CDN（Contents Delivery Network）の導入を検討します。

個人的にはCDNというとものすごく高価なイメージがあったのですが、
最近は比較的手頃な価格帯のものもあるそうです。

回線の細さ

アジアや南米では日本ほどインターネット回線速度が速くないことがほとんどです。
日本サイトと同じ感覚で海外ローカルサイトを作ると、現地では表示に何十秒も時間がかかることも…。

普段以上に画像の最適化が重要とされたり、そもそも画像に頼りすぎないデザインが求められたりします。

SNS

日本でSNSといえば、Twitter や Facebook、Instagram などがメジャーですが、人気のあるSNSは国によって結構違うのです。

その国独自のSNSが発展していたり、メジャーなものでも政府によってアクセスがブロックされていたり…。
ですので、使おうと思っていたSNSが実はその国に対応していなかったり、初めて名前を聞くようなSNSのボタンを導入したり、ということが起こりえます。

まとめ

HTML・CSSを書く、その行為自体はちっとも変わらないのですが、
気に掛けるポイントが変わると、アウトプットされるコードも変わるということが自分自身とても新鮮でした。
（そして、慣れるまでは大変で、頭を悩ませることでもありました…ｗ）

これは、足立が前の記事でも言っていますが、BtoB企業のWebサイトを手がける上での、ハードルでもあり、同時に楽しさ（醍醐味）でもあると思います。

これからも、まだであったことのない言語やお国事情に頭を悩ませながら、
グローバルサイト・ローカルサイト構築の知見を溜めていきたいと思います！