badge Web

概要
家具職人の個人Webサイト
制作の目的
家具職人が個人で活動していくための足がかりとして、知人やお客様やWebを通じて自身が制作したオーダー家具の魅力を伝えるために制作。
デザイン
「黒い」「かっこいい」イメージ。という依頼から、ヘッダー&フッダーとリード文、Worksは文字や写真が映える黒寄りの茶色を使用。BlogとContactは、読みやすさと親しみやすさを重視してベージュを使用しました。メニューやタイトルの英字には、職人が得意とするアンティーク風家具の雰囲気に合うようにAnzianoというセリフ体を使用しています。家具の写真撮影にも同行し、カメラマンと依頼者と作りたいイメージの意識合わせをしながら撮影を行いました。
コーディング
シンプルなデザインの中にも先進性を表すために、タイトルや画像の表示時、ボタンへのマウスオーバー時のアニメーションにもこだわりました。小さな画面でも操作しやすいように、スマホ版表示の場合はWorksの詳細画面がInstagramのようなカルーセル表示に切り替わるように実装しています。
担当範囲
ディレクション / デザイン / コーディング / アイコン作成
レスポンシブ
スマートフォン / タブレット / PC
制作期間
2018年4月〜10月(約120時間)
使用ツール
Photoshop / Illustrator
使用CMS
WordPress
使用言語
HTML5 / CSS3 / JavaScript / jQuery
URL
https://badge-furnit.com