ページで主に使っているカラー
#eec9db
#C49DB5
#fff
#2d2d2d
UI / UX / HTML / CSS / JS
またデザイナーの道を続きたい気持ちで、これまでの作品を今勉強している技術で集めてみました。
独学でWEBの技術を勉強しており、授業まだ半分しか進んでいない段階で、もしかしたらもうサイトができるかもしれないと思い、作り始めました。
躓いたところが多く、向き合いしたくない時期もあり、検索やフォーラムでの質問を通じ、２か月をかけてようやくこのサイトができました。
このサイトは、私が現在持っている技術の集大成であり、向き合いたくない時期も乗り越え、成長の過程が詰まっています。
サイトのイメージは自分がパソコンを持っており、ペンで絵やデザインを作っている感じです。
作品がメインですので、ページはシンプルでデザインされ、メインカラーには薄ピンクをベースに、セカンドカラーにはグレイと白を使用しました。
#eec9db
#C49DB5
#fff
#2d2d2d
Deep #eec9db
Light #f6e2ec
Deep #a98799
Light #C49DB5
Deep #f8f9fa
Light #fff
Deep #2d2d2d
Light #9f9f9f
box-shadow: 1px 1px 12px 0px rgba(0, 0, 0, 0.2)
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
background: radial-gradient(circle at 50% 50%, var(--color-main) 20%, rgba(255, 255, 255, 0) 70%, #fff 80%, #fff 100%)
Line-height: 1.2x~2x
Font-size: calc(1.375rem + 1.5vw)
Font-weight: 500
Font-size: calc(1.325rem + 0.9vw)
Font-weight: 500
Font-size: calc(1.3rem + 0.6vw)
Font-weight: 500
Font-size: calc(1.275rem + 0.3vw)
Font-weight: 500
Font-size: 1.25rem
Font-weight: 500
P / Content text
Font-size: 16px
Font-weight: 400
Compartment Deco Text
Border-radius: 8px
Line-height: 1.5x
Point Article Text
Border-radius: 8px
Line-height: 1.8x
Article Text
Line-height: 2.6x
文字と画像を区別する時に使う
Padding: 1rem
Brand
制作物種類 / 制作物種類 / 制作物種類
画像のブランドを説明する時に使う
Text-align: center
Line-height: 1.5x
(Title) Font-size: 1.2rem
(Info) Font-size: 1rem
▲三つ折りパンフレット
画像の内容を説明する時に使う
Text-align: center
Font-size: 1rem
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus inventore beatae odit quisquam, eius soluta velit ipsum! Quod minus veniam praesentium tempora obcaecati, fugiat optio possimus illo architecto quibusdam distinctio voluptatibus sapiente laudantium numquam dignissimos. At tenetur repellendus sed maxime.
デザイン性を重視する時に使う
(Title) Font-size: H5
(Article Text) Font-size:1rem / Line-height: 2.6x
文章の内容を重点的に説明したい時に使う
Font-size: H5
Padding:16px
Margin: Top & Bottom 1rem