始めに
LifeisTechの山梨でのプロジェクトで、実際の中小企業のクライアントに対してWebサイトを作成した話をしようと思います！
プロジェクトの概要
LifeisTechでは山梨県で 『山梨県DX人材育成エコシステム創出事業』 という事業を行っていて、以下のようなものを行ってます
- 山梨県の大学生にITスキル教育を行う
- 地域の課題を解決するプロダクトを中高生と制作する
- 実企業をクライアントとしてITを使った解決策を実行する
その一環で、私は山梨の大学生とチームを組み、
山梨県のワイナリー『ショープル ドメーヌヒデ』の魅力を伝えるWebサイト
を作成しました。
プロジェクトの流れ
プロジェクトは以下の流れで進めました。これは実際のコンサルティング会社や開発会社でも使われているプロセスです。
- ワイナリーの見学・ヒアリング
- 現在の課題特定
- 企画提案・クライアントとのすり合わせ
- デザイン・実装
どこが課題だったのか
実際にクライアントが経営しているカフェを訪れてみると、
山梨の自然に囲まれ、富士山も見えるとても素敵な場所でした。（1枚目）
しかし既存サイト（2枚目）は、
- 落ち着いた雰囲気
- 「どこまでも自然に」というオーガニックな世界観
が十分に伝わっていませんでした。
クライアントも、
コンセプトの魅力がサイトに反映されていない
ことを課題として認識していました。
解決策
デザイン
私たちのチームは、**「どこまでも自然に」**というコンセプトを伝え切れるWebサイトと動画を制作しました。
私は主にWebサイトの デザインと実装 を担当しました。
デザインでは、
- 写真を多く使用し、自然の世界観を直接伝える
- 大きな余白を取り、ゆったりとした雰囲気を演出
- オーガニックで穏やかなトンマナを意識
という工夫を行いました。
実際の公開サイトはこちらからご覧いただけます。
https://webusist.com/domainhide_sample/pages/index.html
実装
フロントエンドはあえて Vanilla HTML / CSS / JavaScript で開発しました。
フレームワークを使わない実装は大変でしたが、その分達成感も大きかったです。
クライアントから、
「noteの記事を自動で表示できるようにしたい」
という要望があったため、note API を使って 最新3件の記事を自動取得して表示 する機能も実装しました。
開発環境は Node.js を使用しました。
終わりに
最終発表ではクライアントから
「自社の製品の魅力が伝わる形になって本当に嬉しい」
と感謝の言葉をいただきました。
タイトなスケジュールで大変でしたが、
努力がクライアントの価値向上につながったことを実感できたプロジェクトでした。
また今回、
ワインを購入するターゲットに合わせて“コンセプトが伝わるトンマナ”を徹底的に意識
したことで、Web制作における
- ターゲット理解の重要性
- 目的に応じたデザインの必要性
を改めて学びました。