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

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

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

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


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

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

勉強会動画 一部紹介

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

勉強会内容紹介

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

・・などなど。

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

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

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

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

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

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

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

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

関連記事

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

受講者の声