＜概要＞
⚫︎SNSについて
⚫︎WebサイトとSNSの使い方について
⚫︎課題作成
⚫︎SNSとは？
Social Networking Serviceの略。
Web上で社会的ネットワークを構築可能にするサービスである。
英語圏では”SNS”という頭字語は日常の文章や会話で用いられておらず、social mediaや単にsocialなどと呼ぶ。 _Wikipedia
【主なSNS】
・Twitter
・Instagram
・Facebook
・YouTube
・LINE
・TikTok
【WebデザイナーとSNSの関連性】
Webデザイナーの仕事内容を考えたとき、
「デザイン」をする。
「コーディング」をする。
「ディレクション」をする。
「日々の運用更新」をする。
「企画立案」をする。
等などの様々な業務があり、昨今では一言で「Webデザイナー」といっても「何が出来るひと？」と言われると難しい仕事の一つ。
その中で、業務としての需要が高いのがSNSに関する業務。
グラフィックツール（Photoshop・Illustrator）も必要であり、タグ（HTML・CSS）の基礎知識も必要になる。
★Webデザイナーが意識しておくべきこと
・埋め込みタグの仕組み
・SEO（検索エンジン対策）の効果について
・外部リンク使用時の運用の注意点
埋め込みタグの仕組み
・Iframe（インラインフレーム）について
Inline Frameの略称で「インラインフレーム」「アイフレーム」と呼ばれ
る、Webページ内に矩形の領域を設けてその領域内にsrc属性で指定したURL（リンク先ページの内容）を読み込んで表示するHTMLタグのこと。
・埋め込みタグとCSS
IframeはHTMLのタグのため、当然CSS等を使って様々なデザインの調整することができる。
逆に言えば、出来ることと出来ないことの両方がある事も理解しておく必要がある。
参考サイト：https://seolaboratory.jp/52748/
埋め込み例：https://samplesdl.me/training_html-css/sns.html
【実際に埋め込んでみる】
＜X＞
①HTMLファイルを用意する。
②下記URLに従って埋め込みコードを獲得する。
Xのタイムラインを埋め込む場合：https://help.x.com/ja/using-x/embed-x-feed
Xの投稿を埋め込む場合：https://help.x.com/ja/using-x/how-to-embed-a-post
③①に②を埋め込む
※タイムラインの埋め込みは現在有料になっており、課金しないままでは埋め込ず、「Tweets by otokogami_movie」のようなリンクが発行されるのみ。
＜Googleマップ＞
①HTMLファイルを用意する。
②埋め込みたい📍から「共有」→「地図を埋め込む」→「HTMLをコピー」
③取得したコードを①に貼り付ける。
＜Instagram※APIを利用する高度な方法を紹介＞
https://top-marketing.toridori.me/blog/052
結果↓
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<title>7月9日 埋め込み練習</title>
</head>
<body>
<a class="twitter-timeline" href="https://twitter.com/otokogami_movie?ref_src=twsrc%5Etfw">Tweets by otokogami_movie</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">＼\📢『<a href="https://twitter.com/hashtag/%E7%94%B7%E7%A5%9E?src=hash&ref_src=twsrc%5Etfw">#男神</a>』🚹本予告60秒解禁📢/／<br><br>꒷꒦꒷꒦<br><br>家族の悲劇を招く<br>禁断の儀式がはじまる<br><br> ꒷꒦꒷꒦<br><br>正体不明の穴、禁足地、<br>消えた息子、巫女の妻の秘密・・・<br>古代縄文ミステリーにして、<br>ファンタジーホラー、降臨！<a href="https://twitter.com/hashtag/%E9%81%A0%E8%97%A4%E9%9B%84%E5%BC%A5?src=hash&ref_src=twsrc%5Etfw">#遠藤雄弥</a> <a href="https://twitter.com/hashtag/%E5%BD%A9%E5%87%AA%E7%BF%94?src=hash&ref_src=twsrc%5Etfw">#彩凪翔</a> <a href="https://twitter.com/hashtag/%E5%B2%A9%E6%A9%8B%E7%8E%84%E6%A8%B9?src=hash&ref_src=twsrc%5Etfw">#岩橋玄樹</a> <a href="https://twitter.com/hashtag/%E9%A0%88%E7%94%B0%E4%BA%9C%E9%A6%99%E9%87%8C?src=hash&ref_src=twsrc%5Etfw">#須田亜香里</a><br>9.19 <a href="https://t.co/93IvXHcGpi">pic.twitter.com/93IvXHcGpi</a></p>— 映画『男神』🚹公式 (@otokogami_movie) <a href="https://twitter.com/otokogami_movie/status/1927862457860772230?ref_src=twsrc%5Etfw">May 28, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.336082173277!2d139.75279949999998!3d35.685175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0d02d8064d%3A0xd11a5f0b379e6db7!2z55qH5bGF!5e0!3m2!1sja!2sjp!4v1752030751015!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>
SEO（検索エンジン対策）の効果について
・検索の効果は無い
SNSで自分のコンテンツがシェアやリツイートされて共有されても、その共有リンクによる被リンクは無効となるため、SEOへの良い効果は見込めない。
FacebookやTwitterなどのソーシャルネットワーク上のリンクにはnofollow属性が付与されており、そのリンクによる直接的なSEO効果は見込めず検索順位に関与しないということ。
・プロモーションとしての活用
SNSを活用して、より多くのユーザーに作成したコンテンツ（ブログ記事）が共有され拡散されれば、ブログなどのWebサイトで参照されやすくなる。
そうなれば、参照リンクによる被リンク獲得が促進され、SNSによる間接的なSEO効果が期待できるようになる。
参考サイト：https://seolaboratory.jp/39614/
外部リンク使用時の運用の注意点
・外部コンテンツなので突然変わる可能性がある
外部コンテンツを利用しているということは、当然ながらそのコンテンツの都合によって突然サービスが終了したり、掲載方法が変わったり、無料だったのが有料に変更したりするため、クライアントへの報告はしっかりと行っておく。
・あまり依存しないようにするには？
サービスの内容をしっかりと理解して利用することは必須。
また代替えのサービスを把握しておくこと、技術的に解らないままにしておかないことを注意して、技術的にもコンテンツのサービス的にも理解を高めておくことが重要。
参考サイト：https://samplesdl.me/deau-e/sns001
＜就職に向けて＞
SNS業務もWebデザイナーの仕事。
求人検索で「SNSコンテンツの運用」とあればここまで学んだグラフィックツール（Photoshop・Illustrator）を使うチャンス。
また日々活用しているSNSの知識経験を実務スキルとして活かすことも
可能。
一つのスキルとして上手く就職活動の武器にすることも手。
・SNSに掲載する写真の加工業務やバナー作成
必要スキル：Photoshop・Illustrator
・Webページへの掲載（埋め込み）や運用更新
必要スキル：HTML・CSS
・日々の運用更新やプロモーション活動
必要スキル：普段使いの経験と体験によるスキル
※「Webサイト」「ブログ」「SNS」はWeb運用として重要なコンテンツの3つになる。
⚫︎よりSNSについて理解する
「SNSは時代の流れやテクノロジーの発展と共にある」
・SNSっていろいろあって全部覚えるのは大変…
→流行るものもあれば流行らないものもあるため、まずは流行っているものにアンテナを張っておけばOK。
・使ったことないSNSも仕事では覚えないとダメかな？
→プライベートとお仕事は別。
あくまでも仕事として興味を持って理解と知識を高めていくのが大切。
・そもそもSNSって今後どうなるの？
→逆に言えば流行ったのはたったのここ十数年の話。
これから十数年で衰退することも考えられるし、これから長い文化として継承されるかもしれない。
それは時代の変化とテクノロジーの変化と共にある。
生活の一部と考えて楽しく向き合っていくことで価値と未来を確認していくことが重要。
＜SNSの歴史＞
＜SNSの未来＞
①取り巻く現状の確認
◆社会全体のデジタルトランスフォーメーション
SNSの進化は、単なるコミュニケーションツールの変化に留まらず、社会全体のデジタルトランスフォーメーションを推進している。
政府機関や自治体もSNSを活用し、市民とのコミュニケーションを強化。
例えば、日本の経済産業省や厚生労働省は、X（旧Twitter）やLINEを通じて、重要な情報の発信を行っている。
◆教育現場でのSNSの活用
教育の現場でも、SNSの利用が進んでいる。
教育内容の共有や、リモート授業のサポートとしての活用が進む中、学生同士のコミュニケーションの場としてもSNSが役立っている。
◆SNSのリスクと対策
SNSの進化と普及は、多くの利点をもたらしているが、リスクも無視できない。
フェイクニュースの拡散やプライバシーの問題など、新しい問題も生じている。
◆グローバルなコミュニティの形成
SNSの普及により、国境を越えたコミュニケーションが日常的に行われるようになった。
FacebookやX（旧Twitter）は、世界中の人々をつなぐプラットフォームとなっている。
このような環境下で、新たなグローバルなコミュニティが形成されつつある。
②変わらないもの
「人を集める」→「宣伝ができる」→「売買が生まれる」
この仕組み自体は、どのようなSNSが普及しても、もちろんSNSが普及する前も、そしておそらく今後も変わらないと考えて良い。
「人を集める」
＝集客・多くの人が見るコンテンツ
例）TV、ラジオ、新聞、雑誌、チラシ、SNS、Webサイト、ブログ etc.
「宣伝ができる」
=どんな人々にどんな事を伝えるか
例）年齢は？性別は？曜日は？職業は？エリアは？時間は？ etc.
「売買が生まれる」
＝人が動くことでビジネスが生まれる
例）コンテンツ制作費用、デザイン費用、印刷費用、配達費用、デバイスの端末費用、配信費用、スポンサー費用、保守費用、管理費用
③これからの動向（予測）
★未来のSNSはAIとの統合により、よりパーソナライズされたエクスペリエンスが提供される。
例）拡張現実（AR）や仮想現実（VR）の技術を取り入れた新しいコミュニケーション形態が期待されている。
★AI（Artificial Intelligence）＝人工知能とは
2023年のNRI「AIの導入に関するアンケート調査」によると、AIについての認知率を性・年代別でみると、全体的に男性における認知率が高くなっているが、男性の年代別認知率に大きな差は見られない。
女性は、20代から50代にかけて、年齢が高いほど認知率が減少する傾向にあり、女性の60代では認知率が47.3％と、20代の49.6％に次いで高い結果となった。
同じく、AIのイメージや生成AIの職場における導入、検討状況についてでは、結果としてAIにはプラスとマイナスのイメージがあるということもわかっている。
一方で今後、生成AIが浸透し具体的に業務でAIを使うようになると、AIがより身近になってイメージが変わる可能性もある。
漠然と「AIで仕事がなくなる」と恐れるのではなく、AIの利用が有効な場合はそれを活用し、人間がやるべき仕事を見極めていくことが重要。
そんな中、総務省が公表している「令和元年版情報通信白書」によれば、日本の「AIアクティブ・プレイヤー」の割合は、中国、アメリカ、ドイツ、フランス、スイス、オーストリア、日本の7か国の中で最下位という結果が出ている。
★つまり、日本においては今はまだブルーオーシャン。
世界規模で見ると、かなり遅れをとっている状態。
かつ、SNSの普及に伴う一個人のグローバルコミュニティへの進出にも拍車がかかっている。
いずれにしても、私たちがこのタイミングでAIスキルを身につけることは当然にやるべきこととも言える。