モバイルファーストサイト100選 その12 Hanaiguchi|ハナイグチ
東京都杉並区にある洋食レストラン「Hanaiguchi」のHPです。
ナチュラルな感じのするオシャレなお店ですね。
都会の中にいることを忘れさせてくれそうです。
https://hanaiguchi.studio.site/
さて、サイトのほうは
ノーコードツールのSTUDIOで作られているようですね。
STUDIOの作例集から参照させて頂いてます。
![](https://fifties-blog.genzaburow.com/wp-content/uploads/2023/12/64c5c49d-c137-42b5-9455-b8994e838865-1024x495.jpg)
色
ここで使われている色はこちら
![配色](https://fifties-blog.genzaburow.com/wp-content/uploads/2023/12/スクリーンショット-2023-12-26-214035.jpg)
色数も少なく、非常に落ち着いた感じの色合いです。
土や木といった自然を感じさせるものに
応用できそうです。
![SP1](https://fifties-blog.genzaburow.com/wp-content/uploads/2023/12/sp1-3-223x1024.jpg)
![SP2](https://fifties-blog.genzaburow.com/wp-content/uploads/2023/12/765e7c71-cc62-4864-9af7-466a63b03e0d-236x1024.jpg)
フォント
日本語には ”A1ゴシック M JIS2004″
見出しや英数字には ”Cormorant SC”
が使われています。
この英数字はとてもオシャレですね。
見出しに使うのが最適と思われます。
覚えておきましょう。
![SP0](https://fifties-blog.genzaburow.com/wp-content/uploads/2023/12/sp0.jpg)
構成
構成はpc時はスプリットレイアウトで、
左のスペースはスライダーでループしています。
よくスクロール量によって画像を変える手法を見ますが、
これは違うようですね。
pc時、下部にナビゲーションがあり、ページ内リンクになっています。
これはSP時は上部に現れるようになっています。
ナビもシンプルで、判りやすいです。
店の地図を別ページに飛ばすようにして
ページ上に表示しないようにしているのも、
良いと思います。
全体的に情報量が少なめで、
コンパクトに纏まったオシャレなサイトですね。
情報の少ない店舗などのサイトには、
ぜひ参考にしたいところです。
![カフェ](https://fifties-blog.genzaburow.com/wp-content/uploads/2023/08/kris-atomic-3b2tADGAWnU-unsplash-1024x683.jpg)