NEW
Ver.3.2 すべての体験をアップデート

  1. トップ

ブランドサイト

有限会社塩澤工業

概要

塩澤工業様は、愛知県小牧市で40年以上続く工作機械・産業機械の会社です。 創業当時から組立を主力として、「キサゲ加工」や「組立調整技術」など長い時間を経て習得した多くの高度な技術や知見が蓄えられ、現在では、メーカーや型式を問わずあらゆる工作機械・産業機械に対応できます。図面や部品がないものやメーカー対応外になったものでも、どんなに古い機械も、新品同様の動きと精度を復元できる工作機械・産業機械に特化したエンジニア集団です。

当初、塩澤工業様よりご依頼いただきました内容はZohoを使ったCRM(顧客管理)による業務効率化で、Webサイトの改修はCRMと連携するため Zoho Forms を組み込むためのフォーム部分改良のみでした。 ですが、お話を進めて行く上で海外をターゲットにして行くということになり、Webサイトの多言語対応が必要となったため a-blog cms によるフルサイトリニューアルすることになりました。

多言語サイトの設計

多言語対応として求めららた言語は、英語、中国語、台湾語、タイ語、ベトナム語の5つでした。 今回は、a-blog cms の拡張アプリ(Google Translate)を使って対応しました。 設計としては、更新コンテンツである「技術紹介、事例紹介、お知らせ」をブログで分けて、さらに言語ごとに同様にブログを分けました。 コンテンツごとにブログを分けることで、運用上、コンテンツ管理も分けることができるので公開ミスなどのリスクを軽減できます。例えば、「技術紹介」のエントリーを公開する場合に、他のコンテンツ(お知らせ等)が混在していると、英語のみで公開すべき項目を別の担当者が間違えて他の言語でも公開してしまうなどのミスを防止しやすくなります。 また言語ごとにログインアカウントを渡すことで、公開前に事前に翻訳内容を現地の駐在員やネイティブなどに事前に確認してもらうことも容易になります。 a-blog cms ではブログを分けることで、運用の柔軟性とメンテナンス性を高めることができます。




多言語サイトの作成で気をつけること

拡張アプリ(Google Translate)が対応するのは、基本的にエントリーの内容だけになりますが、多言語対応は、それ以外にも、翻訳が必要な箇所があります。テンプレートに直接記載している日本語の箇所やお問い合わせフォームのURL(今回は、外部フォームを使っている)や自動返信メール、フッターのサイトマップなどです。対応としては、設計段階で、この辺りは事前に洗い出し、テンプレートを多言語分用意する、変更が見込まれる場所は、あらかじめカスタムフィールドを用意するなどして対応しました。 下図は、用意したブログのカスタムフィールドです。



自動翻訳の限界

ここまで読むと結構、多言語対応簡単なのでは?と思う方もいるかと思いますが、実は、自動翻訳自体は、あまり使えないことが多いです。その多くの原因は、日本語の文法にあります。日本語は、主語を記載しないことが多いので、翻訳する際には、そのあたりを意識して翻訳用の日本語を作成することが重要です。ただ、どんなに頑張っても自動翻訳の限界があります。 特に海外ユーザー向けとなるとサイト情報の信頼性として翻訳精度が非常に大切になります。例えば、日本人向けのサイトで、日本語がおかしなサイトだと「このサイト大丈夫かな?」など信頼性に欠ける印象を受けると思います。ベース翻訳は、Google翻訳でも良いですが、必ずネイティブチェックを入れることをお勧めします。 余談ですが、みなさん、DeepLという翻訳サイトをご存知ですか。個人的には、Google翻訳よりも翻訳精度が高いと思っています。将来的に a-blog cms の多言語プラグイン設定に、DeepLも入れて欲しいと思っております。アップルップルさん、ぜひ、ご検討ください。

まとめ

多言語サイトを作成する場合、ブログやニュースなど更新が必要な部分は、設計段階で考えやすいのですが、フォーム、自動返信メール、ダウンロード資料などを以外と忘れがちになります。 設計段階で、これらを検討しておくことは非常に重要です。 また多言語の翻訳をするのであれば、Googleなどの自動翻訳はベースとする翻訳文として利用し、なるべくネイティブレベルのチェックを入れるようにした方が良いです。

今回、Zoho Forms(フォーム)と Zoho CRM(顧客管理)など導入も図っております。Webサイトの多言語対応をする際、連携となるCRM側でもデータの持ち方など様々なことを考慮する必要があります。 また、各国言語でのお問い合わせ情報を誰が確認・対応するかなど運用面も重要となります。

多言語サイト作成やCRM連携などもう少し話を聞きたい方は、ぜひ、ONiWA株式会社までお問い合わせください。


彫刻家 佐々倉文

サイトの概要とCMS採用の経緯

本サイトは彫刻家 佐々倉文 様 の個展や作品の紹介、活動状況を掲載するための、日本語、英語の二言語サイトです。




既存サイトを日本語と英語の二言語サイトへリニューアルするという要件を実現すべく、多言語サイトの管理がしやすく、また通常の運用にあたってもウェブに詳しくない方でも作業しやすい実装が可能なa-blog cmsを採用しました。

日本語・英語の多言語管理




構築したブログは1つですが、エイリアス機能やルール機能を利用する事と、各カスタムフィールドやユニットを「共通情報」「日本語の情報」「英語の情報」に分ける事で、同一の管理画面ページ内で二言語分の情報を分かりやすく登録する事ができるようになりました。

以前、WordPressサイトで多言語サイトのリニューアルを行うにあたり、いくつかのプラグインを試した事があったのですが、各言語毎の情報がどうしても同一画面で管理できず、煩雑な運用になりがちでした。

a-blog cmsによる多言語サイトは管理しやすく情報の記入漏れがない運用が可能であると感じました。

多言語化において気を付けた点はエントリーのSEO設定です。 通常、SEO設定を入力しなくても、エントリーのタイトルがSEO設定に適用されますが、英語の場合はそのようにはできなかったため、入力された英語のエントリータイトルが英語版のSEO設定のカスタムフィールドに反映されるようJavaScriptで対応しました。

出力側では、同一のOGPモジュールの設定をルールで分けて運用するようにしています。


作品展のエントリーに、展示作品のエントリーを表示

「作品」と、「作品展」のページはそれぞれエントリーで管理しています。 作品展のエントリーでは、展示の情報や展示風景の写真を登録できるようにしていますが、エントリーの下部に、そこで展示された作品をポストインクルード機能で表示できるようにしています。

例えば「個展A」のエントリーに、「作品A」のエントリーを表示させる場合は、「作品A」のエントリーに用意したカスタムフィールドに「個展A」と入力する事で表示できるように実装しました。

以下の画像は「作品展」のエントリーですが、ページ下部に、「展示された作品」のエントリー一覧が表示されるようになっています。



管理画面側では、「作品」のエントリーに用意したカスタムフィールドに、表示させたい「作品展」のエントリー名を入力して頂く事で、表示が可能になるようにしています。



作品と作品展をデザインに関して

制作をご依頼を下さった佐々倉様は、高知県出身で、現在茨城県の笠間市を拠点に制作活動を行っている彫刻家です。

今回の制作においては、主役である作品が際立つように、白を基調に、無駄な装飾を省き、要素の余白やアニメーションのタイミングなどの「間」をゆったりと持たせました。

また、ウェブでもギャラリーの雰囲気を再現できるように努めました。

例えば、作品展のエントリーでは、実際の個展のように、個展に掲示する導入文や作品展の風景を登録できるようにし、最後に個々の作品をじっくりと閲覧できる作品一覧セクションを設けました。 ファーストビューには、物語の始まりを表現するために少しゆったり目のアニメーションを採用しています。



また、同じ作品でも角度によって表情が異なるため、作品のエントリー一覧では、別カットの写真重ねてチラ見せできるようにしています。



この正方形の写真は、作品エントリーに登録されるスライドショー画像をCMSでリサイズさせて表示しています。 CMSで手軽にリサイズさせる事ができるため、運用的に省エネが計れました。

手間の少ない運用が可能に

他にも、カスタムフィールドを活用することで、運用者がどこに何を書いたら良いのかを迷わないようにしたり、トップページに表示させる直近の展示情報を最新のエントリーから読み込んだりと、a-blog cms によって運用者の手間を極力減らす事が可能になりました。 管理画面のメニューをカスタマイズしやすい点も、気に入っています。

サイトを構築する側は、やりたい事が実現できて構築しやすい、運用する側は、手間を減らして管理しやすい。当たり前と言えば当たり前の事なのですが、a-blog cms はそんなサイトが構築しやすいCMSであると感じています。


FACTORY900 (ファクトリー900)

アイウェアブランド「FACTORY900」の公式サイトです。

リニューアルするにあたり、一番重要視したのは更新のしやすさ。 これまで静的HTMLで組まれたサイトを Dreamweaver で更新していましたが、担当者がWeb専属ではなかったのもあり、更新が滞りがちでした。

「専門知識がなくてもブログ感覚で更新できること」

それが、a-blog cms を導入したきっかけでした。

ハイブリッドな多言語サイト

既存のサイトにはすでに日本語と英語サイトがあり、更新の煩わしさが少しでも減るようにサイトを設計しました。

ユニットの多言語化

一部のカテゴリーに 多言語ユニット を導入することで、更新作業の簡略化を図りました。 例えば:商品紹介ページでは画像は共通で使用できるため、テキストユニットのみを多言語化。



サイズ等の共通の情報は、カスタムユニットで英語タブの入力欄が空のときは日本語の情報を表示するようにカスタマイズ。英語タブに入力があった場合のみ日本語の情報を上書きします。

日本語と英語のブログコードを統一

「お知らせ」は日本語と英語で完全に別の情報だったため、それぞれを個別の子ブログにしました。 ここで問題となったのが 子ブログで同一のブログコードを使用できないということでした。 ですが、日本語も英語もお知らせは「news」にしたいのです。そこで、ブログコードを以下のように設定しました。

  • 日本語のブログコード: news
  • 英語のブログコード: en/news


エイリアスを使った多言語化 をすると、設定したコードが自動でURLに含まれます。



このままでは、英語のお知らせのURLが en/en/news と en が重複してしまうため、校正オプションの拡張 を使って出力する文字列を修正しています。

複数サイトを一元管理

これまで外部のフリーブログを利用していましたが、HTTPS対応が未定ということもあり、サブドメイン拡張ライセンスを使用してブログを a-blog cms 内に移行しました。 もとのブログからMovable Type形式のテキストデータを書き出すことができたので、インポートも問題なくできました。



ひとつの a-blog cms 内で情報を管理できるようになり、ブログ記事と商品ページの関連付けも容易になりました。今後、より情報が探しやすくなるように改善していく予定です。

子ブログとして個別のデザインのサイトをどんどん追加できるのも嬉しい機能です。



テーマを継承したり、親ブログで設定済みのモジュールを子ブログで流用したりと、メンテナンス性が高いのも助かっています。今後増えるであろう特設サイトも管理しやすくなるはずです。

a-blog cms を導入して

カスタマイズの多様性は目を見張るものがあり、クライアントがやりたいことはカスタマイズで大概できてしまうのも a-blog cms の魅力です。 導入から2年半近く経ちますが、更新の頻度は劇的に上がり、公式サイトとして最新の情報を随時お届けしています。少しずつ機能を追加しているのも良い方向に作用していると思います。


太洋商事株式会社

サイトリニューアルにあたって

冷蔵設備などに使われる冷媒ガスを取り扱う太洋商事株式会社さまのコーポレートサイトのリニューアルをさせていただきました。Webサイトリニューアルにあたり、いただいたご要望は以下の通りです。

  • 信頼感のあるブランドイメージを構築したい
  • マルチデバイス対応(スマートフォン、タブレット)
  • 社内の誰でもサイトを更新できるようにしたい
  • 海外進出のためにサイトを英語対応したい

トップページ(PCビュー)

事業案内ページ(PCビュー)

配色・ビジュアルデザイン

「”地球環境の保護”と”快適な暮らし”の共存」というコーポレートメッセージを表現するために、ダイナミックな画像・写真によるブランドイメージ向上と、事業についての情報を伝える具体性のバランスを取ったデザインをご提案しました。 配色には、大地や空、緑、海を感じさせるアースカラーを導入し、見出しのあしらいなどでモダンな印象を演出しています。 Webフォントサービス「FONTPLUS」を導入して、見出しに「筑紫ゴシック Pro」を使用しました。モダンなたたずまいの中にも骨太な印象のあるフォントです。

動き・エフェクト

ご要望を受けて、モダンなアニメーション、エフェクトを導入しました。ブランドイメージ向上、高級感の演出だけではなく、読ませたいコンテンツをより目立たせる狙いがあります。

コンテンツ整理とブランド価値の再発掘


商品写真の撮影も担当しました


以前のWebサイトのコンテンツや既存の会社案内の内容から、よりWebとして伝わりやすく・運用しやすいコンテンツを再設計しました。中部エリアにおける業界のパイオニアであり、幅広い事業と競合他社との違いをアピールすることを意識しています。

Webサイトの掲載コンテンツ刷新のために、冷媒ガスなどの取り扱い商品の写真撮影と取材を行いました。カタログ的な写真だけではなく、商品の新たな一面を発掘できるような華やかなビジュアルを制作しています。

「誰でも運用できる」体制を整える


デザイン性の高いカスタムユニットで柔軟なエントリーを作成


「HTMLの知識がなくてもWebサイトを更新できるようにしたい」というご要望を受けて、a-blog cmsの導入をご提案しました。カスタムフィールドやカスタムユニットを活用して、「ログインして、変更したい部分をクリックする」という基本のルールだけを覚えればWebサイトを自由に更新できるように構築しました。


頻繁に使う機能は目立つボタンを設置


更新頻度が高い「お知らせ」はひと目でわかる位置にエントリー追加ボタンを設置しました。 クライアントさまのオフィスで更新レクチャーをした際には、HTMLの知識がないスタッフの方でも更新ができるとご好評をいただいています。

クライアントさま専用の更新マニュアルを作成し、更新レクチャーを受けていない方でもWebサイトを触れる体制を目指しました。

多言語対応機能でグローバルな情報発信を


多言語ユニット機能とカスタムフィールドを組み合わせた英語版サイト


!クライアントさまに海外拠点があるため、英語での情報発信ができるようにa-blog cmsの多言語ユニット機能を導入して日本語・英語の2言語に対応しました。

ルール機能とエイリアス機能を組み合わせて、ユーザーエージェントと日・英バージョン別に細やかなご要望にお応えできる設定をしています。


  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加

お試し環境の用意はおまかせ!
a-blog cms のテスト環境を30日間無料でお試しいただけます