peli 
こんにちは。ハヤマスタジオのぺりです。デザインブログを始めました。
デザインに役立つ情報や制作実績を発信していきたいと思います。よろしくお願いします！
神奈川県葉山町の小さな家具屋さん、HAYAMA WOODWORKS STUDIOのホームページを作成しました。
Summary
| 制作期間 | 2ヶ月 （企画1ヶ月、デザイン３週間、コーディング２週間) |
| 使用ソフト | Photoshop XD illustrator Dream weaver Lightroom WordPress (Snow monkey) Canva BASE(online shop) |
| コーディング | HTML CSS JavaScript |
| 対応機種 | PC/Mobile |
| 感想 | オンラインショップの写真の撮影は自分で行い、どうやって修正すれば欲しいと思われる製品に写るのか試行錯誤しました。コーディングはJavaScriptに苦労しました。 |
制作背景
たまたまDIYの教室で出会った家具屋の師匠のホームページをつくらせていただく事になりました。
師匠はデジタルの世界とは無縁でPCも持っていないのですが、この機に、ホームページの制作を了承いただきました。
しかも、その後師匠とHayama woodworksを一緒に始める事になりました！
最初はwebデザインスクールの卒業制作で架空のホームページを作るつもりだったのですが、実際にホームページをアップして、ネットショップも開き今後もこのサイトを利用して商売をしていくことになりました。
卒業課題で架空のページを作るつもりでしたが、
実際に使っていただけるサイトを作れることが出来て非常にラッキーでした。
制作にあたっての設定（勝手な妄想も含む）
| ペルソナ | 都会で仕事をバリバリしている女性。仕事に疲れ、木の温もりを求めている。キャリアウーマンで、お金に余裕がある。使い捨てのものではなく手作りのクオリティーの高い製品を求めている。SDGに関心があり環境問題にも関心がある。 |
|---|---|
| お店のコンセプト | 木の温もりのあふれる１点１点手作りの家具屋さん。木を大切にし、国産の材料を使い環境にやさしい修理できる家具を作る。 |
| サイトのコンセプト | 家具職人が丁寧に作る木の温かみがある一点ものの家具 |
| デザインコンセプト | 木のやさしい雰囲気を全面に出しました。テーマカラーも木の感じを出すためにシックにまとめました。 |
制作内容
- 企画・設計・構成
- デザイン制作（デザインカンプ）
- コーディング(HTML/CSS/Javascript)
- スマホ対応
- ショップサイト開設（BASE)
- ブログサイト (WordPress snow monkey)
ホームページ作成にあたって、家具屋の師匠のパンフレットや、昔撮った写真、雑誌の取材の資料を貸していただき、企業研究をしました。
サイトマップや、ワイヤーフレームを作り、Photoshopでデザインカンプを作りコーディングを行いました。
幸いにも全面的に企画、デザインは任せてもらいました。
オンラインショップは、写真は自分で撮りライトルームで加工して、BASEでショップを開きました。
ブログは今後更新しやすくするために、WordPressのSnowmonkeyを使い、サイトにリンクするようにしました。
デザインのこだわり
- ページ数：９ページ（Top/about/Works/DIY/DIYvoc/Inquiry/privacy policy/online shop/blog)
- テーマカラー： ベージュ・オレンジ
- デザインテイスト：温かみがある家具/木の色/葉山の自然
フロントページ
▼ パソコンサイトデザイン
▼ スマホサイトデザイン
写真をたくさん使いました
コンセプトの「家具職人が丁寧に作る木の温かみがある一点ものの家具」が伝わるように、家具屋の師匠が持っていた昔の写真をたくさん使いました。
昔の写真なので、Lightroomである程度明るくしつつ、温かみを出すために、レトロ感を残しデジタル現像した写真を用意し、ページのいろいろなパーツに配置しました。
お店のロゴ
ヘッダーにはロゴを配置しました。このロゴは私がデザインしました。
椅子はphotoshopで写真から手書きのイラストのように加工して作りました。
葉山ウッドワークスは、木の椅子がメイン商品で、椅子を使い家具屋さんのロゴを作りました。
後日家具屋の師匠がロゴの看板も制作してくれました！
木の看板、とっても素敵です！
Topページメインビジュアル
Topページは様々な種類の家具を作っていることをアピールする為に、アイキャッチ的にPhotoshopで家具を切り抜きメインビジュアルを作りました。温もりのある沢山の家具があるお店屋さんの雰囲気が出たと思います。
Worksのページ
▼ パソコンサイトデザイン
▼ スマホサイトデザイン
家具の魅力を伝えるために、できるだけ多くの写真を配置しました。
カテゴリーを付け、ソートし見やすいように工夫しました。
お客様からのご感想｜問題に対して判断が迅速・的確です。経営相談もできるパートナー的な存在です
📣ホームページをお申し込みいただいた理由
第一印象が良く、論理的かつ緻密な考えをする人です。パソコンも無いシニア世代の自分を全面的に、サポートしてもらえると信じて、おねがいしました。
📣完成したホームページについて
最初、紙に印刷した、プロトタイプを持ってこられて、ケータイに不慣れな自分は、安心すると同時に、御配慮に感謝しました。
ホームページのロゴからして作りこんであり、葉山のこの地で、新しい人生が始まる、そんな予感がする濃密な美しいページが、綴られていました。
📣制作で印象に残ったことは
制作期間、頻繁でタイムリーな確認、打ち合わせを通して、漠然と感覚的な話をしがちな自分から知りたい情報を聞き出し、次回にはそれが、シンプルに反映された内容に更新され、あっという間の、期間でした。物凄い仕事量をこなしているとおもいました。
📣ぺりの印象
私がパソコンは持っておらず、携帯は、不慣れ、こんなシニアに、ライン、Ḡメールの設定、メモのとり方まで、ササッとしてもらえて大変たすかりました。継続的に経営まで面倒を見てもらえるのは嬉しいかぎりです。
振る舞いは、スポーティで暖かな親しみやすい人です。時々ポンと予想外に面白いことを言う人だと思います。長く外資の会社でファイナンスの仕事を任されていたせいか、問題に対して判断が迅速、的確です。全てお任せしたいです。
📣このサービスはこんな人におすすめ！
今の時代のスピードについて行けない自分のようなシニアの自営業者。
有能な秘書の様な人を探している人。
経営相談が出来るホームページビルダーを探している人。
こんな人におすすめだと思います。今回はありがとうございました。
大変嬉しい感想ありがとうございました。そして、ホームページから始まった、ハヤマウッドワークスタジオとしてのパートナーシップを組んでくださり、本当に感謝しております。今後ともよろしくお願いします！
ホームページを制作をした感想
葉山の小さな家具屋、葉山ウッドワークススタジオのホームページ作成を通して、木や家具の魅力を再発見しました。
ホームページ作成は、クライアントのニーズを満たすために、相手のビジネスを理解して、お店の魅力を世間の皆さんに伝えるためのもので、どう見せたら伝わるのか、を常に考える必要があり、それは非常に難しいけれども、めちゃくちゃ楽しいと思いました。
私は前職では大企業のサラリーマンをしていて、ファイナンスで働いていたので直接お客さんと会うこともありませんでしたが、このように実際のお客さんを相手にホームページというモノづくりをして、喜びや感謝の声を直接聞けるというのは、本当に素晴らしいことだと思いました。
オンラインショップも開設したので、全国の皆様に葉山ウッドワークススタジオを、ホームページを通して知ってもらえたら幸いに思います。
最後まで見ていただきありがとうございました。
これからもよろしくお願いします。
ペリでした！