Inter
英数字・見出しに使用するモダンなサンセリフ体。トラッキングを詰めた極太ウェイトでインパクトある見出しを構成。
Zen Maru Gothic
日本語テキストに使用。角のない丸みが親しみやすさと読みやすさを両立し、温かみのある印象を与えます。
Portfolio Site
職業訓練校Webデザインコースを受講していた時の卒業制作として作成したポートフォリオサイトです。
Design
デザインコンセプト
Color Palette
-
#FFB5BA — Primary Pink
アクセント・ホバー・ラベル・ドット装飾
-
#AEE2FF — Accent Blue
背景ぼかし装飾
-
#FDFCF8 — Cream
背景・温かみのあるホワイト
-
#1A1A1A — Charcoal
テキスト・ボタン
作品が主役になるデザイン
「見てもらう人の目を引きつつ、作品が主役になる」をテーマに設計。クリームホワイトとチャコールの組み合わせで上品な余白感を出しながら、ピンクのアクセントカラーで視線を誘導します。
背景に配置したパステルのぼかしはCSSのblurフィルターで実装し、コンテンツが柔らかく浮かび上がる奥行き感を演出しています。
Key Points
実装・デザインのポイント
モバイルファーストのレスポンシブ設計
スマートフォン・タブレット・PCすべてで崩れないよう、CSSのメディアクエリを徹底活用。モバイルではヘッダーをスクロール方向で自動表示・非表示にし、画面を最大限に活用できるよう設計しています。
WebP全面採用による軽量化
サイト内のすべての画像をWebP形式に統一し、PNG比で大幅なファイルサイズ削減を実現。モバイル回線でも快適に閲覧できるよう最適化しています。