□FTPソフト設定情報
JMO
HCI (Human-Computer Interaction)
人とコンピュータの関わり合いや相互作用。人の心理的身体的特性、コンピュータ技術、社会環境などの関係を複合的に扱い、人がコンピュータをよりよく利用するためにはどのようなデザインが望ましいかを研究する分野。
大きな決断を下した際は必ず認知的不協和が起こる（早めに解消することが必要）
CMやポスター等広告は認知的不協和を解消するための有効な手段でもある。
グッドデザイン賞
UIの先行研究例
MR先行例
ローソンパケ
卒研
近代前のManufacture
時給換算制
価値：労働力
……機械に置き換えられる仕事
近代の労働
裁量労働制
価値：成果物
……労働のパラダイムシフト
→時間というくくりに縛られず行うという意識が必要
tip
https://book.asahi.com/article/13789588
https://digital-marketing.jp/marketing-general/factors-that-sold-in-2020-on-ec/
https://diamond-rm.net/technology/72669/
https://tabete.me/
テイスト
https://www.miyashita-park.tokyo
https://shibuya-qws.com
懐古
https://www.thinktheearth.net/think/2019/08/043terracycle/
選択肢
..
https://www.recruit-jinji.jp/?utm_source=listing-I&utm_medium=display&utm_campaign=22bgsp_recruit&utm_content=listing-I_22bgsp6&gclid=CjwKCAiAp4KCBhB6EiwAxRxbpHttXCcPfuRa2wpXZuFcjKTLt2wLHPERyU4ue8imc91TzSqiNW0w_xoClZMQAvD_BwE
https://notefolio.net
http://www.superprint.jp/t_column/typography/day06/index.asp
Webサイト上で完結する仮想空間.バーチャルリアリティ
文字
ランダム
https://shimafuku-low-flying.com/gacha_temptation/
参考サイト
https://petitringo.net/top/
ブランドデザイン演習
12/1〆
情報デザイン研究II
伊勢ルルルン
和色大辞典
スライダー参考
情報デザイン研究II
情報デザイン研究I
配色コード
背景(グレー) #f2f2f2
ポートフォリオサイト参考
https://umi.design
https://www.tamaki-home.co.jp
http://suehina.starfree.jp
https://y-hmd.com
https://www.marinatureczek.com
human interface guidelines日本語訳
UIのヒント
後期UI中心に研究
https://prottapp.com/ja/
情報デザイン研究I
style.cssのパーミッションを変更(777)
ワードプレスのcssを変更する場合は最直下に追加CSSをかく
現代思想 2020年3月臨時増刊号 総特集◎フェミニズムの現在
男らしさの終焉
情報デザイン研究I
https://www.cpi.ad.jp/column/column04/
情報デザイン研究I
管理画面(.)なし
管理画面
https://unbasement.wordpress.com/wp-admin/edit.php?post_type=page
https://corp.raksul.com
https://www.sendai-lit.jp
https://www.popupsociety.com
https://webst8.com/blog/wordpress-theme-howto-make/
https://www.fujisan.co.jp/cat1300/cat1207/
特別給付
natumonogatari
情報デザイン研究I
https://www.jstage.jst.go.jp/article/tits1996/3/4/3_4_27/_pdf
http://unbasement/wp-admin
情報デザイン研究I
好きなサイト列挙
https://agreen.tokyo
https://www.letters-inc.jp
https://book.asahi.com
https://droas.jp
https://125naroom.com/web/2958
https://www.tamaki-home.co.jp/
ビュー⇨ビューアーを複製
拡大率 100%
画質 フル画質
大きさ 全体表示
https://nishinokensetsukogyo.co.jp/
https://newstories.jp/
http://tribalmedia.co.jp/
１パターンだけ見せるのではなく、クライアント側にその場で様々なパターンを提示するほうがよい。
css等参考
ふわっと表示
http://tech-dig.jp/js-fuwatto-animation/
オープニングアニメーション
https://webnooboegaki.com/htmlandcss/opening-animation
FLOAT
http://waitanimate.wstone.io/#!/
ホバー
http://ianlunn.github.io/Hover/
テキストリンク
https://commte.net/5082
貂明朝
位置情報コピーし素材レイヤーの3Dをクリックしてペースト
文芸部サイト構想
Quicksand
https://fonts.google.com/specimen/Quicksand
Lora
https://fonts.google.com/specimen/Lora
話し言葉……相互に文脈が共有されている状況下で発される言葉。
書き言葉……無知識状態の相手に伝えるのが前提。Webの文章。相手の立場に立って書く。
http://animista.net/play/text/tracking-in/tracking-in-contract
https://umi.design/
http://www.itoen.co.jp/oiocha/#
なみなみ
https://www.webcreatorbox.com/tech/javascript-particles
はんなり明朝
https://googlefonts.github.io/japanese/#hannari
https://theparfaitstand.com/
https://pogg-sweetpotatopie.com/
https://bookma.torch.blue/
https://remede-douce.com/
https://infcurion.digital/
https://webdesign-trends.net/
他の文芸部
https://kyudai-bungeiclub.wixsite.com/kyudai-bungei
http://ybun.hotcom-web.com/wordpress/
http://wsbn.web.fc2.com/activitylog.html
相談要
必ず作業前にバックアップを取っておく
キャッシュまで更新する→「Shift」を押しながら更新
.textの書き込み権限を変更する
罫線
図形をそれぞれ主役にする
授業が始める前に提出vimeo (.mp4)
音楽追加して可
アートボードに整列→チェックを入れる
コンポ読み込み
http://localhost:8888/18asxxx/
echo (エコーバック)→ 抽出して吐き出す
. (ドット)→ 文字列をつなぐ
三角形を正しく回転させる方法
コマンドCコマンドFで逆さまの三角形を描きグループ化して中心に置く
スケール グラフエディター
ソロスイッチ→選択した素材だけ表示される
位置→次元に分割→xとyで分割して操作できる
書く道具(スマホ、原稿用紙、メモ帳……)によって表現は確実に変わる
□FTPソフト設定情報
A4にまとめて展示する
全ての動画ファイルに共通のエフェクトをつけたい場合
コンポジションレイヤーをコンポマークに追加
https://zxcvbnmnbvcxz.com/demonstration/slide_in_slide.html
コピペするときはauto:◯◯などの詳細事項だけ
各Jqueryを複数組み合わせず単体でサンプルを製作する
(例)asideの画像だけサイズ指定したい場合・・
1.aside imgなどとして特定して記述する
2.idをつける
デザイン案A・・落ち着いたデザインで厳かな雰囲気が感じられる案だった
デザイン案B・・あえて白い部分があって可愛らしさもあるデザインだった。
下の部分に薄く色が乗ってもいいのでは？(余白懸念)
改善点
協会の内部を連想する箇所
アーチ・・天井の部分のこと
・窓のところにもデザインを描いて欲しい(描ける範囲は窓枠三分の一)
可読性も意識する(すぐに太刀洗のバスだとわかるように)
レンガ感・・そんなになくても大丈夫。車輪周辺の積み方リアルにしてもらいたい
石段積みとレンガ積みで分かれているところも意識してほしい(石段との切り替え、アーチの形)
クライアントの要求をすべて吸収すること
自分のデザインが良いかどうか
・・縮小してみてごちゃごちゃしてたらうまくいってない
メモ
サイト制作に於いて
サイトイメージ参考https://book.asahi.com/
https://www.art-it.asia/top
参考https://takahshi.net/art/design/web-magazine
ワイヤーフレーム参考
キーワード
Jquery-Slider・・画像をフェード表示設定できるもの
Parallax ・・スクロールに従って画像も動く
知覚をはぐらかしてくるもの=現代アート
シンクロニシティ=集合的無意識とも関連あり
ユリゲラーの社会現象・「こっくりさん」……etc
本を選ぶことも無意識下にある
正しく知覚することは不可能。
ワイヤーフレーム作成したら見せる
ロゴを決める
横書きは左開き
芸術表現？
Contemporary Art Daily
manystuff.org
ワークフロー
https://www.kyusan-u.ac.jp/faculty/geijutsu/
レイヤー➡︎新規➡︎平面
平面レイヤーを不可視化した状態(レイヤー選択状態)でペンツールを用いマスクを書く➡︎そのあとに可視化する
マスクパスにキーフレームを打つ
マスクを動かす時位置を動かさないよう注意する
エフェクト➡︎ブラー＆シャープ➡︎ガウス
スタイライズ➡︎グロー
A&Bカラー・・自分が設定した２色で発光できる
function changeBGColor( colName ){
document.body.style.backgroundColor = colName;
}
太文字の関係大事
プロダクト？
iF WORLD DESIGN
YANKO DESIGN
コンポジション設定➡︎「adobe media encoderに追加」
コンポジションの設定と書き出しサイズを確認する(異なっていると引き延ばされる)
背景に色を使いたい場合
レイヤー➡︎新規➡︎平面
*//*…非表示
レスポンシブ
@mediaの中に、変更したい項目を追加する(メニューを変更したければ)
nav {
変更したい項目:◯◯;
}
といった形で、変更したい項目のみ入力する
1動かさない
2広角(ワイド)
3日の丸構図にならない
4マニュアルで撮影
5三脚
6ノーパラ・ノーズーム
□ドメイン情報
□FTPソフト設定情報
めも
https://www.esz.co.jp/blog/54.html
https://bijutsutecho.com/
https://www.japandesign.ne.jp/
After Effect
図形移動➡︎マスクした図形をダブルクリック
Padding 内側の余白
margin 外側の余白
After Effect
レイヤーを分けてaiファイルを読み込みたい場合は、フッテージ➡︎コンポジションに変更する
After Effect
画像が置ければいいというものではなく、どれだけ軽いかが重要
キャッシュを消し、ネットワークでデータの重量確認可能
反復によるゲシュタルト
メッセージ性→反復によって発生する
After Effect
適正解像度
75dpi(モニター)
200dpi(簡易印刷)
350dpi(書籍や雑誌等オフセット印刷)
Atomを日本語化する
Preference⇨Package⇨「Japanese」検索
自分の目に見えるものを疑う
普通は比較しないものを比較する
言葉の使い方が違うと世界が変わる(欧米人と日本人の「鼻」という概念についての認識の違い)
自分の作品の特徴を見つける
アイデア出しのコツ
てにをはを組み替える⇨誰もやってないこと
https://www.youtube.com/watch?v=ss0fcRnHk9g&list=PL-1rmRNoqp8rHDgvarfapyPJYaS0YJkoI&t=0s&index=2
レトロ×８ビットの音楽
Adobe Premire
書き出し⇨メディアh264
エフェクトコントロール⇨不透明度
クロップ スタビライザー
Photoshop
乗算……明度が明るい色を透明にする
スクリーン……明度が暗い色を透明にする
イメージ⇨色調補正⇨色の置き換え
許容量を上げると近い色が置き換えられる
階調の反転⇨白⇄黒
レイヤー下のアイコンを使用
選択範囲⇨選択範囲の反転
素材そのもの(今回はカメラ)を使ってうまく生かした時、良い作品ができる。
HD1080
1920/1080
フレームレートは３０くらいでOK
横で撮影
右クリック⇨速度・デュレーション(長さ)⇨逆再生
右クリック⇨リンク解除
Idea
ヤンシュヴァンクマイエル
Fads2にアクセス
学籍番号とパスワード
学籍番号でログインしている場合は必要なし
C911dn-01/02
A3まで印刷可能なレーザープリンター
通常使用
PX-H6000
通常使用不可
あらゆるソフトで共通
command +「N」 新規作成
command +「O] 開く
command +「S」 保存
command + shift +「S」 別名保存
command +「W」 閉じる
command +「Q」 終了
command +「A」 全選択
command +「X」 カット
command +「C」 コピー
command +「V」 ペースト
command +「Z」 戻る
command +shift +「Z」 やり直し
Illustrator
[Z] ズーム（虫眼鏡）
[V] 選択ツール
[A] ダイレクト選択ツール
[SPACE] 手のひら（移動）
command +「0」 全体表示
command +「D」 処理の繰り返し
command +「G」 グループ化
command +shift+「G」 グループ解除
command +「F」 前面にペースト
command +「B」 背面にペースト
command +「E」 前回使用した効果の適用
command +shift +「E」 前回使用した効果を実行
command +「J」 パスの結合
command +option +「J」 パスの平均化
command +「K」 環境設定
command + shift +「o」 文字のアウトライン
command +「Y」 モード切り替え
command +「0」 全体表示
command +「1」 100% 表示
command +「2」 ロック
command +option +「2」 ロックの解除
command +「3」 オブジェクトを隠す
command +option +「3」 オブジェクトを表示
command +「5」 オブジェクトのガイドライン化
command +「6」 前回選択の適用
command +「7」 マスク
command +option +「7」 マスクを解除
command +「8」 複合パス
command +option+「8」 複合パス解除
command +「9」 ガイドラインを隠す
command +option +「9」 ガイドラインの編集モード切替
command +「+」or「=」 表示倍率拡大
command +「-」 表示倍率縮小
command + shift +「[」 オブジェクトを背面へ移動
command + shift +「]」 オブジェクトを前面へ移動
Photoshop
ウィンドウ→ワークスペース→初期設定リセットで最適化
webサイト接続
FTP接続先：ftp.ip.kyusan-u.ac.jp（5F実習室/133.17.4.74）
使用プリンタ C911dn-01/02 C931-503-01
CSSセレクタ CSSプロパティ WebSample
XFREE
スターサーバー