LogoMark.png

大村雅人/卒業研究Ⅱ の変更点


#author("2021-11-05T08:45:05+09:00","default:member","member")
#author("2021-12-03T15:51:56+09:00","default:member","member")
*Ghost
福岡市をGraffittiで塗りつぶしたギャラリーサイト

#image(大村雅人/卒業研究I/FV.jpg) 

-''Project Director''
-'''Keywords:Graffiti, Web, '''
-http://miyabi.om1002.coreserver.jp/
-[[ダウンロードファイル>https://drive.google.com/file/d/19jPJxBzWfuY31SWyr62ig35SifqN8n3K/view?usp=sharing]]

~


**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};//
-福岡市内の店の名前や看板などに落書きしたかのように見える加工した写真を掲載するギャラリーサイト
~
***Background and Purpose
//&color(red){プロジェクトの背景と目的};//
-世間のグラフィティへの評価が低い
-たくさんの人にグラフィティに対する新しい表現の仕方や新しい価値など多角的な視点でグラフィティの魅力を見出す方法をみつける。
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};//
-描いていくグラフィティはデジタルで公共的なサインやロゴを描き変えていく。
-グラフィティを見せる事によってグラフィティに対しての新たな発見や価値などを見つける事ができ理解を深めてもらうため
-インターネットを利用してグラフィティをアートと認知していない人に写真を見て貰うため、ギャラリーサイトを制作していく。
~

***Output
//&color(red){成果物の直接掲載またはリンク誘導};//
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};//
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};//
--[[撮影リスト>https://drive.google.com/file/d/1cPnv-ewnI3dtCec0I5Ji-sBrrN-4GzZe/view?usp=sharing]]
-加工済みの写真30枚程度
--[[合成写真一覧>https://drive.google.com/drive/folders/1-vuMApci1ZVkAjWMBgYum1Bd4pLMDOne?usp=sharing]]
--[[写真一覧>https://drive.google.com/drive/folders/14i9W0RWoxhwv2AqwRq4aafoOICVfYUza?usp=sharing]]
-webサイト
-http://miyabi.om1002.coreserver.jp/
--[[ロゴデザイン>https://drive.google.com/file/d/1eOwq5pIiE5wrW6sLLY6bdg-Im_h4wlKW/view?usp=sharing]]
--[[web_デザインカンプ(仮)>https://drive.google.com/drive/folders/1GTltDjMNK7f231LVdJFarp9RRVGArJZ9?usp=sharing]]
--[[web_サイトマップ>https://drive.google.com/file/d/1_VTZrCMedp17CcXJ29MjoNbI_l09ne7c/view?usp=sharing]]
~

***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};//
-Photoshop
-Illustrator
-Dreamweaver
-Procreate
-Filezilla
~

***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };//
-2021.05.07-2022.12.03
~

***Conclusion / Summary 
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};//
~
~


**Survey

***Present Status
//&color(red){現状調査、現状の問題の洗い出し};//
-[[コロナ禍で落書きが急増? なぜ落書きするのか、その心理が防止のヒントに>https://news.yahoo.co.jp/byline/komiyanobuo/20210712-00247531/]]
-[[平成 28 年度落書き消去活動アンケート報告>https://www.city.osaka.lg.jp/nishi/cmsfiles/contents/0000375/375729/10.10.pdf]]
-[[STOP 方法はあります!~落書きゼロのまちをめざして~>https://www.sk.tsukuba.ac.jp/~toshiw3/WWW/jisshu/jisshu1/report/2014/g5_seikatu/image/%E6%9C%80%E7%B5%82%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88.pdf]]
~

***Precedent
//&color(red){先行事例の紹介、傾向分析など};//
***参考サイト
-https://in-art.jp/
-https://io3000.com/category/colors/white/
-https://www.id-frontier.jp/
-https://pin.it/SfYPZwe
~
***カンプ参考サイト
-https://siiimple.com/
-https://io3000.com/
-https://mindsparklemag.com/website/favelagrafia/
-https://dribbble.com/shots/5342869-BeVideo/attachments/1158963
~

***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};//
-写真
--[[背景の撮影方法>https://ichi-up.net/2018/034]]
--[[【Photoshop】「レイヤー効果」だけで超簡単に文字や画像を背景になじませる方法>https://r-chapter.com/adobe-creative-cloud/photoshop-application/%E8%B6%85%E7%B0%A1%E5%8D%98%E3%81%AB%E6%96%87%E5%AD%97%E3%82%84%E7%94%BB%E5%83%8F%E3%82%92%E8%83%8C%E6%99%AF%E3%81%AB%E3%81%AA%E3%81%98%E3%81%BE%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95]]
--[[Photoshopで写真を壁に描いたように加工する方法>https://hashibaminone.com/2019/10/03/photoshop%E3%81%A7%E5%86%99%E7%9C%9F%E3%82%92%E5%A3%81%E3%81%AB%E6%8F%8F%E3%81%84%E3%81%9F%E3%82%88%E3%81%86%E3%81%AB%E5%8A%A0%E5%B7%A5%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/]]
~
-web_css
--[[【CSS】超簡単!スクロールしても背景画像が固定されたままにする方法【プログラミング】>https://onishi-noboru.com/css-how-to-fix-background-image]]
--[[【CSS】hover時に左から右に下線を引くアニメーションの作り方>https://yuyauver98.me/hover-underline-animation-left-to-right/]]
--[[ホバーした時にCSSだけで出来る様々な画像切り替え方法>https://hajimete.org/css-hover-image-change]]
--[[CSSで要素をふわっと表示させる方法を解説!>https://qumeru.com/magazine/155]]
~
-web_javascript
--[[【JavaScript・CSS】スクロールしたらフワッと要素を表示させるスクリプトの使い勝手を良くしてみる>http://noze.space/archives/415]]
--[[【jQuery】領域外のクリック時にメニューを閉じるようにする>https://qiita.com/yuikoito/items/ec672ca98015ed382d82]]
--[[【JQuery】遅延実行でイベントを発生させる方法>https://nyanblog2222.com/programming/javascript/1620/]]
--[[【JavaScript超入門講座】わずか50分で知識ゼロから基礎をマスター!>https://www.youtube.com/watch?v=QCjFPSO96RU&ab_channel=%E3%82%BB%E3%82%A4%E3%83%88%E5%85%88%E7%94%9F%E3%81%AEWeb%E3%83%BBIT%E5%A1%BE]]
~
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};//
-[[スケジュール>https://docs.google.com/spreadsheets/d/1vrNc_r14bvaQrqBhFsUfir_zuNFghWSgB9qZb7UWijw/edit?usp=sharing]]
-[[10月のスケジュール>https://docs.google.com/spreadsheets/d/1vrNc_r14bvaQrqBhFsUfir_zuNFghWSgB9qZb7UWijw/edit#gid=800369547]]
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};//
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};//
-素材撮影
-グラフィティ制作
%%企画立案%%
%%サイトマップ制作%%
%%ワイヤーフレーム制作%%
%%-デザイン制作%%
-コーディング
~
~
~

#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};//
#hr
~
~
**2021.12.03
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.26
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.19
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.12
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.05
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.10.30
***css
-[[デバイスの向きによってCSSを変更する方法>https://web.runland.co.jp/blog_cate2/post-3505]]
-[[CSSをデバイスの向きにあわせて変更する方法【メディアクエリ】>https://beginners-high.com/css-media-orientation/]]
~
~
**2021.10.29
***ダウンロードファイル
-[[web_link>https://drive.google.com/file/d/1-6UHzwjeqMC0jDtiYv5VkT0wLskci4kd/view?usp=sharing]]
**2021.10.26
***更新
***css/javascript
-[[CSSで実装するボタンのホバーエフェクトまとめ>https://tamatuf.net/html-css/css-hover-button/]]
-[[コピペ可能!ナビメニューやリンクの参考にしたいCSSホバーエフェクト集まとめ>https://photoshopvip.net/127960]]
-[[htmlやCSSで幅(width)を文字数など中身に合わせる方法>https://csshtml.work/width-text-size/]]
-[[もう誤魔化さない!CSS Transform完全入門(2D編)>https://ics.media/entry/210311/]]
-[[スクロールすると画像やタイトルがフェードイン表示されるCSS、javascriptのサンプルコード>https://kitajimatakahiro.com/scroll-fadein-code/#i]]
~
~
**2021.10.22
***更新
-[[合成写真一覧>https://drive.google.com/drive/folders/1-zU1JcYJggVyZeoA3nUgAukSqOJIvLPD?usp=sharing]]
-[[サイトデータファイル>https://drive.google.com/file/d/1ZegYMnDglC35zd9G-aCnSe_GI7MWTLrc/view?usp=sharing]]
~
~
**2021.10.15
***更新
-http://miyabi.om1002.coreserver.jp/
-[[合成写真一覧>https://drive.google.com/drive/folders/1-zU1JcYJggVyZeoA3nUgAukSqOJIvLPD?usp=sharing]]
-[[撮影写真一覧>https://drive.google.com/drive/folders/14i9W0RWoxhwv2AqwRq4aafoOICVfYUza?usp=sharing]]
**2021.10.08
***更新
-[[写真一覧>https://drive.google.com/drive/folders/14i9W0RWoxhwv2AqwRq4aafoOICVfYUza?usp=sharing]]
-[[撮影リスト候補>https://docs.google.com/spreadsheets/d/1vrNc_r14bvaQrqBhFsUfir_zuNFghWSgB9qZb7UWijw/edit#gid=28650130]]
~
~
**2021.10.04
***調査
***css/JavaScriptアニメーション
-[[画像をクリックしたら、拡大画像がポップアップで表示される方法>https://toretama.jp/click-big-image-floaty.html]]
-[[【CSS】hover時に左から右に下線を引くアニメーションの作り方>https://yuyauver98.me/hover-underline-animation-left-to-right/]]
~
~
**2021.10.01
***更新
-http://miyabi.om1002.coreserver.jp/
-[[撮影リスト候補>https://docs.google.com/spreadsheets/d/1vrNc_r14bvaQrqBhFsUfir_zuNFghWSgB9qZb7UWijw/edit#gid=28650130]]
~
~
***調査
***CSS
-[[WebフォントをCSSの@font-faceで表示する方法>https://shu-sait.com/webfont-css-font-face/#outline__1]]
-[[スマホ画面やレスポンシブにした際にできる白い余白・空間・ブレ・揺れをなくす方法>https://designerbrg.com/mobile_space_resolution/]]
~
***レスポンシブ
-[[【検証】スマートフォンで読み易いfont-sizeとは?>https://pecopla.net/web-column/fontsize]]
-[[CSS グリッドレイアウトでレスポンシブ対応>https://www.site-convert.com/archives/1112#outline__3]]
~
***撮影
-[[福岡市の 公共施設一覧>https://www.homemate-research.com/bc186/40130/list/3/]]
-[[写真撮影における著作権や権利関係>https://www.yakei-photo.jp/satsuei/chapter-08/contents-071.html]]
~
***グラフィティ制作イメージ画像
|#image(大村雅人/卒業研究Ⅱ/sample.jpg)|
~
**2021.09.24
***更新
http://miyabi.om1002.coreserver.jp/
***調査
***ツール
-[[出来た…Sublimetext3でブラウザプレビュー View in Browser>https://satohmsys.info/post-655/]]
~
***CSS
-[[CSSの疑似要素とは?beforeとafterの使い方まとめ>https://saruwakakun.com/html-css/basic/before-after]]
-[[もう迷わない!CSS Flexboxの使い方を徹底解説>https://webdesign-trends.net/entry/8148]]
-[[CSS Grid Layoutを利用して2次元レイアウトを自由自在に操作する>https://www.asobou.co.jp/blog/web/css-grid]]
-[[CSS Grid と CSS Flexboxの使い分け>https://www.comman.co.jp/10065/]]
-[[CSS Gridを使ったレスポンシブ対応の基本レイアウト>https://www.webcreatorbox.com/tech/css-grid-basic-layout]]
-[[【CSS】auto-fit・auto-fillの使い方、トラックの幅の指定を繰り返す!>https://shu-naka-blog.com/css/auto-fit-fill/]]
-[[【保存版】コピペでOK!Flexboxで作る頻出レイアウトの構造解説>https://b-risk.jp/blog/2021/01/flexbox/]]
-[[[css] レスポンシブの時にdiv要素の順番を入れ替える方法>https://snownotes.org/flex-order/#order]]
~
***メディアクエリ
-[[メディアクエリの罠!?cssが効かなくなるブラウザサイズを解決!>https://j-online.ne.jp/blog/web%E5%88%B6%E4%BD%9C/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%AF%E3%82%A8%E3%83%AA%E3%81%AE%E7%BD%A0%EF%BC%81%EF%BC%9Fcss%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%8F%E3%81%AA%E3%82%8B%E3%83%96%E3%83%A9%E3%82%A6]]
~
***Javascript/jquery
-[[スマホorPCのみでjquery/javascriptを実行する>https://www.radia.jp/archives/219]]
~
~
**2021.08.25~09.18
***サイト更新
-http://miyabi.om1002.coreserver.jp/
~
***調査
***webデザイン便利ツール
-[[【2021年】Web制作に使えるchrome拡張機能おすすめ19選>https://crestadesign.org/chrome-extension/#chrome]]
-[[感覚で色を選べるカラーピッカー>https://enes.in/sorted-colors/]]
~
***メディアクエリ
-[[メディアクエリとは>https://beginners-hp.com/create_smartphone_media_queries.html]]
-[[レスポンシブデザインの作り方!簡単にスマホ対応する方法について>https://seolaboratory.jp/89410/]]
~
***HTML
-[[【HTML】親要素と子要素とは!?祖先要素・子孫要素との違いは何?>https://programmingnote.jp/archives/570]]
~
***CSS
-[[レスポンシブが効かない・優先されない【CSS優先順位】>https://fujikoblog0309.com/responsive-css]]
-[[CSSが効かない・反映されないときの対処法まとめ>https://saruwakakun.com/html-css/wordpress/cant#section3]]
-[[【CSS】初心者必見!CSSで要素を中央揃えにする簡単な方法!【追記有り】>http://www.terasol.co.jp/web/4028]]
-[[CSSでボックスを中央に配置するやり方を覚える>https://shu-sait.com/css-cyuuou-haichi/]]
-[[【CSS】displayの使い方を総まとめ!inlineやblockの違いは?>https://saruwakakun.com/html-css/basic/display#section1]]
~
**2021.08.24
***調査
***css
-[[margin:0 autoを解説。効かないときの修正方法・代替案>https://csshtml.work/margin-bad/]]
-[[Flexboxより簡単に複雑なレイアウトが組める「Grid」>https://www.ejworks.com/solution/detail.html?article_id=38]]
-[[中央に配置する>https://www.w3.org/Style/Examples/007/center.ja.html]]
-[[justify-content>https://developer.mozilla.org/ja/docs/Web/CSS/justify-content]]
~
**2021.08.21
***調査
***viewport
-[[【初心者向け】 vh と vw の特徴と % との違いについて>https://ueharamiu.com/2021/03/11/vh-vw-commentary/]]
-[[【CSS】vw、vh、vmin、vmaxとは?基本的な使い方>https://jajaaan.co.jp/web-production/frontend/css-vw-vh-vmin-vmax/]]
~
***cssボタン
-[[CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説!>https://jajaaan.co.jp/css/button/]]
-[[alt属性とは?>https://digitalidentity.co.jp/blog/seo/lecture-alt-attribution.html]]
-[[CSS入門:img画像のスタイルを整える方法>https://proengineer.internous.co.jp/content/columnfeature/3988]]
~
**2021.08.18
***調査
***レスポンシブデザイン
-[[【2021年1月】スマホ用Webデザインはこのアートボードサイズで作ろう!>http://design.kyusan-u.ac.jp/socialdesign/?cmd=edit&page=%E5%A4%A7%E6%9D%91%E9%9B%85%E4%BA%BA/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6I]]
-[[レスポンシブデザインの参考事例探しに最適なサイトを総まとめ!【2021年版】>https://web-kanji.com/posts/responsive-design-case]]
-[[レスポンシブ対応のフォントサイズを指定>https://coliss.com/articles/build-websites/operation/css/font-size-used-responsive-scales.html]]
-[[スマホデザインのフォントサイズの基準は?目安となる国内サイトを大調査!>https://www.m-hand.co.jp/design/6994/]]
~
***メディアクエリ
-[[CSSのメディアクエリ(@media)クエリについて解説!>https://zeroichi.app/media/programming-2/css/2425/#i]]
~
***ウィンドウサイズに合わせる
-[[フォントサイズを可変にしてみよう!css関数clampの便利なお話>https://techblog.raccoon.ne.jp/archives/1617239525.html]]
-[[CSSで背景画像をウィンドウサイズに合わせて表示したい>https://zakkiweb.net/a/42/]]
~
***[[Swiper>https://swiperjs.com/]]
-[[少しずつ画像が変化する、スライダーの作り方解説!>https://youtu.be/utga2L8E9pU]]
~
~
**2021.08.16
***調査
***[[Swiper>https://swiperjs.com/]]
-フルスクリーンでスライドショーを入れる方法
--[[初心者向け!スライダー実装!JavaScriptの有名なスライダーライブラリ「Swiper(スワイパー)」を使って、簡単にスライダーアニメーションを実装してみましょう!>https://youtu.be/Du816rEE1Cg]]
--[[Swiperでスライドさせる画像サイズカスタマイズ!上手い具合にスライダー上に画像を表示させるには?>https://youtu.be/p17v5EZFPkc]]
--[[スライダーの上に文字を固定で表示させる方法!Swiperで各スライダーの上と、スライダー全体の上に固定でコンテンツを置いておく方法を紹介します!>https://youtu.be/C_aNpX6A8fM]]
--[[スライダーのページネーションやナビゲーション(左右の矢印)をカスタマイズしておしゃれにする方法!Swiper(スワイパー)を使いこなしましょう!>https://youtu.be/TitZ5O-m4TA]]
~
***リセットCSS
-[[【コピペで出来る】おすすめのリセットCSSと使い方を解説!>https://qumeru.com/magazine/70]]
~
***HTMLでjavaを読み込む
-[[今すぐ覚えられる!HTMLでJavaScriptを読み込む(呼び出す)方法を現役エンジニアが解説【初心者向け】>https://techacademy.jp/magazine/9650]]
~
~
**2021.07.24
***調査
-[[今更聞けない!エンジニアのための CSS の基礎講座 〜ボックスモデル編〜>https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/]]
~
**2021.07.16
***調査
***コーディング
-[[Web制作におけるCSSで単位や値を使った設定まとめ>https://designsupply-web.com/media/suplog/1464/]]
~
***撮影
-[[【初心者向け】風景写真をキレイに撮影する7つのコツ!>https://www.cameranonaniwa.co.jp/blogs/2220548842/]]
-[[初心者向けにカメラ設定の基本を完全ガイド!>https://www.rentio.jp/matome/2019/01/camera-setting-relations/]]
-[[Lesson8:ISO感度をマスターしよう>https://www.nikon-image.com/enjoy/phototech/cameralesson/lesson08.html]]
-[[Lesson21:最適な「絞り」の見つけかた>https://www.nikon-image.com/enjoy/phototech/lenslesson/lesson21.html]]
-[[デジタル一眼カメラ α(アルファ)で写真撮影を楽しむ>https://www.sony.jp/support/ichigan/enjoy/photo/word13.html]]
-[[ピントがうまく合わない(α:アルファ:Eマウント)>https://knowledge.support.sony.jp/electronics/support/articles/S1110278037112]]
~
**2021.07.07
***制作
***コーディング
-[[web_コーディング>https://drive.google.com/drive/folders/1lp2W2tIZW20BTR_7PJ-aj26nXBChgW_Z?usp=sharing]]
~
***調査
***html/css
-[[CSSでtext-alignを使って文字を配置する方法【初心者向け】>https://techacademy.jp/magazine/6369]]
-[[positionプロパティを身に着けよう!基本的な知識と使い方を解説!>https://www.asobou.co.jp/blog/web/css-position#position-2]]
-[[positionプロパティを身に着けよう!基本的な知識と使い方を解説!(基礎編)>https://www.asobou.co.jp/blog/web/css-position#position-2]]
-[[[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック>https://coliss.com/articles/build-websites/operation/css/css-responsive-full-background-image-by-sixrevisions.html]]
-[[【入門】レスポンシブWebデザインとは?概要と作り方を丁寧解説>https://www.kagoya.jp/howto/webhomepage/responsive/]]
-[[CSS - @media>https://www.tohoho-web.com/css/rule/media.htm]]
-[[CSS|背景画像の上に背景色を重ねる方法>https://cotodama.co/css_bg-img-color/]]
-[[お勧めなCSSスライド式サイドバー9選>https://www.seleqt.net/programming/slide-out-sidebars/]]
-[[【コーディング例あり】模写コーディングのやり方【手順を解説】>https://code-step.com/coding-step/]]
-[[jQueryを使わずにスライドメニューを実装しよう>https://www.webcreatorbox.com/tech/slide-menu]]
-[[CSSだけでサイドバーを固定・スクロール追従する方法(JavaScript不要)>https://tech-dig.jp/css%E3%81%A0%E3%81%91%E3%81%A7%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%82%92%E5%9B%BA%E5%AE%9A%E3%83%BB%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%AB%E8%BF%BD%E5%BE%93%E3%81%99/]]
-[[【jQuery】ドロワーメニュー 横からスライド表示するメニュー>https://tivel.jp/archives/11037]]
**2021.07.06
***調査
***html/css
-[[そもそも親要素・子要素ってなんだ ~トランスペアレントがわからない~>https://qiita.com/NoxGit/items/0fe9cbbf72db3e6b2eea]]
-[[スタイルシート(CSS)の基本的な書き方【初心者向け】>https://techacademy.jp/magazine/4872#sec2]]
-[[誰でも簡単にできる!HTMLで文字の色を指定する方法【初心者向け】>https://techacademy.jp/magazine/9799]]
-[[【次のページへ移動するには?】HTMLのリンクがよくわかる解説>https://aqcg.jp/html_next-page/]]
-[[ 【2021年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例>https://willcloud.jp/knowhow/font-family/#font-family]]
-[[1本だけ線を引くCSS>https://www.nishishi.com/css/line-border-hr.html]]
-[[font-size …… フォントのサイズを指定する>http://www.htmq.com/style/font-size.shtml]]
-[[【CSS】borderの長さを調整する方法3つ:文字に応じて可変など>https://saruwakakun.com/html-css/reference/border-length]]
-[[表示位置を変えたい!CSSでpositionの使い方【初心者向け】>https://techacademy.jp/magazine/8539]]
~
**2021.07.02
***制作
***コーディング
-[[web_コーディング>https://drive.google.com/drive/folders/1x9RCq8tDj0lyLHV9ZtNveIe90IRuHymv?usp=sharing]]
~
***調査
***html/css
-[[シングルページの作り方は?メリットとテンプレートを紹介>https://www.jimdo.com/jp/2020/08/11/%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E3%81%AF-%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%81%A8%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E7%B4%B9%E4%BB%8B/]]
-[[【永久保存版】デザイン初心者でも美しいサイトが作れる!無料で使えるHTML&CSSテンプレート20選>https://biz.moneyforward.com/blog/20949/]]
-[[テンプレートNo.001タイプのマニュアル>https://f-tpl.com/manual_001/]]
-[[ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめ>https://photoshopvip.net/97481#slide]]
-[[3分で丸わかり!HTMLで画像をリンクにする簡単な方法とは>https://www.sejuku.net/blog/85388]]
-[[HTML・CSSで背景画像を画面いっぱいに全画面表示する方法!>https://qumeru.com/magazine/240]]
-[[【HTML div】divタグとは?使い方を基礎から徹底解説|HTML&CSS入門>https://web-camp.io/magazine/archives/27528]]
***webフォント
-[[【まとめ】Webフォントの使い方!完全ガイド 初級編【2020年版】>https://b-risk.jp/blog/2020/06/webfont/#link01]]
***解像度
-[[Photoshopでjpgのdpiを指定して書き出す方法とjpgの解像度を調べる方法>https://matome.bgah.jp/jpg-dpi/]]
-[[WebデザインやSEOを向上させる画像最適化の方法とは?>https://www.jimdo.com/jp/optimize-website-images-for-better-design-seo/]]
~
**2021.06.25
***制作
***ロゴ制作
-[[ロゴデザイン>https://drive.google.com/file/d/1eOwq5pIiE5wrW6sLLY6bdg-Im_h4wlKW/view?usp=sharing]]
~
***更新
-[[web_デザインカンプ(仮)>https://drive.google.com/drive/folders/1GTltDjMNK7f231LVdJFarp9RRVGArJZ9?usp=sharing]]
~
***調査
-[[現役デザイナーが解説!フッターデザインの参考事例と注意点【2021年最新版】>https://web-kanji.com/posts/footer-design]]
-[[I/O 3000>https://io3000.com/]]
-[[Pinterest>https://www.pinterest.jp/]]
~
**2021.06.17
***制作
|#image(大村雅人/卒業研究I/4.jpg)|
~
-[[加工写真>https://drive.google.com/drive/folders/1KjFBG-RMFjjb5WiyDoGWOXs_xWLUQu8a?usp=sharing]]
-[[撮影写真一覧>https://drive.google.com/drive/folders/1aQKTziSDcChH3dMe3TRm8-1tKe-LaZTQ?usp=sharing]]
***調査
-[[【Photoshop】「レイヤー効果」だけで超簡単に文字や画像を背景になじませる方法>https://r-chapter.com/adobe-creative-cloud/photoshop-application/%E8%B6%85%E7%B0%A1%E5%8D%98%E3%81%AB%E6%96%87%E5%AD%97%E3%82%84%E7%94%BB%E5%83%8F%E3%82%92%E8%83%8C%E6%99%AF%E3%81%AB%E3%81%AA%E3%81%98%E3%81%BE%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95]]
-[[Photoshopで写真を壁に描いたように加工する方法>https://hashibaminone.com/2019/10/03/photoshop%E3%81%A7%E5%86%99%E7%9C%9F%E3%82%92%E5%A3%81%E3%81%AB%E6%8F%8F%E3%81%84%E3%81%9F%E3%82%88%E3%81%86%E3%81%AB%E5%8A%A0%E5%B7%A5%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/]]
~
**2021.06.16
***制作
***ロゴ制作
-[[web_ロゴ>https://drive.google.com/file/d/1VrGHp04E85n9N2mibPbrUM7gLhlfWvJB/view?usp=sharing]]
***更新
-[[web_デザインカンプ(仮)>https://drive.google.com/file/d/147_2wdFOibrAn6uy-O-d7fDszGVvc6cz/view?usp=sharing]]
~
**2021.06.15
***タイトル決め
-Ghost
-意味:実際には存在しない架空の写真を載せるから
~
***制作
-[[web_デザインカンプ(仮)>https://drive.google.com/drive/folders/1AoIWDCkw0n_gtkYXtRJm0dcby4YaDwEM?usp=sharing]]
-[[web_ワイヤーフレーム(仮)>https://drive.google.com/drive/folders/1Zb04BNjJbDLmyjCwjmQ8TJ0ARwgNsvqo?usp=sharing]]
-[[web_サイトマップ(仮)>https://drive.google.com/file/d/1hwnK75Zi9qnafFkmrlnJqDrq5liC2EsQ/view?usp=sharing]]
~
***調査
***サイトマップ
-[[Webサイト制作で参考になるサイトマップのデザインまとめ>https://www.kerenor.jp/design-for-sitemap/]]
~
***ワイヤーフレーム
-[[WEBデザインでよく聞く「カラム」について>https://www.attend.jp/desine_170829]]
-[[HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ>http://websae.net/wireframe-20150303/]]
-[[ワイヤーフレームの作り方完全ガイド【サンプル付き】>https://web-kanji.com/posts/making-wireframe]]
~
***デザインカンプ
-[[【見本あり】デザインカンプの作り方とコツを現役webデザイナーが解説>https://koredake-design.com/design-comp-kotsu/]]
-[[【かんたん】デザインカンプの作り方、0から丁寧にわかりやすく図解します!>https://mogumogu-design.com/make-design-comprehensive/]]
-[[Webサイトにおける文章を読みやすくするデザインのポイントについて>https://www.weblab.co.jp/staff/creator/8344.html]]
-[[デザインから感じる「印象」を詳しく解説!企業イメージをWebサイトにうまく反映したサイト4選>https://www.climarks.com/column/20170208.html]]
~
***タイトル決め
-[[事例に学ぶ!集客できるサイト名の決め方と9つのポイント>https://hero-biz.com/website-name/]]
~
***参考webデザイン集
-https://liginc.co.jp/416443
~
~
**2021.05.19
***制作
|#image(大村雅人/卒業研究I/3.jpg)|
***調査
***ギャラリーサイト集
-https://andspace.net/blog/sitemap/
***サイトマップの作り方
-https://andspace.net/blog/sitemap/
~
**2021.05.12
***テーマ案
-福岡市の街の標識や看板をグラフィティ化した写真を載せるサイトを制作
~
***試作
|49|2|49|c
|#image(大村雅人/卒業研究I/1.jpg)| |#image(大村雅人/卒業研究I/2.jpg)|
**2021.05.11
***グラフィティとは
-グラフィティ (graffiti) は、エアロゾールアート (aerosol art) ともいい、スプレーやフェルトペンなどを使い、壁などに描かれた図像のことである。グラフィティを描く者のことを、ライター (writer) やペインター (painter) という。日本ではグラフィティを落書き(scribble)と言い表すこともある。
~
-語源はイタリア語の「graffio」からきていて、“引っかくこと”や“引っかれたもの”などの意味を持ちます。さらに遡るとギリシャ語の「graphein」(=書く、描く、引っかく)になり、古代におけるグラフィティとは尖ったものやチョーク、石炭などを使って壁を引っかいて描いたものを意味したそうです。
~
***グラフィティの歴史
***1800年代
-1800年代後半にはアメリカでBozo Texinoと鉄道員たちが工業用クレヨンを使い、自分たちの物語や時間を知らない人たちと共有するために、移動する列車にグラフィティを描いた。それはモニカー(Moniker)と呼ばれる技術で描かれており、初期のモダングラフィティ作品の一つとされている。
~
***1900年代
-第2次世界大戦中と終戦後の1940年辺りは、坊主頭と長い鼻の男が壁越しにこちらを見ている画に「Kilroy was here」(=キルロイはここにいた)と描かれたものが流行り、トラックやタンク、船やトイレなどあらゆるところで見られたそうです。勇気やプライド、激励を意味して軍人達を勇気づけたシンボルとされています。
~
-1960年代に入ると、55年に亡くなったジャズ界のサックスフォニストの巨匠、チャーリー・パーカーへ追悼の意を込めて、「Bird Lives」(「Bird」はチャーリー・パーカーのあだ名)のグラフィティがペンシルベニア州はフィラデルフィアの街中で見られるようになりました。
~
-1970年代にニューヨークのダウンタウンで始まったとされ、スプレーやフェルトペンなどを用いて壁や電車などに落書きをすることから始まったとされる。
~
-70年初頭、グラフィティムーブメントの中心はフィラデルフィアからニューヨークに移り、なかでもマンハッタンの155丁目から上のワシントンハイツと呼ばれる地区やブロンクスをメインに盛りあがりました。TAKI 183やTracy 168、Stay High 149、Dondi、Phase 2など、数多くのライター達が名声を得るためにこぞって地下鉄の電車などに自分の名前を“ボム” して(=描いて)競い合い、それがブルックリンやクイーンズ、ダウンタウンなど他の地域に広がり、色んなスタイルや新しいアイデアが生まれたのです。
~
-1980年代には、ダウンタウンの黒人文化とされていたNYのグラフィティが、アッパーミドルの白人文化へ吸収される形で、前衛芸術として認められるようになり、それは映画『ワイルド・スタイル』(1983)や『スタイル・ウォーズ』(1983)などでフィクションを交えながら描かれている。
~
***グラフィティの種類(描き方)
-タグ(tag)
--グラフィティライターの名前やサインのこと。
~
-スローアップ(throw-up)
--2色ほどで書かれ、アウトラインで構成されたもの。
~
-ブロックバスタ(Block Buster)
--ブロック状の文字で書かれた巨大なグラフィティ。短時間で広範囲に書くことに適しているとされています。
~
-ピース(Piece)
--3色以上使い、タグまで添えられたものなど、完成されたグラフィティ。マスターピースとも言うそうです。
~
-ワイルドスタイル(Wild Style)
--巧妙なスローアップで、複雑に組み合わされたものなので、ライター以外の人も読むことが出来ないものが多いそうです。
~
~
***参照リンク
-[[グラフィティの歴史や書き方を画像で解説!アーティストも>https://dews365.com/archives/183473.html]]
-[[wiki>https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%86%E3%82%A3#%E6%AD%B4%E5%8F%B2]]
-[[ヒップホップのグラフィティカルチャー、古代からNYへの壮大な歴史>https://allabout.co.jp/gm/gc/462873/]]
**2021.05.06
***テーマ案
-ロゴ×塗りつぶす
~
-有名ブランドのロゴをグラフィティ風に制作したものを載せるサイトを作る。
-ロゴのデザインの重要性、グラフィティのかっこよさを伝えるため
~
***参考リンク
-[[マッシュアップしたロゴデザインの比較サイト>https://blog.btrax.com/jp/logo-mashup/]]
-[[logo制作>https://pin.it/3H6zB1j]]
~
**2021.04.22
***テーマ案
-グラフィティ×webサイト
--自分で好みのグラフィティをカスタマイズできるサイト
~
***参考リンク
-[[野村麗奈/卒業研究Ⅰ>http://design.kyusan-u.ac.jp/socialdesign/?%E9%87%8E%E6%9D%91%E9%BA%97%E5%A5%88/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6I]]
-[[アイコンメーカー>http://furrytail.sakura.ne.jp/ext/iconmaker/]]
-[[キャラクターメイカー>https://picrew.me/]]

***既存サイト
-[[有料グラフィティ変換サイト>https://www.graffiticreator.net]]
-[[無料グラフィティ変換サイト>https://fontmeme.com/ja/font-graffiti-style/]]
-[[テキストデザイン変換サイト1>https://fontmeme.com/ja/font-graffiti-style/]]
-[[テキストデザイン変換サイト2>https://ja.cooltext.com]]
~
**2021.04.20
***テーマ再考
***参考リンク
-[[神戸アートビレッジセンター>https://www.kavc.or.jp/report/3142/]]
-[[ゴミがアート作品に!ある産廃処理業者の挑戦が集めた予想外の注目>https://diamond.jp/articles/-/221177]]
~
**2021.04.16
***テーマ案
-落書き問題×Graphic design&web design
--福岡市のリーガルウォールを設置した体験型の架空の店のDTPや簡単なwebサイトを展開
~
***参考リンク
-[[水戸のリーガルウォール>http://www.asahi-net.or.jp/~up5t-iisk/23graffiti/01.html]]
-[[大阪のリーガルウォール>https://www.wallshare-inc.com/]]
~
~
~