BizBox / KOBUNDO

担当箇所

企画立案からデザイン、構築まで全て

制作期間

実稼働２ヶ月

使用ツール

• HTML
• CSS / SCSS
• Javascript
• PHP
• WordPress
• Figma
• VS Code
• Webpack
• jQuery
• Github

デザインのポイント

昭和29年創立と、昔ながらの企業でありながらも、その時代時代のニーズに合ったオフィス周辺商品提案・販売されている企業とのことでした。 そのような背景を踏まえ、伝統的でありながらもどこか親しみを感じやすいようなデザインの制作に取り組みました。 具体的には、フォントを明朝体とし、厳格・信頼感・安心・伝統といったテイストを表現しました。 また、その上で親しみを感じやすいように、ロゴとしてお持ちだった斜めの曲線を上手く活用できるよう試行錯誤しました。 トップページの事例紹介・商品紹介では、「ほぼ見えないんじゃないか？」という色の度合いで大きな英文字を無限ループで表示しています。 これはWEBデザインのトレンドの1つであり、現代風なオシャレさを表現しています。 そのほかのアニメーションはスライド画像とボタンホバー程度に抑えております。 これはいろいろな動きをすることで、伝統的というベースが阻害されないよう配慮しています。

制作過程

ヒアリングを元にデザインを起こし、構築へと行うのはいつもの通りでした。 構築の工程が思っていたよりも多く、一人でやるには結構な苦労がありました。 事例紹介一覧ページやサービスのご依頼ページの構築に時間がかかったイメージです。 特にサービスのご依頼ページでは、問い合わせ内容に応じて中身の出し分けを行っています。 ここではMW WP Formを使い、フォーム自体は1つのフォームのみを用いています。 パラメータやフィルターフックを用いて、入力が任意の項目を必須の項目にしたり、 選んだボタンによって送信内容を変えたりという点で時間がかかりました。 MW WP FormはURL設定ができたりフックが豊富だったりするので、使い勝手が良く助かりました。 その他クライアントの希望で、事例紹介個別ページの写真一覧とパース画像のリストでは、lightboxを採用しています。 WP jQuery Lightboxというプラグインによって簡単に、画像の拡大やスライドショーを実現しました。