オーエスエレクトロニクス様(コーポレートサイト)|Web制作実績 スマートフォン対応|スマートフォンサイトWeb制作実績

オーエスエレクトロニクス株式会社様

https://www.oselec.jp/

東京都千代田区

PC

SP

Web制作のポイント

国内外に多くの拠点を持ち、半導体・電子部品のコンサルティングセールスをされている「オーエスエレクトロニクス様」のモバイル用コーポレートサイトをリニューアルいたしました。

 

モバイル用サイトでは、「半導体・電子部品に携わる仕事」をしたい方や、「海外でも活躍できる商社」をお探しの方など、特にリクルート目的のユーザーをメインターゲットに設定いたしました。そのため、スマートフォンとPCの使用比率を8:2と想定し、モバイルファーストとして設計しております。

 

今回、「リクルートを強化したい」というご要望をいただきました。そのため、旧サイトではほとんど機能していなかった採用ページに必要な情報をしっかりと充実させることで、リクルート目的のユーザーが求人応募したくなるサイトに仕上げております。通常の募集要項だけでなく、実際に社員の方への取材・撮影を行った「インタビューページ」、会社規模の大きさをインパクトのある数値で表現した「数字で見る」など、まるで採用専用サイトのように、ユーザーの知りたい情報が充実した採用ページに仕上げました。また、ホームページ内の社員写真は専属カメラマンが撮影した自然体なお写真を用いることで、ユーザーに信頼感と安心感を与えるよう工夫しております。

設計・デザインのポイント

モバイル用サイトでは、CV率を向上させるため、「製品情報」「採用情報」の2種類の導線をページ上部のヘッダーに固定表示しております。さらに、採用情報ページへ遷移するとエントリーページへの導線が強化されるように切り替わるなど、重要なコンテンツを優先度に合わせてしっかり訴求させることで、CVアップに繋がる綿密な設計を行っております。ほかにも、採用関連ページ全体の回遊率を高めるため、採用ページ専用のメニューをページ上部に固定表示しております。

 

また、小さな画面の中で重要な情報を効率よく見せるため、PC用サイトでは全カテゴリ名を並べて表示していた製品情報を、アコーディオン化してコンパクトに表現しております。弊社では、PC用サイトとモバイル用サイトをそれぞれ個別に設計しているため、どのデバイスからでも見やすく、ユーザビリティの高いホームページをご提供させていただきます。

 

さらに、お客様の2つの強みである「営業力」と「製品」を視覚的に認識していただけるよう、写真を用いて図式化をいたしました。ほかにも、お客様のスタイリッシュなロゴを背景にさりげなくデザインとして配置することで、サイト全体の統一感を保つと同時に、お客様のオリジナリティが確立されたデザインに仕上げております。こういった自由度の高いデザインができるのは、フルオーダーメイドならではの特徴でございます。

 

技術商社のホームページでは、事業内容だけを淡々と説明しているサイトが多いため、実際に取り扱っている「製品・メーカー」を強く押し出すことで、他社との差別化をはかりました。例えば、製品のカテゴリ名や大手メーカーのロゴを一覧で並べることで、「製品の豊富さ」や「会社規模の大きさ」を視覚的に印象付けるデザインにしております。

 

また、「取扱製品がテキストで羅列されただけで、目的の製品を探しにくかった」旧サイトの製品コンテンツを整理いたしました。まずは、それぞれのユーザーの目的に合わせて、「メーカー」「カテゴリ」という2つの視点から製品を探せる設計を構築しております。さらに、製品名や品番、メーカー名から製品を絞り込むことができる「検索機能」を導入しているほか、イメージしやすいよう写真を多く配置いたしました。それにより、製品情報をコンパクトに整理しつつ、お探しの商品をすぐに見つけられるユーザビリティの高い機能的な製品コンテンツとなっております。設計デザインからシステムまで社内一貫体制で、お客様ごとに柔軟なシステム構築が出来るのも弊社の強みの1つです。

 

デザイン面では、モノトーンカラーをベースに、お客様のロゴカラーであるブルーをポイントで使用することで、すっきりとしたデザインにまとめました。採用関連ページには、「斜め」を意識したパーツや写真の切り抜きを多く使用することで、先進的な会社のイメージをデザインで表現しております。さらに、社員インタビューページへの導線バナーには、社員のフレッシュな笑顔のお写真から、マウスオーバーをすると真剣な表情に変わるなど、メインターゲットであるリクルートユーザーに向けて、わくわく感をもって入社していただくための工夫を施しました。

Web制作・運用サポート一覧

PC・タブレット用フルオーダーメイド設計、オリジナルWebデザイン、PC用UI/UX設計、ワイヤーフレーム作成、HTML/CSSコーディング(レスポンシブサイト)、Googleアナリティクス設定、各種CMS開発、jQueryコーディング、PLESKサーバー、ヒアリング取材、原稿作成、アフターサポート

劇的ビフォーアフターはこちら