diary

2023/12/14

riko

実技JavaScript（jQuery）実習

　

今日テーマ

jQueryの導入

jQueryを自分のサイトに導入して動きのあるサイトを作りましょう。

　

jQueryの利用方法（復習）

jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery （実装したいキーワード）」で検索します。
良く使うキーワードの例は、以下の通りです。

  • スライダー
  • カルーセル
  • ハンバーガーメニュー
  • ライトボックス
  • ドリルダウン
  • フェード
  • スクロール　など

2023/12/14

riko

学科JavaScript基礎

　

今日のテーマ

JavaScript（JQuery）について

jQueryについて

jQueryを利用する時の基本事項を理解しましょう。

　

jQueryの利用方法

jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery （実装したいキーワード）」で検索します。
良く使うキーワードの例は、以下の通りです。

  • スライダー
  • カルーセル
  • ハンバーガーメニュー
  • ライトボックス
  • ドリルダウン
  • フェード
  • スクロール　など

one point

見本となるサイトがたくさんあるのがWebページの良いところです。
「こんな動きのページ作れますか？」のような依頼はよくあります。
その見本のサイトを解析できれば実装が可能です。

2023/12/07

riko

学科レイアウトデザイン基礎④

　

今日のテーマ

デバイスとは？

　

ブラウザとは、インターネットを介してホームページ（WEBサイト）をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。WEBブラウザとも呼ばれChromeやSafari、InterExplorerなどが有名です

実機検証 について

スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つです。

one point

サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。

2023/12/06

riko

学科レイアウトデザイン基礎③

　

今日のテーマ

ブラウザ検証について

　

ブラウザとは？

ブラウザとは、インターネットを介してホームページ（Webサイト）をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。 Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。

　

one point

サイトが一通り形になったら特に使用する可能性の高いブラウザは必ず確認しましょう。

　

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

これからの時代マーケティング能力は必須！

デザイナーだけではなく様々なお仕事でマーケティング能力が高い、意識が高いというのはどんなビジネスにおいても求められる能力です。
就職活動は、努力や苦労した分だけ、一歩踏み出した分だけその後のお仕事と未来への自分へ帰ってくるでしょう。
やっぱり就職活動は大変です！！
ですがこれを乗り越えたら次の未来が待っています。
自分のペースで良いと思います。焦らず、少しでも前に進んでいきましょう。

2023/11/30

riko

実習WEBデザイン実習③

　

今日のテーマ

Dreamweaver

　

Dreamweaverについて

Adobe Dreamweaver（アドビドリームウィーバー）は、ひとことで言うとホームページ制作ソフトです。
編集機能やレイアウトの表示機能、ファイル管理機能など、制作や更新作業に必要な機能がひとまとめになっている、統合ソフトウェアとなります。
アドビシステムズのホームページでは、“Webデザインソフトウェア、HTMLエディター”となっています。“Webオーサリングツール”や“Webサイト作成ソフト”などとも呼ばれます。ホームページは基本的に「HTML＋画像」なので、頑張れば「メモ帳＋ペイント」でもなんとか作れます。しかし、作業効率などやミスの防止などを考えると、専用ソフトを利用した方が効果的です。

ワンポイント

Dreamweaverの歴史は長いです。いま世にいるデザイナーのほとんどの方がDreamweaverを過去に使った又は習った事のあるケースが多いです。ただし、昨今ではDreamweaverの需要は落ちています。
その理由は、様々ですがこれからの希望職に合わせて、習得してみてください。

講義のメモ

  • 必ずHTML５に設定
  • ウィンドウの中にプロパティがあるので利用する
  • 新規作成したら、必ず別名保存（index.html）

2023/11/29

riko

学科WEB動画基礎

今日のテーマ

WEBサイトでの動画の活用方法について

　

WEB動画について

Web動画とは、WebサイトやYouTubeチャンネルなど、オンラインでの視聴を想定した動画全般を指します。 「Webムービー」と呼ばれることもあり、目的はブランディングや商品・サービスのプロモーション、広告配信など多岐にわたります。

VIDEOとIFRAMEタグ

WEBサイトに動画を埋め込む方法は２つあります。
①iframeタグを使用する（youtubeなどの動画サイトから読み込む）
②videoタグを使用する（動画ファイルをアップロードして読み込む）

①IFRAMEタグを使用する（YOUTUBEなどの動画サイトから読み込む）

記述例

<iframe width=”410″ height=”200″ src=”https://www.youtube.com/embed/9No-FiEInLA” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen>

②VIDEOタグを使用する（動画ファイルをアップロードして読み込む）

記述例 <video src=”sample.mp4″></video>

　

本日のテーマ②

多様化する動画の世界、まずは普段から楽しんで使いましょう。

目的を相手に伝えやすい媒体である動画（ムービー）はやっぱり需要が高い。

動画の特徴
・「興味を引きつける」
・「多くの情報を伝えられる」
・「記憶に残る」

動画コンテンツの種類
1.「商品・サービス紹介」
2.「動画広告」
3.「採用コンテンツ」
4.「社内向けコンテンツ」

未来のキーワード
・メタバース
・動画マーケティング
・AI
・5G

2023/11/28

riko

学科　SNS運用基礎

　

今日のテーマ

SNSとは？

SNSとは、Social Networking Service（ソーシャル・ネットワーキング・サービス）の略で、インターネットを介して人間関係を構築できるスマホ・パソコン用のサービスの総称です。

　

one point

Webを利用するポイントとして、「Webサイト」「ブログ」「SNS」はWeb運用として重要なコンテンツの３つです。役割と特徴をしっかりと把握して、Webに関わるお仕事に関われるようにしましょう。

今日のテーマ②

SNSっていろいろあって全部覚えるのって大変？
流行るものもあれば流行らないものもあります。まずは流行っているものにアンテナを張っておきましょう。
使ったことないSNSも仕事では覚えないとダメかな？
プライベートとお仕事は別。あくまでも仕事として興味を持って理解と知識を高めてみましょう。
そもそもSNSって今後どうなるの？
逆に言えば流行ったのはたったのここ十数年のお話です。これから十数年で衰退することも考えられるし、これから長い文化として継承されるかもしれません。ただそれば時代の変化とテクノロジーの変化と共にあります。生活の一部と考えて楽しく向き合っていくことで価値と未来を確認していきましょう。

いま知っておくべきWebという世界・SNSやAIをまず普段からたくさん活用してみましょう！

ビジネスモデルは変わらない
「人を集める」⇒「宣伝が出来る」⇒「売買が生まれる」
という仕組みは長年変わらない
テクノロジーの変化と時代の変化にアンテナを張るそして、アイデンティティー、自己認識も変化していくことが大切かもしれません。

2023/11/23

riko

学科ユーザーインターフェイス基礎④

　

今日のテーマ

WEBサイトビジネスについて

　

「ユーザビリティー」と「アクセシビリティー」

　

ユーザビリティとは？

ユーザビリティは、一般的には「使いやすさ」を示す言葉だが、国際規格のISO 9241-11では、「ある製品を、特定の利用者が、特定の目的を達成しようとするにあたって、特定の状況で、いかに効果的に、効率的に、満足できるように使えるかの度合い」としている。

アクセシビリティ

アクセシビリティは、英語では“Accessibility”で、「近づきやすさ」、「利用のしやすさ」、「便利であること」などと訳されています。 一般的には、「利用者が機器・サービスを円滑に利用できること」という場合に使われています。

　

one point

Webコンテンツは様々は状況や条件、目的に合わせて利用されています。
その様々な要件定義に合わせた「デザイン」ができる人を目指し、成長に努めましょう。

　

2023/11/21

riko

実技 WEBデザイン実習②

　

今日のテーマ

コーディングの準備をしよう

制作のポイント

実務ではデザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。

WEB用画像とは？

Web用画像には、 主に「jpg」「gif」「png」「svg」が昨今のWebサイトで使われます。 その特徴と違いを確認しておきましょう。

高画像で大きいものを使用すると、WEBサイト上が重くなってしまうのでサイト自体が好まれなくなってしまう。なるべく軽くて小さいものを使用する。

制作のポイント

ファイル名の命名規則は管理しやすいようにしっかりと考えて付けましょう。

ワンポイント

「jpg」「gif」「png」「svg」について、まず悩んだら「jpg」透過表現を必要とすなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」複雑な画像は重たくなるので、条件次第で使う。と良い出よう。

　

　

講義のメモ

(1) GIFGIF（ジフ）

Graphics Interchange Format の略称で、拡張子は、gif が使用されます。256 色までの色が使用でき可逆圧縮型式の保存形式です。背景の透過やアニメーション画像を使用することができます。

(2) JPEGJPEG（ジェイペグ）

Joint Photographic Experts Group の略でJPEGという画像形式を作った組織そのものの名前からきています。拡張子は、jpg または jpeg です。JPEGは、フルカラー（1677 万色）を扱うことができ圧縮率を指定することができます。写真などに適していますが非可逆圧縮型式のため圧縮率の指定値によっては大幅な画像劣化が発生することがあります。
JPEG の画像比較は、高画質（画質優先）、中画質、低画質（ファイルサイズ最小）で実施しました。

(3) PNG-8PNG（ピング）

Portable Network Graphics の略称で、拡張子は、png が使用されます。ウェブで使われるために生まれた画像形式です。PNG-8 は、256 色までの色が使用でき GIF と同様の仕様です。

(4) PNG-24PNG（ピング）

Portable Network Graphics の略称で、拡張子は、png が使用されます。ウェブで使われるために生まれた画像形式です。PNG-24 は、フルカラー（1677 万色）の可逆圧縮型式を採用しているため色数が多くても画像の劣化はありません。背景の透過設定も使用することができます。単に PNG というと、こちらを保存形式を示します。

　

  • ・アニメーション・・・GIF
  • ・背景を透過・・・PNG-24 ,PNG-8 , GIF
  • ・色数が少ないイラスト画像・・・PNG-8 , GIF , PNG-24
  • ・色数が多いグラデーション画像・・・JPEG（画質優先）
  • ・写真・・・JPEG（適切な圧縮率）
  • ・画質を優先・・・PNG-24 　色数が多い場合は、ファイルサイズが大きくなるので注意が必要です。
  • ・ファイルサイズを優先・・・JPEG（サイズ優先）　画質劣化が発生しますので、必ず、元画像を保管しておいてください。