2. 西千葉工作室 ホームページ short版webサイトレビュー

こんにちわ！アヤカです。

Twitterで発信しているwebサイトレビューを紹介します！

Twitter版)webサイトレビュー⑤

レビューするサイト: 西千葉工作室 ホームページhttps://t.co/tnIQAgRvOp

サイト選定参考: https://t.co/327N5GvQV9

note記事: https://t.co/Ha5wKkSbZ6

noteで記事化したので見ていただけると嬉しいです！#webデザイナーと繋がりたい#webサイトレビュー#DIY pic.twitter.com/GNnKTPGcP0

— アヤカ@webデザイン勉強中 (@5BI24Bj5tbX5JZS) October 4, 2021

・レビューするサイト:

西千葉工作室 ホームページ　

西千葉工作室｜「つくる」「なおす」「つくりかえる」で日常をもっと楽しく。

・サイト選定参考:

SANKOU! | Webデザインギャラリー･参考サイト集

・ターゲット:

・自由研究として工作をしたいと思う小学生
・ものづくりに関心のある高校生・20代から60代までの男女

・配色:

白・黄色・緑

・フォント:

・コピーライト表記: Noto Sans

・上記以外全て: Noto Sans JP

・全体的なデザインについて

・作業風景の写真や工作室の特徴を示すイラストを巧みに利用して、短文で内容が説明されているため、情報がコンパクトで見やすい。
・白ベースのシンプルなデザインなので、写真やイラストの情報に集中しやすく良い。

・このサイトから学べる事

レイアウト:

・PC版サイトでナビゲーションをページ最上部ではなく、ページの左サイドに縦並びで配置する方法もあること。
Zの視線法則より、サイトを開いてから最初にページの左側を見るので、ロゴで目を引くことができれば、ページ最上部に配置よりもナビゲーションを更に見てもらいやすくなると考えられる。
ファーストビューの写真の上にナビゲーションがないことで、写真そのものの存在感が増す。ファーストビューの写真を強調するために、ナビゲーションを左サイドに配置することも有効であると考えられる。
左サイドにナビゲーションを配置するサイトは少数だと感じるので、サイトの見映えも差別化できると思った。

・コンテンツ内容を端的に紹介したいときは、内容を複数に細分化し、各々について写真やイラスト、その直後に短文を配置する形で紹介すると、見やすくて良い。

・ファーストビュー写真で閲覧者の印象に残すには、写真上で見せたい対象の妨げにならない位置(左下など)にキャッチフレーズを配置することが有用。

配色:

・背景を白単色としているサイトで優しい雰囲気を保ちたい場合、強調したいボタンの色を赤ではなく黄色にすると好ましいこと。
・白背景のサイトで用いられる主なフォントカラーを、黒ではなく緑寄りの暗い色にすると、シンプルなサイトに平和で優しい雰囲気が付加されるため好ましいこと。

・PC版外観

・iOS版外観

最後まで読んで下さり、ありがとうございました。