yuna

Webサイトのデザインはなぜ圧迫感を与える？色・文字・動きの関係

by

Webサイトを見ていて、思わず「圧が強い」と感じることがあります。 鮮やかな背景色、大きな文字、次々と切り替わる画像。どれもWebデザインでは珍しくない表現です。 それぞれを見ると、決して悪いデザインではありません。むし … 続きを読む

Webサイトはなぜ静かに待てない？スクロール演出と閲覧者の主導権

by

Webサイトを見ているとき、「どうして静かに待っていてくれないんだろう」と感じることがあります。 スクロールすると文字が現れ、画像が動き、画面の一部がいつまでもついてくる。ひとつひとつは珍しい演出ではありません。 けれど … 続きを読む

display: flexとinline-flexの違い｜margin: autoで中央揃えできなかった理由

by

Figmaのデザインを見ながら模写コーディングをしていたとき、ボタンを中央に配置しようとして少しつまずきました。 ボタンの中の文字を中央に配置するため、最初に書いていたCSSがこちらです。 justify-content … 続きを読む

巨大フォントはどこから「文字の暴力」になるのか

by

Webサイトを見ていると、画面いっぱいに文字を配置したデザインによく出会います。 大きな文字は目を引きます。写真を使わなくても画面に強さが生まれるし、文字そのものをグラフィックのように扱うこともできます。 私は巨大フォン … 続きを読む

Webサイトのアニメーションが「うざい」と感じるのはなぜ？

by

Webサイトを見ていて、アニメーションが気になって離脱することがあります。 フェードする。文字が動く。画像が切り替わる。スクロールに合わせて画面が変化する。 私はこれまで、そんなサイトを見るたびに「アニメーションがうざい … 続きを読む

ブルータリズムのレイアウト｜なぜ整っていないのに成立するのか

by

Webデザインでは、揃えることが基本です。 左端を揃える。余白を揃える。一定のグリッドに収める。情報のまとまりを作る。 そうすることで画面は整理され、閲覧者は情報を追いやすくなります。 ところがブルータリズムWebサイト … 続きを読む

ブルータリズムは、なぜ無骨に見えるのか

by

ブルータリズムWebサイトを見ていると、よく「無骨」という言葉が浮かびます。 飾り気がない。冷たい。荒っぽい。場合によっては、まだ作りかけのようにさえ見える。 でも、ブルータリズムは必ずしも白黒ではありません。 強烈な色 … 続きを読む

CSSで帯を作る方法｜背景色を使ったデザインを初心者向けに解説

by

Webサイトでは、見出しやタイトルの背景に色を付けた**「帯」のようなデザイン**がよく使われます。 CSSで帯を作る場合、特別なプロパティがあるわけではありません。 基本的にはbackground-colorで背景色を … 続きを読む

HTML・CSS・JavaScriptでスライダーを作る方法｜初心者向けに解説

by

Webサイトでは、複数の画像やコンテンツを同じ場所で順番に切り替えるスライダーがよく使われます。 ファーストビューやギャラリーなどで見かけることが多く、複雑な機能に見えますが、基本的な仕組みはそれほど難しくありません。 … 続きを読む