
240117 サイト分析 #08
分析するサイト様:山技屋-yamagiya-
山技屋-yamagiya-設計事務所が開発・販売する優しいものづくり。
「優しいもの」とは、使い手に寄り添った想いをカタチにすることだと感じます。 建築建材・インテリア・設計のお役立ちアイテムなど、こだわりの小さなものを優しいものづくり思想で作っています。
デザインをパッと見たときの印象を言語化する
・丁寧な雰囲気
・余白が多い
・綺麗
・線が細い
・柔らかい
・優しさ
要素が少なく余白が多いので、落ち着いた印象。
キャッチコピーの明朝体が優しさを感じさせる。
白を基調としており清潔さや丁寧な雰囲気を感じる。
ロゴ・文章・写真からブランド理解を深める
[ロゴ]

手書きのような筆文字書体で伝統的な印象を受ける。
[文章]
キャッチコピーなどの伝えたい文章の時は明朝体。
本文やリンクなどはゴシック体で読みやすい。
小さめな文章は優しさ・丁寧さを感じる。
[写真]

優しい雰囲気のある色味や、余白があり落ち着いた印象の写真。
手が写っている写真では、職人を連想する。
レイアウト・余白を分析する
[レイアウト]
・ファーストビュー
・コンセプト
・プロダクト
・スライド写真(右から左へ自動)
・お知らせ
・フッター
[機能面]

右上のロゴと画像が最初に表示される
続くように、左のキャッチコピーが上からフェードインで表示される

[情緒面]
余白が広く、落ち着いた優しい印象を受ける。
要素が少なく配置が整っており、落ち着きのある印象。
色味を分析する
ベースカラー:

アクセントカラー:

フォントカラー:

フォントを分析する

明朝:游明朝
游明朝体ファミリーは「時代小説が組めるような明朝体」をキーワードに、単行本や文庫などで小説を組むことを目的に開発した游明朝体 Rを核とした明朝体ファミリーです。
文字の大きさの揃った現代的な明るい漢字と、伝統的な字形を生かしたスタンダードな仮名の組み合わせは、これまでの明朝体とは違う、游明朝体の大きな特徴です。

英語:Roboto
デザイナーはクリスチャン・ロバートソン。
Robotoには二面性がある。機械的な骨格を持ち、その形状は主に幾何学的なものです。同時に、このフォントは親しみやすくオープンな曲線を特徴としています。一部のグロテスクは厳格なリズムを強制するために文字の形を歪めますが、Roboto は妥協せず、文字を自然な幅に落ち着かせることができます。これにより、ヒューマニストやセリフ体によく見られる、より自然な読書リズムが生まれます。
https://fonts.adobe.com/fonts/roboto#fonts-section
あしらい



アニメーション

フェードインで表示されるキャッチコピー
上から下へ伸びるラインのあしらい
感想/反省
要素が少ないシンプルでありながら整ったレイアウトで、そもそも余白が多いですが文字が小さいことでさらに余白を際立たせていると感じました。
山技屋さんのロゴのような筆の書体だと伝統的な印象を感じることにも気付きました。
また、デザイン制作において真っ黒である#000を使用してはいけない理由をきちんと調べたことがなかったため今更なんで何だろうと思い調べました。「明度差・彩度差」が大きすぎると目が疲れるためなんですね。
比較の画像付きで分かりやすく説明してくださっている記事がありました。
https://5log.hateblo.jp/entry/2018/12/23/091341