#author("2021-07-26T18:34:59+09:00","default:member","member")
*Ghost
福岡市をGraffittiで塗りつぶしたギャラリーサイト
#image(FV2.jpg)
-''Project Director''
-'''Keywords：Graffiti, Web, '''
~
**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};//
-福岡市内の店の名前や看板などに落書きしたかのように見える加工した写真を掲載するギャラリーサイト
~
***Background and Purpose
//&color(red){プロジェクトの背景と目的};//
-落書きが犯罪になっている今の世の中で、もし福岡の有名な場所やそうでない場所に落書きされていたらどのような雰囲気になるか知るため。
~
***Concept
//&color(red){基本的な考え方、枠組み、視点など};//
-挿入するグラフィティは写真と同化するくらい加工する
-黒を基調とした見やすくてかっこいいサイトを制作
~
***Output
//&color(red){成果物の直接掲載またはリンク誘導};//
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};//
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};//
-加工済みの写真10~30枚
--[[加工写真>https://drive.google.com/drive/folders/1KjFBG-RMFjjb5WiyDoGWOXs_xWLUQu8a?usp=sharing]]
--[[撮影写真一覧>https://drive.google.com/drive/folders/1aQKTziSDcChH3dMe3TRm8-1tKe-LaZTQ?usp=sharing]]
-動画5~10本（予定）
-webサイト
--[[ロゴデザイン>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
~
***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://nichigopress.jp/ausnews/news_affair/180506/]]
-[[落書き問題に関するメディアへの出演>http://kobayashilab.net/media/graffiti/index.html]]
-[[落書き>https://ameblo.jp/manabunc/entry-12614296332.html]]
-[[電車に落書きで賠償金はいくら？逮捕されたらどんな前科がつく？>https://beeest4u.com/train-graffiti-damage-payment]]
-[[福岡県飯塚市の少年事件 高校生が落書きをして逮捕 不処分を目指す>https://shounenjiken-bengosi.com/fukuokakeniidukashi-syonenjiken-kokosei-rakugaki-taiho-fusyobun-mezasu-bengoshi/]]
-[[落書き行為で準現行犯逮捕。>https://keiji.authense.jp/case/case-31.html]]
-[[落書きの犯罪名は？逮捕の可能性や罰則・捕まった場合の対処法を紹介>https://keiji-pro.com/columns/233/]]
-[[防犯ニュース 世田谷の住宅街で落書き 大学生逮捕>http://bouhan-cam.net/news/20170809_92.html]]
-[[コロナ自粛でも「落書き」あいつぐ 専門家「治安悪化の兆候の一つ」「迅速な対処を」>https://news.nicovideo.jp/watch/nw7251384]]
-[[許せない！ 渋谷・ハチ公前の電車「アオガエル」に落書きが...>https://news.nicovideo.jp/watch/nw2370219]]
-[[地下鉄落書き、樹海の遺体…相次ぐ外国人の非常識動画 「日本はなめられている」>https://www.sankei.com/article/20180130-3UNWKZCPIRODNIOM5L7WRERJ5Y/]]
~
***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】超簡単！スクロールしても背景画像が固定されたままにする方法【プログラミング】>https://onishi-noboru.com/css-how-to-fix-background-image]]
--
~
~
**Project Management
***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};//
-[[スケジュール>https://docs.google.com/spreadsheets/d/1vrNc_r14bvaQrqBhFsUfir_zuNFghWSgB9qZb7UWijw/edit?usp=sharing]]
~
***ToDo
//&color(red){やるべきこと（タスク）を箇条書きにします。};//
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};//
-素材撮影
-グラフィティ制作
%%企画立案%%
%%サイトマップ制作%%
%%ワイヤーフレーム制作%%
-デザイン制作
-コーディング
~
~
~
#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};//
#hr
~
~
**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スライド式サイドバー９選>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(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]]
~
***タイトル決め
-[[事例に学ぶ！集客できるサイト名の決め方と９つのポイント>https://hero-biz.com/website-name/]]
~
***参考webデザイン集
-https://liginc.co.jp/416443
~
~
**2021.05.19
***制作
|#image(3.jpg)|
***調査
***ギャラリーサイト集
-https://andspace.net/blog/sitemap/
***サイトマップの作り方
-https://andspace.net/blog/sitemap/
~
**2021.05.12
***テーマ案
-福岡市の街の標識や看板をグラフィティ化した写真を載せるサイトを制作
~
***試作
|49|2|49|c
|#image(1.jpg)| |#image(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/]]
~
