この記事について

今回ご紹介するのは、神奈川県相模原市で、自動包装機や省力化機器を中心に設計・製造する「オリオン機械工業株式会社」様のWebサイトリニューアルです。

創業以来、確かな技術力でお客様のニーズに応え続けてこられたオリオン様。今回のリニューアルでは、その高い技術力はもちろん、現場で働く皆さんの熱意や、一社一社に寄り添う誠実な姿勢を可視化することを目指しました。

約半年という制作期間の中で、オリオン様の社内の方々にも深く関わっていただき、対話を重ねながら一つひとつの要素を形にしていきました。

このブログでは、そうした制作の裏側や、制作を進める中で私たちが大切にしてきたことをお伝えしていきます。

 

ご相談のきっかけと、訪問でのヒアリング

もともと運用されていたホームページは、セキュリティ面の将来的な不安や、依頼への導線が限られているといった課題があり、リニューアルを検討されていました。複数の会社を検討された結果、最終的にカズミアにご依頼をいただいたとのことで、身の引き締まる思いとともに制作がスタートします。

はじめに、ライターと二人で現地に訪問しました。
星型のロゴマークと、ピカピカに清掃された社内がとても印象に残っています。

ご挨拶のあとはすぐに、実際の作業風景を見学させていただきました。

 

帽子をかぶって歩いていくと、その場にいた皆さんが快く協力してくださり、実際に大きな機械が稼働する様子を間近で見ることができました。一台の機械が完成するまでには数多くの工程があり、広大な空間でそれぞれの技術が組み合わさっていく…。圧倒的な現場の活気を、肌で感じることができる貴重な時間でした。

 

見学のあとは、座ってじっくりと対話を進めました。事前に伺っていた課題を深堀しつつ、その場で浮かんだアイデアを共有したりと、どんどんイメージが膨らんでいくような時間になりました。 パンフレットなど既存の資料もいただき、これからの制作に向けて多くのヒントを得ることができました。

 

情報整理と企画

訪問後は、議事録のまとめやスケジュールを作成。

今回はオリオン様の社内に普段からデザイン周りを担当されている方がいらっしゃったため、素材制作をご協力いただきつつ、細かいアイデア出しから共に行っていきました。

まず取り組んだのは、共同編集できるドキュメントやフォルダの作成です。お互いの状況がリアルタイムでわかる体制を整え、コメント機能を使って進捗やアイデアを常に共有。返答が必要な重要事項のみメールに集約することで、細かいニュアンスまで丁寧に擦り合わせながら進行することができました。

 

サイトのコンテンツについては、オリオン様側で事前に整理されていたものをベースにしつつ、ヒアリングを重ねながら肉付け。あわせて下層ページの階層も整理し、企業情報と採用情報をそれぞれのターゲットに合わせて最適化していきました。

整理した情報をもとに、順次ワイヤーフレームを作成。フィードバックをいただきながらブラッシュアップを繰り返しました。また、並行してオリオン様側でも、写真・動画の撮影や図解・イラストの制作を精力的に進めてくださいました。

 

コンセプトの検討

ワイヤーフレームの作成と並行して、サイトの核となるコンセプトの検討を進めました。
マインドマップやムードボードを用いながら、方向性を絞り込んでいきます。

検討にあたり、特に以下のポイントを重視しました。

• オーダーメイドで世界に一つだけの機械を作るプロセス
• アットホームな社風と、お客様に寄り添う姿勢
• 既存サイトからの刷新と、他社との差別化
• 「オリオン」という印象的な社名から広がる世界観
• 機械そのものが持つ機能美や魅力
• 衛生用品を扱う顧客層を意識した清潔感
• 女性や外国人採用の拡大という未来への展望

 

方向性が見えてきた後、テイストについて一度ご意見を伺うため、イメージ写真や簡易的なワイヤーフレームとともに2つのコンセプト案をご提示しました。

1-A案「星のカケラをあつめて」
部品や人の力が集まって一つの機械ができあがる様子を「星のカケラ」に例えた、写真メインの案。
機械の全体像ではなく、質感や細部を印象的に切り取った写真を活用し、清潔感と信頼感を両立させた表現です。

1-B案「世界にひとつの星をつくる物語」
オリオン座のふもとで「動物たちが星屑を集め、世界に一つだけの機械を作る」という物語仕立ての案です。絵本のような優しいタッチで、唯一無二の製品づくりに寄り添うアットホームな姿勢を親しみやすく表現します。

 

オリオン様の社内で広く意見を募っていただいた結果、絵本風の物語を気に入っていただきつつも、現場からは「技術力を格好良く見せたい」「機械作りの背景にある達成感やドラマを届けたい」といったご意見も寄せられました。

その結果、企業サイトと採用サイトでコンセプトを明確に分ける、という大きな方針が固まりました。

 

コンセプトの再検討とワイヤーフレーム作成

強みや会社の本質をより具体的に言語化するため、副社長へのインタビューをオンラインにて実施しました。ライターが質問を重ね、製品へのこだわりや働く環境のリアルな姿を改めて紐解いていきます。

企業トップページの方向性を再検討しつつ、インタビューから得た新たな視点を反映し、より解像度を高めた3つのコンセプト案をワイヤーフレームとともにご提案しました。

2-A案「設計図」
頼れる機械の格好良さを伝え、確かな技術力をダイレクトに表現する案

2-B案「夜空」
オンリーワンのものづくりと、お客様に寄り添う姿勢を伝える案

2-C案「技術力」
初回の1-A案をベースに、最新技術や、グローバルな事業規模を伝える案

 

提案した3案をもとにオンラインにて話し合い、いくつかのご意見をいただきました。

• 「オリオン」という名前には「永続的に続いていくように」という願いが込められていることから、やはり星の要素は大切にしたい。
• 夜空のモチーフを活かしつつも、暗い印象にならないようにしたい。
• メインビジュアルには映像を活用し、C案の「納入先の地図」をトップページに取り入れたい。

最終的に「B案」をベースに進めることが決定。ここからは細かな雰囲気の調整と、デザイン制作のフェーズへと進みました。

 

採用コンセプト

企業ページの方向性が見えてきたタイミングで、採用ページについても検討を進めました。

まず、コンテンツの核となる社員インタビューを実施。オンラインにて1人30分ほど、計4名の社員様にご協力いただき、仕事への想いや社内のリアルな雰囲気についてお話を伺いました。

その後、ライターがインタビュー記事を執筆。会社としての魅力が伝わる内容を重視しつつ、情報が詰まりすぎないよう配慮し、気軽に読み進められるトーンを目指しました。社員それぞれの印象を残し、現場の体温が伝わる表現にまとめています。

 

インタビューを通じてリアルな想いに触れたことで、オリオン様への理解がより一層深まり、採用サイトの目指すべき方向も明確になっていきました。

 

これらを踏まえ、採用ページの3つのコンセプトをご提案。

A案「手・仲間・未来」
企業ページで提案した「印象的な写真の使い方」を取り入れた案。
明るい未来を「夜明けの空」に例え、「手」をメインモチーフにしながら、仲間と共に前進していくイメージを表現。

B案「挑戦・動力・スイッチON」
オリオンの「オン」で韻を踏み、挑戦スイッチ「オン＝ON」と表現。
社屋前にある桜をモチーフとして取り入れ、ここで挑戦したくなるようなワクワク感を演出。

C案「星・仲間・世界に一つ」
企業ページで提案した「絵本風の世界観」を取り入れた案。
会社を一つの「星」に見立て、星座の動物たちが協力してものづくりを行う物語。

 

ご提案当初は、独自の物語性を持つ「C案」を気に入っていただき、既存の企業キャラクターも活用して意味づけを強化しながら進める方向で議論が行われました。色味などで子供っぽくならないよう配慮しつつ、キャラクターの活用法を模索。

その後、オリオン様社内でも改めてご検討いただいた結果、最終的には「仲間と共に前進する」というメッセージがストレートに伝わる「A案」の採用に至りました。なお、キャラクターについては企業ページで活用する方向でまとまっています。

この方針決定と並行して、採用ページ下層のワイヤーフレーム作成や、素材の準備を進行していきました。

特に「一問一答」のコーナーでは、多くの社員の方々にアンケート回答のご協力をいただきました。オリオン様と一緒に掲載内容をピックアップしながら、働く人々の等身大の姿が見えるページを作り上げています。

 

企業ページ デザイン

企業ページのデザインフェーズでは、フォントの選定や動画の見え方について複数のパターンで検証を重ねました。色味の方向性についてもオリオン様と丁寧にすり合わせを行い、夜空の世界観と確かな技術力を同時に感じさせる表現へと絞り込んでいます。

 

また、映像をよりしっかり見せるため、メインビジュアルからはキャッチコピーを無くし、情報を最小限に留めました。代わりにローディング画面を追加し、その中でキャッチコピーを表示する演出を取り入れています。

はじめに言葉で世界観を伝え、その直後に実際の機械が素早く動く映像を見せることで、視覚的なインパクトとイメージの定着を狙っています。

こうした試行錯誤を経て、トップページのデザインが完成しました。

 

下層ページについても、固まったワイヤーフレームをもとに順次制作を進行。サイト全体の世界観を統一しつつも、各情報が整理され、分かりやすく伝わる構成を意識して進めています。

 

採用ページ デザイン

企業ページと並行し、採用ページのデザインも進行しました。

若手の求職者に向けた「親しみやすさ」と、中途の求職者に向けた「情報の見つけやすさや信頼感」を一つのページで両立させることを目指し、2案のデザインをご提案。

A案「シンプル」
リボンのあしらいを主軸にしたデザイン。仲間との繋がりや広がりを曲線で表現し、流動的な動きを出しつつ、手やテキストを中央に配置して明るく表現した案。

B案「ダイナミック」
インパクトのある星と斜めのラインを強調したデザイン。製造業らしい力強さや躍動感を加え、斜め上に伸びるラインで未来志向を強調した案。

 

検討の結果「A案」に決定し、細部のブラッシュアップを進めました。

デザインの鍵となるリボンのモチーフは、オリオン様からいただいたアイデアが種となっており、社屋の外装にある水色のラインと、包装機械メーカーとしての「包む」というワードから着想を得ています。

また、象徴的な「手」のイラストについては、イラストタッチの検討からオリオン様と共に行い、オリジナルの素材を制作いただいています。これらを組み合わせながら、採用トップページのデザインが完成していきました。

 

また、「一問一答」のセクションでは、夜が次第に明けていくようなグラデーションで表現。全体の世界観を保ちながら、社員の方々の声を魅力的に紹介しています。

 

下層ページについても同様のトーンで制作を進行し、全ページのデザインが完成しました。

 

実装

デザインと並行して順次構築を進め、アニメーションの実装も同時に進めていきました。

今回は「お知らせ」や「採用の募集要項」をオリオン様側で更新したいというご要望があったため、WordPressのカスタム投稿形式を採用。

その他の共通パーツもブロックとして構築し、通常のコーディングとWordPressの機能を掛け合わせることで、運用のしやすさと自由なデザイン表現を両立させています。

お問い合わせフォームについても、プラグインを活用しつつ、担当者様がメールで迅速に確認・対応できる体制を整えました。

 

大切にしたこと

今回、特に大切にしたのは、オリオン様との「共創」のプロセスです。

単にご依頼を受けて作るのではなく、オリオン様の社内の方にも深く関わっていただき、リアルタイムでアイデアを交換しながら進めていきました。

おかげさまで、内部にいるからこそ気付ける魅力をたくさん見つけていただくことができ、素材集めなども含め、社員の皆さんを巻き込みながら制作を進めることができました。

 

悩んだこと

主に試行錯誤したのが、翻訳機能の実装です。
簡易的な多言語対応として「AIによる自動翻訳プラグイン」を採用しましたが、実用的なクオリティを担保するために多くの調整が必要となりました。

まず、画像内の文字は翻訳されないため、可能な限りテキストで構築。バナーなどの要素にはあらかじめ英訳を併記しています。
また、ブラウザ間の互換性やアップデートの影響も踏まえ、複数のプラグインで実機検証を実施。最も安定して動作するものを厳選しました。

当初は、英語・中国語の2言語の翻訳を予定していましたが、最終的には動作の安定性と運用面を優先し、英語翻訳のみを導入しています。

こうした外部機能は日々進化しているため、制作側としても情報収集が欠かせません。常にアンテナを張り、検証を積み重ねることが大切だと感じました。

 

オリオン機械工業さまからいただいた声

ご担当者さまから、制作過程や完成したWebサイトについて、お声をいただきました。

私は、資料作成や、社内製造の機械の写真・動画撮影および編集、会社案内資料など、デザイン系の制作を一手に担っています。
今回、ホームページリニューアルプロジェクトチームより声が掛かり、参加しました。

写真などの素材は弊社でご用意し、ホームページとして構成する作業はプロにご依頼しつつも、「一緒にデザインしたい」という信念を抱いており、
専門用語やサイトの重要性を学びながら、東京・神奈川の制作会社を検索していました。

その中でも、おすすめ企業に紹介されていた記事の中で、最も独自性が光っていたのがカズミア様でした。
カズミア様のホームページを拝見し、様々な業種の制作事例があることで製造業の弊社でもご依頼できそうかなと期待感が湧きました。
また、女性が多く在籍して活躍されているとお見受けしたので、他にない素敵なものに仕上がりそうだと確信して、お声がけに至りました。

担当していただいた片山様と堀江様が弊社へお越しいただき、理解を深めようと努めてくださる姿勢や、Googleドキュメントのメモ案を細かく見て反映してくださる粋な計らいに感銘を受けました。

コーポレートサイトでは「青い星空の中に希望の差し色のピンク」を入れたり、弊社の「社屋の外装の水色ラインをリボン素材としてどこかに使いたい！」などのアイディアをビジュアルに落とし込んで頂きました。
片山様と何度もオンラインお打ち合わせやチャット等でブラッシュアップしたからこそ素敵なホームページにリニューアルすることができたと思います。

• フリー素材ではなくオリジナルの素材を取り入れたい
• 初見の方、専門以外の方にも分かりやすくやさしいデザイン
• 社内外に受け入れてもらえるデザイン
  これらを実現くださって誠にありがとうございました。

公開後については、Word Pressを活用して、自社内で新着情報・採用情報の更新など、タイムリーな情報を届けていければと考えております。
引き続きどうぞ宜しくお願い致します。

嬉しいお言葉をいただき、誠にありがとうございます！

素材ひとつひとつから細かなアイデアまで、常に熱心に関わってくださったおかげで、オリオン様ならではの空気感を大切にしたサイトに仕上げることができたと感じています。
新しくなったサイトを今後ともご活用いただき、オリオン様の魅力がより多くの方へ届いていくことを心より願っています。

 

 

これからの制作に向けて

社員の方が、「自分が関わった機械で包装された商品を、お店で見かけると嬉しい」とお話されていたのが印象に残っています。

約半年にわたるサイトの制作期間。
日々ものづくりに向き合うオリオン様の社員の方々の姿を何度も「格好良い」と感じ、私自身もお店で商品を見たときに、その背景にある現場の熱量が自然と想像できるようなりました。

デザイン会社に所属する私の仕事は、商品が完成した更に後の、広告物などを作ることです。
役割は少し違いますが、同じものづくりに携わる一人として、より一層、誇りを持って。そして、その背景にある沢山の人の仕事を深く知りながら、これからも取り組んでいきたいと思います。

 

カズミアがお手伝いできること

カズミアでは、Webサイト制作に加え、インタビューやライティングまでお手伝いしています。

ライターが直接お話を伺い、まだ言葉にできていない熱意や魅力を言語化することで、より深く伝わるWebサイトを作ることができます。

「自分たちの想いを大切にしながら、きちんと伝わるサイトをつくりたい」「社内の熱量を言語化したい」という方は、どうぞお気軽にご相談ください。

丁寧にお話を伺いながら、一緒に考えるところから制作を始めています。