TechAcademy WEBデザインコース Lesson1で学んだこと

TechAcademy Webデザインコース Lesson1

はじめに

TechAcademyのWebデザインコースを受講することになったので、学習記録をノート替わりにこのブログにまとめていきたいと思います!

今回は、Lesson1の「Webデザインの概要」を受講。
具体的にどんなことをしたのか、難易度はどのくらいだったのか、ざっくり学んだことをまとめました。

Lesson1は、学習を通して、Webサイトの目的やWebデザインの必要性について理解し、Webデザイナーとして目指すゴールを明確にします。

Webデザインとは

見た目だけでなく、表示パフォーマンス、アクセシビリティ、ユーザビリティ、構造設計、情報設計までデザイン。
Webデザイナーの仕事は多岐にわたります。

Webデザインの目的=Webデザインのヒント
Webサイトの目的があって、それを達成するデザインをしていきます。

Webサイトの種類

コーポレートサイト

企業のブランドを知ってもらうためのサイト。会社情報や採用、製品、プレスリリースなど幅広く掲載。大規模なので、検索窓やサイトマップがすぐわかる位置にある。

メディアサイト

ニュースや特定の専門分野に関する記事が掲載されているサイト。

メディアサイトは目的によって以下のように分かれる。

オウンドメディア…自社への理解を促す目的

ペイドメディア…興味関心を引き、商品購入へ誘導したりして広告収益を生む

アーンドメディア…ユーザーからの評判や信頼を得て、共感を得る目的

ポータルサイト

検索サイトやさまざまな情報を集めたサイトで、Web利用の入り口となるようなサイト。

ショッピングサイト

商品を販売するサイトで、商品一覧ページ、詳細ページ、購入ページなどで構成。すべてを自社で完結させるとなると、セキュリティ面などでハードルが高い。

ポートフォリオサイト

個人や企業がこれまでの実績や作品などを掲載するサイト。どんな制作者なのか、どんなスキルがあり、何が得意なのかをわかるようにします。

Webアプリケーションサイト

Webブラウザ上で使用できる、動的なサイト。コミュニケーションツールやSNS、Amazonなどのショッピングサイトがこれに含まれます。

Webサイトの目的

Webサイトにはさまざまな目的があり、それらを達成できるようにサイトを設計するのがWebデザイナーの仕事です。

認知度UP、ブランドイメージ向上、プロモーション、商品販売、情報共有、顧客コミュニケーション、リクルーティング、見込み客の発掘など、サイトの目的を意識し、ユーザーが求めるものに応えられるようにする必要があります。

プロモーション

サイトの目的を達成するには、サイトの存在を知ってもらわなければなりません。
Webプロモーションにはいくつかの種類があります。

SEO(検索エンジン最適化)

検索エンジンで上位表示して、ユーザーの目に留まるようにします。特定のキーワードで上位を取るのは難しい場合もありますが、長期的な効果が見込めます。
Webプロモーションの基本とも言えます。

リスティング広告

検索結果ページに表示させるテキスト広告です。キーワードを購入して表示させます。
効果を分析する必要があり、細かな管理が必要です。

SEOとリスティング広告は合わせて「SEM(Search Engine Marketing)」と呼びます。

アフィリエイト広告

ブログやWebサイト、メルマガに貼られたリンクから、商品の購入や問い合わせが発生し、発生した分、広告掲載者に報酬を支払う方法です。
この広告掲載者はアフィリエイターと呼ばれます。

SNS広告

FacebookやTwitter、InstagramなどSNSに広告を掲載し、認知を図ります。
こちらも細かな管理が必要です。

他メディアへの広告

ポータルサイトなど他のメディアにバナー広告などを貼り、アクセスを誘導する方法。
費用対効果を期待できない場合もあります。

オフライン広告

テレビや新聞などオフラインメディアへの広告は、普段Webを見ない層にも認知してもらえます。
コストは割高になります。

コンバージョン

コンバージョンとは、Webサイトの成果のことです。商品の購入、問合せ、会員登録など、サイトの目的に合わせて、ゴールを設定します。

コンバージョン率…訪問者のうち、コンバージョンに至った件数の割合

クリック単価(CPC)…有料広告の1クリックあたりの単価

CPA(Cost Per Acquisition)…コンバージョン1件あたりのコスト

コンバージョンを理解することで、目的達成のために最適な施策を検討できます。

Webデザインの必要性

ユーザーがストレスを感じることなく使えるデザインが優れたデザインといえます。

商品画像の大きさや購入ボタンの押しやすさなど、コンバージョンに大きく直結します。

UX…ユーザーエクスペリエンス

ユーザビリティやUXについて参考サイト・書籍

UIデザインの指標・ユーザビリティとは – U-Site

UX MILK | クリエイターのためのUXメディア

多様なデバイスと多様な利用場面

現在はパソコン以外にもさまざまなデバイスが登場し、ユーザーの利用場面も多様になってきています。

インターネットの利用端末は、スマートフォンがもっとも多く、次いでパソコンが多くなっています。

また、野外で使うことの多い地図や天気予報などは、日の当たる明るい場所でも見やすい配色が求められます。このように、多様な利用環境を想定して、サイト作りをするのもWebデザイナーの仕事です。

(野外での使用まで想定してデザインするのは、今まで考えたことがなかったので、デザインは奥深いなと思いました!)

アクセシビリティ…アクセスできること、アクセスのしやすさ、利用しやすさ

アクセシビリティについての参考サイト・書籍

ウェブアクセシビリティ基盤委員会

Web Content Accessibility Guidelines (WCAG) 2.0 / 日本語訳

Webデザイナーに求められるもの

これからの時代のWebデザイナーは、サイトの見た目をキレイにしたり、バナーの作成をするだけではなく、企画やサイト設計、コーディングなど、総合的なスキルが求められます。

フリーでWebデザインを行うのなら、特に幅広いスキルを磨く必要があります。

Webデザインは、いろんなサイトを今回学んだような視点で見ていくと、たくさんの学びが得られます。
ギャラリーサイトなどを見ていくと効率的に学ぶことができます。

参考ギャラリーサイト

I/O 3000 | Webデザインギャラリー

Best Gallery Websites | Web Design Inspiration

まとめ

目安時間2時間の Lesson1 を時間通りにクリアしました。

ここで学んだことを頭に置きながら、色んなサイトを観察していくと、Webデザイナーとしてのスキルもついていくのかなと思いました。

ノートを一冊用意して、そこに他のサイトを見て学んだことを書きためていこうかなと思います。