2025/1/29 「学科 WEBディレクション概論①【オンライン】」の記録です。
講師:大浜 信彦先生
自分のディレクションをする!
自分のディレクションをできずに、他人のディレクションはできない!
ディレクション能力とは?
- プロジェクトの完遂やや制作物の完成に向けて、品質を適切に管理しながらゴールに導くこと。
ディレクションに必要なこと
- 納期や進捗管理:スケジュール管理能力や、調整能力
ポートフォリオ作成の基礎となるもの
①WEBとは?
ネット、パソコン、スマホ、ケータイ、etc
色々な人が色々な使い方をしてきたので、「WEBとは」に対する、厳密な解釈はない。
表記で言えば、「WEB」「Web」のほうが検索数が多いので、使うならアルファベット表記のほうがいいかも。
サーバーとは・・・
ネットワーク上で、情報やサービスを他のコンピュータに提供するコンピュータをサーバ、サーバから提供された情報やサービスを利用するコンピュータをクライアントと呼びます。
私たちが普段使うパソコンや携帯電話、スマートフォンなどは、クライアントにあたります。

OSの種類
・Windows
・Mac OS
・Linux
・Chrome OS(Chromebookに搭載された、Googleが開発したOS)
Chrome OSの主な特徴
- Androidスマートフォンで利用されているアプリが使用できる
- 一般的なパソコンよりも起動やセットアップが簡単
- 立ち上がりが早い
- ストレージをあまり利用しない
- データをクラウド上で管理できる
- セキュリティが強固でウイルス対策が不要
- 自動的に最新版OSへアップデートされる
ブラウザとは・・・Webページを見るためのソフト
※HTMLやCSSは、ブラウザに対応するタグと対応していないタグがある
ブラウザの種類 | 特徴 |
Internet Explorer | 2022年6月16日にサポート終了 |
Microsoft Edge | Windows10がインストールされているパソコンやタブレットに最初からインストールされている |
Google Chrome | ・Android端末に最初からインストールされている ・シェア8割 |
Safari | ・Apple社のパソコンやスマホのiPhone、タブレットのiPadに最初からインストールされている |
Mozilla Firefox | ・パソコンやスマホ、タブレット向けに無料で追加インストールできるよう提供されている ・技術開発系の人がよく使っている ・一部の人しか使わない |
Opera | パソコンやスマホ、タブレット向けに無料で追加インストールできるよう提供されている |
生成AIにより検索の常識が変わる?
AIの進化により、キーワードベースの検索から、ユーザーの意図を理解し、より適切な情報を提供するセマンティック検索(※)へと進化している。
(※ 検索文(自然言語)の意味を理解し、その意味に沿った検索結果を提供する技術)
しかし、この変化はSEO戦略にも影響を及ぼし、ウェブサイトは情報の質と量の両方で競争する必要がある。
【重要】Webサイト制作依頼が来たら、サーバの確認を一番にする!
Webサーバにメールの機能があるという事は、例えばリニューアルでサーバ移転などを行う場合、メールサーバも移転する訳です。ただサイトを作るだけ
ではなく、メールサーバの移転も作業に入ってしまう場合がある訳です。Webサイト制作のお話を頂いたら、まずサーバを確認してください。
HTMLとCSS
WebサイトはHTMLとCSSで出来ている。
・HTMLは検索エンジンの為の言語
・CSSはデザイン(見た目)の為の言語
②デザインとは?
デザイン、アート、配置、配色、etc
商業デザイン
商業デザインには、以下の3つがあります。
- インテリアデザイン(商業店舗の内装デザイン、ショーウィンドー・ディスプレイのデザインなど)
- グラフィックデザイン
- ウェブデザイン
デザイナーは、市場のニーズを把握し、商品やサービス
の魅力を体感して「どうすればその魅力がユーザーに伝わるのか」を考えます。
商業デザインでは、意思決定を誘導するものから人のためになるものまで、あらゆるデザインに心理学が意図的に使われ
ています。AI時代でも求められる人材になるためには、心理法則を使った効果的かつ説得力のあるデザインを作っていく
必要があります。
アート
アートとデザインは別モノ!
アート | ・外向き ・自己表現のために用いられる ・個々の捉え方によって異なる解釈 が可能 |
デザイン | ・内向き ・課題解決のために用いられる。 ・ロジカルであり、全てのアウトプットに具体的な意味を持たせることが必須 |
グラフィックツール
Illustrator(イラストレーター) | ・イラストやロゴを作成するソフト ・パスや塗と線といった言葉の意味や考え方を学ぶ |
Photoshop(フォトショップ) | ・写真を加工したりするソフト ・レタッチや色調補正・トリミングの方法などを学ぶ |
ピクトグラム・ロゴ
ピクトグラム:文字や言語に頼らず、絵や図で情報を伝える案内用図記号
「こういうのを作りたい」という固定概念があると辛いかも。
あくまでも、ツールとしてとらえる。
「配置」「文字」「配色」
商業デザインは、「なぜその配置にしたのか?」「なぜその文字を選んだのか?」「なぜその色にしたのか?」を説明できるように、目的と意味を考えたデザインを目指す。
LPを作成する
求人票に書いてある「〇〇の出来る方」を出来ますという内容をLPにして作成する!!!
生成AIは、時短テク
③ビジネスとは?
デザイナー、クリエイター、雇用、業務委託契約、etc
デザイナーとクリエイター
デザイナーとは?
- さまざまなビジュアルコンテンツを創造する
- クライアントの要望に応じてデザインを考案する
- 専門分野によって異なるスキルが求められる
- デザインソフトの操作、デザインの基礎知識、コミュニケーション能力などの共通スキルも非常に重要
クリエイターとは?
- さまざまな制作物を生み出す職業の総称
- 仕事領域はテレビ、ゲーム、広告、Webコンテンツなど多岐にわたる
- デザイナーやアーティスト、プログラマーなどが含まれる
- クリエイターは自分のアイデアや視点を表現し、他の人々と共有するプラットフォームを持ち、自己表現の機会を通じて、自分の考えや感情のアウトプットができる
自分の目標をディレクションする!
上記のことを通して、自分はいったいどうしたいのか?
【職業】
・WEBに関すること全般
・WEBデザイン、マーケ、ライティング
・できれば金融に関するWEBメディアに関わりたい
【雇用】
・パートか派遣社員
・絶対フルリモート
・フリーランスも兼業する
自己紹介ページを作ろう
作成中!!
感想
- サーバーやHTML、CSSなど、なんとなく理解しているようでしていなかったことを詳しく学べた。
- アートとデザインの違い
- こまめに先生が「頑張ろう!」と声をかけてくれるのが嬉しい。
- LPは、独学では作ったことがあったが、学びながら作ってみたかったので楽しみ。
疑問点
- イラレとフォトショの違いはわかったが、Figmaの特徴なども知りたいと思った。