カテゴリー: Coding

CSSだけでできる画像フェードイン超やさしい入門

「CSS 画像フェードイン」と検索したとき、まず知りたいのは“どのコードを書けば画像がふわっと表示されるのか”ということだと思います。フェードインは、CSSだけで実装できるシンプルなアニメーションで、画像やテキスト、… CSSだけでできる画像フェードイン超やさしい入門

日本のWebサイトで多用されるFade inアニメーション。見づらさ・ストレス・読了率低下を招く原因として、海外ではすでに批判も増えています。本記事では「Fade文化」がなぜ嫌われ、今後どう消えていくのかをデザイン観点… スクロールのたびにFadeするサイトが消える日

ブルータリズムUIは、近年の海外サイトを中心に再評価が進み、国内のWEBデザインでも確実に存在感を増している表現です。本記事では「初めてブルータルを学ぶ人でも理解できる入門編」をテーマに、特徴・思想・レイアウト・配色・… はじめてのブルータリズムUI入門｜海外サイトに学ぶWEBデザイン基礎

WEBサイトでよく見かける「カルーセル」。画像やテキストが横に流れ、次々と切り替わるあのUIです。ですが、「そもそもカルーセルとは何か？」と聞かれると、意外と明確に答えられない人も少なくありません。本記事では、カルー… そもそもカルーセルとは？WEBサイトでの役割とCSS基礎を解説

WEBデザインを学び続けるほど、ただ整ったレイアウトでは心が動かないと感じる瞬間があります。海外のサイトを眺めていると、意図的な“毒”がデザインに生命力を与えていることに気づきます。ミニマルが正義とされる風潮の中で、ブ… デザインに“毒”が必要だと気づいた瞬間

WEBデザインにおいて、大きいタイポグラフィーはユーザーの視線を奪い、ブランドの印象を一瞬で決める強力なデザイン要素です。迫力やインパクトを持ちながら、洗練されたアートとしての魅力も備えています。本記事では、タイポグ… 大きいタイポグラフィーが生むWEBデザインの迫力と洗練

WEBデザインでは、**行間（line-height）と字間（letter-spacing）**の調整が読みやすさを左右します。適切な設定は文章の印象を大きく変え、サイト全体のクオリティを高めます。本記事では、フォン… WEBデザインの行間と字間｜読みやすさを作るline-heightとletter-spacing

デザインの世界では、アニメーションは魅力的な表現手段のひとつです。しかし、過剰な動きや情報が重なると、ユーザーの視線を奪い、目的を見失わせる“アニメーションの暴力”が生まれることもあります。本記事では、派手な動きに疲… アニメーションの暴力から学んだ“静けさのデザイン”

Webデザインの勉強を続けていく中で、私は「自分がどの作業に一番ワクワクするのか」を深く考えるようになりました。世の中では「初心者はバナーから」とよく言われますが、私はその方向にどうしても気持ちが動きませんでした。代… PC版CSSの調整が楽しすぎる理由と、私がLPデザインに惹かれた話

WEBサイトでよく使われる帯（オビ）デザインは、シンプルながらページ全体の印象をグッと引き締めてくれる万能パーツです。文字を乗せたり、色を変えたり、セクションの区切りに使ったりと、活用場面は非常に幅広いです。また海外の… HTML/CSSで作る帯デザイン｜印象を締める実装術

CSSで中央寄せがうまくいかない――そんな小さなつまずきに、作業が止まってしまうことはよくあります。実は、中央寄せのトラブルのほとんどは、text-align・margin auto・flex という3つの仕組みの「定… CSSの中央寄せができない原因と正しい解決方法まとめ

Webサイトは、スマホ・タブレット・PCなど、多様なデバイスで見られる時代です。その中で「レスポンシブデザイン」を理解しておくことは、どんなWeb制作者にとっても必須のスキルです。本記事では、スマホファーストの考え方か… レスポンシブデザインの基本：スマホ時代に必須の設計術