website見る練習23

nam@デザイン関連の学習の記録

医者に行って熱が下がって出社したらその夜まさかの40.4度。
副鼻腔炎の診断があったから、高熱や目や頭が痛いときは即病院とネットにあったのでうのみして深夜に近所の病院へ。
結果はコロナでもインフルでもなかった、ただの風邪だった。
ただの風邪でここまで重症になったのは初めて。
この謎風邪って10月くらいから流行っているのと情報が、これもネット情報（X：旧Twitter）。
風邪の時に家族に支えてもらい、周囲の方もお心遣いの言葉など、季節は寒くとも心は常に暖かかった・・・。
体調管理はできることはしているはずだが、不可抗力なところもある・・・。

00.さ、今回選んだサイトはこちら！

02.このサイトを選んだ理由

  • 台湾です！台湾のサイト。pinterestとか雑誌とかでたまに台湾や韓国のデザイン見ることがあるけれど、台湾はずば抜けて可愛かったり洗練されていると思う。漢字を扱う者同士で、文字組とか配置も気になるのもある。私が気晴らしで中国語をひそかに勉強していることも関係している。

  • とくに、かわいくて写真の撮り方もぐっとくるものがあります。このくらいのものをSTUDIOとか他CMS、またはコーディング込みで策っと作れるようになりたいな～。

03.概要

台湾料理を出すお店のWEBサイト。
よく見たら、台湾のサイトじゃなかった（汗）、台湾料理店のサイトってことかな？

04.目的

  • お店のホームページを構える

  • お店の詳しい情報を載せる、知らせる

  • お店の周知

05.ターゲット予想

  • 【メイン】都市部に住む、または新しいものが好きな20～60代女性

  • おしゃれやカルチャー、旅行が好きな20～30代男性

  • 【メイン】カップル、夫婦

  • 40～60代のイケてるおじさん

06.ファーストビュー

  • 第一印象は、ポップだな～、と。

  • 台湾ぽさは、しっかりとした明朝。タイトルらへんが明朝。漢字を思わせる。台湾を思わせる。ここでゴシックにしたら、今時になりすぎて、台湾の人に売る台湾のお店ならよいが、日本人に台湾っぽさを伝えるのは明朝がしっくりくる。

  • 動画でメインビジュアルを見せている。食べ物⇒食事シーンという流れで撮っている。商品をしっかり見せつつシーン訴求している。

  • ファーストビューの文字は画像。動画の上に文字が置かれている。最近、ファーストビューの文字は画像なところが多い。見せるところだから文字でやらないのか。

  • サーフェスのノーパソでFVは全面動画になった。androidでは7～8割が縦長の動画で埋まっている。

07.ナビゲーションメニュー

  • PC版もハンバーガーメニュー。

  • SP版のハンバーガーメニューも太くて大きさも十分にあり押しやすく見やすい。

08.フォント

  • Poppins・・・英字見出し40px、フッターカテゴリ19px、フッターその他13px

Poppinsはその名の通り、ポップでエネルギッシュな印象のフォントです。
デザインに抑揚や賑やかしを出したい時、良い効果を発揮するフォントとなっています。

https://muugmuug.com/design/googlefonts01/

  • dnp-shuei-mincho・・・明朝大見出し44px、中見出し28px

「秀英体」は、大日本印刷 (DNP) の前身である秀英舎の創業以来、100 年以上にわたり開発を続けている書体です。 「秀英明朝」は、豊富なファミリーを持つ秀英体の中でも、主軸となる書体です。「DNP 秀英明朝」は、長年にわたり、本文用の明朝体として書籍や雑誌のテキストを伝え続けてきました。「い」「こ」など、ひと筆書きが印象的なこの書体は、しっかりとした信頼感を読者に与えます。横画の太さは他の明朝体に比べて太めに設定しているため、細い線のちらつきが少なく、目に優しい黒みを保ちます。 太さは L・M・B の 3 種類を備え、本文組や見出しとして組合わせることで、秀英体の表情による統一感と落ち着いた印象を伝えます。

https://fonts.adobe.com/fonts/dnp-shuei-mincho-pr6n#access_token=eyJhbGciOiJSUzI1NiIsIng1dSI6Imltc19uYTEta2V5LWF0LTEuY2VyIiwia2lkIjoiaW1zX25hMS1rZXktYXQtMSIsIml0dCI6ImF0In0.eyJpZCI6IjE3MDIzOTUyOTY0MThfOGI0ZmUwOGYtOGViZi00YzExLWEzOTgtOWM4NDc1YTEyYWI0X3V3MiIsInR5cGUiOiJhY2Nlc3NfdG9rZW4iLCJjbGllbnRfaWQiOiJUeXBlS2l0MiIsInVzZXJfaWQiOiI0NENBMERGQTVEQ0ZFMTk1MEE0OTVGRUJAQWRvYmVJRCIsInN0YXRlIjoiIiwiYXMiOiJpbXMtbmExIiwiYWFfaWQiOiI0NENBMERGQTVEQ0ZFMTk1MEE0OTVGRUJAQWRvYmVJRCIsImN0cCI6MCwiZmciOiJZQVg2TVNIRlZQUDVNSFVLRk1RVllIQUFDQSIsInNpZCI6IjE2OTY5NDUyMzA1NDdfMDFjYTgxYjUtOWU3OS00NjVhLWFjODQtNTY1OTI4NDBiNWUzX3V3MiIsIm1vaSI6IjEzMDUzMDM1IiwicGJhIjoiTWVkU2VjTm9FVixMb3dTZWMiLCJleHBpcmVzX2luIjoiODY0MDAwMDAiLCJjcmVhdGVkX2F0IjoiMTcwMjM5NTI5NjQxOCIsInNjb3BlIjoiY3JlYXRpdmVfY2xvdWQsb3BlbmlkLEFkb2JlSUQsZ25hdixhZGRpdGlvbmFsX2luZm8ucm9sZXMifQ.KUYpsmKR2njDOTK8RhxITvKXRKuOCoPjpR7jeKRKSj81F0cXQuJfrie-mivDrVBg1YqtYuIqvfUirWL6YX9K0RQNMbAe-Ak2ZVY_Fqd7vbwpwDF-TpUCvqBd30rd_VjEJ28T0lBo65PNt7StFzCkNsPJUwaQ5rHQ0CcDifiAGPwzXOxh1NpseARIp13QSQibQpkcZ6KisbasGwX8e4d7_xRZukJptW45S9LZvTiAKKU4ULzaUHNzBe7Z9XXtPHVCxp_Go0BPMrqKD3uCQORewP8hbXClOLagy90xIoZzkzmhydK1dhGfYa0UHrQRlCPo-chGXU_golioiuF3zyRRyQ&token_type=bearer&expires_in=86399995

  • Noto Sans・・・本文15px

09.配色

  • #F9F6F4　とても薄い赤茶色　背景1

  • #F5F0EC　背景1より少しだけ濃い赤茶色　背景2

  • #FFFFFF　白　背景3

  • #004B34　濃いすっきりとした緑　見出し、ロゴ、ナビ背景

  • #A9876D　薄めの黄土色　ハンバーガーボタン、見出し、差し色

テキストがほぼすべて緑なのに、目が疲れない、チカっとしない。そこまで緑！！という印象にならない。逆に黒系だと目に留まりすぎてしまう。写真や雰囲気を大切にしているのか。

10.考察や気づき

TOPICのところだけ、延々とリロードされてしまうので、個数で次のページに行くボタンがあるか、もっと見るを押したら出てくるほうが、ユーザーとしてはびっくりしない。ハンバーガーを押して遷移するより、すぐにフッターまで行けるのならページを一瞥してフッターのナビから遷移したほうが楽でそうしようとしていたがスクロールすればしただけリロードされるので想定外の動きに感じた。

他のデザインの組み方はユニークで、目に留まり飽きない感じであった。
写真の撮り方が絶妙で、ここまで出来たら最強だなと感じる。

この記事が気に入ったらサポートをしてみませんか？