背景
私はフロントエンドエンジニアとして数年活動しています。しかし、セキュリティ上の理由からほとんど実績を公開することができません。
これじゃスキルをアピールできねぇ！！
ということで、自分のスキルを表現するために、ポートフォリオ掲載用のWebサイトを作成しました。
制作したサイト
本記事では、このWebサイトの制作過程を詳細に紹介していきます。
制作の目的
このWebサイト制作を通して、以下のスキルを証明することを目標としました。
- Figmaで最新機能を活用したWebサイトプロトタイプの作成
- リサーチ力
- インタラクティブな機能を持つWebサイトの制作
- Reactを用いた運用しやすいWebサイトの構築
- UI/UX設計
- AIなどの新技術の柔軟な活用
- 分析に基づいた情報設計
1. 題材決め
まず、どのようなWebサイトを作成するかを検討しました。リサーチがしやすく、多くの人にとって身近な題材がいいと思ったので、飲食店のWebサイトを制作することにしました。
実在する飲食店のWebサイトを勝手に作成することはできないため、架空のイタリアンレストランを設定しました。
飲食店概要
- 中価格帯
- 都内に3店舗展開
- テナント出店
- ランチはディナーよりもリーズナブル
- クレジットカード・電子決済対応
- サステナブルな取り組みとして、毎週水曜日は植物性由来の料理をメインに提供。フードロス削減のため、食べ残しの持ち帰り推奨
- 豊富な種類のワイン
- 人気メニューは自家製窯焼きピザとミネストローネ
そもそも個人経営の飲食店にとって、Webサイトは必須ではないと思っています。
現在ではSNSなどでも集客が可能であり、私も実際に飲食店を探すのにわざわざWebサイトまで見に行くことはほとんどありません。
じゃあどういう場合だと、Webサイトが必要なのかというと、規模が大きくて、デジタルチャネル運用にリソースを割けるほど余裕があるところになるんじゃないかと思います。
そのため、複数店舗展開しているという設定にしました。
サステナブルなブランディングについては、ちょうど仕事でサステナブル関係にちょっと取り組んでいたので、その経験を活かして、エッセンスとして取り入れました。
2. Webサイトに必要な機能・コンテンツ洗い出し
- 店舗概要（営業時間、定休日、住所、決済手段、席数、問い合わせ先）
- お店のコンセプト、こだわり
- フード/ドリンクメニュー
- 最新情報
- SNSリンク
- 地図
- 求人情報
- 問い合わせフォーム
- 予約フォーム
これらの機能・コンテンツは、上から順に掲載必須度が高いものです。
今回は時間の関係上、TOPページしか作成できなさそうだったので、TOPページで可能な限り情報を収めるように工夫しました。
まとめ
今回は、制作過程の序盤を紹介しました。
次回は、情報設計前の市場リサーチについて詳しく解説します。
次の記事