works

菱井商事株式会社のコーポレートサイトのモックアップ

クライアントワーク:株式会社菱井商事

コーポレートサイト

電気機器や鉄鋼材料の販売を行う商社、株式会社菱井商事様のコーポレートサイトのリニューアルを手掛けました。

View site

公開は2024年3月を予定しています。

ID:hishii
PW:hishii0801

内容

卒業制作

制作期間

2ヶ月(入学から4ヶ月目)

概要

株式会社菱井商事様コーポレートサイトリニューアル制作

担当範囲

ディレクション / Webデザイン /コーディング / カメラ撮影

クライアント

株式会社菱井商事様

使用ツール

Figma / Photoshop / Lightroom / Visual Studio Code

目的

現状サイトのリニューアル、認知度向上、情報整理、取扱製品の問い合わせ数増加

課題

情報面:情報にまとまりがなく、すぐに必要な情報へ辿り着けない。

デザイン面:製品写真が少なく、質が良いとは言えない。また、多様な商品を取り扱っていることが伝わらない。

解決案

情報・機能面
  • 1.認知度向上のためSEO対策を行う

    コンテンツにまとまりを持たせて、情報を的確に短く入れる。また、検索エンジンにやユーザーにページの情報を分かりやすく伝えるため効果的なメタタグの記述を行う。

  • 2.ボタンのアニメーションを充実させる

    ホバーアニメーションや文言に配慮し、サイトの導線がどこに繋がるか分かりやすく設計を行う。

  • 3.問い合わせの導線をつくる

    問い合わせしやすいフォームの利用を行う。クライアントが必要に応じて内容の変更ができるようFormrunを導入する。

デザイン面
  • 1.幅広い商品の取り扱いがあることを伝える

    統一感のある製品写真を使用することで視覚的に取扱数の豊富さを伝えられるよう目指す。

  • 2.信頼感や誠実さを与えられるようなデザインや色味

    ロゴに用いられている菱形や四角を多く使用することでサイト全体の統一感を出す。ロゴカラーの青を使用することで信頼感を与えるデザインにする。

  • 3.問い合わせしやすいデザインにする

    コンバージョンボタンを追従させて分かりやすく、問い合わせしやすいボタン配置をする。

制作で気づいたこと

今回は企画からコーディングまで一貫して制作しました。デザインの意図をクライアントに説明でき納得していただいた上で、信頼感のあるサイトが完成しました。制作途中では、充分なヒアリングをしたつもりでしたが、進むにつれて「やっぱりこうしてほしい」等の意見をいただくことがありました。その点については、事前のヒアリングが不足していたことが要因のため、双方の考えていることのすり合わせが必要だと感じました。
写真撮影では、自ら社長や会議中の姿を撮影しました。既存サイトのイメージからガラッと変えることができ、会社の雰囲気を表せたと思います。写真がないからといって諦めるのではなく、今自分ができる最大限の提案をする重要さを認識しました。

リニューアル前

菱井商事株式会社のリニューアル前サイトのデザイン

リニューアル後

菱井商事株式会社のリニューアル後サイトのデザイン

other Works