香月さま
すみません、遅くなりました。
ご心配をおかけしていたらすみませんでした。
まず最初にお伝えします。
代表作できました。（自画自賛すみません）
でもちょっと自信あるかもです。
確認用_URL
https://dev.wine-sweets.com/renew2026/
ツモンとyukikatsukiのサイトはこれに変更
https://dev.wine-sweets.com/matrix7.html
※ドメインを至急取得しないといけない（すみません、ギリギリになってしまい）
動作確認動画
https://kanegaetakanori.com/ktwdplus/wp-content/themes/twentythirteen-plus/img/mantohihi-px.mov
サイト説明
今回あらかじめ決まっていたこと
1. 文字を小さく
2. シンプル
3. 基本→白、文字→黒
4. トップのデザイン、左上に英語、右下に日本語をともに3行で配置
上記のルールに気を付けて作成
このサイトは、4番の打ち合わせで決まった内容を踏まえて、最初に表示される画面が、ほとんど何もない真っ白な状態から始まるのがよいと思いました。
そして、余計なことをしないことが正解だと思いました。
一見するととてもシンプルで静かな構成に見えます。
ロゴとメニュー、余白を大切にしたデザインで、操作も直感的です。
ただ、その見た目とは裏腹に、内部ではかなり高度な仕組みを使っています。
普通のWebサイトでは、あらかじめページの内容が表示されていて、メニューをクリックすると別のページに移動します。
しかしこのサイトでは、メニューをクリックしてもページは切り替わりません。
白い画面はそのままで、Ajaxという技術を用いて、その場で必要な内容だけを読み込んで表示しています。
Ajaxは、ページ全体を読み直すことなく、必要な情報だけを裏側で取得できる仕組みで、動きが滑らかで、操作が途切れにくいのが特徴です。
ただ、この方法は見た目がシンプルなわりに、表示の順序や状態管理を細かく考える必要があり、普通に作ろうとすると意外と難しい構造だと私は思っています。（僕が技術ないだけかもですが）
例えるなら（例えなくてもよいのですが..）見た目は軽自動車なのに、中身はF1に近いレベルのエンジンを積んでいるようなサイトです。
オーバースペック気味で、“その技術が本当に必要なのか”と思われるほどですが、雪山に着ていくダウン、街中で着てどうするみいたな話ですが（いらない2回目野例え）、本気を出せば高いパフォーマンスを発揮できる作りです。更新もかなり楽にできるようにしています。（僕がしますが、携帯でもできるようにしていますので）
ページをめくるのではなく、同じノートの上に必要な情報を書き足していくような体験を目指しています。
ノート、ノート言ってますが、それが方眼紙に続きます。（方眼紙の意味がわからないと思いますが後で説明）
これは書かなくてもよいかなとも思ったのですが、香月さんの作られるものには、言い方が間違っているかもしれませんが、品があるとずっと感じています。
今回のサイトは、あえてかなりシンプルにしている分、ちょっとした動きや間の取り方で、その「品」を出さないといけないなと思いながら作りました。
やり過ぎず、でも必要なところにはきちんと手を入れる、そのバランスを意識しています。また、以前「そこまで動かなくてもよい」というお話もいただいていたので、その点も踏まえつつ、動かすところと抑えるところのバランスを心がけています。
これは自分自身の話でもありますが、いつも「品のあるサイトを作らないといけない」と僕も思っていて、やはり安っぽく見せたくないという気持ちは強くあります。以前、香月さんにそこは褒められたと記憶していますが..（違っていたらスルーしてください）
PC
SP
スマホの文字をもっと小さくするとクリックできないという問題があるのでこれくらいが許容範囲かと思います。
マウスオンとかでは横から線が伸びる感じにしています。（スマホでは関係ありませんが）
クリックするとオーバーレイ（横から横に動くカーテンみたいなもの）が上に表示されます。
この時にメニューやロゴなどが消えて動いたりします。
ちなみに動いた線もちゃんと戻るようにしています。（意味がわからないかもしれませんが、クリックすると線がちゃんと戻ります（説明になっていないかもしれませんが））
※ちなみにスマホはクリックするとタッチなのでこの動きは関係ないのですが..（笑
このメニューをクリックしたら出すオーバーレイはもともとは反転して黒と白だったのですが..（前回の打ち合わせで提案）これ↓Ajaxを利用せずに普通のページを全部記載していて通常は消して、表示するときにそれを出すという仕組み（読み込みに時間がかかる）
以前メッセージでいただいていた「ホームページの背面とかを真っ白なホワイトの分量おおめなイメージになりました」というのがずっと頭の片隅にありまして、ちょっと悩んでいました。
作っていく過程で、白多めにしてこの際シンプルにオーバーレイもやめようと思いました。
この際、ロゴは端にあるのだから真ん中はあいているのでそこに表示でも良いかなと思い…これがそのサンプル画像↓
これで作成していたのですが、ふと気づいたのですが、ケースリアルさんのサイトに似ている様な気がしてきて…
気にしすぎかなとも思ったのですが、明朝体だし、香月さん近い人だし、周りから思われたらいけないなとも思い却下。考えすぎかもですが、文字サイズなども違うし、ロゴの位置も違うけど..とも思ったけど、最近は厳しいからちょっとでもよぎったらやめるが正解だと思いますので..
ただこれが時間かかる原因になりました。
結局オーバーレイの白黒反転でいくか、それとも白1色でいくかと迷っていたのですが、作っててノートみたいだなと何故か思うようになって、いや降ってきて、そうだ、ノートにして香月さんが綺麗にコラージュしているような感じがでて、シンプルでアナログな感じが出たら良いと思い、オーバーレイの背景を方眼紙にしました。そうすればちゃんとルールを守って「ホームページの背面とかを真っ白なホワイトの分量おおめなイメージになりました」になるなと思い、白一色だと変わった感じがしなかったのと品を出すための動きなどがおかしかったので、背景色は変更したくて、アナログ感ということで、昔あった方眼紙の背景、あまり使用する出番がなくて誰も使ってないこれを利用するのは面白いかなと思ったのと、文字サイズが小さいので、小さい方眼紙が綺麗に文字を見やすくしてくれると思い利用しています。
ただ、普通に出すのも面白くないので、日本語のメニューをクリックしたら表示する内容は日本語が上、英語が下、クローズのボタンも閉じるで縦書き。英語をクリックしたら、その逆にしています。（結構これ技術あるかと思います）
当初使用するつもりのなかったAjaxというのを利用して何もない状態からクリックして読み込ませるようにするのを採用しています。
※インスタのリンクとお問い合わせ、これが必要だったらここに記載しようと思います。
すみません、うろ覚えで。
Sweets Designerのところはリンクとアコーディオンで開くようにしています。
PCだけの話ですが、アコーディオンだったらClick、リンクで別ページに飛ぶ時はViaLinkの文字がでるようにしています。
これもスマホは関係ないのですが…（マウスオーバーが関係ないので）
アコーディオンも表示する時にふわっとさせています。Ajaxのせいでこれが結構手こずったりもしたのですが… なんとか設置できました。
atelier tsumonsのページはまだ準備中ということだったので、とりあえずの文章いれてます。
以上がサイトの説明になります。
気に入っていただけると助かりますが、まずは本当に遅くなってしまい、申し訳ありませんでした。
ギリギリにならないと力を発揮できない、夏休みの宿題も最後に頑張るタイプなのでご了承ください。（すみません）