前回の記事はこちら
モバイルファーストで制作していた当ページですが、今回はPC表示対応をしていきます。
ナビゲーション
PC表示の際は、横幅を確保できる分、ハンバーガーメニューを消してナビゲーションを表示するようにしました。実際のWebサイトでもよくある手法ですね。
ナビゲーションの項目のデザインには、背景をぼかすcss、backdrop-filter: blur;を使いました。
ヘッダーに高さを設けるとどうしても画面が手狭になってしまいますが、これを使うことで見せたいとこを見せつつ、画面の一部がヘッダーに覆われてる感が和らぐので、結構お気に入りな手法です。
ディナー, 環境への取り組み
メディアクエリで画面横幅が767px以上の時にflex-direction: row;で横並びにしました。
@media (min-width: 767px) {
.dinner-menu {
flex-wrap: nowrap;
gap: 2rem;
}
.dinner-menu img {
width: 50%;
}
.environment-action {
width: calc((100% / 3) - 1rem);
}
}
シェフ達
モバイル表示では写真は基本全幅表示していましたが、PC表示では、創業者忖度リスペクトで、創業者及び本店オーナーシェフの写真だけ大きくしました。創業者メッセージも追加しました。
店舗概要
横幅が確保できる分、タブ切り替えではなく、テーブルで3店舗並んで表示されるようにしました。
import { useState } from 'react'
import { shopOverview } from './shopOverview'
const Overview = (props) => {
const [selectedShop, setSelectedShop] = useState('shinjuku')
const handleSelectShop = (e) => {
setSelectedShop(e);
}
return (
<div>
<div className="overview-buttons sp-only">
<button onClick={() => handleSelectShop('shinjuku')} className={selectedShop === 'shinjuku' ? 'isActive' : ''}>新宿本店</button>
<button onClick={() => handleSelectShop('ikebukuro')} className={selectedShop === 'ikebukuro' ? 'isActive' : ''}>池袋店</button>
<button onClick={() => handleSelectShop('kinshicho')} className={selectedShop === 'kinshicho' ? 'isActive' : ''}>錦糸町店</button>
</div>
+ {props.isDesktop ?
+ <div className='overview-vibe'>
+ <div><h3>新宿本店</h3><img src="./images/shinjuku-vibe.webp" alt="" /></div>
+ <div><h3>池袋店</h3><img src="./images/ikebukuro-vibe.webp" alt="" /></div>
+ <div><h3>錦糸町店</h3><img src="./images/kinshicho-vibe.webp" alt="" /></div>
+ </div>
+ :
<img src={shopOverview[selectedShop].image}></img>
+ }
<table>
<tr>
<th>店名</th>
<td className='sp-only'>{shopOverview[selectedShop].name}</td>
+ <td className="cell-pc-only">{shopOverview.shinjuku.name}</td>
+ <td className="cell-pc-only">{shopOverview.ikebukuro.name}</td>
+ <td className="cell-pc-only">{shopOverview.kinshicho.name}</td>
</tr>
<tr>
<th>営業時間</th>
<td colSpan='3'>
ランチ 11:40～14:00<br />
ディナー 18:00～23:00
</td>
</tr>
<tr>
<th>定休日</th>
<td colSpan='3'>毎週月曜日</td>
</tr>
<tr>
<th>席数</th>
<td className='sp-only'>{shopOverview[selectedShop].chair}席</td>
+ <td className="cell-pc-only">{shopOverview.shinjuku.chair}席</td>
+ <td className="cell-pc-only">{shopOverview.ikebukuro.chair}席</td>
+ <td className="cell-pc-only">{shopOverview.kinshicho.chair}席</td>
</tr>
<tr>
<th>問い合わせ</th>
<td className='sp-only'>
<p>電話：<a href={`tel:${shopOverview[selectedShop].inquiry}`}>{shopOverview[selectedShop].inquiry}</a></p>
<p className='overview-toFormWrap'><span>お問い合わせフォームは</span><button className="link overview-toForm">こちら</button></p>
</td>
+ <td className="cell-pc-only">
+ <p>電話：<a href={`tel:${shopOverview.shinjuku.inquiry}`}>{shopOverview.shinjuku.inquiry}</a></p>
+ <p className='overview-toFormWrap'><span>お問い合わせフォームは</span><button className="link overview-toForm">こちら</button></p>
+ </td>
+ <td className="cell-pc-only">
+ <p>電話：<a href={`tel:${shopOverview.ikebukuro.inquiry}`}>{shopOverview.ikebukuro.inquiry}</a></p>
+ <p className='overview-toFormWrap'><span>お問い合わせフォームは</span><button className="link overview-toForm">こちら</button></p>
+ </td>
+ <td className="cell-pc-only">
+ <p>電話：<a href={`tel:${shopOverview.kinshicho.inquiry}`}>{shopOverview.kinshicho.inquiry}</a></p>
+ <p className='overview-toFormWrap'><span>お問い合わせフォームは</span><button className="link overview-toForm">こちら</button></p>
+ </td>
</tr>
<tr>
<th>決済</th>
<td colSpan='3'>
現金<br />
クレジットカード（JCB、Master、Visa、American Express）<br />
電子マネー（交通系、楽天Edy、iD、QUICPay）、QR決済（PayPay、楽天ペイ、LINE Pay、d払い）
</td>
</tr>
<tr>
<th>アクセス</th>
<td className='sp-only'>
<p>{shopOverview[selectedShop].access}</p>
<a href={shopOverview[selectedShop].link} target="_blank" rel="noreferrer noopener" className='link'><span>マップで開く</span></a>
</td>
+ <td className="cell-pc-only">
+ <p>{shopOverview.shinjuku.access}</p>
+ <a href={shopOverview.shinjuku.link} target="_blank" rel="noreferrer noopener" className='link'><span>マップで開く</span></a>
+ </td>
+ <td className="cell-pc-only">
+ <p>{shopOverview.ikebukuro.access}</p>
+ <a href={shopOverview.ikebukuro.link} target="_blank" rel="noreferrer noopener" className='link'><span>マップで開く</span></a>
+ </td>
+ <td className="cell-pc-only">
+ <p>{shopOverview.kinshicho.access}</p>
+ <a href={shopOverview.kinshicho.link} target="_blank" rel="noreferrer noopener" className='link'><span>マップで開く</span></a>
+ </td>
</tr>
</table>
<Access selectedShop={selectedShop} shopOverview={shopOverview} />
</div >
)
}
export default Overview
デプロイ
ざっと完成したので、制作したページをサーバーにデプロイしていきます。
デプロイにはVercelというホスティングサービスを使います。
VercelはWebサイトやWebアプリの公開を簡単に行ってくれるサービスです。
元々Next.jsは、Vercelを提供するVercel社が開発したものなので、Reactベースのフレームワークでのデプロイに最適化されています。
色々機能を付けようとすると課金が必要ですが、Reactを使ったポートフォリオの公開にはこのVercelがわりと最適解だと思います。
Reactで制作したWebサイトをVercelで公開するには、まずGitHubにpushして、GitHubとVercelを紐づけます。
新たにGithubにプッシュするコマンド↓
git remote add origin <リモートリポジトリURL>
git add <変更したファイル>
git commit -m "<コミットメッセージ>"
git push -u origin master
Vercelにログインすると、Githubにプッシュしたリポジトリが表示されているので、Importをクリックします。
すると、このような画面に遷移します。
特段設定が必要なければそのままDeplpyをクリックします。
Deplpyクリック後、数秒でデプロイ完了します。
右上のVisitボタンでデプロイしたページに遷移できます。
今後サイトをを更新する場合、Gitをプッシュするだけで、自動的にデプロイされるようになります。
まとめ
というわけで多少荒削りな部分がありますが、Reactで制作したWebサイトが完成しました。
まだまだ改良の余地はあるので、随時更新して行こうと思います。