CREATOR BLOG

制作実績「富士通商株式会社」WEBサイトリニューアル

富士通商株式会社様のWEBサイトを公開
URL : https://www.fuji-trading-jp.com/
CMS : WordPress
レスポンシブデザイン
常時SSL接続
デザイン〜HTML/CSS/JavaScriptコーディング〜Wordpressテーマ化まで一括で制作。

富士通商様は業務専業商社でしたが、ここ数年で市販用が急拡大し、一般消費者の目に触れる機会が増えたため、一般消費者向け商品の販促をかねてリニューアルをしたいというご要望に沿ってデザイン〜CMSまでのご提案をいたしました。

デザイン&コンセプト

富士通商WEBサイトトップ
白をベースに野菜の美味しさが引き立つようにナチュラルカラーにてデザインを作成

全体的なカラーは白ベースで、清潔感のある食品メーカーらしいテイストにし、ロゴで使用している赤(#F20505)をベースにグリーン系のナチュラルカラーを差し色とした配色パターンでのデザインを作成しました。

配色パターン
デザイン作成前の提案書にて配色パターンを提案しています

ビジュアルデザインのテイストは、業務用と一般向けとで違う形にするというご要望でした。一般向けは 親しみのある明るいテイスト。業務向けは今までのかっちりしたテイストの方向性に近い形でデザインを作成しました。

柔らかいイメージを使用した家庭用トップ https://www.fuji-trading-jp.com/home-use-products/

 

インフォグラフィック

「Festival」ブランドの認知向上のためにインフォグラフィックなども何点か作り直をし専用ページを作成。

https://www.fuji-trading-jp.com/commit-festival/good-raw-materials/

 

ナビゲーション

グローバルナビゲーションはデバイス毎の使い勝手を考慮し、PC向けとSP向けで全く違うデザイン/動作になっています。この手の手法の場合、HTMLソースコードはそれぞれ違うものを用意して実現させているサイトをよくみますが、無駄なソースとなってしまいますので、こちらでは全く同じソースをCSSとJavaScriptを駆使し、動作含めて再現しています。

 

SPハンバーガーメニュー
スマートフォン向けのハンバーガーメニュー
PC向けナビメニュー
PC向けはフローティングバータイプのデザイン

 

システム&管理画面

CMSとしてWordpressを使用し、Gutenbergブロックエディタに対しても見た目の分かりやすさの追加やカスタムブロックによる入力のしやすさなどのカスタマイズを施しています。

カスタムブロック
作成したカスタムブロック の一例。PC向けとSP向けで別の画像を指定できるブロック

    ▲ PAGE TOP