【デザインを見る】絵本翻訳コンクール presented by 神戸女学院大学 文学部英文学科
mimi | webデザイン勉強中（https://note.com/webdesign_mi0026）さんの投稿を見て、私もwebデザインを見る勉強をしてみる
本日私が見るサイトはこちら
絵本翻訳コンクール presented by 神戸女学院大学 文学部英文学科
( https://e.kobe-c.ac.jp/translation_competition/ )
これをmimiさんの見ていたものになぞらえて私も見ていこうと思う。
1 最初の印象→どこからその印象を受けたのか
2 いいなと思ったポイント→レイアウト、余白、配色、文字組み(フォントサイズ、行間、文字間)、あしらい
3 レイアウト・余白を分析する→機能面(配置や視線誘導)
4 フォントの分析→サイズ、行間、文字間
5 色味の分析→フォント、全体
6 あしらい→印象を左右したり、視線誘導を行う、ブランドの刷り込み
7 アニメーション→動きの向き、スピード
1
・子供向けの教育的なサイト
→中彩度の色を使い、羊などの可愛い童話的なキャラクターやあしらいが使われている。レイアウトは自由すぎていない、きちんと感があるから？
2
・ファーストビューでカーテンが使われており、童話や絵本のようなファンシーな感じが想像できる。
・ファーストビューで星がキラキラ光って動いており、ファンタジー的な要素を出している。
・レイアウトが綺麗で見やすい。
・アニメーションが優しげで安心感がある。
3
・レイアウトやあしらいなどの組み方が整理整頓されていて、わかりやすい。綺麗。
4
・フォントはシンプルめ。
・行間が特に話されていて、わかりやすい。普通の文章でも文字太めに設定されている？
font-family:Zen Kaku Gothic New,sans-serif;
font-weight: 500;
font-size: calc( .16327vw + 1.33878rem ); ( SP:14pxほど )
letter-spacing:.05em;
line-height:180%;
5
・カラフルなイラストを使っているが、中彩度な色でまとめているため、ごちゃごちゃ感がなくまとまっている。
・メインカラーが青緑( #179dac )、青( #2b538e )、赤( #f25f50 )、黄色( #ffda6d )という意外な組み合わせ。
6
・ファーストビューでアクセスした時にカーテンが開くようなアニメーションが、物語の中に入ったような臨場感を出している。
・所々に入っている羊などのイラストが絵本のテイストのような雰囲気を出している。
・あしらいもノーマルな形だが、メインカラーを重点的に使うことで、雰囲気を邪魔することなく、サイトに溶け込んでいる。
7
・ファーストビューでアクセスした時にカーテンが開くようなアニメーションが、物語の中に入ったような臨場感を出している。
・星のキラキラや、使われているイラストが、ちょうど良いスピードで動くため、安心感も与えている。
