制作経緯

富山のこだわり米農家から安全でおいしい有機米・無農薬米・特別栽培米を全国へお届けする農家直売サイトです。 約10年間ほど静的サイトで直売サイトを運用されてきましたが、利用していたカートサービスが終了となってしまうので、カートサービス変更の機会にレンタルサーバー契約、ドメイン取得、SSL化、CMS化、レスポンシブに対応したサイトへのリニューアルの話を制作パートナー様からいただきました。

アピールポイント

カートサービス終了期限の関係と予算が決まっていた事もあり、特に難しい機能は利用していませんので、ゆったりした雰囲気を味わいながら、光男の米栽培のこだわりポイントや活動内容を知っていただけるようにレスポンシブ対応ではありますが、なるべくデザインファイルに忠実にデザイン設定を行いました。 また、毎年の収穫の際に手早く簡単に新年度分の商品販売準備を行なえる更新方法を考えてみました。

デザインの再現性を高めるユニットの拡張

文字と画像のバランスや文章のニュアンス等によっては基本で設定されたユニットの余白サイズとは異なるサイズにしたい場合も多く、特定のデザインを手軽に適用させることも出来るように、よく利用するテキストユニットの[p]、[ul]、[ol]、[dl]タグにclassを適用できるようにしました。テキストユニットのセレクトに追加するケースもありますが、タグ別に何種も設定を追加するとセレクト選択時の操作性が悪くなるので、class入力欄を拡張する方法をとっています。 メディアユニットの画像下の余白の方は属性で数種類の余白をセレクタで選択できるようになっています。

テキストユニットのclass拡張

メディア画像の余白選択

毎年の商品案内メニューの更新を簡単に

トップページの商品案内メニューは変更があっても更新が簡単に出来るように、モジュールのカスタムフィールドグループで商品メニューを作成しました。

トップページの商品案内メニュー

商品案内のメニューの設定画面

カスタムユニットでカート設定とカートシステムへデータの引き渡し

[ カートの設定 ]

• 精米方法のセレクト設定は（玄米/5分/7分/白米）の中から最大4種類から選択することができます。（商品によってセレクト数や精米方法選択が異なるので、対応できるようにしました。）
• 在庫選択状態により[カートに入れる]ボタンのテキストを[準備中]や[販売終了]に変更させたり、ボタンが有効化/無効化されるようになっています。

[ 商品データの引き渡し ] 「カートに入れる」ボタンクリックでご注文された米の種類と重量のコード組み合わせ、精米方法（玄米/5分/7分/白米）セレクトの選択判定でカートシステムに注文商品データを引き渡します。

商品のご注文画面

商品説明設定

ご注文パーツと注文時のデータの設定

a-blog cms を採用した理由

利用していたカートサービスの終了で安価なネットショップサイトでの構築も制作パートナーさんの方で考えられたようですが、光男の米サイトはネットショップというより、活動案内的なサイトなのでネットショップのテンプレートが合わず、リニューアルでも従来の「ホームページ」＋「カートボタン埋め込み」という形にされたそうです。以前からa-blog cmsを採用したCMSサイトを数件一緒に制作させていただいており、更新のしやすさではやはりWordPressよりa-blog cmsに軍配があがるとa-blog cmsの採用が決定しました。 公開が新米販売開始時期に近かったので、商品メニュー設定や商品カート設定がほぼ整った状態で納品したのでオーナーさんの方では商品関連の大きな更新は今年の9月頃までないと思いますが、商品カートの在庫の設定やコメント欄、営業日カレンダー、お知らせ、ブログは頻繁に更新・活用いただけているようです。

決済についてはクレジットカード決済の必要ないとの事でしたのでa-blog cmsのカート機能を利用しては？とも思ったのですが、ご注文総重量とお届け地域による送料設定等が簡単に出来るのかという疑問があったのとカートの切替え時期が迫っていましたので、従来と同じようなカートサービスを利用することになりました。 前回のa-blog cms LIVEで秋頃にa-blog cmsのカート拡張アプリを用意されているとお聞きしました。カートの機能が強化が凄そうなので、楽しみにしています。

2023年に開催される「第22回国際⾃動制御連盟総会」（IFAC World Congress 2023）の公式Webサイトを a-blog cms で構築しました。

IFACは制御科学技術の理論と応用を研究テーマとし、工業分野のみならず、理学、医学、農学、環境学、社会、 経済学等幅広い学術分野について「自動制御」という視点で横断的な研究を行っています。3年毎に開催される世界大会期間中は約2,500名の参加者が集まり、議論を交わします。今回は1981年に京都で開催されて以来、42年ぶりの日本での開催となります。

国際会議のサイトであることから、論文の募集やタイムスケジュールなど高い更新性、セキュリティを求められるため、a-blog cms をコンテンツ管理システムに選定いたしました。また、世界各国から期待の寄せられる会議であることから、システムの制約にとらわれることなく、デザインの作り込みを行いやすいという点でもアドバンテージとなりました。

カスタムユニットによる自由なページのレイアウト

本サイトは下記のページに分かれます。

• 主催者挨拶、会議について
• 論文の募集要項、参加登録について
• タイムスケジュール
• 開催地・会場の情報
• スポンサー、出展者のリンク
• 過去のイベントへのリンク
• ロゴのダウンロード

それぞれのページがCMSで更新できるように、次のようなカスタムユニットを開発しました。

タイムスケジュール用のユニット

スポンサーバナー用のユニット（PNG形式とSVG形式を掲載できるように）

また、更新しやすいように画像の横並びは、ユニットの「グループ」で「2カラム」のように指定するのではなく、カスタムユニットで登録できるようにしました。

画像の横並びユニット

画像の横並びにカスタムユニットを使用することで、セクションごとの色分けを「グループ」で表現できました。

グループによりセクションの色分け

モジュールによるトップページの更新

トップページの「Important Dates」や「About Yokohama」のスライドショーはマウスオンで編集できるようにしました。マウスオンで編集画面がモーダルで立ち上がる、パーツごとに更新する箇所をまとめられるのは他の製品にない魅力です。

イベントの編集

スライドショーの編集

ナビゲーションを一元管理しメンテナンスしやすく

ヘッダーのドロップダウンメニュー、スマホのナビゲーション、フッターサイトマップは、ナビゲーションモジュールにより一括管理するようにしました。また、各ページのローカルナビゲーションについては、見出しユニットから自動的に生成することで、管理の工数が最小限になるようにしました。

英語版の管理画面も用意

a-blog cmsでは英語版の管理画面も用意されているので、日本以外のメンバーが増えたときにも更新できるようになっています。一部日本語のままの箇所もありますが、今回の国際会議の用途では導入の決め手の一つとなりました。

概要

タカハラコーポレーション様のオフィシャルサイトです。 自社開発されている超高品質のビバフィルムを活用したフィルム・テープといった製品から、建物のクリーニングなど環境の美化に関わるサービスを紹介しています。 今回サイトのリニューアルのお話をいただいた際のご要望として「集客を強化」し、リード獲得を目指したサイトにしたいとご要望をいただきました。 その上でマーケティングとブランディングの両輪を回すことを念頭に、企画から設計、デザイン、サイト構築まで一貫して制作しました。

CMS活用経緯

CMS活用の理由は、大きく2点あります。 一つは情報量の多いページを複数展開するためです。 旧サイトの課題として、魅力的な製品が1ページにまとめられており、商品の魅力を十分に伝えきれていない点がありました。さらに製品によってターゲットやニーズが様々であったため、各商品ページをLPとして機能させる必要がありました。 もう一つは、柔軟性の高いフォームが必要だった点です。 サイトコンバージョンの資料請求やお問い合わせには、もともと業界情報サイトへ依存率が高かったため、こちらも自社で完結することを目指し、カスタマイズ性の高い a-blog cms で実現することとなりました。

デザインのねらい

タカハラコーポレーション様の「建物の美観を維持する企業イメージ」に合わせ、サイト全体で清潔感とクリーンさを表現したトンマナに設定しています。 また、事業やサービス領域が広いため、様々な目的を持ったユーザの来訪が予想されていました。 訪れたユーザがスムーズに必要な情報に辿り着けるように、導線やユーザービリティに配慮して制作しています。

＞TOPページはこちら

TOPページのメインビジュアル1

TOPページのメインビジュアル2

カテゴリや用途によってサービスを検索できる

多様な製品・サービスがあるため、カテゴリーとは別に「製品の形状」や「用途」といった属性をもたせました。これにより製品知識が少ないお客様でも、ご希望に沿った製品を紹介できるようにしました。

＞一覧ページはこちら

製品検索ページ

大ボリュームのコンテンツもテンプレート化することで制作しやすく

各商品ごとに、情報量とターゲットキーワードを意識したコンテンツの制作をこころがけました。 製品の特徴やニーズ、利用シーンなど、製品に関わる情報を掲載することで、各商品ページがランディングページとなるよう制作しました。 このような大ボリュームな情報もテンプレート化してあるため、20点近くある製品ページも一気に制作することができました。 また今後製品が増えた場合でも簡単に集客力のあるページ作成が行なえます。

＞製品ページはこちら

製品詳細ページ

製品詳細ページの編集画面

フォームをカスタマイズして、資料のダウンロードを実装

製品カタログやチラシなどを選択して、必要情報を入れていただくと資料ダウンロードができます。 見た目も通常のチェックボックスにせず表紙のビジュアルを見せることで、押しやすくしています。 これにより、目当ての製品以外にも気になる製品を直感的に気軽にダウンロードしていただけることも狙っています。

資料ダウンロードフォーム

確認画面

CMSの特性を活かしたコンテンツを導入し、今後も成長するサイトを目指しています

今回CMSの活用により、今まで目立たなかった製品にもスポットが当たるようになりました。 さらに今後は制作して終了ではなく、コンテンツの追加や改善カスタマイズを行い、「成長するサイト」を視野に入れています。 具体的には、CMSの特性を活かした「導入実績」を実装し、そこで投稿された実績を各商品ページに表示させる想定です。これでより製品導入をイメージしやすくなると考えています。 また子ブログの機能を活用し、「ビバブロ」として企業オウンドメディアブログを開設します。工場・店舗の環境美化に関するプロ視点の情報を発信し、ブランディングや集客に活用する予定です。 （現在絶賛制作中！）

概要

本サイトはスターク株式会社様のオフィシャルサイトです。 スマート解体を掲げ、高い専門性を活かした解体コンシェルジュとして、ご依頼から完了まで徹底サポートするスターク株式会社の事業内容をご紹介しています。

デザインねらい

現場イメージの強い解体業界ですが、スターク様のビジネスでは、現場にITを導入し、よりスマートに安心にサービスをご提供できるといった特徴がありました。 そこで解体のイメージを伝えつつインテリジェンスな雰囲気も伝えるため、軽やかな色調や疾走感のあるデザイン表現で、シンプルかつ親切な表現でサービス内容を伝えています。 これにより、重機や建築物などを連想させる無骨なイメージのサイトが多い建設業の中で、イメージの差別化を図っています。

サイトオーナー様の感想

スタートアップ企業ということもあり、事業内容を具体化していくところからクライアント様と一緒になって考えました。 「スマート解体」というコンセプトに落とし込んだことで、お客様自身も自分たちの強みを考えやすくなったとともに、今後ブログ記事の内容に関してもテーマを持たせやすくなったと大変満足していただけました。

CMS導入経緯

ブログ、ニュース、解体実績など、更新性の高いサイトにしたいとのご要望があり、CMSを導入いたしました。

CMS活用箇所1

「ブログ」、「ニュース」、「解体実績」にてCMSを活用しております。

▲ブログ

▲ニュース

▲解体実績（投稿記事はすべてダミーです。）

▲解体実績　詳細（投稿記事はすべてダミーです。）

CMS活用箇所2

「TOP」と「業務領域」にもCMSを活用しました。

概要

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

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

多言語サイトの設計

多言語対応として求めららた言語は、英語、中国語、台湾語、タイ語、ベトナム語の５つでした。 今回は、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株式会社までお問い合わせください。