訓練3日目 学科 WEBディレクション概論①

本日のアジェンダ

1限目
学科 WEBディレクション概論①
ディレクションについて

2限目
学科 WEBディレクション概論①
Webとは

3限目
学科 WEBディレクション概論①
訓練概要について

4限目
学科 WEBディレクション概論①
ポートフォリオ企画を考えてみましょう

5限目
学科 WEBディレクション概論①
ポートフォリオ企画を考えてみましょう

本日のテーマ

企画は最初が大事!

本日のレポート

Webとは?

ディレクションとは

進行管理、方向性を決めていくこと。

ゴール(就職)に向かって目標設定をする。
自身のディレクションが出来ないと他人のディレクションは出来ない!

Webとは?

インターネット上のさまざまな情報(テキストや画像、動画など)を閲覧できるようにするシステム。
正式名称は「World Wide Web(ワールドワイドウェブ)」の略。
近年ではWebは俗に「インターネット」「サイト」とほぼ同じ意味で使われることも多い。

「Web・WEB・ウェブ」の解釈(考え方)は人によるところもある

Webに関連するキーワード「ネット(インターネット)」

インターネットとは、ネットワークとネットワークの繋がりのこと。
家や会社、学校などの単位ごとに作られた1つ1つのネットワークが、さらに外のネットワークともつながるようにした仕組みのこと。外のネットワークと接続するために、ルータと呼ばれる機器や、インターネットサービスプロバイダと呼ばれる通信事業者のサービスを利用する。

ネットワーク=複数のコンピュータを、ケーブルや無線を使って繋ぎ、お互い情報をやりとりできるようにした仕組み

ネットワーク上で、情報やサービスを他のコンピュータに提供するコンピュータをサーバ、サーバから提供された情報やサービスを利用するコンピュータをクライアントと呼ぶ。
私たちが普段使うパソコンや携帯電話、スマートフォンなどは、クライアントにあたる。

「パソコン(PC)・オペレーティングシステム(OS)」

パーソナルコンピュータ(Personal computer)の略語。
個人向けの大きさ・性能・価格を持ち、エンドユーザが直接操作できるように作られた汎用的なコンピュータである。

パソコンは「OS(オペレーティング・システム)」で分類される。

Windows(Microsoft社) ほとんどのメーカーのPCで使用可能
Mac OS(Apple社) Macに搭載 デザインや音楽関係では高いシェアを持つ
Chrome OS(Google社) Chromebookに搭載

「スマホ・タブレット」「ケータイ」

スマホのOSは2種類。
スマホ Android OS または iOS / キャリア ドコモ・ソフトバンク・au など
どのOS(スマホ)をどのキャリアで使うか?

現在発売されているタブレット端末は、搭載するOSによって分類される。

iOS(iPad、iPad mini、 iPad Pro)
Android OS(Nexus、dtab) 
Windows系 OS(Surface、ARROWS)
独自OS (Androidベース)Kindleシリーズ

それじゃあ、ケータイ(携帯電話)って?
・スマートフォン ※スマホはケータイの一形態である
・ガラケー

デバイスとは?
人々が日々使用しているスマートフォンやパソコン、タブレット、それらと繋いで使う装置の総称のこと。
その中でも、スマートフォンやパソコン等の単体でも動く機器を「情報端末デバイス」と言い、情報端末デバイスに繋ぐことで、機能を発揮するものを「周辺機器デバイス」と言う。

PC・スマホ・タブレットなど、とにかく様々なデバイスがあると認識する

「ブラウザ」

ブラウザとは、Webページを見るためのソフトのこと。

Microsoft Edge(マイクロソフト エッジ)
Safari(サファリ)
Google Chrome(グーグル クローム)※世界シェア8割
Mozilla Firefox(モジラ ファイアーフォックス)
Opera(オペラ)

HTMLやCSSという言語はこのブラウザに対応するタグと対応していないタグというのがあるため、
まずは様々なブラウザがあるという事をしっかりと理解しておきましょう。

「アプリ(アプリケーション)」

アプリケーションとは、具体的な作業をするためのソフトウェアのこと。
昨今ではスマホの登場をきっかけとして、アプリケーションをアプリと略す傾向が強いが、パソコンやインターネットの世界ではむしろソフトと略されてきた歴史がある。エクセルは表計算アプリではなく表計算ソフト、ワードは文書作成アプリではなく文書作成ソフトと呼ぶほうが一般的である。

ビジネス上では「アプリ」と略さず、「ソフト」と略して呼ぼう!

つまり、普段見ているWebサイトはブラウザという、アプリケーションを利用して閲覧しているということ

「サイト」

Webサイトとは、1冊の本のように、ひとまとまりに公開されているWebページ群。
また、そのWebページ群が置いてあるインターネット上での場所。

ホームページとは、一般的にはインターネット上のWebページ全般のことを指す場合が多いが、
ホームページの本来の意味とは、ブラウザを起動した直後に開くWebページのことである。

ただし、HP(ホームページ)という言葉が当たり前の言葉として世の中で使われているので、無理に否定せず相手と場所を選び使い分けていくと良い。

「検索(Google・Yahoo!・Bing)」

検索結果の検索順位を決めているのが検索エンジン(サーチエンジン・検索プログラム)。
世界中のウェブサイトの中から、関連性の高いサイト、キーワードが合致したサイト、人気があるサイトなど総合的に評価して1番目から表示されていく。

最近はAIの進化により従来のキーワードベースの検索から、ユーザーの意図を理解し、より適切な情報を提供するセマンティック検索へと進化している。これにより、ユーザーはより効率的に、必要な情報を得ることができるようになるが、この変化はSEO戦略にも影響を及ぼし、ウェブサイトは情報の質と量の両方で競争する必要がある。

「メール(電子メール)」

電子メールの送受信は、インターネット上の多くのメールサーバが連携することによって動作している。
Webサイトを使うためには、レンタルサーバを借りる事が一般的。その際に「メール」の機能も利用可能になる。

Webサーバにメールの機能があるという事は、例えばリニューアルでサーバ移転などを行う場合、
メールサーバも移転が必要ということになる。

Webサイト制作のお話を頂いたら、まずサーバを確認する!

「プログラム」

コンピュータに対する命令(処理)を記述したもの。プログラムとはコンピュータを動かす最も基本的な方法。
一般にプログラミング言語と呼ばれる「コンピュータのための言語」を使用してコンピュータを操作する。

そこで必要なのが、HTMLとCSS。

HTMLは検索エンジンの為の言語、CSSはデザイン(見た目)の為の言語
WebサイトはHTMLとCSSで出来ています。

改めてWeb(Webの学習)とは…

パソコンを使って、Webページで利用できる画像(写真やロゴ)の素材をIllustrator やPhotoshop等の
ソフト(アプリケーション)で作成し、また、HTMLとCSSというプログラム言語を覚えて、ネット(インターネット)上に、各デバイス(PC、スマホ、タブレット等々)で閲覧出来るようにし、さらに、全てのブラウザで正しく検索されるWebページの作り方を学
ぶこと。

デザインとは?

デザインと「商業」デザイン

デザイン(design)とは、日本語で「設計」や「意匠」を意味し、幅広い意味がある。

商業デザイン(コマーシャルデザイン)とは、
営業や販売促進など商業に関わるデザインを指し、商品やサービスが売れるようにすることを目的としている。
商業デザインには、インテリアデザイン(商業店舗の内装デザイン、ショーウィンドー・ディスプレイのデザインなど)、グラフィックデザイン、ウェブデザインなど、さまざまな種類があり、デザイナーは、市場のニーズを把握し、
商品やサービスの魅力を体感して「どうすればその魅力がユーザーに伝わるのか」を考える必要がある。

心理法則を使った効果的かつ説得力のあるデザインを作る!

アートとデザイン

アートは、アーティスト自身の内面の発露であり、自己表現が目的。個々の捉え方によって異なる解釈が可能。

一方デザインは、明確な目的や目標を設定したうえで課題解決のために用いられる。
クライアントやディレクターなどに与えられた課題を解決するために「制作物」を生み出す仕事。
ロジカルであり、全てのアウトプットに具体的な意味を持たせることが必須

アートとデザインは真逆である!頭の切り替えが必要!!

グラフィックツールについて

Illustrator(イラストレーター)
主にイラストやロゴを作成するソフト。
ピクトグラム・ロゴ・アクセスマップ・名刺などの制作に使用。

Photoshop(フォトショップ)
Photoshop(フォトショップ)は主に写真を加工したりするソフトです。
写真のレタッチや色調補正・トリミングに使用。

作りたいものが先行ではなく、あくまで扱うツールの特性を持って挑むものと考える

「配置」「文字」「配色」のデザイン要素について

なぜ「その配置にしたの?」「その文字を選んだの?」「その色にしたの?」というような説明を
発注者(クライアント)様への説明義務があるため、しっかりと目的と意味を考えたデザインを目指すこと。

デザインは言語化を出来るように意識しよう!

LP(ランディングページ)

LP(ランディングページ)とは、検索結果や広告などを経由して訪問者が最初にアクセスするページのこと。
就職のために興味を持ってもらえるLPを作成する。

求人票に書いてある「〇〇の出来る方」を出来ますという内容をページにする!
企業に応募するページは個別のページLPを!

生成AIの活用

生成AIの利用は、あくまで時短テクニックである。自身で作れる前提で、使用すること。

改めてデザイン(デザインの学習)とは…

デザイン(アート)を仕事の武器にするためには、Illustrator やPhotoshop等を利用して様々な作品を制作して、その中で、「配置」「文字」「配色」のデザインの基本を体験し言語化出来るよう理解していくこと。
また、Webデザインの基本であるバナーを作成し、HTMLとCSSを使い、LP(ランディングページ)を作成し、
生成AIも上手く活用し「時短テクニック」を身に着け、仕事で活用出来る商業デザインを身に着ける。

感想


わかっているようで使っている曖昧な言葉(用語)が多いことに気が付く‥
改めて説明できるように理解を深めていく必要があると感じた。


タイトルとURLをコピーしました