独学・フリーランス・在宅・SNS疲れのWebデザイナーさんへ、
ビジネス思考を磨いて「わたしの売りはコレ!」を作っていこう。

CSS復習 4回目 背景関連のプロパティを効果的に活用したWebデザインのポイントと背景画像制作のテクニック(2018.12)

CSS復習

こんにちは。フクモト学長(@WebcreatorsTips)です。未経験からフリーランス歴17年のWebデザイナーです。スクール運営 10年目になります。
詳しいプロフィールはこちら


今回のZoom勉強会は背景画像の基礎と使いどころです。

スマホでWebページを見る人が増えたことから、最近は1ページに情報が詰まった長ーいページ制作の案件が増えてきました。
シングルページとかランディングページともいいますね。

長いページをスクロールするのに

いかに興味を持って、飽きずに読んでもらえるか?

どうやって伝えたい情報と共にワクワク感を感じてもらえるか?

というところがポイントとなります。

そこで使いこなしたいのがCSSでの背景画像の扱い。

コンテンツの見せ方の工夫や背景画像制作のテクニック、制作サイズのポイントもバッチリやりました。

まず、初心者の方向けに、基礎部分を確認したあと、Webサイトのどの部分にどんなサイズ使えば効果的なデザインになるのか?そのポイントをお伝えしています。

サンプル動画(準備中)

参加者の声

  • 背景画像を配置することで表現の幅が広がるので、実用的だと思いました。
  • liタグの画像調整については、細かい部分まで教えていただけたので、今後に役立てられると思いました。
  • 楽天の商品ページを作ることがありますので、イメージ画像を取り入れた制作をやってみたいと思います。
  • とてもわかりやすく、後半のデザインは自分が知らないことばかりで有意義でした。
  • 今後、Photoshopをきわめて、かっこいいヘッダー画像を作成していきたいです。
  • 本当に衝撃なレッスンでした。
  • 早速委託先案件でノート開きつつバンバン使わせてもらってます!
  • Photoshopの使い方を拝見して、自分がなぜデザインに苦手意識があり、ワンパターンのデザインになりがちなのかがわかりました。
  • 使い方知るだけでもだいぶ変わる気がします。今までPhotoshopから逃げてたのでちゃんと向き合います。
  • 自分はかなり付け焼き刃でやってきたなぁと思ってはいたのですが、今までなんとなくでやっていたことがはっきりしました。
  • CSSの「なぜこうなるか?」「こうしたほうがいい理由」をしっかり説明してくださるのでスッと入ってきました。
  • あとは一番ハッとしたのは、ずっと感じてたphotoshopの苦手意識、、、、まず「知らないこと」が多すぎるんだなと改めて感じました。
  • backgroundプロパティの正しい指定の仕方、特にliに画像をつけるときのemでの細かい調整、目から鱗でした!
  • 背景画像の作り方の引き出し→ドットなどのパターンを一つ作り応用できること、画像を重ねる&Photoshopで作りながら調整するということ(今まで結構ガチガチに1枚絵で作っていました)、画像を作りながら&CSSでさらに調整できると表現の幅も広がるし早いし使い回しも効くと思いました。
    あとPhotoshopの画像の重ね方。正直初めて知ることばかりでした・・・
  • 全部仕事に活かせそうです。
  • 仕事的でCSSでのカスタマイズ、背景画像で変化をつけることが求められる案件があるので、もう早速今の案件から使います!!!
  • リアルタイムで先生の操作を見ながらというのもすごく勉強になるなと思いました。
  • こちらからの質問タイムなどもこまめに挟んでくださり参加しやすかったです。
Webクリエイターズスクール 学長 フクモトトモコ

【Webクリエイターズスクール】
学長 福本 智子

Webもデザインも未経験からいきなりフリーランス歴16年。
『仕事は自分で創りだす』をモットーに生きてきた50代。
WordPress・Webマーケティングが得意。

独学・Webスクールを卒業したのに仕事に繋げられない学習迷子さん、在宅・フリーランス希望の人を対象に「マーケティング理論に基づいた、じぶん事業計画」をお伝えしてサポートしています。

関連記事

じぶんの売り方に集中できる。おひとりさま専用Webデザインスクール
フリーランスwebデザイナー個別相談

受講者の声