独学・フリーランス・在宅・SNS疲れのWebデザイナーに
ビジネスの知識が加われば最強。自分の力で生きていけます。

レスポンシブサイトにした場合のファーストビューとメインビジュアルの見せ方(2019.07.20)

Webサイト レスポンシブ ファーストビュー

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

スクール恒例のWebデザインZOOMグループ勉強会で使った解析サービスの使い方と共に勉強会の一部を動画で紹介します。

勉強会テーマは「レスポンシブサイトにした場合のファーストビューとメインビジュアルの見せ方」についてでした。

勉強会動画 一部紹介

スクール会員になると、この収録動画をいつでも閲覧でき、質問・添削・サポートできます。

勉強会内容紹介

  • ファーストビューとは
  • ファーストビューの重要性
  • ファーストビューのサイズは何を基準に決めている?
  • デザイン制作サイズはどの順番で作っていく?
  • 効率よくPhotoshopでデザインする方法
  • Retinaディスプレイ対応のお話
  • コーディング HTMLの直接画像を配置した場合とCSSで背景画像として表示させる場合
  • これらのメリット・デメリット・解決策
  • Flexboxの使いどころ
  • HTML5の新要素 picture 要素が便利!
  • もしかして、画像がぼやけている?Webサイトのクオリティはここに出る!(要注意!)

・・などなど。

ファーストビューはサイトの目的により、いろんなパターンがありますし、時には高度なJavascriptやCSSの知識が必要となります。

私も設計の時点で時間をかけるところでもあり、試行錯誤する部分。

Webの技術の進化も早いので、新しい技術も意識しつつ調べながら制作しているところでもあります。

みなさんと一緒に基本的なところを確認しながら、理解が深まる時間になりました。

Webクリエイターズスクール 学長 フクモトトモコ

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

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

独学・Webスクールを卒業したのに仕事に繋げられない学習迷子さん、在宅・フリーランス希望の人を対象に「学んだ事を安定的な収入にする方法」をお伝えしてサポートしています。

関連記事

受講者の声

「動き出せない
あなたの背中を押します!」

組織に依存しない自由な働き方を
手に入れるためのオンラインスクール・オンラインサロンです。

スクール最新情報、フクモト学長の活動はメルマガで配信中~。