DTPの今後の授業スケジュール

現在の作業

・ラフとサムネール雑誌の特集(1)構想を練る

・プランシートでデザインするものの全体像を把握しよう

　　------>>> 印刷しても耐えうる画像を作成する又は探す

　 ------>>>著作権について
　　------>>>配布されているフォント(書体)の使い方



DTPの今後の授業スケジュール

 DTP 第1回 ２学期 でも書いていた予定の日程に近づいてきました。
仕上げまでの段取りを確認してみましょう。

小テスト予告 技術力習得テスト

実践作業(9/18・9/25・9/28)

1 フローチャートを描く

2 メニューボタン部分を動くように設置してみる

　　　　　参考　動くメニューの種類あれこれ。

3テンプレートを決める→テンプレート内に2のメニューを組み込んでみる
　　　　　　　　　　　　　　　→具体的なやり方http://cid2015gd2.blogspot.jp/p/1_28.html

4 WEBサイトの仮組をして、見た目のデザインをバランス良く仕上げる

---

外部SNSをWEBサイト内に表示する方法

http://www.coprosystem.co.jp/tipsblog/2014/03/27.html

SNS系----Twitterの詳しい設置例
Facebook・Twitter・Google＋・Instagram

写真画像系
Pinterest・Flickr

動画系
Vine・Youtube・Vimeo
Dailymotion・Ustream・SlideShare

---

WEB用のフリー素材の探し方

[WEB用のフリー素材の探し方]
web free フリー素材　などで検索して、素材集配布のサイトを見つけ、
そのサイト内を検索する。
(検索エンジンの画像検索などでフリーではない画像を勝手に取って来て使わないこと)

WEBデザイン用フリー素材まとめのまとめ

　↑　※ダウンロードしたブラシやパターンのインストールの仕方

素材屋・HP素材のおすそわけ。
著作権フリーのweb素材屋

WEBデザイナーが作った超シンプル素材集 

フリー素材「blue-green」 - シンプルかわいいWEB用フリー素材 ...

---

メニュー画像を下揃えにする

(何も指定しないと左上ぞろえになるor真ん中でそろってしまう時の対処法)
http://2010yoko14145.web.fc2.com/menu1108.html

---

[jQuery サンプル]　自分のサイトでこんなのがやってみたい

メニューにサブカテゴリを表示する サンプル

　作り方↓

http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/

画像が何枚か切り替わるバナー　jQuery 　

「bxSlider」

サンプル

http://wp-and.me/bxslider/

画像がスクロール表示で数枚表示されるバナー　jQuery

「slider.js」

サンプル

http://kaelab.ranadesign.com/blog/2010/10/jquery.html

-----------------------------------------------------------------------------

[HTMLとCSS] 自分のサイトでこんなのがやってみたい

背景画像を２重に貼って、ボックスの中身を固定(動かさない)で表示したい。
http://2010yoko14145.web.fc2.com/16mail.html

横幅100%の画面いっぱいいっぱいのヘッダーを作成したい
http://2010yoko14145.web.fc2.com/18.html

全体のレイアウトを中央揃えにしたい
http://2010yoko14145.web.fc2.com/33.html

著作権について

著作権について

五輪エンブレム使用中止で幕引きへ。盗作問題でデザイナー佐野研二郎氏が在日認定＆誹謗中傷された件を真相究明http://blog.ks-product.com/tokyo-olympic2020-logo/

合字によるデザイン
https://www.google.co.jp/search?q=%E5%90%88%E5%AD%97&es_sm=91&tbm=isch&tbo=u&source=univ&sa=X&ved=0CDwQsARqFQoTCNfopaPT98cCFcRhpgod3Z4Kyw&biw=1512&bih=878#imgrc=_

設計思想が違うんだから盗作じゃない。前エンブレムの継承のコンセプト。
https://twitter.com/kokubucamera/status/626920964127768576

五輪エンブレムを盗作って言うのはアニメキャラの顔が見分けられないオカンと同じhttp://togetter.com/li/857186

オリジナルが正義で似ていることは悪か？

「似たものを見つけてパクリと騒ぐだけ」のどんなバカにでもできる簡単なお仕事http://azanaerunawano5to4.hatenablog.com/entry/2015/09/05/122041

【エンブレムに求められるもの　#とは】
http://togetter.com/li/868979

エンブレム／ロゴ／フォント
　　　ヤン・チヒョルト展のアレは「ロゴ」なのか？【五輪エンブレム問題】
　　  http://www.poc39.com/archives/4210

素材。シルエット。
http://francepresent.com/sanokenjiro-3/

オマージュ。パロディ。
http://francepresent.com/iwasakichihiro/
　　亀倉雄策『曲線と直線の宇宙』を読んで腰が抜けた話【五輪エンブレム騒動】
　　http://www.poc39.com/archives/4142
　　設計思想が違うんだから盗作じゃない。前エンブレムの継承のコンセプト。
　　https://twitter.com/kokubucamera/status/626920964127768576


Q.何故使用停止になったのか。
A.パクリではなく監督不行き届き。

コピーライト。
http://francepresent.com/olympic-6/
　　　佐野氏五輪エンブレム中止に学ぶ。みなさんもネットから無断で写真を借用しないように
　　http://kasakoblog.exblog.jp/23624137/

その他のよくある複雑な著作権問題。
二次創作
http://www.huffingtonpost.jp/2013/08/29/tpp_doujinmark_n_3834542.html
　　二次創作はグレーゾーンか？　「公式への問い合わせ」の是非
　　http://togetter.com/li/869021

「アンダーグラウンドで密かに行うもの」というグレーゾーンの大前提が
インターネットという新しいメディアの特性によって崩れてきている現代。
著作権の問題については正しい知識と細心の注意が必要。

------------------------------------------

○著作権／特許権

文化庁　http://www.bunka.go.jp/seisaku/chosakuken/

特許庁　https://www.jpo.go.jp/indexj.htm
http://ja.wikipedia.org/wiki/著作権

------------------------------------------

フォントの著作権

書体(フォント)にも著作権がある

フォントにも著作権があります。
学校のMacに入っているフォントデータは学校が購入しています。 

※inDesignで「パッケージ化」する際にはフォントデータがパッケージに入ります。
　フリーのフォントでない場合は二次配布になり、違反行為となります。

これを防ぐために二次配布禁止のフォントには
受け渡しが不可能なプロテクトがかけてあります。
プロテクトがかかっていると 
パッケージに入れることが出来ないようになっています。
その場合はフォントにアウトラインをかけることが必要になります。 

○フリーフォントとは？
(商用利用可能なフォント＝印刷物に使用可能なフォント)

※利用が可能な事をフリーと言っているだけで無料ではない場合も多々あります。

和文フォント大図鑑 http://www.akibatec.net/wabunfont/freefont/freefont.html

フリーフォント最前線 http://www.akibatec.net/freefont/

フリーフォントのCFONT http://cfont.jp/

アバウトフォント  フォント関連リンク集 http://www.aboutfont.com/

ダウンロードしたフォントデータが解凍できない場合は↓をダウンロードして下さい。

Mac OS10.6対応 Stuffit Expander
http://store.act2.com/smithmicrosoftware-stuffit-expander2011-mac-dl.html

ダウンロードしたフォントはどうしたら使えるの？

いまさら聞けない？Mac OS Xのフォントのインストール

使わないフォントをアンインストールする方法
(この時の注意：有料フォントをアンインストールしないこと。)
 

　HD >  システム > ライブラリ  > Fonts

  
にあるフォントのうち使わないものをFontsフォルダ以外の場所に移動する。

(同じパソコンを使用している人が使いたい時には戻せるように
分かりやすい場所に置いておきましょう。)

WEBサイトの仮組

WEBサイトの部品を作り、仮組をしてみましょう。

https://drive.google.com/file/d/0B6I9zVdEFoukVXpQbzR5RUt1VUU/view

テンプレートとはそもそも何か？

テンプレートとは？ WEB Dreamweaver

テンプレートとは？　←　クリックでwikipedia[webテンプレート]へジャンプ

Webテンプレート（ウェブテンプレート）は、ウェブデザインにおいてコンテンツと見た目を分離し、Webドキュメントを大量生産するためのツールである。Webテンプレートシステムの基本概念である。Webデザインテンプレート、ホームページテンプレートとも。Webテンプレートはどんなタイプのウェブサイトでも使える。簡単に言えば、Webテンプレートはウェブサイト設定時のテンプレートである。

------テンプレートの例を見てみましょう。------

無料配布されているテンプレートを紹介しているサイト

http://f-tpl.com/sample/tpl_078/

http://f-tpl.com/sample/tpl_079/

http://f-tpl.com/sample/tpl_071/

http://f-tpl.com/sample/tpl_067/

http://f-tpl.com/sample/tpl_043/

http://f-tpl.com/sample/tpl_003/

http://tempnate.com/tinyd5+index.htm#stylish

http://tempnate.com/tinyd5+index.htm#aqua

http://tempnate.com/tinyd5+index.htm#liquid

http://tempnate.com/tinyd5+index.htm#basic

http://tempnate.com/smartphone/

↑

このタイプのスマホ専用テンプレートを使う場合は、
[このコードを]userAgent.jsという名前で新規ファイルを作成して保存しindex.htmlと同じ場所へアップロードして
index.htmlのhead内に

<script type="text/javascript" src="userAgent.js"></script>

と一行入れる。と、見ている人のブラウザがPCかスマホかによって分岐自動転送されます。
参照：http://www.html5-memo.com/css3/pc_bunki/

<<<<<本日の作業>>>>>
自分のサイトのレイアウトを

どのパターンにするのか考えましょう

Aパターン：
上記のテンプレートのリンクから、自分のサイトの計画に合うものを使って作成を始める。

Bパターン：

自分のサイトの計画しているレイアウトが、上記のテンプレートのリンクにはない場合はDreamweaverから近いテンプレートを使って作成する

板書

動くメニューの種類あれこれ。

日本語説明のあるサイト

jQueryで動くナビゲーション 

【CSS3】マウスオーバーでモワっと動くナビゲーション

jquery css マウスの動きに合わせてナビゲーションの要素が ...

jQueryマウスで動くメニューバー | CSSPRO

CSS3のtransitionで作るスムーズに動く縦メニュー

メニュー的なもの

メニューになりそうなもの(ギャラリーにも使えるものを含む)

Image Rotator with Description
サイドのメニューをクリックすると画像が変わる&キャプション
Fancy Thumbnail Hover Effect
サムネイルをクリックすると大きな画像が切り替わる
slidedeck
マウスだけで全てを閲覧できるスライドメニュー
Content Slider Using jQuery UI / ベーシックな画像ナビゲーション
bxGallery / シンプルな画像ナビゲーション
Background Image Navigation / 背景がマウスオーバーでスライドするメニュー
IconDock / アイコンが滑らかに拡大していくドックメニュー
Horizontal Tooltips Menu / アイコンメニューにツールチップがスムーズに追従
Realistic Hover Effect / 影や反射のあるアイコンがふわっと浮くエフェクト
Rolling Rounded Menu / アイコンが回転しながら開くユニークなメニュー
Garage Door Style Menu / ガレージのドアのように開く画像メニュー
Animated Menus / ゆっくり切り替わるクールなメニュー
Outside the Box / アイコンが滑らかに拡大するドックメニュー
BubbleUp / ユニークなアニメーションで拡大するアイコン
AutoSprites / cssスプライトとjQueryをあわせたメニュー
jQuery Dashboard / ダッシュボードパネルに隠されたアイコンメニュー
Smooth Animated Menu / すとんとアイコン付きの画像が降りてくるメニュー
Elastic Thumbnail Menu / スムーズに拡大するサムネイルを使ったメニュー
megamenu / 画像がドロップダウンするメガメニュー
Spy Effect / 縦にどんどん下がっていくアイコン付き可変メニュー
quicksand / アニメーション付きでソートできるアイコンメニュー
Horizontal Accordion / 画像チラ見せアコーディオン


CSS3css3を使ってるプラグイン(メニューが動くタイプのcssを含む)

polaroid photo viewer with CSS3 / ポラロイドを動かせるcss3のギャラリー
CSS3 Lightbox Gallery / バラバラに散らばった写真をクリックするとLightboxで拡大
Cufonized Fly-out Menu / クールなアニメーションエフェクトのフライアウトメニュー
Slide Down Box Menu / マウスオーバーで画像が降り、テキストが上がるクールなメニュー
Pretty Simple Content Slider / キャプションとタイトルのスライドインが素敵なメニュー
ShineTime / マウスオーバー時のエフェクトがかっこいいギャラリー
css3 transition slide / キャプションがクロススライドするシンプルなスライド
Contextual Slideout Tips / クリックでコンテンツがアニメーションしながら広がる
Bubble Navigation / マウスオーバーでサークルが広がり、子メニューが出現
A Fresh Bottom Slide Out Menu / 遅れて出てくるアイコンがキュートなメニュー
Apple-Style Icon Slide Out Navigation / アイコンが降りて来て、裏に入っていくメニュー
Little Boxes Menu
　 バラバラになるアニメーションがユニークなボックスタイプのメニュー
Slide Out Navigation / アイコンの出方が可愛いスライドサイドメニュー
Interactive Picture / マウスオーバーでキャプションがスライド、クリックで画像が上がってくる
Thumbnails Navigation Gallery / サムネイルギャラリーを使ったメニュー
Sliding Panel Photo Wall Gallery / 画像を全体に表示、ギャラリー化
Photo Desk / クリックするたびに角度が変わるポラロイドタイプギャラリー
Beautiful Photo Stack Gallery / スライドギャラリーとLightboxをあわせたもの
Image Highlighting and Preview / 少し回りくどいLightbox
Kitchen Table / ギャラリーとLightboxをcss3も使って実装

プランシートでデザインするものの全体像を把握しよう

プランシートでデザインするものの全体像を把握しよう。 
完成したら提出。
データの場合＝cidgd2@gmail.comへ
紙にかいている場合=紙を提出。(※名前番号をかく事)

 記入例ーーー「猫の特集」
同じ猫の特集でも、「理由」「目的」「方法」「ターゲット」などをハッキリさせる事で冒頭文はもちろん、全体のデザイン(読者に発信するイメージの全体像)が変わって来る。

通常は文章を書くのはデザイナーの仕事ではないが、今回の課題は「企画＝デザイナー」
冒頭文を自ら書いてみる事で、全体像を把握し、自分のイメージをハッキリと具体化し、「読者に何を伝えたいか」をつかんでデザインに活かして行こう。

冒頭文例(1=赤文字)

ペットブームの今、今回の特集では猫をクローズアップ してご紹介します。
そのかわいさはもちろんの事、もっと詳しく猫の事を知るための情報を、
種類別に、特徴・ 病気・しつけの3項目に分けて分析！。 
どんな種類の猫を飼うか悩んでいるアナタ、猫を飼い始めてもっと知りたくなったアナタに、実は意外と知らない猫達の姿をチェック！！。

→デザインにどう活かすの？

生物学・獣医学的な目線のまとめなのでかわいさよりも説得力のあるイメージに。

専門家に向けてではないので、図を大きめに入れてわかりやすくデザイン。

「1種類につき3項目づつ」なので、種類の大きさや雰囲気がわかりやすいように

それぞれ犬の全身写真を使い、縮尺を犬の大きさに合わせ小さい犬は小さくする。

(顔だけの写真にしない・大きさの比較が視覚的にわかるデザインにする配慮)

 冒頭文例(1=青文字)

ペットブームの今だから、うちの子の魅力をもっと知りたい！！ 
そのかわいい姿を記録したい！周りの人にも見せたいっ！ でもカメラを向けると気ままな彼らは案外そっぽを向いてしまうもの。そんな時の虎の巻！、猫の特性を活かしてかわいい姿を記録する方法をまとめました！。 リラックスできる撮影環境や、怖がらずに気を引く方法など色々駆使して普段のかわいい姿の猫達をスクープしよう！！

→デザインにどう活かすの？

「かわいい＋写真にこだわる」 が伝わるように、ポラロイド写真・白枠付き写真・絹目写真など、少し変わった(こだわった写真手法だとわかる)要素を画像に使う。

かわいく撮る方法の紹介なので、「かわいく撮れている写真」をつかう。

(紙面上の写真を選ぶ基準を、犬種のわかりやすさやサイズよりも「かわいく撮れているか」に決める。)

実際にやっている様子の写真を入れてわかりやすくする。

飼い主と猫が楽しそうで、なおかつ、技術的にスマートな印象をデザインに取り入れる

(スタイリッシュな要素。)

↓ 参考(課題1〜4のプリントの元雑誌の特集扉と冒頭文)

主旨 (冒頭文の言いたい内容)
「イラストレーターは本来イラストを描く為に開発されたドローツールだけれど、
良いソフトなのでデザインの世界でも大変よく使われている。
デザインの世界で用いられる手法や機能をまとめた特集」

 演出(デザインにどう活かされているか？)
・ソフトの使い方の「ガイド案内」特集なので、
特集自体をバスツアーに見立てて、はとバスの創業当時のバスガイドの写真を使用
・冒頭文を「でございます」「出発進行〜」などのバスガイドが紹介しているような文体に演出。
・コーナーごとの見出しの上に東京の名所の写真を使用している。
(バスガイドの写真の下部に赤い文字ではとバスのまめ知識的紹介を入れて
はとバスのWEBサイトのURLも掲載している。)