常願寺川公園 BBQ TERRACE

MV

• 色んな写真を見せたいとなった時にデザイン性の担保がしにくいから一つのトリミングの中に取り込んでしまって、その中で切り替えていくという見せ方。
• 台形(バーベキュー台？)クローバー、葉っぱの要素を幾何学的に解釈したトリミング。
  こういうセンスが欲しいですね。
  →何らかのモチーフがある場合に、それを幾何学的に解釈してデザインに反映するという頭は持っておきたい、いかんせん自分は具体的なイラストとかアイコンとかに頭が行き過ぎる。
• 三つの写真表示領域をバランスよく等間隔に並べつつ、下端は合わせるというレイアウト。
• 画面の右上にキャッチを乗せて読ませてるが、あくまで写真が優先なので、左ではなく右。テキストだけでは味気なかったのか、かろうじて下線。これもそこまでコピーを立たせたくなかった微妙なラインを付いていく感じ。
  0か100かに近い極端な考え方をしがちなので学んでおきたい。
• コピーが縦書き、縦書きにする効果としては、この場合レイアウト上写真に寄せてコピーをするっと見せれるほか、横書きがメインのwebサイト上において、ちょっと目を引き付けれる、縦書き自体は叙述的に見えるというメリットがある。
  縦書きのデメリットは読みにくいこと、このサイトだと、しっかり伝えたい情報は横書き、フワッと印象として伝えたいコピーは縦書きにして見せてるかと思われる。
• 各写真に一つ、ぐらいのイラストの配し方、写真だけよりもこういう要素があると楽しげに、具体的なイメージを掴みやすくなる。
  →こういうイラストなどの配置する要素を考えるときにやっておきたいのは、デザインする対象を深く理解するということだな、うん。
• MVの下部には、ロゴの配色を利用したカケアミでちょっと華やげている、かけ線だけのカチカチ感を緩和させようとしているねらいか。
  →多分デザインした人は「なんかつまらないな」で配置してる可能性？
  こういうつまらなさ回避のやり方は覚えておきたい。
• 画面サイズに合わせてMV部分の高さを変えるデザインではない。
  まあ無理にやらなくてもいいよね、見栄えが良ければ…！
• 左上のロゴとナビゲーションもバランスが良い、このレイアウト、後でトレースしよ。
• 全体的に細い罫線・余裕を持った行間やコンテンツ間隔と、スッキリとした印象がある。
  →このサービスの対象がなんというか「丁寧な暮らし」的な人とか「ちょっと上質な体験をしたい」という層だからなんだろうな。
  施設の紹介文にも「フォトジェニックな～」とかそういうインスタ映えを押し出した文言が見られる。

ヘッダー部分

他はletter-spacingが0.03emだったのに対して、ここは0だった

横の並べ方としては、各項目のマージンを同じにして隙間を空けて並べていた…！

About

全体

しっかりと取ってある余白

見出し、リード、本文の間は余裕を持ったマージン、本文行間はline-height2.2とこれもまた余裕をもたせてる。

見出し

見出しは英語がデカい、ターゲットが大人なのでちょっとオシャレ感強めに出そうと思ったら英語を大きくしたほうがいいかもね
ただ、テキスト自体はそこまで太くしてない。細い罫線でレイアウトを区切っているデザインなので、太字よりは細字を大きくして立たせればいいかという印象。
あとは背景が真っ白だから細字でも強気に出れるっていうのもあるんだろうな。

見出し横の日本語見出しは小さいけど罫線で強調
というか、この線を引くことでカチッと感に寄与している可能性がある。
テキストを小さくしすぎたくない、けど英語と並んだときに下めに並ぶのは嫌、みたいな所の解決策の可能性がある。あとはベースラインを意識させて、その位置に全てが合ってるよ、という事を示せる効果もありそう

リンクボタン

リンク部分はロゴの色を利用しつつアイコンは矢印。
リンクテキストは右寄せにして左に余白を空けちゃう感じは自分だと中々できないから羨ましい。
→コンテンツ間を空けるほかに、こういった余白の使い方も余裕がある印象に見えるんだろうな。
→いや、これは目の流れを意識した配置。Aboutの時は左上が見出しで右下にリンクのボタンがあるので、ある程度四角い領域としてテキスト部分のコンテンツを四角い形として保ちつつ、目の流れでテキストが読み終わった先に導線を置いておくっていうレイアウトだな。

写真

写真を配置してるけど、写真だけだとMVと同様に幾何学感が出過ぎるのでイラストを配して、印象を柔らかめにしている。
写真の背景にも色カケアミを敷いて若干華やげる。

コンテンツしたの画像部分

テキスト・写真の下に一旦写真を罫線で囲んで見せてやる、あくまで施設をしっかり見せたいサイトなので。
→Aboutの内容の補足にもなってる？

MENU

全体

ここはちょっとレイアウトを変えて真ん中寄せな見出し
レイアウトを変えて変化を出す、一辺倒な構成ではなくコンテンツにバラエティ感を演出できる。
→エンタメ系だとあり、カチッとしたビジネス系のサイトだと控えた方がいいかも？

見出し

真ん中寄せにしても、左英語・右日本語でいいんだ…、と思った。
ちょっと不安になって日本語を下に置いちゃいそう。

キャッチコピー

コピーは縦書きで配置、これはMVから一緒

ご利用料金

ちょっと面白いなーって思った、カケアミを背景にして白ベタを置く。
コピー部分にも白ベタで読めるようにしてある。
→あまり背景の種類を増やしたくない＋罫線でだすというよりは違う見せ方をしたかった、というイメージなのかしら？

ラベルと文章部分、情報の強弱の付け方。
ラベル部分の方が本文部分よりもフォントサイズは小さいけれど、使ってるコンテンツ領域の高さや位置のレベルが高いからラベルが一番になってる。

使っている写真

ここはMVと同じモチーフを使って写真をトリミング。四角い方が見せやすいかなと思うのだけど、メニュー詳細の方に詳細な情報と画像があるからここでは雰囲気を見せるだけってイメージなのかもしれない。

各メニューのテキスト

ここも余裕をもたせた余白の構成、英語サブタイトル、日本語見出し。
メニュー三つだしロゴの色に合わせてサブタイトルの後ろに引きたくなっちゃうよなぁ、背景…。
まあでも意味合いから考えたらそれをする意味はないよねという思いもある

やすさが売りじゃないから値段はそこまで大きく書かない。
バカの一つ覚えみたいに値段を目立たせちゃう所があるけど、こういうのもケースバイケースで考えていくべきだな…。

リンクボタン

ここはAboutと同じく緑色、全体が中央寄せデザインなので、ボタン内のテキストも中央寄せ。
これも目の流れを意識した結果、三列に並んだメニューの下のボタンだから真ん中に置いたほうがいいだろうという考え方。

下部のその他のメニュー

ここは罫線で囲ったレイアウト、ここまで見て思ったのは、罫線レイアウトばっかりになると上も下もあんまり差別化出来ないから、上のレイアウト、装飾を変えることで一辺倒罫線レイアウトを回避したんだろうなって。

全体としてサラッと罫線でレイアウトしつつ、余白が空いてる所はイラストを置いて隙間感を回避していく解決方法。

リンクアイコンは、ここは大なりを使ってる。

BBQ Guide

全体

全体としては、これまで書いてきた事と重複するので割愛

施設案内

罫線レイアウトだけど、縦に並べたリンクリストで罫線は舌端のみ
おそらく上に罫線引いたら線がうるさくなっちゃうし、罫線引いてピタッとくっつけたらそれはそれで小さく縮こまって見えちゃうから下端に線を引くだけに留めて、あとは写真の上端のラインでボタン領域をうっすら理解させておくっていう狙いなんだろうなって。

NEWS・FAQ

全体

上記と重複するので割愛

フッター

全体

かなり余裕を持たせて余白を広く取ってからのフッター