みなさんこんにちは！プロクラスの村瀬です。
今回は色々なサイトのデザインを日々見ながら勉強しているのですが、今回は「食」をテーマに素敵だなと感じたものを2つご紹介して、それぞれのデザインの良さや視覚的効果などを掘り下げをしてみたいと思います！
それではまず一つ目から見てみましょう！
縁線図鑑
〇どんなサイトか
東急沿線周辺のお店にまつわる人々の縁にフォーカスし、図鑑という形で地域の魅力を発信しているサイトです。
〇ロゴや装飾について
赤いロゴマークが特徴的で、メインビジュアルやサムネの装飾としても大きく使用されおりとても目を引きます。
ロゴの線がくるっと回転しているので「つながり」という言葉を連想させられます。
メインビジュアル部分では、写真とロゴの形と相まって本を広げた時の形に少し近い印象もあります。縁線図鑑というタイトルともリンクしているように見えて面白いです。
ロゴのフチのざらつき感や、太めの線で直線過ぎないイラストも含めて
親しみやすさや手作り感、人とのつながりからくるあたたかさも連想できます。
〇パーツやフォントの形について
ロゴや写真の形、イラストやフォントに至るまですべてが丸くやさしい印象があり、これらの要素も人のぬくもりを感じさせる部分のように思います。
〇色について
朱色と背景色のベージュの2色がベースとなっています。
少し和の雰囲気もありつつ、色数が絞られているのでイラストが多いエリアでもごちゃつきがなくまとまっています。
〇レイアウトについて
全体的には余白感もあり記事一覧エリアも比較的シンプルなので読み物コンテンツとして読みやすさもありつつ、一面にイラストが使用される大胆なレイアウトのエリアもあり、メリハリがあって飽きさせない工夫があります。
続いて二つ目のサイトの深堀をしていきたいのですが、もし虫さんが苦手な方はここまででブラウザバックしてください…！
我々が普段使用している食材の代替えとして、昆虫や野草などを使用したレシピやイベントの発信しているサイトになりますので、コオロギやカメムシなどの写真が出てきます。
大丈夫な方はそのままお進みください～！
*
*
*
渋谷野食図鑑
〇どんなサイトか
渋谷周辺を舞台に、普段口にしている食べ物の代替えとして野生している植物や昆虫などの情報や食べ方の紹介と展覧会や飲食体験パフォーマンスなどの発信をしているサイトになります。
〇色やフォントについて
蛍光黄緑とベージュをベースにポイントで黒と朱色が使用されています。
サイトには元々食用としてあまり認知されていないものがラインナップとして並んでいます。
蛍光黄緑や朱色の「危険」であったり「注意」といったイメージの色に近い色が使用されていることでこれは食べられるのかな…？といった気持ちにもなりつつ、背景色のベージュの面積が多いことやフォントが明朝体で図鑑のようなまじめ印象もありバランスが取れているように思います。
〇装飾やレイアウトについて
文字の下線や、食べ方の装飾に枠線が使用されていたり、四隅の装飾もカッコの線が重なったようなものが配置されており、かしこそうであったり、スタイリッシュさも感じます。
メインビジュアルでは英語や日本語が混合で配置されていて、文字の方向も縦横混ざりつつもそれぞれの文字のグループ間での余白がしっかりととられてスッキリとした印象を受けます。
まとめ
今回、「食」をテーマにサイトを探してみたのですがたまたまどちらも図鑑というタイトルが入っており、扱っているもの自体には違いがありますがそれぞれのアプローチの仕方でサイトの意図にあう魅力的な見せ方をしていて面白いな～と感じました。
また色々なサイトを深堀して研究してきたいと思います！