レストランチェーン企業のモックアップページ
https://restaurant-chain-mockup.aki158-website.blog
このモックアップページは、レストランチェーン企業の一覧が見れるサイトです。
モックアップは、実際のソフトウェア製品の開発前にWebエンジニアやWebデザイナーなどのコンテンツクリエイターが使用し、サイトのレイアウト、フォント、コンテンツの配置などを確認します。
デザインのプロトタイピングやコンセプト確認のための重要なツールであり、デザインの品質向上や効率的なプロジェクト遂行に貢献します。
このモックアップページでは、レストランチェーン企業の一覧が見れるサイトをコンテンツクリエイターが開発することを想定して作成しました。
基本的な機能として、モックアップページの表示ができます。
このモックアップページの作成後に拡張版を作成しました。
詳細は、下記リンクをクリックして確認ください。
Restaurant-Chain-Mockup-Extension
説明で登場する用語について補足します。
用語の意味がわからない時は、下記表を確認してください。
| 用語 | 意味 |
|---|---|
| モックアップ | Webサイトやアプリケーションのデザインの外観を表現するための試作品のことです。 |
| プロトタイピング | 製品開発の過程で、初期のアイデアやコンセプトを具体的な形（プロトタイプ）に変換するプロセスです。 |
一通りの手順のイメージはデモを参考にしてください。
- URLにアクセスする
- モックアップページを確認する
| カテゴリ | 技術スタック |
|---|---|
| フロントエンド | HTML |
| CSS | |
| フレームワーク : Bootstrap | |
| バックエンド | PHP |
| インフラ | Amazon EC2 |
| Nginx | |
| Ubuntu | |
| VirtualBox | |
| その他 | Git |
| Github | |
| SSL/TLS証明書取得、更新、暗号化 : Certbot |
| 機能 | 内容 |
|---|---|
| モックアップページの表示 | ページがロードされると、モックアップページが表示されます。 |
| アコーディオンの開閉 | Restaurant Chain Information内のレストラン名をクリックすると、アコーディオンの開閉ができます。 |
⭐️後で記載する!!!
作成した理由を記載する。
⭐️後で記載する!!!
テキストや参考にした記事などを再度読み返して技術の理解を深めてから書く。
ここがエンジニアに一番読んでもらいたい箇所なのでできるだけ詳細に書く。
【使えるかもしれない素材】
このプロジェクトでは、レストランチェーン企業のモックアップページを作成しました。
データはFakerを使用し、生成された偽のデータを使用しています。
レストラン企業に関わる情報をそれぞれクラスとして定義しています。
また、オブジェクト指向のアプローチによりメンテナンスの容易さを意識しPHPで実装しています。
- Userクラス
- Employee クラス（User クラスを拡張）
- Company クラス
- RestaurantChain クラス（Company クラスを拡張）
- RestaurantLocation クラス
- 入力フォームでオプションを設定する
- モックアップページをもとにした、実際のWebサイト
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent