デジタルデザイン演習: 06/07/20

2020年6月7日日曜日

第１課題について

あなたが、よいデザインだと思うウェブサイトを教えてください。サイトの特徴とよいと思うポイントを300字程度にまとめてください。

最低でも３サイト。それより多い分にはいくつでもかまいません。

提出は、以下のフォームより１サイトごとに送信してください。
［提出締切］ 6月23日正午（12:00）まで
https://forms.gle/eoDLDy1atwdcLBa96

２サイト目以降、連続して入力する場合は「別の回答を送信」から新たな回答の入力が可能になります。提出してもらった回答は提出締切終了後にこの授業を受講しているみなさんに共有します。

不明な点があれば下記のアドレス宛にメールで問い合わせるか、火曜日の午前に開設するGoogle Meetのミーティングにアクセスして質問をしてください。

h-takeoka［at］takecomai.jp
［at］を@に置き換えてください。

表示されないものもデザインする

ウェブサイトには一見表示されていないけれど、ページに埋め込まれているものがたくさんあります。必要に応じて細部までデザインを行います。

メタデータ

データに関するデータ（情報）です。ウェブページ（文書）におけるメタデータは、冒頭部分の<head>〜</head>内に記述します。ページのタイトルや概要テキスト（discription）についての記述は検索エンジンで検索結果表示などに反映されます。またfaviconと呼ばれるアイコンをつけておくことで、ブラウザでたくさんのタブを開いていても探しやすくなります。

OGP

メタデータの中でも近年重視されるようになってきたのが、OGP（Open Graph Protocolの略。TwitterやFacebookなどのSNSなどでウェブページの内容を伝えるための記述。

＜参考URL＞
OGPとは　Content Hub（コンテンツハブ） | ナイル株式会社

Exif（イグジフ）

Exchangeable image file format
（エクスチェンジャブル・イメージ・ファイル・フォーマット）

写真に関するメタデータを含む画像ファイルフォーマット。
画像のサイズ（解像度）や撮影日時、撮影機器に関する情報、撮影時の設定（シャッタースピード・F値・ISO感度など）が写真撮影とともに自動的に記録されています。また、最近は位置情報（GPS）機能のついたスマートフォンで撮影すると写真を撮影した場所まで特定できてしまいます。

＜参考URL＞
Macで追加アプリなしで写真の位置情報を削除する方法　kosukety blog
ソフトを使用せずにExifを消去する方法　All About　WindowsでのExif消去方法

コピペ注意！ウェブ世界の著作権

ウェブの世界にも著作権は存在します。

＜参考リンク＞
著作権とは？Web担当者、デザイナーが知るべき著作権　Webマーケティングメディア ferret

著作権で保護されるのは以下のような著作物です。

著作物　思想又は感情を創作的に表現したものであって、
文芸、学術、美術又は音楽の範囲に属するものをいう。

（著作権法第二条一項）

要するにウェブの世界で言えば …
ウェブページを構成する文章や写真、イラストやアイコンなどの画像または動画素材、プログラムなどには著作権が発生します。

逆にレイアウトや配色に著作権はありません。また、書体（タイプフェイス）には著作権はないとされていますがフォントには著作権が存在します（フォントの著作権はちょっと複雑です…）。ただし、ある企業のウェブサイトのレイアウトや配色をそっくりそのまま転用したり、意匠登録されているロゴタイプをマネたりした場合、不正競争防止法など他の法律等に抵触する恐れがあるので要注意。

＜参考リンク＞
著作物ではないけど著作物？！フォントの著作権　著作権のネタ帳

著作権フリーと書かれている画像素材なども数多存在しますが、中には商用ＮＧやクレジット表記が必要なものなどさまざまな条件付きのものも存在します。それぞれの著作権や利用に関する記述に注意して使用するようにしましょう。

Creative Commons

ウェブの世界ではクリエイティブコモンズ（CC）というライセンスを適用させていることがあります。CCは、ある一定のルールに基づく範囲であれば、著作物を自由に使えるライセンスです。

詳しくは、クリエイティブコモンズのウェブサイトで確認しましょう。

レスポンシブウェブデザイン

職場や自宅の書斎でコンピュータに向かってウェブブラウザを開くだけでなく、スマートフォンやタブレットを使っていつでもどこでもインターネットにアクセスできるようになった今、ウェブサイトのデザインもマルチデバイスへの対応が求められています。

その中で近年ウェブデザインの潮流として挙げられるのが"レスポンシブウェブデザイン"というキーワードです。

＜参考リンク＞
レスポンシブWebデザインとは？デジタルマーケティングブログ

スマートフォンやタブレット専用のページをそれぞれにつくるのではなく、１ソースマルチユースでデバイスに最適化して表示させるというもの。百聞は一見にしかず。
実際にレスポンシブ対応のウェブサイトを見てみましょう！

＜参考リンク＞
郵政博物館　｜　ABLENET® VPS｜レンタルサーバー

普段見ているウェブサイトもブラウザのサイズを変更したりスマートフォンで閲覧したりしてみましょう。

＜参考リンク＞
RWD JP 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
MUUUUU.ORG 縦長のwebデザインギャラリー・サイトリンク集（レスポンシブカテゴリ）

ウェブサイトは運用次第

ウェブサイトは大きく２つにわけられます。「静的なサイト」と「動的なサイト」です。この違いによってつくり方も大きく異なります。

＜参考リンク＞
ウェブデザインに必要な言語

静的サイト

主にhtml/css/Javascriptで構築されます。１ページごとにhtmlファイルを作成し、FTPアップローダーなどを利用して更新の度にサーバーにファイルをアップロードします。html/cssの基礎知識、またはDreamweaverなどのアプリケーションの知識や操作技術があれば更新は可能です。バックアップが容易でセキュリティ面も比較的強いですが、頻繁な更新や複数人での管理には向いていません。

動的サイト

クライアント（ウェブブラウザ）のリクエストに応じてphp/perl/rubyによりサーバサイドでhtmlが生成されます。データベースと連動してテンプレートに情報を流し込んで
ページを生成します。

CMS（コンテンツマネジメントシステム）

ウェブサイトを構成するコンテンツ（テキストや画像・動画など）を統合的かつ体系的に管理し、配信を行うシステムの総称。代表的なものとしてWordPressやMovableTypeがあります。それ以外のCMSについては以下の参考リンクが役に立ちます。

＜参考リンク＞
意外と知らない？サイトの更新が便利なCMSまとめ15選　株式会社LIG（リグ）

導入と運用を分離して考えることができるというのも利点。導入と定期的なメンテナンスだけをウェブ制作会社などに依頼、普段の更新や修正などの運用は自社で行うことも可能です。

導入についてもテンプレートを利用すればウェブに関する知識がなくてもある程度可能で、htmlやcssの知識があれば多少デザイン的なカスタマイズもできます。それに加えて
php/perl/rubyなどの知識があれば、細部にいたるまでカスタムすることが可能です。

オウンドメディア（Owned Media）

直訳すると、所有している（オウンド）メディアで広義には自社で持っているコーポレートサイトやメールマガジン、広報パンフレットなども含まれますが、近年、オンラインマーケティングの観点から、積極的に自社で運営・情報発信を行うブログのようなサイトを
指すことが一般的です。より多くのユーザーに接触する機会を増やし、SEOの対策としても有効と考えられています。

＜参考リンク＞
5分で理解！オウンドメディアとは？　コンテンツマーケ・SEOツール-MIERUCA（ミエルカ）

ウェブサイトの種別

ウェブサイトは、それぞれ目的に応じたさまざまな種類のサイトが存在します。新たなタイプのウェブサイトも日々出現し、さらに複合化が進み、分類が難しくなっていますが、代表的なものを紹介します。

＜参考リンク＞
ホームページの目的別の種類について　Grow Group
目的に合わせて選ぶべきWebサイトの種類について解説！　Web幹事

コーポレートサイト

企業サイト。会社概要や沿革、商品・サービスの紹介、ECサイトやコミュニティサイトへの導入となるケースも。大企業などでは投資家向けのIR情報（経営・財務状況）を掲載していることもよくあります。

＜参考リンク＞
佐川急便株式会社　｜　日清グループ　｜　たねやグループ

プロモーションサイト／ブランディングサイト

商品やサービスの認知度向上や、ブランドとしてのイメージアップ・差別化のためのウェブサイトです。施設や店舗の紹介、イベントの告知や案内のためのウェブサイトなども多くはここに分類できます。

＜参考リンク＞
TypeSquare [タイプスクウェア]　株式会社モリサワ
水曜日のネコ　株式会社ヤッホーブルーイング

ECサイト

ECとは、Electronic Commerce（エレクトロニックコマース＝電子商取引）の略。オンライン（ネット）ショッピングやネット通販と呼んでいるインターネット上の商取引を実現するウェブサイトのことを言います。近年さまざまな業種が参入し、あらゆる商品やサービスをECで手に入れることができるようになっています。

＜参考リンク＞
器・生活道具 The Good Luck Store
楽天市場　｜　Amazon　｜　ZOZOTOWN
BASE　ネットショップを無料で簡単に作成

ポートフォリオサイト

個人の作品や活動を紹介するウェブサイト。コーポレートサイトの個人版といったところ。

＜参考リンク＞
Masahiro Minami Design　生活デザイン学科南先生
上田バロン　イラストレーター
Portfolio Website Collections　株式会社LIG (リグ) まとめ記事

ポータルサイト

膨大な情報を扱うウェブ世界の玄関口となるウェブサイト。日本における主なポータルサイトにYahoo!やExcite、niftyなど。また、特定のジャンルなどの情報を網羅的に集めたウェブサイト（ハブサイト）をポータルサイトと呼ぶこともあります。

＜参考リンク＞
ハザードマップポータルサイト　国土交通省
電子国土ポータル　国土地理院
大津市オープンデータポータルサイト

ブログサイト／ウェブマガジン（ウェブメディア）

ブログとは、ウェブログ（web＋log）を省略した和製英語。個人やグループで日々更新される日記的なウェブサイトの総称でかつてはニュースサイトなどに自分の意見や批評を書き込む目的で多く使用されていました。このサイトもGoogle社の提供するBlogspotというレンタルブログサービスを使用しています。
ブログよりもさらにテーマ性が強く、それに基づく編集をされた新たなメディアとしてウェブマガジン（ウェブメディア）があります。書店などで販売される雑誌（紙）と連動して発行されているものも。

＜参考リンク＞

Wired

Webマガジン「AXIS」

美術手帖（アートポータルサイトと自称していたりもします）

＜参考リンク＞
無印良品　以上の要素をほとんど含む総合的なサイト

検索してますか？

ウェブデザインを上達させるために必要なもの、それは、「経験」と「仲間・ライバル」、そして「検索能力」です。ここでは「検索能力」（とりわけテクニカルな内容）について少しお話しします。

検索テクニック

今回はGoogleの検索について紹介します。
＜参考リンク＞検索演算子　Googleヘルプ

特定のサイトから検索
「site:」を使って特定のサイト内を検索します。
［site:go.jp 検索キーワード］

完全一致する語句またはフレーズを検索
検索キーワードを引用符で囲みます。
［"検索キーワード"］

特定の語句を除外する
除外したいキーワードの前に-（マイナス）を挿入します。
［-検索キーワード］

OR検索
複数のキーワードのうちいずれかを含むページを検索します。
［検索キーワードA OR 検索キーワードB］

さまざまな条件で検索結果をフィルタリングする
検索オプションを使って「言語」や「最終更新日」、また画像の場合には「サイズ」や「白黒画像」などさまざまな条件で検索結果を絞り込むことができます。
＜参考リンク＞検索オプション　Googleヘルプ

さまざまな検索サービス

一般的な検索エンジン以外にもさまざまな検索対象に
特化した検索サービスなどもあります。

論文検索サービス
CiNii Articles - 日本の論文をさがす - 国立情報学研究所

図書館の蔵書検索
カーリル | 日本最大の図書館蔵書検索サイト

特許情報検索
特許情報プラットフォーム J-PlatPat

挙げるとキリがないのでこの辺にします。

ウェブブラウザのあれこれ

先にも説明した通りウェブブラウザはウェブページを閲覧するためのソフトウェアです。

＜参考リンク＞
ウェブブラウザ一覧表　freesoft100
【最新版】機能と速さで選ぶならコレ！おすすめブラウザ11選を比較　webliker

先日みなさんに回答してもらったアンケートにも使用しているウェブブラウザを尋ねる設問がありましたが、結果は以下の通りでした。

Safariの利用率がかなり高いですね。iPhoneやMac端末にプリインストールされていることがその要因と思われますが、世界のブラウザシェアと比較すると実はそこに大きな隔たりがあります。

＜参考リンク＞
WebブラウザシェアランキングTOP10(日本国内・世界)　WRブログ

上述の比較サイトなども参考にしてもらうとよいと思いますが、これを機にいろいろなブラウザを試して、自分の使いやすいまた目的にあうブラウザをぜひ探してみてください。

ブラウザによる表示の違い

ウェブデザイナーを悩ませる１つの要因にブラウザによる表示の違いがあります。ウェブサイトを制作したり運用するときは、主要なブラウザ（また端末も同様に）でプレビューする必要があります。

ソースを表示／要素を検証してみる

多くのブラウザでは、ページ上での右クリックやメニューから「ソースを表示」や「要素を調査（検証）」というメニューが出てきます。今見えているサイトがどのようなソースで書かれているか確認することができたり、ウェブ開発者向けにさまざまな機能も搭載されています。

＜参考リンク＞
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方　サルワカ | サルでも分かる図解説明マガジン

ウェブデザインに必要な言語

ウェブページやウェブサービスをデザインをする時には、コンピュータが処理できるいくつもの言語を用います。近年では「コードを書かずにウェブサイトをつくれる」というサービスもたくさんありますが、いずれもビジュアル的な操作をさまざまプログラムによって自動的にコードに書き換えられています。

＜参考リンク＞
新人ウェブ担の第一関門、HTML、CSS、CMS、JavaScriptを理解　脱・新人Web担！あずさのWeb担当者日記

マークアップ言語

文章とともにその構造（タイトルや段落など）や見栄え（文字サイズなど）に関する指示を「タグ」と呼ばれる専用の文字列でテキストファイルに記述する言語。普段目にしているウェブページの多くはHTML（HyperText Markup Language）が使われています。

このページも本文の部分は以下のように構造化された文書が、ブラウザによって今見えているような形に表示されています。

マークアップ言語は、文章の論理構造に特化して記述します。見栄え（デザインやレイアウト）に関する指示はHTMLから分離してCSS（スタイルシート言語）で記述します。

＜参考リンク＞
まずはここから！HTMLの書き方【初心者向け】　TechAcademy

プログラミング言語

コンピュータに何らかの計算や処理（プログラム）を実行させるときに使用する言語。

今でも大学の情報の授業ではC言語やC++などを学ぶのでしょうか。このようなコンピュータを動かすための基盤的な言語もあれば、ウェブサイトのデザインやウェブアプリに関連して使用される代表的なプログラミング言語にはJavaScriptやPHP、Perl、Rubyなど、ひとくちにプログラミング言語といってもピンからキリまでいろいろあります。［Wikipedia：プログラミング言語一覧］。

URLとドメイン

URL

お店やおうち（ウェブサイトやウェブサービス）にアクセスするためには住所が必要になります。みなさん、一度は聞いたことがあるだろう「URL」はインターネット上の住所にあたります。

このウェブページの場合
http://www.ses.usp.ac.jp/nenpou/np13/np13mokuji.html
↑これをまとめてURLと言います（聞いたことありますね？）

一般的にURLは以下のような構成になっています。
プロトコル（通信方式）://ホスト.ドメイン（分野別／属性別・国別）/ディレクトリ/ファイル

つまり、このページのURLは以下のように分解できます。
http＝プロトコル（通信方式）
www=ホスト
ses.usp.ac.jp＝ドメイン（特にsesの部分をサブドメインと呼びます）
nenpou および np13＝ディレクトリ
np13mokuji.html＝ファイル

ドメイン

ドメインを見ればどんな組織か、どんな地域のサイトか判別できることもあります。また、ウェブサイトを立ち上げる際には多くの場合、独自にドメインを取得しますが、ドメインは住所の重要な要素なので、既に使用されているものは使うことができません。

＜参考リンク＞
お名前.com
サブドメインとルートドメインとは？　小悪魔女子大生のサーバエンジニア日記
ドメイン名の種類　JPNIC 日本インフォメーションネットワークセンター

ウェブページ？ウェブサイト？？

ウェブページ

ウェブにおける任意の１ページ。今見ているこのページもウェブページ。

ウェブサイト（ホームページ）

一連のウェブページのまとまり。「デジタルデザイン演習」の全体がウェブサイト。
またウェブサイトの最初のページを「トップページ」と呼びます。

ホームページは本来ウェブブラウザを起動した時に最初に開くページのこと。GoogleやYahoo!などの検索サイトのトップページをホームページとして登録することが一般的だったため、トップページをホームページと呼ぶ誤用が増え、その後ウェブサイト全体もホームページと呼ぶようになったと言われています。

ウェブサービス（ウェブアプリケーション）

情報提供を主たる目的とするウェブページやウェブサイトに対し、商品購入や予約などユーザーがクリックや入力を行うことでなんらかの目的を達成する機能を提供するのがウェブサービスです。

＜参考リンク＞
「ホームページ」「Webページ」「Webサイト」の違いは？　PC・IT・WEBの基礎知識｜はじめの一歩
WebサイトとWebサービスの違い　東京のWeb制作会社LIG

「ウェブ」ってなんだ？

ウェブとは

World Wide Web（WWW）の通称。インターネット上で文書などの情報を共有するシステム。文書や画像などのデータが保存されている「ウェブサーバ」とそれらを閲覧するパソコンやスマートフォンなどに搭載された「ウェブブラウザ」との間で情報がやりとり（通信）されます。

＜参考リンク＞
World Wide Web（Wikipedia）

ウェブサーバ

ウェブサーバとは、実世界に例えると「土地や建物」のようなもの。
ウェブサイトやウェブサービスという「お店やおうち」をつくるために必要なものです。ウェブサーバには大きくわけて以下の3種類があります。

専用サーバ

名前の通り、会社や個人専用のサーバです。いわば、どんな建物でも建てられる「さら地」のようなものです。なんでも建てられる反面、基礎工事から始めないといけません。（けっこうメンドクサイ＆専門的な知識や技術が必要）

VPS（Virtual Private Server：仮想専用サーバー）

１つのサーバに擬似専用サーバーを構築します。例えるならば分譲マンションやショッピングモールです。専用サーバ並みのカスタマイズ性はありますが、他のユーザーの影響を受ける可能性もあります。

レンタルサーバ

まさに「レンタル＝借り物」のサーバです。賃貸マンションやオフィスビルをイメージしてください。用途が限定されているなどカスタマイズ性は低いですが、扱いやすく、わりとすぐに使い始めることができます。

＜参考リンク＞

さくらインターネット

ウェブブラウザ

ウェブページを閲覧するためのソフトウェア。代表的なものにGoogle Chrome／Firefox／Safari／Internet Explorerなどがあります。ウェブブラウザについてはのちほどもう少し詳しく説明します。

＜参考リンク＞
webサーバとwebブラウザ　小悪魔女子大生のサーバエンジニア日記

はじめに

はじめまして、デジタルデザイン演習でウェブデザインを担当する竹岡寛文（Hirofumi Takeoka）です。

プロフィールページ
Facebook（Hirofumi Takeoka）

私の担当授業ではウェブデザイン（の入口）について勉強します。授業資料はこちらのブログサイトに掲載をしていきます。

第１回（6/9）
・授業資料の公開＋第１課題提示
・動画による解説（１）
・ミーティングルーム開設（質疑・相談なんでも）

動画／ミーティングルームについてはこちら
→ https://dd-usp.blogspot.com/p/blog-page_7.html

第２回（6/16）
・ミーティングルーム開設（質疑・相談なんでも）

第３回（6/23）　第１課題の提出締切

・授業資料の追加＋第２課題提示
・動画による解説（２）

・ミーティングルーム開設（質疑・相談なんでも）

第４回（6/30）
・ミーティングルーム開設（質疑・相談なんでも）

第５回（7/7）
・ミーティングルーム開設（質疑・相談なんでも）

第２課題提出締切（7月中旬予定）
・提出日は課題提示のタイミングでお知らせします

第６回（8月上旬？）
・集中講義（対面授業で１限分）

登録: 投稿 (Atom)